/* ============================================================================
 * consola.css — hoja única de la Consola de Licencias (SISCOTRAN_WEB).
 *
 * Rediseño 21/09/2026: páginas reales (sin iframe), riel de módulos en tablet y
 * escritorio, barra de pulgar en celular, tablero de flota como pieza central.
 *
 * Reglas que sostienen la hoja:
 *  - Todo el color sale de los tokens de :root. Ninguna plantilla lleva <style>.
 *  - El estado de un equipo se lee dos veces: color (riel/segmento) y texto.
 *    Un color de estado nunca va solo.
 *  - Elevación solo para lo que flota (diálogos). Las tarjetas llevan borde.
 *  - Objetivos táctiles de 44 px; inputs a 16 px (Safari en iPad hace zoom por debajo).
 *  - Sin fuentes remotas: la PWA debe abrir sin red.
 * ========================================================================== */

:root {
    /* Cromo oscuro, herencia del launcher (LauncherUI). */
    --carbon:        #0F1113;
    --carbon-2:      #1B1B1B;
    --acento:        #42A5F5;   /* azul sobre oscuro */
    --azul:          #1E88E5;   /* acción primaria sobre claro */
    --azul-fuerte:   #1668B4;
    --azul-suave:    #E3F1FC;

    /* Superficie */
    --papel:         #EEF1F5;
    --superficie:    #FFFFFF;
    --borde:         #D9E0E8;
    --borde-suave:   #EBEFF3;
    --tinta:         #161D27;
    --tinta-suave:   #5A6776;
    --tinta-tenue:   #8A96A5;

    /* Estados de licencia: el operador ya los tiene aprendidos. */
    --ok:        #1B7F3B;  --ok-bg:      #E4F3E9;
    --aviso:     #B26A00;  --aviso-bg:   #FCF0DC;
    --critico:   #C62828;  --critico-bg: #FBE6E4;
    --neutro:    #5B6B7A;  --neutro-bg:  #E8ECF0;
    --pendiente: #1E88E5;  --pendiente-bg: #E3F1FC;

    /* Tipografía del sistema. */
    --fuente-ui: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fuente-id: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
    --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-26: 26px;

    /* Medidas */
    --toque: 44px;
    --r-control: 6px;
    --r-tarjeta: 10px;
    --r-flotante: 14px;
    --riel-ancho: 92px;
    --barra-inf: 60px;
    --sombra-flotante: 0 18px 48px rgba(9, 14, 20, .30);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; min-height: 100dvh;
    background: var(--papel); color: var(--tinta);
    font-family: var(--fuente-ui); font-size: var(--fs-15); line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
a { color: var(--azul-fuerte); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ============================================================================
 * Marco: riel de módulos + contenido
 * ========================================================================== */

.app { display: grid; grid-template-columns: var(--riel-ancho) 1fr; min-height: 100dvh; }

.nav {
    position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column; align-items: stretch;
    background: linear-gradient(180deg, var(--carbon), var(--carbon-2));
    color: #C9D3DE; padding: 12px 8px; gap: 8px;
}
.nav-marca {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 6px 0 14px; text-decoration: none; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.sello {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--carbon);
    box-shadow: inset 0 0 0 2px var(--acento);
    color: #fff; font-size: 20px; font-weight: 700;
}
.nav-marca small { display: block; font-size: 11px; color: var(--acento); font-weight: 600; letter-spacing: .3px; text-align: center; }
.nav-marca b { font-size: 12px; font-weight: 700; letter-spacing: .4px; }

.nav-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-lista a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 60px; padding: 8px 4px; border-radius: 10px;
    color: #C9D3DE; text-decoration: none; font-size: 12px; font-weight: 600;
}
.nav-lista a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-lista a[aria-current="page"] { background: rgba(66,165,245,.18); color: #fff; }
.nav-lista a[aria-current="page"] .ic { color: var(--acento); }
.ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.nav-pie { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.nav-usuario { font-size: 12px; color: #8FA0B3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-salir { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); padding: 8px 10px; color: #C9D3DE; text-decoration: none; font-size: 13px; font-weight: 600; border-radius: 8px; }
.nav-salir:hover { background: rgba(255,255,255,.08); color: #fff; }

.contenido { min-width: 0; padding: 20px 28px 40px; }

/* Cabecera de página: título y acciones de página. */
.pagina {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin-bottom: 18px;
}
.pagina h1 { font-size: var(--fs-26); font-weight: 700; }
.pagina-sub { margin: 2px 0 0; color: var(--tinta-suave); font-size: var(--fs-14); }
.pagina-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* "Salir" en la cabecera solo existe en celular (el riel no tiene pie ahí). Doble clase: debe ganar a .btn. */
.btn.salir-movil { display: none; }

.volver {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: var(--toque); padding: 0 6px 0 0; margin-bottom: 4px;
    color: var(--azul-fuerte); text-decoration: none; font-size: var(--fs-14); font-weight: 600;
}
.volver .ic { width: 18px; height: 18px; }

/* Avisos tras una acción. */
.aviso {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--r-tarjeta); margin-bottom: 16px;
    font-size: var(--fs-14); border: 1px solid transparent;
}
.aviso.ok  { background: var(--ok-bg);      color: var(--ok);      border-color: #BFE3CB; }
.aviso.err { background: var(--critico-bg); color: var(--critico); border-color: #F2C4BF; }
.aviso .ic { width: 18px; height: 18px; margin-top: 2px; }

/* ============================================================================
 * Tarjetas y texto
 * ========================================================================== */

.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--r-tarjeta); padding: 18px 20px; margin-bottom: 16px;
}
.tarjeta > h2 { font-size: var(--fs-17); font-weight: 700; margin-bottom: 6px; }
.tarjeta-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.tarjeta-cab h2 { font-size: var(--fs-17); font-weight: 700; }
.nota { margin: 0 0 12px; font-size: var(--fs-14); color: var(--tinta-suave); max-width: 70ch; }
.nota:last-child { margin-bottom: 0; }

.id { font-family: var(--fuente-id); font-size: 13px; letter-spacing: .2px; }
.id-largo { font-family: var(--fuente-id); font-size: 12px; word-break: break-all; color: var(--tinta-suave); }
.tenue { color: var(--tinta-suave); }

/* Nombre + identificador debajo: la forma habitual de una fila de empresa o equipo. */
.doble { display: flex; flex-direction: column; gap: 1px; }
.doble b { font-weight: 600; }
.doble .id { color: var(--tinta-suave); }

/* ============================================================================
 * Formularios
 * ========================================================================== */

label { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--tinta-suave); margin: 14px 0 5px; }
.campo:first-child label, form > label:first-child { margin-top: 0; }

input, select, textarea {
    font-family: inherit; font-size: 16px; color: var(--tinta);
    padding: 10px 12px; min-height: var(--toque);
    border: 1px solid var(--borde); border-radius: var(--r-control);
    background: var(--superficie); max-width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--azul); }
input[readonly] { background: var(--papel); color: var(--tinta-suave); }
input.ancho, select.ancho { width: 100%; max-width: 420px; }
input.url { width: 100%; font-family: var(--fuente-id); font-size: 14px; }

.filtro { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.buscar { position: relative; display: inline-flex; align-items: center; }
.buscar .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--tinta-tenue); pointer-events: none; }
.buscar input { padding-left: 38px; width: 220px; }

.acciones-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Fila de campos cortos (cantidad + unidad). */
.en-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.en-linea input[type="number"] { width: 110px; }

/* Atajos de un diálogo: botones que rellenan el formulario. */
.atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }

