/* Panel ATPI · prototipo combinado
   Base: «Informe con conclusión» (cada pantalla abre con su conclusión; inicio e histórico con la banda morado noche).
   Al final, sección «Combinado»: selector y minimenú de «Informe puro», mapa aligerado de «Informe con mapa»,
   módulos en vivo y piezas comunes. Catálogo de clases en SISTEMA.md. */
@font-face { font-family: "Red Hat Display"; src: url("/fonts/RedHatDisplay.woff2") format("woff2"); font-weight: 300 900; }
@font-face { font-family: "Red Hat Mono"; src: url("/fonts/RedHatMono.woff2") format("woff2"); font-weight: 300 700; }
/* Tokens de color. Los temas (ADR-021) cambian los roles --superficie, --texto, --texto-suave, --linea, --acento,
   --relleno y --gris-claro, y el clásico también los de los módulos oscuros. Las hojas carta del reporte (.hoja, .pagina)
   repiten este bloque: son papel y quedan en claro con cualquier tema. Los estados de máquina no cambian nunca. */
:root, .hoja:not(.hj-informe), .hoja-sig, .pagina {
  /* Marca (manual rev2) */
  --verde: #00B26A; --morado: #420F66; --carbon: #333132; --acero: #7F8184; --perla: #E8E8E9;
  --verde-luz: #00CC79; --carbon-profundo: #141313; --morado-noche: #240838;
  --coral: #E26D5A;   /* ya no es de máquina: solo hojas (revisar) */
  --ambar: #E0A93B;   /* ya no es de máquina: solo hojas (corregida) */
  /* Estados de máquina (decisión de Pablo, 2026-10). Los nombres son contrato entre carriles y con el PDF: no los cambie */
  --estado-produccion: #00A34B; --estado-paro: #F5B800; --estado-paro-borde: #141313; --estado-mantenimiento: #CC1F1A;
  --estado-make-ready: #1546B4; --estado-sin-datos-borde: #333132;
  --error: var(--morado); /* error de sistema: morado de marca, siempre con ícono y texto explícito; nunca de máquina */
  /* Tintes con nombre: salen de los tokens de marca; la gráfica y el PDF leen estos mismos */
  --blanco: #FFFFFF;
  /* Derivados con color-mix de los tokens de marca (sin hex fuera de paleta; ver SISTEMA.md «Paleta derivada») */
  --gris-claro: color-mix(in srgb, var(--perla) 50%, white);   
  --linea: color-mix(in srgb, var(--acero) 30%, white);        
  --acero-40: color-mix(in srgb, var(--acero) 40%, var(--superficie));     /* barras debajo de la meta */
  --verde-50: color-mix(in srgb, var(--verde) 50%, var(--superficie));     /* barras en meta */
  --verde-75: color-mix(in srgb, var(--verde) 75%, var(--superficie));     /* rango de temperatura */
  --verde-07: color-mix(in srgb, var(--verde) 7%, transparent);    /* verde al 7 %: banda de rango */
  --verde-luz-07: color-mix(in srgb, var(--verde-luz) 7%, transparent);
  --coral-20: rgba(226,109,90,.2);
  --carbon-13: rgba(51,49,50,.13);    /* carbón al 13 %: bloque del 13 al 15 */
  --perla-06: color-mix(in srgb, var(--perla) 6%, transparent);
  --linea-oscura: color-mix(in srgb, var(--perla) 12%, transparent); /* perla al 12 % */
  --carbon-tabla: color-mix(in srgb, var(--perla) 4%, var(--carbon-profundo));        
  --texto-suave: color-mix(in srgb, var(--carbon) 80%, white);                        /* texto secundario, 6.9:1 sobre blanco (AA) */
  --texto-suave-oscuro: color-mix(in srgb, var(--perla) 75%, var(--carbon-profundo)); 
  --carbon-pista: color-mix(in srgb, var(--carbon) 77%, var(--carbon-profundo));      /* pista de la barra de avance en oscuro */
  /* Transparencias con nombre: color de marca y opacidad en el nombre (-NN = NN %). acero-claro es acero al 45 % sobre perla */
  --acero-claro: color-mix(in srgb, var(--acero) 45%, var(--perla));
  --acero-claro-28: color-mix(in srgb, var(--acero-claro) 28%, transparent); --acero-claro-40: color-mix(in srgb, var(--acero-claro) 40%, transparent); --acero-claro-50: color-mix(in srgb, var(--acero-claro) 50%, transparent); --acero-claro-60: color-mix(in srgb, var(--acero-claro) 60%, transparent);
  --ambar-16: rgba(224,169,59,.16);
  --blanco-00: rgba(255,255,255,0);
  --carbon-06: rgba(51,49,50,.06); --carbon-08: rgba(51,49,50,.08);
  --carbon-profundo-00: rgba(20,19,19,0); --carbon-profundo-08: rgba(20,19,19,.08); --carbon-profundo-20: rgba(20,19,19,.2); --carbon-profundo-22: rgba(20,19,19,.22); --carbon-profundo-25: rgba(20,19,19,.25); --carbon-profundo-28: rgba(20,19,19,.28); --carbon-profundo-30: rgba(20,19,19,.3); --carbon-profundo-35: rgba(20,19,19,.35); --carbon-profundo-45: rgba(20,19,19,.45);
  --coral-18: rgba(226,109,90,.18);
  --morado-08: color-mix(in srgb, var(--morado) 8%, transparent); --morado-30: color-mix(in srgb, var(--morado) 30%, transparent); --morado-85: color-mix(in srgb, var(--morado) 85%, transparent); --morado-90: color-mix(in srgb, var(--morado) 90%, transparent);
  --morado-noche-00: color-mix(in srgb, var(--morado-noche) 0%, transparent); --morado-noche-50: color-mix(in srgb, var(--morado-noche) 50%, transparent);
  --perla-04: color-mix(in srgb, var(--perla) 4%, transparent); --perla-13: color-mix(in srgb, var(--perla) 13%, transparent); --perla-14: color-mix(in srgb, var(--perla) 14%, transparent); --perla-16: color-mix(in srgb, var(--perla) 16%, transparent); --perla-18: color-mix(in srgb, var(--perla) 18%, transparent); --perla-20: color-mix(in srgb, var(--perla) 20%, transparent); --perla-25: color-mix(in srgb, var(--perla) 25%, transparent); --perla-30: color-mix(in srgb, var(--perla) 30%, transparent); --perla-32: color-mix(in srgb, var(--perla) 32%, transparent); --perla-35: color-mix(in srgb, var(--perla) 35%, transparent); --perla-38: color-mix(in srgb, var(--perla) 38%, transparent); --perla-40: color-mix(in srgb, var(--perla) 40%, transparent); --perla-45: color-mix(in srgb, var(--perla) 45%, transparent);
  --verde-20: color-mix(in srgb, var(--verde) 20%, transparent); --verde-35: color-mix(in srgb, var(--verde) 35%, transparent); --verde-55: color-mix(in srgb, var(--verde) 55%, transparent);
  --verde-luz-12: color-mix(in srgb, var(--verde-luz) 12%, transparent); --verde-luz-14: color-mix(in srgb, var(--verde-luz) 14%, transparent); --verde-luz-18: color-mix(in srgb, var(--verde-luz) 18%, transparent); --verde-luz-25: color-mix(in srgb, var(--verde-luz) 25%, transparent); --verde-luz-35: color-mix(in srgb, var(--verde-luz) 35%, transparent); --verde-luz-40: color-mix(in srgb, var(--verde-luz) 40%, transparent); --verde-luz-45: color-mix(in srgb, var(--verde-luz) 45%, transparent); --verde-luz-50: color-mix(in srgb, var(--verde-luz) 50%, transparent);
  /* Escala del mapa del mes (propuesta, pendiente del visto bueno de Pablo): morado de marca mezclado con blanco; solo se usa en el mapa */
  --e0: color-mix(in srgb, var(--morado) 5%, var(--superficie)); --e1: color-mix(in srgb, var(--morado) 32%, var(--superficie));
  --e2: color-mix(in srgb, var(--morado) 56%, var(--superficie)); --e3: color-mix(in srgb, var(--morado) 78%, var(--superficie)); --e4: var(--morado);
  --sombra: 0 1px 2px var(--carbon-06), 0 12px 32px var(--morado-08);
  --sombra-modulo: 0 30px 60px var(--carbon-profundo-25), 0 0 0 1px var(--carbon-profundo-08);
  /* Roles que cambia el tema (en claro, los de siempre). --blanco queda blanco: texto sobre relleno y rayas de estado */
  --superficie: var(--blanco);   /* tarjetas, encabezado, campos y menús */
  --texto: var(--carbon);        /* texto principal fuera de los módulos oscuros */
  --acento: var(--morado);       /* enlaces, cejas, foco, selección y bordes activos */
  --relleno: var(--perla);       /* rellenos suaves: pistas de barra, botones apagados, miniaturas */
  --linea-suave: var(--perla);   /* separadores de filas y del menú */
  --contorno-estado: transparent; /* con un tema oscuro, contorno claro para el azul de make ready y la caja de sin datos */
  --borde-campo: var(--acero);    /* borde de campos y listas: 3.9:1 sobre blanco (WCAG 1.4.11) */
}
:root {
  --fuente: "Red Hat Display", system-ui, sans-serif; --mono: "Red Hat Mono", Consolas, monospace;
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px;
  --gutter: 48px;
}
/* ATPI oscuro: carbón profundo y superficie oscura del manual (neutros de interfaz), texto perla, acento verde luz; el
   morado sigue en la banda, el avatar, los botones secundarios y los rellenos. Los módulos oscuros quedan como están. */
:root[data-tema="oscuro"] {
  --gris-claro: var(--carbon-profundo);
  --superficie: #1C1B1B;
  --relleno: var(--carbon);
  --texto: var(--perla);
  --texto-suave: #B9B9BC;
  --linea: color-mix(in srgb, var(--perla) 16%, var(--superficie));
  --linea-suave: color-mix(in srgb, var(--perla) 10%, var(--superficie));
  --acento: var(--verde-luz);
  --contorno-estado: var(--perla-45);
  --error: color-mix(in srgb, var(--morado) 30%, var(--perla)); /* morado claro: 7.5:1 sobre la superficie */
  /* Mapa del mes: «más intenso, más tiempo»; sobre fondo oscuro la rampa va de tenue a brillante (lila sobre la superficie),
     y el peor día (e4, el lila pleno) queda arriba de 3:1 contra la tarjeta */
  --e0: color-mix(in srgb, var(--perla) 5%, var(--superficie));
  --e1: color-mix(in srgb, color-mix(in srgb, var(--morado) 30%, var(--perla)) 25%, var(--superficie));
  --e2: color-mix(in srgb, color-mix(in srgb, var(--morado) 30%, var(--perla)) 45%, var(--superficie));
  --e3: color-mix(in srgb, color-mix(in srgb, var(--morado) 30%, var(--perla)) 70%, var(--superficie));
  --e4: color-mix(in srgb, var(--morado) 30%, var(--perla));
  --borde-campo: color-mix(in srgb, var(--perla) 45%, var(--superficie)); /* 3.8:1 sobre la superficie */
  --sombra: 0 1px 2px var(--carbon-profundo-30), 0 12px 32px var(--carbon-profundo-45);
  --sombra-modulo: 0 0 0 1px var(--linea-oscura), 0 30px 60px var(--carbon-profundo-45);
  color-scheme: dark;
}
/* Clásico: la paleta de la primera versión del panel (antes del rediseño del 19 de octubre): azul marino, acento turquesa
   y textos azul grisáceo. Cambia también los módulos oscuros y la banda; el logo sigue verde, como en esa versión. */
:root[data-tema="clasico"] {
  --gris-claro: #050b14;
  --superficie: #0a1122;
  --relleno: #112240;
  --texto: #e2e8f0;
  --texto-suave: #8892b0;
  --linea: #1e2d4a;
  --linea-suave: color-mix(in srgb, #233554 60%, var(--superficie));
  --acento: #64ffda;
  --contorno-estado: var(--perla-45);
  --error: #ff6b6b;
  --carbon-profundo: #0a1122;
  --carbon: #112240;
  --carbon-tabla: #112240;
  --carbon-pista: #1e2d4a;
  --morado: #233554;
  --morado-noche: #0a1122;
  --perla: #ccd6f6;
  --texto-suave-oscuro: #8892b0;
  --linea-oscura: #233554;
  --verde-luz: #64ffda;
  --acero-claro: #8892b0;
  /* Mapa del mes: de turquesa tenue a turquesa pleno; más intenso, más tiempo */
  --e0: color-mix(in srgb, var(--acento) 4%, var(--superficie)); --e1: color-mix(in srgb, var(--acento) 20%, var(--superficie));
  --e2: color-mix(in srgb, var(--acento) 40%, var(--superficie)); --e3: color-mix(in srgb, var(--acento) 65%, var(--superficie)); --e4: var(--acento);
  --borde-campo: var(--texto-suave); /* 5.9:1 sobre el azul marino */
  --sombra: 0 4px 6px rgba(0,0,0,.3);
  --sombra-modulo: 0 0 0 1px var(--linea), 0 4px 6px rgba(0,0,0,.3);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--fuente); color: var(--texto); background: var(--gris-claro); -webkit-font-smoothing: antialiased; min-height: 100vh; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
a { color: inherit; }
ul { list-style: none; }
img { display: block; }
.mono, .num-m { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.tab { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hoja .ceja { white-space: nowrap; }
/* Foco: morado sobre claro (13:1 sobre blanco); verde luz sobre los fondos oscuros (ver «Ronda 4») */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.oculto-v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Propuesta: punto discreto en lo que aún no existe en el panel */

.ceja { display: inline-flex; flex-wrap: wrap; row-gap: 4px; align-items: center; gap: 12px; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.ceja::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; flex: none; }
.ceja.luz { color: var(--verde-luz); }

.enlace { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--acento); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.enlace::after { content: "→"; font-weight: 500; }
.enlace.atras::after { content: none; }
.enlace.atras::before { content: "←"; font-weight: 500; }
.oscuro .enlace, .banda .enlace { color: var(--verde-luz); }

/* ===== Encabezado (lo pinta app.js) ===== */
.enc { background: var(--superficie); border-bottom: 1px solid var(--linea); display: flex; align-items: center; height: 64px; padding: 0 32px; gap: 40px; position: relative; z-index: 6; }
.enc:has(.cuenta[open]) { z-index: 10; } /* el minimenú abierto queda sobre el riel del asistente (z-index 8) */
.enc .logo { height: 20px; width: auto; }
.enc nav { display: flex; gap: 28px; height: 100%; }
.enc nav a { display: flex; align-items: center; font-size: 16px; font-weight: 500; color: var(--texto-suave); text-decoration: none; border-bottom: 2px solid transparent; padding-top: 2px; white-space: nowrap; }
.enc nav a:hover { color: var(--texto); }
.enc nav a.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 700; }
.enc .der { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--texto-suave); white-space: nowrap; }
.vivo { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--texto); text-transform: uppercase; }
.vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 18%, transparent); }
.oscuro .vivo { color: var(--verde-luz); }
.oscuro .vivo::before { background: var(--verde-luz); box-shadow: 0 0 8px var(--verde-luz); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--morado); color: var(--perla); display: grid; place-items: center; font-weight: 700; font-size: 13px; text-decoration: none; }

/* ===== Pastillas de estado (los colores de máquina van en «Estados de máquina», al final) ===== */
.estado { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--r-sm); white-space: nowrap; color: var(--texto); }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.estado--sin { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); color: var(--texto-suave); } .estado--sin::before { border: 1.5px dashed var(--acero); }
.estado--ok { background: color-mix(in srgb, var(--verde) 12%, var(--superficie)); } .estado--ok::before { background: var(--verde); }
.estado--err { background: color-mix(in srgb, var(--error) 10%, var(--superficie)); color: var(--error); } .estado--err::before { background: var(--error); }
.oscuro .estado { color: var(--perla); }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; box-sizing: border-box; }
.sim { font-size: 12px; font-weight: 600; color: var(--texto-suave); border: 1px dashed var(--acero); border-radius: var(--r-sm); padding: 2px 6px; white-space: nowrap; }
.oscuro .sim, .banda .sim { color: var(--texto-suave-oscuro); border-color: var(--acero-claro-50); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 8px 13px; border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--superficie); color: var(--texto); white-space: nowrap; text-decoration: none; }
button.chip:hover, a.chip:hover { border-color: var(--acento); color: var(--acento); }
.chip--sel { border-color: var(--acento); color: var(--acento); font-weight: 700; background: color-mix(in srgb, var(--morado) 6%, var(--superficie)); }

/* Botones: copian .boton del sitio */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--r-md); font-size: 16px; font-weight: 500; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.btn:hover { transform: translateY(-1px); }
.btn.chico { min-height: 44px; padding: 0 20px; font-size: 16px; } /* manual: 16 px; 44 px como el botón de encabezado del sitio */
.btn.ancho { width: 100%; }
.btn-pri { background: var(--verde-luz); color: var(--morado); box-shadow: 0 5px 12px var(--morado-30); }
.banda .btn-pri, .oscuro .btn-pri { box-shadow: 0 5px 14px var(--verde-luz-35); }
.btn-cont { border: 1.5px solid var(--acento); color: var(--acento); background: var(--superficie); }
/* Secundario del sitio: morado con texto verde luz */
.btn-sec { background: var(--morado); color: var(--verde-luz); box-shadow: 0 5px 12px var(--verde-35); }
.btn-sec[disabled] { opacity: 1; background: var(--relleno); color: var(--texto-suave); box-shadow: none; }
.btn small { font: 500 13px/1 var(--mono); text-transform: none; opacity: .8; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
kbd { font: 500 12px/1 var(--mono); border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 3px 6px; background: var(--superficie); color: var(--texto); }

/* ===== Banda de marca (inicio e histórico) ===== */
.banda { position: relative; overflow: hidden; background: var(--morado-noche); color: var(--perla); padding: 26px var(--gutter) 28px; }
.banda::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 100% 0%, var(--morado-90), transparent 70%); pointer-events: none; }
.banda::after { content: ""; position: absolute; right: 0; top: 0; width: 420px; height: 100%; background-image: radial-gradient(var(--perla-13) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.banda > * { position: relative; z-index: 1; }
.titular { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--blanco); margin-top: 12px; max-width: 980px; text-wrap: balance; }
.titular em { font-style: normal; color: var(--verde-luz); display: block; }
.banda .bajada { font-size: 16px; color: var(--texto-suave-oscuro); margin-top: 10px; line-height: 1.5; max-width: 860px; }
.banda .bajada b { color: var(--perla); font-weight: 600; }
.banda .bajada .tab { color: var(--perla); font-weight: 600; }

/* Titular en páginas sin banda */
.cabeza { padding: 26px var(--gutter) 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cabeza h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 10px; max-width: 980px; text-wrap: balance; }
.cabeza h1 em { font-style: normal; color: var(--texto-suave); font-weight: 600; display: block; font-size: 22px; margin-top: 4px; letter-spacing: -.01em; }
.cabeza p { font-size: 15px; color: var(--texto-suave); margin-top: 8px; max-width: 820px; line-height: 1.5; }
.cabeza .lado { flex: none; text-align: right; font-size: 14px; color: var(--texto-suave); line-height: 1.6; }
.contenedor { padding: 0 var(--gutter); }

/* ===== INICIO ===== */
.inicio-banda { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; padding-bottom: 92px; }
.cierre-mini { border: 1px solid var(--perla-16); background: var(--carbon-profundo-28); border-radius: var(--r-md); padding: 16px 18px; display: grid; gap: 12px; }
.cierre-mini h2 { font-size: 17px; font-weight: 700; color: var(--blanco); }
.cierre-mini ul { display: grid; gap: 2px; font-size: 14px; }
.cierre-mini li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--linea-oscura); }
.cierre-mini li em { font-style: normal; font-size: 13px; color: var(--texto-suave-oscuro); }
.cierre-mini li em.listo { color: var(--verde-luz); font-weight: 600; }
.recuento { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 14px; color: var(--texto-suave-oscuro); }
.recuento span { display: inline-flex; align-items: center; gap: 8px; }
.recuento b { color: var(--perla); font-weight: 600; }

