/* Paleta tomada de discipulaccion (login.php/index.php): navy institucional + verde de acento. */
:root {
    --marca-navy: #0D2137;
    --marca-navy2: #1B3A6B;
    --marca-verde: #1FAB50;
    --marca-verde-oscuro: #178A3E;
    --marca-azul: #2980B9;
    --grid: #e9ecef;
    --serie: var(--marca-navy2);
}

body { background: #F0F2F5; }

.navbar.bg-primary { background-color: var(--marca-navy) !important; }
.nav-link.active { color: #fff !important; }

.btn-primary {
    background-color: var(--marca-verde);
    border-color: var(--marca-verde);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--marca-verde-oscuro);
    border-color: var(--marca-verde-oscuro);
}

.btn-outline-primary {
    color: var(--marca-navy2);
    border-color: var(--marca-navy2);
}
.btn-outline-primary:hover {
    background-color: var(--marca-navy2);
    border-color: var(--marca-navy2);
}

a { color: var(--marca-navy2); }

.form-control:focus, .form-select:focus {
    border-color: var(--marca-verde);
    box-shadow: 0 0 0 0.2rem rgba(31, 171, 80, 0.2);
}

/* Tarjeta de login, mismo estilo que discipulaccion: cabecera navy con filete verde. */
.login-header {
    background: linear-gradient(135deg, var(--marca-navy2) 0%, var(--marca-navy) 100%);
    border-bottom: 3px solid var(--marca-verde);
}

/* Barras horizontales de los reportes (Fase 6): una sola tonalidad, son series de magnitud. */
.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; }

/*
 * Tablero de reportes (Fase 6). 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 el hover.
 * Colores categóricos separados del `--serie` de arriba: orden fijo por identidad (nunca cicla).
 */
.panel-viz {
    --serie-suave: #cfe0d6;
    --cat-1: var(--marca-navy2);
    --cat-2: #E08A2C;
    --cat-3: var(--marca-verde);
    --sexo-1: var(--cat-1);
    --sexo-2: var(--cat-2);
    --ink-muted: #6c757d;
}

.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-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-navy2); 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-navy2); }
.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; }