/* Fuente: Plus Jakarta Sans 400;500;600;700 */
:root{
  --fondo-pagina:        #F3F5F8;
  --fondo-tarjeta:       #FFFFFF;
  --fondo-lateral:       #12263A;
  --fondo-suave:         #ECEFF3;
  --texto:               #12263A;
  --texto-secundario:    #5B6B7B;
  --texto-terciario:     #3B4C5E;
  --texto-lateral:       #C9D4E0;
  --texto-lateral-sub:   #AFC0D2;
  --borde:               #E1E7EE;
  --borde-input:         #A9B8C8;
  --borde-chip:          #C9D4E0;
  --acento:              #E61A27;
  --link:                #C8101E;
  --link-hover:          #A30D18;

  --vencida-bg:          #FCE8E6;  --vencida-tx:   #9B1C14;
  --parcial-bg:          #FDF1D2;  --parcial-tx:   #6B4A00;
  --pagada-bg:           #DDF3E7;  --pagada-tx:    #14633F;
  --pendiente-bg:        #E4EAF2;  --pendiente-tx: #2B3F55;
  --revisar-bg:          #FDF1D2;  --revisar-tx:   #6B4A00;  --revisar-borde: #F2D58A;
  --revisar-punto:       #B7791F;
  --revisar-contador-bg: #F2B84B;  --revisar-contador-tx: #3D2A00;

  --fila-vencida-bg:     #FCF3F2;
  --monto-deuda:         #9B1C14;
  --monto-cobrado:       #14633F;
  --monto-recargo:       #5B6B7B;

  --fuente: 'Plus Jakarta Sans', sans-serif;
  --fs-titulo: 28px;
  --fs-subtitulo: 18px;
  --fs-cuerpo: 14px;
  --fs-cuerpo-lg: 15px;
  --fs-pequeno: 13px;
  --fs-etiqueta: 12px;
  --fs-monto-grande: 28px;
  --fw-regular: 400;
  --fw-medio: 500;
  --fw-semi: 600;
  --fw-negrita: 700;
  --lh-titulo: 1.2;
  --lh-monto: 1.1;
  --lh-texto: 1.5;

  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px;  --sp-5: 12px;
  --sp-6: 14px; --sp-7: 16px; --sp-8: 20px; --sp-9: 24px;  --sp-10: 28px; --sp-11: 32px;
  --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-14: 14px; --r-16: 16px; --r-18: 18px; --r-pill: 999px;
  --ancho-lateral: 232px;
  --ancho-movil: 390px;
}

body{margin:0;background:var(--fondo-pagina);font-family:var(--fuente);color:var(--texto)}
a{color:var(--link)} a:hover{color:var(--link-hover)}
input{accent-color:var(--acento)}

