/* ============================================================
   Phase 2 — additional surfaces (Registro): ficha, family, SOP,
   config, register modal, receipt, import/export, column mgr, toast.
   ============================================================ */

/* generic content column */
.pad { padding:18px 24px 28px; }
.backlink { display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:600; font-size:12.5px; margin:14px 24px 0; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.card-h { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.card-h b { font-family:var(--font-display); font-weight:var(--fw-display); font-size:16px; }
.card-b { padding:16px 18px; }
.grid2 { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.row-kv { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-rule); font-size:13px; }
.row-kv:last-child { border-bottom:none; }
.row-kv .k { color:var(--text-muted); font-weight:600; white-space:nowrap; padding-right:14px; }
.row-kv .v { font-weight:600; color:var(--text); }
.row-kv .v.money { font-family:var(--font-money); }

/* student header banner */
.stu-banner { display:flex; align-items:center; gap:16px; padding:18px; }
.stu-banner .big-av { width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:24px; flex:none; }
.stu-banner h2 { font-family:var(--font-display); font-weight:var(--fw-display); font-size:24px; margin:0; }
.stu-banner .meta { font-size:13px; color:var(--text-muted); margin-top:3px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* payment history month grid */
.histgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.histcell { border:1px solid var(--line); border-radius:var(--radius-input); padding:10px 8px; text-align:center; }
.histcell .mo { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; }
.histcell .mk { font-size:15px; font-weight:800; margin-top:5px; }
.histcell.paid { background:var(--cell-paid); border-color:transparent; } .histcell.paid .mk { color:var(--st-good); }
.histcell.mora { background:var(--cell-mora); border-color:transparent; } .histcell.mora .mk { color:var(--st-mora2); }
.histcell.cur { box-shadow:inset 0 0 0 2px var(--cell-current); }
.histcell.future .mk { color:var(--text-muted); opacity:.5; }

/* family statement table */
.fam-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.fam-table th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--line-strong); }
.fam-table th.r, .fam-table td.r { text-align:right; }
.fam-table td { padding:13px 14px; border-bottom:1px solid var(--line-rule); }
.fam-table td.money { font-family:var(--font-money); font-weight:600; }
.fam-table tr.total td { font-weight:800; border-top:2px solid var(--line-strong); border-bottom:none; background:var(--surface-2); }
.fam-big { display:flex; align-items:baseline; gap:12px; padding:18px; }
.fam-big .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:700; }
.fam-big .amt { font-family:var(--font-money); font-weight:800; font-size:30px; color:var(--st-mora2); }

/* SOP */
.sop-intro { font-size:14px; color:var(--text-soft); line-height:1.6; max-width:880px; }
.sop-chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px; }
.sop-chip { font-size:12px; font-weight:600; padding:7px 13px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:var(--surface); color:var(--text-soft); display:flex; gap:7px; align-items:center; }
.sop-chip.done { color:var(--st-good); border-color:var(--st-good); background:var(--st-good-bg); }
.sop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.sop-card { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); padding:18px; box-shadow:var(--shadow-card); }
.sop-card .num { width:30px; height:30px; border-radius:8px; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; font-family:var(--font-money); }
.sop-card .sop-h { display:flex; align-items:flex-start; gap:11px; margin-bottom:6px; }
.sop-card .sop-h .num { margin-top:1px; }
.sop-card h4 { font-family:var(--font-display); font-weight:var(--fw-display); font-size:15px; margin:0; }
.sop-card .tagloc { font-size:10.5px; font-weight:700; color:var(--accent-dark); background:var(--accent-soft); padding:3px 9px; border-radius:var(--radius-pill); display:inline-block; margin-bottom:11px; }
.sop-card .when { font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.sop-card ol { margin:0; padding-left:18px; font-size:12.5px; color:var(--text-soft); line-height:1.7; }

/* config tabs */
.tabs { display:flex; gap:2px; padding:0 24px; border-bottom:1px solid var(--line); }
.tab { padding:13px 16px; font-size:13.5px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; }
.tab.on { color:var(--accent); border-bottom-color:var(--accent); }
.fee-row { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-rule); }
.fee-row .nm { font-size:13px; color:var(--text-soft); font-weight:600; }
.fee-input { display:flex; align-items:center; gap:8px; border:1px solid var(--line-strong); border-radius:var(--radius-input); padding:8px 12px; background:var(--surface); min-width:160px; }
.fee-input span { color:var(--text-muted); } .fee-input b { font-family:var(--font-money); font-weight:700; margin-left:auto; }
.sec-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:700; padding:16px 0 8px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line-rule); }
.switch-row .sl b { font-size:13.5px; } .switch-row .sl div { font-size:12px; color:var(--text-muted); margin-top:2px; }
.sw { width:42px; height:24px; border-radius:999px; background:var(--st-good); position:relative; flex:none; }
.sw.off { background:var(--surface-3); } .sw::after { content:""; position:absolute; top:3px; left:21px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; }
.sw.off::after { left:3px; }
.roadmap { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rm { border:1px solid var(--line); border-radius:var(--radius-card); padding:14px; }
.rm .soon { font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--accent-dark); background:var(--accent-soft); padding:2px 7px; border-radius:var(--radius-pill); }
.rm b { display:block; font-size:13.5px; margin:9px 0 3px; } .rm span { font-size:12px; color:var(--text-muted); }

