/*
 * Identidad visual: colores tomados del logo oficial de la CNBV
 * (cnbv.org) y de DISES, división de Servicio Social bajo la que
 * opera este sistema. Ver README.md, sección "Identidad visual".
 */
:root {
    --marca-azul: #2066ae;
    --marca-azul-oscuro: #164b7e;
    --marca-verde: #4a9c3e;
    --marca-texto: #3c3c3c;
}

/*
 * Fondo de página con un tinte de la marca en vez de blanco puro. Las TARJETAS se dejan blancas
 * a propósito: los colores del panel y del odontograma se validaron para contrastar sobre blanco,
 * y teñir la superficie de las tarjetas rompería ese contraste.
 */
body.bg-light {
    background-color: #eef2f7 !important;
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(32, 102, 174, .10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(74, 156, 62, .08), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
}

.card {
    border: 1px solid rgba(11, 11, 11, .07);
    box-shadow: 0 1px 2px rgba(16, 40, 70, .04), 0 4px 14px rgba(16, 40, 70, .05) !important;
}

.navbar.bg-primary {
    background-color: var(--marca-azul) !important;
    /* Degradado sutil hacia el azul oscuro del logo: da profundidad sin ensuciar el color. */
    background-image: linear-gradient(100deg, var(--marca-azul) 0%, var(--marca-azul-oscuro) 100%);
    box-shadow: 0 2px 10px rgba(16, 40, 70, .12);
}

/* Franja fina con el verde del logo, para que el borde del navbar no sea un corte plano. */
.navbar.bg-primary::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--marca-verde), rgba(74, 156, 62, .25));
}
.navbar.bg-primary { position: relative; }

.btn-primary {
    --bs-btn-bg: var(--marca-azul);
    --bs-btn-border-color: var(--marca-azul);
    --bs-btn-hover-bg: var(--marca-azul-oscuro);
    --bs-btn-hover-border-color: var(--marca-azul-oscuro);
    --bs-btn-active-bg: var(--marca-azul-oscuro);
    --bs-btn-active-border-color: var(--marca-azul-oscuro);
    --bs-btn-disabled-bg: var(--marca-azul);
    --bs-btn-disabled-border-color: var(--marca-azul);
}

.btn-outline-primary {
    --bs-btn-color: var(--marca-azul);
    --bs-btn-border-color: var(--marca-azul);
    --bs-btn-hover-bg: var(--marca-azul);
    --bs-btn-hover-border-color: var(--marca-azul);
    --bs-btn-active-bg: var(--marca-azul);
    --bs-btn-active-border-color: var(--marca-azul);
}

.text-primary {
    color: var(--marca-azul) !important;
}

.list-group-item.active {
    background-color: var(--marca-azul);
    border-color: var(--marca-azul);
}

.navbar-nav .nav-link.active {
    color: #fff !important;
    border-bottom: 2px solid var(--marca-verde);
}

.nav-pills .nav-link.active {
    background-color: var(--marca-azul);
}

/* Logo institucional: la imagen trae fondo blanco, se aisla en una placa */
.marca-logo {
    background: #fff;
    border-radius: .5rem;
    padding: .25rem .5rem;
    display: inline-flex;
    align-items: center;
}

.marca-logo img {
    display: block;
    height: 32px;
    width: auto;
}

.marca-dises {
    height: 22px;
    width: auto;
    opacity: .85;
}

/*
 * Gráficos en HTML/CSS puro, sin librerías ni CDNs (requisito offline). Los comparten el panel de
 * métricas (Fase 8) y los reportes de la EBV. Los colores se validaron contra la superficie blanca
 * de las tarjetas: una sola tonalidad para las series de magnitud, la paleta de estado reservada
 * para el triaje y los tres categóricos solo donde hay identidad real (sexo).
 */