.app{min-height:860px;display:flex;flex-wrap:wrap;background:var(--fondo-pagina)}
.lateral{flex:0 0 var(--ancho-lateral);box-sizing:border-box;background:var(--fondo-lateral);color:#fff;padding:24px 16px;display:flex;flex-direction:column;gap:28px}
.lateral__marca{display:flex;align-items:center;gap:12px;padding:0 8px}
.lateral__logo{width:40px;height:40px;border-radius:10px;background:var(--acento);color:#fff;font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center}
.lateral__nav{display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:8px;color:var(--texto-lateral);text-decoration:none;font-size:14px;font-weight:500}
.nav-item--activo{background:var(--acento);color:#fff;font-weight:600}
.nav-contador{background:var(--revisar-contador-bg);color:var(--revisar-contador-tx);font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill)}
.principal{flex:999 1 560px;min-width:0;padding:32px;box-sizing:border-box;display:flex;flex-direction:column;gap:24px}
.movil{width:390px;min-height:844px;height:auto;box-sizing:border-box;padding:28px 20px 24px;display:flex;flex-direction:column;gap:20px;background:var(--fondo-pagina)}

.titulo{margin:0;font-size:28px;font-weight:700;line-height:var(--lh-titulo)}
.subtitulo{margin:0;font-size:18px;font-weight:700}
.bajada{font-size:14px;color:var(--texto-secundario)}
.etiqueta{font-size:12px;color:var(--texto-secundario)}
.nota{font-size:12px;line-height:1.5;color:var(--texto-secundario)}
.monto{font-size:28px;font-weight:700}
.monto--deuda{color:var(--monto-deuda)}
.monto--cobrado{color:var(--monto-cobrado)}
.monto--hero{font-size:38px;line-height:1.1}

.btn{display:inline-block;font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;text-align:center;cursor:pointer;
  background:var(--acento);color:#fff;border:none;border-radius:10px;padding:12px 20px}
.btn--sm{border-radius:8px;padding:10px 16px}
.btn--lg{font-size:16px;border-radius:12px;padding:16px 20px;display:block}
.btn--secundario{background:#fff;color:var(--link);border:1px solid var(--link);padding:11px 20px}
.btn--secundario.btn--sm{padding:9px 16px}
.btn--copiar{font-size:13px;border-radius:8px;padding:8px 14px}
.btn--sobre-navy{background:#fff;color:var(--texto);font-size:16px;font-weight:700;padding:15px 20px;border-radius:12px;display:block}

.tarjeta{background:var(--fondo-tarjeta);border:1px solid var(--borde);border-radius:14px}
.tarjeta--pad{padding:20px;display:flex;flex-direction:column;gap:16px}
.tarjeta__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px}
.tarjeta--hero{background:var(--fondo-lateral);color:#fff;border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:14px}

.metrica{flex:1 1 200px;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:6px}
.metrica__etiqueta{font-size:13px;font-weight:500;color:var(--texto-secundario)}
.metrica__valor{font-size:28px;font-weight:700}
.metrica__sub{font-size:12px;color:var(--texto-secundario)}
.metrica--revisar{background:var(--revisar-bg);border-color:var(--revisar-borde);text-decoration:none;color:var(--texto)}
.metrica--revisar .metrica__etiqueta{font-weight:600;color:var(--revisar-tx)}
.metrica--revisar .metrica__valor,.metrica--revisar .metrica__sub{color:var(--revisar-tx)}

.tabla{min-width:860px}
.tabla__cab{display:grid;grid-template-columns:1.6fr 2.2fr 1fr 1.5fr 1.3fr 90px;gap:16px;padding:10px 20px;background:var(--fondo-pagina);
  border-top:1px solid var(--borde);font-size:12px;font-weight:600;color:var(--texto-secundario)}
.fila{display:grid;grid-template-columns:1.6fr 2.2fr 1fr 1.5fr 1.3fr 90px;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--borde);font-size:14px}
.fila__fuerte{font-weight:600}
.fila__sub{font-size:12px;color:var(--texto-secundario)}
.fila-cuota{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--fondo-pagina);border-radius:10px;padding:12px 14px}
.fila-cuota--vencida{background:var(--fila-vencida-bg)}
.pie-tabla{padding:14px 20px;border-top:1px solid var(--borde);font-size:13px;color:var(--texto-secundario)}

.badge{display:inline-block;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill)}
.badge--compacto{padding:3px 8px}
.badge--vencida{background:var(--vencida-bg);color:var(--vencida-tx)}
.badge--parcial{background:var(--parcial-bg);color:var(--parcial-tx)}
.badge--pagada{background:var(--pagada-bg);color:var(--pagada-tx)}
.badge--pendiente{background:var(--pendiente-bg);color:var(--pendiente-tx)}
.badge--revisar{background:var(--revisar-bg);color:var(--revisar-tx)}

.chip{font-size:13px;font-weight:500;padding:5px 14px;border-radius:var(--r-pill);background:#fff;color:var(--texto);border:1px solid var(--borde-chip);text-decoration:none}
.chip--activo{background:var(--fondo-lateral);color:#fff;font-weight:600;padding:6px 14px;border:none}

.campo{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.input{font-family:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--borde-input);border-radius:8px;color:var(--texto);background:#fff;box-sizing:border-box;width:100%}
.input--codigo{font-size:22px;letter-spacing:4px;padding:14px 16px;border-radius:12px;text-align:center}

.opcion{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--borde-chip);border-radius:14px;padding:14px 16px;font-size:14px;cursor:pointer}
.opcion--elegida,.opcion:has(input:checked){border:2px solid var(--link)}

.aviso{background:var(--parcial-bg);color:var(--parcial-tx);border-radius:12px;padding:14px 18px;font-size:14px;line-height:1.5}
.aviso--error{background:var(--vencida-bg);color:var(--vencida-tx)}
.aviso--estado{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:13px;line-height:1.4}
.aviso__punto{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--revisar-punto)}
.bloque-info{background:var(--fondo-suave);border-radius:12px;padding:16px}

.cuenta{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.cuenta--admin{padding:20px;gap:10px}
.cuenta__fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cuenta__dato{display:flex;flex-direction:column;gap:2px}
.cuenta__etiqueta{font-size:12px;color:var(--texto-secundario)}
.cuenta__valor{font-size:14px;font-weight:700}

.marca__titulo{font-weight:700;line-height:1.2}
.marca__sub{font-size:13px;color:var(--texto-lateral-sub)}
.volver{font-weight:600;text-decoration:none;font-size:14px}
.pila{display:flex;flex-direction:column;gap:12px}
.fila-botones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.metricas{display:flex;flex-wrap:wrap;gap:16px}
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tabla-scroll{overflow:auto;background:#fff;border:1px solid var(--borde);border-radius:14px}
.cabecera{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.marco{width:390px;margin:32px auto}
.qr{width:220px;height:220px;margin:0 auto;border:1px solid var(--borde);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--texto-secundario)}
.alumno-cab{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.texto-terciario{color:var(--texto-terciario);font-size:14px}
.recargo{font-size:13px;color:var(--monto-recargo)}
form.pila{margin:0}
button.nav-item{background:transparent;border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.lateral form{margin-top:auto}
@media print{
  .marco{width:auto;margin:0}
  .movil{width:auto;min-height:0;padding:0}
  .no-imprimir{display:none}
}