/* ============================================================
   OVERLAYS
   ============================================================ */
.scrim { position:absolute; inset:0; background:rgba(15,22,30,.46); display:flex; align-items:center; justify-content:center; z-index:80; }
.modal { width:520px; max-height:84%; overflow:auto; background:var(--surface); border-radius:calc(var(--radius-card) + 2px); box-shadow:var(--shadow-pop); border:1px solid var(--line); }
.modal-h { padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.modal-h .ey { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); font-weight:700; }
.modal-h h3 { font-family:var(--font-display); font-weight:var(--fw-display); font-size:21px; margin:5px 0 2px; }
.modal-h .sub { font-size:12.5px; color:var(--text-muted); }
.modal-x { position:absolute; }
.steps { display:flex; align-items:center; gap:8px; padding:13px 20px; border-bottom:1px solid var(--line); }
.steps .stp { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text-muted); }
.steps .stp .n { width:20px; height:20px; border-radius:50%; background:var(--surface-3); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.steps .stp.on { color:var(--text); } .steps .stp.on .n { background:var(--accent); color:var(--on-accent); }
.steps .stp.done .n { background:var(--st-good); color:#fff; }
.steps .arr { color:var(--text-muted); }
.modal-b { padding:18px 20px; }
.concept-box { border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; margin-bottom:16px; }
.concept-box .cr { display:flex; justify-content:space-between; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line-rule); font-size:13px; }
.concept-box .cr:last-child { border-bottom:none; }
.concept-box .cr .k { color:var(--text-muted); font-weight:600; }
.concept-box .cr .v { font-weight:700; } .concept-box .cr .v.money { font-family:var(--font-money); font-size:18px; }
.method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.method { border:1px solid var(--line-strong); border-radius:var(--radius-card); padding:16px 12px; text-align:center; cursor:pointer; }
.method:hover { border-color:var(--text-muted); }
.method.on { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent); }
.method.disabled { opacity:.5; cursor:not-allowed; }
.method .mi { width:40px; height:40px; border-radius:50%; margin:0 auto 9px; display:flex; align-items:center; justify-content:center; }
.method.m-cash .mi { background:var(--m-cash-bg); color:var(--m-cash); } .method.m-transfer .mi { background:var(--m-transfer-bg); color:var(--m-transfer); } .method.m-card .mi { background:var(--m-card-bg); color:var(--m-card); }
.method b { font-size:13px; } .method .soon { font-size:9.5px; font-weight:800; color:var(--text-muted); }
.field { margin-bottom:14px; } .field label { display:block; font-size:12px; font-weight:600; color:var(--text-soft); margin-bottom:6px; }
.field input { width:100%; border:1px solid var(--line-strong); border-radius:var(--radius-input); padding:10px 12px; font-size:13.5px; color:var(--text); background:var(--surface); }
.modal-f { padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.modal-note { font-size:11.5px; color:var(--text-muted); margin-right:auto; }

/* receipt */
.receipt { width:430px; }
.rcpt-ok { display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--st-good-bg); color:var(--st-good); font-weight:700; font-size:14px; border-radius:var(--radius-card); margin-bottom:14px; }
.rcpt-ok .ck { width:26px; height:26px; border-radius:50%; background:var(--st-good); color:#fff; display:flex; align-items:center; justify-content:center; }

/* import/export */
.io-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.io { border:1px solid var(--line-strong); border-radius:var(--radius-card); padding:22px 16px; text-align:center; }
.io .ii { width:44px; height:44px; border-radius:12px; margin:0 auto 11px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); }
.io b { font-size:14px; } .io p { font-size:12px; color:var(--text-muted); margin:5px 0 13px; line-height:1.5; }
.io .iob { display:inline-flex; align-items:center; gap:8px; border-radius:var(--radius-ctrl); font-size:12.5px; font-weight:700; padding:8px 14px; }

