/* LT Admin, hoja 3 de 3: el cascarón con sus tres bandas (03-UI-UX §5) y las vistas de H0
   (Acceso, Tablero, Ayuda).

   **Mobile-first y las tres bandas completas.** Las media queries son las exactas del sistema base
   (sm 640, lg 1024, xl 1280) y la banda de en medio (640 a 1023, la tablet) es la que se rompe
   sola si nadie la mira: aquí tiene su propia barra superior, no una barra inferior estirada.

   Sin desplazamiento horizontal del cuerpo, nunca: lo ancho se desplaza DENTRO de su contenedor. */

/* ------------------------------------------------------------------- cascarón (banda celular) */
.cascaron { display: flex; flex-direction: column; min-height: 100dvh; }

.contenido {
  flex: 1;
  width: 100%; max-width: 1400px;
  padding: var(--s-4) var(--s-4) 88px;          /* 88px: el alto de la barra inferior fija */
}

/* Barra inferior fija de celular: vidrio donde el navegador lo soporte, opaco donde no. */
.nav-inferior {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}
@supports (backdrop-filter: blur(10px)) {
  .nav-inferior { background: var(--glass-bg); backdrop-filter: blur(10px); }
}
/* "Más" es un BOTÓN y no un enlace con `href="#"`: abre una hoja, no navega a ningún lado, y un
   ancla vacía le miente al lector de pantalla. Comparte el mismo estilo que los enlaces. */
.nav-inferior a, .nav-inferior button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: var(--s-1);
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; color: var(--fg); font-size: var(--t-xs); font-weight: 400;
  text-decoration: none;
}
.nav-inferior a[aria-current="page"] { color: var(--primary-ink); font-weight: 600; }

.nav-superior, .nav-lateral { display: none; }

/* Cabecera de vista: h1 a la izquierda; campana, Ayuda y acciones a la derecha. */
.cabecera-vista {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap; margin-bottom: var(--s-6);
}
/* `flex-wrap` también DENTRO de la fila: a 195 px (el zoom al 200 % de 390) campana +
   Ayuda + el botón de acento piden 201 px contra 163 de ancho útil, y sin envolver
   empujaban el cuerpo de la página en horizontal. */
.cabecera-vista .acciones {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}

/* Banda de la carga histórica (H1b): vive en el cascarón desde H0 y se pinta solo cuando el
   servidor la enciende. Hasta entonces ni siquiera llega al HTML. */
.banda-carga { margin-bottom: var(--s-4); }

/* ------------------------------------------------------------------------ banda tablet (≥ 640) */
@media (min-width: 640px) {
  .contenido { padding: var(--s-6) var(--s-6) var(--s-8); }
  .nav-inferior { display: none; }

  .nav-superior {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-2) var(--s-6);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  @supports (backdrop-filter: blur(10px)) {
    .nav-superior { background: var(--glass-bg); backdrop-filter: blur(10px); }
  }
  .nav-superior .marca { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; }
  .nav-superior .acciones { display: flex; align-items: center; gap: var(--s-2); }
}

/* -------------------------------------------------------------------- banda escritorio (≥ 1024) */
@media (min-width: 1024px) {
  .cascaron { flex-direction: row; }

  /* Zona oscura: sus tokens de foco y tinta ya los redefine `base.css` (.nav). */
  .nav-lateral {
    position: sticky; top: 0; align-self: flex-start;
    display: flex; flex-direction: column; gap: var(--s-1);
    width: 232px; min-width: 232px; height: 100dvh; padding: var(--s-4) var(--s-2);
    background: var(--secondary); color: #94A3B8;
    overflow-y: auto;
  }
  .nav-lateral .marca {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3); margin-bottom: var(--s-4);
    color: #FFFFFF; font-weight: 700;
  }
  .nav-lateral a {
    display: flex; align-items: center; gap: var(--s-3);
    min-height: 44px; padding: 0 var(--s-3);
    border-left: 3px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: inherit; font-size: var(--t-base); text-decoration: none;
  }
  .nav-lateral a:hover { background: rgb(255 255 255 / .06); }
  .nav-lateral a[aria-current="page"] {
    color: #FFFFFF; font-weight: 600;
    border-left-color: var(--accent);          /* barra de 3 px: relleno, no texto */
    background: rgb(255 255 255 / .08);
  }
  .nav-superior { display: none; }

  .marco { flex: 1; min-width: 0; }           /* min-width: 0 = la tabla ancha no empuja la página */
  .contenido { padding: var(--s-6); }
}

/* -------------------------------------------------------------------------- vista 1 · Acceso */
.acceso {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100dvh; padding: var(--s-4); background: var(--bg);
}
.acceso-tarjeta {
  width: min(400px, 100%);
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-card);
}
.acceso-marca {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: var(--t-lg); font-weight: 700;
}
.acceso-tarjeta form { display: flex; flex-direction: column; gap: var(--s-4); }
.acceso-tarjeta .btn[type="submit"] { width: 100%; }
/* El campo y su botón "Mostrar" comparten renglón; el campo se lleva el espacio que sobra. */
.campo-con-boton { display: flex; gap: var(--s-2); align-items: stretch; }
.campo-con-boton > input { flex: 1; min-width: 0; }
.acceso-pie { font-size: var(--t-sm); color: var(--muted-fg); text-align: center; }

