/* ============================================================================
   Portal Familias — hoja unica de estilos propios (16/9/2026).

   Antes esto vivia repartido en <style> de 9 vistas + ~120 style="" sueltos, y
   la paleta se habia desviado (tres grises, dos verdes, dos rojos para el mismo
   rol; el login con 'Segoe UI' y el resto con la pila de Bootstrap). Aca queda
   UNA definicion de cada cosa, sobre variables.

   Reglas (ver GUIA_DISENO_UI.md en claude-memoria):
   - Un solo acento: el navy. La accion secundaria es ausencia de color.
   - Los semanticos (ok/peligro/aviso) son los de Bootstrap, una sola vez.
   - Radio 12px en tarjetas, 8px en controles, 6px en detalles.
   - Cifras con tabular-nums: las columnas de importes no bailan.
   Las plantillas PDF (Views/<controlador>/Modelos/<CUIT>, PDFEstadoCuenta, PDFCuentaCorriente) NO
   usan esta hoja: wkhtmltox renderiza el HTML suelto, su CSS va inline.
   OJO: nunca escribir asterisco seguido de barra dentro de un comentario (ni un path con comodin): lo cierra
   antes de tiempo y el navegador descarta la regla siguiente entera (paso el 16/9: se
   perdio :root y con el todas las variables).
   ========================================================================== */

:root {
    /* Tipografia: la misma pila del sistema en TODAS las pantallas (el login
       declaraba 'Segoe UI', Arial y cambiaba la letra al entrar). */
    --pf-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

    /* Acento unico de la casa: el navy, en cuatro roles. En claro los cuatro son el mismo
       color; en oscuro se separan (un boton navy sobre fondo navy desaparece). */
    --pf-barra: #1e2a38;                /* sidebar, navbar, bottom-nav */
    --pf-barra-rgb: 30, 42, 56;
    --pf-hero: #1e2a38;                 /* banda del total, cabecera del login */
    --pf-hero-texto: #fff;
    --pf-titulo: #1e2a38;               /* titulos, texto destacado, iconos */
    --pf-accion: #1e2a38;               /* boton primario */
    --pf-accion-hover: #2d3f55;
    --pf-accion-activo: #16202b;
    --pf-accion-texto: #fff;
    --pf-ring: rgba(30, 42, 56, .15);
    --pf-ring-fuerte: rgba(30, 42, 56, .25);
    --pf-acceso-fondo: #16202b;         /* fondo de las pantallas de acceso */
    --pf-chip-fondo: #e9edf2;
    --pf-aviso-nota: #98844a;

    /* Superficies (elevacion por luminosidad, sin gradientes) */
    --pf-fondo: #f4f6f9;
    --pf-superficie: #fff;
    --pf-superficie-2: #f8f9fa;
    --pf-superficie-3: #f1f3f5;
    --pf-borde: #e4e7eb;
    --pf-borde-fuerte: #dee2e6;

    /* Texto: tres niveles de enfasis y nada mas */
    --pf-texto: #212529;
    --pf-texto-2: #495057;
    --pf-mudo: #6c757d;
    --pf-mudo-2: #adb5bd;
    --pf-mudo-sobre-navy: #8899aa;      /* texto secundario sobre fondo navy */

    /* Semanticos: los de Bootstrap 5, y sus variantes sobre navy / de fondo */
    --pf-ok: #198754;
    --pf-ok-fondo: #e8f4ee;
    --pf-ok-sobre-navy: #7fc8a9;
    --pf-peligro: #dc3545;
    --pf-aviso: #856404;
    --pf-aviso-fondo: #fff8e1;
    --pf-aviso-suave: #6c5a1e;
    --pf-aviso-suave-fondo: #fbf7ec;
    --pf-aviso-sobre-navy: #d7b989;

    /* Forma */
    --pf-radio-tarjeta: 12px;
    --pf-radio: 8px;
    --pf-radio-chico: 6px;
    --pf-sombra-tarjeta: 0 1px 6px rgba(0, 0, 0, .08);
    --pf-check-svg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27m6 10 3 3 6-6%27/%3e%3c/svg%3e");
    --pf-sombra-flotante: 0 8px 24px rgba(0, 0, 0, .35);
    --pf-navbar-alto: 56px;
    --pf-bottomnav-alto: 70px;

    /* Bootstrap toma estos tokens: links y fuente al acento de la casa */
    --bs-body-font-family: var(--pf-font);
    --bs-link-color-rgb: 30, 42, 56;
    --bs-link-hover-color-rgb: 45, 63, 85;
}

