/* ============================================================
   AI4Colegios · Libro de Pago v3 — IDENTITY DIRECTIONS
   Three fresh identities as token sets. Same components, three skins.
   [data-direction] selects the identity · [data-theme="dark"] flips mode.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------
   DIRECTION A · LEDGER  — archival accounting book
   warm ivory · dark cool chrome · pine + brass · IBM Plex superfamily
---------------------------------------------------------------- */
[data-direction="ledger"] {
  --page:#EEE8DA; --surface:#FAF7EF; --surface-2:#F3EEE0; --surface-3:#E8E1CF;
  --header-bg:#232E36; --header-text:#F3EEE0; --header-line:#33414A;
  --sidebar-bg:#1C262C; --sidebar-text:#D8DDD9; --sidebar-muted:#8A958F;
  --sidebar-hover:#28333A; --sidebar-active:#2C4A40; --sidebar-active-text:#EAF3EE; --sidebar-edge:#3A6155;
  --crest-gold:#B68F3E; --crest-frame:#B68F3E;
  --text:#21303A; --text-soft:#495862; --text-muted:#7C8A8E; --on-accent:#FAF7EF;
  --line:#DED6C2; --line-strong:#CBC1A8; --line-rule:#E3DCCB;
  --accent:#1C6B57; --accent-dark:#134F40; --accent-soft:#DCEAE2; --accent-2:#B68F3E; --accent-2-soft:#F1E7CC;
  --focus:#1C6B57;
  --st-good:#1C6B57; --st-good-bg:#DCEAE2; --st-mora1:#A86A12; --st-mora1-bg:#F3E6C8;
  --st-mora2:#98372C; --st-mora2-bg:#F0DBD3; --st-pagado:#2E5E86; --st-pagado-bg:#D8E4EE;
  --st-special:#6A4E8F; --st-special-bg:#E3DCEC;
  --m-cash:#1C6B57; --m-cash-bg:#DCEAE2; --m-transfer:#2E5E86; --m-transfer-bg:#D8E4EE;
  --m-card:#9A7A32; --m-card-bg:#F1E7CC; --wa:#1E7A4A; --wa-bg:#DCEAE0;
  --cell-paid:#E2ECE1; --cell-mora:#F0DBD3; --cell-future:transparent; --cell-current:#B68F3E;
  --font-display:"IBM Plex Serif", Georgia, serif;
  --font-ui:"IBM Plex Sans", system-ui, sans-serif;
  --font-money:"IBM Plex Mono", "Courier New", monospace;
  --fw-display:600; --ls-label:0.10em;
  --radius-card:4px; --radius-ctrl:4px; --radius-input:3px; --radius-pill:3px;
  --shadow-card:0 1px 0 rgba(33,48,58,.05); --shadow-raise:0 1px 2px rgba(33,48,58,.10);
  --shadow-pop:0 12px 34px -10px rgba(20,30,36,.42); --shadow-rail:-1px 0 0 var(--line);
  --row-h:34px; --pad-card:16px; --chrome-border:1px;
}
[data-direction="ledger"][data-theme="dark"] {
  --page:#14181A; --surface:#1A1F22; --surface-2:#1F262A; --surface-3:#28312F;
  --header-bg:#11161A; --header-text:#E6E2D5; --header-line:#262E32;
  --sidebar-bg:#0F1416; --sidebar-text:#C4C9C2; --sidebar-muted:#7E867E;
  --sidebar-hover:#1A2123; --sidebar-active:#21342E; --sidebar-active-text:#DCEFE6;
  --text:#E6E2D5; --text-soft:#B4B8AD; --text-muted:#828A82; --on-accent:#0F1416;
  --line:#2C3438; --line-strong:#3A4348; --line-rule:#262E2C;
  --accent:#4FB89C; --accent-dark:#3DA084; --accent-soft:rgba(31,107,87,.24); --accent-2:#CDA552; --accent-2-soft:rgba(182,143,62,.20);
  --crest-gold:#CDA552; --crest-frame:#CDA552;
  --st-good:#5EC2A4; --st-good-bg:rgba(28,107,87,.24); --st-mora1:#D7A24A; --st-mora1-bg:rgba(168,106,18,.26);
  --st-mora2:#E2796B; --st-mora2-bg:rgba(152,55,44,.28); --st-pagado:#7FAAD2; --st-pagado-bg:rgba(46,94,134,.28);
  --st-special:#B59AD6; --st-special-bg:rgba(106,78,143,.28);
  --m-cash:#5EC2A4; --m-cash-bg:rgba(28,107,87,.24); --m-transfer:#7FAAD2; --m-transfer-bg:rgba(46,94,134,.28);
  --m-card:#D7A24A; --m-card-bg:rgba(168,106,18,.24); --wa:#4FC07E; --wa-bg:rgba(28,107,87,.22);
  --cell-paid:rgba(28,107,87,.20); --cell-mora:rgba(152,55,44,.22);
  --shadow-card:0 1px 0 rgba(0,0,0,.30); --shadow-raise:0 1px 2px rgba(0,0,0,.35);
  --shadow-pop:0 16px 40px -12px rgba(0,0,0,.66);
}