/* column manager popover */
.colpop { position:absolute; top:252px; right:430px; z-index:85; width:300px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-pop); overflow:hidden; }
.colpop .ch { padding:12px 14px; border-bottom:1px solid var(--line); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-muted); }
.preset-row { display:flex; gap:7px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--line); }
.preset { font-size:11.5px; font-weight:700; padding:6px 11px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); color:var(--text-soft); cursor:pointer; }
.preset.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.colpop .clist { padding:6px; max-height:280px; overflow:auto; }
.col-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-input); font-size:12.5px; cursor:pointer; }
.col-item:hover { background:var(--surface-2); }
.cbx { width:18px; height:18px; border-radius:4px; border:1.5px solid var(--line-strong); flex:none; display:flex; align-items:center; justify-content:center; }
.cbx.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.colsec { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:700; padding:9px 10px 3px; }

/* toast */
.toast { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:90; display:flex; align-items:center; gap:11px; background:var(--text); color:var(--surface); padding:13px 18px; border-radius:var(--radius-ctrl); box-shadow:var(--shadow-pop); font-size:13.5px; font-weight:600; }
.toast .tk { width:22px; height:22px; border-radius:50%; background:var(--st-good); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }

/* states gallery */
.states-bar { display:flex; gap:8px; align-items:center; padding:12px 24px; border-bottom:1px solid var(--line); background:var(--surface-2); flex-wrap:wrap; }
.states-bar .lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:700; }
.state-pill { font-size:12px; font-weight:700; padding:6px 13px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:var(--surface); color:var(--text-soft); cursor:pointer; }
.state-pill.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:70px 20px; text-align:center; color:var(--text-muted); }
.empty-state .ei { width:60px; height:60px; border-radius:16px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--text-muted); }
.empty-state b { font-family:var(--font-display); font-weight:var(--fw-display); font-size:18px; color:var(--text); }
.empty-state p { font-size:13px; max-width:340px; margin:6px 0 16px; line-height:1.5; }
.skel { background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:6px; }
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* surface index */
.idx-sheet { position:absolute; top:0; right:0; bottom:0; width:340px; z-index:95; background:var(--surface); border-left:1px solid var(--line); overflow:auto; box-shadow:var(--shadow-pop); }
.idx-sheet h3 { font-family:var(--font-display); font-weight:var(--fw-display); font-size:18px; margin:0; padding:18px 18px 4px; }
.idx-sheet .isub { font-size:12px; color:var(--text-muted); padding:0 18px 14px; }
.idx-group { padding:6px 10px; }
.idx-glabel { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:700; padding:10px 8px 5px; }
.idx-item { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--radius-input); cursor:pointer; font-size:12.5px; }
.idx-item:hover { background:var(--surface-2); }
.idx-item .in { width:20px; font-family:var(--font-money); font-size:11px; color:var(--text-muted); text-align:right; }
.idx-item .done { width:7px; height:7px; border-radius:50%; background:var(--st-good); margin-left:auto; }

/* ============================================================
   v4 — CAMPAÑAS dashboard
   ============================================================ */