.modulo { border-radius: var(--r-lg); overflow: hidden; background: var(--carbon-profundo); color: var(--perla); box-shadow: var(--sombra-modulo); }
.subir { margin-top: -64px; position: relative; z-index: 2; }
.modulo-barra { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 20px; background: var(--carbon-tabla); border-bottom: 1px solid var(--linea-oscura); font: 400 12px/1 var(--mono); color: var(--texto-suave-oscuro); white-space: nowrap; overflow: hidden; }
.modulo-barra .der { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.modulo-barra .reloj { color: var(--perla); font-size: 14px; }
.maquinas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.maq { padding: 16px 18px; border-radius: var(--r-md); background: var(--carbon-tabla); border: 1px solid var(--linea-oscura); display: flex; flex-direction: column; gap: 12px; min-width: 0; text-decoration: none; color: inherit; transition: border-color 160ms ease; }
a.maq:hover { border-color: var(--verde-luz-50); }
.maq.sim-c { border-style: dashed; border-color: var(--acero-claro-28); }
.maq.alerta { border-color: var(--estado-paro); }
.maq .fila1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.maq h3 { font-size: 16px; font-weight: 700; color: var(--blanco); }

.maq .t { word-spacing: -.32em; font: 500 28px/1 var(--mono); color: var(--blanco); font-variant-numeric: tabular-nums; }
.maq .t small { word-spacing: normal; font: 400 13px/1 var(--fuente); color: var(--texto-suave-oscuro); margin-left: 8px; letter-spacing: 0; }
.maq .lect { display: flex; gap: 22px; font-size: 13px; color: var(--texto-suave-oscuro); }
.maq .lect b { word-spacing: -.32em; display: block; font: 500 19px/1.15 var(--mono); color: var(--perla); }
.maq .lect b.ok { color: var(--verde-luz); }
.maq .spark svg { width: 100%; height: 40px; display: block; overflow: visible; }
.maq .nota-maq { font-size: 13px; line-height: 1.45; color: var(--texto-suave-oscuro); border-left: 3px solid var(--estado-paro); padding-left: 10px; }
.maq .nota-maq.mant { border-left-color: var(--estado-mantenimiento); }
.horas-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; height: 54px; }
.horas-mini div { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; font: 400 11px/1 var(--mono); color: var(--texto-suave-oscuro); text-align: center; }
.horas-mini i { display: block; border-radius: 3px 3px 0 0; background: linear-gradient(var(--verde-luz), var(--verde-55)); }
.horas-mini i.paro { background: linear-gradient(var(--verde-luz), var(--verde-55)); box-shadow: inset 0 -3px 0 var(--estado-paro); }
.medidor { display: grid; gap: 6px; margin-top: auto; }
.medidor .fila { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-suave-oscuro); }
.medidor .fila b { word-spacing: -.32em; font: 500 14px/1 var(--mono); color: var(--perla); }
.medidor .fila b.bajo { color: var(--estado-paro); } /* debajo de la meta: amarillo de estado sobre carbón (más de 10:1), como .kpi b.mal */
.barra-prog { height: 6px; border-radius: 6px; background: var(--carbon-pista); position: relative; }
.barra-prog i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--verde-luz); }
.barra-prog i.bajo { background: var(--estado-paro); }
.barra-prog .meta { position: absolute; left: var(--meta, 93%); top: -4px; bottom: -4px; width: 2px; background: var(--texto-suave-oscuro); }
.barra-prog .meta::after { word-spacing: -.32em; content: attr(data-l); position: absolute; top: 14px; transform: translateX(-50%); font: 400 11px/1 var(--mono); color: var(--texto-suave-oscuro); white-space: nowrap; }
.maq .pie { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--texto-suave-oscuro); padding-top: 14px; border-top: 1px solid var(--linea-oscura); }

.panel { background: var(--superficie); border-radius: var(--r-md); box-shadow: var(--sombra); padding: 18px 24px 14px; }
.panel h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.panel h2 .nota { font-size: 14px; font-weight: 500; color: var(--texto-suave); }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; margin-top: 24px; }
.ev { display: grid; grid-template-columns: 48px 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--linea-suave); }
.ev:last-child { border-bottom: 0; }
.ev .h { word-spacing: -.32em; font: 500 13px/1 var(--mono); color: var(--texto-suave); white-space: nowrap; }
.ev .dur { word-spacing: -.32em; font: 500 13px/1 var(--mono); color: var(--texto-suave); white-space: nowrap; }

/* ===== Selector de máquina: de «Informe puro» (lo pinta app.js; ver la sección Combinado) ===== */
.sel-movil { display: none; }

/* ===== HISTÓRICO ===== */
.hist { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.hist-main { min-width: 0; }
@media (min-width: 1101px) {
  /* El riel va en el DOM entre la banda y la hoja (Tab llega a él después de la banda); la rejilla lo deja a la derecha */
  .hist-main { display: contents; }
  .hist-main > * { grid-column: 1; min-width: 0; }
  .hist-main > .asis { grid-column: 2; grid-row: 1 / span 3; }
}
.banda--hist { padding: 18px var(--gutter) 22px; overflow: visible; } /* el desplegable «Elegir fechas» sale de la banda; sus capas de fondo ya caben en ella */
.banda--hist > .banda-fila { z-index: 9; } /* encima de la hoja, el mapa y el riel del asistente (8); el minimenú abierto sigue arriba (10) */
.banda-fila { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }

.periodo span { font-size: 14px; color: var(--perla); }
.periodo .flecha { font-size: 14px; color: var(--perla); width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--perla-20); display: grid; place-items: center; text-decoration: none; }
.periodo .apagada { opacity: .35; }
.periodo .flecha:hover { border-color: var(--verde-luz); }
.periodo .mes { font-weight: 700; padding: 0 8px; }
.periodo .otros { color: var(--texto-suave-oscuro); margin-left: 10px; font-size: 13px; }
.hist .titular { font-size: 26px; line-height: 1.2; margin: 10px 0 0; max-width: 900px; }
.mesa { padding: 24px var(--gutter) 0; }
.hoja { background: var(--superficie); border-radius: var(--r-sm); box-shadow: var(--sombra); padding: 20px 44px 0; max-width: 960px; margin: 0 auto; }
.hoja-sig { height: 12px; margin: -4px 12px 0; background: var(--superficie); border-radius: 0 0 var(--r-sm) var(--r-sm); box-shadow: var(--sombra); max-width: 936px; margin-left: auto; margin-right: auto; }
.hoja-enc { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--texto); }
.hoja-enc h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin-top: 10px; }
.hoja-enc h2 span { color: var(--texto-suave); font-weight: 500; }
.folio { word-spacing: -.32em; text-align: right; font: 400 13px/1.65 var(--mono); color: var(--texto-suave); white-space: nowrap; }
.folio .folio-logo { display: block; width: max-content; margin: 0 0 6px auto; color: var(--verde); }
.seccion { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--linea); scroll-margin-top: 24px; transition: background-color 600ms ease; }

.num { font: 500 13px/1 var(--mono); color: var(--acento); padding-top: 4px; }
.seccion h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.seccion h3 .h-nota { font-weight: 500; color: var(--texto-suave); font-size: 14px; }
.lead { font-size: 16px; line-height: 1.55; max-width: 780px; }
.lead b { font-weight: 700; }
.cifras { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; margin-top: 10px; border-top: 1px solid var(--linea); }
.cifra { padding: 10px 18px 0 0; }
.cifra + .cifra { padding-left: 18px; border-left: 1px solid var(--linea); }
.cifra .v { word-spacing: -.32em; white-space: nowrap; font: 500 28px/1.1 var(--mono); letter-spacing: -.02em; }
.cifra .v small { word-spacing: normal; font: 500 16px var(--fuente); color: var(--texto-suave); margin: 0 6px 0 3px; letter-spacing: 0; }
.cifra .v small:last-child { margin-right: 0; }
.cifra .l { font-size: 14px; color: var(--texto-suave); margin-top: 5px; }
.delta { font-size: 14px; margin-top: 4px; }
.delta b { font-weight: 700; font-variant-numeric: tabular-nums; }
.base { font-size: 13px; color: var(--texto-suave); margin-top: 10px; line-height: 1.45; }
.base b { font-weight: 600; color: var(--texto); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--texto-suave); margin-bottom: 4px; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; box-sizing: border-box; }
.grafica { position: relative; height: 250px; margin-top: 6px; }
.grafica.alta { height: 280px; }
.lienzo-vivo { position: relative; height: 240px; }
.dos-g .lienzo-vivo { height: 200px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 13px; font-weight: 600; color: var(--texto-suave); padding: 0 10px 7px 0; border-bottom: 1px solid var(--texto); white-space: nowrap; }
.tabla td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla td.m { word-spacing: -.32em; font: 500 13px/1 var(--mono); white-space: nowrap; }
.tabla th.d, .tabla td.d { text-align: right; padding-right: 0; }
.tabla tr.tot td { border-bottom: 0; font-weight: 700; }
.envuelve { position: relative; overflow-x: auto; /* relative: los .oculto-v de los encabezados no escapan del desplazamiento */ }
.seccion--ultima { border-bottom: 0; }
.hoja-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--linea); padding: 10px 0 12px; font-size: 13px; color: var(--texto-suave); }
.hoja-pie .enlace { font-size: 14px; }

/* Asistente: riel fijo; la conversación es lo único que se desplaza */
.asis { position: sticky; top: 0; height: 100vh; background: var(--superficie); border-left: 1px solid var(--linea); display: flex; flex-direction: column; z-index: 8; }

.asis-enc h2 { font-size: 20px; font-weight: 700; }
.asis-enc p { font-size: 13px; color: var(--texto-suave); margin-top: 4px; line-height: 1.45; }
.asis-enc .enlace { font-size: 13px; margin-top: 6px; }
.asis-cerrar { display: none; width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--linea); font-size: 18px; flex: none; }