/* ---------------------------------------------------------------
   DIRECTION B · REGISTRO — clean civic-modern
   airy white/cool chrome · one deep-teal · Public Sans · roomy
---------------------------------------------------------------- */
[data-direction="registro"] {
  --page:#F4F7FA; --surface:#FFFFFF; --surface-2:#EFF3F8; --surface-3:#E5ECF3;
  --header-bg:#FFFFFF; --header-text:#14202B; --header-line:#E4EAF0;
  --sidebar-bg:#FFFFFF; --sidebar-text:#44525E; --sidebar-muted:#8A97A2;
  --sidebar-hover:#EFF3F8; --sidebar-active:#DEF0F3; --sidebar-active-text:#0A5568; --sidebar-edge:#0C6E86;
  --crest-gold:#B0892F; --crest-frame:#0C6E86;
  --text:#14202B; --text-soft:#45525E; --text-muted:#7C8A96; --on-accent:#FFFFFF;
  --line:#E4EAF0; --line-strong:#D2DBE3; --line-rule:#EDF1F5;
  --accent:#0C6E86; --accent-dark:#0A5568; --accent-soft:#DDF0F4; --accent-2:#0F8A5F; --accent-2-soft:#DBF3E8;
  --focus:#0C6E86;
  --st-good:#0F8A5F; --st-good-bg:#DBF3E8; --st-mora1:#BE7C12; --st-mora1-bg:#FBEFD2;
  --st-mora2:#C0392B; --st-mora2-bg:#FBE2DF; --st-pagado:#2563B5; --st-pagado-bg:#DEEAFA;
  --st-special:#7A52A8; --st-special-bg:#ECE4F6;
  --m-cash:#0F8A5F; --m-cash-bg:#DBF3E8; --m-transfer:#2563B5; --m-transfer-bg:#DEEAFA;
  --m-card:#BE7C12; --m-card-bg:#FBEFD2; --wa:#1FA855; --wa-bg:#DEF3E6;
  --cell-paid:#E4F4EC; --cell-mora:#FBE5E2; --cell-future:transparent; --cell-current:#0C6E86;
  --font-display:"Public Sans", system-ui, sans-serif;
  --font-ui:"Public Sans", system-ui, sans-serif;
  --font-money:"Public Sans", system-ui, sans-serif;
  --fw-display:700; --ls-label:0.07em;
  --radius-card:12px; --radius-ctrl:9px; --radius-input:8px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(20,32,43,.06), 0 4px 14px -6px rgba(20,32,43,.10);
  --shadow-raise:0 2px 6px rgba(20,32,43,.08); --shadow-pop:0 18px 44px -12px rgba(20,32,43,.28);
  --shadow-rail:none; --row-h:44px; --pad-card:20px; --chrome-border:1px;
}
[data-direction="registro"][data-theme="dark"] {
  --page:#0E141B; --surface:#161E27; --surface-2:#1B2530; --surface-3:#23303C;
  --header-bg:#161E27; --header-text:#E7EDF3; --header-line:#28333F;
  --sidebar-bg:#131A22; --sidebar-text:#A9B6C2; --sidebar-muted:#76838F;
  --sidebar-hover:#1B2530; --sidebar-active:#15303A; --sidebar-active-text:#5FC8DE;
  --text:#E7EDF3; --text-soft:#A9B6C2; --text-muted:#76838F; --on-accent:#06222A;
  --line:#28333F; --line-strong:#38454F; --line-rule:#222D38;
  --accent:#2BA9C6; --accent-dark:#1F8AA3; --accent-soft:rgba(12,110,134,.26); --accent-2:#2FB57D; --accent-2-soft:rgba(15,138,95,.22);
  --crest-gold:#CDA552; --crest-frame:#2BA9C6;
  --st-good:#34C088; --st-good-bg:rgba(15,138,95,.24); --st-mora1:#D9A33F; --st-mora1-bg:rgba(190,124,18,.24);
  --st-mora2:#E26B5E; --st-mora2-bg:rgba(192,57,43,.26); --st-pagado:#5C9BE0; --st-pagado-bg:rgba(37,99,181,.26);
  --st-special:#A98BD2; --st-special-bg:rgba(122,82,168,.26);
  --m-cash:#34C088; --m-cash-bg:rgba(15,138,95,.24); --m-transfer:#5C9BE0; --m-transfer-bg:rgba(37,99,181,.26);
  --m-card:#D9A33F; --m-card-bg:rgba(190,124,18,.22); --wa:#3CC56E; --wa-bg:rgba(31,168,85,.22);
  --cell-paid:rgba(15,138,95,.18); --cell-mora:rgba(192,57,43,.20);
  --shadow-card:0 1px 2px rgba(0,0,0,.34), 0 4px 14px -6px rgba(0,0,0,.40);
  --shadow-raise:0 2px 6px rgba(0,0,0,.4); --shadow-pop:0 18px 44px -12px rgba(0,0,0,.62);
}

