/* =====================================================================
   Protecom BI — hoja de estilo única del panel.

   Todo el CSS vive acá, en un archivo servido desde el propio dominio: la
   CSP es style-src 'self', así que no hay <style> embebido ni atributos
   style= en ninguna pantalla, y NO se puede cargar una fuente de Google.
   Por eso la tipografía usa pilas del sistema en vez de las fuentes de
   marca (Chakra Petch / JetBrains Mono / Barlow): traerlas exigiría
   alojarlas acá como .woff2. Se puede hacer; hoy no están.

   PALETA — del manual de marca, con dos decisiones tomadas al medir:

   · El Azul Protecom (#1b3a8f) da 2.0:1 sobre el fondo institucional.
     Inusable para texto o líneas finas. Se usa solo como SUPERFICIE
     (botones), donde el blanco encima da 8.5:1. El acento visible es el
     cian analítico, que da 11.1:1.

   · El manual define un verde de "alerta OK" pero ningún tono de alarma.
     El ámbar y el rojo de acá los elegí para que pasen 4.5:1 sobre el
     fondo institucional (12.1:1 y 7.3:1). Si la marca define los suyos,
     se reemplazan en estas dos líneas y nada más.
   ===================================================================== */

:root {
    --fondo:      #04070f;   /* fondo institucional */
    --panel:      #0a1220;   /* tarjetas y tablas */
    --panel-alto: #101c30;   /* encabezados de tabla, hover */
    --linea:      #1b2740;
    --tinta:      #e6edf7;   /* blanco texto */
    --tinta-2:    #94a5c2;   /* gris azulado */
    --azul:       #1b3a8f;   /* Azul Protecom — solo superficie */
    --cian:       #22d3ee;   /* cian analítico — acento y enlaces */
    --verde:      #34e07a;   /* verde nodo / OK */
    --ambar:      #fbbf24;
    --rojo:       #ff6b6b;
    --rojo-suave: #2a1417;

    --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono",
            Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fondo);
    /* Un respiro de color detrás del contenido, en el cian de la marca.
       Muy tenue: es ambiente, no decoración. */
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(34, 211, 238, .07), transparent),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(27, 58, 143, .18), transparent);
    background-attachment: fixed;
}

/* ── Barra superior ────────────────────────────────────────────────── */
.barra {
    background: rgba(4, 7, 15, .82);
    border-bottom: 1px solid var(--linea);
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: blur(8px);
}
.barra-in {
    max-width: 1180px; margin: 0 auto; padding: .55rem 1rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}

/* Lockup: símbolo + línea divisoria + nombre + descriptor.
   El manual pide el logotipo PROTECOM (el águila) en el lockup oficial y
   prohíbe retipografiarlo; ese archivo no está en la carpeta de marca, así
   que acá va el símbolo con el nombre como TEXTO, que no pretende ser el
   logotipo. Cuando llegue el águila, se reemplaza este bloque. */
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marca img { width: 34px; height: 34px; display: block; }
.marca .divisor { width: 1px; height: 26px; background: var(--linea); }
.marca .nombre {
    color: var(--tinta); font-size: 1.02rem; font-weight: 600; letter-spacing: .01em;
    line-height: 1.1;
}
.marca .descriptor {
    display: block; font-family: var(--mono); font-size: .58rem;
    text-transform: uppercase; letter-spacing: .30em;   /* tracking del manual */
    color: var(--cian); margin-top: .18rem;
}

.nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }
.nav a {
    color: var(--tinta-2); text-decoration: none; padding: .34rem .7rem;
    border-radius: 6px; font-size: .93rem;
}
.nav a:hover { background: var(--panel-alto); color: var(--tinta); }
.nav a.activa { background: var(--panel-alto); color: var(--cian); }
.yo { display: flex; align-items: center; gap: .75rem; font-size: .82rem; color: var(--tinta-2); }
.yo a { color: var(--cian); text-decoration: none; }
.yo a:hover { text-decoration: underline; }

/* ── Contenido ─────────────────────────────────────────────────────── */
.contenido { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1rem 3rem; }
h1 { font-size: 1.55rem; margin: .2rem 0 .3rem; letter-spacing: -.01em; }
h2 {
    font-size: .82rem; margin: 2.2rem 0 .7rem; text-transform: uppercase;
    letter-spacing: .16em; color: var(--tinta-2); font-family: var(--mono); font-weight: 600;
}
h3 { font-size: 1rem; margin: 0 0 .5rem; }
.sub { color: var(--tinta-2); margin: 0 0 1.4rem; }
.nota { color: var(--tinta-2); font-size: .88rem; max-width: 68ch; }
.lista { max-width: 70ch; color: var(--tinta-2); }
.lista b, .lista code { color: var(--tinta); }
code {
    background: var(--panel-alto); padding: .1rem .35rem; border-radius: 4px;
    font-family: var(--mono); font-size: .88em; color: var(--cian);
}
a { color: var(--cian); }