/* ---------------------------------------------------------- Modo oscuro -- */
/* tema.js pone data-bs-theme en <html> (auto/claro/oscuro, por dispositivo).
   Oscuro por ELEVACION, no por inversion: base ~L10, tarjeta ~L14, hero ~L18,
   nunca negro puro, acentos desaturados. Bootstrap toma sus propios tokens. */
[data-bs-theme="dark"] {
    --pf-fondo: #12181f;
    --pf-superficie: #1b2229;
    --pf-superficie-2: #222a33;
    --pf-superficie-3: #29323c;
    --pf-borde: #2c3540;
    --pf-borde-fuerte: #3a4551;
    --pf-texto: #e6ebf0;
    --pf-texto-2: #c3ccd6;
    --pf-mudo: #97a3b0;
    --pf-mudo-2: #6d7986;
    --pf-mudo-sobre-navy: #97a3b0;
    --pf-barra: #0f141a;
    --pf-barra-rgb: 15, 20, 26;
    --pf-hero: #243040;
    --pf-hero-texto: #eef2f6;
    --pf-titulo: #e6ebf0;
    --pf-accion: #b7c9de;
    --pf-accion-hover: #cbd9e8;
    --pf-accion-activo: #a3b8d0;
    --pf-accion-texto: #12181f;
    --pf-ring: rgba(183, 201, 222, .25);
    --pf-ring-fuerte: rgba(183, 201, 222, .4);
    --pf-acceso-fondo: #0c1117;
    --pf-chip-fondo: #2f3b4a;
    --pf-ok: #4cc38a;
    --pf-ok-fondo: rgba(76, 195, 138, .14);
    --pf-peligro: #e5636f;
    --pf-aviso: #e2c06a;
    --pf-aviso-fondo: rgba(226, 192, 106, .14);
    --pf-aviso-suave: #d9c48e;
    --pf-aviso-suave-fondo: rgba(217, 196, 142, .1);
    --pf-aviso-nota: #b3a072;
    --pf-sombra-tarjeta: 0 1px 6px rgba(0, 0, 0, .45);
    --pf-sombra-flotante: 0 8px 24px rgba(0, 0, 0, .6);
    --pf-check-svg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%2312181f%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27m6 10 3 3 6-6%27/%3e%3c/svg%3e");

    /* Bootstrap: que sus superficies sigan la misma escala */
    --bs-body-bg: var(--pf-fondo);
    --bs-body-color: var(--pf-texto);
    --bs-border-color: var(--pf-borde);
    --bs-secondary-color: var(--pf-mudo);
    --bs-secondary-bg: var(--pf-superficie-3);
    --bs-tertiary-bg: var(--pf-superficie-2);
    --bs-success: var(--pf-ok);
    --bs-success-rgb: 76, 195, 138;
    --bs-danger: var(--pf-peligro);
    --bs-danger-rgb: 229, 99, 111;
}
[data-bs-theme="dark"] .modal { --bs-modal-bg: #222a33; }
[data-bs-theme="dark"] .card-header { background: var(--pf-superficie); }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--pf-texto); --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-striped-color: var(--pf-texto); }
[data-bs-theme="dark"] .sidebar { border-right: 1px solid var(--pf-borde); }
[data-bs-theme="dark"] .bottom-nav { border-top-color: var(--pf-borde); }
[data-bs-theme="dark"] .firma-rudis a, [data-bs-theme="dark"] .firma a { background: #e9e6e0; }
[data-bs-theme="dark"] .btn-success { --bs-btn-color: #0c1117; --bs-btn-hover-color: #0c1117; --bs-btn-active-color: #0c1117; }

/* ---------------------------------------------------------------- Base -- */
body {
    background-color: var(--pf-fondo);
    color: var(--pf-texto);
    font-size: 14px;
}

/* Acento en las acciones primarias: variables del propio .btn de Bootstrap 5.3 */
.btn-primary {
    --bs-btn-bg: var(--pf-accion);
    --bs-btn-color: var(--pf-accion-texto);
    --bs-btn-border-color: var(--pf-accion);
    --bs-btn-hover-bg: var(--pf-accion-hover);
    --bs-btn-hover-color: var(--pf-accion-texto);
    --bs-btn-hover-border-color: var(--pf-accion-hover);
    --bs-btn-active-bg: var(--pf-accion-activo);
    --bs-btn-active-color: var(--pf-accion-texto);
    --bs-btn-active-border-color: var(--pf-accion-activo);
    --bs-btn-disabled-bg: var(--pf-accion);
    --bs-btn-disabled-color: var(--pf-accion-texto);
    --bs-btn-disabled-border-color: var(--pf-accion);
    --bs-btn-focus-shadow-rgb: var(--pf-barra-rgb);
}
.text-primary { color: var(--pf-titulo) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--pf-accion);
    box-shadow: 0 0 0 3px var(--pf-ring);
}
.form-check-input:checked, .form-check-input:checked[type=checkbox] {
    background-color: var(--pf-accion);
    --bs-form-check-bg-image: var(--pf-check-svg);
    border-color: var(--pf-accion);
}

/* Movimiento: solo transiciones cortas, y ninguna si el usuario lo pidio */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* Utilidades chicas que reemplazan style="" repetidos */
.txt-10 { font-size: 10px; }
.txt-11 { font-size: 11px; }
.txt-12 { font-size: 12px; }
.txt-13 { font-size: 13px; }
.txt-15 { font-size: 15px; }
.min-w-0 { min-width: 0; }
.texto-2 { color: var(--pf-texto-2); }
.num { font-variant-numeric: tabular-nums; }

/* Badges con la paleta de la casa */
.badge-navy { background: var(--pf-accion); color: var(--pf-accion-texto); }
.badge-ok { background: var(--pf-ok); color: #fff; }
.badge-aviso { background: var(--pf-aviso); color: #fff; }
.badge-conteo { background: var(--pf-superficie-3); color: var(--pf-mudo); }

/* Firma del proveedor: discreta, nunca compite con la marca del colegio.
   El logo rojo necesita respaldo claro sobre navy (pastilla). */
.firma-rudis {
    font-size: 11px;
    color: var(--pf-mudo);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.firma-rudis a { display: inline-flex; align-items: center; opacity: .85; }
.firma-rudis a:hover { opacity: 1; }
.firma-rudis img { height: 13px; display: block; }
.firma-rudis-mobile { margin: 28px 0 4px; }
.firma-rudis-mobile img { height: 15px; }

/* ================================================== Pantallas de acceso == */
/* Login, LinkEnviado, ElegirFamilia, TokenInvalido: Layout = null, fondo navy
   profundo y una tarjeta blanca centrada de 420px. */
body.acceso {
    min-height: 100vh;
    background: var(--pf-acceso-fondo);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.acceso-card {
    background: var(--pf-superficie);
    border-radius: var(--pf-radio-tarjeta);
    box-shadow: var(--pf-sombra-flotante);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}
.acceso-card.centrada { text-align: center; padding: 48px 40px 40px; }
.acceso-header {
    background: var(--pf-hero);
    padding: 32px 40px 28px;
    text-align: center;
}
.acceso-header img {
    max-height: 72px;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 12px;
}
.acceso-header .escuela-nombre {
    color: var(--pf-hero-texto);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.acceso-header .portal-tag { color: var(--pf-mudo-sobre-navy); font-size: 13px; margin-top: 4px; }
.acceso-body { padding: 36px 40px 40px; }
.acceso-body h1, .acceso-card h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--pf-titulo);
    margin-bottom: 8px;
}
.acceso-card h2 { font-size: 22px; margin-bottom: 12px; }
.acceso-body .subtitle, .acceso-card .sub, .acceso-card p {
    color: var(--pf-mudo);
    font-size: 14px;
    line-height: 1.6;
}
.acceso-body .subtitle { margin-bottom: 28px; }
.acceso-card .sub { margin-bottom: 26px; }
.acceso-body .form-control {
    border-radius: var(--pf-radio);
    border: 1.5px solid var(--pf-borde-fuerte);
    padding: 12px 14px;
    font-size: 15px;
    transition: border-color .2s;
}
.acceso-body .form-label { font-size: 14px; }
.acceso-body .form-check-label, .acceso-card label { font-size: 13px; color: var(--pf-texto-2); cursor: pointer; }
.btn-acceso {
    background: var(--pf-accion);
    color: var(--pf-accion-texto);
    border: none;
    border-radius: var(--pf-radio);
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    transition: background .15s;
}
.btn-acceso:hover { background: var(--pf-accion-hover); color: var(--pf-accion-texto); }
.btn-acceso:focus { box-shadow: 0 0 0 3px var(--pf-ring-fuerte); }
/* Accion secundaria sin color (la huella es para quien ya la activo) */
.btn-huella {
    background: var(--pf-superficie);
    color: var(--pf-titulo);
    border: 1.5px solid var(--pf-borde-fuerte);
    border-radius: var(--pf-radio);
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    transition: border-color .15s, background .15s;
}
.btn-huella:hover { border-color: var(--pf-accion); background: var(--pf-superficie-2); }
.btn-huella:focus { outline: none; box-shadow: 0 0 0 3px var(--pf-ring); }
.btn-huella:disabled { opacity: .6; }
.link-alterno { font-size: 13px; color: var(--pf-mudo); text-decoration: none; }
.link-alterno:hover { color: var(--pf-titulo); }
.separador-o { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--pf-borde); }
.separador-o span { font-size: 12px; color: var(--pf-mudo-2); }
.info-box {
    background: var(--pf-superficie-3);
    border-radius: var(--pf-radio);
    padding: 14px 16px;
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.info-box i { color: var(--pf-titulo); margin-top: 2px; flex-shrink: 0; }
.info-box p { color: var(--pf-texto-2); font-size: 13px; line-height: 1.5; margin: 0; }
.aviso-expiro {
    background: var(--pf-aviso-fondo);
    border: 1px solid var(--pf-aviso-sobre-navy);
    border-radius: var(--pf-radio);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--pf-aviso);
}
.texto-error { color: var(--pf-peligro); font-size: 13px; margin: 10px 0 0; font-weight: 600; text-align: center; }

/* LinkEnviado */
.icon-circle {
    width: 72px; height: 72px;
    background: var(--pf-ok-fondo);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
}
.icon-circle i { font-size: 32px; color: var(--pf-ok); }
.email-badge {
    display: inline-block;
    background: var(--pf-superficie-3);
    color: var(--pf-titulo);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 20px;
    margin: 8px 0 20px;
    word-break: break-all;
}
.steps {
    text-align: left;
    background: var(--pf-superficie-2);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 20px 0 28px;
}
.steps .step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--pf-texto-2);
}
.steps .step:last-child { margin-bottom: 0; }
.steps .step .num {
    background: var(--pf-accion);
    color: var(--pf-accion-texto);
    border-radius: 50%;
    width: 22px; height: 22px;
    font-size: 12px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.codigo-form label { display: block; font-size: 13px; font-weight: 600; color: var(--pf-texto-2); margin-bottom: 8px; }
.codigo-form .codigo-fila { display: flex; gap: 8px; justify-content: center; }
.codigo-form input {
    width: 150px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 6px;
    border: 2px solid var(--pf-borde-fuerte);
    border-radius: var(--pf-radio);
    padding: 8px 4px;
}
.codigo-form input:focus { outline: none; border-color: var(--pf-accion); box-shadow: 0 0 0 3px var(--pf-ring); }
.codigo-form .btn { font-weight: 600; }
.nota-expira { font-size: 12px; color: var(--pf-mudo-2); margin-top: 20px; }

/* ElegirFamilia */
.opcion {
    display: block;
    background: var(--pf-accion);
    color: var(--pf-accion-texto);
    text-decoration: none;
    border-radius: var(--pf-radio);
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    transition: background .15s;
}
.opcion:hover { background: var(--pf-accion-hover); color: var(--pf-accion-texto); }
.opcion:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pf-ring-fuerte); }
.opcion .alumnos { display: block; font-size: 12px; font-weight: 400; opacity: .85; margin-top: 4px; }