/* ---------------------------------------------------------------
   DIRECTION C · PATRIMONIO — warm Colombian Catholic heritage
   cream · ecclesiastical-blue chrome · clay + gold · Spectral + Hanken
---------------------------------------------------------------- */
[data-direction="patrimonio"] {
  --page:#F6EEE1; --surface:#FFFCF6; --surface-2:#F1E7D6; --surface-3:#E8DBC4;
  --header-bg:#1E4E7E; --header-text:#F3E9D6; --header-line:#2C5C8C;
  --sidebar-bg:#1A3A5E; --sidebar-text:#D8E2EC; --sidebar-muted:#8DA0B4;
  --sidebar-hover:#234B73; --sidebar-active:#2A5683; --sidebar-active-text:#FBF1DC; --sidebar-edge:#B08534;
  --crest-gold:#D9B468; --crest-frame:#D9B468;
  --text:#2A211C; --text-soft:#5A4B41; --text-muted:#8C7B6E; --on-accent:#FFFCF6;
  --line:#E4D7C2; --line-strong:#D2C1A6; --line-rule:#EADFCB;
  --accent:#1E4E7E; --accent-dark:#163A5E; --accent-soft:#DBE6F0; --accent-2:#B5532F; --accent-2-soft:#F2DECF;
  --focus:#1E4E7E;
  --st-good:#2E7D4F; --st-good-bg:#DDEFE0; --st-mora1:#BE7B1B; --st-mora1-bg:#F5E7C9;
  --st-mora2:#B23A2E; --st-mora2-bg:#F2DBD3; --st-pagado:#1E4E7E; --st-pagado-bg:#DBE6F0;
  --st-special:#7A4A86; --st-special-bg:#ECDEEE;
  --m-cash:#2E7D4F; --m-cash-bg:#DDEFE0; --m-transfer:#1E4E7E; --m-transfer-bg:#DBE6F0;
  --m-card:#B5532F; --m-card-bg:#F2DECF; --wa:#2E7D4F; --wa-bg:#DDEFE0;
  --cell-paid:#E0EFE2; --cell-mora:#F2DBD3; --cell-future:transparent; --cell-current:#B08534;
  --font-display:"Spectral", Georgia, serif;
  --font-ui:"Hanken Grotesk", system-ui, sans-serif;
  --font-money:"Hanken Grotesk", system-ui, sans-serif;
  --fw-display:600; --ls-label:0.08em;
  --radius-card:8px; --radius-ctrl:7px; --radius-input:6px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(42,33,28,.07), 0 6px 18px -8px rgba(42,33,28,.12);
  --shadow-raise:0 2px 5px rgba(42,33,28,.10); --shadow-pop:0 16px 40px -12px rgba(42,33,28,.34);
  --shadow-rail:none; --row-h:40px; --pad-card:18px; --chrome-border:1px;
}
[data-direction="patrimonio"][data-theme="dark"] {
  --page:#15110D; --surface:#1E1813; --surface-2:#271F18; --surface-3:#322820;
  --header-bg:#14304E; --header-text:#ECE2D4; --header-line:#1F4163;
  --sidebar-bg:#112942; --sidebar-text:#CBD7E2; --sidebar-muted:#7E91A4;
  --sidebar-hover:#173352; --sidebar-active:#1E436A; --sidebar-active-text:#F3E4C6;
  --text:#ECE2D4; --text-soft:#C0B2A2; --text-muted:#8C7B6E; --on-accent:#15110D;
  --line:#352B22; --line-strong:#473A2D; --line-rule:#2C231B;
  --accent:#5B9BD6; --accent-dark:#3F7FB8; --accent-soft:rgba(30,78,126,.30); --accent-2:#D2774E; --accent-2-soft:rgba(181,83,47,.22);
  --crest-gold:#D9B468; --crest-frame:#D9B468;
  --st-good:#4FB37A; --st-good-bg:rgba(46,125,79,.26); --st-mora1:#D7A23F; --st-mora1-bg:rgba(190,123,27,.26);
  --st-mora2:#DC6A5C; --st-mora2-bg:rgba(178,58,46,.28); --st-pagado:#5B9BD6; --st-pagado-bg:rgba(30,78,126,.30);
  --st-special:#B58CC0; --st-special-bg:rgba(122,74,134,.28);
  --m-cash:#4FB37A; --m-cash-bg:rgba(46,125,79,.26); --m-transfer:#5B9BD6; --m-transfer-bg:rgba(30,78,126,.30);
  --m-card:#D2774E; --m-card-bg:rgba(181,83,47,.24); --wa:#4FB37A; --wa-bg:rgba(46,125,79,.24);
  --cell-paid:rgba(46,125,79,.20); --cell-mora:rgba(178,58,46,.22);
  --shadow-card:0 1px 2px rgba(0,0,0,.34), 0 6px 18px -8px rgba(0,0,0,.44);
  --shadow-raise:0 2px 5px rgba(0,0,0,.4); --shadow-pop:0 16px 40px -12px rgba(0,0,0,.64);
}

