/* ═══════════════════════════════════════════════
   VIEWS.CSS — Estilos de vistas específicas
   SharpRestore v1.1.2
═══════════════════════════════════════════════ */

/* ── VIEW HEADER ─────────────────────────────── */
.view-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap;
}
.view-title {
  font-family: var(--font-head); font-size: 1.8rem; color: var(--text);
  letter-spacing: 1px; line-height: 1;
}
.view-subtitle { font-size: .82rem; color: var(--text2); margin-top: .25rem; font-family: var(--font-mono); }
.view-actions  { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── DASHBOARD GRID ──────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.col-8  { grid-column: span 8; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-12 { grid-column: span 12; }

/* ── ACTIVITY LIST ───────────────────────────── */
.act-list { display: flex; flex-direction: column; }
.act-item {
  display: flex; gap: .85rem; padding: .7rem 0;
  border-bottom: 1px solid var(--border2);
}
.act-item:last-child { border-bottom: none; }
.act-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: .45rem;
}
.act-dot.ok   { background: var(--ok); }
.act-dot.warn { background: var(--warn); }
.act-dot.err  { background: var(--err); }
.act-dot.info { background: var(--info); }
.act-dot.gray { background: var(--text3); }
.act-desc  { font-size: .84rem; color: var(--text2); flex: 1; line-height: 1.4; }
.act-user  { font-size: .75rem; color: var(--p1); font-weight: 500; }
.act-time  { font-size: .72rem; color: var(--text3); font-family: var(--font-mono); white-space: nowrap; }

/* ── CRITICOS LIST ───────────────────────────── */
.crit-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid var(--border2);
}
.crit-item:last-child { border-bottom: none; }
.crit-icon { font-size: 1rem; width: 28px; text-align: center; flex-shrink: 0; }
.crit-info { flex: 1; min-width: 0; }
.crit-info p    { font-size: .84rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crit-info span { font-size: .72rem; color: var(--text3); font-family: var(--font-mono); }

/* ── SEGUIMIENTO FILTROS ─────────────────────── */
.seg-filters {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.seg-filter-btn {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); border-radius: 20px; padding: .3rem .85rem;
  font-size: .78rem; font-family: var(--font-mono); cursor: pointer;
  transition: all var(--t); letter-spacing: .5px;
}
.seg-filter-btn:hover { border-color: rgba(255,255,255,.2); color: var(--text); }
.seg-filter-btn.active {
  background: rgba(200,160,0,.15); border-color: var(--p1);
  color: var(--p1); font-weight: 500;
}

/* ── CHART WRAP ──────────────────────────────── */
.chart-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 1rem 0;
}
.chart-wrap canvas { max-height: 220px; }

/* ── STALE EQUIPOS ───────────────────────────── */
.stale-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border2);
}
.stale-item:last-child { border-bottom: none; }
.stale-info { flex: 1; min-width: 0; }
.stale-info p    { font-size: .84rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stale-info span { font-size: .72rem; color: var(--text3); font-family: var(--font-mono); }
.stale-days {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
  color: var(--warn); background: rgba(200,160,0,.12);
  padding: 2px 8px; border-radius: 20px; flex-shrink: 0;
}

/* ── NOTIFICACIONES VIEW ─────────────────────── */
.notif-view-item {
  display: flex; gap: 1rem; padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--border2); align-items: flex-start;
  transition: background var(--t);
}
.notif-view-item.unread { background: rgba(200,160,0,.03); }
.notif-view-item:hover  { background: var(--bg3); }
.notif-type-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.notif-type-icon.info    { background: rgba(58,127,168,.15);  color: var(--info); }
.notif-type-icon.warn    { background: rgba(200,160,0,.15);   color: var(--warn); }
.notif-type-icon.error   { background: rgba(224,112,96,.15);  color: var(--err);  }
.notif-type-icon.success { background: rgba(90,158,111,.15);  color: var(--ok);   }