/* Firma bajo la tarjeta de acceso (sobre navy) */
.firma {
    margin: 18px 0 0;
    font-size: 12px;
    color: var(--pf-mudo-sobre-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.firma a { background: #edede9; border-radius: 4px; padding: 3px 8px; display: inline-flex; align-items: center; opacity: .9; }
.firma a:hover { opacity: 1; }
.firma img { height: 15px; display: block; }

@media (max-width: 480px) {
    .acceso-header { padding: 24px 24px 20px; }
    .acceso-body { padding: 28px 24px 32px; }
    .acceso-card.centrada { padding: 36px 24px 32px; }
}

/* ========================================================= Layout logueado == */
/* Navbar: nunca envolver (alto fijo; una 2da linea desbordaria sobre el
   contenido). El nombre cede espacio con ellipsis y el logo tiene tope de
   ancho (hay logos apaisados). */
.navbar { flex-wrap: nowrap; height: var(--pf-navbar-alto); }
.navbar.bg-dark { --bs-dark-rgb: var(--pf-barra-rgb); }
.navbar-brand { min-width: 0; }
.navbar-brand img { max-height: 36px; max-width: 110px; object-fit: contain; flex-shrink: 0; }
.navbar-brand .escuela-nombre { font-size: 14px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar .navbar-acciones { flex-shrink: 0; }

/* Sidebar desktop */
.sidebar {
    background-color: var(--pf-barra);
    min-height: calc(100vh - var(--pf-navbar-alto));
    position: sticky;
    top: var(--pf-navbar-alto);
    height: calc(100vh - var(--pf-navbar-alto));
    overflow-y: auto;
}
.sidebar .nav-link {
    color: var(--pf-mudo-2);
    padding: 10px 16px;
    border-radius: var(--pf-radio-chico);
    font-size: 14px;
    transition: background .15s, color .15s;
}
.sidebar .nav-link:hover { color: #fff; background-color: rgba(255, 255, 255, .08); }
.sidebar .nav-link.active { color: #fff; background-color: rgba(255, 255, 255, .15); }
.sidebar .nav-link i { width: 20px; text-align: center; }
.sidebar .nav-section { color: var(--pf-mudo); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 16px 16px 4px; }
.sidebar .firma-rudis a { background: #edede9; border-radius: 4px; padding: 2px 7px; }

/* Mobile bottom nav */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--pf-barra);
    z-index: 1030;
    border-top: 1px solid rgba(255, 255, 255, .1);
    /* iPhone: el home indicator se superpone a la barra si no se le deja su alto */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav a {
    flex: 1;
    color: var(--pf-mudo-2);
    text-decoration: none;
    padding: 10px 4px 8px;
    font-size: 10px;
    text-align: center;
    line-height: 1.3;
}
.bottom-nav a i { display: block; font-size: 18px; margin-bottom: 2px; }
.bottom-nav a.active { color: #fff; }

.main-content { padding: 24px 20px; }
h4.page-title { font-weight: 600; }

/* Tarjetas: radio 12px, sin borde, sombra suave */
.card {
    --bs-card-bg: var(--pf-superficie);
    border: none;
    box-shadow: var(--pf-sombra-tarjeta);
    border-radius: var(--pf-radio-tarjeta);
}
.card-header {
    background: var(--pf-superficie);
    border-bottom: 1px solid var(--pf-borde);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--pf-radio-tarjeta) var(--pf-radio-tarjeta) 0 0 !important;
}
/* Tarjeta con acento lateral (saldo / deuda) */
.card-acento-peligro { border-left: 4px solid var(--pf-peligro); }
.card-acento-ok { border-left: 4px solid var(--pf-ok); }
/* Pie gris de una tarjeta (notas al pie de una lista) */
.pie-tarjeta { background: var(--pf-superficie-2); font-size: 12px; }

/* Tarjetas promocionales del layout (avisos, huella, instalar la app) */
.promo-texto { min-width: 200px; }

/* Tablas */
.table-responsive { -webkit-overflow-scrolling: touch; }
.table th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pf-mudo); white-space: nowrap; }
.table td { font-size: 13px; vertical-align: middle; }
.table td, .table th, .stat-card .stat-value { font-variant-numeric: tabular-nums; }
/* Fila de grupo (alumno) dentro de una tabla o lista */
.fila-grupo { background: var(--pf-superficie-2); }
.fila-grupo td, .grupo-alumno { border-bottom: 1px solid var(--pf-borde); }
.g-nombre { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--pf-texto-2); text-transform: uppercase; }
.g-subtotal { font-size: 12px; font-weight: 600; color: var(--pf-texto-2); font-variant-numeric: tabular-nums; }
.fila-total td { border-bottom: 0; }
.fila-total .total-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pf-mudo); }
.fila-total .total-valor { font-size: 14px; }

/* Stat cards / KPIs */
.stat-card { border-radius: var(--pf-radio-tarjeta); padding: 20px; }
.stat-card .stat-label { font-size: 12px; color: var(--pf-mudo); margin-bottom: 4px; }
.stat-card .stat-value { font-size: 22px; font-weight: 700; }
.kpi-box { min-width: 140px; }
/* Cifra grande de saldo (Cuenta corriente, Deuda) */
.saldo-grande { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.saldo-grande.es-deuda { color: var(--pf-peligro); }
.saldo-grande.es-favor { color: var(--pf-ok); }
.kpi-label { font-size: 11px; color: var(--pf-mudo); }
.kpi-valor { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Resultado de una operacion (pago acreditado / cancelado) */
.icono-resultado { font-size: 64px; }
.spinner-grande { width: 3rem; height: 3rem; }
.mw-540 { max-width: 540px; }

/* ============================================================== Inicio == */
.banda-total {
    background: var(--pf-hero);
    border-radius: var(--pf-radio-tarjeta);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
    padding: 18px 18px 16px;
    color: var(--pf-hero-texto);
}
.banda-total .banda-label { font-size: 12px; color: var(--pf-mudo-sobre-navy); }
.banda-total .banda-importe { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.banda-desglose {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    flex-wrap: wrap;
}
.banda-desglose .d-label { font-size: 11px; color: var(--pf-mudo-sobre-navy); }
.banda-desglose .d-valor { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.banda-desglose .d-valor.es-aviso { color: var(--pf-aviso-sobre-navy); }
.banda-desglose .d-valor.es-favor { color: var(--pf-ok-sobre-navy); }
.btn-pagar-banda { width: 100%; margin-top: 14px; }

.chip-vencida { background: var(--pf-aviso-fondo); color: var(--pf-aviso); border-radius: var(--pf-radio); padding: 1px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip-prox { background: var(--pf-chip-fondo); color: var(--pf-titulo); border-radius: var(--pf-radio); padding: 1px 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.venc-1 { color: var(--pf-mudo); font-size: 11px; font-weight: 400; }

.grupo-alumno { background: var(--pf-superficie-2); padding: 7px 16px; display: flex; justify-content: space-between; align-items: baseline; }
.cuota-titulo-m { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cuota-tipo-m { font-size: 12px; color: var(--pf-mudo); margin-top: 2px; }
.cuota-total-m { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.desglose-vencida { background: var(--pf-aviso-suave-fondo); border-radius: var(--pf-radio-chico); padding: 6px 10px; margin-top: 8px; font-size: 12px; color: var(--pf-aviso-suave); font-variant-numeric: tabular-nums; }
.desglose-vencida .nota { color: var(--pf-aviso-nota); }
.escalera { background: var(--pf-superficie-2); border-radius: var(--pf-radio-chico); padding: 8px 10px; margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.escalera .e-activo { display: flex; justify-content: space-between; padding: 2px 0; color: var(--pf-titulo); font-weight: 700; }
.escalera .e-resto { display: flex; justify-content: space-between; padding: 2px 0 2px 13px; color: var(--pf-mudo); }
.escalera .e-pasado { display: flex; justify-content: space-between; padding: 2px 0 2px 13px; color: var(--pf-mudo-2); text-decoration: line-through; }
.escalera .e-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-titulo); display: inline-block; margin-right: 6px; }
.ver-vencs { font-size: 12px; color: var(--pf-mudo); margin-top: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ver-vencs i { font-size: 10px; }
.escalera-sub td { font-size: 12px; color: var(--pf-mudo); font-variant-numeric: tabular-nums; padding-top: 0 !important; border-top: 0; }
.escalera-sub .nota-vencida { color: var(--pf-aviso-suave); }
.tramo-pasado { color: var(--pf-mudo-2); text-decoration: line-through; }
.tramo-activo { color: var(--pf-titulo); font-weight: 700; }

/* ======================================================== Pagar online == */
.cuota-card {
    background: var(--pf-superficie);
    border: 2px solid var(--pf-borde);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.cuota-card:hover { border-color: var(--pf-ok); }
.cuota-card.selected {
    border-color: var(--pf-ok);
    background: var(--pf-ok-fondo);
    box-shadow: 0 0 0 1px var(--pf-ok) inset;
}
.cuota-card .cuota-check {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--pf-borde-fuerte);
    display: inline-flex;
    align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--pf-superficie);
    font-size: 14px; color: #fff;
    transition: background .15s, border-color .15s;
}
.cuota-card.selected .cuota-check { background: var(--pf-ok); border-color: var(--pf-ok); }
.cuota-card.selected .cuota-check::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.cuota-card .cuota-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cuota-card .cuota-titulo { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--pf-titulo); }
.cuota-card .cuota-orden { font-size: 11px; color: var(--pf-mudo); font-weight: normal; margin-top: 2px; }
.cuota-card .cuota-total { font-size: 17px; font-weight: 700; color: var(--pf-ok); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cuota-card .cuota-detalle-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    font-size: 12px; color: var(--pf-texto-2);
    padding-left: 40px;
    font-variant-numeric: tabular-nums;
}
.cuota-card .cuota-detalle-grid > div { display: flex; justify-content: space-between; }
.cuota-card .cuota-detalle-grid .label { color: var(--pf-mudo-2); }
.cuota-card.recargo-flag .total-warning { color: var(--pf-aviso); }

/* Barra de pago: sticky abajo en mobile (por encima de la bottom-nav), fija en desktop */
.pago-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--pf-superficie);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    padding: 14px 16px;
    z-index: 1020;
    border-top: 1px solid var(--pf-borde);
}
body.has-pago-bar { padding-bottom: 130px; }
.pago-bar .pago-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pago-bar .pago-cant { font-size: 13px; color: var(--pf-mudo); }
.pago-bar .pago-total { font-size: 22px; font-weight: 800; color: var(--pf-ok); font-variant-numeric: tabular-nums; }
.pago-bar .btn-pagar-grande { width: 100%; padding: 14px; font-size: 16px; font-weight: 700; border-radius: var(--pf-radio); }
.pago-bar .btn-pagar-grande:disabled { background: var(--pf-borde-fuerte); border-color: var(--pf-borde-fuerte); color: #fff; }
.acciones-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.acciones-bar .btn { flex: 1; }
.info-banner {
    background: var(--pf-superficie-3);
    border-left: 4px solid var(--pf-titulo);
    padding: 12px 14px;
    border-radius: var(--pf-radio-chico);
    margin-bottom: 14px;
    color: var(--pf-titulo);
    font-size: 13px;
}
.info-banner i { margin-right: 6px; }
.total-confirmar { font-size: 28px; font-weight: 800; color: var(--pf-ok); font-variant-numeric: tabular-nums; }
.lista-scroll { max-height: 200px; overflow-y: auto; }

/* ============================================================ Responsive == */
@media (max-width: 767.98px) {
    .bottom-nav { display: flex; }
    body { padding-bottom: calc(var(--pf-bottomnav-alto) + env(safe-area-inset-bottom, 0px)); }
    .main-content { padding: 16px 12px; }
    .stat-card .stat-value { font-size: 18px; }
    h4.page-title { font-size: 16px; }
    /* En mobile el navbar suma el boton "Medios de pago" con texto completo;
       achicamos el nombre del colegio para que todo entre sin romper en ~360px. */
    .navbar-brand .escuela-nombre { max-width: 90px; }
    /* La bottom-nav (z-index 1030) ocupa el fondo: la pago-bar se levanta encima. */
    .pago-bar { bottom: calc(var(--pf-bottomnav-alto) + env(safe-area-inset-bottom, 0px)); }
    body.has-pago-bar { padding-bottom: calc(230px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 379.98px) {
    /* Equipos muy angostos: el boton queda solo con el icono */
    .txt-medios { display: none; }
}
@media (min-width: 768px) {
    .banda-total { display: flex; align-items: center; gap: 32px; padding: 18px 24px; }
    .banda-desglose { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .15); gap: 28px; }
    .btn-pagar-banda { width: auto; margin-top: 0; margin-left: auto; }
    .cuota-card { padding: 16px 20px; }
    .cuota-card .cuota-total { font-size: 19px; }
    .cuota-card .cuota-detalle-grid { grid-template-columns: repeat(4, 1fr); padding-left: 44px; }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .main-content { padding: 20px 18px; }
    .stat-card .stat-value { font-size: 20px; }
}
@media (min-width: 1400px) {
    .stat-card .stat-value { font-size: 24px; }
    .main-content { padding: 28px 28px; }
}