/* ============================================================
   SHARED ELEMENT + UTILITY STYLES (consume the tokens above)
   ============================================================ */
.rz-root {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}
.ds-display { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: -0.01em; }
.eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-label);
  font-weight: 700; color: var(--text-muted);
}
.money { font-family: var(--font-money); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }

/* status chip */
.chip {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:var(--radius-pill); line-height:1.3; white-space:nowrap;
  letter-spacing:0.01em;
}
.chip .dot { width:7px; height:7px; border-radius:50%; flex:none; }
.st--good{ color:var(--st-good); background:var(--st-good-bg);} .st--good .dot{background:var(--st-good);}
.st--mora1{ color:var(--st-mora1); background:var(--st-mora1-bg);} .st--mora1 .dot{background:var(--st-mora1);}
.st--mora2{ color:var(--st-mora2); background:var(--st-mora2-bg);} .st--mora2 .dot{background:var(--st-mora2);}
.st--pagado{ color:var(--st-pagado); background:var(--st-pagado-bg);} .st--pagado .dot{background:var(--st-pagado);}
.st--sinmat{ color:var(--st-special); background:var(--st-special-bg);} .st--sinmat .dot{background:var(--st-special);}

.m--cash{ color:var(--m-cash); background:var(--m-cash-bg);}
.m--transfer{ color:var(--m-transfer); background:var(--m-transfer-bg);}
.m--card{ color:var(--m-card); background:var(--m-card-bg);}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.rz-root *::-webkit-scrollbar { width:10px; height:10px; }
.rz-root *::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:6px; border:2px solid var(--surface); }
.rz-root *::-webkit-scrollbar-track { background:transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }