:root{
  --verde:#00823C; --verde-osc:#005F2B; --verde-bg:#DDF0E4;
  --burdeo:#960046; --burdeo-osc:#6E0033; --burdeo-bg:#F6DCE6;
  --tinta:#1B2723; --muted:#5B6862; --linea:#D6DEDA; --fondo:#F2F5F3; --hoja:#fff; --ambar:#B7791F; --ambar-bg:#FFF1CC;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:15px/1.5 var(--sans)}
.wrap{max-width:1320px;margin:0 auto;padding:0 20px 40px}
a{color:var(--verde-osc)} a:hover{color:var(--burdeo)}
:focus-visible{outline:3px solid #2F6FEB;outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
h2{font:700 1.5rem/1.2 var(--serif);margin:0 0 4px;color:var(--burdeo)}
h3{font:700 1.1rem/1.3 var(--serif);margin:0 0 8px}
.muted{color:var(--muted)} .nowrap{white-space:nowrap} .right{text-align:right} .center{text-align:center}
small{font-size:.85em}

/* Encabezado: dos tonos como el rombo del logo */
.top{display:flex;align-items:center;gap:22px;padding:14px 0 12px;background:var(--hoja);margin:0 -20px;padding-left:20px;padding-right:20px;flex-wrap:wrap}
.brand img{display:block;height:45px;width:auto}
.ttl{flex:1;min-width:240px}
.ttl h1{font:700 clamp(1.15rem,2.2vw,1.65rem)/1.15 var(--serif);margin:0;color:var(--burdeo)}
.ttl .sub{color:var(--muted);font-size:.85rem}
.who{display:flex;gap:12px;align-items:center;font-size:.9rem;flex-wrap:wrap}
.who select{border:1px solid var(--linea);border-radius:6px;padding:3px 6px;background:#fff}
.rule{height:6px;margin:0 -20px;background:linear-gradient(90deg,var(--verde) 0 50%,var(--burdeo) 50% 100%)}
nav.main{display:flex;flex-wrap:wrap;gap:2px;margin:0 -20px;padding:0 20px;background:var(--hoja);border-bottom:1px solid var(--linea)}
nav.main a{padding:11px 15px;text-decoration:none;color:var(--tinta);font-weight:600;border-bottom:3px solid transparent}
nav.main a:hover{background:var(--fondo)}
nav.main a.on{border-bottom-color:var(--burdeo);color:var(--burdeo)}
main{padding-top:22px}
.pie{margin-top:36px;padding-top:14px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.85rem;flex-wrap:wrap}
.pie-firma{font-family:var(--serif);font-weight:700;letter-spacing:.04em;color:var(--burdeo)}

/* Avisos */
.aviso{padding:10px 14px;border-left:5px solid var(--verde);background:var(--verde-bg);margin:0 0 14px;border-radius:0 6px 6px 0}
.aviso.err{border-color:var(--burdeo);background:var(--burdeo-bg)}
.aviso.warn{border-color:var(--ambar);background:var(--ambar-bg)}
.aviso.info{border-color:#3B6CF0;background:#E6EEFF}

/* Barra de título de página */
.hero{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.hero p{margin:0;color:var(--muted)}
.hero select{border:0;border-bottom:2px solid var(--tinta);background:transparent;font-weight:600;padding:0 2px}

/* Libro de cifras */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);background:var(--hoja);border:1px solid var(--linea)}
.ledger>div{padding:14px 18px;border-left:1px solid var(--linea)} .ledger>div:first-child{border-left:0}
.fig{font:700 clamp(1.4rem,2.6vw,2.1rem)/1.1 var(--serif);font-variant-numeric:tabular-nums}
.fig.bad{color:var(--burdeo)} .fig.good{color:var(--verde-osc)}
.lab{color:var(--muted);font-size:.88rem}
.sheet{background:var(--hoja);border:1px solid var(--linea)}
.pad{padding:16px 18px}
.sheet+.sheet,.ledger+.sheet,.sheet+.ledger{margin-top:16px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.cols-3{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
.sec-t{padding:10px 18px;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sec-t h3{margin:0}

/* Recaudación por mes */
.mstrip{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;padding:14px 18px 6px}
.mcol{text-align:center;font-size:.8rem}
.mbar{height:64px;background:#E5EBE8;position:relative;display:flex;align-items:flex-end;margin-bottom:4px}
.mbar i{display:block;width:100%;background:var(--verde)}
.mcol.cut .mbar{outline:2px solid var(--burdeo);outline-offset:1px}
.mcol b{display:block;font-size:.95rem}

/* Tablas */
.tablewrap{overflow-x:auto}
table.t{border-collapse:collapse;width:100%;font-size:.93rem}
.t th,.t td{padding:7px 10px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:middle}
.t th{background:#F7F9F8;color:var(--muted);font-weight:600;white-space:nowrap}
.t td.num,.t th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t tfoot td{font-weight:700;background:#F7F9F8}
.t tr.anulado td{color:#8A948F;text-decoration:line-through}
.t tr.anulado td:last-child,.t tr.anulado .noline{text-decoration:none}
.t tr:hover td{background:#FAFBFA}
.t .sub{display:block;color:var(--muted);font-size:.82rem}
.t td.glosa{min-width:240px;max-width:420px}
.pos{color:var(--verde-osc)} .neg{color:var(--burdeo)}
.ini{display:none}
.modo-1 .col-tel{display:none}
.modo-2 .col-tel,.modo-2 .col-apo{display:none}
.modo-2 .full-n{display:none} .modo-2 .ini{display:inline}

/* Casilleros por mes */
.qs{display:flex;gap:3px}
.q{width:29px;height:25px;border:1.5px solid var(--tinta);border-radius:4px;display:grid;place-items:center;font-size:.68rem;line-height:1;background:#fff;color:var(--muted);flex:none}
.qh{border:0;background:none;height:auto;color:var(--muted)}
.qh.cut{color:var(--burdeo);font-weight:700;box-shadow:inset 0 -3px 0 var(--burdeo)}
.q.full{background:var(--verde);border-color:var(--verde);color:#fff;font-size:.9rem;font-weight:700}
.q.part{background:linear-gradient(to top,#E8A317 var(--p),#fff var(--p));border-color:#E8A317;color:var(--tinta);font-weight:600}
.q.due{border-color:var(--burdeo);background:repeating-linear-gradient(135deg,#fff 0 4px,var(--burdeo-bg) 4px 7px)}
.q.fut{border:1.5px dashed #AAB6B0}
.legend{display:flex;flex-wrap:wrap;gap:16px;padding:10px 18px;color:var(--muted);font-size:.86rem;align-items:center}
.legend span{display:inline-flex;gap:6px;align-items:center} .legend .q{width:17px;height:17px}

.badge{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.8rem;font-weight:600;white-space:nowrap}
.b-full{background:var(--verde);color:#fff} .b-ok{background:var(--verde-bg);color:var(--verde-osc)}
.b-late{background:var(--burdeo-bg);color:var(--burdeo-osc)} .b-none{background:var(--burdeo);color:#fff}
.b-off{background:#E5EAE7;color:var(--muted)} .b-warn{background:var(--ambar-bg);color:#7A5200}
.b-ing{background:var(--verde-bg);color:var(--verde-osc)} .b-gas{background:var(--burdeo-bg);color:var(--burdeo-osc)} .b-dep{background:#E6EEFF;color:#1F4DB8}

/* Controles */
.btn{display:inline-block;border:1.5px solid var(--tinta);background:#fff;border-radius:7px;padding:6px 14px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--tinta);line-height:1.3}
.btn:hover{background:var(--tinta);color:#fff}
.btn.pri{background:var(--verde);border-color:var(--verde);color:#fff} .btn.pri:hover{background:var(--verde-osc);border-color:var(--verde-osc)}
.btn.dng{border-color:var(--burdeo);color:var(--burdeo)} .btn.dng:hover{background:var(--burdeo);color:#fff}
.btn.sm{padding:2px 9px;font-size:.84rem;font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;background:var(--hoja);border:1px solid var(--linea);margin-bottom:14px}
.toolbar .sp{flex:1}
.toolbar input[type=search],.toolbar input[type=text],.toolbar input[type=date],.toolbar select{border:1.5px solid var(--linea);border-radius:7px;padding:5px 9px;background:#fff}
.toolbar input[type=search]{min-width:200px;flex:1 1 200px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--tinta);background:#fff;border-radius:99px;padding:3px 12px;cursor:pointer;font-weight:500}
.chip[aria-pressed=true]{background:var(--tinta);color:#fff}
form.inline{display:inline}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 14px;padding:16px 18px}
.form .f{display:flex;flex-direction:column;gap:3px;min-width:0} .form .f.wide{grid-column:1/-1}
.form label{font-weight:600;font-size:.88rem}
.form input,.form select,.form textarea{border:1.5px solid #B9C5BF;border-radius:7px;padding:7px 10px;background:#fff;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px var(--verde-bg)}
.form .hint{color:var(--muted);font-size:.8rem}
.form .acts{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.req{color:var(--burdeo)}
.check{flex-direction:row !important;align-items:center;gap:8px !important}
.check input{width:auto}
dialog{border:2px solid var(--burdeo);border-radius:10px;padding:0;max-width:480px;width:92vw}
dialog::backdrop{background:rgba(27,39,35,.45)}
dialog .form{grid-template-columns:1fr}
dialog h3{padding:14px 18px 0;color:var(--burdeo)}
.empty{padding:26px 18px;text-align:center;color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:12px 18px}
.kv .tot{font-weight:700;border-top:2px solid var(--tinta);padding-top:4px;margin-top:4px}
.kv span:nth-child(even){text-align:right;font-variant-numeric:tabular-nums}
.estado-box{padding:12px 18px;display:flex;gap:12px;align-items:center}
.estado-box .dot{width:14px;height:14px;border-radius:50%;flex:none}
.dot.ok{background:var(--verde)} .dot.bad{background:var(--burdeo)}
.diff{font:700 1.1rem var(--serif)}
.login{max-width:380px;margin:40px auto}
.login .sheet{padding:6px 0 10px}
.firma{margin-top:44px;page-break-inside:avoid}
.firmas{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
.firma-col{flex:1 1 200px;max-width:280px;text-align:center}
.firma-linea{border-bottom:1.5px solid var(--tinta);height:56px}
.firma-nombre{padding-top:4px;font-size:.9rem;min-height:1.4em}
.firma-directiva{text-align:center;margin-top:10px;font:700 1.05rem var(--serif);letter-spacing:.14em;color:var(--burdeo)}
.firma-sub{text-align:center;color:var(--muted);font-size:.8rem}
.rep-t{margin:6px 0 2px} .rep-meta{color:var(--muted);font-size:.88rem;margin-bottom:12px}
.diffcell del{color:var(--burdeo)} .diffcell ins{color:var(--verde-osc);text-decoration:none;font-weight:600}

@media (max-width:860px){
  .ledger{grid-template-columns:repeat(2,1fr)} .ledger>div:nth-child(3){border-left:0} .ledger>div:nth-child(n+3){border-top:1px solid var(--linea)}
  .cols,.cols-3{grid-template-columns:1fr}
  .mstrip{gap:3px;padding:12px 8px 4px} .mcol{font-size:.68rem}
  .who{width:100%}
}
@media print{
  @page{margin:14mm 12mm}
  body{background:#fff;font-size:12px}
  .noprint,nav.main,.who,.toolbar,.legend,.btn,.pie-firma,.aviso,dialog{display:none !important}
  .wrap{max-width:none;padding:0} .top{padding:0 0 8px;margin:0} .rule{margin:0;height:4px}
  .sheet,.ledger{border-color:#999} main{padding-top:10px}
  .tablewrap{overflow:visible} .t th,.t td{padding:4px 6px}
  .q,.badge,.rule,.mbar i,.mbar,.firma-linea{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit;text-decoration:none}
  .pie{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
#tabla-cuotas td:nth-child(2),#tabla-alumnos td:nth-child(2){min-width:230px}
#tabla-cuotas td:nth-child(3),#tabla-alumnos td:nth-child(3){min-width:170px}