/* ------------------------------------------------------------------------- vista 2 · Tablero */
/* Celular: las cifras van como lista tipo estado de cuenta, en renglones de 44 px (6.4). */
.cifras-lista { display: flex; flex-direction: column; }
.cifras-lista > li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 44px; padding: var(--s-2) 0; border-bottom: 1px solid var(--border);
}
.cifras-lista > li:last-child { border-bottom: 0; }
.cifras-lista .etiqueta { font-size: var(--t-base); font-weight: 500; }
.cifras-lista .cifra { font-size: var(--t-lg); font-weight: 600; }

.cifras { display: none; }

@media (min-width: 640px) {
  .cifras-lista { display: none; }
  .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .cifras .kpi .cifra { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
  .kpi-destacada { grid-column: span 2; }
}
@media (min-width: 1280px) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
}

.seccion { margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); }
.seccion > h2 { font-size: var(--t-lg); }

/* --------------------------------------------------------------------------- vista 17 · Ayuda */
.ayuda h3 { margin-top: var(--s-6); }
.ayuda h3:first-child { margin-top: 0; }
.ayuda p + dl { margin-top: var(--s-3); }

/* ------------------------------------------------------- 12b Catálogos, 14 Contactos, 9b Arranque */
/* Los bloques de una vista (los chips que cambian de sección) se desplazan **dentro** de su
   contenedor: en celular nunca empujan el cuerpo de la página (03 §9 punto 7). */
.bloques {
  display: flex; gap: var(--s-2); margin-bottom: var(--s-4);
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.bloques > .chip-filtro { flex: 0 0 auto; }
.bloques > [aria-current="page"] { background: var(--primary-bg); color: var(--primary-ink); }

/* Una lista de fichas (proveedores, propuestas, contactos): una columna en celular y dos desde
   tablet. Nunca una tabla con scroll horizontal (6.5 no entra en H0). */
.lista-registros { display: grid; gap: var(--s-3); }
@media (min-width: 768px) {
  .lista-registros { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
}
.lista-registros h3 { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.lista-simple > li { padding-bottom: var(--s-2); border-bottom: 1px solid var(--border); }
.lista-simple > li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------- 11 Perfil */
/* El QR del enrolamiento. El SVG viene con su tamaño en milímetros (unos 33 mm), que a 390 px de
   ancho ya cabe; el `max-width` es el cinturón para el día que un secreto más largo lo haga crecer,
   y el fondo blanco lo pone el propio SVG para que se lea igual en tema oscuro. */
.qr-caja { display: flex; justify-content: center; }
.qr-caja > svg { width: auto; max-width: 100%; height: auto; }

/* La clave para teclear cuando la cámara no lee el código: monoespaciada y con espacio para
   partirse en dos renglones en celular sin desbordar. */
.clave-manual { text-align: center; font-family: var(--font-mono); word-break: break-all; }

/* Los ocho códigos de respaldo. En rejilla y monoespaciados: se leen en voz alta y se copian a
   mano, y en una sola columna se pierde el renglón. */
.respaldos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
@media (min-width: 480px) { .respaldos { grid-template-columns: 1fr 1fr; } }
.respaldo {
  font-family: var(--font-mono); font-size: var(--t-base); letter-spacing: .08em;
  padding: var(--s-2) var(--s-3); border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface-2); text-align: center;
}

/* Una alerta de la matriz de avisos: su nombre arriba y sus canales en fila. Sin `fieldset` con
   borde: son cuarenta y dos y el marco los volvería ilegibles. */
.alerta-pref { border: 0; margin: 0; padding: 0 0 var(--s-3); border-bottom: 1px solid var(--border); }
.alerta-pref > legend { font-size: var(--t-sm); font-weight: 500; padding: 0; }
@media (min-width: 480px) { .alerta-pref { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } }

/* ------------------------------------------------------------------------- 10 Bitácora */
/* La línea de tiempo de 6.14: rejilla `fecha mono | nodo | texto`. El nodo lleno marca el hecho;
   la línea que los une la dibuja el `::before` del propio nodo, así que agregar un renglón no pide
   tocar nada más. En celular la fecha va arriba y la rejilla se vuelve de una columna. */
.bitacora { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.bitacora > li { display: grid; grid-template-columns: 1fr; gap: var(--s-1); }
.bitacora-fecha {
  font-family: var(--font-mono); font-size: var(--t-xs); line-height: var(--lh-xs);
  color: var(--muted-fg); font-variant-numeric: tabular-nums;
}
.bitacora-nodo { display: none; }
.bitacora-texto { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
/* El nombre del registro tocado viene de la base y puede no traer un solo espacio
   (`(arranque.propuestas_sugeridas)`): sin `anywhere` pedía 239 px a 195 de ancho y
   desplazaba la página. Misma razón que en `.datos > dd`. */
.bitacora-texto p { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .bitacora > li { grid-template-columns: max-content 12px 1fr; gap: var(--s-3); align-items: start; }
  .bitacora-nodo {
    display: block; position: relative; width: 12px; height: 12px; margin-top: 6px;
    border-radius: var(--r-pill); background: var(--primary-bg);
    border: 2px solid var(--border-strong);
  }
  .bitacora > li:not(:last-child) .bitacora-nodo::before {
    content: ""; position: absolute; left: 50%; top: 12px; width: 1px;
    height: calc(100% + var(--s-4)); background: var(--border); transform: translateX(-50%);
  }
}

/* Un campo del antes y después. El que de verdad cambió lleva una barra al lado: en una lista de
   quince campos, los dos que se movieron se pierden si todos se ven igual. */
.cambio-campo-movido { border-left: 3px solid var(--accent-text); padding-left: var(--s-3); }