.pregunta { font-size: 15px; font-weight: 600; }
.nota-ia { font-size: 15px; line-height: 1.5; border-left: 2px solid var(--verde); padding-left: 14px; animation: entra 260ms cubic-bezier(.2,.7,.2,1); }
.nota-ia ul { margin: 6px 0 0; display: grid; gap: 3px; }
.nota-ia li { padding-left: 14px; position: relative; }
.nota-ia li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--verde); border-radius: 2px; }
.nota-ia .enlace { margin-top: 8px; font-size: 14px; }
.nota-ia .aviso-ia { margin: 4px 0 8px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--carbon-06); color: var(--texto-suave); font-size: 14px; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
.acciones-asis { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.acciones-asis p { font-size: 13px; color: var(--texto-suave); }
.acciones-asis .chip { font-size: 14px; }
.asis-pie { border-top: 1px solid var(--linea); padding: 14px 24px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--superficie); flex: none; }
.asis-pie .sig { align-self: flex-start; font-size: 14px; }
.asis-fondo { margin-top: auto; padding: 12px 24px 16px; flex: none; }
.chip--uno { border-color: var(--texto); font-weight: 600; }
.entrada { display: flex; align-items: center; border: 1px solid var(--borde-campo); border-radius: var(--r-md); padding: 0 6px 0 14px; height: 44px; }
.entrada input { flex: 1; border: 0; font: inherit; font-size: 15px; color: var(--texto); background: none; outline: none; min-width: 0; }
.entrada button { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--gris-claro); color: var(--acento); font-weight: 700; }
.incluye { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.incluye b { color: var(--texto); font-weight: 600; }
.js-generar.listo { animation: llama 1.6s ease-in-out 2; }
@keyframes llama { 50% { box-shadow: 0 0 0 6px var(--verde-luz-25), 0 5px 12px var(--morado-30); } }
.export { display: flex; justify-content: space-between; font-size: 14px; color: var(--texto-suave); padding-top: 10px; border-top: 1px solid var(--linea-suave); }
.export a { color: var(--acento); text-decoration: none; font: 500 13px/1 var(--mono); margin-left: 14px; border-bottom: 1px solid currentColor; display: inline-block; padding: 6px 0 3px; }
.barra-movil { display: none; }
.velo { display: none; }

/* ===== EN VIVO ===== */

.det { padding: 18px 20px 20px; display: grid; gap: 16px; }
.det .cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.det .cab h2 { font-size: 24px; font-weight: 800; color: var(--blanco); display: flex; align-items: center; gap: 12px; }
.det .cab p { font-size: 14px; color: var(--texto-suave-oscuro); margin-top: 6px; }
.kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi { padding: 14px 16px; border-radius: var(--r-md); background: var(--carbon-tabla); border: 1px solid var(--linea-oscura); }
.kpi small { display: block; font-size: 13px; color: var(--texto-suave-oscuro); }
.kpi b { word-spacing: -.32em; display: block; font: 500 28px/1.1 var(--mono); margin: 8px 0 4px; color: var(--blanco); }
.kpi b.ok { color: var(--verde-luz); }
.kpi span { font-size: 13px; color: var(--texto-suave-oscuro); }
.marco-g { padding: 14px 16px 10px; border-radius: var(--r-md); background: var(--carbon-tabla); border: 1px solid var(--linea-oscura); }
.marco-g h3 { font-size: 14px; font-weight: 600; color: var(--perla); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; }
.marco-g h3 span { font: 400 12px/1.3 var(--mono); color: var(--texto-suave-oscuro); }
.cinta { display: flex; height: 14px; border-radius: var(--r-sm); overflow: hidden; }
.cinta i { display: block; height: 100%; }
.horas { word-spacing: -.32em; display: flex; justify-content: space-between; font: 400 12px/1 var(--mono); color: var(--texto-suave-oscuro); margin-top: 6px; }
.dos-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ===== MÁQUINAS (selector) ===== */
.rejilla-maq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ficha { background: var(--superficie); border-radius: var(--r-md); box-shadow: var(--sombra); padding: 20px 24px; display: grid; gap: 14px; border: 1px solid transparent; }
.ficha.sim-f { border: 1px dashed var(--linea); box-shadow: none; }
.ficha .fila1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ficha h2 { font-size: 20px; font-weight: 700; }
.ficha .sub { font-size: 14px; color: var(--texto-suave); margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.ficha .linea { font-size: 15px; line-height: 1.5; }
.ficha .datos { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.ficha .datos div { word-spacing: normal; padding: 10px 14px 0 0; font-size: 13px; color: var(--texto-suave); }
.ficha .datos div + div { padding-left: 14px; border-left: 1px solid var(--linea); }
.ficha .datos b { word-spacing: -.32em; display: block; font: 500 20px/1.2 var(--mono); color: var(--texto); margin-bottom: 3px; }
.ficha .ir { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.sede { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); margin: 8px 0 12px; }

/* ===== ADMINISTRACIÓN ===== */
.subnav { display: flex; gap: 4px; padding: 0 var(--gutter); border-bottom: 1px solid var(--linea); background: var(--superficie); overflow-x: auto; }
.subnav a { padding: 14px 16px 12px; font-size: 15px; font-weight: 500; color: var(--texto-suave); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.subnav a.activa { color: var(--acento); font-weight: 700; border-bottom-color: var(--acento); }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.campo { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.campo input, .campo select { height: 40px; border: 1px solid var(--borde-campo); border-radius: var(--r-md); padding: 0 12px; font: 400 14px var(--fuente); color: var(--texto); background: var(--superficie); min-width: 150px; }
.filtros .der { margin-left: auto; display: flex; gap: 12px; }
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.medida { word-spacing: normal; font-size: 13px; color: var(--texto-suave); }
.medida b { word-spacing: -.32em; display: block; font: 500 26px/1.2 var(--mono); color: var(--texto); margin: 6px 0 4px; }
.uso { height: 8px; border-radius: 8px; background: var(--relleno); overflow: hidden; margin-top: 8px; }
.uso i { display: block; height: 100%; background: var(--verde); border-radius: 8px; }
.acc { display: flex; gap: 14px; justify-content: flex-end; }
.acc a { font-size: 13px; font-weight: 600; color: var(--acento); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }

.freno .icono { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--verde) 12%, var(--superficie)); display: grid; place-items: center; }

.freno .umbrales { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.aviso { font-size: 13px; color: var(--texto-suave); margin-top: 8px; }
.integridad { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

/* ===== LOGIN ===== */
.login-pag { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--carbon-profundo); color: var(--perla); }
.login-izq { padding: 48px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.login-izq .logo { height: 28px; width: auto; align-self: flex-start; }
.login-izq h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 10px; color: var(--blanco); }
.login-izq .ceja { margin-top: 44px; }
.login-izq .intro { font-size: 16px; line-height: 1.5; color: var(--texto-suave-oscuro); max-width: 420px; }
.login-izq form { margin-top: 28px; display: grid; gap: 14px; max-width: 400px; }
.login-izq label { display: block; font-size: 13px; font-weight: 600; color: var(--texto-suave-oscuro); margin-bottom: 6px; }
.login-izq input { width: 100%; height: 46px; border: 1px solid var(--perla-25); border-radius: var(--r-md); background: var(--perla-04); padding: 0 14px; font: 400 15px var(--fuente); color: var(--perla); }
.login-izq input:focus { outline: none; border-color: var(--verde-luz); box-shadow: 0 0 0 3px var(--verde-luz-18); }
.login-izq .otra { font-size: 14px; color: var(--texto-suave-oscuro); display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.login-izq .legal { margin-top: 40px; font-size: 13px; color: var(--texto-suave-oscuro); display: flex; gap: 16px; flex-wrap: wrap; }
.login-izq .legal a { color: var(--texto-suave-oscuro); }
.login-der { position: relative; overflow: hidden; background: var(--morado-noche); display: flex; align-items: center; justify-content: center; padding: 48px; }
.login-der::before { content: ""; position: absolute; right: -160px; bottom: -180px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, var(--verde-luz-50) 0%, var(--verde-20) 32%, var(--morado-noche-00) 68%); }
.login-der::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--perla-14) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 10%, transparent 70%); mask-image: radial-gradient(circle at 100% 100%, #000 10%, transparent 70%); }
.login-der > * { position: relative; z-index: 1; }
.login-der ul { display: grid; gap: 14px; }
.login-der li { display: flex; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.45; color: var(--perla); padding-bottom: 14px; border-bottom: 1px solid var(--perla-14); }
.login-der li b { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--verde-luz); text-transform: uppercase; width: 110px; flex: none; }

/* ===== REPORTE (la hoja es el PDF) ===== */
.rep-barra { position: sticky; top: 0; z-index: 5; background: var(--superficie); border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 24px; padding: 12px 32px; }
.rep-barra .logo { height: 18px; width: auto; }

.rep-barra .der { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.paginas { padding: 28px 16px 48px; display: grid; gap: 24px; grid-template-columns: minmax(0, 816px); justify-content: center; }
.pagina { width: 816px; max-width: 100%; min-height: 1056px; background: var(--superficie); box-shadow: var(--sombra); padding: 56px 64px 40px; display: flex; flex-direction: column; }
.pagina .hoja-pie { margin-top: auto; }

/* ===== Adaptación ===== */
@media (max-width: 1280px) {
  :root { --gutter: 28px; }
  .hist { grid-template-columns: minmax(0, 1fr) 340px; }
  .hoja { padding: 18px 32px 0; }
  .dos { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1100px) {
  /* El riel del asistente pasa a cajón */
  .hist { grid-template-columns: minmax(0, 1fr); }
  .asis { position: fixed; top: 0; right: 0; width: min(400px, 100%); transform: translateX(100%); transition: transform 220ms cubic-bezier(.2,.7,.2,1); box-shadow: none; }
  body.cajon .asis { z-index: 12; transform: none; box-shadow: -20px 0 40px var(--carbon-profundo-22); }
  body.cajon .velo { display: block; position: fixed; inset: 0; background: var(--carbon-profundo-35); z-index: 11; } /* cajón y velo encima de la banda del histórico (9) y del minimenú (10) */
  .asis-cerrar { display: grid; place-items: center; }
  .barra-movil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--superficie); border-top: 1px solid var(--linea); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px var(--carbon-profundo-08); }
  /* Tres botones dentro del margen de 16 px a 390: las etiquetas largas pasan a dos líneas */
  /* «Abrir asistente» y «Generar PDF» comparten la fila; el destino del cierre baja a la segunda; el avance es texto, no botón */
  .barra-movil .btn { flex: 1 1 0; min-width: 0; padding: 4px 10px; line-height: 1.15; white-space: normal; text-align: center; }
  .barra-movil .sig-movil { flex-basis: 100%; }
  .barra-movil .sig-avance { flex: none; max-width: 76px; font-size: 13px; line-height: 1.3; color: var(--texto-suave); }

  .maquinas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos, .rejilla-maq, .tarjetas { grid-template-columns: minmax(0, 1fr); }
  .inicio-banda { grid-template-columns: minmax(0, 1fr); padding-bottom: 88px; }
  .login-pag { grid-template-columns: 1fr; }
  .login-der { display: none; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .enc { height: auto; flex-wrap: wrap; padding: 12px 16px 0; gap: 0; }
  .enc .logo { height: 18px; }
  .enc nav { order: 3; width: 100%; height: 44px; gap: 22px; overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
  .enc nav a { font-size: 15px; }
  .enc .der { gap: 12px; }
    .titular { font-size: 24px; }
  .banda { padding-top: 20px; }
  .cabeza { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cabeza h1 { font-size: 24px; }
  .cabeza .lado { text-align: left; }
  .maquinas { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .modulo-barra .opc-txt { display: none; }
  .mesa { padding: 16px 12px 0; }
  .hoja { padding: 14px 16px 0; }
  .hoja-enc { flex-direction: column; }
  .hoja-enc h2 { font-size: 22px; }
  .folio { text-align: left; white-space: normal; }
  .folio .folio-logo { margin-left: 0; }
  .seccion { grid-template-columns: 28px minmax(0, 1fr); }
  .cifras { grid-template-columns: 1fr; }
  .cifra + .cifra { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); margin-top: 10px; }
  .kpis3, .dos-g, .ficha .datos { grid-template-columns: 1fr; }
  .ficha .datos div + div { padding-left: 0; border-left: 0; }
  .hoja-pie { flex-direction: column; align-items: flex-start; }
  .sel-titulo, .sel-tabs { display: none; }
  .sel-movil { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
  .sel-movil select { flex: 1; min-width: 0; width: 100%; height: 40px; border: 1px solid var(--borde-campo); border-radius: var(--r-md); padding: 0 10px; font: 600 15px var(--fuente); color: var(--texto); background: var(--superficie); }
  .hist .titular { font-size: 21px; }
  .grafica, .grafica.alta { height: 240px; }

  .login-izq { padding: 32px 20px; }
  .login-izq h1 { font-size: 30px; }
  .pagina { padding: 28px 20px; min-height: 0; }
  .rep-barra { padding: 10px 16px; gap: 12px; }
  .rep-barra .que { display: none; }
}
@media print {
  @page { size: letter; margin: 0; }
  body { background: #fff; }
  .enc, .saltar, .rep-barra { display: none !important; }
  .paginas { padding: 0; gap: 0; display: block; }
  .pagina { box-shadow: none; width: auto; min-height: 279mm; padding: 16mm 18mm 12mm; break-after: page; }
  .pagina:last-child { break-after: auto; }
  .seccion { break-inside: avoid; }
  .grafica, .grafica.alta { height: 240px; }
}

/* Ajustes tras revisar capturas */
.banda .atajo { display: none; }
@media (min-width: 1101px) {
  /* El riel blanco del asistente llega hasta el pie aunque la hoja sea más larga que la ventana */
  .hist { background: linear-gradient(to left, var(--superficie) 399px, var(--linea) 399px 400px, transparent 400px); }
  .asis { border-left: 0; }
}
@media (min-width: 1101px) and (max-width: 1280px) {
  .hist { background: linear-gradient(to left, var(--superficie) 339px, var(--linea) 339px 340px, transparent 340px); }
}
@media (max-width: 720px) {
  .ev { grid-template-columns: 44px 10px minmax(0, 1fr); row-gap: 2px; }
  .ev .dur { grid-column: 3; }
  .envuelve .tabla { min-width: 560px; }
  .envuelve .tabla.apila { min-width: 0; }
  .tabla.apila thead { display: none; }
  .tabla.apila tbody { display: block; }
  .tabla.apila tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--linea-suave); }
  .tabla.apila td { border: 0; padding: 0; white-space: normal; text-align: left; }
  .tabla.apila td[data-l]::before { content: attr(data-l); display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 3px; word-spacing: 0; }
  .tabla.apila td.nota { grid-column: 1 / -1; }
  .tabla.apila td.d { text-align: left; }
  .tabla.apila tr.tot { display: flex; justify-content: space-between; gap: 12px; }
  .tabla.apila tr.tot td::before { content: none; }
  .pagina .hoja-enc h2 { white-space: normal; }
}
.pagina .hoja-enc h2 { font-size: 24px; }
@media (min-width: 721px) { .pagina .hoja-enc h2 { white-space: nowrap; } } /* en el celular se parte */
.pagina .folio { white-space: normal; } /* «1 al 30 sep · 30 días con datos · Datos de demostración» se parte dentro de la hoja carta */

/* ===== Versión 2 ===== */
.hoja .solo-pdf { display: none; }
.hoja .hoja-enc { align-items: center; }
.hoja .folio { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 14px; text-align: right; line-height: 1.5; }
.hoja .folio .folio-logo { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
.hoja .folio div { white-space: nowrap; grid-column: 1; }
.hoja-enc.delgado { border-bottom-width: 1px; }
.firmas { margin-top: 28px; }
.raya { border-bottom: 1px solid var(--texto); height: 36px; }
.seccion.resalta { background: color-mix(in srgb, var(--verde) 9%, var(--superficie)); box-shadow: -12px 0 0 color-mix(in srgb, var(--verde) 9%, var(--superficie)), 12px 0 0 color-mix(in srgb, var(--verde) 9%, var(--superficie)); }
.quien { font-size: 13px; color: var(--texto-suave); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.kpi b small { word-spacing: normal; display: inline; font: 500 15px var(--fuente); color: var(--texto-suave-oscuro); margin-left: 8px; }

/* Inicio: la banda es del turno; el cierre queda en una línea discreta */
.banda--inicio .inicio-banda { display: block; padding-bottom: 92px; }
.cierre-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--perla-14); max-width: 860px; font-size: 15px; color: var(--texto-suave-oscuro); }
.ceja-chica { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--verde-luz); }
.ev--mes { grid-template-columns: 12px minmax(0, 1fr) auto; }
.ev--mes .enlace { font-size: 14px; }
.sim-ev { color: var(--texto-suave); }
a.maq.sim-c:hover { border-color: var(--acero-claro-60); }
.nota-sim { font-size: 14px; color: var(--texto-suave); }

/* Botones de administración */
.reactivar { display: grid; gap: 6px; justify-items: end; text-align: right; }
.reactivar p { font-size: 13px; color: var(--texto-suave); max-width: 230px; line-height: 1.4; }
.acc button { font-size: 13px; font-weight: 600; color: var(--acento); border-bottom: 1px solid currentColor; min-height: 28px; padding: 4px 0 2px; white-space: nowrap; }

/* Acciones que el prototipo solo simula */
.hecho { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--verde); margin-right: 8px; vertical-align: -3px; position: relative; flex: none; }
.hecho::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 4px; height: 8px; border: solid var(--blanco); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.aviso-flot { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 20; background: var(--carbon-profundo); color: var(--perla); border-radius: var(--r-md); padding: 12px 18px; font-size: 14px; line-height: 1.45; max-width: min(560px, calc(100% - 32px)); box-shadow: 0 12px 32px var(--carbon-profundo-30); display: flex; align-items: flex-start; transition: opacity 200ms ease, transform 200ms ease; }
.aviso-flot .hecho { margin-top: 1px; }
.aviso-flot.ve { opacity: 1; transform: translate(-50%, 0); }
/* Error de sistema: --error con ícono y texto; se queda hasta el siguiente aviso o hasta tocarlo */
.falla { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--error); margin-right: 8px; vertical-align: -3px; position: relative; flex: none; }
.falla::before, .falla::after { content: ""; position: absolute; left: 7px; width: 2px; border-radius: 1px; background: var(--blanco); }
.falla::before { top: 3px; height: 6px; }
.falla::after { top: 11px; height: 2px; }
.aviso-flot--error { background: var(--error); color: var(--blanco); cursor: pointer; }
.aviso-flot--error.ve { pointer-events: auto; }
.aviso-flot--error .falla { background: var(--blanco); margin-top: 1px; }
.aviso-flot--error .falla::before, .aviso-flot--error .falla::after { background: var(--error); }
.error-dlg { display: flex; align-items: flex-start; margin-top: 12px; }
.error-dlg[hidden] { display: none; }
.error-dlg .falla { margin-top: 1px; }
@media (max-width: 1100px) { .pag-hist .aviso-flot { bottom: 84px; } }

/* Reporte */
.rep-barra .que { font-size: 14px; color: var(--texto-suave); display: flex; align-items: center; flex: 1; min-width: 0; }
.rep-barra .que b { font-weight: 600; color: var(--texto); margin: 0 4px; }

/* Login: mismo patrón que el hero del sitio */
.login-centro { width: min(440px, 100%); display: grid; gap: 28px; }
.login-modulo { border: 1px solid var(--linea-oscura); }
.login-filas > div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 92px; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linea-oscura); font-size: 15px; }
.login-filas > div:last-child { border-bottom: 0; }
.login-filas b { color: var(--blanco); font-weight: 600; }
.login-filas .v { font: 500 18px/1 var(--mono); color: var(--perla); text-align: right; white-space: nowrap; }
.login-filas .v small { font: 400 12px var(--fuente); color: var(--texto-suave-oscuro); margin-left: 4px; }

/* Políticas */
.politicas { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter) 24px; }
.politicas h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 12px 0 8px; }
.politicas .nota-tpl { font-size: 14px; color: var(--texto-suave); margin-bottom: 20px; }
.politicas section { padding: 18px 0; border-top: 1px solid var(--linea); }
.politicas h2 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.politicas p { font-size: 16px; line-height: 1.6; }
.modulo-sim { border: 1px dashed var(--acero-claro-40); }
@media (max-width: 720px) {

  .hoja .folio { text-align: left; grid-template-columns: 1fr; row-gap: 4px; }
  .hoja .folio .folio-logo { grid-column: 1; grid-row: auto; }
  .hoja .folio div, .hoja .ceja { white-space: normal; }
  .cierre-linea { font-size: 14px; }
  .reactivar { justify-items: start; text-align: left; }
  .login-filas > div { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .login-filas .estado { display: none; }
}

/* ===== Versión 3 ===== */
.leyenda i.dom { background: repeating-linear-gradient(135deg, var(--linea) 0 2px, var(--superficie) 2px 4px); box-shadow: inset 0 0 0 1px var(--linea); height: 5px; align-self: flex-end; margin-bottom: 3px; }
.nota-movil { display: none; }
.pagina .seccion--ultima:not(:last-of-type) { border-bottom: 1px solid var(--linea); }
.pagina .seccion:last-of-type { border-bottom: 0; }
/* Tarjeta de máquina: el título cede antes que la pastilla de estado */
.maq .fila1 > div { min-width: 0; }
.maq .sub { font-size: 13px; color: var(--texto-suave-oscuro); margin-top: 4px; display: flex; gap: 6px; align-items: center; white-space: normal; flex-wrap: wrap; }
.maq .fila1 .estado { flex: none; }
/* Riel compacto: la conversación se desplaza; PDF, datos y siguiente quedan juntos debajo */
.asis-pie .export { padding-top: 10px; }
.asis-pie .entrada { margin-top: 2px; }
.conv { padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; flex: 0 1 auto; }
/* Flecha del mes siguiente: apagada de verdad */
.periodo .flecha.apagada { opacity: 1; border: 1px dashed var(--perla-18); color: var(--perla-38); cursor: not-allowed; }
/* Gasto */
.reactivar-nota { font-size: 14px; color: var(--texto-suave); text-align: right; max-width: 220px; line-height: 1.4; }
.reactivar-nota b { display: block; color: var(--texto); font-weight: 600; }
@media (max-width: 720px) {
  .nota-movil { display: block; font-size: 14px; line-height: 1.5; margin: 6px 0 2px; padding-left: 10px; border-left: 2px solid var(--texto); }
  .nota-movil b { font-weight: 700; }
  .hoja .folio-2 { display: none; }
  .hoja .hoja-enc { align-items: flex-start; padding-bottom: 10px; gap: 6px; }
  /* Peor día: una fila por evento, la nota debajo */
  .tabla.linea-dia tr { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; gap: 4px 8px; }
  .tabla.linea-dia td[data-l]::before { content: none; }
  .tabla.linea-dia td:nth-child(2) { padding-left: 4px; }

  .tabla.linea-dia td.d { text-align: right; order: 4; }
  .tabla.linea-dia td.d::before { content: none; }
  .tabla.linea-dia td.nota { order: 5; grid-column: 1 / -1; color: var(--texto-suave); font-size: 13px; }
  .tabla.linea-dia tr.tot { display: flex; }
  .reactivar-nota { text-align: left; }
  .rep-barra .der { gap: 12px; }
  .rep-barra .der .enlace { display: none; }
  .pag-reporte .rep-barra .der { margin-left: 0; width: 100%; justify-content: space-between; } /* el reporte ya no lleva logo en la barra (va en el encabezado): cabe «Volver al histórico» */
  .pag-reporte .rep-barra .der .enlace { display: inline-flex; }
}
.cifra .v small.entre { margin: 0 8px 0 6px; }
@media (max-width: 720px) { .tabla.linea-dia td.m { white-space: nowrap; } }
.modulo-barra > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .modulo-barra { padding: 0 14px; gap: 10px; } .modulo-barra .der { gap: 10px; } }
@media (max-width: 720px) { .tabla.linea-dia td:nth-child(3)::before { content: "– "; display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; margin: 0; } }

/* =====================================================================
   COMBINADO · piezas nuevas o traídas de «Informe puro» y «Informe con mapa»
   ===================================================================== */
[hidden] { display: none !important; }

/* ----- Encabezado: logo morado en línea (el verde pide 160 px sobre claro), menú en celular, minimenú ----- */
.enc .marca { display: flex; flex: none; color: var(--verde); } /* logo verde en todo: decisión de Pablo, 2026-10-18 */
.enc .marca img { height: 36px; width: auto; display: block; } /* logo temporal (PNG 843×94): 36 px de alto, unos 323 px de ancho */
/* El encabezado completo pide unos 1270 px con el logo de 36 px: se encoge el logo y se van la hora y el estado por tramos (sin desplazamiento de 320 a 1440) */
@media (max-width: 1280px) { .enc .marca img { height: 28px; } }
@media (max-width: 1240px) { .enc .der .hora-enc { display: none; } }
@media (min-width: 769px) and (max-width: 1100px) { .enc { gap: 24px; } .enc .marca img { height: 24px; } }
@media (max-width: 959px) {
  /* Sin espacio para el texto: el punto queda y el texto sigue para el lector (MOD-USABILIDAD-05); sin red, el punto se vacía (no solo cambia de color).
     El punto va sobre la esquina del avatar y no ocupa lugar: a 375 y 390 px el encabezado ya va justo y un punto más lo partía en dos renglones. */
  .enc .der { position: relative; }
  .enc .der .estado-enc { position: absolute; right: -3px; top: calc(50% - 18px); pointer-events: none; }
  .enc .der .estado-enc i { box-shadow: 0 0 0 2px var(--superficie); }
  .enc .der .estado-enc .estado-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .enc .der .estado-enc.reconecta i { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--acero), 0 0 0 2px var(--superficie); }
}
.enc .demo-activa { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.enc .hora-enc { font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--texto-suave); }
/* Estado de la conexión: el mismo en todas las páginas internas (demo · estado · hora) */
.enc .estado-enc { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--texto-suave); }
.enc .estado-enc i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.enc .estado-enc.reconecta i { background: var(--acero); }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: var(--r-sm); background: var(--morado); color: var(--blanco); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 10px; }
.ir-demos { display: none; }
@media (max-width: 720px) { .banda .ir-demos { display: flex; } }
.tend-pleg > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; cursor: pointer; list-style: none; }
.tend-pleg > summary::-webkit-details-marker { display: none; }
.tend-pleg > summary h2 { margin: 0; }
.tend-abre { color: var(--acento); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.tend-abre::after { content: " +"; }
.tend-pleg[open] .tend-abre { display: none; }
.tend-pleg[open] > summary { margin-bottom: 8px; }
.sig-falta { margin: 0; font-size: 13px; line-height: 1.35; color: var(--texto-suave); text-align: center; }
.menu-btn { display: none; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 1px solid var(--linea); border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--texto); }
.menu-btn i { width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }

.menu-btn i::before { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 2px; top: -5px; } .menu-btn i::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 2px; top: 5px; }
.cuenta { position: relative; }
.cuenta summary { list-style: none; cursor: pointer; border-radius: 50%; }
.cuenta summary::-webkit-details-marker { display: none; }
.cuenta[open] summary { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.menu-cuenta { position: absolute; right: 0; top: calc(100% + 10px); width: 264px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md); box-shadow: var(--sombra); padding: 8px; display: grid; z-index: 30; white-space: normal; }
.mc-quien { padding: 8px 10px 12px; border-bottom: 1px solid var(--linea-suave); margin-bottom: 4px; display: grid; gap: 3px; font-size: 13px; color: var(--texto-suave); line-height: 1.35; }
.mc-quien b { font-size: 15px; color: var(--texto); }
.mc-rol { justify-self: start; margin-top: 6px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--acento); background: color-mix(in srgb, var(--morado) 8%, var(--superficie)); border-radius: var(--r-sm); padding: 5px 7px; }
.menu-cuenta a, .menu-cuenta button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; font-size: 15px; font-weight: 500; color: var(--texto); text-decoration: none; padding: 9px 10px; border-radius: var(--r-sm); }
.menu-cuenta a small { font-size: 13px; color: var(--texto-suave); font-weight: 400; }
.menu-cuenta a:hover, .menu-cuenta button:hover { background: var(--gris-claro); color: var(--acento); }
.mc-t { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); padding: 12px 10px 4px; border-top: 1px solid var(--linea-suave); margin-top: 4px; }
.menu-cuenta .mc-sub { padding-left: 18px; font-size: 14px; }
.menu-cuenta .mc-salir { border-top: 1px solid var(--linea-suave); margin-top: 4px; padding-top: 4px; }

