/* =====================================================================
   RA.LIC.W - hoja de estilos del portal
   Tema "Deep Space", alineado con https://mn2.hablaip.com

   Dos familias de color, y no se mezclan:

   1) IDENTIDAD (interfaz): cian #00d4ff y violeta #7c3aed. Marca, enlaces,
      botones, foco, bordes y glows. El cian NO se usa nunca para datos:
      con L 0.80 se sale de la banda de luminosidad para superficie oscura.

   2) SERIES (datos): paleta categorica de 8 slots validada contra la
      superficie #0d0d1a (banda de luminosidad, piso de croma, separacion
      CVD >= 8, piso de vision normal >= 15 y contraste >= 3:1).
      El ORDEN de los slots es el mecanismo de seguridad para daltonismo,
      no decoracion: no reordenar sin volver a validar.
   ===================================================================== */
:root {
    color-scheme: dark;

    /* --- superficies e ink --- */
    --fondo:        #08080f;
    --panel:        #0d0d1a;
    --panel-2:      #12122a;
    --panel-3:      #171733;
    --ink:          #e8eaf0;
    --ink-2:        #9aa2b5;
    --muted:        #6b7280;
    --dim:          #3a3f52;

    /* --- identidad --- */
    --cian:         #00d4ff;
    --cian-tenue:   rgba(0, 212, 255, .14);
    --cian-glow:    0 0 28px rgba(0, 212, 255, .30);
    --violeta:      #7c3aed;
    --borde:        rgba(0, 212, 255, .14);
    --borde-fuerte: rgba(0, 212, 255, .28);

    /* --- series de datos (slots 1..8, orden validado) --- */
    --s1: #9085e9;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;
    --s5: #d55181;  --s6: #3987e5;  --s7: #008300;  --s8: #e66767;

    /* --- estado (nunca se reutilizan como serie) --- */
    --bueno:    #0ca30c;
    --aviso:    #fab219;
    --serio:    #ec835a;
    --critico:  #ff4d5e;

    /* --- cromo de graficos --- */
    --rejilla:  rgba(0, 212, 255, .08);
    --eje:      rgba(0, 212, 255, .20);

    --radio: 12px;
    --radio-chico: 9px;
    --sombra: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 212, 255, .04);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--fondo);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* nebulosa de fondo: fija, detras de todo, sin capturar clics */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 212, 255, .07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 95% 100%, rgba(124, 58, 237, .07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

body > * { position: relative; z-index: 1; }

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

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1rem; }
h3 { font-size: .9rem; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cian); }

/* --- barra superior -------------------------------------------------- */
.barra {
    background: rgba(13, 13, 26, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra .interior {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 1.1rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 56px;
}

.marca {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--cian);
    text-shadow: var(--cian-glow);
    display: flex;
    align-items: center;
    gap: .55rem;
}
.marca:hover { text-decoration: none; }
.marca .punto {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--cian-tenue);
    border: 1px solid var(--borde);
    box-shadow: var(--cian-glow);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
}

