:root{
  --navy-900:#081f33; --navy-800:#0b2c47; --navy-700:#0d3458; --navy-600:#174f83;
  --navy-500:#1e5a6e; --navy-400:#3b6f97; --teal:#0f6f86;
  --gold-600:#c9952f; --gold-500:#e0a83a; --gold-400:#f4bd45; --gold-300:#f4d65e; --gold-100:#fff6cc;
  --paper:#f4f7fb; --paper-2:#eaf1f8; --white:#ffffff;
  --ink:#10212f; --ink-2:#41566a; --ink-3:#7c92a6; --line:#dde7f1; --line-2:#e9eff6;
  --ok:#1f9d6b; --ok-bg:#e7f6ef; --warn:#d98a17; --warn-bg:#fdf2dd; --bad:#c4453b; --bad-bg:#fbe9e7;
  --info:#2563a8; --info-bg:#e6effa; --purple:#6d5bd0; --purple-bg:#efecfb;
  --shadow-sm:0 1px 2px rgba(8,31,51,.06),0 2px 8px rgba(8,31,51,.05);
  --shadow:0 6px 22px rgba(8,31,51,.10),0 2px 6px rgba(8,31,51,.06);
  --shadow-lg:0 24px 60px rgba(8,31,51,.22);
  --radius:16px; --radius-sm:11px; --radius-xs:8px;
  --sans:'Manrope',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.45;overflow-x:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* Cualquier elemento clickable (con onclick) muestra la mano, no el cursor de texto. */
[onclick]{cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c3d2e1;border-radius:20px;border:2px solid var(--paper)}
::-webkit-scrollbar-track{background:transparent}
.hidden{display:none !important}
.mono{font-family:var(--mono)}

/* ============ RECIBO ANULADO · marca de agua / etiqueta ============ */
.print-ticket .tk-void{text-align:center;font-weight:800;letter-spacing:1.5px;color:#fff;background:#111;border-radius:4px;padding:6px 4px;margin:7px 0;font-size:12.5px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.receipt.formal.is-void{position:relative;overflow:hidden}
.rc-void-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-26deg);font-size:128px;font-weight:900;letter-spacing:10px;color:rgba(196,69,59,.15);pointer-events:none;z-index:2;white-space:nowrap;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rc-void-badge{display:inline-block;margin-top:6px;background:#c4453b;color:#fff;font-weight:800;letter-spacing:1.5px;padding:5px 12px;border-radius:6px;font-size:11px;-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* ============ SELECT BUSCABLE (searchable-selects.js) ============ */
.lam-srch{position:relative;display:block;width:100%}
.lam-srch-inp{cursor:text}
.lam-srch-menu{position:absolute;z-index:99999;left:0;right:0;top:calc(100% + 3px);max-height:262px;overflow:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-xs);box-shadow:var(--shadow);padding:4px;display:none}
.lam-srch-it{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lam-srch-it:hover{background:var(--paper-2)}
.lam-srch-it.on{background:var(--gold-100);font-weight:700}
.lam-srch-none{padding:8px 10px;color:var(--ink-3);font-size:13px}
[data-theme="dark"] .lam-srch-menu{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .lam-srch-it{color:var(--ink)}
[data-theme="dark"] .lam-srch-it:hover{background:var(--hover)}
[data-theme="dark"] .lam-srch-it.on{background:rgba(244,189,69,.18)}

/* ============ LOGIN ============ */
#login{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:1.15fr .85fr;
  background:radial-gradient(1200px 700px at 80% -10%,#15436e 0%,var(--navy-800) 45%,var(--navy-900) 100%);overflow:hidden}
#login .brandside{position:relative;padding:54px 60px;color:#eaf3fb;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
#login .brandside::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 18% 22%,rgba(244,189,69,.16),transparent 38%),radial-gradient(circle at 90% 80%,rgba(31,157,107,.10),transparent 40%);}
.grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
.login-logo{display:flex;align-items:center;gap:16px;position:relative}
.login-logo .crest{width:62px;height:62px;border-radius:15px;background:linear-gradient(160deg,#fff,#e9f1fa);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.login-logo .crest i{font-size:30px;background:linear-gradient(160deg,var(--navy-600),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.login-logo .nm{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:.3px;line-height:1}
.login-logo .nm small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:4px;color:var(--gold-400);font-weight:700;margin-top:5px}
.brand-hero{position:relative;max-width:540px}
.brand-hero .since{display:inline-block;font-size:11px;letter-spacing:3px;font-weight:700;color:var(--gold-400);border:1px solid rgba(244,189,69,.35);padding:6px 14px;border-radius:30px;margin-bottom:26px}
.brand-hero h1{font-family:var(--serif);font-weight:500;font-size:50px;line-height:1.05;letter-spacing:-.5px}
.brand-hero h1 em{font-style:italic;color:var(--gold-300)}
.brand-hero p{margin-top:20px;font-size:15.5px;color:#c4d6e8;max-width:430px;line-height:1.6}
.accred{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;position:relative}
.accred span{font-size:11px;letter-spacing:.5px;color:#bdd1e4;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:7px 13px;border-radius:9px;display:flex;align-items:center;gap:7px}
.accred span i{color:var(--gold-400)}
.brand-foot{position:relative;font-size:12.5px;color:#86a3bf;display:flex;gap:22px;flex-wrap:wrap}
.brand-foot b{color:#bcd2e7;font-weight:600}
#login .formside{background:var(--white);display:flex;align-items:center;justify-content:center;padding:40px;position:relative}
.login-card{width:100%;max-width:382px;animation:rise .7s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.login-card .eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:800;color:var(--gold-600);text-transform:uppercase}
.login-card h2{font-family:var(--serif);font-size:30px;font-weight:600;margin:10px 0 4px}
.login-card .sub{color:var(--ink-3);font-size:14px;margin-bottom:26px}
.role-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--paper-2);padding:5px;border-radius:13px;margin-bottom:22px}
.role-toggle button{padding:11px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--ink-2);transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.role-toggle button.on{background:var(--white);color:var(--navy-700);box-shadow:var(--shadow-sm)}
.field{margin-bottom:15px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:7px;letter-spacing:.2px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap i{position:absolute;left:14px;color:var(--ink-3);font-size:14px}
.input-wrap input{width:100%;padding:13px 14px 13px 40px;border:1.5px solid var(--line);border-radius:11px;background:#fbfdff;transition:.2s;outline:none}
.input-wrap input:focus{border-color:var(--navy-500);background:#fff;box-shadow:0 0 0 4px rgba(30,90,110,.10)}
.input-wrap .toggle-eye{left:auto;right:14px;cursor:pointer}
.login-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0 20px;font-size:13px}
.login-row label{display:flex;align-items:center;gap:7px;color:var(--ink-2);cursor:pointer}
.login-row a{color:var(--navy-600);font-weight:600}
.btn-login{width:100%;padding:14px;border-radius:12px;background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff;font-weight:700;font-size:15px;letter-spacing:.3px;box-shadow:0 12px 26px rgba(13,52,88,.32);transition:.2s;display:flex;align-items:center;justify-content:center;gap:10px}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(13,52,88,.4)}
.login-hint{margin-top:22px;background:var(--paper);border:1px dashed var(--line);border-radius:11px;padding:13px 15px;font-size:12.5px;color:var(--ink-2)}
.login-hint b{color:var(--navy-700)}
.login-hint code{font-family:var(--mono);background:#fff;padding:2px 7px;border-radius:5px;border:1px solid var(--line);color:var(--navy-600);font-size:11.5px}
.login-err{background:var(--bad-bg);color:var(--bad);border:1px solid #f3cdc8;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:9px}

/* ============ APP SHELL ============ */
#app{display:none;min-height:100vh}
.shell{display:grid;grid-template-columns:266px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));color:#cfe0f0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}
.sb-brand{padding:20px 22px 18px;display:flex;align-items:center;gap:13px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-brand .crest{width:42px;height:42px;border-radius:11px;background:linear-gradient(160deg,#fff,#e6eef8);display:grid;place-items:center;flex-shrink:0}
.sb-brand .crest i{font-size:21px;background:linear-gradient(160deg,var(--navy-600),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.sb-brand .t{line-height:1.1}
.sb-brand .t b{font-family:var(--serif);font-size:17px;font-weight:600;color:#fff;letter-spacing:.2px}
.sb-brand .t span{display:block;font-size:9px;letter-spacing:3px;color:var(--gold-400);font-weight:700;margin-top:3px}
.sb-scroll{flex:1;overflow-y:auto;padding:14px 12px}
.sb-scroll::-webkit-scrollbar{width:6px}
.sb-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border:none}
.nav-group{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;font-family:inherit;font-size:10px;letter-spacing:2px;color:#5d7da0;font-weight:800;text-transform:uppercase;padding:16px 14px 8px;transition:.16s}
.sb-search{display:flex;align-items:center;gap:8px;margin:6px 10px 2px;padding:8px 11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:10px}
.sb-search > i{color:#7e9cbe;font-size:12px;flex-shrink:0}
.sb-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:#eaf1f9;font-family:inherit;font-size:13px}
.sb-search input::placeholder{color:#6e8aac}
.sb-search .nav-srch-x{cursor:pointer;opacity:.7}
.sb-search .nav-srch-x:hover{opacity:1;color:var(--gold-400)}
.nav-empty{color:#6e8aac;font-size:12.5px;text-align:center;padding:18px 10px}
.nav-group:hover{color:#9fb8d6}
.nav-group .ng-chev{font-size:9px;transition:transform .2s;opacity:.65}
.nav-group.collapsed .ng-chev{transform:rotate(-90deg)}
.nav-group-items.collapsed{display:none}
.nav-item{display:flex;align-items:center;gap:13px;padding:10.5px 14px;border-radius:10px;font-size:13.5px;font-weight:600;color:#bcd1e8;transition:.16s;position:relative;margin-bottom:2px;cursor:pointer}
.nav-item i{width:18px;text-align:center;font-size:14.5px;color:#7e9cbe;transition:.16s}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item:hover i{color:var(--gold-400)}
.nav-item.active{background:linear-gradient(100deg,rgba(244,189,69,.22),rgba(244,189,69,.05));color:#fff;font-weight:700}
.nav-item.active i{color:var(--gold-400)}
.nav-item.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3.5px;background:var(--gold-400);border-radius:0 4px 4px 0;box-shadow:0 0 10px rgba(244,189,69,.6)}
.nav-item .badge{margin-left:auto;background:var(--bad);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px;min-width:18px;text-align:center}
.sb-user{padding:14px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:11px}
.sb-user .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--gold-400),var(--gold-600));display:grid;place-items:center;color:var(--navy-900);font-weight:800;font-size:14px}
.sb-user .info{flex:1;line-height:1.25;min-width:0}
.sb-user .info b{display:block;font-size:13px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .info span{display:block;margin-top:2px;font-size:11px;color:#7e9cbe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .out{color:#7e9cbe;font-size:16px;padding:8px;border-radius:8px;transition:.15s}
.sb-user .out:hover{color:#fff;background:rgba(255,255,255,.08)}

.main{display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:14px 30px;display:flex;align-items:center;gap:20px}
.topbar .mob-toggle{display:none;font-size:20px;color:var(--navy-700)}
.topbar .crumb{flex:1;min-width:0}
.topbar .crumb h1{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.2px;line-height:1.1}
.topbar .crumb p{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.search-box{position:relative;width:440px;max-width:44vw}
.search-box i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:13px}
.search-box input{width:100%;padding:10px 12px 10px 36px;border:1.5px solid var(--line);border-radius:10px;background:#fbfdff;outline:none;transition:.2s}
.search-box input:focus{border-color:var(--navy-500);box-shadow:0 0 0 4px rgba(30,90,110,.08)}
.mob-search{display:none}/* solo visible en móvil (≤900px), donde se oculta .search-box */
.top-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:11px;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink-2);position:relative;transition:.16s}
.icon-btn:hover{border-color:var(--navy-400);color:var(--navy-700)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;background:var(--bad);border-radius:50%;border:2px solid #fff}
.period-pill{background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff;padding:9px 16px;border-radius:11px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.period-pill i{color:var(--gold-400)}

.view{padding:28px 30px 60px;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* cards / kpis */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden;transition:.2s;box-shadow:var(--shadow-sm)}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kpi .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;margin-bottom:14px}
.kpi .lbl{font-size:12px;color:var(--ink-3);font-weight:600;letter-spacing:.2px}
.kpi .val{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.5px;margin-top:3px;line-height:1}
.kpi .val small{font-size:15px;color:var(--ink-3);font-weight:500}
.kpi .delta{font-size:11.5px;font-weight:700;margin-top:9px;display:inline-flex;align-items:center;gap:5px}
.kpi .delta.up{color:var(--ok)} .kpi .delta.down{color:var(--bad)}
.kpi.feat{background:linear-gradient(135deg,var(--navy-700),var(--navy-800));color:#fff;border:none}
.kpi.feat .lbl{color:#9fbcd9} .kpi.feat .val{color:#fff} .kpi.feat .ic{background:rgba(244,189,69,.16);color:var(--gold-400)}
.tint-gold{background:var(--gold-100);color:var(--gold-600)} .tint-ok{background:var(--ok-bg);color:var(--ok)}
.tint-bad{background:var(--bad-bg);color:var(--bad)} .tint-info{background:var(--info-bg);color:var(--info)}
.tint-warn{background:var(--warn-bg);color:var(--warn)} .tint-purple{background:var(--purple-bg);color:var(--purple)}
.tint-navy{background:#e7eef7;color:var(--navy-600)}

.panel{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:22px;overflow:hidden}
.panel-h{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line-2)}
.panel-h h3{font-family:var(--serif);font-size:18px;font-weight:600;flex:1}
.panel-h .sub{font-size:12.5px;color:var(--ink-3);font-weight:500}
.panel-b{padding:22px}
.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* table */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.grid-2>*,.grid-3>*{min-width:0}
.view{padding-bottom:96px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);font-weight:800;padding:12px 16px;border-bottom:1.5px solid var(--line);white-space:nowrap;background:#fafcfe;position:sticky;top:0;z-index:3}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr{transition:.12s}
table.tbl tbody tr:hover{background:#f7fafd}
table.tbl tbody tr:last-child td{border-bottom:none}
.cell-name{display:flex;align-items:center;gap:11px}
.cell-name .av{width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,var(--navy-500),var(--navy-700));color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0}
.cell-name b{font-weight:700;font-size:13.5px;display:block;line-height:1.25}
.cell-name span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:1px}
.badge-st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:30px;white-space:nowrap}
.st-Pagado{background:var(--ok-bg);color:var(--ok)} .st-Parcial{background:var(--info-bg);color:var(--info)}
.st-Pendiente{background:var(--warn-bg);color:var(--warn)} .st-Vencido{background:var(--bad-bg);color:var(--bad)}
.st-Anulado{background:#eceff3;color:var(--ink-3)}
.dotb{width:7px;height:7px;border-radius:50%;background:currentColor}
.tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;background:var(--paper-2);color:var(--ink-2)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13px;transition:.16s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff;box-shadow:0 8px 18px rgba(13,52,88,.22)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(13,52,88,.3)}
.btn-gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:#fff}
.btn-gold:hover{transform:translateY(-1px)}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--navy-400);color:var(--navy-700)}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:8px}
.btn-ok{background:var(--ok-bg);color:var(--ok)} .btn-bad{background:var(--bad-bg);color:var(--bad)}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.toolbar .sp{flex:1}
.select,.inp{padding:9px 13px;border:1.5px solid var(--line);border-radius:9px;background:#fff;outline:none;font-size:13px;transition:.18s}
.select:focus,.inp:focus{border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(30,90,110,.08)}
.filter-search{position:relative}
.filter-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:12px}
.filter-search input{padding-left:34px;width:240px}

.pager{display:flex;align-items:center;gap:6px;padding:16px 22px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.pager .info{font-size:12.5px;color:var(--ink-3);margin-right:auto}
.pg-btn{min-width:34px;height:34px;padding:0 9px;border-radius:8px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--ink-2);display:grid;place-items:center;transition:.14s}
.pg-btn:hover{border-color:var(--navy-400)} .pg-btn.on{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.pg-btn:disabled{opacity:.4;cursor:default}

/* charts */
.bars{display:flex;align-items:flex-end;gap:9px;height:200px;padding-top:14px}
.bars .bar{flex:1;background:linear-gradient(180deg,var(--navy-500),var(--navy-700));border-radius:6px 6px 0 0;position:relative;min-height:4px;transition:.7s cubic-bezier(.2,.8,.2,1);display:flex;justify-content:center}
.bars .bar:hover{background:linear-gradient(180deg,var(--gold-400),var(--gold-600))}
.bars .bar span{position:absolute;top:-20px;font-size:10.5px;font-weight:700;color:var(--ink-2)}
.bars .bar small{position:absolute;bottom:-22px;font-size:10px;color:var(--ink-3);white-space:nowrap}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.legend span{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

.list-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.list-row:last-child{border-bottom:none}
.list-row .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.list-row .tx{flex:1;min-width:0}
.list-row .tx b{font-size:13.5px;font-weight:700;display:block}
.list-row .tx span{font-size:12px;color:var(--ink-3)}
.list-row .amt{font-weight:800;font-size:14px;font-family:var(--mono);white-space:nowrap;flex-shrink:0}

.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.quick{background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:16px;text-align:center;transition:.18s}
.quick:hover{border-color:var(--gold-400);transform:translateY(-3px);box-shadow:var(--shadow)}
.quick i{font-size:22px;color:var(--navy-600);margin-bottom:9px}
.quick b{display:block;font-size:13px;font-weight:700}
.quick span{font-size:11px;color:var(--ink-3)}

/* modal */
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(8,20,33,.55);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-bg.show{display:flex;animation:fade .25s}
.modal{background:#fff;border-radius:18px;width:100%;max-width:680px;box-shadow:var(--shadow-lg);animation:rise .3s cubic-bezier(.2,.7,.2,1);overflow:hidden;margin:auto;display:flex;flex-direction:column;max-height:calc(100vh - 80px)}
.modal.wide{max-width:920px}
.modal.slim{max-width:440px}
.modal-h{padding:20px 24px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:14px;flex-shrink:0}
.modal-h .mi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px}
.modal-h h3{font-family:var(--serif);font-size:20px;font-weight:600;flex:1}
.modal-h p{font-size:12.5px;color:var(--ink-3)}
.modal-h .x{font-size:20px;color:var(--ink-3);width:36px;height:36px;border-radius:9px;display:grid;place-items:center;transition:.15s}
.modal-h .x:hover{background:var(--paper-2);color:var(--ink)}
.modal-b{padding:24px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-f{padding:16px 24px;border-top:1px solid var(--line-2);display:flex;gap:10px;justify-content:flex-end;background:#fafcfe;flex-shrink:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-grid .full{grid-column:1/-1}
.fld label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fbfdff;outline:none;transition:.18s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(30,90,110,.08)}

/* detail */
.detail-head{display:flex;gap:18px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line-2);margin-bottom:20px}
.detail-head .av{width:64px;height:64px;border-radius:16px;background:linear-gradient(140deg,var(--navy-500),var(--navy-700));color:#fff;display:grid;place-items:center;font-weight:800;font-size:23px;font-family:var(--serif)}
.detail-head h2{font-family:var(--serif);font-size:24px;font-weight:600}
.detail-head .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:12.5px;color:var(--ink-3)}
.detail-head .meta b{color:var(--ink-2)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kv .item{background:var(--paper);border-radius:11px;padding:12px 14px}
.kv .item .k{font-size:11px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.kv .item .v{font-size:14px;font-weight:600;margin-top:3px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-2);margin-bottom:18px;overflow-x:auto}
.tabs button{padding:11px 16px;font-size:13px;font-weight:700;color:var(--ink-3);border-bottom:2.5px solid transparent;transition:.15s;white-space:nowrap}
.tabs button.on{color:var(--navy-700);border-color:var(--gold-400)}

/* toast */
#toasts{position:fixed;bottom:24px;right:24px;z-index:400;display:flex;flex-direction:column;gap:10px}
.toast{background:#fff;border-radius:13px;box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:13px;min-width:300px;border-left:4px solid var(--navy-600);animation:slidein .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.toast.ok{border-color:var(--ok)} .toast.bad{border-color:var(--bad)} .toast.warn{border-color:var(--warn)}
.toast i{font-size:18px} .toast.ok i{color:var(--ok)} .toast.bad i{color:var(--bad)} .toast.warn i{color:var(--warn)}
.toast .tt{flex:1} .toast .tt b{font-size:13.5px;display:block} .toast .tt span{font-size:12px;color:var(--ink-3)}

.empty{text-align:center;padding:50px 20px;color:var(--ink-3)}
.empty i{font-size:38px;color:var(--line);margin-bottom:14px}
.empty b{display:block;font-size:15px;color:var(--ink-2);font-weight:700}

.note{background:var(--info-bg);border:1px solid #c9def5;border-radius:11px;padding:13px 16px;font-size:13px;color:#1f4e7a;display:flex;gap:11px;align-items:flex-start}
.note i{margin-top:2px}
.note.warn{background:var(--warn-bg);border-color:#f0dcae;color:#8a5a12}
.note.bad{background:var(--bad-bg);border-color:#f3cdc8;color:#9a352c}

/* calculator */
.calc-students{display:flex;flex-direction:column;gap:14px}
.calc-st{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px;position:relative}
.calc-st .num{position:absolute;top:-10px;left:18px;background:var(--navy-700);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px}
.calc-st .rm{position:absolute;top:14px;right:14px;color:var(--bad);font-size:14px}
.checks{display:flex;gap:10px 18px;flex-wrap:wrap;margin-top:6px;align-items:flex-start}
.checks label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;max-width:100%;line-height:1.3}
.checks label input[type=checkbox],.checks label input[type=radio]{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--navy-600)}
.calc-total-card{background:linear-gradient(135deg,var(--navy-700),var(--navy-800));color:#fff;border-radius:16px;padding:24px;position:sticky;top:90px}
.calc-total-card .big{font-family:var(--serif);font-size:38px;font-weight:600;margin:4px 0}
.ct-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13.5px}
.ct-row span{color:#9fbcd9} .ct-row b{font-family:var(--mono);font-weight:600}
.ct-row.disc b{color:var(--gold-300)}

/* receipt */
.receipt{font-family:var(--mono);background:#fff;color:#111;width:300px;margin:0 auto;padding:18px;font-size:11.5px;line-height:1.5;border:1px dashed #bbb}
.receipt.formal{width:100%;font-family:var(--sans);border:1px solid var(--line);padding:34px}
.r-center{text-align:center} .r-line{border-top:1px dashed #999;margin:8px 0}
.r-row{display:flex;justify-content:space-between;gap:8px}

.bank-card{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:.2s}
.bank-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.bank-card .bh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bank-card .bh .lg{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:18px;color:#fff}
.bank-card .bh b{font-size:15px;font-weight:700} .bank-card .bh span{font-size:11.5px;color:var(--ink-3)}
.bank-card .bal{font-family:var(--serif);font-size:26px;font-weight:600}
.copy-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.copy-row:last-child{border:none} .copy-row b{font-weight:600} .copy-row .cp{color:var(--navy-600);cursor:pointer;font-weight:700;font-size:11px}

.seg{display:inline-flex;background:var(--paper-2);border-radius:10px;padding:4px;gap:3px}
.seg button{padding:7px 14px;border-radius:7px;font-size:12.5px;font-weight:700;color:var(--ink-2);transition:.15s}
.seg button.on{background:var(--navy-700);color:#fff;box-shadow:var(--shadow-sm)}
.btn i,.seg button i,.btn .fa-solid,.btn .fa-brands{pointer-events:none}

.otp-box{display:flex;gap:10px;justify-content:center;margin:20px 0}
.otp-box input{width:48px;height:56px;text-align:center;font-size:24px;font-weight:700;font-family:var(--mono);border:1.5px solid var(--line);border-radius:11px;background:#fbfdff}
.otp-box input:focus{border-color:var(--navy-500);outline:none;box-shadow:0 0 0 3px rgba(30,90,110,.1)}
.otp-gen{text-align:center;background:var(--navy-800);color:#fff;border-radius:12px;padding:16px;margin-bottom:18px}
.otp-gen .code{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:8px;color:var(--gold-400)}
.otp-gen .timer{font-size:12px;color:#9fbcd9;margin-top:6px}

/* student portal */
.portal-hero{background:linear-gradient(135deg,var(--navy-700),var(--navy-800));border-radius:18px;padding:28px 30px;color:#fff;display:flex;align-items:center;gap:22px;margin-bottom:22px;position:relative;overflow:hidden}
.portal-hero::after{content:"\f19d";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-10px;bottom:-20px;font-size:150px;color:rgba(255,255,255,.05)}
.portal-hero .av{width:78px;height:78px;border-radius:20px;background:linear-gradient(140deg,var(--gold-400),var(--gold-600));display:grid;place-items:center;font-size:30px;font-weight:800;color:var(--navy-900);font-family:var(--serif)}
.portal-hero h2{font-family:var(--serif);font-size:27px;font-weight:600}
.portal-hero .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:#bcd2e7}
.portal-hero .meta b{color:#fff}

@media(max-width:1100px){.grid-2,.grid-3{grid-template-columns:1fr}.calc-total-card{position:static}}

/* ===== layout / sidebar (tablet & down) ===== */
@media(max-width:900px){
  #login{grid-template-columns:1fr}#login .brandside{display:none}
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;width:266px;transform:translateX(-100%);transition:.3s}
  .sidebar.open{transform:none}
  .topbar .mob-toggle{display:block}.search-box{display:none}
  .mob-search{display:inline-flex !important}
  .sb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;display:none}
  .sb-overlay.show{display:block}
}

/* ===== MOBILE (phones & large phones) ===== */
@media(max-width:768px){
  /* --- header: dos filas, título a todo el ancho, controles abajo --- */
  .topbar{flex-wrap:wrap;gap:10px 12px;padding:12px 16px}
  .topbar .mob-toggle{order:1;flex-shrink:0}
  .topbar .crumb{order:2;flex:1 1 auto;min-width:0}
  .topbar .crumb h1{font-size:21px;line-height:1.15}
  .topbar .crumb p{font-size:12px;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
  .top-actions{order:3;flex-basis:100%;width:100%;justify-content:flex-start;flex-wrap:wrap;gap:8px;margin-top:2px}

  /* --- contenido / espaciado (deja aire para los FAB) --- */
  .view{padding:20px 16px 124px}
  .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px}
  .panel-h{flex-wrap:wrap;padding:16px 16px}
  .panel-b{padding:16px}

  /* --- toolbars / filtros: una columna ordenada, inputs 100% --- */
  .toolbar{gap:8px}
  .toolbar .sp{flex-basis:100%}
  .filter-search{flex:1 1 100%}
  .filter-search input{width:100%}
  .toolbar .btn,.toolbar .seg{flex:1 1 auto;justify-content:center}

  /* --- tablas como TARJETAS en móvil (etiquetas automáticas) --- */
  .tbl-wrap{overflow:visible;border-radius:0}
  table.tbl{min-width:0;display:block}
  table.tbl thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:auto}
  table.tbl tr{border:1px solid var(--line-2);border-radius:13px;margin:0 0 10px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
  table.tbl tbody tr:hover{background:#fff}
  table.tbl tbody tr:last-child td{border-bottom:none}
  table.tbl td{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;text-align:right;padding:10px 14px;border:none;border-bottom:1px solid var(--line-2)}
  table.tbl td::before{content:attr(data-label);font-weight:800;color:var(--ink-3);font-size:10px;text-transform:uppercase;letter-spacing:.4px;text-align:left;flex:0 0 auto;white-space:nowrap}
  table.tbl td:not([data-label])::before{display:none}
  table.tbl td:not([data-label]){justify-content:flex-end}
  table.tbl td[colspan]{display:block;text-align:center}
  table.tbl td[colspan]::before{display:none}
  table.tbl td:has(.cell-name){justify-content:flex-start;text-align:left;background:#fafcfe}
  table.tbl td:has(.cell-name)::before{display:none}
  table.tbl td .btn{flex:0 1 auto}
  .tbl-wrap .empty{position:static;width:auto;padding:40px 16px}

  /* --- formularios: una sola columna, campos táctiles --- */
  .form-grid{grid-template-columns:1fr}
  .field input,.field select,.field textarea{width:100%}
  .btn{padding:12px 16px;min-height:46px}

  /* --- modales casi a pantalla completa, footer apilado --- */
  .modal-bg{padding:14px 10px;align-items:center}
  .modal,.modal.wide,.modal.slim{max-width:100%;max-height:calc(100vh - 28px)}
  .modal-b{padding:18px}
  .modal-h{padding:16px 18px}
  .modal-f{flex-direction:column-reverse;gap:8px}
  .modal-f .btn{width:100%;justify-content:center}

  /* --- calculadora / resumen --- */
  .calc-total-card{position:static}
  .calc-total-card .big{font-size:32px}

  /* --- pestañas (auditoría, config) scrollables --- */
  .tabs{margin-bottom:14px}
}

/* ===== MOBILE COMPACTO (≤480px) ===== */
@media(max-width:480px){
  .view{padding:16px 12px 116px}
  .topbar{padding:12px 14px}
  .topbar .crumb h1{font-size:19px}
  .kpi-grid{grid-template-columns:1fr}
  .kpi .val{font-size:26px}
  .panel-h h3{font-size:16px}
  /* controles del header un poco más compactos para que entren en una fila */
  .lang-toggle button{padding:6px 10px}
  .icon-btn{width:38px;height:38px}
  .period-pill{padding:8px 12px;font-size:12px}
  .tbl-wrap .empty{width:calc(100vw - 48px)}
  .modal-h .mi{width:38px;height:38px;font-size:17px}
  .modal-h h3{font-size:18px}
  /* FAB ligeramente más arriba y compacto */
  .fab-stack{right:16px;bottom:16px}
  .fab{width:50px;height:50px;font-size:20px}
}
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{position:absolute;left:0;top:0;width:100%}
  @page{margin:12mm}
}
.print-ticket{width:80mm;margin:0 auto;padding:6mm 5mm;font-family:var(--mono);font-size:11.5px;color:#111;line-height:1.5;background:#fff}
.print-ticket .tk-logo{display:block;margin:0 auto 4px;max-height:42px}
.print-ticket .tk-h{text-align:center}
.print-ticket .tk-brand{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.5px}
.print-ticket .tk-sub{font-size:10px;color:#333}
.print-ticket .tk-title{text-align:center;font-weight:700;letter-spacing:2px;background:#111;color:#fff;padding:4px;margin:7px 0;border-radius:3px}
.print-ticket .tk-row{display:flex;justify-content:space-between;gap:6px;padding:1px 0;align-items:flex-start}
.print-ticket .tk-row>span:last-child{white-space:nowrap;flex-shrink:0;text-align:right}
.print-ticket .tk-sep{border-top:1px dashed #999;margin:6px 0}
.print-ticket .tk-tot{display:flex;justify-content:space-between;font-weight:700;font-size:13px;border-top:2px solid #111;border-bottom:2px solid #111;padding:5px 0;margin:5px 0}
.print-ticket .tk-foot{text-align:center;font-size:9.5px;color:#444;margin-top:8px}
.print-ticket .tk-note{border:1px dashed #555;border-radius:4px;padding:5px 7px;font-size:10.5px;margin:6px 0}

/* ===== floating action buttons ===== */
.fab-stack{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.fab-stack .fab,.fab-stack .fab-top{pointer-events:auto}
.fab-menu{pointer-events:none}
.fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:21px;color:#fff;box-shadow:0 10px 26px rgba(8,31,51,.30);transition:.2s;position:relative}
.fab:hover{transform:translateY(-3px) scale(1.05)}
.fab-wa{background:linear-gradient(145deg,#25d366,#1da851)}
.fab-main{background:linear-gradient(145deg,var(--navy-600),var(--navy-700))}
.fab-top{background:#fff;color:var(--navy-700);border:1.5px solid var(--line);width:46px;height:46px;font-size:17px;opacity:0;pointer-events:none;transform:translateY(10px)}
.fab-top.show{opacity:1;pointer-events:auto;transform:none}
.fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-bottom:4px}
.fab-item{display:flex;align-items:center;gap:10px;opacity:0;transform:translateX(20px) scale(.9);pointer-events:none;transition:.22s}
.fab-stack.open .fab-item{opacity:1;transform:none;pointer-events:auto}
.fab-stack.open .fab-item:nth-child(1){transition-delay:.02s}
.fab-stack.open .fab-item:nth-child(2){transition-delay:.05s}
.fab-stack.open .fab-item:nth-child(3){transition-delay:.08s}
.fab-stack.open .fab-item:nth-child(4){transition-delay:.11s}
.fab-stack.open .fab-item:nth-child(5){transition-delay:.14s}
.fab-item .lbl{background:var(--navy-800);color:#fff;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:9px;box-shadow:var(--shadow);white-space:nowrap}
.fab-item .mini{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy-700);border:1.5px solid var(--line);font-size:16px;box-shadow:var(--shadow-sm)}
.fab-item:hover .mini{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.fab-main i{transition:.25s}.fab-stack.open .fab-main i{transform:rotate(135deg)}

.wa-mini{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#25d36622;color:#1da851;font-size:13px;margin-left:6px;transition:.15s;vertical-align:middle}
.wa-mini:hover{background:#25d366;color:#fff;transform:scale(1.1)}

.lang-toggle{display:inline-flex;background:var(--paper-2);border-radius:9px;padding:3px;gap:2px}
.lang-toggle button{padding:6px 11px;border-radius:7px;font-size:12px;font-weight:800;color:var(--ink-2);transition:.15s}
.lang-toggle button.on{background:#fff;color:var(--navy-700);box-shadow:var(--shadow-sm)}
.login-lang{position:absolute;top:24px;right:30px;z-index:3}

.fam-card{background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);transition:.2s}
.fam-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}

/* command palette */
.cmdk-bg{position:fixed;inset:0;background:rgba(8,22,38,.55);backdrop-filter:blur(4px);z-index:200;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.cmdk-bg.show{display:flex}
.cmdk{width:min(640px,92vw);background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;animation:cmdkIn .15s ease}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.cmdk-in i{color:var(--ink-3);font-size:17px}
.cmdk-in input{flex:1;border:none;outline:none;font-size:16px;font-family:inherit;color:var(--ink)}
.cmdk-in kbd{font-size:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink-3)}
.cmdk-res{max-height:50vh;overflow:auto;padding:8px}
.cmdk-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer}
.cmdk-row:hover,.cmdk-row.sel{background:var(--paper-2)}
.cmdk-row .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--navy-700);color:#fff;font-size:13px;font-weight:700;flex-shrink:0}
.cmdk-sec{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--ink-3);padding:8px 12px 4px}

/* signature pad */
.sigwrap{border:2px dashed var(--line);border-radius:12px;background:#fff;position:relative}
.sigwrap canvas{display:block;width:100%;height:200px;border-radius:12px;touch-action:none;cursor:crosshair}
.sigwrap .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:13px;pointer-events:none}

/* student ID card */
.idcard{width:340px;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(8,31,51,.25);font-family:var(--sans,'Manrope',sans-serif);margin:0 auto;background:#fff}
.idcard .top{background:linear-gradient(135deg,var(--navy-700),var(--navy-500));color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.idcard .top img{height:30px;background:#fff;border-radius:6px;padding:3px}
.idcard .body{padding:16px;display:flex;gap:14px}
.idcard .photo{width:84px;height:104px;border-radius:10px;object-fit:cover;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;font-size:30px;color:var(--ink-3);font-weight:800}
.idcard .foot{background:var(--gold-400);color:var(--navy-800);font-size:10px;font-weight:700;text-align:center;padding:6px;letter-spacing:.5px}
/* ===== enrollment: commitments & sections ===== */
.reg-sec{margin-top:15px;margin-bottom:2px;font-size:12px;font-weight:800;color:var(--navy-600);letter-spacing:.4px}
.reg-commit{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 2px}
.reg-commit .cm{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line-2);border-radius:11px;padding:10px 12px;background:#fff;font-size:13px;cursor:pointer;transition:.15s}
.reg-commit .cm:hover{border-color:var(--navy-400)}
.reg-commit .cm input{margin:0;flex-shrink:0;width:17px;height:17px;accent-color:var(--navy-600)}
.reg-commit .cm .lb{flex:1;font-weight:600;color:var(--ink);line-height:1.25}
.reg-commit .cm .lb em{font-style:normal;font-size:9.5px;font-weight:800;color:var(--ink-3);background:var(--paper-2);padding:2px 6px;border-radius:6px;margin-left:4px;text-transform:uppercase;letter-spacing:.3px}
.reg-commit .cm .amt{font-size:12px;font-weight:700;color:var(--navy-700);white-space:nowrap}
.reg-commit .cm.off{opacity:.55;background:var(--paper-2);cursor:not-allowed}
.reg-commit .cm.off .amt{color:var(--ink-3)}
@media(max-width:768px){ .reg-commit{grid-template-columns:1fr} }

/* ===== enrollment wizard stepper ===== */
.reg-stepper{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.rs-step{flex:1;min-width:120px;display:flex;align-items:center;gap:9px;padding:9px 12px;border:1.5px solid var(--line-2);border-radius:11px;background:#fff;cursor:pointer;transition:.15s;font:inherit;text-align:left}
.rs-step:hover{border-color:var(--navy-400)}
.rs-step .rs-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--ink-3);font-size:12px;font-weight:800;flex-shrink:0}
.rs-step .rs-l{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.rs-step.on{border-color:var(--navy-600);background:#f3f8fd}
.rs-step.on .rs-n{background:var(--navy-600);color:#fff}
.rs-step.on .rs-l{color:var(--navy-700)}
.rs-step.done .rs-n{background:var(--ok);color:#fff}
.rs-step.done .rs-l{color:var(--ink-2)}
@media(max-width:768px){ .reg-stepper{gap:5px} .rs-step{min-width:0;flex:1;padding:8px 6px;flex-direction:column;text-align:center;gap:4px} .rs-step .rs-l{font-size:10px;line-height:1.2} }

/* ===== header user avatar + menu ===== */
.user-chip{position:relative;display:flex;align-items:center;gap:7px;cursor:pointer;padding:4px 9px 4px 4px;border-radius:30px;border:1.5px solid var(--line-2);background:#fff;transition:.15s;user-select:none}
.user-chip:hover{border-color:var(--navy-400)}
.user-chip .uc-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,var(--navy-500),var(--navy-700));color:#fff;display:grid;place-items:center;font-weight:800;font-size:12.5px;flex-shrink:0}
.user-chip .uc-caret{font-size:11px;color:var(--ink-3)}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;width:236px;background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:0 18px 44px rgba(8,31,51,.18);padding:8px;z-index:120;display:none}
.user-menu.open{display:block;animation:fade .15s ease}
.user-menu .um-head{padding:8px 11px 10px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.user-menu .um-head b{display:block;font-size:13.5px;color:var(--navy-700)}
.user-menu .um-head span{font-size:11.5px;color:var(--ink-3)}
.user-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:9px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;background:none;border:none;text-align:left}
.user-menu button:hover{background:var(--paper-2)}
.user-menu .um-i{width:20px;text-align:center;color:var(--navy-600)}
.user-menu .um-out{color:var(--bad)}
.user-menu .um-out .um-i{color:var(--bad)}
@media(max-width:768px){ .user-chip .uc-caret{display:none} .user-menu{position:fixed;top:62px;right:12px} }

/* ===== Student portal (multi-sección) ===== */
.pside{background:linear-gradient(180deg,var(--navy-800,#0b2c47),var(--navy-700,#0d3458));color:#cfe0f0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.pside .ph{padding:18px 16px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #ffffff14}
.pside .ph img{height:34px;width:34px;border-radius:9px;background:#fff;object-fit:contain;padding:3px}
.pnav{flex:1;overflow:auto;padding:10px 9px}
.pnav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-size:13px;font-weight:600;color:#cfe0f0;margin-bottom:2px;cursor:pointer;transition:.13s}
.pnav a i{width:17px;text-align:center;color:#9fc0dd}
.pnav a:hover{background:#ffffff12;color:#fff}
.pnav a.on{background:linear-gradient(135deg,var(--gold-400,#f4bd45),var(--gold-600,#b07d12));color:#fff}
.pnav a.on i{color:#fff}
.pbot{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:30;padding:6px 2px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around}
.pbot a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:700;color:var(--ink-3);padding:5px;flex:1;text-align:center;cursor:pointer}
.pbot a i{font-size:16px}
.pbot a.on{color:var(--navy-700)}
.pburger{display:none;background:transparent;border:none;color:var(--navy-700);width:42px;height:42px;font-size:20px;align-items:center;justify-content:center}
.pburger:hover{background:var(--paper-2);color:var(--navy-700)}
.pburger i{pointer-events:none}
#pscrim{display:none;position:fixed;inset:0;background:rgba(8,35,59,.45);z-index:40}
.pbar{height:9px;border-radius:6px;background:var(--line-2);overflow:hidden}
.pbar>span{display:block;height:100%;background:linear-gradient(90deg,var(--navy-600,#174f83),var(--gold-500,#d29a23))}
.psched{display:grid;grid-template-columns:54px repeat(5,1fr);gap:5px;font-size:11.5px}
.psched .hd{font-weight:700;color:var(--navy-700);text-align:center;padding:6px 3px;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px}
.psched .tm{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;justify-content:center}
.psched .cell{background:var(--paper);border:1px solid var(--line-2);border-radius:8px;padding:7px 6px;min-height:42px}
.psched .cell b{display:block;font-size:11.5px;color:var(--navy-800,#0b2c47)}
.psched .cell span{font-size:9.5px;color:var(--ink-3)}
/* ===== Barra superior del portal (estudiante) — alineación robusta en móvil ===== */
.topbar.ptop{flex-wrap:nowrap;gap:12px;align-items:center}
.topbar.ptop .crumb.ptitle{order:0;flex:1 1 auto;min-width:0}
.topbar.ptop .crumb.ptitle b{font-family:var(--serif);color:var(--navy-700);font-size:19px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.topbar.ptop .ptop-actions{order:0;display:flex;align-items:center;gap:8px;flex-shrink:0}
.ph-bal{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.05;white-space:nowrap}
@media(max-width:600px){
  .topbar.ptop{flex-wrap:wrap;gap:8px 10px;padding:10px 14px}
  .topbar.ptop .pburger{order:0;flex-shrink:0}
  .topbar.ptop .crumb.ptitle{order:0;flex:1 1 auto}
  .topbar.ptop .crumb.ptitle b{font-size:16px}
  .topbar.ptop .ptop-actions{order:1;flex:1 1 100%;justify-content:flex-end;gap:6px}
  .topbar.ptop .ptop-actions .period-pill{display:none} /* el período ya aparece en la tarjeta del estudiante */
  .portal-hero{padding:20px 18px;gap:14px}
  .portal-hero .av{width:58px;height:58px;font-size:22px;border-radius:16px;flex-shrink:0}
  .portal-hero h2{font-size:20px;line-height:1.15}
  .portal-hero .meta{gap:8px 14px;font-size:11.5px;margin-top:6px}
  .ph-bal{font-size:24px}
}
@media(max-width:860px){
  .pshell{grid-template-columns:1fr!important}
  .pside{position:fixed;left:0;top:0;width:252px;transform:translateX(-100%);transition:.25s;z-index:50}
  .pside.open{transform:none}
  .pburger{display:inline-flex}
  .pbot{display:flex}
  .psched{grid-template-columns:42px repeat(5,1fr);font-size:9.5px}
}

/* ===== Lote 10: recibos en móvil — evitar que el ticket/recibo salga cortado ===== */
#receiptHolder{ overflow-x:auto; -webkit-overflow-scrolling:touch; display:flex; justify-content:center; }
#receiptHolder #receiptInner{ max-width:100%; }
@media (max-width:600px){
  #receiptHolder .receipt.formal{ max-width:100%!important; width:100%!important; padding:18px 16px!important; box-shadow:none!important; }
  #receiptHolder .print-ticket{ width:100%!important; max-width:340px; margin:0 auto!important; }
  .modal-b{ overflow-x:auto; }
}

/* ===== Tanda 5: ajustes responsive (recibos en PC + portal de estudiante) ===== */
/* En pantallas grandes el cuerpo del modal usa más alto: el recibo formal (8.5x11) ya no se ve recortado a 65vh */
@media(min-width:900px){ .modal-b{ max-height:82vh; } }
/* Recibo formal centrado y a tamaño de página (no estirado) en escritorio */
#receiptHolder .receipt.formal{ max-width:740px; width:100%; margin:0 auto; }
/* Cabecera del modal: en anchos medios el selector Ticket/Formal pasa a una línea completa y no se recorta */
@media(max-width:820px){
  .modal-h{ flex-wrap:wrap; row-gap:10px; }
  .modal-h .seg{ order:3; flex:1 1 100%; margin-right:0!important; justify-content:center; }
}
/* Portal del estudiante: contener desbordes horizontales para que el contenido no quede recortado */
.pshell .main{ overflow-x:hidden; }
.pshell .main .view{ min-width:0; }
/* Tablas anchas dentro del portal siempre con scroll propio (no recorte) */
#portalView .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===== Tanda 6: búsquedas guardadas (chips) ===== */
.saved-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-4px 0 14px; }
.saved-bar:empty{ display:none; }
.ss-lbl{ font-size:11.5px; font-weight:700; color:var(--ink-3); letter-spacing:.3px; }
.ss-chip{ display:inline-flex; align-items:center; background:var(--paper-2,#eef3f8); border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
.ss-chip .ss-apply{ font-size:12px; font-weight:700; color:var(--navy-700); padding:5px 6px 5px 12px; cursor:pointer; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-chip .ss-apply:hover{ color:var(--navy-600); text-decoration:underline; }
.ss-chip .ss-del{ font-size:11px; color:var(--ink-3); padding:5px 10px 5px 6px; cursor:pointer; }
.ss-chip .ss-del:hover{ color:var(--bad); }

/* ===== Tanda 2 (LOTE 12): campanita de avisos + pager arriba ===== */
.notif-dot{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--bad,#e5484d); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px #fff; }
.pager-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }

/* ===== Tanda 4 (LOTE 12): selector de perfiles (estilo Netflix) ===== */
.profile-screen{ min-height:100vh; background:linear-gradient(160deg,var(--navy-800,#0b2c47),var(--navy-900,#071d30)); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:70px 20px 40px; color:#fff; position:relative; }
.ps-top{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:12px; padding:16px 20px; }
.ps-top .lang-toggle{ margin-left:auto; }
.ps-title{ font-family:var(--serif); font-size:clamp(24px,4vw,36px); font-weight:600; text-align:center; }
.ps-sub{ color:#9fc0dd; margin:6px 0 30px; text-align:center; font-size:13.5px; }
.profile-grid{ display:flex; flex-wrap:wrap; gap:26px; justify-content:center; max-width:780px; }
.profile-tile{ cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:10px; width:150px; transition:.18s; }
.profile-tile:hover{ transform:translateY(-4px); }
.pt-av{ width:120px; height:120px; border-radius:16px; overflow:hidden; display:grid; place-items:center; font-family:var(--serif); font-weight:800; font-size:40px; color:#fff; background:linear-gradient(140deg,var(--gold-400,#f4bd45),var(--gold-600,#b07d12)); border:3px solid transparent; transition:.18s; }
.profile-tile:hover .pt-av{ border-color:#fff; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.pt-av img{ width:100%; height:100%; object-fit:cover; }
.pt-name{ font-size:15px; font-weight:700; }
.pt-sub{ font-size:11.5px; color:#9fc0dd; margin-top:-4px; }
@media(max-width:520px){ .profile-tile{ width:42%; } .pt-av{ width:96px; height:96px; font-size:32px; } }

/* ===== Tanda 5 (LOTE 12 · req 16): tienda — uniformes ancho + carrito a la derecha ===== */
.store-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; margin-bottom:16px; }
.store-cart{ position:sticky; top:90px; }
@media(max-width:900px){ .store-grid{ grid-template-columns:1fr; } .store-cart{ position:static; } }

/* ===== v1.57: selector de perfiles — controles visibles sobre navy ===== */
.ps-logout{ width:42px; height:42px; border-radius:11px; background:#ffffff1a; border:1px solid #ffffff40; color:#fff; cursor:pointer; display:grid; place-items:center; font-size:15px; transition:.15s; }
.ps-logout:hover{ background:#ffffff2e; }
.ps-lang{ background:#ffffff14; border:1px solid #ffffff33; }
.ps-lang button{ color:#cfe0f2; }
.ps-lang button.on{ background:#fff; color:var(--navy-700); }

/* ===== v1.57: carrito de tienda — tarjetas limpias ===== */
.cart-list{ display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow-y:auto; padding-right:4px; }
.cart-list::-webkit-scrollbar{ width:7px; }
.cart-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.cart-item{ border:1px solid var(--line-2); border-radius:12px; padding:10px 12px; background:#fff; }
.ci-top{ display:flex; align-items:center; gap:9px; }
.ci-ic{ width:30px; height:30px; border-radius:8px; background:var(--navy-50,#eef3f8); color:var(--navy-700); display:grid; place-items:center; font-size:13px; flex-shrink:0; }
.ci-name{ flex:1; font-weight:700; font-size:13px; line-height:1.25; min-width:0; }
.ci-x{ border:none; background:none; color:var(--ink-3); cursor:pointer; padding:4px; border-radius:6px; flex-shrink:0; }
.ci-x:hover{ background:var(--line-2); color:var(--bad); }
.ci-bot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }
.ci-qty{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; }
.ci-qty button{ border:none; background:var(--paper); color:var(--navy-700); width:28px; height:28px; cursor:pointer; font-size:15px; font-weight:700; }
.ci-qty button:hover{ background:var(--line-2); }
.ci-qty span{ min-width:30px; text-align:center; font-family:var(--mono); font-weight:700; font-size:13px; }
.ci-amt{ text-align:right; line-height:1.2; }
.ci-amt .ci-unit{ display:block; font-size:10.5px; color:var(--ink-3); }
.ci-amt b{ font-size:14px; color:var(--navy-700); }
.cart-foot{ border-top:1px solid var(--line-2); margin-top:12px; padding-top:12px; }
.cart-foot .cf-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); }
.cart-foot .cf-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:4px; font-family:var(--serif); }
.cart-foot .cf-total span{ font-size:16px; font-weight:600; }
.cart-foot .cf-total b{ font-size:20px; color:var(--navy-700); }

/* ============ DARK MODE (v1.58) ============ */
:root{ --surface:#ffffff; --surface-2:#fbfdff; --hover:#f7fafd; }
[data-theme="dark"]{
  --paper:#0d1722; --paper-2:#13202d; --white:#16232f;
  --surface:#16232f; --surface-2:#1c2c3b; --hover:#1d2f40;
  --ink:#e9eef5; --ink-2:#b6c5d4; --ink-3:#8194a6;
  --line:#28394b; --line-2:#223345;
  --ok-bg:#0f2a22; --warn-bg:#2c2410; --bad-bg:#2e1714; --info-bg:#12253a; --purple-bg:#1d1a33; --gold-100:#2a2412; --gold-300:#f4d65e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.32);
  --shadow:0 6px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  --shadow-lg:0 24px 60px rgba(0,0,0,.62);
}
[data-theme="dark"] body{ background:var(--paper); }
[data-theme="dark"] .panel,
[data-theme="dark"] .kpi,
[data-theme="dark"] .modal,
[data-theme="dark"] .bank-card,
[data-theme="dark"] .cart-item,
[data-theme="dark"] .user-menu{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .btn-ghost{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }
[data-theme="dark"] .topbar{ background:rgba(13,23,34,.85); border-color:var(--line); }
[data-theme="dark"] table.tbl tbody tr:hover{ background:var(--hover); }
[data-theme="dark"] .inp,
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,
[data-theme="dark"] .fld input,[data-theme="dark"] .fld select,[data-theme="dark"] .fld textarea,
[data-theme="dark"] .filter-search{ background:var(--surface-2); border-color:var(--line); color:var(--ink); }
[data-theme="dark"] .filter-search input{ background:transparent; }
[data-theme="dark"] .modal-f{ background:var(--paper-2); border-color:var(--line); }
[data-theme="dark"] .modal-h{ border-color:var(--line); }
[data-theme="dark"] .note{ border-color:var(--line); }
[data-theme="dark"] .pg-btn,[data-theme="dark"] .select{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }
[data-theme="dark"] .ci-ic{ background:var(--surface-2); color:#cfe0f2; }
[data-theme="dark"] .ci-qty{ border-color:var(--line); }
[data-theme="dark"] .ci-qty button{ background:var(--paper-2); color:#cfe0f2; }
[data-theme="dark"] .ci-amt b,[data-theme="dark"] .cart-foot .cf-total b,[data-theme="dark"] .cell-name b{ color:var(--ink); }
[data-theme="dark"] .saved-bar{ background:transparent; }
[data-theme="dark"] .seg,[data-theme="dark"] .role-toggle{ background:var(--paper-2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#33485d; border-color:var(--paper); }
[data-theme="dark"] .empty{ color:var(--ink-3); }
[data-theme="dark"] .kpi .val{ color:var(--ink); }
[data-theme="dark"] .icon-btn{ color:var(--ink-2); }

/* ============ DENSITY: COMPACT (v1.58) ============ */
[data-density="compact"] table.tbl td{ padding:7px 12px; }
[data-density="compact"] table.tbl th{ padding:6px 12px; }
[data-density="compact"] .kpi{ padding:13px 15px; }
[data-density="compact"] .panel{ margin-bottom:14px; }
[data-density="compact"] .cell-name .av{ width:28px; height:28px; font-size:11px; }
[data-density="compact"] .list-row{ padding:7px 10px; }

/* Login conserva su paleta clara propia aunque el resto esté en dark */
#login{ --paper:#f4f7fb; --paper-2:#eaf1f8; --surface:#fff; --surface-2:#fbfdff; --hover:#f7fafd; --ink:#10212f; --ink-2:#41566a; --ink-3:#7c92a6; --line:#dde7f1; --line-2:#e9eff6; }

/* Recibos/documentos imprimibles: siempre papel claro, aunque la app esté en dark */
.receipt{ --ink:#10212f; --ink-2:#41566a; --ink-3:#7c92a6; --line:#dde7f1; --line-2:#e9eff6; --surface:#fff; --surface-2:#fbfdff; --paper:#f4f7fb; --paper-2:#eaf1f8; }
[data-theme="dark"] .quick{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .quick:hover{ border-color:var(--navy-400); }

/* ============ CENTRO DE MANDO (v1.60) ============ */
.command-center{ background:linear-gradient(135deg,var(--navy-700),var(--navy-900)); color:#fff; border-radius:var(--radius); padding:22px 24px; margin-bottom:22px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.command-center::after{ content:''; position:absolute; right:-60px; top:-60px; width:240px; height:240px; background:radial-gradient(circle,rgba(244,189,69,.16),transparent 70%); pointer-events:none; }
.cc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.cc-kicker{ font-size:11px; letter-spacing:1.5px; font-weight:800; color:var(--gold-400); }
.cc-title{ font-family:var(--serif); font-size:24px; font-weight:600; margin-top:3px; }
.cc-pres{ background:#ffffff14!important; border-color:#ffffff33!important; color:#cfe0f2!important; }
.cc-pres:hover{ background:#ffffff24!important; }
.cc-grid{ display:grid; grid-template-columns:200px 1fr 1.2fr; gap:22px; align-items:center; margin-top:12px; }
.cc-gauge{ display:grid; place-items:center; }
#ccRing{ transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1); }
.cc-figs{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.cc-fig{ display:flex; flex-direction:column; gap:3px; }
.cc-l{ font-size:11.5px; color:#9fbcd9; }
.cc-v{ font-family:var(--serif); font-size:22px; font-weight:600; }
.cc-cartera{ border-left:1px solid #ffffff1f; padding-left:22px; }
.cc-sub{ font-size:11px; letter-spacing:.5px; font-weight:800; color:#9fbcd9; margin-bottom:8px; }
.cc-brow{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cc-bl{ width:74px; font-size:12px; color:#cfe0f2; flex-shrink:0; }
.cc-btrack{ flex:1; height:9px; background:#ffffff14; border-radius:8px; overflow:hidden; }
.cc-bfill{ height:100%; width:0; border-radius:8px; transition:width .9s cubic-bezier(.2,.7,.2,1); }
.cc-bv{ font-size:12.5px; min-width:92px; text-align:right; }
.cc-trow{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:12.5px; cursor:pointer; border-bottom:1px solid #ffffff10; }
.cc-trow:hover{ color:var(--gold-300); }
.cc-trow b{ color:#fff; }
@media(max-width:1000px){ .cc-grid{ grid-template-columns:1fr; } .cc-cartera{ border-left:none; padding-left:0; border-top:1px solid #ffffff1f; padding-top:16px; } }

/* ===== Confeti + cuenta saldada ===== */
.confetti-wrap{ position:fixed; inset:0; pointer-events:none; z-index:9998; overflow:hidden; }
.confetti-piece{ position:absolute; top:-14px; width:9px; height:14px; opacity:.95; animation:confetti-fall linear forwards; }
@keyframes confetti-fall{ 0%{ transform:translateY(-14px) rotate(0); opacity:1; } 100%{ transform:translateY(106vh) rotate(var(--rot,360deg)); opacity:.85; } }
.saldada-badge{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); z-index:9999; background:linear-gradient(135deg,var(--navy-700),var(--navy-900)); color:#fff; border:1px solid #ffffff22; border-radius:18px; padding:26px 36px; text-align:center; box-shadow:var(--shadow-lg); animation:saldada-in .45s cubic-bezier(.2,.9,.3,1.2) forwards; }
.saldada-badge.out{ animation:saldada-out .5s ease forwards; }
.saldada-badge .sb-ic{ font-size:46px; color:#3ad29a; margin-bottom:8px; }
.saldada-badge .sb-t{ font-family:var(--serif); font-size:24px; font-weight:600; }
.saldada-badge .sb-s{ font-size:13px; color:#9fbcd9; margin-top:4px; }
@keyframes saldada-in{ from{ transform:translate(-50%,-50%) scale(.8); opacity:0; } to{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
@keyframes saldada-out{ to{ transform:translate(-50%,-58%) scale(.95); opacity:0; } }

/* ===== Modo presentación (oculta montos en vivo) ===== */
[data-present="1"] .cc-v,[data-present="1"] .cc-bv,[data-present="1"] .kpi .val,[data-present="1"] .amt,[data-present="1"] .cc-trow b{ filter:blur(8px); transition:filter .15s; }
[data-present="1"] .cc-v:hover,[data-present="1"] .cc-bv:hover,[data-present="1"] .kpi .val:hover,[data-present="1"] .amt:hover,[data-present="1"] .cc-trow b:hover{ filter:none; }

/* ===== Fix PDF/impresión de documentos (presupuesto, estado de cuenta, recibos) =====
   Los encabezados de tabla usan position:sticky para las tablas de pantalla; eso
   descoloca el <thead> al rasterizar con html2canvas (se solapaba con "TOTAL GENERAL")
   y el @media print lo ocultaba. Dentro de documentos los forzamos estáticos/visibles. */
.receipt table.tbl th,#printArea table.tbl th,#qprint table.tbl th{position:static !important;top:auto !important;z-index:auto !important}
@media print{
  .receipt table.tbl thead,#printArea table.tbl thead,#qprint table.tbl thead{position:static !important;width:auto !important;height:auto !important;overflow:visible !important;clip:auto !important;white-space:normal !important}
  .receipt table.tbl th,#printArea table.tbl th,#qprint table.tbl th{position:static !important;clip:auto !important}
}
/* Cada bloque de estudiante del presupuesto y filas de tabla no se parten entre páginas. */
@media print{
  #qdetail>div,.receipt table.tbl tr,#qprint table.tbl tr{break-inside:avoid;page-break-inside:avoid}
}

/* Ojo para mostrar/ocultar contraseña (campos fuera del login) */
.pw-wrap{position:relative;display:block}
.pw-wrap .pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--ink-3);font-size:14px}
.pw-wrap .pw-eye:hover{color:var(--navy-600)}

/* Loader de módulos / vistas pesadas */
.view-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:80px 20px;min-height:320px}
.view-spin{width:42px;height:42px;border:4px solid var(--line-2,#e5e9f0);border-top-color:var(--navy-600,#1f4e79);border-radius:50%;animation:lamspin .8s linear infinite}
.view-loader-tx{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.3px}
@keyframes lamspin{to{transform:rotate(360deg)}}

/* Selector segmentado del tipo de cobro (Cargos/Cafetería/Otro) */
.pay-seg{display:flex;width:100%;border:1px solid var(--line-2);background:var(--paper-2)}
.pay-seg button{flex:1;justify-content:center;display:flex;align-items:center;gap:6px;white-space:nowrap}
.pay-seg button i{font-size:11px}

/* Cumpleaños a todo lo ancho: grilla multi-columna */
.bday-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 18px}
@media(max-width:640px){.bday-grid{grid-template-columns:1fr}}

/* Campanita de solicitudes: badge con conteo + parpadeo si hay pendientes */
.bell-btn{position:relative;overflow:visible}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad,#c4453b);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px #fff}
.bell-btn.has-new{animation:bellpulse 1.8s ease-in-out infinite;transform-origin:50% 0}
.bell-btn.has-new .notif-badge{animation:badgeglow 1.8s ease-in-out infinite}
@keyframes bellpulse{0%,55%,100%{transform:rotate(0)}60%{transform:rotate(-10deg)}66%{transform:rotate(9deg)}72%{transform:rotate(-7deg)}78%{transform:rotate(5deg)}84%{transform:rotate(0)}}
@keyframes badgeglow{0%,100%{box-shadow:0 0 0 2px #fff}50%{box-shadow:0 0 0 2px #fff,0 0 8px 2px rgba(196,69,59,.55)}}

/* ===== Configuración por pestañas ===== */
.cfg-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
.cfg-tab-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-weight:700;font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;white-space:nowrap;transition:.15s}
.cfg-tab-btn i{font-size:13px;color:var(--ink-3)}
.cfg-tab-btn:hover{border-color:var(--navy-400);color:var(--navy-700)}
.cfg-tab-btn.active{background:linear-gradient(135deg,var(--navy-700),var(--navy-600));border-color:transparent;color:#fff}
.cfg-tab-btn.active i{color:var(--gold-400)}
.cfg-pane{display:none;animation:cfgFade .18s ease}
.cfg-pane.active{display:block}
@keyframes cfgFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cfg-prov{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cfg-prov-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:700;font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;transition:.15s}
.cfg-prov-btn i{color:var(--ink-3)}
.cfg-prov-btn:hover:not(:disabled){border-color:var(--navy-400)}
.cfg-prov-btn.active{border-color:var(--gold-400);background:rgba(244,189,69,.10);color:var(--navy-700);box-shadow:0 0 0 1px var(--gold-400) inset}
.cfg-prov-btn.active i{color:var(--gold-500)}
.cfg-prov-btn.soon{opacity:.5;cursor:not-allowed}
.cfg-save{margin-top:16px}
@media (max-width:560px){ .cfg-tab-btn span{display:none} .cfg-tab-btn{padding:10px 13px} }