:root{
  --azul-oscuro:#0b2540;
  --azul-oscuro-2:#0f2f52;
  --azul-petroleo:#12405c;
  --azul-petroleo-2:#1a5578;
  --gris-grafito:#2c3540;
  --gris-medio:#5c6b78;
  --gris-claro:#eef1f4;
  --gris-fondo:#f5f7f9;
  --blanco:#ffffff;
  --borde:#dbe2e8;
  --verde:#2f9e58;
  --amarillo:#d6a415;
  --naranja:#d97a1f;
  --rojo:#c62f2f;
  --gris-neutro:#8592a0;
  --sombra:0 1px 3px rgba(11,37,64,.08);
  --sombra-media:0 4px 16px rgba(11,37,64,.10);
  --radio:8px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--gris-fondo); color:var(--gris-grafito);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14.5px; line-height:1.45;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Layout general ---------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width:236px; flex:0 0 236px; background:var(--azul-oscuro); color:#dfe7ee;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  transition:transform .2s ease; z-index:40;
}
.marca{ display:flex; align-items:center; gap:10px; padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.10); }
.marca-icono{ background:var(--azul-petroleo-2); color:#fff; font-weight:700; font-size:12px; padding:8px 9px; border-radius:6px; letter-spacing:.5px; }
.marca-texto{ font-size:11px; font-weight:700; letter-spacing:.6px; line-height:1.35; color:#c9d6e2; }

#nav{ display:flex; flex-direction:column; padding:14px 10px; gap:2px; flex:1; overflow-y:auto; }
#nav a{
  padding:11px 14px; border-radius:6px; font-size:13.5px; font-weight:500; color:#b9c9d6;
  border-left:3px solid transparent;
}
#nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
#nav a.activo{ background:rgba(255,255,255,.10); color:#fff; border-left-color:var(--amarillo); font-weight:600; }

.sidebar-pie{ padding:14px 18px 18px; font-size:11px; color:#8fa2b3; display:flex; align-items:center; gap:6px; border-top:1px solid rgba(255,255,255,.10); }
.punto-estado{ color:var(--gris-neutro); font-size:10px; }
.punto-estado.activo{ color:var(--verde); }

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

.topbar{
  background:var(--blanco); border-bottom:1px solid var(--borde); padding:14px 26px;
  display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:20;
}
.topbar-titulo{ font-size:18px; font-weight:700; color:var(--azul-oscuro); flex-shrink:0; }
.topbar-periodo{ margin-left:auto; font-size:12.5px; color:var(--gris-medio); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-menu{ display:none; background:none; border:none; font-size:20px; color:var(--azul-oscuro); flex-shrink:0; }

body{ overflow-x:hidden; }
.contenido{ padding:24px 26px 60px; max-width:1400px; width:100%; margin:0 auto; min-width:0; }
.cargando, .vacio{ padding:40px; text-align:center; color:var(--gris-medio); }
.error-carga{ padding:20px; background:#fdecec; border:1px solid #f2c2c2; border-radius:var(--radio); color:var(--rojo); }

/* ---------- Tarjetas / secciones ---------- */
.panel{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra); margin-bottom:22px; }
.panel-cab{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--borde); }
.panel-cab h2{ font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-medio); margin:0; font-weight:700; }
.panel-cuerpo{ padding:18px; }

.tira-superior{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.tarjeta-info{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); padding:16px 18px; box-shadow:var(--sombra); }
.tarjeta-info .etq{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-medio); font-weight:700; margin-bottom:6px; }
.tarjeta-info .val{ font-size:17px; font-weight:700; color:var(--azul-oscuro); }
.tarjeta-info .sub{ font-size:12px; color:var(--gris-medio); margin-top:2px; }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:22px; }
.kpi{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); padding:16px 10px; text-align:center; box-shadow:var(--sombra); }
.kpi .valor{ font-size:26px; font-weight:800; color:var(--azul-petroleo); line-height:1.1; }
.kpi.critico .valor{ color:var(--rojo); }
.kpi.precaucion .valor{ color:var(--naranja); }
.kpi.normal .valor{ color:var(--verde); }
.kpi.neutro .valor{ color:var(--gris-neutro); }
.kpi.trip .valor{ color:#7a1414; }
.kpi.alarmatrip .valor{ color:#9c1f1f; }
.kpi .etq{ font-size:10.5px; color:var(--gris-medio); text-transform:uppercase; letter-spacing:.4px; margin-top:5px; font-weight:600; }

/* ---------- Críticos y Desviaciones — REDISEÑO EJECUTIVO (instrucción explícita del
   usuario, 2026-08-18): agrupado por equipo, prioridad TRIP→ALARMA TRIP→CRÍTICO→PRECAUCIÓN,
   el color identifica la condición sin pintar toda la pantalla. ---------- */
.fila-resumen-criticos{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.mini-resumen{ flex:1; min-width:220px; background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); padding:10px 14px; box-shadow:var(--sombra); }
.mini-resumen .etq{ font-size:10.5px; color:var(--gris-medio); text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
.mini-resumen .val{ font-size:13.5px; color:var(--azul-oscuro); font-weight:600; margin-top:3px; }

.grupo-equipo-critico{ background:var(--blanco); border:1px solid var(--borde); border-left:5px solid var(--gris-neutro); border-radius:var(--radio); box-shadow:var(--sombra); margin-bottom:16px; }
.grupo-equipo-critico.TRIP{ border-left-color:#7a1414; }
.grupo-equipo-critico.ALARMA_TRIP{ border-left-color:#9c1f1f; }
.grupo-equipo-critico.CRITICO{ border-left-color:var(--rojo); }
.grupo-equipo-critico.PRECAUCION{ border-left-color:var(--naranja); }
.grupo-equipo-cab-critico{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--borde); }
.grupo-equipo-cab-critico .tag-equipo{ font-weight:700; color:var(--azul-oscuro); font-size:14.5px; }
.grupo-equipo-cab-critico .area-equipo{ font-size:12px; color:var(--gris-medio); }
.grupo-equipo-cab-critico .conteo-parametros{ font-size:12px; color:var(--gris-medio); margin-left:auto; }

.lista-parametros-critico{ display:flex; flex-direction:column; }
.parametro-critico{ padding:12px 16px; border-bottom:1px solid var(--gris-claro); }
.parametro-critico:last-child{ border-bottom:none; }
.parametro-critico-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.parametro-critico-titulo{ font-weight:700; color:var(--azul-oscuro); font-size:13.5px; }
.chip-calidad{ font-size:11px; color:#8a5c0f; background:#fdf1e0; border:1px solid #f0d6a8; border-radius:12px; padding:2px 9px; white-space:nowrap; }
.chip-recuperado{ font-size:11px; color:var(--gris-medio); background:#eef1f4; border:1px solid var(--borde); border-radius:12px; padding:2px 9px; white-space:nowrap; font-weight:600; }
.datos-clave-critico{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px 16px; background:#f7f9fa; border:1px solid var(--borde); border-radius:6px; padding:8px 14px; margin-bottom:6px; }
.datos-clave-critico .campo-id .etq{ font-size:9.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--gris-medio); font-weight:700; }
.datos-clave-critico .campo-id .val{ font-size:12.5px; color:var(--azul-oscuro); font-weight:600; margin-top:1px; }
.resumen-inteligente-parametro{ font-size:12.5px; color:var(--gris-grafito); line-height:1.55; margin:6px 0; }
.resumen-inteligente-parametro b{ color:var(--azul-oscuro); }

/* ---------- Equipos que requieren atención (tarjetas clicables) ---------- */
.lista-atencion{ display:flex; flex-direction:column; gap:10px; }
.tarjeta-atencion{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radio);
  border:1px solid var(--borde); border-left:5px solid var(--gris-neutro); background:var(--blanco);
  cursor:pointer; transition:box-shadow .15s ease, transform .1s ease;
}
.tarjeta-atencion:hover{ box-shadow:var(--sombra-media); transform:translateY(-1px); }
.tarjeta-atencion.TRIP{ border-left-color:#7a1414; }
.tarjeta-atencion.ALARMA_TRIP{ border-left-color:#9c1f1f; }
.tarjeta-atencion.CRITICO{ border-left-color:var(--rojo); }
.tarjeta-atencion.PRECAUCION{ border-left-color:var(--naranja); }
.tarjeta-atencion .info{ flex:1; min-width:0; }
.tarjeta-atencion .equipo{ font-weight:700; color:var(--azul-oscuro); font-size:14px; }
.tarjeta-atencion .detalle-linea{ font-size:12.5px; color:var(--gris-medio); margin-top:2px; }
.tarjeta-atencion .metrica{ text-align:right; font-size:13px; color:var(--gris-grafito); white-space:nowrap; }

/* ---------- Badges de condición ---------- */
.badge{ display:inline-flex; align-items:center; padding:3px 11px; border-radius:20px; font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap; }
.badge.NORMAL{ background:var(--verde); }
.badge.PRECAUCION{ background:var(--naranja); }
.badge.CRITICO{ background:var(--rojo); }
.badge.ALARMA_TRIP{ background:#9c1f1f; }
.badge.TRIP{ background:#7a1414; }
.badge.SENSOR_DEFECTUOSO{ background:var(--gris-medio); }
.badge.SIN_DATOS{ background:#9aa7b0; }
.badge.LIMITES_NO_CONFIGURADOS{ background:#c8cfd6; color:#3a4552; }

/* ---------- Críticos y Desviaciones — vista ejecutiva por equipo ---------- */
.kpi.desviacion .valor{ color:var(--azul-petroleo-2); }
.kpi.calidad .valor{ color:var(--gris-medio); }

.tarjeta-equipo-cd{ background:var(--blanco); border:1px solid var(--borde); border-left:5px solid var(--gris-neutro); border-radius:var(--radio); box-shadow:var(--sombra); margin-bottom:14px; }
.tarjeta-equipo-cd.TRIP{ border-left-color:#7a1414; }
.tarjeta-equipo-cd.ALARMA_TRIP{ border-left-color:#9c1f1f; }
.tarjeta-equipo-cd.CRITICO{ border-left-color:var(--rojo); }
.tarjeta-equipo-cd.PRECAUCION{ border-left-color:var(--naranja); }
.tarjeta-equipo-cd.DESVIACION{ border-left-color:var(--azul-petroleo-2); }
.tarjeta-equipo-cd.CALIDAD{ border-left-color:var(--gris-neutro); }

.tarjeta-equipo-cd-cab{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; cursor:pointer; }
.toggle-cd{ color:var(--gris-medio); font-size:11px; width:12px; flex:0 0 auto; }
.tarjeta-equipo-cd-cab .tag-equipo{ font-weight:700; color:var(--azul-oscuro); font-size:13.5px; }
.chips-cd{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.chip-cuenta-cd{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; color:#fff; white-space:nowrap; }
.chip-cuenta-cd.trip{ background:#7a1414; }
.chip-cuenta-cd.alarmatrip{ background:#9c1f1f; }
.chip-cuenta-cd.critico{ background:var(--rojo); }
.chip-cuenta-cd.precaucion{ background:var(--naranja); }
.chip-cuenta-cd.desviacion{ background:var(--azul-petroleo-2); }
.chip-cuenta-cd.calidad{ background:var(--gris-medio); }

.tarjeta-equipo-cd-cuerpo{ border-top:1px solid var(--gris-claro); padding:4px 16px 14px; }
.subtabla-cd{ margin-top:12px; }
.subtabla-titulo-cd{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.subtabla-titulo-cd.condicion{ color:var(--azul-oscuro); }
.subtabla-titulo-cd.desviacion{ color:var(--azul-petroleo-2); }
.subtabla-titulo-cd.calidad{ color:var(--gris-medio); }
.tabla-scroll-cd{ overflow-x:auto; }
.tabla-cd{ width:100%; min-width:0; border-collapse:collapse; }
.tabla-cd th,.tabla-cd td{ text-align:left; padding:7px 10px; font-size:12.5px; border-bottom:1px solid var(--gris-claro); white-space:nowrap; }
.tabla-cd th{ color:var(--gris-medio); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; }
.fila-clicable-cd{ cursor:pointer; }
.fila-clicable-cd:hover{ background:#f4f7f9; }
.texto-contexto-cd{ white-space:normal !important; max-width:220px; font-size:11.5px; color:var(--gris-medio); }

/* ---------- Críticos y Desviaciones — eventos operacionales (parada por amperaje) ---------- */
.kpi.eventos .valor{ color:var(--azul-oscuro); }
.kpi .sub-etq{ font-size:9.5px; color:var(--gris-medio); margin-top:2px; }

.chip-contexto-cd{ font-size:10.5px; color:var(--azul-petroleo-2); background:#eaf1f6; border:1px solid #cfe0ea; border-radius:10px; padding:1px 7px; white-space:nowrap; margin-left:4px; cursor:help; }
.chip-parada-confirmada{ font-size:10.5px; font-weight:700; color:#fff; background:var(--azul-petroleo-2); border-radius:10px; padding:2px 8px; white-space:nowrap; }

.banner-eventos-cd{ display:flex; align-items:center; gap:10px; background:#eef4f8; border:1px solid #cfe0ea; border-radius:var(--radio); padding:10px 16px; margin-bottom:18px; font-size:13px; color:var(--azul-oscuro); }
.banner-eventos-cd-icono{ font-size:16px; }
.banner-eventos-cd-link{ margin-left:auto; color:var(--azul-petroleo-2); font-weight:700; white-space:nowrap; }

.titulo-seccion-cd{ font-size:14px; font-weight:800; color:var(--azul-oscuro); margin:26px 0 12px; letter-spacing:.3px; }

.tarjeta-evento-cd{ background:var(--blanco); border:1px solid var(--borde); border-left:5px solid var(--azul-petroleo-2); border-radius:var(--radio); box-shadow:var(--sombra); margin-bottom:14px; }
.tarjeta-evento-cd-cab{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px 16px; cursor:pointer; }
.evento-titulo-cd{ flex:1; min-width:220px; }
.evento-titulo-cd-linea1{ font-weight:700; color:var(--azul-oscuro); font-size:13px; }
.evento-titulo-cd-linea2{ font-size:11.5px; color:var(--gris-medio); margin-top:2px; }
.evento-datos-cd{ display:flex; gap:14px; font-size:12px; color:var(--gris-grafito); }
.evento-datos-cd .etq{ font-size:10px; text-transform:uppercase; color:var(--gris-medio); font-weight:700; display:block; }
.tarjeta-evento-cd-cuerpo{ border-top:1px solid var(--gris-claro); padding:4px 16px 14px; }
.subtabla-titulo-cd.amperaje{ color:var(--azul-petroleo-2); }

/* ---------- Calidad Pendiente — agrupado por punto, detalle de tramos ---------- */
.fila-calidad-cd-cab{ cursor:pointer; }
.fila-calidad-cd-cab:hover{ background:#f4f7f9; }
.celda-toggle-cd{ width:16px; }
.chip-estado-calidad-cd{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.chip-estado-calidad-cd.pendiente{ background:#fdf1e0; color:#8a5c0f; border:1px solid #f0d6a8; }
.chip-estado-calidad-cd.mixto{ background:var(--gris-claro); color:var(--gris-medio); border:1px solid var(--borde); }
.tabla-detalle-tramos-cd{ background:#fafbfc; border-radius:6px; }
.texto-pendiente-cd{ color:#8a5c0f; font-weight:600; }

/* ---------- Tablas ---------- */
.tabla-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; min-width:760px; }
th,td{ text-align:left; padding:10px 14px; font-size:13px; border-bottom:1px solid var(--borde); white-space:nowrap; }
th{ color:var(--gris-medio); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.3px; background:#fafbfc; position:sticky; top:0; }
tbody tr{ cursor:pointer; }
tbody tr:hover{ background:#f4f7f9; }
tbody tr.sel{ background:#e7eff5; }

/* ---------- Filtros ---------- */
.filtros{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.filtros select, .filtros input{
  padding:8px 10px; border:1px solid var(--borde); border-radius:6px; font-size:13px; background:#fff; color:var(--gris-grafito);
  min-width:150px;
}

/* ---------- Parámetros — filtros encadenados + gráfico grande + análisis ---------- */
.filtros-encadenados{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
/* Filtros del módulo Parámetros más compactos (instrucción explícita del usuario,
   2026-08-17: "debo poder ver, al 100% de zoom, filtros + gráfico + tabla sin desplazar") —
   override de padding SOLO en este panel (clase adicional, no toca .panel-cuerpo global). */
.panel-cuerpo.panel-cuerpo-compacto{ padding:12px 18px; }
.filtros-encadenados .campo{ display:flex; flex-direction:column; gap:5px; min-width:170px; }
.filtros-encadenados .campo-ancho{ flex:1 1 260px; }
.filtros-encadenados label{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-medio); font-weight:700; }
.filtros-encadenados select, .filtros-encadenados input{ padding:9px 10px; border:1px solid var(--borde); border-radius:6px; font-size:13px; background:#fff; color:var(--gris-grafito); width:100%; }
.meta-parametro{ font-size:12.5px; color:var(--gris-medio); margin-bottom:4px; }
/* ALINEACIÓN DE BASE MAESTRA (2026-08-17): banda de identidad ITEM/TAG/COMPONENTE/PUNTO/
   CÓDIGO PI/PERÍODO mostrada sobre el análisis, y título del gráfico construido desde la
   misma identidad — para verificar visualmente que se está analizando el punto correcto. */
.banda-identidad{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:6px 18px; background:#f7f9fa; border:1px solid var(--borde); border-radius:var(--radio); padding:8px 16px; margin-bottom:8px; }
.banda-identidad .campo-id .etq{ font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-medio); font-weight:700; }
.banda-identidad .campo-id .val{ font-size:13px; color:var(--azul-oscuro); font-weight:600; margin-top:2px; word-break:break-all; }
.banda-identidad .campo-id .val-sub{ font-size:10.5px; color:var(--gris-medio); font-weight:600; margin-top:1px; }
.titulo-grafico-parametro{ text-align:center; margin-bottom:4px; }
.titulo-grafico-parametro .tg-l1{ font-size:12.5px; letter-spacing:.5px; color:var(--gris-medio); font-weight:700; text-transform:uppercase; }
.titulo-grafico-parametro .tg-l2{ font-size:19px; color:var(--azul-oscuro); font-weight:800; margin-top:3px; }
.titulo-grafico-parametro .tg-l3{ font-size:14px; color:var(--azul-petroleo); font-weight:600; margin-top:2px; }
.identidad-tabla{ font-size:11.5px; color:var(--gris-medio); background:#f7f9fa; border:1px solid var(--borde); border-radius:6px; padding:8px 12px; margin-bottom:8px; display:flex; flex-wrap:wrap; gap:4px 16px; }
.identidad-tabla b{ color:var(--azul-oscuro); }
.grafico-grande-cont{ margin-bottom:8px; }
svg.grafico-xl{ height:480px; }
/* GRÁFICO PRINCIPAL COMPACTO (instrucción explícita del usuario, 2026-08-17: "debo poder
   ver, al 100% de zoom del navegador, título + fechas + gráfico + inicio de la tabla, sin
   alejar el navegador") — 420-480px de alto útil, ya no 960px. */
svg.grafico-grande.grafico-xxl{ width:100%; height:460px; display:block; }
.seleccion-zoom{ fill:rgba(18,64,92,.15); stroke:var(--azul-petroleo); stroke-width:1; stroke-dasharray:3 3; }
/* RESUMEN de una línea (instrucción explícita del usuario, 2026-08-17): Máx. | Mín. |
   Promedio | Mayor incremento | Mayor velocidad — entre identificación y gráfico. */
.resumen-linea{ font-size:13.5px; color:var(--azul-oscuro); background:#f7f9fa; border:1px solid var(--borde); border-radius:6px; padding:8px 12px; margin:6px 0 8px; }
.resumen-linea .sep{ color:var(--borde); margin:0 2px; }
/* Fila compacta: leyenda de una línea + botón RESET (instrucción explícita del usuario,
   2026-08-17: "RESET ZOOM debe desaparecer... colocar solamente RESET"). */
.fila-controles-grafico{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:4px 0 6px; }
/* MOSTRAR LÍMITES — Precaución/Crítico fijos, Alarma Trip/Trip opcionales (instrucción
   explícita del usuario, 2026-08-17): fila compacta de una línea, sin aumentar la altura
   del módulo. */
.fila-niveles-grafico{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin:0 0 6px; font-size:12px; }
.nivel-etq{ color:var(--gris-medio); font-weight:600; margin-right:2px; }
.nivel-chip{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:12px; border:1px solid var(--borde); background:#fff; }
.nivel-chip b{ font-weight:800; }
.nivel-fijo{ color:var(--gris-grafito); }
.nivel-opcional{ cursor:pointer; color:var(--gris-medio); }
.nivel-opcional input{ margin:0; cursor:pointer; }
.nivel-opcional.activo{ border-color:#9c1f1f; background:#fdecec; color:#7a1414; }
/* 3 COMPARATIVOS PEQUEÑOS (instrucción explícita del usuario, 2026-08-17): miniaturas
   discretas en una sola fila — no deben competir en tamaño con el gráfico principal. */
.fila-graficos-secundarios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:14px 0; }
.panel-chico{ background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:10px 12px; }
.panel-chico h4{ margin:0 0 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--gris-medio); font-weight:700; text-align:center; }
svg.grafico-chico{ width:100%; height:190px; display:block; }
svg.grafico-chico .eje-texto{ font-size:10px; font-weight:400; }

/* LEYENDA COMPACTA (instrucción explícita del usuario, 2026-08-17: "la leyenda actual
   ocupa demasiado espacio... cambiar a una leyenda compacta" — solo color + fecha; los
   hallazgos se muestran en el análisis, no en la leyenda). Clic = curva protagonista. */
.leyenda-grafico{ display:flex; flex-wrap:wrap; gap:6px 8px; margin:0; flex:1; }
.chip-leyenda{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 8px; border:1.5px solid var(--borde); border-radius:18px; background:#fff; font-size:13px; font-weight:600; color:var(--azul-oscuro); cursor:pointer; transition:opacity .15s; }
.chip-leyenda.oculta{ opacity:.38; }
.chip-leyenda.activa{ border-color:var(--azul-petroleo); background:#eef4f8; box-shadow:0 0 0 1px var(--azul-petroleo) inset; font-weight:800; }
.chip-leyenda input[type="checkbox"]{ margin:0; cursor:pointer; width:13px; height:13px; }
.chip-color{ width:12px; height:12px; border-radius:3px; display:inline-block; flex-shrink:0; }
.chip-atipico-mini{ font-size:12px; }
.nota-atipico{ font-size:12.5px; color:#8a4c0f; background:#fdf1e0; border:1px solid #f0d6a8; border-radius:6px; padding:9px 12px; margin:6px 0 14px; line-height:1.6; }
.nota-atipico.nota-detenido{ color:#3d5a6c; background:#eef3f5; border-color:#c9d6db; }
tr.atipico{ background:#fffaf0; }
tr.atipico.sel{ background:#fbead0; }

/* ANÁLISIS INTELIGENTE — tarjeta grande inmediatamente debajo del gráfico (instrucción
   explícita del usuario, 2026-08-17), 4 apartados, máximo 5-7 líneas en total. */
.panel-analisis-inteligente.grande{ padding:18px 20px; margin-top:0; }
.panel-analisis-inteligente.grande h3{ font-size:13px; margin-bottom:12px; }
.panel-analisis-inteligente.grande .analisis-bloque p{ font-size:14px; }

/* Fila sin evento detectado en la tabla ejecutiva — texto explicativo en vez de columnas
   vacías (instrucción explícita del usuario, 2026-08-17). */
#tablaComparacion table.tabla-compacta td.sin-evento{ color:var(--gris-medio); font-style:italic; text-align:left !important; }

/* TABLA COMPACTA de análisis diario (instrucción explícita del usuario, 2026-08-17): no
   debe requerir desplazamiento horizontal para ver las columnas principales — encabezados
   cortos en 2 líneas, unidad indicada una sola vez arriba (no repetida en cada columna),
   tipografía y padding reducidos. Alcance limitado a esta tabla vía #tablaComparacion, sin
   afectar las demás tablas de la aplicación. */
.tabla-unidad{ font-size:11.5px; color:var(--gris-medio); margin:0 0 6px; font-weight:600; }
.tabla-bloque-titulo{ font-size:11px; font-weight:800; letter-spacing:.4px; color:var(--azul-petroleo); text-transform:uppercase; margin:14px 0 6px; }
#tablaComparacion table.tabla-compacta{ min-width:0; width:100%; table-layout:auto; }
#tablaComparacion table.tabla-compacta th, #tablaComparacion table.tabla-compacta td{ padding:7px 6px; font-size:12px; white-space:nowrap; text-align:right; }
#tablaComparacion table.tabla-compacta th:first-child, #tablaComparacion table.tabla-compacta td:first-child{ text-align:left; }
#tablaComparacion table.tabla-compacta th{ font-size:9.5px; line-height:1.35; white-space:normal; text-align:right; vertical-align:bottom; }
#tablaComparacion table.tabla-compacta th:first-child{ text-align:left; }
@media (min-width:1400px){ #tablaComparacion{ overflow-x:visible; } }
/* Resaltado SOLO de las columnas del evento detectado (Inicio subida | Valor inicial | Pico
   evento | Hora pico | Incremento | Duración | Velocidad), únicamente en filas con evento
   (instrucción explícita del usuario, 2026-08-17: destacar visualmente solo esas columnas
   cuando exista evento). */
#tablaComparacion table.tabla-compacta td.col-evento{ background:#eef6f0; font-weight:700; color:#1f6b3a; }
#tablaComparacion table.tabla-compacta tr.sel td.col-evento{ background:#dcefe1; }
/* Una sola fila con scroll horizontal (instrucción explícita del usuario, 2026-08-17:
   compactar filtros) — antes ocupaba hasta 4 filas de altura. */
.lista-fechas-comparar{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; margin:4px 0 8px; padding-bottom:4px; }
.lista-fechas-comparar .chip-fecha{ flex:0 0 auto; }
.chip-fecha{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--borde); border-radius:20px; font-size:12.5px; cursor:pointer; background:#fff; }
.chip-fecha input{ margin:0; }
.panel-analisis-inteligente{ background:#f7f9fa; border:1px solid var(--borde); border-radius:var(--radio); padding:16px 18px; margin-top:16px; }
.panel-analisis-inteligente h3{ margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--azul-petroleo); }
.analisis-bloque{ margin-bottom:10px; }
.analisis-bloque:last-child{ margin-bottom:0; }
.analisis-titulo{ font-size:10.5px; font-weight:700; letter-spacing:.4px; color:var(--gris-medio); text-transform:uppercase; margin-bottom:2px; }
.analisis-bloque p{ margin:0; font-size:13px; line-height:1.5; color:var(--gris-grafito); }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:6px; border:1px solid transparent; font-size:13px; font-weight:700; letter-spacing:.2px; }
.btn-primario{ background:var(--azul-petroleo); color:#fff; }
.btn-primario:hover{ background:var(--azul-petroleo-2); }
.btn-primario:disabled{ background:#a9b8c2; cursor:not-allowed; }
.btn-secundario{ background:#fff; color:var(--azul-petroleo); border-color:var(--azul-petroleo); }
.btn-secundario:hover{ background:#eef4f8; }
.btn-chico{ padding:6px 12px; font-size:12px; }
.grupo-botones{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Detalle de punto ---------- */
.tarjetas-detalle{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px; }
.tarjeta-metrica{ background:#fbfcfd; border:1px solid var(--borde); border-radius:var(--radio); padding:12px 14px; }
.tarjeta-metrica .etq{ font-size:10.5px; text-transform:uppercase; color:var(--gris-medio); font-weight:700; letter-spacing:.4px; }
.tarjeta-metrica .val{ font-size:19px; font-weight:700; color:var(--azul-oscuro); margin-top:4px; }
.tarjeta-metrica .val.hora{ font-size:13px; font-weight:500; color:var(--gris-medio); }

.interpretacion{ background:#f7f9fa; border:1px solid var(--borde); border-radius:var(--radio); padding:14px 16px; font-size:13.5px; line-height:1.6; }
.interpretacion h3{ margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--azul-petroleo); }

/* ---------- Gráfico grande ---------- */
.tabs-grafico{ display:flex; gap:6px; margin-bottom:6px; }
.tab-grafico{ background:#fff; border:1px solid var(--borde); color:var(--gris-medio); padding:7px 16px; border-radius:6px; font-size:12.5px; font-weight:700; letter-spacing:.2px; }
.tab-grafico:hover{ background:#f4f7f9; }
.tab-grafico.activa{ background:var(--azul-petroleo); color:#fff; border-color:var(--azul-petroleo); }
.grafico-cont{ position:relative; }
svg.grafico-grande{ width:100%; height:380px; background:#fbfcfd; border:1px solid var(--borde); border-radius:var(--radio); display:block; }
.linea-limite{ stroke-dasharray:5 4; }
.eje-texto{ font-size:14px; fill:var(--gris-medio); font-weight:500; }
svg.grafico-xxl .eje-texto{ font-size:15px; }
.tooltip-grafico{
  position:absolute; pointer-events:none; background:var(--azul-oscuro); color:#fff; font-size:11.5px;
  padding:8px 10px; border-radius:5px; transform:translate(-50%,-115%); white-space:normal; min-width:170px; max-width:260px; line-height:1.55; opacity:0; transition:opacity .1s; z-index:5;
}
.tooltip-grafico .tt-titulo{ font-weight:700; margin-bottom:2px; }
.tooltip-grafico .tt-linea{ opacity:.92; }

/* ---------- Reportes ---------- */
.grid-reportes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.tarjeta-reporte{ background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:18px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:8px; }
.tarjeta-reporte h3{ margin:0; font-size:15px; color:var(--azul-oscuro); }
.tarjeta-reporte .meta{ font-size:12px; color:var(--gris-medio); }

/* ---------- Formulario Actualizar datos ---------- */
.form-actualizar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:700px; }
.campo{ display:flex; flex-direction:column; gap:5px; }
.campo label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-medio); font-weight:700; }
.campo input, .campo select{ padding:9px 11px; border:1px solid var(--borde); border-radius:6px; font-size:13.5px; }
.campo input[readonly]{ background:#f5f7f9; color:var(--gris-medio); }
.pasos-actualizar{ display:flex; flex-direction:column; gap:22px; }
.paso-num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--azul-petroleo); color:#fff; font-size:12px; font-weight:700; margin-right:8px; }
.paso-titulo{ font-size:14.5px; font-weight:700; color:var(--azul-oscuro); display:flex; align-items:center; margin-bottom:10px; }
.resultado-validacion{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:12px; }
.lista-problemas{ margin:10px 0 0; padding-left:18px; font-size:13px; }
.lista-problemas.problemas{ color:var(--rojo); }
.lista-problemas.advertencias{ color:var(--naranja); }
.aviso-ok{ color:var(--verde); font-weight:700; }

/* ---------- Modal (vista previa PDF) ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(11,37,64,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:30px; }
.modal-overlay.oculto{ display:none; }
.modal{ background:#fff; border-radius:var(--radio); width:min(900px,100%); height:min(88vh,900px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.modal-cabecera{ padding:14px 18px; border-bottom:1px solid var(--borde); display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--azul-oscuro); }
.btn-cerrar{ background:none; border:none; font-size:16px; color:var(--gris-medio); }
.modal-cuerpo{ flex:1; overflow:auto; }
.modal-cuerpo iframe{ width:100%; height:100%; border:none; }

/* ---------- Config ---------- */
.nota-config{ font-size:12px; color:var(--gris-medio); margin-bottom:14px; line-height:1.6; }
.nota-chica{ font-size:11.5px; color:var(--gris-medio); margin:0 0 6px; }
.tag-mono{ font-family:ui-monospace,Consolas,monospace; font-size:12px; }
td.meta{ font-size:11px; color:var(--gris-medio); white-space:normal; max-width:260px; }

/* AGRUPACIÓN POR EQUIPO (instrucción explícita del usuario, 2026-08-17): EQUIPO ->
   COMPONENTE -> DESCRIPCIÓN/PUNTO, expandible/contraíble con <details> nativo. */
.grupo-equipo-limite{ border:1px solid var(--borde); border-radius:var(--radio); margin-bottom:12px; background:#fff; overflow:hidden; }
.grupo-equipo-limite summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; cursor:pointer; background:#f7f9fa; list-style:none; }
.grupo-equipo-limite summary::-webkit-details-marker{ display:none; }
.grupo-equipo-limite summary::before{ content:'▶'; font-size:10px; color:var(--gris-medio); margin-right:8px; }
.grupo-equipo-limite[open] summary::before{ content:'▼'; }
.grupo-equipo-nombre{ font-size:14.5px; font-weight:800; color:var(--azul-oscuro); }
.grupo-equipo-conteo{ font-size:12px; color:var(--gris-medio); }
.grupo-equipo-cuerpo{ padding:12px 16px; display:flex; flex-direction:column; gap:12px; }

.tarjeta-limite{ border:1px solid var(--borde); border-radius:var(--radio); padding:14px 16px; background:#fbfcfd; }
.tarjeta-limite-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.tarjeta-limite-titulo{ font-size:14px; font-weight:700; color:var(--azul-oscuro); }
.tarjeta-limite-meta{ font-size:11.5px; color:var(--gris-medio); margin-top:2px; }
.fila-campos-limite{ display:flex; flex-wrap:wrap; gap:14px; }
.campo-limite-item{ min-width:110px; }
.campo-limite-item label{ font-size:10px; }
.campo-limite{ width:100%; padding:7px 8px; font-size:13px; border:1px solid var(--borde); border-radius:5px; }

/* ---------- Seguimiento ---------- */
.grid-seguimientos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:16px; }
.tarjeta-seguimiento{ gap:8px; padding:16px; }

/* Cabecera ejecutiva (rediseño 2026-08-20): TAG real de Base Maestra en la línea principal,
   descripción/parámetro debajo, condición y "Comparar" sin espacio adicional. */
.ts-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ts-titulo{ min-width:0; }
.ts-tag{ font-size:14.5px; font-weight:800; color:var(--azul-oscuro); text-transform:uppercase; letter-spacing:.2px; }
.ts-desc{ font-size:12.5px; color:var(--gris-medio); margin-top:1px; }
.ts-nombre-chip{ font-size:11.5px; font-weight:600; color:var(--azul-petroleo); text-transform:none; }
.ts-acciones{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.chk-comparar{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--gris-medio); font-weight:600; cursor:pointer; white-space:nowrap; }
.chk-comparar input{ margin:0; }
.ts-estado{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ts-actualizado{ font-size:11.5px; color:var(--gris-medio); margin-left:auto; }
.ts-periodo{ font-size:11.5px; color:var(--azul-petroleo); font-weight:700; }

/* Fila compacta de indicadores (punto 3) — título pequeño + valor grande + dato secundario. */
.ts-indicadores{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; background:#fbfcfd; border:1px solid var(--borde); border-radius:var(--radio); padding:10px 8px; }
.ts-ind{ text-align:center; min-width:0; }
.ts-ind-titulo{ font-size:9.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--gris-medio); font-weight:700; }
.ts-ind-valor{ font-size:15px; font-weight:800; color:var(--azul-oscuro); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-ind-sub{ font-size:10.5px; color:var(--gris-medio); margin-top:1px; }

.control-historico-seguimiento{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-historico{ padding:5px 12px; border:1px solid var(--borde); border-radius:14px; background:#fff; font-size:11.5px; font-weight:700; color:var(--gris-medio); cursor:pointer; }
.chip-historico.activo{ background:var(--azul-petroleo); border-color:var(--azul-petroleo); color:#fff; }

/* Marcadores discretos (punto 6) — Máx./Mín./Actual/Tendencia en una línea; nunca rojo/verde
   por dirección, solo la condición (badge) usa color semántico. */
.ts-marcadores{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; font-weight:600; }
.ts-marca{ white-space:nowrap; }
.ts-marca-max{ color:#b5651d; }
.ts-marca-min{ color:#2f6fa8; }
.ts-marca-actual{ color:var(--azul-oscuro); }
.ts-marca-tendencia{ color:var(--gris-grafito); }

svg.grafico-compacto{ width:100%; height:300px; background:#fbfcfd; border:1px solid var(--borde); border-radius:var(--radio); display:block; }
svg.grafico-compacto .eje-texto{ font-size:11px; }

/* Resumen estadístico visible en la tarjeta (punto 7) — compacto con scroll propio para no
   estirar la tarjeta indefinidamente. */
.ts-resumen{ background:#fbfcfd; border:1px solid var(--borde); border-radius:var(--radio); padding:10px 12px; }
.ts-resumen-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.ts-resumen-titulo{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-medio); font-weight:700; }
.ts-resumen-texto{ font-family:ui-monospace,Consolas,monospace; font-size:11.5px; line-height:1.5; color:var(--gris-grafito); white-space:pre-wrap; max-height:220px; overflow-y:auto; margin:0; }
.vacio-mini{ grid-column:1/-1; font-size:12px; color:var(--gris-medio); text-align:center; padding:6px; }

.barra-comparar-seguimiento{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#eef4f8; border:1px solid var(--azul-petroleo); border-radius:var(--radio); padding:10px 16px; margin-bottom:14px; font-size:13px; font-weight:700; color:var(--azul-oscuro); }
.barra-comparar-seguimiento.oculto{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tira-superior{ grid-template-columns:1fr; }
  .form-actualizar{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .btn-menu{ display:block; }
  .sidebar{ position:fixed; transform:translateX(-100%); box-shadow:0 0 30px rgba(0,0,0,.3); }
  .sidebar.abierto{ transform:translateX(0); }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contenido{ padding:16px; }
  .topbar{ padding:12px 16px; }
  table{ min-width:640px; }
  .ts-indicadores{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---------- Autenticación (instrucción explícita del usuario, 2026-08-22) ----------
   REDISEÑO VISUAL LOGIN v4 (2026-08-22): fondo = foto real de planta industrial nocturna
   (Unsplash — mos design, licencia libre de uso comercial), descargada y guardada local
   como login-fondo-v2.webp — el sufijo "-v2" es cache-busting: Cloudflare reescribe el
   Cache-Control del origen a max-age=14400 en el borde (fuera de nuestro control, no se
   toca config. de Cloudflare), así que un reemplazo de imagen bajo el MISMO nombre puede
   quedar cacheado horas; cambiar el nombre de archivo fuerza una URL nueva nunca cacheada.
   Overlay MÍNIMO, solo el necesario para legibilidad — la planta debe quedar reconocible,
   sin desenfoque. Sin gráficos decorativos agregados. Composición dividida 60/40
   (identidad / acceso) en escritorio. */
#pantallaLogin.oculto, #shellApp.oculto{ display:none; }
#pantallaLogin{
  min-height:100vh; display:grid; grid-template-columns:60% 40%;
  position:relative; overflow:hidden;
  background:
    linear-gradient(100deg, rgba(6,14,26,.70) 0%, rgba(8,20,36,.54) 40%, rgba(10,26,46,.36) 70%, rgba(10,26,46,.28) 100%),
    url('img/login-fondo-v2.webp') center/cover no-repeat;
}

/* --- Panel izquierdo: identidad (60%) --- */
.login-marca-panel{
  position:relative; display:flex; align-items:center; justify-content:center; padding:40px 48px;
  overflow:hidden;
}
.login-marca-contenido{ position:relative; z-index:2; max-width:460px; text-align:left; }
.login-marca-contenido .login-icono-grande{
  display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 12px; margin-bottom:26px;
  background:rgba(255,255,255,.08); border:1px solid rgba(120,190,230,.35); border-radius:8px;
  color:#eaf3fa; font-weight:800; font-size:13px; letter-spacing:1.2px; backdrop-filter:blur(6px);
}
.login-icono-simbolo{ display:flex; align-items:flex-end; gap:2.5px; height:16px; }
.login-icono-simbolo span{ width:4px; display:block; background:linear-gradient(180deg,#7fd4f2,#2fa4d6); border-radius:1.5px; }
.login-icono-simbolo span:nth-child(1){ height:7px; }
.login-icono-simbolo span:nth-child(2){ height:13px; }
.login-icono-simbolo span:nth-child(3){ height:16px; }
.login-titulo-grande{ display:flex; flex-direction:column; gap:0; margin-bottom:18px; }
.login-titulo-grande span{
  font-size:38px; font-weight:800; letter-spacing:3px; line-height:1.12; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.login-titulo-grande span:first-child{ color:#8fd8f5; }
.login-subtitulo-grande{ font-size:15px; color:#dceaf3; line-height:1.6; margin:0 0 14px; max-width:400px; text-shadow:0 1px 12px rgba(0,0,0,.3); }
.login-tagline{ font-size:13px; color:#8fd8f5; font-weight:700; letter-spacing:.3px; margin:0; }

/* --- Panel derecho: acceso (40%) --- */
.login-acceso-panel{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:32px; }
.tarjeta-login{
  background:linear-gradient(165deg, rgba(20,42,68,.68), rgba(10,24,42,.72));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  width:min(380px,100%); padding:38px 32px 34px; display:flex; flex-direction:column; gap:15px;
  text-align:center;
}
.tarjeta-login .login-icono{ align-self:center; padding:9px 14px; font-size:13px; border-radius:8px; background:rgba(255,255,255,.08); border:1px solid rgba(120,190,230,.3); color:#eaf3fa; }
.login-bienvenido{ font-size:21px; letter-spacing:.3px; color:#fff; margin:4px 0 0; font-weight:800; }
.tarjeta-login .login-subtitulo{ font-size:12.5px; color:#a9c1d4; margin:0 0 6px; line-height:1.5; }
.campo-login{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.campo-login label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#8ea8bd; font-weight:700; }
.campo-login input{
  padding:11px 12px; border:1px solid rgba(255,255,255,.16); border-radius:7px; font-size:14px; width:100%;
  background:rgba(6,16,30,.35); color:#f2f6f9;
}
.campo-login input::placeholder{ color:#6d859a; }
.campo-login input:focus{ outline:none; border-color:rgba(127,212,242,.6); box-shadow:0 0 0 3px rgba(127,212,242,.15); }
.campo-password{ position:relative; display:flex; }
.campo-password input{ flex:1; padding-right:38px; }
.btn-mostrar-password{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:15px; padding:4px; opacity:.85; }
.btn-mostrar-password:hover{ opacity:1; }
.login-error{ background:rgba(198,47,47,.18); color:#ff9a9a; border:1px solid rgba(198,47,47,.4); border-radius:6px; padding:9px 12px; font-size:13px; text-align:left; }
.login-error.oculto{ display:none; }
.btn-login{
  justify-content:center; padding:12px 18px; font-size:13.5px; letter-spacing:.6px; margin-top:4px;
  background:linear-gradient(135deg, #2fa4d6, #12405c); border:none;
  box-shadow:0 8px 24px rgba(47,164,214,.35);
}
.btn-login:hover{ background:linear-gradient(135deg, #4fb8e6, #1a5578); }

@media (max-width:880px){
  #pantallaLogin{ display:flex; flex-direction:column; }
  .login-marca-panel{ padding:36px 24px 12px; }
  .login-marca-contenido{ max-width:100%; text-align:center; }
  .login-marca-contenido .login-icono-grande{ margin-bottom:16px; }
  .login-titulo-grande span{ font-size:26px; letter-spacing:2px; }
  .login-subtitulo-grande{ font-size:13px; margin:0 auto 10px; }
  .login-tagline{ display:none; }
  .login-acceso-panel{ padding:16px 24px 40px; }
}

.sidebar-usuario{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; gap:6px; }
.sidebar-usuario span{ font-size:11.5px; color:#dfe7ee; }
.btn-logout{ align-self:flex-start; background:none; border:1px solid rgba(255,255,255,.3); color:#dfe7ee; font-size:11px; padding:5px 10px; border-radius:5px; }
.btn-logout:hover{ background:rgba(255,255,255,.1); }

#nav a#navUsuarios.oculto{ display:none; }

.form-usuario{ display:flex; flex-direction:column; gap:14px; padding:22px; max-width:420px; }
.form-usuario .campo{ display:flex; flex-direction:column; gap:5px; }
.form-usuario .campo label{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-medio); font-weight:700; }
.form-usuario .campo input, .form-usuario .campo select{ padding:9px 11px; border:1px solid var(--borde); border-radius:6px; font-size:13.5px; }
.form-usuario .campo input:disabled{ background:#f5f7f9; color:var(--gris-medio); }
.acciones-usuario{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------- Examinar archivo (Actualizar datos) ---------- */
#fArchivo.oculto{ display:none; }
.selector-archivo{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0; }
.info-archivo-vacio{ font-size:12.5px; color:var(--gris-medio); }
.info-archivo-elegido{ font-size:13px; color:var(--azul-oscuro); background:#eef4f8; border:1px solid var(--borde); border-radius:6px; padding:8px 12px; }
.info-archivo-error{ font-size:13px; color:var(--rojo); background:#fdecec; border:1px solid #f3c6c6; border-radius:6px; padding:8px 12px; }
.ruta-manual-avanzado{ margin:6px 0 14px; font-size:12.5px; }
.ruta-manual-avanzado summary{ cursor:pointer; color:var(--gris-medio); font-weight:700; }
.ruta-manual-avanzado .campo{ max-width:500px; margin-top:10px; }

/* ---------- Constructor de Reportes (instrucción explícita del usuario, 2026-08-23) ---------- */
.meta-fila{ font-size:11px; color:var(--gris-medio); margin-top:2px; }
.disenador-grid{ display:grid; grid-template-columns:190px 1fr 280px; gap:16px; align-items:start; }
.disenador-panel{ background:#fbfcfd; border:1px solid var(--borde); border-radius:var(--radio); padding:14px; min-height:200px; }
.disenador-panel h3{ margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-medio); font-weight:700; }
.disenador-bloques .btn{ display:flex; width:100%; margin-bottom:8px; justify-content:center; }
.disenador-lienzo{ display:flex; flex-direction:column; gap:10px; }
.bloque-card{ background:#fff; border:1px solid var(--borde); border-radius:6px; padding:10px 12px; cursor:pointer; }
.bloque-card.sel{ border-color:var(--azul-petroleo); box-shadow:0 0 0 2px rgba(18,64,92,.15); }
.bloque-card-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bloque-card-tipo{ font-size:11px; font-weight:700; color:var(--azul-oscuro); text-transform:uppercase; letter-spacing:.3px; }
.bloque-card-acciones{ display:flex; gap:2px; }
.bloque-card-acciones button{ background:none; border:none; font-size:12px; padding:3px 5px; color:var(--gris-medio); cursor:pointer; border-radius:4px; }
.bloque-card-acciones button:hover:not(:disabled){ background:var(--gris-claro); color:var(--azul-oscuro); }
.bloque-card-acciones button:disabled{ opacity:.3; cursor:default; }
.bloque-card-resumen{ font-size:12px; color:var(--gris-medio); margin-top:4px; }
.disenador-propiedades .campo{ margin-bottom:12px; }
.check-inline{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gris-grafito); font-weight:400; text-transform:none; letter-spacing:0; margin-bottom:5px; }
.chips-puntos{ display:flex; flex-direction:column; gap:6px; }
.chip-punto{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:#eef4f8; border:1px solid var(--borde); border-radius:5px; padding:5px 8px; font-size:12px; color:var(--azul-oscuro); }
.chip-punto button{ background:none; border:none; color:var(--gris-medio); cursor:pointer; font-size:12px; }
.chip-punto button:hover{ color:var(--rojo); }
@media (max-width: 900px){ .disenador-grid{ grid-template-columns:1fr; } }

/* ---------- Constructor de Reportes — Fase 5, gráficos (instrucción explícita del usuario,
   2026-08-23) — vista previa EN VIVO dentro de cada tarjeta de bloque de gráfico. ---------- */
.grafico-cont-constructor{ margin-top:8px; }
svg.grafico-mini{ width:100%; height:120px; background:#fbfcfd; border:1px solid var(--borde); border-radius:6px; display:block; }
svg.grafico-mini .eje-texto{ font-size:8px; }
.grafico-cont-constructor.tamano-pequeno svg.grafico-mini{ height:90px; }
.grafico-cont-constructor.tamano-mediano svg.grafico-mini{ height:120px; }
.grafico-cont-constructor.tamano-grande svg.grafico-mini{ height:165px; }
.grafico-cont-constructor.tamano-completo svg.grafico-mini{ height:200px; }