/* ── LOGIN ───────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; padding: 2rem;
  background: radial-gradient(ellipse at 20% 50%, rgba(14,42,82,.6) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(200,160,0,.05) 0%, transparent 50%),
              var(--bg);
}
.login-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.login-head {
  padding: 2rem 2rem 1.5rem; text-align: center;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(14,42,82,.4) 0%, transparent 100%);
}
.login-logo {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: linear-gradient(135deg, #1a3a6e, #0e2a52);
  border: 1px solid rgba(100,160,255,.2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.login-logo img { width: 32px; height: 32px; object-fit: contain; }
.login-title { font-family: var(--font-head); font-size: 1.8rem; color: var(--p1); letter-spacing: 3px; }
.login-sub   { font-size: .75rem; color: var(--text3); font-family: var(--font-mono); margin-top: .25rem; }
.login-body  { padding: 1.75rem 2rem; }
.login-tabs  {
  display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem;
}
.login-tab {
  flex: 1; padding: .55rem; text-align: center; font-size: .82rem;
  color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent;
  transition: all var(--t); font-family: var(--font-mono); letter-spacing: .5px;
}
.login-tab.active { color: var(--p1); border-bottom-color: var(--p1); }
.login-panel { display: none; }
.login-panel.active { display: block; }
.login-footer {
  padding: 1rem 2rem; text-align: center; border-top: 1px solid var(--border);
  font-size: .75rem; color: var(--text3); font-family: var(--font-mono);
}

/* ── ADMIN PLACEHOLDER ───────────────────────── */
.placeholder-view {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 300px; gap: 1rem;
  color: var(--text3); text-align: center;
}
.placeholder-view i    { font-size: 3rem; opacity: .3; }
.placeholder-view h3   { font-size: 1.2rem; color: var(--text2); }
.placeholder-view p    { font-size: .85rem; max-width: 320px; line-height: 1.6; }
.placeholder-view .chip { margin-top: .5rem; }

/* ════════════════════════════════════════════════
   v1.1.6 - REGISTRO DE ERRORES (vista de tarjetas)
══════════════════════════════════════════════════ */
.err-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.err-loading {
  grid-column: 1 / -1;
  display: flex; justify-content: center;
  padding: 3rem;
}
.err-card {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
  padding: 1rem;
  display: flex; flex-direction: column;
  gap: .65rem;
  transition: border-color .15s, transform .15s;
}
.err-card:hover {
  border-color: var(--p1);
  transform: translateY(-1px);
}
.err-card-head {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.err-codigo {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: .95rem;
  color: var(--p1);
  background: rgba(200, 160, 0, .08);
  padding: .3rem .55rem;
  border-radius: 4px;
  border: 1px solid rgba(200, 160, 0, .2);
}
.err-card-actions { display: flex; gap: .25rem; }
.err-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.err-chip {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  background: var(--bg3);
  color: var(--text2);
  padding: .2rem .5rem;
  border-radius: 10px;
  border: 1px solid var(--bg3);
  white-space: nowrap;
}
.err-chip-more {
  background: rgba(33, 150, 243, .08);
  border-color: rgba(33, 150, 243, .25);
  color: var(--info);
  cursor: help;
}
.err-bloque { display: flex; flex-direction: column; gap: .25rem; }
.err-bloque-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text3);
  font-weight: 600;
}
.err-bloque-text {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-word;
}
.err-card-foot {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: .25rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--bg3);
}
.err-ver-mas {
  background: none; border: none;
  color: var(--p1);
  font-size: .75rem;
  cursor: pointer;
  padding: 0;
}
.err-ver-mas:hover { text-decoration: underline; }
#err-detail-panel {
  display: none;
  background: var(--bg2);
  border: 1px solid var(--p1);
  border-radius: 8px;
  padding: 1.1rem;
  margin-bottom: 1rem;
}
.err-detail-header {
  display: flex; align-items: center;
  gap: .5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--bg3);
  flex-wrap: wrap;
}
.err-detail-section { display: flex; flex-direction: column; gap: .35rem; }
.err-detail-label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.err-detail-text {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text1);
  background: var(--bg1);
  padding: .8rem 1rem;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 640px) {
  .err-grid { grid-template-columns: 1fr; gap: .75rem; }
  .err-card { padding: .85rem; }
}

/* ═══════════════════════════════════════════════════════════
   v1.1.9 N48-4 — Equipos en Uso: la tabla con los descriptores
   nuevos (zona, departamento, sucursal, sección, marca).

   El problema era que `.tbl` tiene `width:100%`: con muchas
   columnas la tabla nunca supera el ancho del contenedor, así
   que el `overflow-x:auto` de `.tbl-wrap` no llegaba a
   activarse y en vez de deslizarse, las celdas se aplastaban —
   el modelo se partía a la mitad.

   Acá se le da un ancho mínimo propio: la tabla crece, el
   wrapper desliza de verdad, y las dos primeras columnas
   quedan fijas para no perder de vista de quién es cada fila.
   Va scopeado a #view-parque a propósito: `.tbl` la usan todas
   las pantallas y no se toca.
   ═══════════════════════════════════════════════════════════ */