/* ── Avisos ────────────────────────────────────────────────────────── */
/* Los modificadores llevan prefijo a- por un motivo concreto: la versión
   anterior usaba .aviso.ok / .aviso.error / .aviso.aviso, y esa última es
   equivalente a .aviso a secas — repetir una clase en un selector NO exige
   que el elemento la tenga dos veces. Capturaba todas las alertas y, por ir
   última, pisaba a las otras dos: TODOS los avisos salían ámbar, incluidos
   los de error. Con prefijo el choque de nombres es imposible. */
.aviso {
    padding: .75rem .95rem; border-radius: 8px; border-left: 3px solid;
    margin: 0 0 1rem; max-width: 74ch; background: var(--panel);
}
.aviso.a-ok    { border-color: var(--verde); color: var(--verde); }
.aviso.a-error { border-color: var(--rojo);  color: var(--rojo); }
.aviso.a-aviso { border-color: var(--ambar); color: var(--ambar); }

/* ── Tarjetas ──────────────────────────────────────────────────────── */
.tarjetas {
    display: grid; gap: 1rem; margin: 1rem 0 .5rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tarjeta {
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: 10px; padding: 1rem 1.1rem;
}
.tarjeta h2 {
    margin: 0 0 .45rem; font-size: .68rem; letter-spacing: .14em; color: var(--tinta-2);
}
.tarjeta .cifra {
    margin: 0; font-size: 1.9rem; font-weight: 600; line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.tarjeta .de { font-size: 1rem; color: var(--tinta-2); font-weight: 400; }
.tarjeta .pie-tarjeta { margin: .45rem 0 0; font-size: .8rem; color: var(--tinta-2); }
.tarjeta.mala .cifra { color: var(--rojo); }

/* ── Tarjetas de KPI ───────────────────────────────────────────────── */
.kpis {
    display: grid; gap: 1rem; margin: .8rem 0 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.kpi {
    background: var(--panel); border: 1px solid var(--linea);
    border-left: 3px solid var(--linea); border-radius: 10px; padding: .9rem 1.05rem;
}
.kpi h3 {
    margin: 0 0 .4rem; font-size: .82rem; font-weight: 500; color: var(--tinta-2);
    display: flex; align-items: center; gap: .4rem;
}
.kpi .codigo {
    background: var(--panel-alto); color: var(--cian); border-radius: 4px;
    padding: .08rem .34rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
}
.kpi .cifra {
    margin: 0; font-size: 1.72rem; font-weight: 600; line-height: 1.15;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kpi .meta { margin: .3rem 0 0; font-size: .8rem; color: var(--tinta-2); font-family: var(--mono); }
.kpi .sin-meta { font-style: italic; font-family: inherit; }
.kpi .marcas { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.kpi .fecha { font-size: .72rem; color: var(--tinta-2); margin-left: auto; font-family: var(--mono); }
.kpi .nota-kpi {
    margin: .55rem 0 0; font-size: .76rem; color: var(--tinta-2);
    border-top: 1px solid var(--linea); padding-top: .45rem;
}

/* Semáforo en el borde izquierdo, no en el fondo: un fondo de color hace
   ilegible la cifra, que es lo único que la tarjeta tiene que comunicar. */
.kpi-verde    { border-left-color: var(--verde); }
.kpi-amarillo { border-left-color: var(--ambar); }
.kpi-rojo     { border-left-color: var(--rojo); }
.kpi-gris     { border-left-color: var(--linea); }
.kpi-rojo .cifra { color: var(--rojo); }

.marca-chip, .marca.parcial, .marca.dudoso { }
.marcas .marca {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .12rem .42rem; border-radius: 4px; font-weight: 600; font-family: var(--mono);
}
.marcas .marca.parcial { background: rgba(251, 191, 36, .14); color: var(--ambar); }
.marcas .marca.dudoso  { background: rgba(255, 107, 107, .14); color: var(--rojo); }

/* ── Gráficas ──────────────────────────────────────────────────────── */
.graficas {
    display: grid; gap: 1rem; margin: .8rem 0 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.grafica {
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: 10px; padding: 1rem 1.1rem;
}
.grafica h3 {
    margin: 0 0 .7rem; font-size: .82rem; color: var(--tinta-2); font-weight: 500;
    display: flex; align-items: center; gap: .4rem;
}
.grafica h3 .codigo {
    background: var(--panel-alto); color: var(--cian); border-radius: 4px;
    padding: .08rem .34rem; font-family: var(--mono); font-size: .72rem;
}
.grafica svg { display: block; width: 100%; height: auto; }
.pie-grafica { margin: .6rem 0 0; font-size: .78rem; color: var(--tinta-2); }

/* ── Tablas ────────────────────────────────────────────────────────── */
.tabla-scroll {
    overflow-x: auto; border: 1px solid var(--linea);
    border-radius: 10px; background: var(--panel);
}
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { padding: .58rem .8rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla th {
    background: var(--panel-alto); font-weight: 600; white-space: nowrap;
    font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
    letter-spacing: .08em; color: var(--tinta-2);
}
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: rgba(34, 211, 238, .04); }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }

.estado-ok         { color: var(--verde); font-weight: 600; }
.estado-con_avisos { color: var(--ambar); font-weight: 600; }
.estado-fallida    { color: var(--rojo); font-weight: 600; }
.estado-corriendo  { color: var(--tinta-2); }
.sev-bloqueante { color: var(--rojo); font-weight: 600; }
.sev-aviso      { color: var(--ambar); }
.sev-info       { color: var(--tinta-2); }
.fila-critica td { background: var(--rojo-suave); }

/* ── Formularios ───────────────────────────────────────────────────── */
.formulario { max-width: 23rem; }
label { display: block; margin: .95rem 0 .28rem; font-size: .84rem; color: var(--tinta-2); }
input[type=text], input[type=email], input[type=password], input[type=date], select {
    width: 100%; padding: .58rem .7rem; font-size: 1rem; font-family: inherit;
    border: 1px solid var(--linea); border-radius: 8px;
    background: var(--fondo); color: var(--tinta);
}
input:focus, select:focus { outline: 2px solid var(--cian); outline-offset: 1px; border-color: var(--cian); }
input[type=checkbox] { width: auto; accent-color: var(--cian); }
.boton {
    display: inline-block; margin-top: 1.3rem; padding: .62rem 1.5rem;
    font-size: 1rem; font-family: inherit; background: var(--azul); color: #fff;
    border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; font-weight: 500;
}
.boton:hover { background: #24499f; }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton.chico { margin-top: 0; padding: .42rem 1rem; font-size: .9rem; }

/* ── Exportar / recalcular ─────────────────────────────────────────── */
.exportar {
    display: inline-block; margin-left: .5rem; padding: .22rem .7rem;
    background: rgba(34, 211, 238, .1); color: var(--cian); text-decoration: none;
    border: 1px solid rgba(34, 211, 238, .35); border-radius: 6px;
    font-size: .8rem; font-weight: 600; white-space: nowrap; font-family: var(--mono);
}
.exportar:hover { background: rgba(34, 211, 238, .18); }

.recalcular {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: 10px; padding: .8rem 1.05rem; margin-bottom: 1rem;
}
.recalcular label { margin: 0; }
.recalcular input[type=date], .recalcular select { width: auto; padding: .4rem .55rem; font-size: .9rem; }
.recalcular .nota { flex: 1 1 15rem; font-size: .78rem; }

/* Salida cruda del ETL. Se muestra tal cual la imprime el cron: si el
   panel la resumiera, el resumen sería otra fuente de verdad que mantener. */
.salida {
    background: #01030a; color: #cfe3ea; padding: .95rem 1.05rem; border-radius: 8px;
    border: 1px solid var(--linea); font-family: var(--mono);
    font-size: .8rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap;
    word-break: break-word; max-height: 32rem; overflow-y: auto;
}

/* ── Plegable ──────────────────────────────────────────────────────── */
.plegable {
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: 10px; padding: .7rem 1.05rem; margin-bottom: 1rem;
}
.plegable summary { cursor: pointer; font-size: .9rem; color: var(--cian); }
.plegable[open] summary { margin-bottom: .9rem; }
.plegable .tabla-scroll { margin-bottom: 1rem; }

/* ── Login ─────────────────────────────────────────────────────────── */
.login {
    max-width: 24rem; margin: 4rem auto; background: var(--panel);
    border: 1px solid var(--linea); border-radius: 14px; padding: 2.2rem;
}
.login .simbolo { width: 60px; height: 60px; display: block; margin: 0 auto 1.1rem; }
.login h1 { font-size: 1.35rem; margin: 0; font-weight: 600; text-align: center; }
.login .sub {
    margin: .45rem 0 1.6rem; font-size: .6rem; text-align: center;
    font-family: var(--mono); text-transform: uppercase; letter-spacing: .30em;
    color: var(--cian);
}
.login form { max-width: none; }
.login .boton { width: 100%; }

/* ── Pie ───────────────────────────────────────────────────────────── */
.pie {
    max-width: 1180px; margin: 0 auto; padding: 1.6rem 1rem 3rem;
    color: var(--tinta-2); font-size: .78rem; border-top: 1px solid var(--linea);
}

@media (max-width: 640px) {
    .barra-in { gap: .6rem; }
    .nav { order: 3; width: 100%; }
    .contenido { padding: 1.2rem .8rem 2.5rem; }
}