.panel-viz {
    --serie: #2066ae;
    --serie-suave: #d3e3f3;
    /*
     * Orden categórico fijo, para identidad (no para magnitud). Se asigna siempre en este orden y
     * nunca se cicla: una serie 4 no existe, se agrupa en "Otros". Validado contra la superficie
     * blanca de las tarjetas — separación para daltonismo ΔE 9.2 en el peor par adyacente, y el
     * par 1↔2, que es el que más se usa, ΔE 24.7.
     */
    --cat-1: #2a78d6;
    --cat-2: #eb6834;
    --cat-3: #1baf7a;
    /* El sexo usa ese mismo orden: son alias, no colores nuevos. */
    --sexo-1: var(--cat-1);
    --sexo-2: var(--cat-2);
    --sexo-3: var(--cat-3);
    --triaje-rojo: #d03b3b;
    --triaje-amarillo: #fab219;
    --triaje-verde: #0ca30c;
    --triaje-negro: #3c3c3c;
    --triaje-sin: #adb5bd;
    --ink-muted: #6c757d;
    --grid: #e9ecef;
}
.kpi-tile { border: 1px solid rgba(11,11,11,.08); border-radius: .5rem; padding: .85rem 1rem; background: #fff; height: 100%; }
.kpi-label { font-size: .75rem; color: var(--ink-muted); display: block; }
.kpi-valor { font-size: 1.75rem; font-weight: 600; line-height: 1.15; }
.kpi-pie { font-size: .75rem; color: var(--ink-muted); }
.kpi-delta-sube { color: #006300; font-weight: 600; }
.kpi-delta-baja { color: #b02a37; font-weight: 600; }

.viz-barras { display: flex; flex-direction: column; gap: .35rem; }
.viz-fila { display: flex; align-items: center; gap: .5rem; }
.viz-etiqueta { flex: 0 0 40%; font-size: .8rem; color: #212529; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-pista { flex: 1; background: var(--grid); border-radius: 4px; height: 12px; overflow: hidden; }
.viz-barra { display: block; height: 100%; background: var(--serie); border-radius: 0 4px 4px 0; }
.viz-valor { flex: 0 0 auto; font-size: .8rem; font-variant-numeric: tabular-nums; color: #212529; min-width: 3.5rem; text-align: right; }

.viz-dias { display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 1px solid var(--grid); padding-bottom: 0; }
.viz-dia { flex: 1; min-width: 3px; background: var(--serie); border-radius: 4px 4px 0 0; }
.viz-dia.cero { background: var(--serie-suave); }
.viz-dias-etiquetas { display: flex; gap: 2px; margin-top: .25rem; }
.viz-dias-etiquetas span { flex: 1; min-width: 3px; font-size: .65rem; color: var(--ink-muted); text-align: center; overflow: hidden; white-space: nowrap; }
/* En pantallas angostas las etiquetas por barra no caben: se muestra solo el rango. */
.viz-dias-rango { display: none; justify-content: space-between; font-size: .7rem; color: var(--ink-muted); margin-top: .35rem; }
@media (max-width: 575.98px) {
    .viz-dias-etiquetas { display: none; }
    .viz-dias-rango { display: flex; }
}

/*
 * Tablero de la EBV. Los gráficos se dibujan en SVG desde PHP: quedan correctos sin JavaScript
 * —importa para imprimir y para un teléfono en terreno— y el JS solo agrega la capa de hover.
 */
.kpi-hero { border: 1px solid rgba(11,11,11,.08); border-radius: .5rem; background: #fff; padding: 1.25rem 1.4rem; height: 100%; }
.kpi-hero .kpi-label { font-size: .8rem; }
.kpi-hero-valor { font-size: 3.25rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--marca-azul-oscuro); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .kpi-hero-valor { font-size: 2.5rem; } }

/* Medidor de una sola cifra: la barra es el dato, el número al lado es el que se lee. */
.viz-medidor { height: 10px; border-radius: 5px; background: var(--grid); overflow: hidden; }
.viz-medidor span { display: block; height: 100%; background: var(--serie); border-radius: 5px; }

.viz-grafico { position: relative; }
.viz-grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
/*
 * El texto de un SVG escala con el viewBox. Topar el ancho evita que en un monitor grande las
 * etiquetas del eje salgan a 17px, y la consulta de abajo las compensa en un teléfono, donde el
 * mismo 11px terminaría en 5px. Sin esto el gráfico es ilegible en uno de los dos extremos.
 */
#grafico-dias svg { max-width: 760px; margin-inline: auto; }
.viz-eje { font-size: 11px; fill: var(--ink-muted); }
@media (max-width: 575.98px) { .viz-eje { font-size: 20px; } }
.viz-rejilla { stroke: var(--grid); stroke-width: 1; }
.viz-linea { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-punto { stroke: #fff; stroke-width: 2; }
.viz-col { transition: opacity .12s; }
.viz-zona:hover ~ .viz-col, .viz-zona { cursor: default; }
.viz-grafico.activo .viz-col { opacity: .45; }
.viz-grafico.activo .viz-col.resaltada { opacity: 1; }
.viz-guia { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.viz-grafico.activo .viz-guia { opacity: .6; }

/* Un solo globo por gráfico, movido con JS. Sale del flujo para no empujar el layout. */
.viz-tip {
    position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -100%);
    background: #fff; border: 1px solid rgba(11,11,11,.12); border-radius: .4rem;
    box-shadow: 0 4px 14px rgba(16,40,70,.14); padding: .4rem .6rem; font-size: .78rem;
    white-space: nowrap; z-index: 5; transition: opacity .12s;
}
.viz-tip.visible { opacity: 1; }
.viz-tip b { font-variant-numeric: tabular-nums; }
.viz-tip .punto { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: .35rem; }

.viz-leyenda-alta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--ink-muted); }
.viz-leyenda-alta .punto { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: .35rem; vertical-align: -1px; }

/* Cabeceras ordenables: el cursor y la flecha son la única pista de que se puede tocar. */
.tabla-orden th[data-orden] { cursor: pointer; user-select: none; white-space: nowrap; }
.tabla-orden th[data-orden]:hover { color: var(--marca-azul); }
.tabla-orden th[data-orden]::after { content: '\2195'; opacity: .28; margin-left: .3rem; font-size: .85em; }
.tabla-orden th[data-orden].asc::after { content: '\2191'; opacity: .9; }
.tabla-orden th[data-orden].desc::after { content: '\2193'; opacity: .9; }

.viz-segmentos { display: flex; gap: 2px; height: 22px; border-radius: 4px; overflow: hidden; }
.viz-segmentos span { display: block; }
.viz-leyenda { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; font-size: .8rem; }
.viz-leyenda span.punto { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: .3rem; vertical-align: -1px; }

.dropdown-menu form button.dropdown-item {
    background: none;
    border: 0;
    width: 100%;
    text-align: start;
}