#view-parque .tbl-wrap { overflow-x: auto; overflow-y: visible; }
/* `--pq-chk` es el ancho de la columna de la casilla. El ancho de esa
   columna y el corrimiento de la que queda fija al lado salen de ESTA
   misma variable: así no pueden desalinearse (ver N53 más abajo). */
#view-parque .pq-tbl { width: max-content; min-width: 100%; --pq-chk: 2.6rem; }
#view-parque .pq-tbl th,
#view-parque .pq-tbl td { white-space: nowrap; padding-left: .7rem; padding-right: .7rem; }

/* Modelo y ubicación son los que más varían: se les deja un techo
   y el texto completo queda en el title, no cortado sin aviso. */
#view-parque .pq-tbl .pq-cortar {
  max-width: 15rem; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════
   v1.1.9 N53-6 — la tabla se montaba al deslizar.

   Tres cosas estaban mal, y las tres se ven SOLO con la tabla
   deslizada; en reposo la pantalla parecía sana:

   1. `background: var(--bg1)`. Esa variable no existe en el
      tema — las que hay son --bg, --bg2, --bg3 y --bg4. Un
      `background` con una variable inexistente no queda gris:
      queda TRANSPARENTE. Las dos columnas fijas eran vidrio y
      las columnas que pasaban por debajo se leían encima del
      nombre del cliente. Eso es lo que se veía como que una
      columna "se monta" sobre la otra.
   2. `left: 2.4rem` era una suposición del ancho de la casilla.
      El ancho real medido era 35.4px (2.21rem), así que la
      columna del cliente arrancaba 3px más a la derecha de donde
      termina la casilla y le tapaba 3px a Sucursal incluso sin
      deslizar. Ahora las dos medidas son la misma variable.
   3. Abajo de 900px una regla global de v167
      (`.tbl th:nth-child(4)` y `(7)`, display:none) se come dos
      columnas de ESTA tabla: la 4 es Zona y la 7 es "Ubicación
      en cliente". No se cortaban: desaparecían enteras, encabezado
      incluido. Acá se reponen — esta tabla desliza, no necesita
      esconder columnas. La regla global queda como está: la usan
      las demás pantallas.
   ═══════════════════════════════════════════════════════════ */
/* Columnas fijas: la casilla y el cliente. */
#view-parque .pq-tbl th:nth-child(1),
#view-parque .pq-tbl td:nth-child(1) {
  position: sticky; left: 0; z-index: 2; background: var(--bg2);
  width: var(--pq-chk); min-width: var(--pq-chk); max-width: var(--pq-chk);
  padding-left: .5rem; padding-right: .5rem;
}
#view-parque .pq-tbl th:nth-child(2),
#view-parque .pq-tbl td:nth-child(2) {
  position: sticky; left: var(--pq-chk); z-index: 2; background: var(--bg2);
}
#view-parque .pq-tbl th:nth-child(1),
#view-parque .pq-tbl th:nth-child(2) { background: var(--bg3); z-index: 3; }
/* El hover también tiene que ser opaco: el hover de `.tbl` es un blanco
   al 2.5% y por ahí se volvía a transparentar lo que pasa por debajo. */
#view-parque .pq-tbl tbody tr:hover td:nth-child(1),
#view-parque .pq-tbl tbody tr:hover td:nth-child(2) { background: var(--bg3); }
#view-parque .pq-tbl td:nth-child(2)::after,
#view-parque .pq-tbl th:nth-child(2)::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--border);
}

/* Los descriptores en gris: son el contexto, no el dato principal. */
#view-parque .pq-desc { color: var(--text3); font-size: .8rem; }
#view-parque .pq-vacio { color: var(--text3); opacity: .5; }

@media (max-width: 900px) {
  /* En pantalla chica las columnas fijas estorban más de lo que ayudan. */
  #view-parque .pq-tbl th:nth-child(1), #view-parque .pq-tbl td:nth-child(1),
  #view-parque .pq-tbl th:nth-child(2), #view-parque .pq-tbl td:nth-child(2) { position: static; }
  /* N53-6 punto 3: reponer Zona y "Ubicación en cliente", que la regla
     global de v167 esconde en pantalla chica. */
  #view-parque .pq-tbl th:nth-child(4), #view-parque .pq-tbl td:nth-child(4),
  #view-parque .pq-tbl th:nth-child(7), #view-parque .pq-tbl td:nth-child(7) { display: table-cell; }
}