.menu { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.menu a {
    padding: .4rem .75rem;
    border-radius: var(--radio-chico);
    color: var(--ink-2);
    font-weight: 500;
    border: 1px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.menu a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.menu a.activo {
    background: var(--cian-tenue);
    border-color: var(--borde);
    color: var(--cian);
}

.sesion { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .85rem; }

/* --- contenedor ------------------------------------------------------ */
.contenido { max-width: 1480px; margin: 0 auto; padding: 1.3rem 1.1rem 4rem; }

.encabezado {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.encabezado .sub { color: var(--ink-2); font-size: .875rem; }

/* --- avisos ---------------------------------------------------------- */
.aviso {
    padding: .65rem .85rem; border-radius: var(--radio-chico); margin-bottom: 1rem;
    border: 1px solid var(--borde); background: var(--panel); font-size: .9rem;
}
.aviso.ok    { border-left: 3px solid var(--bueno); }
.aviso.error {
    border: 1px solid rgba(255, 77, 94, .28);
    background: rgba(255, 77, 94, .08);
    color: var(--critico);
}
.aviso.nota  { border-left: 3px solid var(--aviso); color: var(--ink-2); }

/* --- paneles --------------------------------------------------------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: 1rem;
}
.panel > header {
    padding: .75rem .95rem;
    border-bottom: 1px solid var(--borde);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.panel > header h2 { margin: 0; }
/* frase explicativa: sin versalitas, que aqui van oraciones completas */
.panel > header .sub { color: var(--muted); font-size: .76rem; font-weight: 400; }

/* la version corta tipo etiqueta si va en versalitas */
.panel > header span.sub, .panel > header a.sub {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}
.panel .cuerpo { padding: .95rem; }
.panel .cuerpo.sin-relleno { padding: 0; }

.rejilla { display: grid; gap: 1rem; }
.rejilla.dos  { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* --- tarjetas KPI ---------------------------------------------------- */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: .8rem;
    margin-bottom: 1.1rem;
}
.tarjeta {
    background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 70%);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .85rem .95rem;
    box-shadow: var(--sombra);
    display: block;
    color: inherit;
    transition: border-color .18s, transform .15s, box-shadow .18s;
}
a.tarjeta:hover {
    text-decoration: none;
    border-color: var(--borde-fuerte);
    transform: translateY(-2px);
    box-shadow: var(--sombra), 0 0 24px rgba(0, 212, 255, .12);
}
.tarjeta .rotulo {
    color: var(--muted); font-size: .7rem; text-transform: uppercase;
    letter-spacing: .08em; font-weight: 700;
}
.tarjeta .valor {
    font-size: 2rem; font-weight: 700; letter-spacing: -.03em;
    margin-top: .15rem; color: var(--ink);
}
.tarjeta .pie { color: var(--muted); font-size: .76rem; }
.tarjeta .delta { font-size: .78rem; font-weight: 650; }
.delta.sube  { color: var(--bueno); }
.delta.baja  { color: var(--critico); }
.delta.plano { color: var(--muted); }

/* --- tablas ---------------------------------------------------------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla th, .tabla td { padding: .55rem .65rem; text-align: left; vertical-align: top; }
.tabla thead th {
    color: var(--muted); font-weight: 700; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .07em;
    border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla tbody tr { border-bottom: 1px solid rgba(255, 255, 255, .04); }
.tabla tbody tr:hover { background: var(--panel-2); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .principal { font-weight: 550; }
.tabla .secundario { color: var(--ink-2); font-size: .82rem; }
.desborde { overflow-x: auto; }

/* --- chips / etiquetas ----------------------------------------------- */
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .14rem .55rem; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--borde);
    font-size: .74rem; color: var(--ink-2); white-space: nowrap;
}
.chip .bolita { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip.fuerte { font-weight: 650; color: var(--cian); border-color: var(--borde-fuerte); }

.dias { font-variant-numeric: tabular-nums; font-weight: 650; }
.dias.hoy    { color: var(--critico); }
.dias.pronto { color: var(--aviso); }
.dias.lejos  { color: var(--ink-2); }
.dias.pasado { color: var(--dim); font-weight: 400; }

/* --- formularios ----------------------------------------------------- */
label {
    font-size: .7rem; color: var(--muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    display: block; margin-bottom: .28rem;
}

input[type=text], input[type=search], input[type=password], input[type=date],
input[type=number], input[type=color], select, textarea {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--panel-2);
    color: var(--ink);
    font: inherit;
    font-size: .875rem;
    transition: border-color .18s, box-shadow .18s;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--cian);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, .12);
}
input[type=color] { padding: .15rem; height: 34px; cursor: pointer; }
input[type=checkbox] { accent-color: var(--cian); }
textarea { min-height: 74px; resize: vertical; }

.boton {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .85rem; border-radius: var(--radio-chico);
    border: 1px solid var(--borde); background: var(--panel-2); color: var(--ink);
    font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; white-space: nowrap;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .15s;
}
.boton:hover {
    background: var(--panel-3); border-color: var(--borde-fuerte);
    color: var(--ink); text-decoration: none;
}
.boton.primario {
    background: var(--cian); border-color: var(--cian); color: #08080f;
    font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 0 18px rgba(0, 212, 255, .30);
}
.boton.primario:hover {
    background: #38dfff; box-shadow: 0 0 30px rgba(0, 212, 255, .5);
    transform: translateY(-1px);
}
.boton.peligro { color: var(--critico); border-color: rgba(255, 77, 94, .28); }
.boton.peligro:hover { background: rgba(255, 77, 94, .10); border-color: var(--critico); }
.boton.chico { padding: .26rem .55rem; font-size: .78rem; }
.boton:disabled { opacity: .45; cursor: default; }

.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.filtros .ancho { grid-column: 1 / -1; }
.filtros .acciones { display: flex; align-items: flex-end; gap: .5rem; }

