/* =========================================================================
   NexusTime · Control de jornada
   Dirección visual: plano de obra (azul tinta, retícula, líneas finas) con
   señalización de seguridad (naranja) reservada para "ahora" y para la acción
   principal. Nada más usa naranja.
   ========================================================================= */

/* ------------------------------------------------------------- Tipografía */
@font-face {
    font-family: 'Archivo';
    src: url('/lib/fuentes/archivo-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('/lib/fuentes/archivo-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plex Sans';
    src: url('/lib/fuentes/plexsans-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plex Sans';
    src: url('/lib/fuentes/plexsans-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plex Sans';
    src: url('/lib/fuentes/plexsans-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('/lib/fuentes/plexmono-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('/lib/fuentes/plexmono-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- Tokens */
:root {
    --tinta: #10243A;
    --tinta-80: #1B3855;
    --acero: #2E4A6B;
    --acero-claro: #62809E;
    --papel: #F3F5F4;
    --blanco: #FFFFFF;
    --linea: #DCE2E0;
    --linea-fuerte: #C3CCC9;
    --texto: #17232E;
    --texto-suave: #5F6E77;

    --senal: #E8590C;
    --senal-oscuro: #C74905;
    --senal-suave: #FDF1E8;

    --verde: #157F3D;
    --verde-suave: #E9F3EC;
    --ambar: #A96C00;
    --ambar-suave: #FBF2E0;
    --rojo: #B3261E;
    --rojo-suave: #FBEBEA;

    --fuente-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --fuente-texto: 'Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --fuente-dato: 'Plex Mono', 'Consolas', monospace;

    --radio: 4px;
    --sombra: 0 1px 2px rgba(16, 36, 58, .06), 0 4px 14px rgba(16, 36, 58, .05);
    --barra-lateral: 250px;
}

/* ------------------------------------------------------------------ Base */
* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--texto);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display { font-family: var(--fuente-display); font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

a { color: var(--acero); text-decoration: none; }
a:hover { color: var(--tinta); text-decoration: underline; }

.dato, .num { font-family: var(--fuente-dato); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Etiqueta de sección: dice de qué módulo es la pantalla. */
.rotulo {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acero-claro);
}

:focus-visible {
    outline: 2px solid var(--senal);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------- Armazón */
.armazon { display: flex; min-height: 100vh; }

.lateral {
    width: var(--barra-lateral);
    flex: 0 0 var(--barra-lateral);
    background: var(--tinta);
    color: #C9D6E2;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.lateral__marca {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.lateral__marca .nombre {
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: 1.1875rem;
    color: #fff;
    letter-spacing: -.015em;
    display: block;
    line-height: 1.1;
}

.lateral__marca .nombre em { font-style: normal; color: var(--senal); }
.lateral__marca .glosa { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #7E97AE; }

.lateral__grupo { padding: .9rem 1.25rem .3rem; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: #6F87A0; font-family: var(--fuente-display); font-weight: 600; }

.lateral nav a {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 1.25rem;
    color: #C9D6E2;
    font-size: .875rem;
    border-left: 3px solid transparent;
    transition: background .12s ease, color .12s ease;
}
.lateral nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.lateral nav a.activo { background: rgba(232,89,12,.14); border-left-color: var(--senal); color: #fff; font-weight: 500; }
.lateral nav a i { font-size: 1rem; width: 1.1rem; text-align: center; opacity: .85; }

.lateral__pie { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.09); font-size: .75rem; color: #7E97AE; }

.principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    padding: .875rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.cabecera h1 { margin: 0; font-size: 1.25rem; }
.cabecera .sub { color: var(--texto-suave); font-size: .8125rem; margin: 0; }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.contenido { padding: 1.5rem; flex: 1 1 auto; }
.contenido > .contenedor { max-width: 1500px; margin: 0 auto; }

.alterna { display: none; }

/* --------------------------------------------------------------- Tarjetas */
.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta__cabeza {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--linea);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.tarjeta__cabeza h2, .tarjeta__cabeza h3 { margin: 0; font-size: 1rem; }
.tarjeta__cabeza .acciones { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.tarjeta__cuerpo { padding: 1rem; }
.tarjeta__pie { padding: .75rem 1rem; border-top: 1px solid var(--linea); background: #FAFBFA; }

/* Cifras del tablero. Sin degradados: el dato manda. */
.cifra {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--acero);
    border-radius: var(--radio);
    padding: .75rem .9rem;
    display: block;
    height: 100%;
}
.cifra .valor { font-family: var(--fuente-dato); font-weight: 600; font-size: 1.75rem; line-height: 1.1; color: var(--tinta); display: block; }
.cifra .titulo { font-size: .75rem; color: var(--texto-suave); letter-spacing: .02em; }
.cifra .nota { font-size: .6875rem; color: var(--acero-claro); }
.cifra--senal { border-left-color: var(--senal); }
.cifra--senal .valor { color: var(--senal-oscuro); }
.cifra--verde { border-left-color: var(--verde); }
.cifra--verde .valor { color: var(--verde); }
.cifra--ambar { border-left-color: var(--ambar); }
.cifra--ambar .valor { color: var(--ambar); }
.cifra--rojo { border-left-color: var(--rojo); }
.cifra--rojo .valor { color: var(--rojo); }
a.cifra:hover { text-decoration: none; border-color: var(--linea-fuerte); box-shadow: 0 2px 10px rgba(16,36,58,.10); }

/* ---------------------------------------------------------------- Tablas */
.tabla-envoltura { overflow-x: auto; }

table.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
table.tabla thead th {
    background: #F7F9F8;
    border-bottom: 1px solid var(--linea-fuerte);
    color: var(--acero);
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    padding: .55rem .7rem;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
table.tabla tbody td { padding: .55rem .7rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
table.tabla tbody tr:hover { background: #FBFCFB; }
table.tabla tbody tr.apagado td { color: var(--texto-suave); background: #FAFBFA; }
table.tabla .num, table.tabla .dato { font-family: var(--fuente-dato); font-variant-numeric: tabular-nums; }
table.tabla td.derecha, table.tabla th.derecha { text-align: right; }
table.tabla td.centro, table.tabla th.centro { text-align: center; }
table.tabla tfoot td { padding: .6rem .7rem; border-top: 2px solid var(--tinta); font-weight: 600; background: #F7F9F8; }
table.tabla--compacta tbody td, table.tabla--compacta thead th { padding: .4rem .55rem; }

.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-suave); }
.vacio i { font-size: 2rem; color: var(--linea-fuerte); display: block; margin-bottom: .5rem; }
.vacio strong { display: block; color: var(--tinta); font-family: var(--fuente-display); }

/* -------------------------------------------------------------- Etiquetas */
.marca {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .18rem .45rem;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.35;
}
.marca--neutra { background: #EEF1F0; color: var(--acero); border-color: var(--linea-fuerte); }
.marca--verde { background: var(--verde-suave); color: var(--verde); border-color: #BFDDC8; }
.marca--ambar { background: var(--ambar-suave); color: var(--ambar); border-color: #E7D3A6; }
.marca--rojo { background: var(--rojo-suave); color: var(--rojo); border-color: #EFC5C2; }
.marca--senal { background: var(--senal-suave); color: var(--senal-oscuro); border-color: #F5CDB2; }
.marca--tinta { background: #E7ECF1; color: var(--tinta); border-color: #C9D4DE; }

/* --------------------------------------------------------------- Botones */
.btn {
    font-family: var(--fuente-texto);
    font-size: .875rem;
    font-weight: 500;
    border-radius: var(--radio);
    padding: .4rem .8rem;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--senal); border-color: var(--senal); color: #fff; }
.btn-primario:hover { background: var(--senal-oscuro); border-color: var(--senal-oscuro); color: #fff; }
.btn-tinta { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn-tinta:hover { background: var(--tinta-80); color: #fff; }
.btn-contorno { background: var(--blanco); border-color: var(--linea-fuerte); color: var(--acero); }
.btn-contorno:hover { border-color: var(--acero); color: var(--tinta); background: #fff; }
.btn-peligro { background: var(--blanco); border-color: #E4B4B0; color: var(--rojo); }
.btn-peligro:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-plano { background: transparent; border-color: transparent; color: var(--acero); padding: .3rem .5rem; }
.btn-plano:hover { background: #EEF1F0; color: var(--tinta); }
.btn-sm { font-size: .8125rem; padding: .25rem .55rem; }
.btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------ Formularios */
.form-label, label.etiqueta {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--acero);
    margin-bottom: .25rem;
    display: block;
}
.form-control, .form-select, input.campo, select.campo, textarea.campo {
    width: 100%;
    font-family: var(--fuente-texto);
    font-size: .875rem;
    padding: .4rem .6rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--blanco);
    color: var(--texto);
}
.form-control:focus, .form-select:focus { border-color: var(--acero); box-shadow: 0 0 0 3px rgba(46,74,107,.12); outline: none; }
input[type="number"], input[type="time"], input[type="date"] { font-family: var(--fuente-dato); }
.text-danger, .field-validation-error { color: var(--rojo); font-size: .8125rem; }
.input-validation-error { border-color: var(--rojo) !important; background: #FFFDFD; }
.ayuda { font-size: .75rem; color: var(--texto-suave); }

.filtros {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------- Avisos */
.aviso {
    border: 1px solid var(--linea-fuerte);
    border-left: 3px solid var(--acero);
    background: var(--blanco);
    border-radius: var(--radio);
    padding: .65rem .85rem;
    font-size: .875rem;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: .75rem;
}
.aviso i { font-size: 1rem; line-height: 1.35; }
.aviso--success { border-left-color: var(--verde); background: var(--verde-suave); color: #0F5C2C; border-color: #BFDDC8; }
.aviso--danger { border-left-color: var(--rojo); background: var(--rojo-suave); color: #8C1D17; border-color: #EFC5C2; }
.aviso--warning { border-left-color: var(--ambar); background: var(--ambar-suave); color: #7A4E00; border-color: #E7D3A6; }
.aviso--info { border-left-color: var(--acero); background: #EEF2F6; color: var(--tinta); border-color: #CFDAE4; }

/* ========================================================================
   FRANJA DE JORNADA — el elemento propio del sistema.
   Dibuja el día como una barra física: el turno esperado es la pista clara,
   lo efectivamente trabajado es la barra sólida, el almuerzo es un corte y
   las horas extra se ven en naranja. La línea naranja vertical es "ahora".
   ======================================================================== */
.franja {
    position: relative;
    height: 20px;
    min-width: 150px;
    background:
        repeating-linear-gradient(90deg, #E9EDEC 0 1px, transparent 1px 100%) 0 0 / 4.1666% 100%,
        #F4F6F5;
    border: 1px solid var(--linea);
    border-radius: 2px;
    overflow: hidden;
}
.franja__turno {
    position: absolute; top: 0; bottom: 0;
    background: #DCE6EE;
    border-left: 1px solid #B9CAD9;
    border-right: 1px solid #B9CAD9;
}
.franja__real {
    position: absolute; top: 3px; bottom: 3px;
    background: var(--acero);
    border-radius: 2px;
}
.franja__real--extra { background: var(--senal); }
.franja__real--festivo { background: #6B3FA0; }
.franja__ahora {
    position: absolute; top: -1px; bottom: -1px;
    width: 2px;
    background: var(--senal);
    box-shadow: 0 0 0 2px rgba(232,89,12,.22);
}
.franja__hito {
    position: absolute; top: 0; bottom: 0;
    width: 2px;
    background: var(--tinta);
}
.franja--alta { height: 30px; }
.franja-escala {
    display: flex;
    justify-content: space-between;
    font-family: var(--fuente-dato);
    font-size: .625rem;
    color: var(--acero-claro);
    margin-top: .15rem;
}
.franja-leyenda { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .75rem; color: var(--texto-suave); }
.franja-leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
.franja-leyenda i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
    .franja__ahora { animation: latido 2.4s ease-in-out infinite; }
    @keyframes latido {
        0%, 100% { box-shadow: 0 0 0 2px rgba(232,89,12,.22); }
        50% { box-shadow: 0 0 0 4px rgba(232,89,12,.10); }
    }
}

/* ------------------------------------------------------------------ Mapa */
.mapa { height: 380px; width: 100%; border: 1px solid var(--linea); border-radius: var(--radio); }
.mapa--alto { height: 520px; }
.mapa--bajo { height: 240px; }
.leaflet-container { font-family: var(--fuente-texto); }

/* ------------------------------------------------------------ Paginación */
.paginacion { display: flex; align-items: center; gap: .35rem; font-size: .8125rem; }
.paginacion a, .paginacion span {
    padding: .25rem .55rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    color: var(--acero);
    background: var(--blanco);
}
.paginacion .actual { background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 600; }
.paginacion .inhabilitado { opacity: .45; pointer-events: none; }

/* =========================================================================
   VISTA MÓVIL DEL TRABAJADOR
   Pantalla para usar de pie, con guantes y con sol de frente: contraste alto,
   un solo botón enorme y la hora como protagonista.
   ========================================================================= */
body.movil {
    background: var(--tinta);
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.movil__cabeza {
    padding: 1rem 1.15rem .5rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.movil__cabeza .nombre { font-family: var(--fuente-display); font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.2; }
.movil__cabeza .glosa { font-size: .8125rem; color: #91A7BC; }
.movil__cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .5rem 1.15rem 1rem; text-align: center; }

.reloj {
    font-family: var(--fuente-dato);
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
}
.reloj__fecha { font-size: .875rem; color: #91A7BC; margin-top: .2rem; }

.boton-marcar {
    width: 210px; height: 210px;
    border-radius: 50%;
    border: none;
    background: var(--senal);
    color: #fff;
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .01em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    cursor: pointer;
    box-shadow: 0 0 0 10px rgba(232,89,12,.16);
    transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
    margin: 1.5rem 0;
}
.boton-marcar i { font-size: 2.75rem; }
.boton-marcar small { font-size: .75rem; font-weight: 500; opacity: .9; letter-spacing: .04em; text-transform: uppercase; font-family: var(--fuente-texto); }
.boton-marcar:active { transform: scale(.96); box-shadow: 0 0 0 6px rgba(232,89,12,.24); }
.boton-marcar:disabled { background: #3B5875; color: #91A7BC; box-shadow: none; cursor: default; }
.boton-marcar--salida { background: var(--tinta-80); box-shadow: 0 0 0 10px rgba(255,255,255,.07); border: 2px solid var(--senal); }
.boton-marcar--salida:active { background: #14304C; }

.chip-gps {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8125rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #C9D6E2;
    border: 1px solid rgba(255,255,255,.14);
}
.chip-gps--ok { background: rgba(21,127,61,.22); color: #8FE0AB; border-color: rgba(21,127,61,.5); }
.chip-gps--mal { background: rgba(179,38,30,.22); color: #F0A9A4; border-color: rgba(179,38,30,.5); }
.chip-gps--espera { background: rgba(169,108,0,.22); color: #F0CE8E; border-color: rgba(169,108,0,.5); }

.movil__resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    width: 100%;
    max-width: 420px;
    margin-top: 1rem;
}
.movil__resumen div {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radio);
    padding: .6rem .4rem;
}
.movil__resumen .valor { font-family: var(--fuente-dato); font-weight: 600; font-size: 1.25rem; color: #fff; display: block; }
.movil__resumen .titulo { font-size: .6875rem; color: #91A7BC; text-transform: uppercase; letter-spacing: .06em; }

.movil__pie {
    background: #0B1B2C;
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex;
}
.movil__pie a {
    flex: 1;
    text-align: center;
    padding: .7rem .3rem;
    color: #91A7BC;
    font-size: .75rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.movil__pie a i { font-size: 1.15rem; }
.movil__pie a.activo { color: var(--senal); }
.movil__pie a:hover { text-decoration: none; color: #fff; }

.lista-marcas { width: 100%; max-width: 480px; }
.lista-marcas__item {
    display: flex; align-items: center; gap: .75rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-left: 3px solid var(--acero-claro);
    border-radius: var(--radio);
    padding: .6rem .75rem;
    margin-bottom: .4rem;
    text-align: left;
}
.lista-marcas__item .hora { font-family: var(--fuente-dato); font-weight: 600; font-size: 1.05rem; color: #fff; }
.lista-marcas__item .tipo { font-size: .8125rem; color: #C9D6E2; }
.lista-marcas__item .meta { font-size: .6875rem; color: #7E97AE; }
.lista-marcas__item--entrada { border-left-color: var(--verde); }
.lista-marcas__item--salida { border-left-color: var(--senal); }
.lista-marcas__item--pendiente { border-left-color: var(--ambar); border-style: dashed; }

.cola-pendiente {
    background: rgba(169,108,0,.18);
    border: 1px solid rgba(169,108,0,.45);
    color: #F0CE8E;
    border-radius: var(--radio);
    padding: .5rem .75rem;
    font-size: .8125rem;
    display: flex; align-items: center; gap: .5rem;
    width: 100%; max-width: 480px;
    margin-bottom: .75rem;
}

.movil .aviso { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); color: #E6EDF3; }
.movil .aviso--success { background: rgba(21,127,61,.2); border-color: rgba(21,127,61,.5); color: #A9E8BF; }
.movil .aviso--danger { background: rgba(179,38,30,.2); border-color: rgba(179,38,30,.5); color: #F3B7B2; }
.movil .aviso--warning { background: rgba(169,108,0,.2); border-color: rgba(169,108,0,.5); color: #F3D69B; }

/* ------------------------------------------------------------ Ingreso */
body.ingreso {
    background: var(--tinta);
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1.5rem;
}
.ingreso__caja { width: 100%; max-width: 400px; }
.ingreso__marca { text-align: center; margin-bottom: 1.25rem; color: #fff; }
.ingreso__marca .nombre { font-family: var(--fuente-display); font-weight: 700; font-size: 2rem; letter-spacing: -.02em; }
.ingreso__marca .nombre em { font-style: normal; color: var(--senal); }
.ingreso__marca .glosa { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #7E97AE; }

/* --------------------------------------------------------------- Utiles */
/* En español solo va en mayúscula la primera letra: "Sábado 1 de agosto",
   no "Sábado 1 De Agosto". Por eso no se usa text-transform: capitalize. */
.capitel { display: inline-block; }
.capitel::first-letter { text-transform: uppercase; }
.reloj__fecha::first-letter { text-transform: uppercase; }

.pila { display: flex; flex-direction: column; gap: 1rem; }
.fila-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.silencio { color: var(--texto-suave); }
.migas { font-size: .8125rem; color: var(--texto-suave); }
.migas a { color: var(--acero); }
.separador { height: 1px; background: var(--linea); margin: 1rem 0; border: 0; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 992px) {
    .lateral { position: fixed; left: 0; top: 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; }
    .lateral.abierta { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .alterna { display: inline-flex; }
    .velo { position: fixed; inset: 0; background: rgba(16,36,58,.5); z-index: 1030; }
    .contenido { padding: 1rem; }
    .cabecera { padding: .75rem 1rem; }
}

/* --------------------------------------------------------------- Imprimir */
@media print {
    .lateral, .cabecera__acciones, .filtros, .alterna, .no-imprimir, .movil__pie { display: none !important; }
    .armazon { display: block; }
    body { background: #fff; font-size: 11pt; }
    .contenido { padding: 0; }
    .tarjeta { border: none; box-shadow: none; }
    .tarjeta__cabeza { border-bottom: 1px solid #999; padding-left: 0; }
    table.tabla thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #000; }
    table.tabla { font-size: 9pt; }
    .marca { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: none !important; }
    .pagina-nueva { page-break-before: always; }
}