/* ============================================================================
 * Botones
 * ========================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--toque); padding: 10px 16px;
    border: 1px solid transparent; border-radius: var(--r-control); cursor: pointer;
    font-family: inherit; font-size: var(--fs-14); font-weight: 600; line-height: 1.2;
    color: #fff; text-decoration: none; background: var(--neutro);
    white-space: nowrap;
}
.btn .ic { width: 18px; height: 18px; }
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(.94); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-azul  { background: var(--azul); }
.btn-verde { background: var(--ok); }
.btn-rojo  { background: var(--critico); }
.btn-gris  { background: var(--neutro); }

/* Botón de contorno: acciones secundarias que conviven con la primaria. */
.btn-borde { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.btn-borde:hover { background: var(--papel); filter: none; }
.btn-borde.peligro { color: var(--critico); }
.btn-borde.peligro:hover { background: var(--critico-bg); border-color: #F2C4BF; }

/* Botón de texto: la acción menos importante de un grupo. */
.btn-texto { background: transparent; color: var(--azul-fuerte); padding-left: 8px; padding-right: 8px; }
.btn-texto:hover { background: var(--azul-suave); filter: none; }

.btn-chico { min-height: 36px; padding: 6px 12px; font-size: var(--fs-13); }

/* Botón de ayuda en cabeceras de tabla: un círculo discreto que abre el diálogo de explicación. */
.ayuda {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: -6px 0 -6px 4px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--tinta-tenue);
    cursor: pointer; vertical-align: middle;
}
.ayuda .ic { width: 18px; height: 18px; }
.ayuda:hover, .ayuda:focus-visible { color: var(--azul-fuerte); background: var(--azul-suave); outline: none; }
/* Enlace "¿Qué significa cada columna?": solo en modo ficha, donde la cabecera no se ve. */
.solo-movil { display: none; }

/* ============================================================================
 * Tablero de flota: una barra apilada con los conteos, que filtra al tocarla.
 * Es la única pieza con licencia para llamar la atención en toda la consola.
 * ========================================================================== */

.tablero {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--r-tarjeta); padding: 16px 20px 14px; margin-bottom: 16px;
}
.tablero-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.tablero-cab h2 { font-size: var(--fs-17); font-weight: 700; }
.tablero-total { font-size: var(--fs-14); color: var(--tinta-suave); }
.tablero-total b { font-size: var(--fs-20); color: var(--tinta); font-weight: 700; margin-right: 4px; }