/* ----- Franja de freno (solo administradores, ?freno=1) ----- */
.franja-freno { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 12px var(--gutter); background: color-mix(in srgb, var(--error) 7%, var(--superficie)); border-bottom: 1px solid color-mix(in srgb, var(--error) 30%, var(--superficie)); font-size: 15px; line-height: 1.45; position: relative; z-index: 4; }
.franja-freno b { color: var(--error); }
.franja-freno .btn { margin-left: auto; }


/* ----- Selector de máquinas (de «Informe puro») ----- */
.selector { background: var(--superficie); border-bottom: 1px solid var(--linea); display: flex; align-items: stretch; padding: 0 var(--gutter); min-height: 60px; gap: 16px; position: relative; z-index: 3; }
.lista-maq { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lista-maq::-webkit-scrollbar { display: none; }
.opc { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; align-content: center; padding: 0 18px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; flex: none; text-decoration: none; color: var(--texto); }
.opc:hover { background: var(--gris-claro); }
.opc b { font-size: 15px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.opc small { grid-column: 2; font-size: 13px; color: var(--texto-suave); white-space: nowrap; }
.opc small .tab { color: var(--texto); font-family: var(--mono); font-size: 12px; }
.opc.sel { border-bottom-color: var(--acento); background: color-mix(in srgb, var(--morado) 5%, var(--superficie)); }
.opc.sel b { color: var(--acento); }
.opc.sin-punto { grid-template-columns: 1fr; }
.opc.sin-punto small { grid-column: 1; }
.opc .sim { font-size: 11px; padding: 1px 5px; font-weight: 600; }
.selector .atajo { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--texto-suave); flex: none; white-space: nowrap; }
.selector .atajo span { margin-left: 6px; }

/* ----- Indicador de conexión ----- */
.vivo.reconecta { color: var(--texto-suave); }
.vivo.reconecta::before { background: var(--acero); box-shadow: none; animation: parpadeo 1.2s ease-in-out infinite; }
.oscuro .vivo.reconecta { color: var(--texto-suave-oscuro); }
@keyframes parpadeo { 50% { opacity: .25; } }

/* ----- En vivo (layout de «Informe puro»; módulo de cabina de «Informe con mapa») ----- */
.vivo-pag { padding: 0 var(--gutter); padding-top: 24px; }
.detalle { padding: 22px 24px 24px; display: grid; gap: 18px; }
.detalle .cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.detalle .cab h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--blanco); display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.detalle .cab p { font-size: 15px; color: var(--texto-suave-oscuro); margin-top: 8px; line-height: 1.5; max-width: 760px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi b.mal { color: var(--estado-paro); } /* amarillo sobre carbón: más de 10:1 */
.caja-g { padding: 16px 18px 14px; border-radius: var(--r-md); background: var(--carbon-tabla); border: 1px solid var(--linea-oscura); min-width: 0; }
.caja-g h2 { font-size: 15px; font-weight: 600; color: var(--blanco); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.caja-g h2 > span { font: 400 13px/1.6 var(--fuente); color: var(--texto-suave-oscuro); display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.ley { display: inline-flex; align-items: center; gap: 6px; }
.ley i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.ley i.banda-l { background: var(--perla-14); box-shadow: inset 0 1px 0 var(--acero), inset 0 -1px 0 var(--acero); }
.caja-g svg { width: 100%; height: auto; display: block; overflow: visible; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
.lista-osc .ev { border-bottom-color: var(--linea-oscura); color: var(--perla); }
.lista-osc .ev .h, .lista-osc .ev .dur { color: var(--texto-suave-oscuro); }
.produccion b { display: block; font: 500 30px/1.1 var(--mono); color: var(--blanco); word-spacing: -.32em; }
.produccion span { font-size: 13px; color: var(--texto-suave-oscuro); }
.cinta-ley { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--texto-suave-oscuro); margin-top: 10px; }
.cinta-ley span { display: inline-flex; align-items: center; gap: 6px; }
.cinta-ley i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.tabla-osc { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--perla); }
.tabla-osc th { text-align: left; font-size: 12px; font-weight: 500; color: var(--texto-suave-oscuro); padding: 0 10px 8px 0; border-bottom: 1px solid var(--linea-oscura); white-space: nowrap; }
.tabla-osc td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--linea-oscura); font: 500 13px/1.2 var(--mono); white-space: nowrap; }
.tabla-osc .d { text-align: right; padding-right: 0; }
.vivo-pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 20px; font-size: 14px; color: var(--texto-suave); }
.vivo-pag > .panel { margin-top: 20px; }

/* ----- Mapa del mes aligerado (histórico) ----- */
.mapa-mes { background: var(--superficie); border-radius: var(--r-sm); box-shadow: var(--sombra); padding: 14px 20px 12px; max-width: 960px; margin: 0 auto 16px; }
.mapa-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.mapa-cab h2 { font-size: 16px; font-weight: 700; }
.mapa-cab h2 .h-nota { font-weight: 500; font-size: 14px; color: var(--texto-suave); }
.btn-texto { font-size: 14px; font-weight: 600; color: var(--acento); border-bottom: 1.5px solid currentColor; padding: 2px 0; white-space: nowrap; }
.mapa-fila { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 12px; }
.mapa-fila + .mapa-fila { margin-top: 6px; }
.mapa-rot { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.mapa-rot a { color: inherit; text-decoration: none; line-height: 24px; } /* objetivo de 24 px (WCAG 2.5.8, MOD-ACCESIBILIDAD-07) */
.mapa-rot a:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.mapa-fila.sel .mapa-rot { font-weight: 800; }
.mapa-celdas { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; }
.mapa-dias { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; font: 400 11px/1 var(--mono); color: var(--texto-suave); text-align: center; }
.mapa-dias span.peor { color: var(--acento); font-weight: 700; }
.mapa-dias-fila { margin-top: 5px; }
.mapa-dias-fila > span:first-child { font-size: 12px; color: var(--texto-suave); }
.celda { display: block; height: 18px; border-radius: 3px; position: relative; text-decoration: none; }
a.celda:hover { outline: 2px solid var(--texto); outline-offset: 1px; z-index: 2; }
.celda.e0 { background: var(--e0); box-shadow: inset 0 0 0 1px var(--linea); } .celda.e1 { background: var(--e1); } .celda.e2 { background: var(--e2); } .celda.e3 { background: var(--e3); } .celda.e4 { background: var(--e4); }
.celda.dom::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--acero-40); }
.celda.sin { background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--acero); background-image: linear-gradient(135deg, transparent 44%, var(--acero) 44% 56%, transparent 56%); }
.celda.peor { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento); z-index: 1; }
.celda.foco { z-index: 2; } /* el día elegido lleva una raya debajo; el contorno queda solo para el peor día */
.celda.foco::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: -6px; height: 3px; border-radius: 2px; background: var(--carbon); }
.mapa-pie { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 20px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linea-suave); }
.mapa-ley { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--texto-suave); }
.mapa-ley span { display: inline-flex; align-items: center; gap: 7px; }
.mapa-ley .celda { width: 14px; height: 12px; display: inline-block; }
.mapa-ley .grad { width: 40px; height: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--e1), var(--e2), var(--e3), var(--e4)); }
.mapa-mas { flex-basis: 100%; }
.mapa-mas summary { font-size: 14px; font-weight: 600; line-height: 24px; color: var(--acento); cursor: pointer; width: max-content; }
.mapa-mas[open] summary { margin-bottom: 10px; }

/* ----- Histórico: periodo, datos del periodo y exportación ----- */
.periodo { display: flex; align-items: center; gap: 6px; position: relative; flex-wrap: wrap; }
.periodo .elegir { margin-left: 10px; }
.periodo .elegir summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--perla); border-bottom: 1px solid var(--perla-40); padding-bottom: 1px; }
.periodo .elegir summary::-webkit-details-marker { display: none; }
.periodo .elegir[open] summary { color: var(--verde-luz); border-color: currentColor; }
.elegir-caja { position: absolute; right: 0; top: calc(100% + 10px); z-index: 9; width: 300px; background: var(--superficie); color: var(--texto); border-radius: var(--r-md); box-shadow: var(--sombra-modulo); padding: 16px; display: grid; gap: 12px; }
.elegir-caja .campo input { min-width: 0; width: 100%; }
.elegir-caja .base { margin: 0; }
.enfocado, .aviso-mes { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: 14px; color: var(--perla); background: var(--verde-luz-12); border: 1px solid var(--verde-luz-35); border-radius: var(--r-sm); padding: 6px 10px; }
.enfocado a { color: var(--verde-luz); font-weight: 600; }
.datos-periodo { max-width: 960px; margin: 20px auto 0; padding: 18px 24px 16px; }
.datos-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.datos-cab p { font-size: 14px; color: var(--texto-suave); margin-top: 2px; line-height: 1.45; max-width: 600px; }
.variables { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 14px; margin: 12px 0 10px; align-items: center; }
.variables > span { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.variables label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.variables input { accent-color: var(--acento); width: 16px; height: 16px; }
.caja-tabla { max-height: 290px; overflow: auto; border-top: 1px solid var(--linea-suave); }
.caja-tabla .tabla th { position: sticky; top: 0; background: var(--superficie); padding-top: 10px; z-index: 1; }
.tabla.ordenable th button { font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; padding: 0; }
.tabla.ordenable th button::after { content: "↕"; font-size: 11px; color: var(--texto-suave); }
.tabla.ordenable th[aria-sort="ascending"] button::after { content: "↑"; color: var(--acento); }
.tabla.ordenable th[aria-sort="descending"] button::after { content: "↓"; color: var(--acento); }
.tabla-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; font-size: 14px; color: var(--texto-suave); padding: 10px 0 2px; }
.exportar { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.exportar h3 { font-size: 15px; font-weight: 700; }
.exportar-fila { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.segmentos { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; }
.segmentos label { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 14px; cursor: pointer; position: relative; }
.segmentos label + label { border-left: 1px solid var(--linea); }
.segmentos label:has(input:checked) { background: color-mix(in srgb, var(--morado) 6%, var(--superficie)); color: var(--acento); font-weight: 600; }
.segmentos label:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: -2px; }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos label small { font: 400 12px var(--mono); color: var(--texto-suave); }
.segmentos label:has(input:disabled) { color: var(--texto-suave); cursor: not-allowed; background: var(--gris-claro); }
.formatos { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.progreso { height: 6px; border-radius: 6px; background: var(--relleno); overflow: hidden; max-width: 420px; }
.progreso i { display: block; height: 100%; width: 0; background: var(--verde); border-radius: 6px; transition: width 300ms linear; }
.estado-exp { font-size: 14px; line-height: 1.45; display: flex; align-items: flex-start; }
.estado-exp:empty { display: none; }

/* ----- Asistente: modelo, crédito, pasos, correo ----- */
.asis-enc { padding: 18px 24px 14px; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.asis-meta { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; color: var(--texto-suave); }
.modelo { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--r-sm); overflow: hidden; }
.modelo button { font-size: 13px; font-weight: 600; padding: 6px 12px; color: var(--texto-suave); }
.modelo button + button { border-left: 1px solid var(--linea); }
.modelo button[aria-pressed="true"] { background: color-mix(in srgb, var(--morado) 8%, var(--superficie)); color: var(--acento); }
.modelo button:disabled { color: var(--acero); cursor: not-allowed; text-decoration: line-through; }
.razon-modelo { flex-basis: 100%; font-size: 13px; color: var(--texto-suave); }
.guia-modelo { flex-basis: 100%; font-size: 13px; line-height: 1.45; color: var(--texto-suave); }
.guia-modelo summary { width: max-content; font-weight: 600; color: var(--acento); cursor: pointer; }
.guia-modelo ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.guia-modelo p { margin: 4px 0 0; }
.guia-modelo b { color: var(--texto); }
[data-gasto-ia] .guia-modelo { margin-top: 10px; }
.paso { display: flex; align-items: center; gap: 8px; font: 400 12px/1.3 var(--mono); color: var(--texto-suave); }
.paso::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--acero-40); border-top-color: var(--acento); animation: gira .8s linear infinite; flex: none; box-sizing: border-box; }
.paso.listo::before { animation: none; border-color: var(--verde); background: var(--verde); }
@keyframes gira { to { transform: rotate(360deg); } }
.acciones-asis .chip:disabled { opacity: .5; cursor: progress; }
.correo { border: 1px solid var(--linea); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; line-height: 1.5; display: grid; gap: 6px; animation: entra 260ms cubic-bezier(.2,.7,.2,1); }
.correo dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 13px; }
.correo dt { color: var(--texto-suave); }
.correo .cuerpo { border-top: 1px solid var(--linea-suave); padding-top: 8px; white-space: pre-line; }
.correo .botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.correo .enviado { font-size: 13px; color: var(--texto-suave); display: flex; align-items: flex-start; }
.guarda { font-size: 12px; color: var(--texto-suave); }
/* Sin asistente (auditor): el riel queda solo con el cierre, PDF y Siguiente */
@media (min-width: 1101px) { .asis.sin-chat { height: auto; } }

/* ----- Diálogo de confirmación (data-confirma) ----- */
.dialogo { border: 0; border-radius: var(--r-md); padding: 24px; width: min(460px, calc(100% - 32px)); box-shadow: var(--sombra-modulo); color: var(--texto); margin: auto; }
.dialogo::backdrop { background: var(--carbon-profundo-45); }
.dialogo h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.dialogo p { font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
.dialogo .campo { margin-top: 14px; }

.dialogo .botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ----- Administración: gasto (contenido de «Informe puro» con clases de conclusión) ----- */
.freno { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; border-left: 4px solid var(--acero); }
.freno .estado-f { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 8px 0 6px; }
.freno p { color: var(--texto-suave); line-height: 1.5; margin-top: 4px; font-size: 15px; max-width: 780px; }
.freno details { margin-top: 10px; font-size: 14px; }
.freno summary { cursor: pointer; font-weight: 600; color: var(--acento); width: max-content; max-width: 100%; }
.freno .activo-ej { margin-top: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--gris-claro); display: grid; gap: 10px; justify-items: start; }
.freno .activo-ej p { color: var(--texto); margin: 0; }
.freno.activo { border-left-color: var(--error); }
.freno.activo .estado-f { color: var(--error); }
.freno .lado-f { display: grid; gap: 10px; justify-items: end; text-align: right; }
.freno .lado-f p { font-size: 13px; max-width: 230px; }
.rejilla-gasto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.columna { display: grid; gap: 20px; align-content: start; min-width: 0; }
.panel .sub { font-size: 14px; color: var(--texto-suave); line-height: 1.45; }
.panel h3 { font-size: 15px; font-weight: 700; margin: 18px 0 4px; }
.panel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.panel-cab .campo select { min-width: 170px; }
.cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 4px; border-top: 1px solid var(--linea); }
.cuatro .medida { padding: 10px 12px 0 0; }
.cuatro .medida + .medida { padding-left: 12px; border-left: 1px solid var(--linea); }
.cuatro .medida b { font-size: 22px; }
.credito { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 14px 0 18px; }
.credito .barra { height: 8px; border-radius: 8px; background: var(--relleno); position: relative; }
.credito .barra i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: var(--acento); }
.credito .barra .marca { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--carbon); }
.credito .barra .marca::after { content: attr(data-l); position: absolute; top: 14px; transform: translateX(-50%); font: 400 11px/1 var(--mono); color: var(--texto-suave); white-space: nowrap; }
.credito .v { font: 500 13px/1 var(--mono); color: var(--texto-suave); white-space: nowrap; }
.nota-gasto { font-size: 13px; color: var(--texto-suave); margin-top: 14px; line-height: 1.5; }
.gasto-dias { margin-top: 8px; }
.gasto-dias svg { width: 100%; height: auto; display: block; overflow: visible; }
.form-saldo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 14px; }
.form-saldo .campo input { min-width: 0; width: 100%; }
.form-saldo .btn { grid-column: 1 / -1; justify-self: start; }
.campo input:user-invalid { border-color: var(--error); }
.campo .ayuda { font-weight: 400; font-size: 12px; color: var(--texto-suave); }
.error-campo { font-size: 13px; color: var(--error); grid-column: 1 / -1; }
.error-campo:empty { display: none; }
/* El error bajo un campo de un diálogo (alta de usuario, MOD-USABILIDAD-07): `.dialogo p` lo dejaba gris y de 15 px. */
.dialogo .error-campo:not(.error-dlg) { font-size: 13px; color: var(--error); }
.saldo-quien { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }
.estimacion { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--gris-claro); font-size: 14px; line-height: 1.5; }
.etiqueta { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 3px 6px; margin-right: 6px; vertical-align: 1px; background: var(--superficie); white-space: nowrap; }
.tabla .neg { color: var(--texto-suave); }
.alt-aws { margin-top: 12px; font-size: 14px; }
.alt-aws summary { cursor: pointer; font-weight: 600; color: var(--acento); }
.alt-aws p { margin-top: 8px; padding: 10px 12px; border-left: 2px solid var(--acero); color: var(--texto-suave); }