.linea { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.linea.fin { justify-content: flex-end; }

/* --- barras horizontales (magnitud + identidad) ---------------------- */
.barras { display: grid; gap: .5rem; }
.barra-fila { display: grid; grid-template-columns: 1fr auto; gap: .18rem .6rem; align-items: center; }
.barra-fila .etiqueta {
    font-size: .82rem; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-fila .cantidad {
    font-size: .82rem; font-variant-numeric: tabular-nums;
    color: var(--ink-2); font-weight: 650;
}
.barra-fila .pista {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.barra-fila .relleno {
    height: 100%;
    border-radius: 0 4px 4px 0;   /* extremo redondeado, anclado a la base */
    min-width: 2px;
}

/* --- calendario de cierres ------------------------------------------- */
.calendario { display: flex; gap: 3px; align-items: flex-end; height: 92px; }
.calendario .dia { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 2px; }
.calendario .col { background: var(--s1); border-radius: 4px 4px 0 0; min-height: 2px; }
.calendario .col.mias { background: var(--s2); }
.calendario-pie { display: flex; gap: 3px; margin-top: .3rem; }
.calendario-pie div { flex: 1; text-align: center; font-size: .68rem; color: var(--muted); }

/* --- leyenda --------------------------------------------------------- */
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--ink-2); }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- grafico de serie ------------------------------------------------ */
/* el SVG escala de forma uniforme con el ancho: sin este tope, en un panel
   a pagina completa el grafico crece hasta el doble de alto que en el tablero */
.grafico { position: relative; max-width: 920px; }
.grafico svg { display: block; width: 100%; height: auto; }
.grafico .gr-linea { fill: none; stroke-width: 2; }
.grafico .gr-area  { opacity: .16; }
.grafico .gr-grid  { stroke: var(--rejilla); stroke-width: 1; }
.grafico .gr-eje   { stroke: var(--eje); stroke-width: 1; }
.grafico .gr-tick  { fill: var(--muted); font-size: 12px; }
.grafico .gr-cruz  { stroke: var(--borde-fuerte); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .gr-punto { stroke: var(--panel); stroke-width: 2; }

.globo {
    position: absolute; pointer-events: none; z-index: 5;
    background: var(--panel-2); border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .7);
    padding: .5rem .65rem; font-size: .8rem; min-width: 140px;
    transform: translate(-50%, -110%); opacity: 0; transition: opacity .08s;
}
.globo.visible { opacity: 1; }
.globo .titulo { font-weight: 650; margin-bottom: .25rem; color: var(--ink); }
.globo .fila { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.globo .fila span { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); }
.globo .fila b { font-variant-numeric: tabular-nums; color: var(--ink); }
.globo i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* --- paginacion ------------------------------------------------------ */
.paginacion { display: flex; gap: .35rem; align-items: center; justify-content: center; padding: .85rem; flex-wrap: wrap; }
.paginacion .info { color: var(--ink-2); font-size: .82rem; margin-right: .5rem; }

/* --- login ----------------------------------------------------------- */
.login-plano { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-caja { width: 100%; max-width: 420px; }
.login-caja .panel {
    margin: 0;
    border-radius: 18px;
    padding: .4rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 212, 255, .05);
}
.login-caja .cuerpo { padding: 1.6rem 1.7rem 1.8rem; }
.login-caja .titulo { text-align: center; margin-bottom: 1.8rem; }
.login-caja .titulo .icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--cian-tenue); border: 1px solid var(--borde);
    box-shadow: var(--cian-glow);
    font-size: 1.5rem; color: var(--cian);
    margin-bottom: .9rem;
}
.login-caja .titulo h1 {
    font-size: 1.5rem; font-weight: 800; color: var(--cian);
    text-shadow: var(--cian-glow); margin: 0;
}
.login-caja .titulo .sub {
    font-size: .74rem; color: var(--muted);
    letter-spacing: .1em; text-transform: uppercase; margin-top: .3rem;
}
.login-pie { text-align: center; margin-top: 1.3rem; font-size: .72rem; color: var(--dim); }

/* halos decorativos del login */
.halo { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .13; }
.halo.uno { width: 200px; height: 200px; top: -70px; left: -70px; background: var(--cian); filter: blur(70px); }
.halo.dos { width: 240px; height: 240px; bottom: -90px; right: -70px; background: var(--violeta); filter: blur(85px); }

/* --- modal ----------------------------------------------------------- */
html.con-modal { overflow: hidden; }

dialog.modal {
    width: min(1180px, 94vw);
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--borde-fuerte);
    border-radius: 14px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .75), 0 0 60px rgba(0, 212, 255, .08);
    overflow: auto;
}
dialog.modal::backdrop {
    background: rgba(4, 4, 10, .72);
    backdrop-filter: blur(3px);
}

.modal-barra {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem .7rem .5rem 1rem;
    background: rgba(13, 13, 26, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde);
}
.modal-barra .pista {
    font-size: .68rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
}
.modal-cuerpo { padding: 1rem 1.1rem 1.4rem; }
.modal-cuerpo .encabezado { margin-bottom: .9rem; }
.modal-cuerpo .panel { background: var(--panel-2); }

.modal-cargando { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.girando { display: inline-block; color: var(--cian); animation: girar 1.1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .girando { animation: none; }
}

/* --- linea de tiempo (auditoria de una licitacion) -------------------- */
.tiempo { display: grid; gap: .1rem; }
.tiempo .hito {
    display: grid; grid-template-columns: 130px 1fr; gap: .7rem;
    padding: .45rem 0; border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.tiempo .cuando { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.tiempo .que b { color: var(--ink); }
.tiempo .flecha { color: var(--muted); margin: 0 .3rem; }

/* --- varios ---------------------------------------------------------- */
.vacio { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; color: var(--ink-2); }
.apagado { color: var(--muted); }
.pequeno { font-size: .8rem; }
.definiciones { display: grid; grid-template-columns: auto 1fr; gap: .35rem .95rem; font-size: .875rem; }
.definiciones dt {
    color: var(--muted); font-weight: 650; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em; padding-top: .12rem;
}
.definiciones dd { margin: 0; }
.medidor { height: 6px; background: rgba(255, 255, 255, .05); border-radius: 3px; overflow: hidden; }
.medidor > div {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--cian), var(--violeta));
}
details > summary { color: var(--ink-2); }
details > summary:hover { color: var(--cian); }