.flota { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; background: var(--borde-suave); }
.flota a, .flota span { display: block; min-width: 3px; }
.flota a:hover { filter: brightness(1.12); }
.flota a:focus-visible { outline-offset: -2px; }
.flota .s-AL_DIA      { background: var(--ok); }
.flota .s-EN_GRACIA   { background: var(--aviso); }
.flota .s-SIN_CONTACTO { background: var(--critico); }
.flota .s-DESACTIVADA { background: var(--neutro); }
.flota .s-SIN_DATOS   { background: #B9C3CE; }

.leyenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.leyenda a {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 6px 12px 6px 10px; border-radius: 999px;
    border: 1px solid var(--borde); color: var(--tinta); text-decoration: none;
    font-size: var(--fs-14); background: var(--superficie);
}
.leyenda a:hover { background: var(--papel); }
.leyenda a[aria-current="true"] { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.leyenda a[aria-current="true"] .punto { box-shadow: 0 0 0 2px #fff; }
.leyenda b { font-weight: 700; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.punto.s-AL_DIA      { background: var(--ok); }
.punto.s-EN_GRACIA   { background: var(--aviso); }
.punto.s-SIN_CONTACTO { background: var(--critico); }
.punto.s-DESACTIVADA { background: var(--neutro); }
.punto.s-SIN_DATOS   { background: #B9C3CE; }
.punto.s-PENDIENTE   { background: var(--pendiente); }

/* ============================================================================
 * Estado: etiqueta de texto (nunca color solo) y riel al canto de la fila.
 * ========================================================================== */

.estado {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-13); font-weight: 600; white-space: nowrap;
}
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.e-AL_DIA      { color: var(--ok); }
.e-EN_GRACIA   { color: var(--aviso); }
.e-VENCIDA, .e-SIN_CONTACTO, .e-BLOQUEADA { color: var(--critico); }
.e-DESACTIVADA, .e-INACTIVO { color: var(--neutro); }
.e-SIN_DATOS   { color: var(--tinta-tenue); }
.e-PENDIENTE   { color: var(--pendiente); }
.e-ACTIVA, .e-ACTIVO { color: var(--ok); }

tr[data-sit] td:first-child { box-shadow: inset 4px 0 0 var(--riel, transparent); }
tr[data-sit="AL_DIA"]      { --riel: var(--ok); }
tr[data-sit="EN_GRACIA"]   { --riel: var(--aviso); }
tr[data-sit="VENCIDA"], tr[data-sit="SIN_CONTACTO"], tr[data-sit="BLOQUEADA"] { --riel: var(--critico); }
tr[data-sit="DESACTIVADA"] { --riel: var(--neutro); }
tr[data-sit="SIN_DATOS"]   { --riel: #B9C3CE; }
tr[data-sit="PENDIENTE"]   { --riel: var(--pendiente); }

/* ============================================================================
 * Tablas
 * ========================================================================== */

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-tarjeta); }

table {
    border-collapse: separate; border-spacing: 0; width: 100%;
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--r-tarjeta); overflow: hidden;
}
th, td { border-bottom: 1px solid var(--borde-suave); padding: 12px 14px; text-align: left; font-size: var(--fs-14); vertical-align: middle; }
th { color: var(--tinta-suave); font-weight: 600; font-size: var(--fs-13); white-space: nowrap; background: var(--superficie); }
td.num, th.num { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #FAFBFC; }
.vacio { text-align: center; color: var(--tinta-suave); padding: 28px 16px; }
.vacio a { font-weight: 600; }

/* Acciones de fila: una primaria y el resto bajo "Más" (en celular) o en línea (escritorio). */
.acc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.acc form { display: inline-flex; margin: 0; }
.mas { position: relative; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mas summary { list-style: none; cursor: pointer; }
.mas summary::-webkit-details-marker { display: none; }
.acc-sec { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ============================================================================
 * Detalle: rejilla de definiciones y encabezado de estado
 * ========================================================================== */

.ficha-estado {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    padding: 16px 20px; border-radius: var(--r-tarjeta); margin-bottom: 16px;
    background: var(--superficie); border: 1px solid var(--borde);
    border-left: 6px solid var(--riel, var(--borde));
}
.ficha-estado[data-sit="AL_DIA"]      { --riel: var(--ok); }
.ficha-estado[data-sit="EN_GRACIA"]   { --riel: var(--aviso); }
.ficha-estado[data-sit="VENCIDA"], .ficha-estado[data-sit="SIN_CONTACTO"], .ficha-estado[data-sit="BLOQUEADA"] { --riel: var(--critico); }
.ficha-estado[data-sit="DESACTIVADA"] { --riel: var(--neutro); }
.ficha-estado[data-sit="SIN_DATOS"]   { --riel: #B9C3CE; }
.ficha-estado .titulo { font-size: var(--fs-20); font-weight: 700; }
.ficha-estado .estado { font-size: var(--fs-15); }
.ficha-estado .datos { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--tinta-suave); font-size: var(--fs-14); }

.def { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.def div { display: flex; flex-direction: column; gap: 2px; padding: 0; }
.def dt { font-size: var(--fs-13); color: var(--tinta-suave); font-weight: 600; }
.def dd { margin: 0; font-size: var(--fs-15); }

/* Rejilla genérica de dos o tres columnas. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px; }

/* ============================================================================
 * Diálogos (popup nativo <dialog>): lo único que flota y lo único con sombra.
 * ========================================================================== */

.dlg {
    border: 0; border-radius: var(--r-flotante);
    padding: 22px 24px; width: min(560px, calc(100vw - 32px));
    box-shadow: var(--sombra-flotante); color: var(--tinta);
}
.dlg.ancha { width: min(900px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(15, 17, 19, .55); }
.dlg h2 { font-size: var(--fs-20); font-weight: 700; margin-bottom: 4px; }
.dlg .sub { margin: 0 0 14px; color: var(--tinta-suave); font-size: var(--fs-14); }
.dlg-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Diálogo de ayuda de columnas: una sección por columna; la elegida desde la cabecera queda resaltada. */
.ayuda-lista { display: grid; gap: 4px; max-height: min(60vh, 520px); overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.ayuda-lista section { padding: 10px 12px; border-radius: var(--r-control); border: 1px solid transparent; }
.ayuda-lista section.destacado { border-color: var(--azul); background: var(--azul-suave); }
.ayuda-lista h3 { font-size: var(--fs-15); font-weight: 700; margin: 0 0 4px; }
.ayuda-lista p { margin: 0 0 6px; font-size: var(--fs-14); color: var(--tinta); }
.ayuda-lista p:last-child { margin-bottom: 0; }
.ayuda-lista ul { margin: 0 0 6px; padding-left: 18px; font-size: var(--fs-14); }
.ayuda-lista li { margin: 2px 0; }
.ayuda-lista .estado { vertical-align: baseline; }

/* Popup "Ver contraseña": la clave grande y en monoespaciada, con botón de copiar al lado. */
.clave-caja { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.clave {
    flex: 1 1 auto; min-width: 0; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--r-control);
    background: var(--papel); font-family: var(--fuente-id); font-size: 20px; letter-spacing: .04em;
    word-break: break-all; user-select: all;
}
.clave-meta { margin: 0 0 4px; font-size: var(--fs-13); color: var(--tinta-suave); }
.clave-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-control); font-size: var(--fs-14); background: var(--aviso-bg); color: var(--aviso); }
.clave-aviso.err { background: var(--critico-bg); color: var(--critico); }
.clave-aviso .ic { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }

/* ============================================================================
 * Menú de opciones (módulo Usuarios) y pestañas
 * ========================================================================== */

.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.opcion {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 18px; min-height: 96px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
    color: inherit; text-decoration: none;
}
.opcion:hover { border-color: var(--azul); }
.opcion .sello { flex: 0 0 44px; width: 44px; height: 44px; }
.opcion-texto { display: flex; flex-direction: column; gap: 4px; }
.opcion-texto b { font-size: var(--fs-17); font-weight: 700; }
.opcion-texto span { font-size: var(--fs-14); color: var(--tinta-suave); }

.tabs { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 2px solid var(--borde); overflow-x: auto; overflow-y: hidden; }
.tab {
    min-height: var(--toque); padding: 10px 16px; margin-bottom: -2px;
    border: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
    background: transparent; cursor: pointer; white-space: nowrap;
    font-family: inherit; font-size: var(--fs-14); font-weight: 600; color: var(--tinta-suave);
}
.tab:hover { background: var(--papel); color: var(--tinta); }
.tab[aria-selected="true"] { color: var(--azul-fuerte); border-bottom-color: var(--azul); }

/* ============================================================================
 * Pantalla de acceso (login y código)
 * ========================================================================== */

.pantalla-acceso {
    min-height: 100dvh; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: linear-gradient(160deg, var(--carbon), var(--carbon-2) 70%, #23262B);
}
.acceso { width: 100%; max-width: 400px; background: var(--superficie); border-radius: var(--r-flotante); box-shadow: var(--sombra-flotante); padding: 28px 26px 26px; }
.acceso-marca { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.acceso-marca .sello { width: 48px; height: 48px; font-size: 24px; border-radius: 12px; }
.acceso h1 { font-size: var(--fs-17); font-weight: 700; }
.acceso p  { margin: 2px 0 0; font-size: var(--fs-13); color: var(--tinta-suave); }
.acceso-form label:first-of-type { margin-top: 0; }
.acceso-form input { width: 100%; }
.acceso-form input.codigo { font-family: var(--fuente-id); font-size: 28px; letter-spacing: .35em; text-align: center; padding: 8px; }
.acceso-btn { width: 100%; margin-top: 20px; }
.acceso .aviso { margin: 14px 0 0; }

/* ============================================================================
 * Tablet y celular
 * ========================================================================== */

/* Tablas → fichas. La unidad de trabajo es un equipo o una empresa, no una fila de celdas. */
@media (max-width: 900px) {
    .contenido { padding: 16px 16px 32px; }
    .pagina h1 { font-size: var(--fs-20); }

    .fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .solo-movil { display: inline-flex; margin-top: 4px; }
    .fichas, .fichas tbody, .fichas tr, .fichas td { display: block; width: 100%; }
    .fichas { border: 0; background: transparent; border-radius: 0; overflow: visible; }
    .fichas tr {
        position: relative; background: var(--superficie); border: 1px solid var(--borde);
        border-radius: var(--r-tarjeta); margin-bottom: 10px; padding: 6px 14px 12px;
        overflow: hidden;
    }
    .fichas tr[data-sit] { border-left: 5px solid var(--riel); }
    .fichas tr[data-sit] td:first-child { box-shadow: none; }
    .fichas tbody tr:hover td { background: transparent; }

    .fichas td { border-bottom: 1px solid var(--borde-suave); padding: 8px 0; display: flex; gap: 12px; align-items: baseline; }
    .fichas td:last-child { border-bottom: 0; }
    .fichas td::before { content: attr(data-etiqueta); flex: 0 0 38%; max-width: 38%; font-size: var(--fs-13); color: var(--tinta-suave); }
    .fichas td.num { text-align: left; }
    .fichas td.vacio { display: block; }
    .fichas td.vacio::before { content: none; }

    /* La primera celda es el nombre de la ficha: sin rótulo, en grande. */
    .fichas td.titular { display: block; padding-top: 10px; font-size: var(--fs-15); }
    .fichas td.titular::before { content: none; }

    /* Acciones: objetivos táctiles a lo ancho. */
    .fichas td.acc { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; }
    .fichas td.acc::before { content: none; }
    .fichas td.acc .btn, .fichas td.acc form, .fichas td.acc .mas { width: 100%; }
    .fichas td.acc form .btn { flex: 1; }
    .mas { flex-direction: column; align-items: stretch; }
    .mas summary { width: 100%; }
    .acc-sec { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 6px; }
    .acc-sec .btn, .acc-sec form { width: 100%; }

    .tab { flex: 1 1 0; text-align: center; padding: 8px 6px; white-space: normal; line-height: 1.2; }
    .acciones-form .btn, .dlg-pie .btn { flex: 1 1 100%; }
    .buscar, .buscar input { width: 100%; }
    .flota { height: 22px; }
}

/* Escritorio y tablet ancha: las acciones secundarias van en línea, sin "Más". */
@media (min-width: 901px) {
    .mas summary { display: none; }
    td.acc { white-space: nowrap; }
    th, td { white-space: nowrap; }
    td.titular, td.titular .doble b { white-space: normal; }
}
/* Botones de fila algo más compactos que los de formulario: hay cuatro por equipo. */
@media (min-width: 901px) {
    .acc .btn { min-height: 38px; padding: 8px 12px; font-size: var(--fs-13); }
}
/* Con ancho de sobra, la fila de acciones no se parte en dos líneas. */
@media (min-width: 1400px) {
    .acc, .acc-sec, .mas { flex-wrap: nowrap; }
}

/* Celular: el riel pasa a barra inferior de pulgar. */
@media (max-width: 767px) {
    .app { grid-template-columns: 1fr; }
    .nav {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; z-index: 20;
        flex-direction: row; align-items: stretch; gap: 0; padding: 0 0 env(safe-area-inset-bottom);
        border-top: 1px solid rgba(255,255,255,.08);
    }
    .nav-marca, .nav-pie { display: none; }
    .nav-lista { flex: 1; flex-direction: row; gap: 0; }
    .nav-lista li { flex: 1 1 0; min-width: 0; }
    .nav-lista a { min-height: var(--barra-inf); border-radius: 0; padding: 8px 2px; font-size: 11px; gap: 3px; }
    .nav-lista a[aria-current="page"] { background: transparent; box-shadow: inset 0 3px 0 var(--acento); }
    .contenido { padding-bottom: calc(var(--barra-inf) + 24px + env(safe-area-inset-bottom)); }
    /* Cabecera en celular: título y "Salir" en la primera línea; las acciones debajo, a lo ancho.
       display:contents hace que los hijos de .pagina-acciones se ordenen como hijos de .pagina. */
    .pagina-acciones { display: contents; }
    .pagina > div:first-child { order: -2; flex: 1 1 0; min-width: 0; }
    .btn.salir-movil { display: inline-flex; order: -1; align-self: flex-start; }
    /* (display:contents no cambia el DOM: los hijos siguen colgando de .pagina-acciones) */
    .pagina-acciones > .btn:not(.salir-movil), .pagina-acciones > form { flex: 1 1 100%; }
    .pagina-acciones > .filtro { flex-wrap: nowrap; }
    .pagina-acciones > .filtro .buscar { flex: 1 1 auto; min-width: 0; }
    .pagina-acciones > .filtro .buscar input { width: 100%; }
    .pagina-acciones > .filtro > .btn { flex: 0 0 auto; }
    .pagina-acciones > .filtro select { flex: 1 1 auto; width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
    .nav, .pagina-acciones, .acc, .filtro { display: none !important; }
    .app { display: block; }
    body { background: #fff; }
}

/* ============================================================================
 * Formularios de ficha (Personal y Usuarios de empresa, 07/10/2026)
 * Un carnet vivo arriba (iniciales + nombre armado mientras se teclea) y los
 * campos agrupados por lo que describen, en rejilla de dos columnas.
 * ========================================================================== */

.e-CESADO { color: var(--critico); }

.formulario { display: grid; gap: 22px; max-width: 880px; }
.grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
.grupo > legend { font-size: var(--fs-15); font-weight: 700; padding: 0; margin-bottom: 4px; }
.grupo > .nota { margin-bottom: 10px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.campos > div { min-width: 0; }
.campos .completo { grid-column: 1 / -1; }
.campos input, .campos select { width: 100%; }
.campos .linea { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.ayuda-campo { margin: 5px 0 0; font-size: var(--fs-13); color: var(--tinta-tenue); }

.carnet {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
    background: var(--papel);
}
.carnet-ini {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--carbon); color: #fff; font-size: var(--fs-20); font-weight: 700; letter-spacing: .5px;
}
.carnet[data-vacio="true"] .carnet-ini { background: var(--neutro-bg); color: var(--tinta-tenue); }
.carnet-texto { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.carnet-nombre { font-size: var(--fs-17); font-weight: 700; overflow-wrap: anywhere; }
.carnet[data-vacio="true"] .carnet-nombre { color: var(--tinta-tenue); font-weight: 600; }
.carnet-sub { font-size: var(--fs-13); color: var(--tinta-suave); }

/* Qué falta para poder usar al trabajador como usuario. */
.chip-usuario { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--ok); font-weight: 600; }
.chip-usuario.no { color: var(--tinta-tenue); font-weight: 500; }

@media (max-width: 640px) {
    .campos { grid-template-columns: 1fr; }
    .campos .linea { grid-template-columns: 120px minmax(0, 1fr); }
}

/* ============================================================================
 * Tablas de la App (07/10/2026): matriz de columnas por dispositivo + vista previa.
 * ========================================================================== */
.matriz-pagina { display: grid; gap: 0; }
.matriz { margin-top: 6px; }
.matriz-fila {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(200px, 1.1fr) minmax(130px, .6fr);
    gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borde-suave); font-size: var(--fs-14);
}
.matriz-fila:last-child { border-bottom: 0; }
.matriz-cab { font-size: var(--fs-13); font-weight: 600; color: var(--tinta-suave); border-bottom: 1px solid var(--borde); }
.matriz-celda { margin: 0; display: flex; align-items: center; gap: 8px; min-height: var(--toque); color: var(--tinta); font-size: var(--fs-14); font-weight: 400; }
.matriz-celda select { width: 100%; }
.matriz-fijo { color: var(--tinta-suave); gap: 8px; flex-wrap: wrap; }
.matriz-ver input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--azul); }
.matriz-ver input:disabled + span { color: var(--tinta-tenue); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.matriz-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-nota { font-size: var(--fs-13); padding: 1px 8px; border-radius: 10px; background: var(--neutro-bg); color: var(--neutro); font-weight: 500; }
.chip-pers { background: var(--azul-suave); color: var(--azul-fuerte); }

.seg { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--r-control); overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 8px 16px; min-height: 40px; font: inherit; font-size: var(--fs-14); color: var(--tinta-suave); cursor: pointer; }
.seg button.on { background: var(--azul-suave); color: var(--azul-fuerte); font-weight: 600; }

.prev-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.prev-tabla th { text-align: left; font-weight: 600; color: var(--tinta-suave); padding: 6px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.prev-tabla td { padding: 8px; border-bottom: 1px solid var(--borde-suave); white-space: nowrap; }
.prev-movil { width: 260px; max-width: 100%; margin: 0 auto; padding: 10px; display: grid; gap: 8px; background: var(--papel); border: 1px solid var(--borde); border-radius: 14px; }
.prev-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-control); padding: 8px 10px; font-size: var(--fs-13); }
.prev-tarjeta > b { display: block; font-size: var(--fs-14); margin-bottom: 3px; }
.prev-l { display: flex; gap: 8px; padding: 2px 0; }
.prev-l span:first-child { flex: 0 0 40%; color: var(--tinta-suave); }
.prev-mas { color: var(--azul-fuerte); font-weight: 600; margin-top: 4px; }

@media (max-width: 640px) {
    .matriz-fila { grid-template-columns: 1fr; row-gap: 2px; padding: 10px 0; }
    .matriz-cab { display: none; }
    .matriz-nombre { font-size: var(--fs-15); }
}