.sect { margin-bottom:18px; }
.sect-h { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.sect-h b { font-family:var(--font-display); font-weight:var(--fw-display); font-size:16px; }
.sect-link { color:var(--accent); font-weight:600; font-size:12.5px; display:flex; gap:6px; align-items:center; cursor:pointer; }
.sect-foot { padding:13px 18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--text-muted); line-height:1.55; }
.cmp-band { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); }
.cmp-kpi { background:var(--surface); padding:16px 18px; }
.cmp-kpi.hero { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.cmp-kpi .cv { font-family:var(--font-money); font-weight:700; font-size:25px; letter-spacing:-.01em; }
.cmp-kpi .cv.hero { color:var(--accent-dark); font-size:34px; }
.cmp-kpi .cv.good { color:var(--st-good); } .cmp-kpi .cv.alert { color:var(--st-mora2); }
.cmp-kpi .cl { font-size:12px; color:var(--text-soft); font-weight:600; margin-top:6px; }
.cmp-kpi .cs { font-size:11px; color:var(--text-muted); margin-top:3px; }
.cmp-funnel { padding:16px 18px; }
.fn-row { display:grid; grid-template-columns:132px 1fr 64px 46px; align-items:center; gap:12px; margin-bottom:11px; }
.fn-row:last-child { margin-bottom:0; }
.fn-l { font-size:12.5px; color:var(--text-soft); font-weight:600; }
.fn-bar { height:8px; border-radius:5px; background:var(--surface-3); overflow:hidden; }
.fn-bar i { display:block; height:100%; border-radius:5px; }
.fn-n { font-family:var(--font-money); font-size:12px; color:var(--text-muted); text-align:right; }
.fn-p { font-family:var(--font-money); font-size:12.5px; font-weight:700; text-align:right; }
.jtable { padding:6px 8px 8px; }
.jt-head { display:grid; grid-template-columns:1fr 132px 110px 1.1fr; gap:12px; padding:8px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:700; border-bottom:1px solid var(--line-strong); }
.jt-head .r, .jt-row .r { text-align:right; }
.jt-row { display:grid; grid-template-columns:1fr 132px 110px 1.1fr; gap:12px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--line-rule); font-size:13px; cursor:pointer; }
.jt-row:hover { background:var(--surface-2); }
.jt-row.empty { opacity:.7; }
.jt-name { display:flex; align-items:center; gap:10px; font-weight:600; color:var(--text); }
.jt-ico { width:28px; height:28px; border-radius:8px; background:var(--surface-2); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.jt-num { font-family:var(--font-money); font-weight:600; }
.jt-res { font-size:12.5px; color:var(--text-soft); }
.wahealth { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.wh { background:var(--surface); padding:16px 18px; }
.wh-v { font-family:var(--font-money); font-weight:700; font-size:20px; }
.wh-v.good { color:var(--st-good); } .wh-v.alert { color:var(--st-mora2); }
.wh-l { font-size:11px; color:var(--text-muted); margin-top:5px; font-weight:600; }

/* auto config-summary placeholder (right column when no node selected) */
.cfg-sum { padding:15px 16px; }
.cfg-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-rule); }
.cfg-row .k { color:var(--text-muted); font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.07em; }
.cfg-row .v { font-weight:700; font-size:13px; }
.cfg-note { font-size:12px; color:var(--text-muted); padding:14px 16px 8px; line-height:1.55; }
.cfg-link { color:var(--accent); font-weight:700; font-size:12.5px; display:inline-flex; gap:6px; align-items:center; cursor:pointer; padding:4px 16px 16px; }
.jsw { width:32px; height:18px; border-radius:999px; background:var(--st-good); position:relative; flex:none; }
.jsw.off { background:var(--surface-3); }
.jsw::after { content:""; position:absolute; top:2.5px; left:16px; width:13px; height:13px; border-radius:50%; background:#fff; transition:left .15s; }
.jsw.off::after { left:2.5px; }

/* ============================================================
   v4 — MOBILE (.rz-root.mobile) — Campañas + Automatizaciones reflow
   ============================================================ */
.rz-root.mobile .hd-school span, .rz-root.mobile .hd-sub, .rz-root.mobile .hd-saved { display:none; }
.rz-root.mobile .hd-school b { font-size:13px; }
.rz-root.mobile .app-header { gap:8px; padding:0 12px; }
.rz-root.mobile .page-head { padding:14px 16px 10px; }
.rz-root.mobile .pad { padding:14px 16px 24px; }
.rz-root.mobile .cmp-band { grid-template-columns:repeat(2,1fr); }
.rz-root.mobile .cmp-kpi.hero { grid-column:1 / -1; }
.rz-root.mobile .wahealth { grid-template-columns:repeat(2,1fr); }
.rz-root.mobile .fn-row { grid-template-columns:84px 1fr 46px; }
.rz-root.mobile .fn-n { display:none; }
.rz-root.mobile .jt-head { display:none; }
.rz-root.mobile .jt-row { grid-template-columns:1fr auto; grid-template-areas:"name status" "res sent"; gap:8px 10px; padding:13px 12px; border:1px solid var(--line); border-radius:var(--radius-card); margin:8px; }
.rz-root.mobile .jt-name { grid-area:name; }
.rz-root.mobile .jt-row > span:nth-child(2) { grid-area:status; justify-self:end; }
.rz-root.mobile .jt-num { grid-area:sent; justify-self:end; }
.rz-root.mobile .jt-res { grid-area:res; }
.rz-root.mobile .au { flex-direction:column; }
.rz-root.mobile .au-list, .rz-root.mobile .au-canvas, .rz-root.mobile .au-side { width:100%; flex:none; border-left:none; border-right:none; border-bottom:1px solid var(--line); }
.rz-root.mobile .au-journeys { max-height:260px; }
.rz-root.mobile .fnode, .rz-root.mobile .fbranch { width:auto; max-width:100%; }
.rz-root.mobile .flow .fconn { margin-left:0; }