/* ----- Adaptación de las piezas combinadas ----- */
@media (max-width: 1100px) {
  .rejilla-gasto, .dos-col { grid-template-columns: minmax(0, 1fr); }
  /* Logo, menú y la derecha completa piden unos 1060 px: de 769 a 1100 la demo activa y la fecha se van, como en el celular */
  .enc .demo-activa, .enc .der .hora-enc { display: none; }
}
@media (max-width: 768px) {
  .menu-btn { display: inline-flex; }
  .enc { flex-wrap: wrap; height: auto; min-height: 56px; padding: 10px 16px; gap: 12px; }
  .enc nav { display: none; order: 3; width: 100%; height: auto; flex-direction: column; gap: 0; margin: 0; padding: 4px 0 6px; border-top: 1px solid var(--linea-suave); overflow: visible; }
  .nav-abierta .enc nav { display: flex; }
  .enc nav a { padding: 12px 4px; border-bottom: 0; border-left: 3px solid transparent; }
  .enc nav a.activa { border-left-color: var(--acento); padding-left: 10px; }
  .enc .der { margin-left: auto; gap: 12px; }
  .enc .demo-activa, .enc .der .hora-enc { display: none; }
}
/* Celular: el logo temporal es ancho; a 390 px solo cabe en un renglón con el menú como ícono (el texto «Menú» sigue para el lector) */
@media (max-width: 480px) {
  .enc .marca img { height: 24px; }
  .enc, .enc .der { gap: 8px; }
  .enc .menu-btn { font-size: 0; gap: 0; }
}
@media (max-width: 385px) { .enc .marca img { height: 22px; } }
@media (max-width: 720px) {
  .lista-maq, .selector .atajo { display: none; }
  .selector { min-height: 0; padding: 4px var(--gutter); }
  .detalle { padding: 16px 14px 18px; }
  .detalle .cab { flex-direction: column; align-items: flex-start; gap: 12px; }
  .detalle .cab h1 { font-size: 24px; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .caja-g { padding: 14px 12px 12px; }
  .vivo-pag { padding-top: 16px; }
  .mapa-mes { padding: 12px 12px 10px; }
  .mapa-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mapa-dias-fila > span:first-child { display: none; }
  .mapa-dias { gap: 2px; }
  .celda { height: 16px; border-radius: 2px; }
  .mapa-fila + .mapa-fila { margin-top: 10px; }
  .datos-periodo { padding: 14px 14px 12px; }
  .elegir-caja { right: auto; left: 0; width: min(300px, calc(100vw - 32px)); }
  .periodo .elegir { margin-left: 0; flex-basis: 100%; margin-top: 6px; }
  .cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cuatro .medida:nth-child(3) { padding-left: 0; border-left: 0; }
  .form-saldo { grid-template-columns: minmax(0, 1fr); }
  .freno { grid-template-columns: minmax(0, 1fr); }
  .freno .lado-f { justify-items: start; text-align: left; }
  .franja-freno .btn { margin-left: 0; }
  .menu-cuenta { width: min(264px, calc(100vw - 32px)); }
}
.punto--sin { border: 1.5px dashed var(--acero); }
.oscuro .punto--sin { border-color: var(--texto-suave-oscuro); }
.hist .opc { padding: 0 12px; }
.hist .selector { gap: 10px; }

@media (max-width: 720px) { .credito { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* ==================== Subido de los extra-g*.css ==================== */
/* Botones del sitio (antes extra-g1.css) */
/* ---------- Botones del sitio que faltan en el sistema (sobre fondo oscuro) ---------- */
/* .boton.senal del sitio: carbón profundo, borde verde luz, texto en degradado perla → verde luz */
.btn-senal { background: var(--carbon-profundo); border: 1px solid var(--verde-luz-45); box-shadow: 0 5px 14px var(--verde-luz-25); color: var(--verde-luz); }
.btn-senal span { background: linear-gradient(90deg, var(--perla), var(--verde-luz)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-senal svg { flex: none; transition: transform 160ms ease; }
.btn-senal:hover { border-color: var(--verde-luz); box-shadow: 0 6px 26px var(--verde-luz-45); }
.btn-senal:hover svg { transform: translateX(4px); }
/* .boton.fantasma del sitio */
.btn-fantasma { color: var(--perla); border: 1px solid var(--perla-35); background: transparent; }
.btn-fantasma:hover { border-color: var(--verde-luz); color: var(--verde-luz); }
.btn-pri[disabled], .btn-pri[aria-disabled="true"] { background: var(--relleno); color: var(--texto-suave); box-shadow: none; opacity: 1; cursor: not-allowed; transform: none; }

/* Reporte: .seccion es grid y anula [hidden] (antes extra-g4.css) */
.pagina .seccion[hidden] { display: none; }

/* En vivo: tarjetas bajo el módulo, aviso de simulada y ajustes de listas oscuras en tarjetas blancas (antes extra-g3.css) */

/* Cifra simulada que se mueve dentro de una cifra grande: hereda el tamaño y color de la cifra, no el de .kpi span */
.kpi b [data-vaiven] { font: inherit; color: inherit; }

/* Aviso de máquina simulada dentro del módulo oscuro (texto de «Informe con conclusión») */
.aviso-sim { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px dashed var(--acero-claro-40); border-radius: var(--r-md); font-size: 14px; line-height: 1.45; color: var(--perla); }
.aviso-sim .sim { flex: none; margin-top: 1px; }

/* Tarjetas blancas bajo el módulo (layout de cabina de «Informe con mapa»): cambios del turno y últimos registros */
.vivo-bajo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; align-items: start; }
.vivo-bajo .panel h2 { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.vivo-bajo .panel h2 .nota { font-size: 13px; }
.panel .lista-osc .ev { border-bottom-color: var(--linea-suave); color: var(--texto); }
.panel .lista-osc .ev .h, .panel .lista-osc .ev .dur { color: var(--texto-suave); }
.panel .tabla-osc { color: var(--texto); }
.panel .tabla-osc th { color: var(--texto-suave); border-bottom-color: var(--linea); }
.panel .tabla-osc td { border-bottom-color: var(--linea-suave); padding-top: 6px; padding-bottom: 6px; }
.panel .tabla-osc tr:last-child td { border-bottom: 0; }
@media (max-width: 1100px) { .vivo-bajo { grid-template-columns: minmax(0, 1fr); } }
.vivo-col { display: grid; gap: 16px; min-width: 0; }
.mes-salidas { margin-top: 10px; }
.mes-ir { margin-top: 12px; }


/* Utilidades que sustituyen style="" en las páginas (CSP sin estilos en línea) */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }

/* ==================== Ronda de correcciones (cobertura y jueces) ==================== */
/* Utilidades: texto solo en ancho o solo en celular */
.solo-angosto { display: none; }
@media (max-width: 720px) { .solo-ancho { display: none !important; } .solo-angosto { display: inline; } } /* utilidad: gana a cualquier display del componente */


/* Selector: misma forma en vivo y en el histórico */

/* Eventos del turno con velocidad promedio del tramo (troqueladoras) */
.ev.ev--vel { grid-template-columns: 48px 12px minmax(0, 1fr) auto auto; }
.ev .vel { font: 500 13px/1 var(--mono); color: var(--texto); white-space: nowrap; word-spacing: -.32em; }
.lista-osc .ev .vel { color: var(--perla); }
@media (max-width: 720px) { .ev.ev--vel { grid-template-columns: 44px 10px minmax(0, 1fr); } .ev .vel { grid-column: 3; } }
/* Columna Estado de los últimos registros (cabinas) */
.tabla-osc th.est, .tabla-osc td.est { padding-left: 18px; font-family: var(--fuente); font-size: 13px; }
.tabla-osc td.est .punto { margin-right: 7px; width: 8px; height: 8px; }

/* Datos del periodo: Estado con aire; tabla ancha con sombra de desplazamiento en el celular */
.tabla th[data-v="estado"], .tabla td[data-v="estado"] { padding-left: 24px; }
@media (max-width: 720px) {
  .caja-tabla .tabla { min-width: 460px; }
  .caja-tabla { background: linear-gradient(to left, var(--superficie) 30%, var(--blanco-00)) right / 32px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, var(--carbon-profundo-20), transparent) right / 12px 100% no-repeat scroll; }
}

/* Desglose de paro, arreglo y mantenimiento (sección 01) */
.desglose { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea-suave); font-size: 14px; color: var(--texto-suave); }
.desglose > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.desglose .l { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.desglose b { color: var(--texto); font: 500 14px var(--mono); word-spacing: -.32em; }
.desglose small { font-size: 12px; }

/* Gráficas: título chico y altura media (dos por sección caben en la hoja carta) */
.g-tit { font-size: 13px; font-weight: 600; color: var(--texto-suave); margin-top: 10px; }
.grafica.media { height: 190px; }
@media (max-width: 720px) { .grafica.media { height: 180px; } }

/* Tendencia y distribución del periodo */
.tendencia .tend-h { font-size: 15px; font-weight: 700; margin: 18px 0 6px; }
.tendencia .tend-h .h-nota { font-weight: 500; font-size: 13px; color: var(--texto-suave); }
.semanas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.semanas > div { padding: 8px 12px 4px 0; display: grid; gap: 3px; }
.semanas > div + div { padding-left: 12px; border-left: 1px solid var(--linea); }
.semanas small { font-size: 12px; color: var(--texto-suave); }
.semanas b { font: 500 22px/1.1 var(--mono); }
.semanas span { font-size: 12px; color: var(--texto-suave); }
.semanas .baja b, .semanas .baja span .tab { color: var(--texto); font-weight: 700; }
.semanas .baja { box-shadow: inset 0 2px 0 var(--texto); }
@media (max-width: 720px) { .semanas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .semanas > div:nth-child(odd) { padding-left: 0; border-left: 0; } }

/* Mapa: línea de tiempo del día elegido */
.mapa-dia { margin-top: 12px; padding: 10px 12px 12px; border-radius: var(--r-sm); background: var(--gris-claro); }
.mapa-dia-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; font-size: 14px; }
.mapa-dia-cab span { color: var(--texto-suave); }
.mapa-dia-cab .btn-texto { margin-left: auto; font-size: 13px; }
.mapa-dia .horas, .mapa-dia .cinta-ley { color: var(--texto-suave); }
.mapa-sem { display: none; }

/* Mapa en el celular: el mes como calendario de semanas, celdas de 32 px con el número del día */
@media (max-width: 720px) {
  .mapa-sem { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font: 500 11px/1 var(--mono); color: var(--texto-suave); text-align: center; margin-bottom: 4px; }
  .mapa-celdas { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  /* el día 1 cae en su día de la semana (lunes = 1); la clase la pone mapa.ejs */
  .mapa-celdas.ini-1 > :first-child { grid-column-start: 1; }
  .mapa-celdas.ini-2 > :first-child { grid-column-start: 2; }
  .mapa-celdas.ini-3 > :first-child { grid-column-start: 3; }
  .mapa-celdas.ini-4 > :first-child { grid-column-start: 4; }
  .mapa-celdas.ini-5 > :first-child { grid-column-start: 5; }
  .mapa-celdas.ini-6 > :first-child { grid-column-start: 6; }
  .mapa-celdas.ini-7 > :first-child { grid-column-start: 7; }
  .mapa-celdas .celda { height: 32px; border-radius: 3px; }
  .mapa-dias-fila { display: none; }
  .mapa-ley { flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
  .mapa-ley span { white-space: nowrap; }
  .mapa-ley .grad { width: 24px; }
}

/* Topología: la conexión va como rótulo aparte; el punto ya no compite con la pastilla de estado */
.g2-nodo.g2-nodo--maq { grid-template-columns: minmax(0, 1fr) auto; }
.g2-con { display: block; font-size: 12px; font-weight: 500; color: var(--texto-suave); margin-top: 2px; }
.g2-con::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); margin-right: 6px; vertical-align: .05em; }

/* Barra fija del celular: la página reserva su alto más el área segura */
@media (max-width: 1100px) { .pag-hist { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* Barra del módulo en el celular: solo la sede y el reloj */
@media (max-width: 720px) { .desglose > span { white-space: normal; flex-wrap: wrap; } .tabla-osc th.est, .tabla-osc td.est { padding-left: 10px; } }
.mapa-ley small { font-size: inherit; margin-left: -7px; }
/* Histórico: el rótulo del atajo va bajo las teclas para que quepan las 4 máquinas junto al asistente */
@media (min-width: 721px) { .hist .selector .atajo { display: grid; grid-template-columns: auto auto; justify-content: end; align-content: center; gap: 3px 4px; } }
.hist .selector .atajo kbd { justify-self: end; }

.hist .selector .atajo span { display: inline; grid-column: 1 / -1; margin-left: 0; font-size: 12px; }

/* Ronda 3 de correcciones */
/* Logo del folio: morado en línea (verde sobre claro solo desde 160 px, manual rev2) */

/* Logo temporal: 196 px de ancho en la hoja carta. Si el folio es más angosto (hoja 1 del invernadero, 181 px junto al título
   sin cortes), el logo se alinea a la derecha y ocupa el espacio entre título y folio en vez de salirse de la hoja */
.folio .folio-logo { display: flex; justify-content: flex-end; width: auto; }
.hoja-enc:not(.delgado) .folio:not(.hoja .folio) .folio-logo { contain: inline-size; } /* el logo no ensancha el folio de texto */
@media (max-width: 720px) { .folio .folio-logo { justify-content: flex-start; } } /* en el celular el folio va a la izquierda */
.folio .folio-logo img { width: 196px; height: auto; flex: none; display: block; }
/* Peor día: un solo tratamiento, contorno morado, en la gráfica 02, el mapa y sus leyendas */
.leyenda i.ley-peor, .mapa-ley i.ley-peor { width: 12px; height: 10px; border-radius: 2px; display: inline-block; background: transparent; box-shadow: inset 0 0 0 2px var(--acento); }
/* En vivo: una cifra que no se mide se dice con texto */
.kpi b.kpi-txt { font: 600 20px/1.25 var(--fuente); word-spacing: normal; color: var(--perla); margin-top: 12px; }
/* Gasto: las marcas de 90 % y 95 % con su rótulo en lados opuestos de la barra */
.credito.credito--marcas { grid-template-columns: minmax(0, 1fr); gap: 26px; margin: 30px 0 22px; }
.credito-ley { margin: 0; font-size: 12px; color: var(--texto-suave); }
.credito .barra .marca.arriba::after { top: auto; bottom: 14px; }

/* =====================================================================
   Procedente de extra-g1.css (fusionado en la ronda 4)
   ===================================================================== */
/* Grupo 1 · páginas públicas y de acceso (login, aviso, políticas, aceptar, 403, freno).
   Se enlaza solo en esas páginas, después de estilos.css. Solo tokens de :root.
   Candidatos a subir al sistema: .btn-senal, .btn-fantasma, .pag-aviso, .legal-*, .aviso-linea. */

/* Botones .btn-senal, .btn-fantasma y .btn-pri deshabilitado: ya están en estilos.css */

/* ---------- Login: botón a Cognito en lugar de campos propios ---------- */
.login-izq .acceso-acc { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; max-width: 520px; }
.login-izq .acceso-nota { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--texto-suave-oscuro); max-width: 440px; }
.login-izq .legal a:hover { color: var(--verde-luz); }
.aviso-linea { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; max-width: 440px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--verde-luz-35); background: var(--verde-luz-07); font-size: 14px; line-height: 1.45; color: var(--perla); }
.aviso-linea .hecho { flex: none; margin-top: 1px; }
.aviso-linea[hidden] { display: none; }
/* Fondo con movimiento solo si la persona no pidió reducirlo (RNF-10); si lo pidió, queda fijo */
@media (prefers-reduced-motion: no-preference) {
  .login-der::before, .pag-aviso::before { animation: brillo-lento 14s ease-in-out infinite alternate; }
}
@keyframes brillo-lento { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, -40px) scale(1.12); } }

/* ---------- Páginas legales (aviso de privacidad, políticas, aceptar) ---------- */
.legal-cab { background: var(--morado-noche); color: var(--perla); position: relative; overflow: hidden; }
.legal-cab::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--linea-oscura) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 100% 0, #000 5%, transparent 60%); mask-image: radial-gradient(circle at 100% 0, #000 5%, transparent 60%); pointer-events: none; }
.legal-cab .interior { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 40px var(--gutter) 36px; }
.legal-cab h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 10px; color: var(--blanco); }
.legal-cab .legal-entrada { font-size: 17px; line-height: 1.55; color: var(--texto-suave-oscuro); max-width: 600px; }
.legal-cab .meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 13px/1.4 var(--mono); color: var(--texto-suave-oscuro); }
.legal-cab .meta b { color: var(--verde-luz); font-weight: 500; }
.texto-legal { max-width: 760px; margin: 0 auto; padding: 8px var(--gutter) 32px; }
.texto-legal .nota-tpl { margin: 24px 0 4px; padding: 12px 14px; border-left: 3px solid var(--acento); background: var(--superficie); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.legal-indice { margin: 24px 0 8px; padding: 18px 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md); }
.legal-indice p { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 10px; }
.legal-indice ol { list-style: none; columns: 2; column-gap: 28px; counter-reset: ind; }
.legal-indice li { counter-increment: ind; break-inside: avoid; padding: 4px 0; font-size: 15px; }
.legal-indice li::before { content: counter(ind, decimal-leading-zero); font: 500 12px var(--mono); color: var(--acento); margin-right: 10px; }
.legal-indice a { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--linea); }
.legal-indice a:hover { color: var(--acento); border-color: var(--acento); }
.texto-legal section { padding: 22px 0 6px; border-top: 1px solid var(--linea); scroll-margin-top: 72px; }
.texto-legal section:first-of-type { border-top: 0; }
.texto-legal h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; color: var(--texto); }
.texto-legal h3 { font-size: 16px; font-weight: 700; margin: 14px 0 4px; color: var(--acento); }
.texto-legal p, .texto-legal li { font-size: 16px; line-height: 1.62; }
.texto-legal p + p { margin-top: 10px; }
.texto-legal ul { margin: 8px 0 10px; display: grid; gap: 6px; }
.texto-legal ul li { position: relative; padding-left: 20px; }
.texto-legal ul li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 8px; height: 2px; border-radius: 2px; background: var(--verde); }
.texto-legal a:not(.btn):not(.enlace) { color: var(--acento); font-weight: 600; }
.texto-legal strong { font-weight: 700; }
.texto-legal .dato { padding: 10px 0 2px; }
.legal-pie { border-top: 1px solid var(--linea); background: var(--superficie); }
.legal-pie .interior { max-width: 760px; margin: 0 auto; padding: 18px var(--gutter); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--texto-suave); }
.legal-pie a { color: var(--texto); font-weight: 600; }
.legal-pie a:hover { color: var(--acento); }
.rep-barra .marca-fija { display: inline-flex; }

/* Aceptación de políticas */
.aceptar { margin-top: 28px; padding: 24px; background: var(--superficie); border: 1px solid var(--linea); border-top: 3px solid var(--verde); border-radius: var(--r-md); box-shadow: var(--sombra); scroll-margin-top: 72px; }
 .aceptar h2 { scroll-margin-top: 80px; font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.aceptar .sub { font-size: 15px; line-height: 1.5; color: var(--texto-suave); margin-bottom: 16px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--gris-claro); font-size: 16px; line-height: 1.45; cursor: pointer; }
.casilla input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--acento); cursor: pointer; }
.casilla:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--morado) 5%, var(--superficie)); }
.aceptar .acciones { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Sin JavaScript el navegador valida la casilla (required); con app el botón se habilita al marcarla */
.aceptar .err { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--error) 7%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--error) 35%, var(--superficie)); color: var(--error); font-size: 14px; line-height: 1.45; font-weight: 600; }
.aceptar .err[hidden] { display: none; }
.aceptar .err i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--error); position: relative; margin-top: 1px; }

.aceptar .err i::before { content: ""; position: absolute; left: 8px; width: 2px; border-radius: 1px; background: var(--blanco); top: 4px; height: 6px; }
.aceptar .err i::after { content: ""; position: absolute; left: 8px; width: 2px; border-radius: 1px; background: var(--blanco); top: 12px; height: 2px; }
.proto-estados { margin-top: 14px; font-size: 13px; color: var(--texto-suave); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.proto-estados a { color: var(--acento); font-weight: 600; }
.leer-mas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 8px; padding: 14px 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md); font-size: 15px; }

/* ---------- Página de aviso (403 y freno): fondo oscuro con la identidad del login ---------- */
.pag-aviso { min-height: 100vh; position: relative; overflow: hidden; background: var(--carbon-profundo); color: var(--perla); display: flex; flex-direction: column; }
.pag-aviso::before { content: ""; position: absolute; right: -200px; bottom: -220px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, var(--morado-85) 0%, var(--morado-noche-50) 38%, var(--carbon-profundo-00) 70%); pointer-events: none; }
.pag-aviso::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--linea-oscura) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 8%, transparent 62%); mask-image: radial-gradient(circle at 100% 100%, #000 8%, transparent 62%); pointer-events: none; }
.pag-aviso > * { position: relative; z-index: 1; }
.pag-aviso .barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px var(--gutter); }
.pag-aviso .barra .logo { height: 36px; width: auto; display: block; }
@media (max-width: 480px) { .pag-aviso .barra .logo { height: 24px; } }
.pag-aviso .codigo { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--texto-suave-oscuro); text-transform: uppercase; }
.aviso-centro { flex: 1; display: flex; align-items: center; padding: 24px var(--gutter) 48px; }
.aviso-caja { width: min(640px, 100%); }
.aviso-caja h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--blanco); margin: 16px 0 12px; }
.aviso-caja h1 em { font-style: normal; color: var(--verde-luz); }
.aviso-caja .msg { font-size: 17px; line-height: 1.55; color: var(--texto-suave-oscuro); max-width: 540px; }
.aviso-caja .msg b { color: var(--perla); font-weight: 600; }
.sesion-yo { margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid var(--linea-oscura); border-radius: var(--r-md); background: var(--perla-06); font-size: 14px; }
.sesion-yo .ini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--morado); color: var(--verde-luz); font: 700 13px var(--fuente); flex: none; }
.sesion-yo b { display: block; color: var(--blanco); font-weight: 600; }
.sesion-yo small { display: block; color: var(--texto-suave-oscuro); font: 400 13px var(--mono); }
.sesion-yo .rol { margin-left: 6px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--verde-luz); border: 1px solid var(--verde-luz-40); border-radius: var(--r-sm); padding: 4px 6px; }
.filas-aviso { margin-top: 28px; border-top: 1px solid var(--linea-oscura); }
.filas-aviso > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea-oscura); font-size: 15px; line-height: 1.5; }
.filas-aviso dt { font: 500 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--verde-luz); }
.filas-aviso dd { color: var(--perla); }
.aviso-caja .acciones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.aviso-caja .acciones form { margin: 0; }
.aviso-caja .ayuda { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--texto-suave-oscuro); }
.aviso-caja .ayuda a { color: var(--verde-luz); font-weight: 600; }
.variante[hidden] { display: none; }
.pag-aviso .enlace { color: var(--verde-luz); }

@media (max-width: 720px) {
  .legal-cab .interior { padding: 28px var(--gutter) 26px; }
  .legal-cab h1 { font-size: 30px; }
  .legal-indice ol { columns: 1; }
  .texto-legal h2 { font-size: 19px; }
  .aceptar { padding: 18px 16px; }
  .aceptar .acciones .btn, .aviso-caja .acciones .btn, .aviso-caja .acciones form, .login-izq .acceso-acc .btn { width: 100%; }
  .pag-aviso .barra { padding: 18px var(--gutter); }
  .aviso-caja h1 { font-size: 30px; }
  .aviso-caja .msg { font-size: 16px; }
  .filas-aviso > div { grid-template-columns: 1fr; gap: 4px; }
  .btn-senal, .btn-fantasma { white-space: normal; text-align: center; }
}

/* Logo en morado sobre claro (el verde pide 160 px sobre claro): mismo trazo que pinta app.js */
.marca-svg { display: inline-flex; color: var(--verde); }
.marca-svg img { height: 36px; width: auto; display: block; }
@media (max-width: 480px) { .marca-svg img { height: 24px; } }

/* =====================================================================
   Procedente de extra-g2.css (fusionado en la ronda 4)
   ===================================================================== */
/* Grupo 2 · Inicio y Máquinas. Estilos que faltan en estilos.css; solo los enlazan index.html y maquinas.html.
   Candidatos a subir al sistema: .g2-demo (tarjetas de demo con «Última usada»), .g2-topo (topología)
   y .g2-c (marcas de conexión). Las anchuras de barra sustituyen a style="" en línea. */

/* Anchuras de las barras del inicio, sin estilos en línea */
.g2-w815 { width: 81.5%; } .g2-w961 { width: 96.1%; } .g2-w100 { width: 100%; }
.barra-prog i.g2-acero { background: var(--acero); }
.barra-prog i.g2-w0 { width: 0; }
.medidor .fila b.txt { font-family: var(--fuente); font-weight: 600; word-spacing: normal; color: var(--perla); }
.maq .pie.g2-pie { margin-top: 14px; }
.g2-punto-carbon { background: var(--texto); }
.g2-mas { padding-top: 12px; }

/* ===== Inicio: elegir la demo ===== */
.g2-demos { margin-top: 32px; }
.g2-demos-cab { margin-bottom: 14px; }
.g2-demos-cab h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.g2-demos-cab p { font-size: 15px; color: var(--texto-suave); max-width: 640px; line-height: 1.5; margin-top: 4px; }
.g2-demos-rej { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g2-demo { position: relative; background: var(--superficie); border-radius: var(--r-md); box-shadow: var(--sombra); padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; border: 1.5px solid transparent; border-top: 3px solid var(--verde); }
.g2-demo[data-demo-tarjeta="produccion"] { border-top-color: var(--acento); }
.g2-demo h3 { font-size: 20px; font-weight: 700; line-height: 1.25; padding-right: 110px; }
.g2-demo > p { font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
.g2-demo .btn { align-self: flex-start; margin-top: auto; }
.g2-demo.ultima { border-color: var(--acento); border-top-color: var(--acento); }
.g2-demo[data-demo-tarjeta="ambiental"].ultima { border-top-color: var(--verde); }
.g2-ultima { display: none; position: absolute; top: 18px; right: 18px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--acento); border: 1px solid var(--acento); border-radius: var(--r-sm); padding: 5px 8px; background: color-mix(in srgb, var(--morado) 6%, var(--superficie)); }
.g2-demo.ultima .g2-ultima { display: inline-block; }
.g2-demo-maq { display: grid; border-top: 1px solid var(--linea); }
.g2-demo-maq li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14px; font-weight: 600; }
.g2-demo-maq li > span:nth-child(2) { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g2-demo-maq em { font: 400 13px/1.3 var(--fuente); font-style: normal; font-variant-numeric: tabular-nums; color: var(--texto-suave); text-align: right; }
.g2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g2-chips .chip { font-size: 13px; padding: 5px 10px; color: var(--texto-suave); }

/* ===== Máquinas: atajos y topología ===== */
.g2-tecla { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--superficie); font: 500 13px/1.4 var(--mono); color: var(--texto); text-align: center; }
.g2-topo-sec { margin-top: 36px; }
.g2-topo-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 14px; }
.g2-topo-cab h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.g2-topo-cab p { font-size: 15px; color: var(--texto-suave); max-width: 640px; line-height: 1.5; margin-top: 4px; }
.g2-conex-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--texto-suave); }
.g2-conex-ley li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* Marcas de conexión (no son estados de máquina: no usan coral ni ámbar) */
.g2-c { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; box-sizing: border-box; }
.g2-c--linea { background: var(--verde); }
.g2-c--standby { border: 2px solid var(--acero); }
.g2-c--local { background: var(--morado); }
.g2-c--fuera { border: 1.5px dashed var(--acero); background: var(--gris-claro); }

.g2-topos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g2-topo { background: var(--superficie); border-radius: var(--r-md); box-shadow: var(--sombra); padding: 18px 22px 22px; border: 1.5px solid transparent; scroll-margin-top: 20px; }
.g2-topo.activa { border-color: var(--acento); }
.g2-topo-t { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.g2-topo-t h3 { font-size: 20px; font-weight: 700; }
.g2-activa { display: none; margin-left: auto; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--acento); border: 1px solid var(--acento); border-radius: var(--r-sm); padding: 5px 8px; }
.g2-topo.activa .g2-activa { display: inline-block; }

.g2-nube { position: relative; width: max-content; max-width: 100%; margin: 0 auto; padding: 10px 22px; border-radius: var(--r-md); background: var(--morado-noche); color: var(--perla); text-align: center; }
.g2-nube small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--verde-luz); }
.g2-nube b { display: block; font-size: 17px; font-weight: 700; margin-top: 4px; color: var(--blanco); }
.g2-nube::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 18px; background: var(--linea); transform: translateX(-50%); }

.g2-ramas { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; padding-top: 18px; }
.g2-ramas::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--linea); }
.g2-sede { position: relative; min-width: 0; }
.g2-sede::before { content: ""; position: absolute; left: 50%; top: -18px; width: 2px; height: 18px; background: var(--linea); transform: translateX(-50%); }
.g2-sede-n { padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--linea); background: var(--gris-claro); text-align: center; }
.g2-sede-n small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.g2-sede-n b { display: block; font-size: 15px; font-weight: 700; margin-top: 4px; }
.g2-nodos { display: grid; gap: 6px; margin: 10px 0 0 14px; padding-left: 14px; border-left: 2px solid var(--linea); }
.g2-nodos > li { position: relative; }
.g2-nodos > li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 12px; height: 2px; background: var(--linea); }
.g2-nodo { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--linea); font-size: 13px; color: var(--texto-suave); }
.g2-nodo .g2-n { min-width: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.g2-nodo .g2-e { font: 500 12px/1.2 var(--fuente); color: var(--texto-suave); white-space: nowrap; }
.g2-nodo--maq { text-decoration: none; color: var(--texto); font-size: 14px; font-weight: 700; border-color: var(--carbon-13); background: var(--superficie); box-shadow: 0 1px 2px var(--carbon-08); transition: border-color 160ms ease; }
.g2-nodo--maq.sim-n { border-style: dashed; }
.g2-nodo--maq:hover, .g2-nodo--maq:focus-visible { border-color: var(--acento); }
.g2-nodo--maq .estado { font-size: 11px; padding: 5px 7px; }

@media (max-width: 1280px) {
  .g2-topos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .g2-demos-rej { grid-template-columns: minmax(0, 1fr); }
  .g2-topo-cab { flex-direction: column; align-items: flex-start; }

}
@media (max-width: 720px) {
  .g2-demo { padding: 18px 16px 20px; }
  .g2-demo h3 { font-size: 18px; padding-right: 0; }
  .g2-ultima { position: static; align-self: flex-start; order: -1; }
  .g2-demo .btn { align-self: stretch; white-space: normal; text-align: center; }
  .g2-demo-maq li { grid-template-columns: 12px minmax(0, 1fr); }
  .g2-demo-maq em { grid-column: 2; text-align: left; }
  .g2-topo { padding: 16px 14px 18px; }
  .g2-ramas { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .g2-ramas::before { display: none; }
  .g2-sede + .g2-sede::before { top: -18px; }
  .g2-atajos { display: none; }
}

/* =====================================================================
   Procedente de extra-g4.css (fusionado en la ronda 4)
   ===================================================================== */
/* Panel ATPI · prototipo combinado · grupo 4 (histórico de cabinas y reporte PDF).
   Solo lo que estilos.css no trae. Candidato a subir al sistema: todo este archivo, en la sección «Reporte». */

/* Logo de la barra del reporte: el mismo trazo morado del encabezado (el verde pide 160 px sobre claro) */

/* Mesa del reporte: panel para armar el PDF a la izquierda, páginas a la derecha */
.rep-mesa { display: grid; grid-template-columns: 300px minmax(0, 816px); gap: 32px; justify-content: center; align-items: start; padding: 28px var(--gutter) 0; }
.rep-mesa .paginas { padding: 0 0 48px; grid-template-columns: minmax(0, 816px); }
.rep-arma { position: sticky; top: 84px; background: var(--superficie); border-radius: var(--r-md); box-shadow: var(--sombra); padding: 22px 22px 18px; display: grid; gap: 12px; }
.rep-arma h2 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.rep-arma .sub { font-size: 14px; color: var(--texto-suave); line-height: 1.45; }
.rep-secciones { border: 0; border-top: 1px solid var(--linea); padding-top: 6px; }
.rep-secciones [data-secciones] { display: grid; }
.rep-secciones label { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; font-size: 14px; line-height: 1.35; border-bottom: 1px solid var(--linea); cursor: pointer; }
.rep-secciones input { width: 16px; height: 16px; margin-top: 1px; flex: none; accent-color: var(--verde); }
.rep-arma .btn { margin-top: 4px; }
.rep-arma .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.rep-nota { font-size: 13px; color: var(--texto-suave); line-height: 1.45; }

/* Una sección que se quita no ocupa lugar (.seccion es grid y anularía [hidden]) */

@media (max-width: 1100px) {
  .rep-mesa { grid-template-columns: minmax(0, 816px); gap: 20px; padding: 20px 16px 0; }
  .rep-arma { position: static; }
  .rep-secciones [data-secciones] { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 20px; }
}
@media print {
  .rep-arma { display: none !important; }
  .rep-mesa { display: block; padding: 0; }
}
@media (max-width: 720px) {
  .pag-reporte .rep-barra .que { display: none; }
  .pag-reporte .rep-barra .der { min-width: 0; }
  .pag-reporte .rep-barra .der .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 4px 14px; }
  .rep-mesa { padding: 16px 16px 0; }
  .rep-mesa .paginas { padding-bottom: 32px; }
}

/* =====================================================================
   Procedente de extra-g5.css (fusionado en la ronda 4)
   ===================================================================== */
/* Panel ATPI · prototipo combinado · grupo 5 (Usuarios y Bitácora de eventos).
   Solo lo que estilos.css no trae. Candidatos a subir al sistema: «Diálogos con popover», «Vista por rol»,
   «Ejemplos de estados» y «Tablas de administración». Los filtros con :has() del final los genera el script
   del grupo 5 a partir de los datos de la tabla y solo valen para el prototipo. */

/* ----- Vista por rol: lo que cambia según quién mira (html[data-rol] lo pone app.js) ----- */
html:not([data-rol="superadmin"]) .ver-super { display: none !important; }
html:not([data-rol="admin"]) .ver-admin { display: none !important; }

/* ----- Diálogos con popover: se abren con popovertarget, sin script (CSP) ----- */
.dialogo-pop { inset: 0; max-height: calc(100dvh - 48px); overflow-y: auto; }
.dialogo-pop:popover-open { display: block; }
.dialogo-pop::backdrop { background: var(--carbon-profundo-45); }
.dialogo-ancho { width: min(720px, calc(100% - 32px)); }
.dialogo .campo select { width: 100%; min-width: 0; }
.dialogo .campo input { width: 100%; min-width: 0; }
.dialogo h2 .m { font: 500 16px/1 var(--mono); color: var(--texto-suave); }
.ayuda-rol { font-size: 13px !important; margin-top: 8px; }

/* Modelos del asistente: al menos uno */
.modelos-u { border: 0; margin-top: 14px; display: grid; gap: 4px; }
.modelos-u label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-md); font-size: 15px; font-weight: 600; cursor: pointer; }
.modelos-u label .medida { margin-left: auto; font-weight: 400; }
.modelos-u input, .aviso-u input { width: 16px; height: 16px; accent-color: var(--verde); flex: none; }
.err-modelos { display: none; margin-top: 10px; }
.form-modelos:not(:has(.modelos-u input:checked)) .err-modelos { display: block; }
.form-modelos:not(:has(.modelos-u input:checked)) .guardar-modelos { background: var(--relleno); color: var(--texto-suave); box-shadow: none; pointer-events: none; }

/* Detalle de un evento */
.det-campos { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 16px; margin-top: 14px; border-top: 1px solid var(--linea); }

.det-campos dt { padding: 8px 0; border-bottom: 1px solid var(--linea-suave); line-height: 1.4; color: var(--texto-suave); font-weight: 600; font-size: 13px; }
.det-campos dd { padding: 8px 0; border-bottom: 1px solid var(--linea-suave); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.det-campos dd.m { font: 400 13px/1.45 var(--mono); }
.det-t { font-size: 13px !important; font-weight: 600; margin-top: 16px; }
.det-t + .det-campos { margin-top: 6px; }
.det-nota { font-size: 13px !important; margin-top: 12px; }

/* Conversación guardada */
.conv-meta { font-size: 14px !important; }
.conv-b { display: grid; gap: 10px; margin-top: 16px; }
.burbuja { max-width: 88%; padding: 10px 14px; border-radius: var(--r-md); font-size: 15px; line-height: 1.5; }
.burbuja .meta { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 4px; }
.burbuja.usuario { justify-self: end; background: var(--gris-claro); }
.burbuja.asistente { justify-self: start; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--acento); }
.burbuja .herr { display: block; margin-top: 8px; font: 400 12px/1.4 var(--mono); color: var(--texto-suave); }

/* ----- Ejemplos de estados (como «Cómo se ve cuando está activo» del freno) ----- */
.estados-ej { margin-top: 16px; font-size: 14px; }
.estados-ej summary { cursor: pointer; font-weight: 600; color: var(--acento); width: max-content; max-width: 100%; }
.estados-ej-caja { margin-top: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--gris-claro); display: grid; gap: 10px; }
.estados-ej-l { font-size: 14px; color: var(--texto); display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.franja-cred { padding: 10px 14px; border-radius: var(--r-md); background: var(--superficie); border-left: 4px solid var(--acento); font-size: 14px; line-height: 1.45; color: var(--texto) !important; }
.franja-cred b { color: var(--acento); }
.franja-err { border-left-color: var(--error); }
.franja-err b { color: var(--error); }
.dialogo .franja-cred { margin-top: 16px; background: var(--gris-claro); }

/* ----- Tablas de administración ----- */
.adm-t .panel + .panel { margin-top: 20px; }
.credito-u-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; }
.credito-u-acc { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.credito-u .credito { margin-bottom: 4px; }
.credito-avisos { min-height: calc(14px * 1.45 + 20px); } /* el alto de un renglón de .franja-cred: su llegada no empuja la lista (MOD-CODIGO-02) */
.credito .barra i.u-42 { width: 4.2%; }
.credito .barra .m-90 { left: 90%; }
.credito .barra .m-95 { left: 95%; }
.campo-ancho { flex: 1 1 240px; }
.campo-ancho input { width: 100%; }
.tabla-e td { vertical-align: middle; }
.tabla-u td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.tabla-u th .medida { font-weight: 400; }
.tabla-u .pol { line-height: 1.35; }
.tabla-u .acc-celda { min-width: 260px; }
.acc-u { flex-wrap: wrap; justify-content: flex-start; gap: 2px 14px; }
.motivo { display: block; font-size: 13px; color: var(--texto-suave); line-height: 1.4; max-width: 300px; }
.exc { display: inline-block; font: 500 12px/1 var(--mono); color: var(--acento); background: color-mix(in srgb, var(--morado) 8%, var(--superficie)); padding: 5px 8px; border-radius: var(--r-sm); margin-bottom: 6px; }
.aviso-u { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); margin-top: 6px; cursor: pointer; }
.yo { display: inline-block; margin-left: 8px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--acento); background: color-mix(in srgb, var(--morado) 8%, var(--superficie)); padding: 4px 6px; border-radius: var(--r-sm); vertical-align: 2px; }
.rol-super { font-weight: 700; color: var(--acento); }
.vacio-f { display: none; }
.vacio-f td { padding: 22px 0; text-align: center; color: var(--texto-suave); }
.cuenta-u { font-size: 13px; color: var(--texto-suave); margin-top: 12px; }
.tabla-e .nota-c { max-width: 280px; }
.tabla-e .acc { justify-content: flex-end; }
.pie-tabla { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; }
.integridad-l { line-height: 1.7 !important; }
.integridad-l .estado { margin-bottom: 2px; }
.adm-t main.contenedor { padding-bottom: 32px; }
/* El navegable cierra estas páginas con su pie de ayuda; sin él, el aire de abajo va en el main. */
[data-nav="inicio"] main.contenedor, [data-nav="maquinas"] main.contenedor { padding-bottom: 32px; }

@media (max-width: 720px) {
  .tabla-u .acc-celda { min-width: 0; }
  .tabla.apila tr.vacio-f { display: none; }
  .tabla.apila tr.vacio-f td { grid-column: 1 / -1; }
  .tabla.apila td.acc-celda { grid-column: 1 / -1; }
  .tabla.apila td[data-l="Usuario"], .tabla.apila td[data-l="Objetivo"] { grid-column: 1 / -1; }
  .tabla-e .acc { justify-content: flex-start; }
  .tabla-e .nota-c { max-width: none; }
  .det-campos { grid-template-columns: minmax(0, 1fr); }
  .det-campos dt { border-bottom: 0; padding-bottom: 0; }
  .burbuja { max-width: 100%; }
  .credito-u-acc { gap: 14px; }
  .filtros .der { margin-left: 0; width: 100%; }
}
.dialogo .botones .usar-rol { margin-right: auto; align-self: center; }

/* Filtros de usuarios: Rol y Estado con :has(), sin script */
.f-usuarios:has(select[name="estado"] option[value="vigentes"]:checked) tr[data-estado="baja"] { display: none; }
.f-usuarios:has(select[name="estado"] option[value="activo"]:checked) tr[data-estado="deshabilitado"],
.f-usuarios:has(select[name="estado"] option[value="activo"]:checked) tr[data-estado="baja"] { display: none; }
.f-usuarios:has(select[name="estado"] option[value="deshabilitado"]:checked) tr[data-estado="activo"],
.f-usuarios:has(select[name="estado"] option[value="deshabilitado"]:checked) tr[data-estado="baja"] { display: none; }
.f-usuarios:has(select[name="estado"] option[value="baja"]:checked) tr[data-estado="activo"],
.f-usuarios:has(select[name="estado"] option[value="baja"]:checked) tr[data-estado="deshabilitado"] { display: none; }
.f-usuarios:has(select[name="rol"] option[value="superadmin"]:checked) tbody tr:not([data-rol="superadmin"]):not(.vacio-f) { display: none; }
.f-usuarios:has(select[name="rol"] option[value="admin"]:checked) tbody tr:not([data-rol="admin"]):not(.vacio-f) { display: none; }
.f-usuarios:has(select[name="rol"] option[value="supervisor"]:checked) tbody tr:not([data-rol="supervisor"]):not(.vacio-f) { display: none; }
.f-usuarios:has(select[name="rol"] option[value="operador"]:checked) tbody tr:not([data-rol="operador"]):not(.vacio-f) { display: none; }
.f-usuarios:has(select[name="rol"] option[value="auditor"]:checked) tbody tr:not([data-rol="auditor"]):not(.vacio-f) { display: none; }
.f-usuarios:has(select[name="rol"] option[value="ninguno"]:checked) tbody tr:not([data-rol="ninguno"]):not(.vacio-f) { display: none; }
.f-usuarios:has(select[name="rol"] option[value="superadmin"]:checked):has(select[name="estado"] option[value="deshabilitado"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="superadmin"]:checked):has(select[name="estado"] option[value="baja"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="admin"]:checked):has(select[name="estado"] option[value="deshabilitado"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="admin"]:checked):has(select[name="estado"] option[value="baja"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="supervisor"]:checked):has(select[name="estado"] option[value="deshabilitado"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="supervisor"]:checked):has(select[name="estado"] option[value="baja"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="operador"]:checked):has(select[name="estado"] option[value="deshabilitado"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="operador"]:checked):has(select[name="estado"] option[value="baja"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="auditor"]:checked):has(select[name="estado"] option[value="deshabilitado"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="auditor"]:checked):has(select[name="estado"] option[value="baja"]:checked) .vacio-f,
.f-usuarios:has(select[name="rol"] option[value="ninguno"]:checked):has(select[name="estado"] option[value="activo"]:checked) .vacio-f { display: table-row; }
.f-usuarios [class^="conteo-"] { display: none; }
.f-usuarios:has(select[name="estado"] option[value="vigentes"]:checked) .conteo-vigentes { display: inline; }
.f-usuarios:has(select[name="estado"] option[value="activo"]:checked) .conteo-activo { display: inline; }
.f-usuarios:has(select[name="estado"] option[value="deshabilitado"]:checked) .conteo-deshabilitado { display: inline; }
.f-usuarios:has(select[name="estado"] option[value="baja"]:checked) .conteo-baja { display: inline; }
.f-usuarios:has(select[name="estado"] option[value="todos"]:checked) .conteo-todos { display: inline; }

/* Filtros de la bitácora: Categoría y Resultado con :has(), sin script */
.f-eventos:has(select[name="cat"] option[value="sesion"]:checked) tbody tr:not([data-cat="sesion"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="cat"] option[value="seguridad"]:checked) tbody tr:not([data-cat="seguridad"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="cat"] option[value="datos"]:checked) tbody tr:not([data-cat="datos"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="cat"] option[value="usuarios"]:checked) tbody tr:not([data-cat="usuarios"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="cat"] option[value="chat"]:checked) tbody tr:not([data-cat="chat"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="res"] option[value="ok"]:checked) tbody tr:not([data-res="ok"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="res"] option[value="denegado"]:checked) tbody tr:not([data-res="denegado"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="res"] option[value="error"]:checked) tbody tr:not([data-res="error"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="cat"] option[value="sesion"]:checked):has(select[name="res"] option[value="denegado"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="seguridad"]:checked):has(select[name="res"] option[value="error"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="datos"]:checked):has(select[name="res"] option[value="denegado"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="datos"]:checked):has(select[name="res"] option[value="error"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="usuarios"]:checked):has(select[name="res"] option[value=""]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="usuarios"]:checked):has(select[name="res"] option[value="ok"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="usuarios"]:checked):has(select[name="res"] option[value="denegado"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="usuarios"]:checked):has(select[name="res"] option[value="error"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="chat"]:checked):has(select[name="res"] option[value="denegado"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="chat"]:checked):has(select[name="res"] option[value="error"]:checked) .vacio-f { display: table-row; }
.f-eventos:has(select[name="cat"] option:checked:not([value=""])) .mas-ev, .f-eventos:has(select[name="res"] option:checked:not([value=""])) .mas-ev { display: none; }

/* Buscar (app.js): oculta lo que no coincide y muestra el vacío cuando no queda ninguna fila */
.f-usuarios tbody tr.no-busca { display: none !important; }
.f-usuarios tbody tr.vacio-f.ve { display: table-row !important; }
.f-usuarios .conteo-busca { display: none; }
.f-usuarios.buscando .cuenta-u > span { display: none !important; }
.f-usuarios.buscando .cuenta-u > .conteo-busca { display: inline !important; }

/* =====================================================================
   Procedente de extra-g6.css (fusionado en la ronda 4)
   ===================================================================== */
/* Grupo 6 · estados.html (galería de estados)
   Solo lo enlaza estados.html. Lo marcado «SUBIR» conviene pasarlo a estilos.css:
   lo usarían también el login, el en vivo, el histórico, el asistente y la bitácora. */

/* ----- Índice de grupos ----- */
.est-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.est-indice .chip b { font: 500 12px/1 var(--mono); color: var(--texto-suave); }

/* ----- Grupos y tarjetas ----- */
.est-grupo { padding-top: 28px; scroll-margin-top: 16px; }
.est-grupo > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.est-grupo > header h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-top: 8px; }
.est-grupo > header p { font-size: 14px; color: var(--texto-suave); max-width: 640px; line-height: 1.5; }
.est-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; align-items: start; }
.est-rejilla > .est { background: var(--superficie); border-radius: var(--r-md); box-shadow: var(--sombra); padding: 16px 18px 14px; display: grid; gap: 10px; min-width: 0; scroll-margin-top: 16px; }
.est.ancha { grid-column: 1 / -1; }
.est-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.est-cab h3 { font-size: 16px; font-weight: 700; }
.est-id { font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--texto-suave); }
.est-cuando { font-size: 14px; color: var(--texto-suave); line-height: 1.45; }
.est-donde { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--texto-suave); padding-top: 8px; border-top: 1px solid var(--linea-suave); }
.est-donde .enlace { font-size: 13px; }

/* ----- Marco de la muestra ----- */
.est-muestra { border-radius: var(--r-md); background: var(--gris-claro); border: 1px solid var(--linea-suave); padding: 14px; display: grid; gap: 10px; min-width: 0; font-size: 14px; }
.est-muestra.osc { background: var(--carbon-profundo); border-color: var(--carbon-profundo); color: var(--perla); }
.est-muestra .modulo-barra { margin: -14px -14px 0; border-radius: var(--r-md) var(--r-md) 0 0; height: 36px; padding: 0 14px; }
.est-muestra .menu-cuenta { position: static; width: 100%; max-width: 280px; box-shadow: none; justify-self: end; }
.est-muestra .elegir-caja { position: static; width: 100%; box-shadow: none; border: 1px solid var(--linea); }
.est-muestra .campo input:disabled { background: var(--gris-claro); color: var(--texto-suave); cursor: not-allowed; }
.est-muestra .entrada { background: var(--superficie); }
.est-muestra .entrada button:disabled { color: var(--acero); cursor: not-allowed; }
.est-muestra .btn { justify-self: start; }
.est-muestra .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.est-muestra .kpi b { font-size: 24px; }
.est-mini-login { display: grid; gap: 12px; }
.est-mini-login img { height: 24px; width: auto; } /* 121 px: mínimo del manual */
.est-mini-login h4 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--blanco); }
.est-pagina { background: var(--superficie); border-radius: var(--r-sm); border: 1px solid var(--linea); padding: 12px 14px; display: grid; gap: 10px; }
.est-pagina .est-enc-mini { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-suave); padding-bottom: 8px; border-bottom: 1px solid var(--linea-suave); }
.est-pagina .est-enc-mini .avatar { width: 26px; height: 26px; font-size: 11px; }
.est-asis { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 10px; }
.est-asis .pregunta { font-size: 14px; }
.est-asis .asis-meta { flex-basis: auto; }
.est-asis .chip { font-size: 13px; padding: 6px 10px; }
.est-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.est-chips .chip:disabled { opacity: .5; cursor: progress; }

/* ----- SUBIR: mensaje de sistema (error, aviso, listo) ----- */
.msj { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); border-left: 3px solid var(--acero); background: var(--superficie); font-size: 14px; line-height: 1.45; color: var(--texto); }
.msj > div { display: grid; gap: 4px; min-width: 0; }
.msj b { font-weight: 700; }
.msj small { font-size: 13px; color: var(--texto-suave); }
.msj .ref { font: 500 12px/1.4 var(--mono); color: var(--texto-suave); }
.msj--err { border-left-color: var(--error); background: color-mix(in srgb, var(--error) 6%, var(--superficie)); }
.msj--err > div > b:first-child { color: var(--error); }
.msj--info { border-left-color: var(--acento); background: color-mix(in srgb, var(--morado) 5%, var(--superficie)); }
.msj--ok { border-left-color: var(--verde); }
.msj .hecho { margin: 1px 0 0; }
.osc .msj { background: var(--carbon-tabla); color: var(--perla); border-left-color: var(--acero); }
.osc .msj small, .osc .msj .ref { color: var(--texto-suave-oscuro); }
.osc .msj--err { border-left-color: color-mix(in srgb, var(--error) 55%, white); background: color-mix(in srgb, var(--error) 16%, var(--carbon-profundo)); }
.osc .msj--err > div > b:first-child { color: var(--blanco); }
.osc .msj--info { border-left-color: var(--verde-luz); }

/* ----- SUBIR: escribiendo y esqueleto de carga ----- */
.escribiendo { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1.3 var(--mono); color: var(--texto-suave); }
.escribiendo i { display: inline-flex; gap: 4px; }
.escribiendo i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); animation: punto-esc 1.2s ease-in-out infinite; }
.escribiendo i span { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); animation: punto-esc 1.2s ease-in-out infinite; animation-delay: .15s; }
.escribiendo i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); animation: punto-esc 1.2s ease-in-out infinite; animation-delay: .3s; }
@keyframes punto-esc { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.esqueleto { display: grid; gap: 8px; }
.esqueleto i { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--relleno) 0 40%, var(--gris-claro) 50%, var(--relleno) 60% 100%); background-size: 300% 100%; animation: brillo 1.4s linear infinite; }
.esqueleto i.alto { height: 64px; }
.esqueleto i.medio { width: 62%; }
.esqueleto i.corto { width: 38%; }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
.est-muestra .paso { font-size: 12px; }

/* ----- Cinta corta del en vivo de ejemplo (sin estilos en línea) ----- */
.est-cinta { display: flex; height: 12px; border-radius: var(--r-sm); overflow: hidden; }
.est-cinta i { display: block; height: 100%; }
.est-cinta .op { background: var(--estado-produccion); flex: 8; }
.est-cinta .sin { flex: 1; background: repeating-linear-gradient(135deg, var(--perla-35) 0 3px, transparent 3px 6px); }
.est-cinta .sin-todo { flex: 1; background: repeating-linear-gradient(135deg, var(--perla-25) 0 3px, transparent 3px 6px); }
.est-horas { display: flex; justify-content: space-between; font: 400 11px/1 var(--mono); color: var(--texto-suave-oscuro); margin-top: -4px; }
.est-vacio-osc { font: 500 13px/1.4 var(--mono); color: var(--texto-suave-oscuro); text-align: center; padding: 10px 0; border-top: 1px solid var(--linea-oscura); border-bottom: 1px solid var(--linea-oscura); }
.est-vacio { text-align: center; padding: 18px 10px; display: grid; gap: 6px; justify-items: center; }
.est-vacio b { font-size: 16px; }
.est-vacio p { font-size: 14px; color: var(--texto-suave); max-width: 320px; line-height: 1.45; }

/* ----- Orden de comprobación de acceso ----- */
.est-tubo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: paso; }
.est-tubo li { position: relative; padding: 12px 14px 12px 0; display: grid; gap: 6px; align-content: start; counter-increment: paso; }
.est-tubo li + li { padding-left: 14px; border-left: 1px solid var(--linea); }
.est-tubo li::before { content: counter(paso, decimal-leading-zero); font: 500 12px/1 var(--mono); color: var(--acento); }
.est-tubo b { font-size: 15px; }
.est-tubo span { font-size: 13px; color: var(--texto-suave); line-height: 1.45; }
.est-tubo .enlace { font-size: 13px; justify-self: start; width: max-content; max-width: 100%; }
.est-tubo li.fin::before { color: var(--texto); font-weight: 700; }

/* ----- Exportación de ejemplo ----- */
.est-export { display: grid; gap: 10px; }
.est-export .segmentos label { padding: 7px 10px; font-size: 13px; }
.est-export .estado-exp { font-size: 14px; }
.est-export .progreso { max-width: none; }
.est-export .progreso i.p40 { width: 42%; }
.est-export .progreso i.p100 { width: 100%; }
.est-export .conteo { font: 400 12px/1.4 var(--mono); color: var(--texto-suave); }
.est-export .conteo b { color: var(--error); font-weight: 500; }

/* ----- Bitácora ----- */
.est-integ { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }

@media (max-width: 1100px) {
  .est-tubo { grid-template-columns: minmax(0, 1fr); }
  .est-tubo li, .est-tubo li + li { padding: 10px 0 10px 0; border-left: 0; border-top: 1px solid var(--linea); }
  .est-tubo li:first-child { border-top: 0; }
}
@media (max-width: 720px) {
  .est-rejilla > .est { padding: 14px 14px 12px; }
  .est-muestra { padding: 12px; }
  .est-muestra .modulo-barra { margin: -12px -12px 0; }
  .est-grupo > header h2 { font-size: 20px; }
  .est-muestra .menu-cuenta { justify-self: stretch; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .escribiendo i::before, .escribiendo i::after, .escribiendo i span, .esqueleto i, .paso::before, .vivo.reconecta::before { animation: none; }
}

/* SUBIR: pastilla «sin datos / sin señal» sobre fondo oscuro (estilos.css solo la define sobre claro) */
.oscuro .estado--sin { background: transparent; box-shadow: inset 0 0 0 1px var(--perla-30); color: var(--texto-suave-oscuro); }
.est-estado { margin: 10px 0 8px; }
/* Enlaces dentro de rejillas: que no se estiren a todo el ancho */
.est-pagina > .enlace, .est-pagina .btn { justify-self: start; width: max-content; max-width: 100%; }
.est-vacio .enlace { width: max-content; max-width: 100%; justify-self: center; }
.est-muestra .entrada input:disabled { color: var(--texto-suave); cursor: not-allowed; background: none; }
.oscuro .escribiendo { color: var(--texto-suave-oscuro); }
.oscuro .escribiendo i::before, .oscuro .escribiendo i::after, .oscuro .escribiendo i span { background: var(--verde-luz); }

/* =====================================================================
   Ronda 4 · construcción y accesibilidad
   ===================================================================== */
/* Colores que app.js pintaba con style="" (la CSP del panel los bloquea): ahora por clase */
.leyenda i.bg-verde-50 { background: var(--verde-50); } .leyenda i.bg-verde-75 { background: var(--verde-75); }
.leyenda i.bg-acero-40 { background: var(--acero-40); } .leyenda i.bg-acero { background: var(--acero); }
.leyenda i.bg-carbon { background: var(--carbon); }
.cinta i.en, .cinta-ley i.en { background: var(--verde-luz); }
.cinta i.fuera, .cinta-ley i.fuera { background: var(--estado-paro); box-shadow: inset 0 0 0 1px var(--estado-paro-borde); } /* fuera de especificación = fuera de rango del invernadero */
.cinta.claro i.en, .cinta-ley.claro i.en { background: var(--verde); }
.cinta.claro i.fuera, .cinta-ley.claro i.fuera { background: var(--estado-paro); }
.lead.lead-lista { padding-left: 20px; display: grid; gap: 6px; }
.lead.lead-chica { font-size: 14px; }
.tabla.tabla-gasto { margin-top: 6px; }

/* Foco sobre fondos oscuros: verde luz (9:1 sobre carbón profundo) */
:is(.oscuro, .banda, .modulo, .login-pag, .pag-aviso, .legal-cab, .osc, .aviso-flot, .g2-nube) :focus-visible { outline-color: var(--verde-luz); }
/* El campo del asistente quita su contorno: el foco se ve en la caja completa */
.entrada:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }


/* ----- Ronda 6: áreas táctiles de 44 px en el celular (WCAG 2.5.8 pide 24; el manual y el sitio, 44) ----- */
@media (max-width: 720px) {
  .periodo .elegir summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--perla-40); text-underline-offset: 4px; }
  .periodo .elegir[open] summary { text-decoration-color: currentColor; }
  .mapa-mas summary { display: flex; align-items: center; min-height: 44px; }
  .mapa-rot a { display: inline-flex; align-items: center; min-height: 44px; }
  .mapa-cab .btn-texto, .tabla-pie .btn-texto { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
  .tabla.ordenable th button { min-height: 44px; }
  .variables label { min-height: 44px; padding-right: 4px; }
  .segmentos label { min-height: 44px; }
}

/* Bitácora: categoría «Captura de hojas» (filas que agrega app.js desde «hojas-bitacora») */
.f-eventos:has(select[name="cat"] option[value="hojas"]:checked) tbody tr:not([data-cat="hojas"]):not(.vacio-f) { display: none; }
.f-eventos:has(select[name="cat"] option[value="hojas"]:checked):not(:has(tbody tr[data-cat="hojas"])) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="hojas"]:checked):has(select[name="res"] option[value="denegado"]:checked) .vacio-f,
.f-eventos:has(select[name="cat"] option[value="hojas"]:checked):has(select[name="res"] option[value="error"]:checked) .vacio-f { display: table-row; }

/* Inicio: tercera demo. Las columnas salen de las tarjetas visibles (sin hojas:usar quedan dos) */
.g2-demos-rej { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.g2-demo[data-demo-tarjeta="hojas"], .g2-demo[data-demo-tarjeta="hojas"].ultima { border-top-color: var(--morado-noche); }
@media (max-width: 1100px) {
  .g2-demos-rej { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}
/* Cuarta demo (invernadero): con cuatro tarjetas van dos por fila */
@media (min-width: 1101px) { .g2-demos-rej:has(> .g2-demo:nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* «Última usada» va arriba a la derecha: la ceja larga de la demo 03 no debe pasar por debajo */
.g2-demo.ultima .ceja { padding-right: 112px; }
@media (max-width: 720px) { .g2-demo.ultima .ceja { padding-right: 0; } }

/* Demo 03: de la foto a la tabla (inicio y banda de hojas.html). Recorte fijo de hojas-muestras/hoja-ejemplo.jpg: x 15–80 %, y 62–76 %.
   Amarillo = corregida y rojo = revisar: decisión de Pablo para este producto, por confirmar (usa ámbar y coral). */
.hj-ad { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 6px; padding: 10px; border-radius: var(--r-md); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.hj-ad-foto { position: relative; aspect-ratio: 781 / 224; border-radius: 3px; background: var(--relleno) url("/v2/img/hoja-ejemplo.jpg") no-repeat 42.86% 72.09% / 153.85% auto; }
.hj-ad-m { position: absolute; border-radius: 2px; }
.hj-ad-m.corr { outline: 2px solid var(--ambar); background: color-mix(in srgb, var(--ambar) 22%, transparent); }
.hj-ad-m.rev { outline: 2px solid var(--coral); background: color-mix(in srgb, var(--coral) 22%, transparent); }
.hj-ad-m.m1 { left: 23%; top: 24%; width: 14%; height: 27%; }
.hj-ad-m.m2 { left: 66.6%; top: 24%; width: 10%; height: 27%; }
.hj-ad-m.m3 { left: 56.6%; top: 79%; width: 30.3%; height: 11%; }
.hj-ad-flecha { justify-self: center; width: 12px; height: 12px; margin: -2px 0 4px; border-top: 2px solid var(--acento); border-right: 2px solid var(--acento); transform: rotate(135deg); } /* apunta hacia abajo: de la foto a la tabla */
.hj-ad-tabla { width: 100%; table-layout: fixed; border-collapse: collapse; font: 500 10.5px/1.25 var(--mono); color: var(--texto); }
.hj-ad-tabla th, .hj-ad-tabla td { padding: 3px 4px; border-bottom: 1px solid var(--linea-suave); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hj-ad-tabla th:first-child { width: 50%; }
.hj-ad-tabla th { font-weight: 600; color: var(--texto-suave); }
.hj-ad-tabla .n { text-align: right; }
.hj-ad-tabla tfoot td { border-top: 1.5px solid var(--texto); border-bottom: 0; font-weight: 700; }
.hj-ad-tabla .corr { background: color-mix(in srgb, var(--ambar) 22%, transparent); box-shadow: inset 2px 0 0 var(--ambar); }
.hj-ad-tabla .rev { background: color-mix(in srgb, var(--coral) 22%, transparent); box-shadow: inset 2px 0 0 var(--coral); }
.hj-ad figcaption { grid-column: 1 / -1; font-size: 12px; line-height: 1.4; color: var(--texto-suave); }
.hj-ad figcaption i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 4px 0 0; vertical-align: -1px; }
.hj-ad figcaption i.corr { background: var(--ambar); }
.hj-ad figcaption i.rev { background: var(--coral); }

/* Asistente (03.6): un paso que falló deja de girar */
.paso.error::before { animation: none; border-color: var(--error); }
.pasos { display: grid; gap: 4px; }

/* =====================================================================
   Estados de máquina (decisión de Pablo, 2026-10). Producción verde; paro de producción amarillo (con causa sólido,
   sin causa rayado sobre blanco; el amarillo siempre con contorno oscuro); mantenimiento rojo (programado sólido,
   arreglo rayado); make ready azul; sin datos, caja vacía con contorno oscuro. Colores vivos: sin tintes ni opacidad.
   Clases de la cinta: op, paro, cc (con causa), sc (sin causa), mant, arr, make-ready, sin.
   ===================================================================== */
.patron-sin-causa { background: repeating-linear-gradient(135deg, var(--estado-paro) 0 3px, var(--blanco) 3px 6px); box-shadow: inset 0 0 0 1px var(--estado-paro-borde); }
.patron-arreglo { background: repeating-linear-gradient(135deg, var(--estado-mantenimiento) 0 3px, var(--blanco) 3px 6px); box-shadow: inset 0 0 0 1px var(--estado-mantenimiento); }
.estado-make-ready { background: var(--estado-make-ready); }
:is(.cinta, .cinta-ley, .leyenda) i:is(.op, .bg-op) { background: var(--estado-produccion); }
:is(.cinta, .cinta-ley, .leyenda, .ley) i:is(.paro, .cc, .bg-paro, .ley-paro) { background: var(--estado-paro); box-shadow: inset 0 0 0 1px var(--estado-paro-borde); }
:is(.cinta, .cinta-ley, .leyenda) i:is(.sc, .bg-sc) { background: repeating-linear-gradient(135deg, var(--estado-paro) 0 3px, var(--blanco) 3px 6px); box-shadow: inset 0 0 0 1px var(--estado-paro-borde); }
:is(.cinta, .cinta-ley, .leyenda, .ley) i:is(.mant, .bg-mant, .ley-mant) { background: var(--estado-mantenimiento); }
:is(.cinta, .cinta-ley, .leyenda) i:is(.arr, .bg-arr) { background: repeating-linear-gradient(135deg, var(--estado-mantenimiento) 0 3px, var(--blanco) 3px 6px); box-shadow: inset 0 0 0 1px var(--estado-mantenimiento); }
:is(.cinta, .cinta-ley, .leyenda) i:is(.make-ready, .bg-make-ready) { background: var(--estado-make-ready); }
:is(.cinta, .cinta-ley, .leyenda) i:is(.sin, .bg-sin) { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--estado-sin-datos-borde); }
/* Sobre los módulos oscuros la caja de «sin datos» queda vacía (fondo del módulo) y el contorno, claro */
.oscuro :is(.cinta, .cinta-ley) i.sin, .oscuro .est-cinta :is(.sin, .sin-todo) { background: transparent; box-shadow: inset 0 0 0 1px var(--perla); }
/* Gráficas de disponibilidad: verde en meta, acero debajo, carbón destacados, morado el peor día */
.leyenda i.bg-acero { background: var(--acero); } .leyenda i.bg-morado { background: var(--acento); } .leyenda i.bg-verde { background: var(--verde); }
/* Pastillas: sólidas con texto AA (verde y amarillo con texto casi negro, rojo y azul con blanco); el punto toma el color del texto */
.estado:is(.estado--paro, .estado--mant, .estado--make-ready)::before { background: currentColor; }
/* Producción es lo normal: punto verde con texto, sin relleno (ISA-101: el color pleno queda para lo anormal) */
.estado--op { background: transparent; color: inherit; padding-left: 0; padding-right: 0; }
.estado--op::before { background: var(--estado-produccion); width: 9px; height: 9px; }
.estado--paro { background: var(--estado-paro); color: var(--carbon-profundo); box-shadow: inset 0 0 0 1px var(--estado-paro-borde); }
.estado--mant { background: var(--estado-mantenimiento); color: var(--blanco); }
.estado--make-ready { background: var(--estado-make-ready); color: var(--blanco); }
.estado--arr { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 2px var(--estado-mantenimiento); }
.estado--arr::before { background: repeating-linear-gradient(135deg, var(--estado-mantenimiento) 0 2px, var(--blanco) 2px 4px); box-shadow: 0 0 0 1px var(--estado-mantenimiento); }
.oscuro .estado:is(.estado--paro, .estado--arr) { color: var(--carbon-profundo); }
.oscuro .estado:is(.estado--mant, .estado--make-ready) { color: var(--blanco); }
/* Puntos */
.punto--op { background: var(--estado-produccion); }
.punto--paro { background: var(--estado-paro); box-shadow: 0 0 0 1px var(--estado-paro-borde); }
.punto--sc { width: 13px; height: 13px; background: repeating-linear-gradient(135deg, var(--estado-paro) 0 2px, var(--blanco) 2px 4px); box-shadow: 0 0 0 1px var(--estado-paro-borde); }
.punto--mant { background: var(--estado-mantenimiento); }
.punto--arr { background: repeating-linear-gradient(135deg, var(--estado-mantenimiento) 0 2px, var(--blanco) 2px 4px); box-shadow: 0 0 0 1px var(--estado-mantenimiento); }
.punto--make-ready { background: var(--estado-make-ready); }
.oscuro :is(.punto--paro, .punto--sc) { box-shadow: none; }

/* =====================================================================
   Temas de color (ADR-021): lo que no resuelven los tokens
   ===================================================================== */
/* Hojas carta: el color del texto se hereda ya calculado del body; la hoja pone el suyo (claro) */
.hoja:not(.hj-informe), .hoja-sig, .pagina { color: var(--texto); }
/* Selector del menú de la cuenta: grupo de radio con una muestra (fondo, texto y acento) de cada tema */
.tema-sel { border: 0; border-top: 1px solid var(--linea-suave); margin-top: 4px; padding: 4px 0 2px; min-width: 0; }
.tema-sel legend { float: left; width: 100%; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); padding: 12px 10px 6px; }
.tema-sel label { clear: both; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; color: var(--texto); cursor: pointer; }
.tema-sel label:hover { background: var(--gris-claro); }
.tema-sel input { accent-color: var(--acento); width: 16px; height: 16px; margin: 0; flex: none; }
.tema-sel input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tema-sel label:has(input:checked) { color: var(--acento); font-weight: 700; }
.tema-muestra { display: inline-flex; flex: none; border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--linea); }
.tema-muestra i { width: 10px; height: 18px; }
.tema-muestra--claro i:nth-child(1) { background: #FFFFFF; } .tema-muestra--claro i:nth-child(2) { background: #333132; } .tema-muestra--claro i:nth-child(3) { background: #420F66; }
.tema-muestra--oscuro i:nth-child(1) { background: #141313; } .tema-muestra--oscuro i:nth-child(2) { background: #E8E8E9; } .tema-muestra--oscuro i:nth-child(3) { background: #00CC79; }
.tema-muestra--clasico i:nth-child(1) { background: #050b14; } .tema-muestra--clasico i:nth-child(2) { background: #ccd6f6; } .tema-muestra--clasico i:nth-child(3) { background: #64ffda; }
.tema-nota { font-size: 12px; line-height: 1.4; color: var(--texto-suave); padding: 0 10px; }
.tema-nota:empty { display: none; }
/* Dibujos SVG que pinta el cliente: con clase, el color sigue al tema sin repintar */
.spark .sp-banda { fill: var(--perla-06); } .spark .sp-lim { stroke: var(--acero); } .spark .sp-linea { stroke: var(--verde-luz); }
[data-dias-ia] .ag-t { fill: var(--texto-suave); } [data-dias-ia] .ag-eje { stroke: var(--texto); }
[data-dias-ia] .ag-barra { fill: var(--acento); } [data-dias-ia] .ag-cero { fill: var(--linea-suave); }
/* Texto carbón profundo fuera de los módulos: con un tema oscuro pasa al texto del tema */
:root:is([data-tema="oscuro"], [data-tema="clasico"]) :is(.dl-cab h2, .dl-aqui-tag) { color: var(--texto); }
/* Tableta: su pantalla es oscura con cualquier tema; el selector usa los tokens de los módulos oscuros */
.tb-tema { position: relative; --superficie: var(--carbon-tabla); --texto: var(--perla); --texto-suave: var(--texto-suave-oscuro); --acento: var(--verde-luz);
  --linea: var(--linea-oscura); --linea-suave: var(--linea-oscura); --gris-claro: var(--perla-06); }
.tb-tema > summary { display: inline-flex; align-items: center; list-style: none; }
.tb-tema > summary::-webkit-details-marker { display: none; }
.tb-tema .tema-sel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 240px; margin: 0; padding: 4px 8px 8px; border: 1px solid var(--linea-oscura);
  border-radius: var(--r-md); background: var(--superficie); box-shadow: var(--sombra); font-family: var(--fuente); }
/* Rellenos morados con un tema oscuro: el texto ya contrasta; el contorno los separa del fondo (3:1 para la interfaz) */
:root:is([data-tema="oscuro"], [data-tema="clasico"]) .btn-sec:not([disabled]) { box-shadow: inset 0 0 0 1px var(--verde-luz-50), 0 5px 12px var(--carbon-profundo-30); }
:root:is([data-tema="oscuro"], [data-tema="clasico"]) :is(.avatar, .g2-c--local) { box-shadow: 0 0 0 1.5px var(--perla-45); }
/* Estados con un tema oscuro: el relleno no cambia nunca. El azul de make ready (2.3:1 sobre carbón), el rojo de
   mantenimiento (2.85:1 sobre el azul marino del clásico) y la caja de sin datos (contorno carbón) llevan un contorno claro
   de 3:1; la pastilla de arreglo dentro de un módulo, texto claro */
:root:is([data-tema="oscuro"], [data-tema="clasico"]) :is(.estado--make-ready, .punto--make-ready, .estado-make-ready, :is(.cinta, .cinta-ley, .leyenda) i:is(.make-ready, .bg-make-ready),
  .estado--mant, .punto--mant, .estado--sin, :is(.cinta, .cinta-ley, .leyenda, .ley) i:is(.mant, .bg-mant, .ley-mant)) { box-shadow: inset 0 0 0 1px var(--contorno-estado); }
:root:is([data-tema="oscuro"], [data-tema="clasico"]) :is(.cinta, .cinta-ley, .leyenda) i:is(.sin, .bg-sin) { box-shadow: inset 0 0 0 1px var(--contorno-estado); }
:root:is([data-tema="oscuro"], [data-tema="clasico"]) .oscuro .estado.estado--arr { color: var(--texto); }
/* Arreglo en Clásico: el contorno rojo queda a 2.85:1 del azul marino; un anillo claro por fuera (3:1) lo separa sin cambiar el rojo */
:root[data-tema="clasico"] .estado--arr { box-shadow: 0 0 0 1px var(--contorno-estado), inset 0 0 0 2px var(--estado-mantenimiento); }

/* =====================================================================
   Corrección de los avisos de UI/UX (2026-10-29, grupo A)
   ===================================================================== */
/* MOD-VISUAL-U05: sin señal, la última lectura pasa a gris con su hora; no se ve como una lectura en vivo */
.sin-senal :is(.t, .lect b, .lect b.ok, .medidor .fila b, .medidor .fila b.bajo) { color: var(--texto-suave-oscuro); }
.sin-senal .barra-prog i, .sin-senal .barra-prog i.bajo { background: var(--acero); }
.sin-senal .spark .sp-linea { stroke: var(--acero); }
.ultima-lect { font: 500 12px/1.2 var(--mono); color: var(--texto-suave-oscuro); margin-top: -6px; }
.ultima-lect[hidden] { display: none; }
/* MOD-VISUAL-U07: con dos máquinas, el módulo en vivo usa dos columnas */
@media (min-width: 1101px) { .maquinas:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* MOD-ACCESIBILIDAD-01: a 320 px la ficha se parte en lugar de empujar la página */
.maq .fila1, .ficha .fila1 { flex-wrap: wrap; }
/* MOD-ACCESIBILIDAD-01: a 400 px o menos, los botones largos parten su texto en dos renglones */
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; } }
/* MOD-ACCESIBILIDAD-07: en PC y tableta el mes va en dos renglones de 16 días con el número dentro; objetivos de 24 × 28 px o más */
.mapa-celdas .celda::before { content: attr(data-n); position: absolute; left: 4px; top: 4px; font: 500 11px/1 var(--mono); color: var(--texto); }
.mapa-celdas .celda.e3::before, .mapa-celdas .celda.e4::before { color: var(--perla); }
.mapa-celdas .celda.e2::before { color: var(--carbon-profundo); }
.mapa-celdas .celda.dom::before { color: var(--texto-suave); }
.mapa-celdas .celda.dom::after { display: none; }
:root:is([data-tema="oscuro"], [data-tema="clasico"]) .mapa-celdas .celda:is(.e1, .e2)::before { color: var(--texto); }
:root:is([data-tema="oscuro"], [data-tema="clasico"]) .mapa-celdas .celda:is(.e3, .e4)::before { color: var(--carbon-profundo); }
/* Invernadero: el número sobre el verde de estado en carbón profundo (5.6:1); el perla daba 2.7:1 */
.mapa-celdas .celda.inv-enRango::before { color: var(--carbon-profundo); }
@media (min-width: 721px) {
  .mapa-celdas { grid-template-columns: repeat(16, minmax(24px, 1fr)); gap: 10px 4px; }
  .mapa-celdas .celda { height: 28px; }
  .mapa-dias-fila { display: none; }
}
@media (min-width: 721px) and (max-width: 1100px) { .mapa-fila { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/* MOD-ACCESIBILIDAD-05: el foco no queda bajo la barra fija del celular; app.js mide su alto real (--alto-barra-movil) */
@media (max-width: 1100px) { html:has(.barra-movil) { scroll-padding-bottom: calc(var(--alto-barra-movil, 120px) + 12px); } }
/* MOD-ACCESIBILIDAD-01: el folio de la hoja del histórico se parte en lugar de salirse de la hoja (a 1366 px el logo temporal
   cruzaba el borde; a 768 px empujaba la página 130 px) */
.hoja .folio div { white-space: normal; }
.hoja .hoja-enc > .folio { min-width: 0; }
/* MOD-ACCESIBILIDAD-05: la página reserva el alto real de la barra fija (antes 96 px fijos contra una barra de 117 px) */
@media (max-width: 1100px) { .pag-hist { padding-bottom: calc(var(--alto-barra-movil, 96px) + 16px + env(safe-area-inset-bottom)); } }
/* Grupo B (MOD-CODIGO-01): con la precarga de head.ejs, la fuente llega antes del primer trazo; si Red Hat Mono no llega a
   tiempo, la página sigue con la de respaldo en lugar de cambiar a media lectura (el cambio de métrica movía el mapa y la hoja 30 px).
   Esta regla, por ser la última con los mismos descriptores, sustituye a la de arriba. Red Hat Display conserva el valor de
   arriba: con la precarga llegó antes del primer trazo en 12 de 12 primeras visitas en pruebas, también con red lenta, y el
   CLS quedó en 0 (reverificación del 2026-10-30). */
@font-face { font-family: "Red Hat Mono"; src: url("/fonts/RedHatMono.woff2") format("woff2"); font-weight: 300 700; font-display: optional; }

/* Grupo B (MOD-CODIGO-02): conteo de Usuarios bajo un H1 fijo, con el alto de sus dos renglones reservado desde el inicio
   (antes el H1 crecía al llegar la lista y empujaba la tabla 30 px). */
.cabeza .cabeza-estado { min-height: 3em; font-size: 17px; line-height: 1.5; color: var(--texto); font-weight: 600; }
.cabeza .cabeza-estado em { display: block; font-style: normal; font-weight: 500; color: var(--texto-suave); }
@media (max-width: 720px) { .cabeza .cabeza-estado { min-height: 4.5em; } }

/* Grupo B (MOD-ACCESIBILIDAD-04): las celdas del mapa con poco contraste contra el fondo (e0 y e1 en claro, e3 y e4 en los
   oscuros) llevan contorno acero de 1 px, que pasa 3:1 en los 3 temas; el color de cada nivel no cambia y el peor día
   conserva su anillo. */
.celda:is(.e0, .e1, .e2, .e3, .e4):not(.peor) { box-shadow: inset 0 0 0 1px var(--acero); }