/* PensiónFácil — temas por persona (estilo × claro/oscuro). Básico = paleta de Gescom escritorio. */
:root,[data-estilo="basico"]{
  --bg:#F6F6F8; --menu:#EDEDF1; --sup:#FFFFFF; --sup2:#F1F1F5; --campo:#FFFFFF; --borde:#D9D9E0; --borde2:#E6E6EC;
  --txt:#1B1B1F; --mut:#6B6B76; --acento:#0A6ED1; --relleno:#0A6ED1; --sobre-relleno:#FFFFFF; --sel:#E7F0FA;
  --ok:#1A7F47; --ok-bg:#E6F3EB; --warn:#8A5300; --warn-bg:#FBF0DA; --bad:#B4390A; --bad-bg:#FBE9E1;
  --r:6px; --r-s:4px; --r-chip:4px; --fs:14.5px; --pad:14px; --lh:1.45;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-num:inherit;
  --ic-bg:transparent; --ic-col:var(--mut); --up:none; --ls:0; --sombra:none;
  color-scheme:light;
}
[data-estilo="tecnico"]{
  --bg:#EEF0F3; --menu:#E4E7EB; --sup:#FFFFFF; --sup2:#F3F4F6; --campo:#FFFFFF; --borde:#C9CED6; --borde2:#DDE1E6;
  --txt:#111827; --mut:#5B6472; --acento:#1F5FBF; --relleno:#1F5FBF; --sobre-relleno:#FFFFFF; --sel:#E3EBF7;
  --ok:#11703F; --ok-bg:#E3F1E8; --warn:#7A4A00; --warn-bg:#F7EDD8; --bad:#A3330A; --bad-bg:#F8E5DD;
  --r:2px; --r-s:2px; --r-chip:2px; --fs:13.5px; --pad:12px; --lh:1.4;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --font-num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ic-bg:transparent; --ic-col:var(--mut); --up:uppercase; --ls:.05em; --sombra:none;
  color-scheme:light;
}
[data-estilo="suave"]{
  --bg:#FBF6F4; --menu:#F5ECE8; --sup:#FFFFFF; --sup2:#FAF1EE; --campo:#FFFFFF; --borde:#E9D9D3; --borde2:#F1E4DF;
  --txt:#3A2E33; --mut:#87727A; --acento:#B84D73; --relleno:#B84D73; --sobre-relleno:#FFFFFF; --sel:#F8E3EA;
  --ok:#2F7D57; --ok-bg:#E5F2EA; --warn:#8C5A12; --warn-bg:#FBEFD9; --bad:#B23B3B; --bad-bg:#FBE6E4;
  --r:14px; --r-s:10px; --r-chip:999px; --fs:16px; --pad:16px; --lh:1.55;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-num:inherit;
  --ic-bg:var(--sel); --ic-col:var(--acento); --up:none; --ls:0; --sombra:none;
  color-scheme:light;
}
[data-estilo="lavanda"]{
  --bg:#F7F5FB; --menu:#EFEBF7; --sup:#FFFFFF; --sup2:#F4F1FA; --campo:#FFFFFF; --borde:#DFD8EE; --borde2:#EAE5F4;
  --txt:#2F2A3A; --mut:#776F88; --acento:#7651C0; --relleno:#7651C0; --sobre-relleno:#FFFFFF; --sel:#ECE5F8;
  --ok:#2F7D57; --ok-bg:#E5F2EA; --warn:#8C5A12; --warn-bg:#FBEFD9; --bad:#B23B3B; --bad-bg:#FBE6E4;
  --r:14px; --r-s:10px; --r-chip:999px; --fs:16px; --pad:16px; --lh:1.55;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-num:inherit;
  --ic-bg:var(--sel); --ic-col:var(--acento); --up:none; --ls:0; --sombra:none;
  color-scheme:light;
}
[data-estilo="menta"]{
  --bg:#F3F8F6; --menu:#E8F1ED; --sup:#FFFFFF; --sup2:#EEF5F2; --campo:#FFFFFF; --borde:#D3E3DC; --borde2:#E2EDE8;
  --txt:#23332E; --mut:#667A73; --acento:#04855D; --relleno:#04855D; --sobre-relleno:#FFFFFF; --sel:#DDF3E9;
  --ok:#2F7D57; --ok-bg:#E5F2EA; --warn:#8C5A12; --warn-bg:#FBEFD9; --bad:#B23B3B; --bad-bg:#FBE6E4;
  --r:12px; --r-s:8px; --r-chip:999px; --fs:15.5px; --pad:15px; --lh:1.5;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-num:inherit;
  --ic-bg:var(--sel); --ic-col:var(--acento); --up:none; --ls:0; --sombra:none;
  color-scheme:light;
}
/* oscuros */
[data-theme="dark"],[data-theme="dark"][data-estilo="basico"],[data-theme="dark"] [data-estilo="basico"]{
  --bg:#1D1D20; --menu:#232329; --sup:#2A2A31; --sup2:#25252B; --campo:#2C2C33; --borde:#3C3C45; --borde2:#34343C;
  --txt:#ECECF1; --mut:#A3A3AE; --acento:#4CA0E0; --relleno:#2A74B8; --sobre-relleno:#FFFFFF; --sel:#2C3846;
  --ok:#5CCB91; --ok-bg:#24352C; --warn:#F2B754; --warn-bg:#3A3122; --bad:#F39470; --bad-bg:#3E2A23;
  color-scheme:dark;
}
[data-theme="dark"][data-estilo="tecnico"],[data-theme="dark"] [data-estilo="tecnico"]{
  --bg:#0F1318; --menu:#151A21; --sup:#181E26; --sup2:#141A21; --campo:#10151B; --borde:#2D3642; --borde2:#232B35;
  --txt:#E3E8EF; --mut:#8D97A5; --acento:#5B9CF0; --relleno:#2F6FCB; --sobre-relleno:#FFFFFF; --sel:#1C2A3D;
  --ok:#4FC386; --ok-bg:#16291F; --warn:#E5B04E; --warn-bg:#2C2414; --bad:#EE8762; --bad-bg:#32201A;
  color-scheme:dark;
}
[data-theme="dark"][data-estilo="suave"],[data-theme="dark"] [data-estilo="suave"]{
  --bg:#231B1F; --menu:#2B2126; --sup:#30252A; --sup2:#2A2025; --campo:#352930; --borde:#4A3A41; --borde2:#3E3036;
  --txt:#F4E9EC; --mut:#BCA6AD; --acento:#EE8FB0; --relleno:#C65A82; --sobre-relleno:#FFFFFF; --sel:#43303A;
  --ok:#72CF9C; --ok-bg:#24352C; --warn:#F2BF68; --warn-bg:#3A3122; --bad:#F59A92; --bad-bg:#432B2A;
  color-scheme:dark;
}
[data-theme="dark"][data-estilo="lavanda"],[data-theme="dark"] [data-estilo="lavanda"]{
  --bg:#1D1A25; --menu:#24202E; --sup:#2A2535; --sup2:#24202E; --campo:#2F2A3B; --borde:#443C55; --borde2:#383148;
  --txt:#EEEAF6; --mut:#AFA6C2; --acento:#B497F0; --relleno:#7E5CCC; --sobre-relleno:#FFFFFF; --sel:#382F4D;
  --ok:#72CF9C; --ok-bg:#24352C; --warn:#F2BF68; --warn-bg:#3A3122; --bad:#F59A92; --bad-bg:#432B2A;
  color-scheme:dark;
}
[data-theme="dark"][data-estilo="menta"],[data-theme="dark"] [data-estilo="menta"]{
  --bg:#172020; --menu:#1C2726; --sup:#1F2B29; --sup2:#1B2624; --campo:#22302E; --borde:#33453F; --borde2:#2A3A35;
  --txt:#E5F1ED; --mut:#97B0A8; --acento:#34D399; --relleno:#047857; --sobre-relleno:#FFFFFF; --sel:#1E3F33;
  --ok:#72CF9C; --ok-bg:#24352C; --warn:#F2BF68; --warn-bg:#3A3122; --bad:#F59A92; --bad-bg:#432B2A;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:var(--fs);line-height:var(--lh);-webkit-font-smoothing:antialiased}
a{color:var(--acento)}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2}
img{max-width:100%}

/* layout */
#app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--menu);border-right:1px solid var(--borde2);padding:14px 10px 30px;position:sticky;top:0;height:100vh;overflow:auto}
.side .grupo{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:16px 10px 6px}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--txt);text-decoration:none;font-size:14.5px}
.side a:hover{background:var(--sup2)}
.side a.act{background:var(--sel);color:var(--acento);font-weight:600}
.side a .em{width:22px;text-align:center;font-size:16px}
.side a .bd{margin-left:auto}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:10px 22px;padding-top:max(10px,env(safe-area-inset-top));background:var(--bg);border-bottom:1px solid var(--borde2);position:sticky;top:0;z-index:20}
.marca{display:flex;align-items:center;gap:10px;color:var(--txt);text-decoration:none;font-weight:700;font-size:17px}
.marca img{width:34px;height:34px;border-radius:9px}
.top-der{margin-left:auto;display:flex;gap:8px;align-items:center}
.quien{display:flex;align-items:center;gap:8px;border:1px solid var(--borde);background:var(--sup);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font-size:14px}
.quien .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px}
.ib{width:38px;height:38px;border-radius:50%;border:1px solid var(--borde);background:var(--sup);cursor:pointer;display:grid;place-items:center;font-size:17px}
.offline{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
.offline[hidden]{display:none}
.offline::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn)}
.demo-barra{font-size:12px;color:var(--mut);text-align:center;padding:5px 12px;background:var(--sup2);border-bottom:1px solid var(--borde2)}
.vista{padding:22px;max-width:1100px;width:100%;margin:0 auto;padding-bottom:110px}
.bnav{display:none}

/* encabezado de vista */
.vh{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.vh h1{font-size:24px}
.vh p{margin:4px 0 0;color:var(--mut)}
.vh .acc{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* tarjetas */
.card{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);box-shadow:var(--sombra);padding:16px}
.card+.card{margin-top:14px}
.grid>.card{margin-top:0}
.card h2{font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{padding:14px 16px}
.kpi .l{font-size:12.5px;color:var(--mut)}
.kpi .v{font-size:22px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12.5px;color:var(--mut);margin-top:2px}

.saldo{border-radius:var(--r);padding:20px;color:#fff;background:linear-gradient(135deg,#2A8BE6,#0A5DB3);box-shadow:var(--sombra);position:relative;overflow:hidden}
.saldo.cero{background:linear-gradient(135deg,#25A162,#137A45)}
.saldo .l{opacity:.9;font-size:13.5px}
.saldo .v{font-size:32px;font-weight:800;margin:4px 0;font-variant-numeric:tabular-nums}
.saldo .s{opacity:.9;font-size:13.5px}
.saldo .b{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.saldo .btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 15px;border-radius:10px;border:1px solid var(--borde);background:var(--sup);cursor:pointer;font-weight:600;font-size:14px;text-align:center;text-decoration:none;color:var(--txt);white-space:nowrap}
.btn:hover{border-color:var(--acento)}
.btn.pri{background:var(--relleno);border-color:var(--relleno);color:var(--sobre-relleno)}
.btn.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.btn.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad)}
.btn.ghost{background:transparent}
.btn.sm{min-height:32px;padding:4px 11px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--sup2);color:var(--mut);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.azul{background:var(--sel);color:var(--acento)}
.bd{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:11.5px;font-weight:700;display:inline-grid;place-items:center}

/* listas */
.lista{display:flex;flex-direction:column}
.item{display:flex;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--borde2);cursor:pointer}
.item:first-child{border-top:0}
.item .ic{width:42px;height:42px;border-radius:12px;background:var(--sup2);display:grid;place-items:center;font-size:21px;flex:none}
.item .tx{min-width:0;flex:1}
.item .t1{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .t2{font-size:13px;color:var(--mut);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
.item .mt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.item .mt small{display:block;font-weight:500;font-size:12px;color:var(--mut)}
.item.anulado .t1,.item.anulado .mt{text-decoration:line-through;opacity:.6}
.vacio{text-align:center;color:var(--mut);padding:26px 10px}
.vacio .em{font-size:34px;display:block;margin-bottom:6px}
.vacio .btn{margin-top:10px}

/* filtros */
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filtros button{border:1px solid var(--borde);background:var(--sup);border-radius:999px;padding:6px 13px;cursor:pointer;font-size:13.5px}
.filtros button.act{background:var(--relleno);border-color:var(--relleno);color:var(--sobre-relleno)}

/* formularios */
label.f{display:block;margin-bottom:12px}
label.f>span{display:block;font-size:13px;color:var(--mut);margin-bottom:5px;font-weight:600}
.in,select.in,textarea.in{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--borde);border-radius:10px;background:var(--campo);color:var(--txt);font:inherit;font-size:16px}
textarea.in{min-height:90px;resize:vertical}
select.in{-webkit-appearance:none;appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}
:root[data-theme="dark"] select.in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A3A3AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.in[type="date"],.in[type="month"]{-webkit-appearance:none;appearance:none;display:flex;align-items:center}
.in::placeholder{color:var(--mut);opacity:1}
.in:focus{outline:2px solid var(--acento);outline-offset:-1px;border-color:transparent}
.in[type="date"]::-webkit-calendar-picker-indicator{opacity:.75}
[data-theme="dark"] .in[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.85)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ayuda{font-size:12.5px;color:var(--mut);margin-top:-6px;margin-bottom:12px}
.err{color:var(--bad);font-size:13px;margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--relleno);flex:none}
.seg{display:inline-flex;border:1px solid var(--borde);border-radius:10px;overflow:hidden;background:var(--campo)}
.seg button{border:0;background:transparent;padding:8px 14px;cursor:pointer;font-size:14px}
.seg button.act{background:var(--relleno);color:var(--sobre-relleno)}
.hijos-sel{display:flex;gap:8px;flex-wrap:wrap}
.hijos-sel label{display:flex;gap:7px;align-items:center;border:1px solid var(--borde);border-radius:999px;padding:6px 12px;cursor:pointer;background:var(--campo)}
.hijos-sel input{accent-color:var(--relleno)}

/* comprobantes */
.adj{display:flex;gap:10px;flex-wrap:wrap}
.adj .th{width:84px;height:84px;border-radius:10px;border:1px solid var(--borde);background:var(--sup2) center/cover no-repeat;position:relative;cursor:pointer;display:grid;place-items:center;font-size:12px;color:var(--mut);overflow:hidden}
.adj .th .x{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:13px;line-height:1}
.adj .mas{border-style:dashed;color:var(--acento);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.adj .mas span{font-size:24px;line-height:1}
.adj .mas small{font-size:11px;font-weight:600;line-height:1.15;padding:0 4px}
.adj .th .kb{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.62);color:#fff;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:6px}
.adj-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.seg.sm button{padding:6px 11px;font-size:13px}
.adj .th.pdf{font-weight:700;color:var(--bad)}

/* modal */
.mfondo{position:fixed;inset:0;background:rgba(10,10,20,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;animation:fade .15s}
.modal{background:var(--sup);color:var(--txt);border-radius:18px;width:min(640px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:sube .18s}
.modal.ancho{width:min(860px,100%)}
.mcab{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.mcab h2{font-size:18px;flex:1}
.mcab .ib{width:34px;height:34px}
.mcab,.mtabs,.mpie{flex:none}
.mtabs{display:flex;gap:4px;padding:0 14px;border-bottom:1px solid var(--borde2);overflow-x:auto;scrollbar-width:none}
.mtabs button{border:0;background:none;padding:10px 12px;cursor:pointer;color:var(--mut);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.mtabs button.act{color:var(--acento);border-bottom-color:var(--acento)}
.mcuerpo{padding:16px 18px;overflow:auto;flex:1}
.mpie{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--borde2)}
@keyframes fade{from{background:rgba(10,10,20,0)}}
@keyframes sube{from{transform:translateY(14px)}}

.dl{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:0;font-size:14.5px;border:1px solid var(--borde);border-radius:10px;overflow:hidden;margin:0;background:var(--sup)}
.dl dt,.dl dd{padding:9px 12px;border-bottom:1px solid var(--borde2);min-width:0}
.dl dt{color:var(--mut);font-weight:600;font-size:13.5px;background:var(--sup2);border-right:1px solid var(--borde2);display:flex;align-items:center}
.dl dd{margin:0;word-break:break-word;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.dl dt:nth-last-of-type(1),.dl dd:nth-last-of-type(1){border-bottom:0}
.tabla{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--borde);border-radius:10px;overflow:hidden;font-size:14.5px;margin-top:12px}
.tabla th,.tabla td{padding:9px 12px;border-bottom:1px solid var(--borde2);text-align:left}
.tabla th{background:var(--sup2);color:var(--mut);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.tabla td.n,.tabla th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla tr:last-child td{border-bottom:0}
.tabla tfoot td{background:var(--sup2);font-weight:800}
.tabla .cap{font-weight:700;font-size:13.5px;margin:16px 0 0}
.aviso{border-radius:12px;padding:12px 14px;background:var(--sel);font-size:14px;margin-bottom:12px;display:flex;gap:10px;align-items:flex-start}
.aviso.warn{background:var(--warn-bg)}
.aviso.bad{background:var(--bad-bg)}
.aviso.ok{background:var(--ok-bg)}
.aviso .em{font-size:18px;line-height:1.2}
.aviso .btn{margin-top:8px}

/* liquidación */
.liq-linea{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px dashed var(--borde2);font-size:14.5px}
.liq-linea:first-child{border-top:0}
.liq-linea .n{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.liq-linea.tot{border-top:2px solid var(--borde);font-weight:800;font-size:16px;padding-top:12px}
.liq-linea .sub{display:block;color:var(--mut);font-size:12.5px}
.pos{color:var(--bad)} .neg{color:var(--ok)}
.periodos{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:thin}
.periodos button{border:1px solid var(--borde);background:var(--sup);border-radius:12px;padding:7px 12px;cursor:pointer;white-space:nowrap;font-size:13.5px;text-align:center}
.periodos button small{display:block;font-size:11px;color:var(--mut)}
.periodos button.act{border-color:var(--acento);background:var(--sel);color:var(--acento);font-weight:600}

/* salud */
.trat{display:flex;gap:12px;padding:12px 2px;border-top:1px solid var(--borde2);align-items:flex-start}
.trat:first-child{border-top:0}
.trat .chk{width:26px;height:26px;border-radius:8px;border:2px solid var(--borde);flex:none;cursor:pointer;background:var(--campo);display:grid;place-items:center;color:#fff;font-size:15px;margin-top:2px}
.trat.term .chk{background:var(--ok);border-color:var(--ok)}
.trat.term .tt{text-decoration:line-through;opacity:.7}
.trat .tt{font-weight:600}
.trat .td{font-size:13px;color:var(--mut);margin-top:2px}
.nota{background:var(--warn-bg);border-radius:12px;padding:12px 14px;position:relative}
.nota+.nota{margin-top:10px}
.nota .meta{font-size:12px;color:var(--mut);margin-top:6px}

/* hijos */
.hijo{display:flex;gap:14px;align-items:center;cursor:pointer}
.foto{width:64px;height:64px;border-radius:50%;background:var(--sup2) center/cover no-repeat;display:grid;place-items:center;flex:none;font-size:26px;border:1px solid var(--borde)}
.foto.gr{width:110px;height:110px;font-size:40px}

/* auditoría */
.aud{font-size:13.5px;padding:10px 2px;border-top:1px solid var(--borde2);display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.aud:first-child{border-top:0}
.aud .seq{font-variant-numeric:tabular-nums;color:var(--mut);font-weight:700}
.aud .hs{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--mut);word-break:break-all;grid-column:2}

/* correo */
.correo-prev{border:1px solid var(--borde);border-radius:12px;overflow:hidden;background:#fff;color:#1B1B1F}
.correo-prev .cab{background:#F1F1F5;padding:10px 14px;font-size:13px;color:#444}
.correo-prev .cuerpo{padding:16px}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(30px);background:#222;color:#fff;padding:10px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:200;font-size:14px;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
.fab{position:fixed;right:22px;bottom:26px;width:58px;height:58px;border-radius:50%;background:var(--relleno);color:#fff;border:0;font-size:30px;box-shadow:0 8px 24px rgba(10,110,209,.4);cursor:pointer;z-index:30;display:grid;place-items:center;line-height:1}
.mut{color:var(--mut)}
.peq{font-size:13px}
.der{text-align:right}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.sep{height:1px;background:var(--borde2);margin:14px 0}
.hoja-mas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hoja-mas a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:14px 6px;border-radius:14px;background:var(--sup2);color:var(--txt);text-decoration:none;font-size:13px;font-weight:600;position:relative}
.hoja-mas a .em{font-size:24px}
.hoja-mas a .bd{position:absolute;top:6px;right:8px}

@media (max-width:900px){
  #app{grid-template-columns:1fr}
  .side{display:none}
  .top{padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top))}
  .marca span{font-size:16px}
  .quien .nm{display:none}
  .quien{padding:4px}
  .vista{padding:16px;padding-bottom:120px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--menu);border-top:1px solid var(--borde2);padding:6px 6px max(6px,env(safe-area-inset-bottom));z-index:40;justify-content:space-around}
  .bnav a,.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mut);text-decoration:none;font-size:11px;border:0;background:none;padding:4px 0;position:relative;cursor:pointer}
  .bnav .em{font-size:21px;line-height:1}
  .bnav .act{color:var(--acento);font-weight:600}
  .bnav .bd{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;font-size:10px}
  .bnav .mas-btn .circ{width:46px;height:46px;border-radius:50%;background:var(--relleno);color:#fff;display:grid;place-items:center;font-size:26px;margin-top:-18px;box-shadow:0 6px 16px rgba(10,110,209,.35)}
  .fab{display:none}
  .mfondo{align-items:flex-end;padding:0}
  .modal{border-radius:18px 18px 0 0;max-height:94vh;width:100%}
  .mpie{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .mpie .btn{flex:1}
  .toast{bottom:96px}
}
@media (max-width:560px){
  .g2{grid-template-columns:minmax(0,1fr)}
  .fila{grid-template-columns:minmax(0,1fr)}
  .dl{grid-template-columns:minmax(100px,38%) 1fr;font-size:14px}
  .dl dt,.dl dd{padding:8px 10px}
  .tabla{font-size:14px}
  .tabla th,.tabla td{padding:8px 10px}
  .vh h1{font-size:21px}
  .vh .acc{margin-left:0;width:100%}
  .vh .acc .btn{flex:1}
  .kpi .v{font-size:19px}
  .demo-barra{font-size:11px}
}
@media print{.side,.top,.bnav,.fab,.demo-barra{display:none!important}#app{display:block}}

/* tablas de registros (estilo planilla) */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card>.tabla-wrap:first-child .tabla,.card h2+.tabla-wrap .tabla{margin-top:0}
.tl td{vertical-align:middle}
.tl tbody tr[data-gasto],.tl tbody tr[data-pago],.tl tbody tr[data-fijo],.tl tbody tr[data-cat],.tl tbody tr[data-propuesta],.tl tbody tr[data-correo],.tl tbody tr[data-trat]{cursor:pointer}
.tl tbody tr:nth-child(even) td{background:rgba(127,127,140,.04)}
.tl tbody tr:hover td{background:var(--sel)}
.tl td.main .sub{font-size:12.5px;color:var(--mut);margin-top:3px;display:flex;gap:4px 6px;flex-wrap:wrap;align-items:center;font-weight:400}
.tl .pt{opacity:.5}
.tl .nw{white-space:nowrap}
.tl .ic-c,.tl .chk-c{width:44px;padding-right:0;text-align:center}
.tl .ic-t{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--sup2);font-size:17px}
.tl tr.anulado td.main b,.tl tr.anulado td.n b{text-decoration:line-through;opacity:.6}
.tl tr.term .tt{text-decoration:line-through;opacity:.65}
.tl .hs{font-family:ui-monospace,Menlo,monospace;font-size:11px}
.tl tfoot td{font-weight:800}
.solo-movil{display:none!important}
.chk{width:26px;height:26px;border-radius:8px;border:2px solid var(--borde);cursor:pointer;background:var(--campo);display:inline-grid;place-items:center;color:#fff;font-size:15px;padding:0}
.chk.on{background:var(--ok);border-color:var(--ok)}
@media (max-width:640px){
  .tl th.sec,.tl td.sec{display:none}
  .solo-movil{display:flex!important}
  .tl th,.tl td{padding:9px 8px}
  .tl th.ic-c,.tl td.ic-c{display:none}
  .tl .chk-c{width:36px;padding-right:0}
  .tl td.main .chip{white-space:normal;font-size:11.5px}
  .tl td.n{white-space:nowrap}
  .card{padding:12px}
  .tl td.n{vertical-align:top;padding-top:11px}
}

/* editor de ítems del gasto */
.items-ed{border:1px solid var(--borde);border-radius:12px;overflow:hidden;background:var(--sup)}
.it-cab,.it-fila{display:grid;grid-template-columns:minmax(140px,1.4fr) minmax(120px,1.4fr) minmax(110px,1fr) 58px 100px 96px 64px 34px;gap:8px;align-items:center;padding:8px 10px}
.it-cab{background:var(--sup2);font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--borde2)}
.it-cab .n,.it-fila .n{text-align:right}
.it-fila{border-bottom:1px solid var(--borde2)}
.it-fila:nth-child(odd){background:rgba(127,127,140,.035)}
.it-fila .in{min-height:38px;padding:6px 9px;font-size:15px}
.it-fila select.in{padding-right:30px;background-position:right 8px center}
.it-num{display:none}
.it-lb{display:block;margin:0}
.it-lb>span{display:none}
.it-lb .in{width:100%}
.it-para{display:flex;gap:4px;flex-wrap:wrap}
.it-para label{display:flex;gap:4px;align-items:center;font-size:13px;border:1px solid var(--borde);border-radius:999px;padding:3px 8px;background:var(--campo);cursor:pointer}
.it-para input{accent-color:var(--relleno);margin:0}
.it-x{width:32px;height:32px;font-size:13px}
.it-x:disabled{opacity:.35;cursor:default}
.it-ay{grid-column:1/-1;font-size:12.5px;color:var(--mut);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:-2px}
.it-ay:empty{display:none}
.it-tot{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:baseline;padding:10px 12px;background:var(--sup2);font-size:14px}
.it-tot b{font-size:16px}
.items-ed>.btn{margin:10px 12px}
@media (max-width:760px){
  .it-cab{display:none}
  .it-fila{grid-template-columns:1fr 1fr 1fr;position:relative;padding:12px 10px}
  .it-num{display:block;font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;grid-column:1/-1}
  .it-fila select.in,.it-fila [data-k="detalle"],.it-para{grid-column:1/-1}
  .it-x{position:absolute;top:6px;right:8px}
  .it-lb>span{display:block;font-size:12px;color:var(--mut);font-weight:600;margin-bottom:3px}
}

/* filtro Desde / Hasta */
.rango{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);padding:12px 14px;margin-bottom:14px;box-shadow:var(--sombra)}
.rango-in{display:flex;gap:10px}
.rango-in label{display:block}
.rango-in label>span{display:block;font-size:12px;font-weight:700;color:var(--mut);margin-bottom:4px}
.rango-in .in{min-height:38px;padding:6px 10px;font-size:15px;width:auto;min-width:150px}
.rango-p{display:flex;gap:6px;flex-wrap:wrap}
.rango-p button{border:1px solid var(--borde);background:var(--campo);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13px;min-height:34px}
.rango-p button.act{background:var(--relleno);border-color:var(--relleno);color:var(--sobre-relleno)}
.rango-n{flex-basis:100%;font-size:12.5px;color:var(--mut)}
@media (max-width:640px){
  .rango{padding:10px 12px}
  .rango-in{width:100%}
  .rango-in label{flex:1;min-width:0}
  .rango-in .in{min-width:0;width:100%}
  .rango-p{overflow-x:auto;flex-wrap:nowrap;width:100%;scrollbar-width:none;padding-bottom:2px}
  .rango-p button{white-space:nowrap}
}

/* lector de boletas */
.ocr-caja{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px;border:1px dashed var(--acento);border-radius:12px;background:var(--sel);margin-bottom:14px}
.ocr-caja #ocrest{flex-basis:100%}
.ocr-caja .aviso{background:var(--sup)}
@media (max-width:640px){.ocr-btn{flex:1}}


/* ======================================================================
   ESTILO BÁSICO: plano, sin degradados ni sombras, esquinas según el tema
   ====================================================================== */
.bi{display:inline-block;vertical-align:-.125em;line-height:1}
.card,.modal,.rango,.saldo,.items-ed,.ocr-caja,.tabla,.dl,.correo-prev{box-shadow:none!important}
.card{border-radius:var(--r);padding:var(--pad);border:1px solid var(--borde2)}
.card h2{font-size:calc(var(--fs) + 1px);font-weight:650}
.card h2 .bi{color:var(--ic-col)}
.vh h1{font-size:calc(var(--fs) + 8px);font-weight:700;letter-spacing:-.01em}
.vh p{font-size:calc(var(--fs) - .5px)}
/* barra superior y menú lateral */
.top{background:var(--sup);border-bottom:1px solid var(--borde)}
.marca{font-size:calc(var(--fs) + 2px)}
.marca img{width:28px;height:28px;border-radius:var(--r-s)}
.demo-barra{background:var(--sup2)}
.side{background:var(--menu);border-right:1px solid var(--borde)}
.side .grupo{text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700}
.side a{border-radius:var(--r-s);padding:7px 10px;font-size:calc(var(--fs) - .5px);border-left:3px solid transparent}
.side a:hover{background:var(--sup2)}
.side a.act{background:var(--sup);color:var(--acento);border-left-color:var(--acento);font-weight:600}
.side a .em{width:20px;font-size:15px;color:var(--ic-col)}
.side a.act .em{color:var(--acento)}
.quien,.ib{border-radius:var(--r-s);background:var(--sup);border:1px solid var(--borde)}
.quien .av{border-radius:var(--r-s)}
/* botones */
.btn{border-radius:var(--r-s);font-weight:600;min-height:36px;padding:6px 13px;font-size:calc(var(--fs) - .5px);background:var(--sup);border:1px solid var(--borde)}
.btn:hover{border-color:var(--acento);color:var(--acento)}
.btn.pri{background:var(--relleno);border-color:var(--relleno);color:var(--sobre-relleno)}
.btn.pri:hover{filter:brightness(1.08);color:var(--sobre-relleno)}
.btn.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.btn.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{min-height:30px;padding:3px 10px;font-size:calc(var(--fs) - 1.5px)}
/* etiquetas */
.chip{border-radius:var(--r-chip);font-weight:600;font-size:calc(var(--fs) - 3px);padding:1px 8px;border:1px solid transparent}
.chip:not(.ok):not(.warn):not(.bad):not(.azul){background:transparent;border-color:var(--borde)}
.bd{border-radius:var(--r-chip)}
/* filtros, períodos, rango */
.filtros button,.rango-p button,.periodos button,.hijos-sel label,.it-para label,.seg{border-radius:var(--r-s)}
.filtros button{padding:5px 11px;font-size:calc(var(--fs) - 1px)}
.rango{border-radius:var(--r);padding:10px var(--pad);border:1px solid var(--borde2)}
.periodos button.act,.filtros button.act,.rango-p button.act{font-weight:600}
/* campos */
.in,select.in,textarea.in{border-radius:var(--r-s);font-size:max(16px,var(--fs))}
label.f>span,.rango-in label>span,.it-cab,.tabla th,.kpi .l{text-transform:var(--up);letter-spacing:var(--ls)}
label.f>span{font-size:calc(var(--fs) - 2px)}
/* saldo: panel plano con borde de color, sin degradado */
.saldo,.saldo.cero{background:var(--sup);color:var(--txt);border:1px solid var(--borde2);border-left:4px solid var(--acento);border-radius:var(--r);padding:var(--pad) calc(var(--pad) + 4px)}
.saldo.cero{border-left-color:var(--ok)}
.saldo .l,.saldo .s{opacity:1;color:var(--mut)}
.saldo .v{font-family:var(--font-num);font-size:calc(var(--fs) + 14px);font-weight:750;color:var(--txt)}
.saldo .btn{background:var(--sup);border-color:var(--borde);color:var(--txt)}
.saldo .btn:hover{color:var(--acento);border-color:var(--acento)}
/* indicadores */
.kpi .l{font-size:calc(var(--fs) - 3px);font-weight:600}
.kpi .v{font-family:var(--font-num);font-size:calc(var(--fs) + 6px)}
/* tablas */
.tabla{border-radius:var(--r);border-color:var(--borde)}
.tabla th{font-size:calc(var(--fs) - 3.5px);background:var(--sup2)}
.tabla td.n,.tabla th.n,.tl td.n b{font-family:var(--font-num)}
.tl .ic-t{background:var(--ic-bg);color:var(--ic-col);border-radius:var(--r-s);width:30px;height:30px;font-size:15px}
.dl{border-radius:var(--r)}
/* avisos */
.aviso{border-radius:var(--r);border:1px solid var(--borde2);background:var(--sup2)}
.aviso.ok{background:var(--ok-bg);border-color:transparent}
.aviso.warn{background:var(--warn-bg);border-color:transparent}
.aviso.bad{background:var(--bad-bg);border-color:transparent}
.aviso .em{font-size:16px;color:var(--ic-col);padding-top:1px}
.aviso.ok .em{color:var(--ok)}.aviso.warn .em{color:var(--warn)}.aviso.bad .em{color:var(--bad)}
.vacio .em{font-size:28px;color:var(--mut)}
/* modales */
.mfondo{background:rgba(10,10,20,.4)}
.modal{border-radius:var(--r);border:1px solid var(--borde)}
.mcab h2{font-size:calc(var(--fs) + 3px)}
.mtabs button{font-size:calc(var(--fs) - .5px)}
/* comprobantes, ítems, lector */
.adj .th{border-radius:var(--r-s)}
.items-ed,.ocr-caja{border-radius:var(--r)}
.ocr-caja{border-style:solid;border-color:var(--borde);background:var(--sup2)}
.it-fila .in{border-radius:var(--r-s)}
.nota{border-radius:var(--r);background:var(--warn-bg)}
.foto{border-radius:var(--r);color:var(--mut)}
.chk{border-radius:var(--r-s)}
/* barra inferior del teléfono y botón flotante */
.fab{border-radius:var(--r);box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:24px}
@media (min-width:901px){.fab{display:none}}
@media (max-width:900px){
  .bnav{background:var(--sup);border-top:1px solid var(--borde)}
  .bnav .mas-btn .circ{border-radius:var(--r);box-shadow:none;width:44px;height:40px;margin-top:-6px;font-size:22px}
  .bnav .em{font-size:19px}
  .modal{border-radius:var(--r) var(--r) 0 0}
}
/* técnico: más denso */
[data-estilo="tecnico"] .side a{padding:5px 10px}
[data-estilo="tecnico"] .vista{max-width:1280px}
[data-estilo="tecnico"] .tabla th,[data-estilo="tecnico"] .tabla td{padding:6px 9px}
[data-estilo="tecnico"] .grid{gap:10px}
[data-estilo="tecnico"] .card+.card{margin-top:10px}
/* selector de apariencia */
.estilos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.estilos button{border:2px solid var(--borde);background:var(--sup);border-radius:var(--r-s);padding:0;cursor:pointer;text-align:left;overflow:hidden;color:var(--txt)}
.estilos button.act{border-color:var(--acento)}
.prev{background:var(--bg);color:var(--txt);padding:10px;font-family:var(--font);font-size:var(--fs)}
.prev .pc{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);padding:8px}
.prev .pt{font-weight:700;font-size:13px}
.prev .pn{font-family:var(--font-num);font-size:18px;font-weight:700}
.prev .pb{display:inline-block;margin-top:6px;background:var(--relleno);color:var(--sobre-relleno);border-radius:var(--r-s);padding:3px 9px;font-size:12px;font-weight:600}
.prev .pch{display:inline-block;margin-left:4px;background:var(--ok-bg);color:var(--ok);border-radius:var(--r-chip);padding:1px 7px;font-size:11px;font-weight:600}
.estilos .en{padding:8px 10px;font-weight:650;font-size:14px}
.estilos .ed{padding:0 10px 10px;font-size:12px;color:var(--mut)}
.ico-sel{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin-bottom:14px}
.ico-sel button{height:40px;border:1px solid var(--borde);background:var(--campo);border-radius:var(--r-s);cursor:pointer;font-size:18px;color:var(--txt)}
.ico-sel button.act{border-color:var(--acento);background:var(--sel);color:var(--acento)}
/* encabezado en teléfonos angostos */
.top{min-width:0}
.marca{min-width:0;flex:1 1 auto}
.marca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-der{flex:none;margin-left:8px}
@media (max-width:400px){
  .top{gap:8px;padding-left:12px;padding-right:12px}
  .top-der{gap:6px}
  .ib{width:34px;height:34px}
  .quien{padding:3px}
  .quien .bi-chevron-down{display:none}
}

/* ======================================================================
   COLORES POR GRUPO DE CATEGORÍA (stickers) y selector de categorías
   ====================================================================== */
.g-pension{--gc:#6B7280}.g-educacion{--gc:#2F6FD6}.g-salud{--gc:#D64545}.g-vestuario{--gc:#8E5BD0}.g-dia{--gc:#2E9D5A}
.g-actividades{--gc:#E07B1F}.g-celebraciones{--gc:#D4A20F}.g-tecnologia{--gc:#1C98A8}.g-hogar{--gc:#9A6B43}.g-otros{--gc:#7A7F8A}
[data-theme="dark"] .g-pension{--gc:#9CA3AF}[data-theme="dark"] .g-educacion{--gc:#6AA2F2}[data-theme="dark"] .g-salud{--gc:#F07B7B}[data-theme="dark"] .g-vestuario{--gc:#B897EC}[data-theme="dark"] .g-dia{--gc:#5FCB8C}
[data-theme="dark"] .g-actividades{--gc:#F2A35A}[data-theme="dark"] .g-celebraciones{--gc:#EDC34E}[data-theme="dark"] .g-tecnologia{--gc:#56C4D2}[data-theme="dark"] .g-hogar{--gc:#C99A72}[data-theme="dark"] .g-otros{--gc:#A3A8B2}
.tl .ic-t.sticker,.sticker{color:var(--gc);background:color-mix(in srgb,var(--gc) 13%,transparent)}
.cat-btn{display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;min-height:40px}
.cat-btn .sticker{width:26px;height:26px;font-size:14px;display:inline-grid;place-items:center;border-radius:var(--r-s);flex:none}
.cat-btn .cb-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-grupo{margin-bottom:14px}
.cat-gt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gc);margin:0 0 6px}
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.cat-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:10px 6px;border:1px solid var(--borde2);background:var(--sup);border-radius:var(--r);cursor:pointer;font-size:calc(var(--fs) - 1.5px);text-align:center;color:var(--txt);line-height:1.2}
.cat-tile:hover,.cat-tile.act{border-color:var(--acento)}
.cat-tile .sticker{width:42px;height:42px;font-size:20px;display:grid;place-items:center;border-radius:var(--r)}
@media (max-width:760px){.it-fila .cat-btn{grid-column:1/-1}.cat-tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}

/* ======================================================================
   ESTILO «LIBRETA»: hojas de cuaderno, notas adhesivas, timbres, stickers
   ====================================================================== */
[data-estilo="libreta"]{
  --bg:#EFE6D6; --menu:#F7F0E2; --sup:#FFFDF7; --sup2:#FBF5E9; --campo:transparent; --borde:#DCCDB3; --borde2:#E8DCC6;
  --txt:#28305A; --mut:#7C735F; --acento:#D6336C; --relleno:#E0457B; --sobre-relleno:#FFFFFF; --sel:#FFE6EF;
  --ok:#1F7A4D; --ok-bg:#E2F5E6; --warn:#A05A00; --warn-bg:#FFF4C7; --bad:#C0283B; --bad-bg:#FFE0E6;
  --r:6px; --r-s:4px; --r-chip:4px; --fs:17px; --pad:18px; --lh:1.5;
  --font:'Patrick Hand','Segoe Print','Comic Sans MS',cursive; --font-num:'Patrick Hand','Segoe Print',cursive; --font-tit:'Caveat','Segoe Print',cursive;
  --ic-bg:transparent; --ic-col:var(--acento); --up:none; --ls:0;
  --renglon:#C9DAF0; --margen:#F1A9B3; --cinta:rgba(240,214,150,.75);
  --n1:#FFF3A3; --n2:#FFD1E1; --n3:#CDE9FF; --n4:#D5F3CB; --n5:#E7D9FF;
  --sombra-nota:2px 3px 0 rgba(60,40,20,.10),0 8px 14px -6px rgba(60,40,20,.25);
  --mesa-img:radial-gradient(rgba(120,90,50,.07) 1px,transparent 1.2px); --mesa-size:14px 14px;
  --hoja-img:linear-gradient(90deg,transparent 30px,var(--margen) 30px,var(--margen) 32px,transparent 32px),repeating-linear-gradient(transparent 0 29px,var(--renglon) 29px 30px);
  --hoja-img-m:linear-gradient(90deg,transparent 24px,var(--margen) 24px,var(--margen) 26px,transparent 26px),repeating-linear-gradient(transparent 0 29px,var(--renglon) 29px 30px);
  --hoja-size:auto; --hoja-pad:46px; --hoja-pad-m:38px;
  --ficha-img:repeating-linear-gradient(transparent 0 29px,var(--renglon) 29px 30px); --textarea-img:var(--ficha-img);
  --h1-deco:"\f586"; --h1-deco-col:#F2B705; --resalte:rgba(255,214,0,.45);
  --btn-bd:2px solid var(--txt); --btn-r:255px 14px 225px 14px/14px 225px 14px 255px; --btn-bg:var(--sup); --btn-img:none;
  --btn-sh:2px 2px 0 var(--txt); --btn-sh-h:3px 3px 0 var(--txt); --btn-font:var(--font); --btn-fw:400; --btn-px:14px; --btn-up:none; --btn-ls:0; --btn-pri-bd:var(--txt);
  --chip-rot:-2.5deg; --chip-up:none; --tit-up:none; --tit-ls:.01em;
  --modal-img:radial-gradient(circle at 12px 9px,var(--bg) 5px,transparent 5.5px); --modal-size:28px 18px;
  --top-img:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(224,69,123,.07) 10px 20px);
  --nota-r:2px 2px 14px 2px; --giro-k:1; --tk:1;
  color-scheme:light;
}
[data-theme="dark"][data-estilo="libreta"],[data-theme="dark"] [data-estilo="libreta"]{
  --bg:#262320; --menu:#2E2A26; --sup:#35302B; --sup2:#3B352F; --campo:transparent; --borde:#544B41; --borde2:#463F37;
  --txt:#F2EBDD; --mut:#BDB2A0; --acento:#FF8FB6; --relleno:#D84B80; --sobre-relleno:#FFFFFF; --sel:#4A3540;
  --ok:#7EDCA2; --ok-bg:#24392B; --warn:#FFD36A; --warn-bg:#4A4122; --bad:#FF9AA8; --bad-bg:#4A2830;
  --renglon:rgba(160,190,230,.16); --margen:rgba(241,169,179,.35); --cinta:rgba(200,180,130,.45);
  --n1:#5B5221; --n2:#5C3446; --n3:#2D4A63; --n4:#33513A; --n5:#46395F;
  --sombra-nota:2px 3px 0 rgba(0,0,0,.25),0 8px 14px -6px rgba(0,0,0,.5);
  --resalte:rgba(255,143,182,.30); --mesa-img:radial-gradient(rgba(255,240,220,.05) 1px,transparent 1.2px);
  color-scheme:dark;
}
[data-forma="papel"] body,.prev[data-forma="papel"]{background-color:var(--bg);background-image:var(--mesa-img);background-size:var(--mesa-size)}
[data-forma="papel"] h1,[data-forma="papel"] h2,[data-forma="papel"] .marca span,[data-forma="papel"] .mcab h2{font-family:var(--font-tit);font-weight:700;letter-spacing:var(--tit-ls);text-transform:var(--tit-up)}
[data-forma="papel"] .vh h1{font-size:calc(40px*var(--tk));line-height:1;position:relative;display:inline-block}
[data-forma="papel"] .vh h1::after{content:var(--h1-deco);font-family:bootstrap-icons;font-size:calc(20px*var(--tk));color:var(--h1-deco-col);position:absolute;right:-30px;top:-2px;transform:rotate(14deg);text-shadow:0 0 0 #fff,1px 1px 0 rgba(0,0,0,.15)}
[data-forma="papel"] .card h2{font-size:calc(28px*var(--tk));font-weight:700;display:inline-flex;padding:0 6px;background:linear-gradient(transparent 55%,var(--resalte) 55%,var(--resalte) 88%,transparent 88%)}
/* hojas con renglones y margen rojo */
[data-forma="papel"] .card{background-color:var(--sup);background-image:var(--hoja-img);background-size:var(--hoja-size);background-attachment:local;border:1px solid var(--borde2);border-radius:3px;padding:var(--pad) var(--pad) var(--pad) var(--hoja-pad);box-shadow:0 1px 0 var(--borde2),0 3px 0 -1px var(--sup),0 4px 0 -1px var(--borde2)!important}
/* notas adhesivas: indicadores, avisos y notas */
[data-forma="papel"] .card.kpi,[data-forma="papel"] .aviso,[data-forma="papel"] .nota{background-image:none;border:0;border-radius:var(--nota-r);padding:16px 16px 14px;box-shadow:var(--sombra-nota)!important;position:relative;color:var(--txt)}
[data-forma="papel"] .card.kpi::before,[data-forma="papel"] .aviso::before,[data-forma="papel"] .saldo::before{content:"";position:absolute;top:-9px;left:50%;width:74px;height:18px;margin-left:-37px;background:var(--cinta);transform:rotate(calc(var(--giro-k)*-3deg));box-shadow:0 1px 2px rgba(0,0,0,.08)}
[data-forma="papel"] .grid>.card.kpi:nth-child(4n+1){background:var(--n1);transform:rotate(calc(var(--giro-k)*-1.2deg))}
[data-forma="papel"] .grid>.card.kpi:nth-child(4n+2){background:var(--n2);transform:rotate(calc(var(--giro-k)*.9deg))}
[data-forma="papel"] .grid>.card.kpi:nth-child(4n+3){background:var(--n3);transform:rotate(calc(var(--giro-k)*-.6deg))}
[data-forma="papel"] .grid>.card.kpi:nth-child(4n+4){background:var(--n4);transform:rotate(calc(var(--giro-k)*1.3deg))}
[data-forma="papel"] .kpi .l{font-family:var(--font-tit);font-size:calc(21px*var(--tk));font-weight:700;color:var(--txt);opacity:.8}
[data-forma="papel"] .kpi .v{font-size:calc(30px*var(--tk))}
[data-forma="papel"] .aviso{background:var(--n3)}
[data-forma="papel"] .aviso.warn{background:var(--n1)}
[data-forma="papel"] .aviso.bad{background:var(--n2)}
[data-forma="papel"] .aviso.ok{background:var(--n4)}
[data-forma="papel"] .aviso:nth-child(odd){transform:rotate(calc(var(--giro-k)*-.5deg))}
[data-forma="papel"] .aviso:nth-child(even){transform:rotate(calc(var(--giro-k)*.4deg))}
[data-forma="papel"] .aviso+.aviso{margin-top:16px}
[data-forma="papel"] .aviso .em{font-size:calc(20px*var(--tk))}
[data-forma="papel"] .nota{background:var(--n1);transform:rotate(calc(var(--giro-k)*-.6deg))}
[data-forma="papel"] .nota:nth-child(2n){background:var(--n2);transform:rotate(calc(var(--giro-k)*.7deg))}
[data-forma="papel"] .nota:nth-child(3n){background:var(--n3)}
[data-forma="papel"] .nota+.nota{margin-top:14px}
/* el saldo como ficha con cinta */
[data-forma="papel"] .saldo,[data-forma="papel"] .saldo.cero{position:relative;background:var(--sup);background-image:var(--ficha-img);background-size:var(--hoja-size);border:1px solid var(--borde2);border-top:6px solid var(--acento);border-left:1px solid var(--borde2);border-radius:3px;box-shadow:var(--sombra-nota)!important;transform:rotate(calc(var(--giro-k)*-.4deg))}
[data-forma="papel"] .saldo.cero{border-top-color:var(--ok)}
[data-forma="papel"] .saldo .l{font-family:var(--font-tit);font-size:calc(22px*var(--tk));font-weight:700;color:var(--txt)}
[data-forma="papel"] .saldo .v{font-family:var(--font-tit);font-size:calc(58px*var(--tk));font-weight:700;color:var(--acento);line-height:1.05}
/* botones dibujados a mano */
[data-forma="papel"] .btn{border:var(--btn-bd);border-radius:var(--btn-r);background:var(--btn-bg);background-image:var(--btn-img);color:var(--txt);box-shadow:var(--btn-sh);font-family:var(--btn-font);font-weight:var(--btn-fw);font-size:calc(17px*var(--tk));padding-left:var(--btn-px);padding-right:var(--btn-px);text-transform:var(--btn-up);letter-spacing:var(--btn-ls)}
[data-forma="papel"] .btn:hover{transform:translate(-1px,-1px);box-shadow:var(--btn-sh-h);color:var(--txt)}
[data-forma="papel"] .btn.pri{background:var(--relleno);color:var(--sobre-relleno);border-color:var(--btn-pri-bd)}
[data-forma="papel"] .btn.ok{background:var(--n4);color:var(--txt)}
[data-forma="papel"] .btn.bad{background:var(--n2);color:var(--txt)}
[data-forma="papel"] .btn.ghost{box-shadow:none;border-color:transparent;text-decoration:underline wavy var(--acento) 1px;text-underline-offset:4px}
[data-forma="papel"] .btn.sm{font-size:calc(16px*var(--tk));min-height:32px}
/* timbres para los estados */
[data-forma="papel"] .chip{font-family:var(--font-tit);font-weight:700;font-size:calc(17px*var(--tk));letter-spacing:.02em;border:2px solid currentColor;border-radius:4px;background:transparent!important;transform:rotate(var(--chip-rot));padding:0 8px;text-transform:var(--chip-up);line-height:1.3;opacity:.92}
[data-forma="papel"] .chip.ok{color:var(--ok)}[data-forma="papel"] .chip.warn{color:var(--warn)}[data-forma="papel"] .chip.bad{color:var(--bad)}[data-forma="papel"] .chip.azul{color:var(--acento)}
/* stickers: círculo de color con borde blanco */
[data-forma="papel"] .sticker,[data-forma="papel"] .tl .ic-t.sticker{background:var(--gc)!important;color:#fff!important;border-radius:50%!important;border:3px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.25)}
[data-forma="papel"] .tl tr:nth-child(odd) .sticker{transform:rotate(calc(var(--giro-k)*-8deg))}[data-forma="papel"] .tl tr:nth-child(even) .sticker{transform:rotate(calc(var(--giro-k)*7deg))}
[data-forma="papel"] .cat-tile{background:var(--sup);border:2px dashed var(--borde);border-radius:8px}
[data-forma="papel"] .cat-tile.act,[data-forma="papel"] .cat-tile:hover{border-style:solid;border-color:var(--acento);background:var(--sel)}
[data-forma="papel"] .cat-gt{font-family:var(--font-tit);font-size:calc(22px*var(--tk));text-transform:none;letter-spacing:0}
/* tablas sobre el papel */
[data-forma="papel"] .tabla{background:transparent;border:0;border-radius:0}
[data-forma="papel"] .tabla th{background:transparent;font-family:var(--font-tit);font-size:calc(19px*var(--tk));text-transform:var(--up);letter-spacing:var(--ls);color:var(--mut);border-bottom:2px solid var(--txt)}
[data-forma="papel"] .tabla td{border-bottom:1px dashed var(--borde);background:transparent!important}
[data-forma="papel"] .tl tbody tr:hover td{background:var(--sel)!important}
[data-forma="papel"] .tabla tfoot td{background:transparent;border-top:2px solid var(--txt);font-family:var(--font-tit);font-size:calc(21px*var(--tk))}
[data-forma="papel"] .dl{border:0;background:transparent}
[data-forma="papel"] .dl dt{background:transparent;border-right:0;font-family:var(--font-tit);font-size:calc(19px*var(--tk));color:var(--mut)}
[data-forma="papel"] .dl dt,[data-forma="papel"] .dl dd{border-bottom:1px dashed var(--borde)}
/* campos: se escribe sobre la línea */
[data-forma="papel"] .in,[data-forma="papel"] select.in,[data-forma="papel"] textarea.in{border:0;border-bottom:2px solid var(--renglon);border-radius:0;background-color:transparent;font-family:var(--font);font-size:calc(19px*var(--tk));padding-left:2px}
[data-forma="papel"] textarea.in{background-image:var(--textarea-img);line-height:30px;border-bottom:0}
[data-forma="papel"] .in:focus{outline:0;border-bottom-color:var(--acento)}
[data-forma="papel"] label.f>span,[data-forma="papel"] .rango-in label>span{font-family:var(--font-tit);font-size:calc(20px*var(--tk));font-weight:700;text-transform:none;letter-spacing:0;color:var(--mut)}
[data-forma="papel"] .cat-btn{border-bottom-style:dashed}
/* modal como hoja de libreta con espiral */
[data-forma="papel"] .modal{background:var(--sup);border:1px solid var(--borde);border-radius:4px;padding-top:16px;background-image:var(--modal-img);background-size:var(--modal-size);background-repeat:repeat-x}
[data-forma="papel"] .mcab h2{font-size:calc(32px*var(--tk))}
[data-forma="papel"] .mtabs button{font-family:var(--font-tit);font-size:calc(21px*var(--tk));font-weight:700}
[data-forma="papel"] .mtabs button.act{border-bottom:3px solid var(--acento)}
/* menú como pestañas de agenda */
[data-forma="papel"] .side{background:var(--menu);border-right:2px solid var(--borde)}
[data-forma="papel"] .side .grupo{font-family:var(--font-tit);font-size:calc(19px*var(--tk));text-transform:none;letter-spacing:0;color:var(--mut)}
[data-forma="papel"] .side a{font-size:calc(18px*var(--tk));border-radius:0 18px 18px 0;margin-right:-12px;border-left:0}
[data-forma="papel"] .side a.act{background:var(--n2);color:var(--txt);box-shadow:2px 2px 0 rgba(0,0,0,.08)}
[data-forma="papel"] .side a:nth-child(5n+2).act{background:var(--n1)}[data-forma="papel"] .side a:nth-child(5n+3).act{background:var(--n3)}[data-forma="papel"] .side a:nth-child(5n+4).act{background:var(--n4)}[data-forma="papel"] .side a:nth-child(5n+5).act{background:var(--n5)}
[data-forma="papel"] .top{background:var(--sup);border-bottom:0;box-shadow:0 2px 0 var(--borde2);background-image:var(--top-img)}
[data-forma="papel"] .marca span{font-size:calc(30px*var(--tk));color:var(--acento)}
[data-forma="papel"] .filtros button,[data-forma="papel"] .rango-p button,[data-forma="papel"] .periodos button{border-radius:14px 4px 14px 4px;font-size:calc(16px*var(--tk))}
[data-forma="papel"] .filtros button.act,[data-forma="papel"] .rango-p button.act{background:var(--n2);color:var(--txt);border-color:var(--txt)}
[data-forma="papel"] .periodos button.act{background:var(--n1);color:var(--txt);border-color:var(--txt)}
[data-forma="papel"] .rango{background:var(--n5);border:0;box-shadow:var(--sombra-nota)!important;transform:rotate(calc(var(--giro-k)*-.3deg))}
[data-forma="papel"] .ocr-caja{background:var(--n3);border:0;box-shadow:var(--sombra-nota)!important}
[data-forma="papel"] .items-ed{background:transparent;border:2px dashed var(--borde)}
[data-forma="papel"] .it-cab{background:transparent;font-family:var(--font-tit);font-size:calc(18px*var(--tk));text-transform:none}
[data-forma="papel"] .it-tot{background:var(--n1);font-size:calc(18px*var(--tk))}
[data-forma="papel"] .bnav{background:var(--menu);border-top:2px solid var(--borde)}
[data-forma="papel"] .bnav a,[data-forma="papel"] .bnav button{font-size:calc(13px*var(--tk))}
[data-forma="papel"] .bnav .act{color:var(--acento)}
[data-forma="papel"] .fab,[data-forma="papel"] .bnav .mas-btn .circ{background:var(--relleno);border:2px solid var(--txt);border-radius:50%!important;box-shadow:2px 2px 0 var(--txt)}
[data-forma="papel"] .demo-barra{background:transparent;font-size:calc(14px*var(--tk))}
[data-forma="papel"] .estilos button.act{border-color:var(--acento)}
.prev[data-forma="papel"] .pc{background-image:repeating-linear-gradient(transparent 0 19px,var(--renglon) 19px 20px)}
.prev[data-forma="papel"] .pt,.prev[data-forma="papel"] .pn{font-family:var(--font-tit);font-size:calc(20px*var(--tk))}
.prev[data-forma="papel"] .pch{font-family:var(--font-tit);border:2px solid var(--ok);background:transparent;transform:rotate(calc(var(--giro-k)*-3deg))}
@media (max-width:640px){
  [data-forma="papel"] .card{padding-left:var(--hoja-pad-m);background-image:var(--hoja-img-m)}
  [data-forma="papel"] .vh h1{font-size:calc(34px*var(--tk))}
  [data-forma="papel"] .saldo .v{font-size:calc(48px*var(--tk))}
}
@media (prefers-reduced-motion:reduce){[data-forma="papel"] *{transform:none!important}}
[data-forma="papel"] .marca span{padding-right:8px}
[data-forma="papel"] .aviso,[data-forma="papel"] .nota{font-size:calc(17px*var(--tk))}
[data-forma="papel"] .aviso b{font-family:var(--font-tit);font-size:calc(21px*var(--tk))}
[data-forma="papel"] .saldo .s,[data-forma="papel"] .rango-n,[data-forma="papel"] .tl td.main .sub,[data-forma="papel"] .peq{font-size:calc(15.5px*var(--tk))}
[data-forma="papel"] .vh p{font-size:calc(17px*var(--tk))}
[data-forma="papel"] .tabla{font-size:calc(17px*var(--tk))}
[data-forma="papel"] .tl td.main b{font-family:var(--font-tit);font-size:calc(21px*var(--tk));font-weight:700}
[data-forma="papel"] .tl .ic-t.sticker{width:36px;height:36px;font-size:calc(16px*var(--tk))}
[data-forma="papel"] .tl td.n b{font-size:calc(18px*var(--tk))}


/* ---------- PLANO TÉCNICO: papel milimetrado, tinta azul, etiquetas de cinta, timbres de aprobación ---------- */
/* ---------- TALLER: mesón de madera, papel kraft, cinta de precaución, placas metálicas con tornillos ---------- */
[data-estilo="taller"]{
  --bg:#A97A4C; --menu:#E9DCC4; --sup:#EADBBE; --sup2:#E2D0AE; --campo:transparent; --borde:#B79C72; --borde2:#CDB58E;
  --txt:#25211B; --mut:#5E5444; --acento:#C2410C; --relleno:#D9480F; --sobre-relleno:#FFFFFF; --sel:#F4E3C4;
  --ok:#1D6B3A; --ok-bg:#D9EBCF; --warn:#8A4B00; --warn-bg:#F6E3B0; --bad:#A1201B; --bad-bg:#F2D0C4;
  --r:3px; --r-s:3px; --r-chip:2px; --fs:15px; --pad:18px; --lh:1.45;
  --font:Arial,Helvetica,sans-serif; --font-num:"Arial Narrow",Arial,sans-serif; --font-tit:"Arial Narrow","Arial Black",Arial,sans-serif;
  --ic-bg:transparent; --ic-col:var(--acento); --up:uppercase; --ls:.05em;
  --renglon:rgba(80,55,20,.25); --margen:transparent; --cinta:rgba(60,60,60,.72);
  --n1:#F7E8C6; --n2:#F3D6B0; --n3:#E6E1D6; --n4:#E3E6CF; --n5:#EFD9C3;
  --sombra-nota:0 2px 0 rgba(60,35,10,.25),0 10px 14px -6px rgba(40,20,0,.5);
  --mesa-img:repeating-linear-gradient(92deg,rgba(60,30,5,.10) 0 2px,transparent 2px 11px),repeating-linear-gradient(88deg,rgba(255,230,190,.07) 0 3px,transparent 3px 23px),linear-gradient(180deg,#B58656,#9C6E42); --mesa-size:auto;
  --hoja-img:radial-gradient(rgba(90,60,25,.13) 1px,transparent 1.4px),radial-gradient(rgba(255,250,235,.22) 1px,transparent 1.5px); --hoja-img-m:var(--hoja-img);
  --hoja-size:9px 9px,13px 13px; --hoja-pad:20px; --hoja-pad-m:16px;
  --ficha-img:var(--hoja-img); --textarea-img:repeating-linear-gradient(transparent 0 29px,var(--renglon) 29px 30px);
  --h1-deco:"\f621"; --h1-deco-col:var(--acento); --resalte:rgba(242,194,0,.5);
  --btn-bd:1px solid #7F868E; --btn-r:4px; --btn-bg:#D3D8DE;
  --btn-img:radial-gradient(circle at 8px 50%,#7C838C 0 2px,#E9ECEF 2.5px,transparent 3.5px),radial-gradient(circle at calc(100% - 8px) 50%,#7C838C 0 2px,#E9ECEF 2.5px,transparent 3.5px),linear-gradient(180deg,#F2F4F6,#C3C9D0);
  --btn-sh:0 2px 0 #5F656C,inset 0 1px 0 rgba(255,255,255,.8); --btn-sh-h:0 3px 0 #5F656C,inset 0 1px 0 rgba(255,255,255,.8);
  --btn-font:var(--font-tit); --btn-fw:700; --btn-px:20px; --btn-up:uppercase; --btn-ls:.05em; --btn-pri-bd:#7A2A06;
  --chip-rot:-2deg; --chip-up:uppercase; --tit-up:uppercase; --tit-ls:.03em;
  --modal-img:none; --modal-size:auto; --top-img:none;
  --nota-r:1px; --giro-k:.8; --tk:.8;
  color-scheme:light;
}
[data-theme="dark"][data-estilo="taller"],[data-theme="dark"] [data-estilo="taller"]{
  --bg:#2E2117; --menu:#3A2D21; --sup:#463727; --sup2:#3F3123; --borde:#6B5640; --borde2:#56442F;
  --txt:#F3E7D3; --mut:#C3B194; --acento:#FF8A3D; --relleno:#E5621F; --sobre-relleno:#FFFFFF; --sel:#5A432B;
  --ok:#86D49A; --ok-bg:#25382A; --warn:#FFC85C; --warn-bg:#4A3B19; --bad:#FF9C8C; --bad-bg:#4A2620;
  --renglon:rgba(255,230,190,.16); --cinta:rgba(30,30,30,.75);
  --n1:#5A4A2C; --n2:#5C4130; --n3:#4A4640; --n4:#45493A; --n5:#55433A;
  --sombra-nota:0 2px 0 rgba(0,0,0,.4),0 10px 14px -6px rgba(0,0,0,.7);
  --mesa-img:repeating-linear-gradient(92deg,rgba(0,0,0,.18) 0 2px,transparent 2px 11px),repeating-linear-gradient(88deg,rgba(255,220,170,.04) 0 3px,transparent 3px 23px),linear-gradient(180deg,#3A2A1C,#2A1E14);
  --hoja-img:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.4px),radial-gradient(rgba(255,240,210,.05) 1px,transparent 1.5px);
  --btn-bg:#5A6068; --btn-img:radial-gradient(circle at 8px 50%,#2A2E33 0 2px,#8A9098 2.5px,transparent 3.5px),radial-gradient(circle at calc(100% - 8px) 50%,#2A2E33 0 2px,#8A9098 2.5px,transparent 3.5px),linear-gradient(180deg,#767D86,#4B5158);
  --btn-sh:0 2px 0 #1C1F22,inset 0 1px 0 rgba(255,255,255,.18); --btn-sh-h:0 3px 0 #1C1F22,inset 0 1px 0 rgba(255,255,255,.18); --btn-bd:1px solid #2A2E33;
  --resalte:rgba(242,194,0,.28);
  color-scheme:dark;
}
/* ---------- ARCHIVADOR: carpetas manila, hojas perforadas, letra de oficina, timbres de tinta azul ---------- */
[data-estilo="archivador"]{
  --bg:#DCD5C6; --menu:#EDE7DA; --sup:#FFFFFF; --sup2:#F7F4EE; --campo:transparent; --borde:#C9BFAC; --borde2:#E3DCCD;
  --txt:#1D2A3D; --mut:#5F6878; --acento:#1F4E8C; --relleno:#1F3A68; --sobre-relleno:#FFFFFF; --sel:#E5ECF6;
  --ok:#1D6B45; --ok-bg:#E0F0E6; --warn:#8A5200; --warn-bg:#F7EBCF; --bad:#9E2A2A; --bad-bg:#F6E0DE;
  --r:3px; --r-s:3px; --r-chip:3px; --fs:15.5px; --pad:18px; --lh:1.5;
  --font:Georgia,"Times New Roman",serif; --font-num:Georgia,"Times New Roman",serif; --font-tit:Georgia,"Times New Roman",serif;
  --ic-bg:transparent; --ic-col:var(--acento); --up:none; --ls:0;
  --renglon:#CFDDEE; --margen:#E9A6A6; --cinta:rgba(255,255,255,.55);
  --n1:#F2DFAE; --n2:#FFFFFF; --n3:#E7EEF7; --n4:#F5EAD7; --n5:#ECE6F4;
  --sombra-nota:0 1px 1px rgba(0,0,0,.12),0 8px 12px -7px rgba(40,30,10,.35);
  --mesa-img:linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.04)); --mesa-size:auto;
  --hoja-img:radial-gradient(circle at 15px 50%,var(--bg) 0 5px,rgba(0,0,0,.14) 5.5px,transparent 6.5px),linear-gradient(90deg,transparent 30px,var(--margen) 30px,var(--margen) 31px,transparent 31px); --hoja-img-m:var(--hoja-img);
  --hoja-size:100% 72px,auto; --hoja-pad:44px; --hoja-pad-m:40px;
  --ficha-img:repeating-linear-gradient(transparent 0 29px,var(--renglon) 29px 30px); --textarea-img:var(--ficha-img);
  --h1-deco:"\f3d8"; --h1-deco-col:#B9842A; --resalte:rgba(31,78,140,.12);
  --btn-bd:1px solid #B9AE98; --btn-r:3px; --btn-bg:#FBF9F4; --btn-img:linear-gradient(180deg,#FFFFFF,#EEE9DE);
  --btn-sh:0 1px 0 rgba(0,0,0,.18),inset 0 1px 0 #fff; --btn-sh-h:0 2px 0 rgba(0,0,0,.22),inset 0 1px 0 #fff;
  --btn-font:var(--font); --btn-fw:700; --btn-px:16px; --btn-up:none; --btn-ls:0; --btn-pri-bd:#13284A;
  --chip-rot:-3deg; --chip-up:uppercase; --tit-up:none; --tit-ls:0;
  --modal-img:radial-gradient(circle at 50% 12px,var(--bg) 0 5px,rgba(0,0,0,.12) 5.5px,transparent 6.5px); --modal-size:90px 24px;
  --top-img:none; --nota-r:2px; --giro-k:.5; --tk:.82;
  color-scheme:light;
}
[data-theme="dark"][data-estilo="archivador"],[data-theme="dark"] [data-estilo="archivador"]{
  --bg:#1E1B17; --menu:#26221D; --sup:#2D2A25; --sup2:#28251F; --borde:#4D463B; --borde2:#3C362E;
  --txt:#EEE7D9; --mut:#B8AE9C; --acento:#8FB4E8; --relleno:#3F6AA8; --sobre-relleno:#FFFFFF; --sel:#2E3A4C;
  --ok:#86D3A2; --ok-bg:#223529; --warn:#F2C46A; --warn-bg:#3E3420; --bad:#F2A09A; --bad-bg:#432826;
  --renglon:rgba(143,180,232,.16); --margen:rgba(233,166,166,.35); --cinta:rgba(255,255,255,.18);
  --n1:#4B4128; --n2:#36322C; --n3:#2E3846; --n4:#3E3528; --n5:#3A3446;
  --sombra-nota:0 1px 1px rgba(0,0,0,.4),0 8px 12px -7px rgba(0,0,0,.7);
  --mesa-img:linear-gradient(135deg,rgba(255,255,255,.03),rgba(0,0,0,.15));
  --btn-bg:#38342E; --btn-img:linear-gradient(180deg,#45403A,#322E29); --btn-bd:1px solid #5C554A;
  --btn-sh:0 1px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06); --btn-sh-h:0 2px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  --resalte:rgba(143,180,232,.18); --h1-deco-col:#D9A64A;
  color-scheme:dark;
}
/* detalles propios de cada material */
[data-estilo="taller"] .top{border-bottom:7px solid transparent;border-image:repeating-linear-gradient(-45deg,#F2C200 0 12px,#1E1E1E 12px 24px) 7}
[data-estilo="taller"] .card.kpi::before,[data-estilo="taller"] .aviso::before,[data-estilo="taller"] .saldo::before{height:22px;width:60px;margin-left:-30px;transform:rotate(-1.5deg)}
[data-estilo="archivador"] .card.kpi{background-image:repeating-linear-gradient(transparent 0 23px,var(--renglon) 23px 24px)}
[data-estilo="archivador"] .card.kpi .l{border-bottom:2px solid #D96B6B;padding-bottom:4px;margin:0 -16px 6px;padding-left:16px;padding-right:16px}
[data-estilo="archivador"] .side a.act,[data-estilo="archivador"] .side a:nth-child(5n+2).act,[data-estilo="archivador"] .side a:nth-child(5n+3).act,[data-estilo="archivador"] .side a:nth-child(5n+4).act,[data-estilo="archivador"] .side a:nth-child(5n+5).act{background:var(--n1)}
[data-estilo="archivador"] .card.kpi::before,[data-estilo="archivador"] .aviso::before,[data-estilo="archivador"] .saldo::before{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35));border:1px solid rgba(0,0,0,.06)}
[data-estilo="taller"] .marca span,[data-estilo="archivador"] .marca span{font-size:calc(var(--fs) + 5px)}

/* ======================================================================
   NOTAS: colores, lista y PIZARRA DE CORCHO con chinches
   ====================================================================== */
.c-amarillo{--nc:#FFF0A0;--np:#E2B100}.c-rosa{--nc:#FFD0E0;--np:#D9467A}.c-celeste{--nc:#CDE8FF;--np:#2F7FD6}
.c-verde{--nc:#D3F2C6;--np:#3E9A4B}.c-lila{--nc:#E5D7FF;--np:#7B55C7}.c-naranja{--nc:#FFDDB8;--np:#E0761C}
.nota[class*="c-"]{background:var(--nc);color:#2B2A33}
.nota[class*="c-"] .meta{color:#6F6758}
.notas-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.notas-cab h2{margin:0!important;flex:1 1 auto}
.corcho{margin:4px -4px 0;padding:22px 18px 24px;border-radius:6px;border:10px solid #8A5A35;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 3px 12px rgba(0,0,0,.35),0 2px 0 #6E4527;
  background-color:#C79A68;
  background-image:radial-gradient(rgba(90,55,20,.35) 1px,transparent 1.6px),radial-gradient(rgba(255,235,200,.28) 1px,transparent 1.8px),radial-gradient(rgba(70,40,10,.22) 1.4px,transparent 2px);
  background-size:7px 7px,11px 11px,17px 17px;background-position:0 0,3px 5px,8px 2px}
[data-theme="dark"] .corcho{border-color:#4A3020;background-color:#7A5A3A;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 3px 14px rgba(0,0,0,.55),0 2px 0 #2E1E14}
.corcho-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:30px 22px;align-items:start}
.postit{position:relative;aspect-ratio:1/1;background:var(--nc);color:#2B2A33;padding:30px 16px 14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;
  font-family:'Patrick Hand','Segoe Print','Comic Sans MS',cursive;font-size:18px;line-height:1.35;word-break:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.15),0 10px 16px -8px rgba(0,0,0,.45);transform:rotate(var(--giro,0deg));transition:transform .15s}
.postit::after{content:"";position:absolute;inset:auto 0 0 auto;width:26px;height:26px;background:linear-gradient(225deg,transparent 50%,rgba(0,0,0,.08) 50%)}
.postit:hover,.postit:focus{transform:rotate(0deg) scale(1.02);outline:none;z-index:2}
.postit:focus-visible{box-shadow:0 0 0 3px var(--acento),0 10px 16px -8px rgba(0,0,0,.45)}
/* chinche: cabeza redonda con brillo, del color de la nota */
.postit::before{content:"";position:absolute;top:-7px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,rgba(255,255,255,.85) 0 3px,transparent 4px),radial-gradient(circle at 50% 50%,var(--np) 0 62%,color-mix(in srgb,var(--np) 70%,#000) 100%);
  box-shadow:0 3px 3px rgba(0,0,0,.35),2px 6px 4px -2px rgba(0,0,0,.25);z-index:1}
.postit-tx{flex:1 1 auto;white-space:pre-line}
.postit-meta{font-size:14px;color:#6F6758;border-top:1px dashed rgba(0,0,0,.18);padding-top:6px}
.postit-imp{position:absolute;top:7px;left:12px;font-family:'Caveat','Segoe Print',cursive;font-weight:700;font-size:17px;color:var(--np);transform:rotate(4deg)}
[data-theme="dark"] .postit{filter:brightness(.92) saturate(.92)}
@media (max-width:640px){.corcho{padding:22px 12px;border-width:8px}.corcho-grid{grid-template-columns:1fr;gap:28px}}
@media (prefers-reduced-motion:reduce){.postit{transform:none!important;transition:none}}
/* selector de color */
.col-notas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.postit-mini{width:38px;height:38px;border:2px solid transparent;background:var(--nc);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.18);border-radius:2px}
.postit-mini.act{border-color:var(--np);outline:2px solid var(--np);outline-offset:2px}
/* la libreta no pisa el color propio de cada nota */
[data-forma="papel"] .nota[class*="c-"],[data-forma="papel"] .nota[class*="c-"]:nth-child(2n),[data-forma="papel"] .nota[class*="c-"]:nth-child(3n){background:var(--nc)}
/* textos sueltos sobre el mesón de madera */
[data-estilo="taller"] .vh h1,[data-estilo="taller"] .vh p,[data-estilo="taller"] .demo-barra,[data-estilo="taller"] .vista>.filtros+.mut{color:#FFF3DE;text-shadow:0 1px 0 rgba(0,0,0,.45),0 0 8px rgba(0,0,0,.25)}
[data-estilo="taller"] .vh p b{color:#FFE2A8}
[data-estilo="taller"] .demo-barra{background:rgba(0,0,0,.18)}

/* ======================================================================
   APROVECHAR EL ANCHO: más espacio en pantallas grandes, hojas lado a lado
   y tablas que se adaptan al ancho de SU hoja (container queries)
   ====================================================================== */
.vista{max-width:1480px}
.avisos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px 16px;margin-bottom:14px}
.avisos-grid .aviso{margin:0}
[data-forma="papel"] .avisos-grid{gap:20px 18px}
[data-forma="papel"] .avisos-grid .aviso+.aviso{margin-top:0}
.card,.modal .mcuerpo{container-type:inline-size}
@container (max-width:600px){
  .tl th.sec,.tl td.sec{display:none}
  .tl .solo-movil{display:flex!important}
  .tl th.ic-c,.tl td.ic-c{display:none}
  .tl td.n{white-space:nowrap}
}
@container (min-width:601px){.tl .solo-movil{display:none!important}}
.correo-iframe{width:100%;min-height:420px;border:1px solid var(--borde);border-radius:var(--r-s);background:#fff}

/* ======================================================================
   TABLAS: encabezado fijo al desplazar + orden por columna
   ====================================================================== */
.tabla-wrap{max-height:72vh;overflow:auto;overscroll-behavior:contain}
.tabla thead th{position:sticky;top:0;z-index:3;background:var(--sup2);box-shadow:inset 0 -1px 0 var(--borde)}
[data-forma="papel"] .tabla thead th{background:var(--sup)!important;box-shadow:inset 0 -2px 0 var(--txt)}
.tabla tfoot td{position:sticky;bottom:0;z-index:2;background:var(--sup2)}
[data-forma="papel"] .tabla tfoot td{background:var(--sup)}
th.ord{cursor:pointer;user-select:none;white-space:nowrap}
th.ord:hover,th.ord:focus-visible{color:var(--acento);outline:none}
th.ord .ord-i{font-size:.8em;margin-left:4px;opacity:.35;vertical-align:0}
th.ord.asc .ord-i,th.ord.desc .ord-i{opacity:1;color:var(--acento)}
@media (max-width:640px){.tabla-wrap{max-height:64vh}}
/* filas de sección (liquidación) */
.tl tr.tsec td{background:var(--sel)!important;padding:8px 12px;border-bottom:1px solid var(--borde)}
.tsec-in{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:calc(var(--fs) - .5px)}
.tsec-in .bi{color:var(--acento);margin-right:4px}
[data-forma="papel"] .tl tr.tsec td{background:transparent!important;border-bottom:2px solid var(--txt)}
[data-forma="papel"] .tsec-in{font-family:var(--font-tit);font-size:calc(21px*var(--tk))}
/* planilla de rendición (como la de su Excel) */
.planilla th,.planilla td{padding:7px 9px;vertical-align:top}
.planilla td.n{white-space:nowrap}
.planilla .pl-det{min-width:220px}
.planilla .pl-in{min-height:34px;padding:5px 8px;font-size:15px}
.planilla .pl-n{text-align:right;min-width:92px}
.planilla select.pl-in{min-width:96px}
.pl-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.cat-mini{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--borde);background:var(--campo);border-radius:var(--r-s);padding:3px 8px;font-size:13px;cursor:pointer;color:var(--txt)}
.cat-mini .sticker{width:22px;height:22px;font-size:12px;display:inline-grid;place-items:center;border-radius:6px}
.planilla .sticker{width:22px;height:22px;font-size:12px;display:inline-grid;place-items:center;border-radius:6px;vertical-align:middle}
.pl-q{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
.pl-q .pl-n{min-width:0;width:64px}
.pl-calc{color:var(--mut)}
.pl-aviso{margin-top:6px;font-size:12.5px;color:var(--warn);background:var(--warn-bg);border-radius:var(--r-s);padding:4px 8px}
.pl-obj{margin-top:6px;font-size:12.5px;color:var(--bad);background:var(--bad-bg);border-radius:var(--r-s);padding:4px 8px}
.planilla tr.pl-objetada td b,.planilla tr.pl-objetada td.n{text-decoration:line-through;opacity:.6}
.pl-wrap{max-height:62vh}
[data-forma="papel"] .planilla .pl-in{font-size:calc(17px*var(--tk))}

.modal.xancho{width:min(1220px,100%)}

/* ======================================================================
   HORARIO: grilla tipo horario escolar (escritorio) y agenda por día (teléfono)
   ====================================================================== */
.sem-nav{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:12px}
.sem-tit{flex:1;text-align:center}
.hz-card{padding:12px}
.horario{container-type:inline-size}
.hz-grid{display:grid;grid-template-columns:54px repeat(7,minmax(0,1fr));grid-template-rows:40px repeat(var(--filas),24px);position:relative;border:1px solid var(--borde);border-radius:var(--r-s);background:var(--sup);overflow:hidden}
.hz-esq{grid-column:1;grid-row:1;border-bottom:2px solid var(--borde);background:var(--sup2)}
.hz-dia{grid-row:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;color:var(--mut);border-bottom:2px solid var(--borde);border-left:1px solid var(--borde2);background:var(--sup2)}
.hz-dia b{color:var(--txt)}
.hz-dia.hoy{background:var(--sel);color:var(--acento)}
.hz-dia.hoy b{color:var(--acento)}
.hz-hora{grid-column:1;font-size:11.5px;color:var(--mut);padding:2px 6px 0 0;text-align:right;border-top:1px solid var(--borde2);font-variant-numeric:tabular-nums}
.hz-col{border-left:1px solid var(--borde2);background-image:repeating-linear-gradient(to bottom,var(--borde2) 0 1px,transparent 1px 48px);background-size:100% 48px}
.hz-col.hoy{background-color:color-mix(in srgb,var(--sel) 55%,transparent)}
.hz-ev{position:relative;z-index:2;margin:1px 2px;width:calc((100% - 4px)/var(--lanes));margin-left:calc(2px + (100% - 4px) * var(--lane) / var(--lanes));text-align:left;border:0;border-left:4px solid var(--np);background:var(--nc);color:#2B2A33;border-radius:3px;padding:4px 6px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.25;box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 8px -4px rgba(0,0,0,.25)}
.hz-ev:hover,.hz-ev:focus-visible{z-index:4;outline:2px solid var(--np);outline-offset:1px}
.hz-t{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hz-m{color:#5F584C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.hz-ev.t-medico{background-image:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(255,255,255,.35) 6px 12px)}
.hz-ahora{z-index:3;position:relative;pointer-events:none}
.hz-ahora::before{content:"";position:absolute;left:0;right:0;top:calc(var(--pos)*100%);height:2px;background:#E5484D;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.hz-ahora::after{content:"";position:absolute;left:-5px;top:calc(var(--pos)*100% - 4px);width:10px;height:10px;border-radius:50%;background:#E5484D}
[data-theme="dark"] .hz-ev{filter:brightness(.92) saturate(.92)}
.hz-agenda{display:none}
.hz-ag-dia{border:1px solid var(--borde2);border-radius:var(--r-s);margin-bottom:10px;overflow:hidden;background:var(--sup)}
.hz-ag-dia.hoy{border-color:var(--acento)}
.hz-ag-cab{padding:8px 12px;background:var(--sup2);font-size:14px;border-bottom:1px solid var(--borde2)}
.hz-ag-dia.hoy .hz-ag-cab{background:var(--sel)}
.hz-ag-ev{display:flex;gap:10px;width:100%;text-align:left;border:0;border-left:5px solid var(--np);background:var(--nc);color:#2B2A33;padding:9px 12px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.06);font:inherit}
.hz-ag-h{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;min-width:44px;line-height:1.25}
.hz-ag-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.hz-ag-tx span{font-size:13px;color:#5F584C}
.hz-ag-vacio{padding:8px 12px;font-size:13px;color:var(--mut)}
@container (max-width:700px){.hz-grid{display:none}.hz-agenda{display:block}}
.hz-diasel{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 12px}
.hz-diasel label{display:flex;align-items:center;gap:5px;border:1px solid var(--borde);border-radius:var(--r-s);padding:6px 10px;cursor:pointer;background:var(--campo);font-size:14px}
.hz-diasel input{accent-color:var(--relleno)}
/* versión «de objetos»: horario impreso pegado con cinta, tiras de papel */
[data-forma="papel"] .hz-card{position:relative;padding-top:20px}
[data-forma="papel"] .hz-card::before,[data-forma="papel"] .hz-card::after{content:"";position:absolute;top:-8px;width:80px;height:20px;background:var(--cinta);z-index:5}
[data-forma="papel"] .hz-card::before{left:18px;transform:rotate(-5deg)}
[data-forma="papel"] .hz-card::after{right:18px;transform:rotate(4deg)}
[data-forma="papel"] .hz-grid{border:2px solid var(--txt);background:var(--sup);border-radius:2px}
[data-forma="papel"] .hz-dia,[data-forma="papel"] .hz-esq{background:var(--n1);border-bottom:2px solid var(--txt);font-family:var(--font-tit);font-size:calc(18px*var(--tk))}
[data-forma="papel"] .hz-dia:nth-child(3n){background:var(--n2)}[data-forma="papel"] .hz-dia:nth-child(3n+1){background:var(--n3)}
[data-forma="papel"] .hz-dia.hoy{outline:3px solid var(--acento);outline-offset:-3px}
[data-forma="papel"] .hz-hora{font-family:var(--font-tit);font-size:calc(15px*var(--tk))}
[data-forma="papel"] .hz-ev{border-radius:1px;transform:rotate(calc(var(--giro-k)*-.6deg));font-family:var(--font);font-size:calc(14px*var(--tk))}
[data-forma="papel"] .hz-t{font-family:var(--font-tit);font-size:calc(17px*var(--tk))}
[data-forma="papel"] .hz-ev:nth-of-type(2n){transform:rotate(calc(var(--giro-k)*.7deg))}
[data-forma="papel"] .hz-ag-dia{border:0;box-shadow:var(--sombra-nota);background:var(--sup);background-image:var(--ficha-img)}
[data-forma="papel"] .hz-ag-cab{background:var(--n1);font-family:var(--font-tit);font-size:calc(21px*var(--tk))}

/* arrastrar y soltar notas */
.notas-ayuda{display:inline-flex;align-items:center;gap:5px}
.postit,.notas-lista .nota{touch-action:manipulation}
.postit{cursor:grab}
.nota-elegida{cursor:grabbing}
.nota-fantasma{opacity:.35;outline:2px dashed var(--acento);outline-offset:3px}
.nota-arrastre{transform:rotate(3deg) scale(1.04)!important;box-shadow:0 18px 30px -10px rgba(0,0,0,.45)!important}
.notas-lista .nota{cursor:grab}

/* maestro de actividades */
.act-st{--gc:var(--np);background:var(--nc)!important;color:color-mix(in srgb,var(--np) 80%,#000)!important}
[data-forma="papel"] .act-st{background:var(--np)!important;color:#fff!important}
.act-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-bottom:14px}
.act-tiles .cat-tile .sticker{width:40px;height:40px;font-size:19px;display:grid;place-items:center;border-radius:var(--r)}
.act-mas{border-style:dashed!important;color:var(--acento)}
.act-mas .bi{font-size:22px;margin-top:8px}
.sw{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer;vertical-align:middle}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;background:var(--borde);border-radius:999px;transition:.15s}
.sw span::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:.15s}
.sw input:checked+span{background:var(--ok)}
.sw input:checked+span::before{transform:translateX(18px)}
.sw input:focus-visible+span{outline:2px solid var(--acento);outline-offset:2px}

/* contacto del profesor */
.cto{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cto .btn{text-decoration:none}
.cto .cto-wa i{color:#1FA855}
.cto-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin:0 0 12px;border:1px dashed var(--borde);border-radius:var(--r-s);font-size:14px}
.cto-h .cto{margin-top:0}
.serv-correo{display:grid;gap:8px;margin-bottom:12px}
.serv-correo .btn{justify-content:flex-start;text-align:left;min-height:50px;width:100%}
.serv-correo .btn span{display:flex;flex-direction:column;line-height:1.25}
.serv-correo small{color:var(--mut);font-weight:400;font-size:12px}

/* íconos propios */
.xi{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none}
.ico-lib{max-height:340px;overflow:auto;padding:2px 2px 4px;margin-bottom:14px;border-bottom:1px solid var(--borde2)}
.ico-lib .ico-sel{margin-bottom:8px}
.ico-gt{font-size:12px;font-weight:600;color:var(--mut);margin:6px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.ico-bus{margin-bottom:8px}
.grupos-act{flex-wrap:wrap}
th.ord .ord-i{display:inline-block;width:1em;text-align:center}
@media (max-width:640px){.grupos-act{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-4px;padding:2px 4px}.grupos-act::-webkit-scrollbar{display:none}.grupos-act button{flex:none}}

.prop-ir{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.prop-ir .btn{justify-content:flex-start;text-align:left;min-height:58px;text-decoration:none}
.prop-ir .btn span{display:flex;flex-direction:column;line-height:1.25}
.prop-ir small{color:var(--mut);font-weight:400;font-size:12px}
.ficha-cambios{width:100%;table-layout:fixed}.ficha-cambios td{overflow-wrap:anywhere;vertical-align:top}.ficha-cambios td.nw{width:32%}

/* visor de comprobantes */
.vc{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px;align-items:start}
.vc-info .ficha-t{width:100%;border-collapse:collapse;font-size:14px}
.vc-info .ficha-t th{text-align:left;color:var(--mut);font-weight:500;padding:5px 10px 5px 0;vertical-align:top;white-space:nowrap}
.vc-info .ficha-t td{padding:5px 0;border-bottom:1px dashed var(--borde2);overflow-wrap:anywhere}
.vc-img{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px}
.vc-lienzo{flex:1;display:flex;justify-content:center;min-width:0}
.vc-lienzo img{display:block;max-width:100%;max-height:68vh;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.12);background:#fff}
.vc-lienzo iframe{width:100%;height:68vh;border:0;border-radius:10px;background:#fff}
.vc-fl{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--borde);background:var(--sup);color:var(--txt);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 6px}
.vc-fl:hover{border-color:var(--acento);color:var(--acento)}
.vc-pts{grid-column:1/-1;display:flex;justify-content:center;gap:8px}
.vc-pts button{width:10px;height:10px;border-radius:50%;border:0;background:var(--borde);padding:0;cursor:pointer}
.vc-pts button.act{background:var(--acento)}
@media (max-width:760px){.vc{grid-template-columns:1fr}.vc-img{order:-1}.vc-fl{position:absolute;top:50%;transform:translateY(-50%);z-index:2;margin:0;background:color-mix(in srgb,var(--sup) 85%,transparent)}.vc-fl.ant{left:2px}.vc-fl.sig{right:2px}.vc-lienzo img,.vc-lienzo iframe{max-height:56vh}}
.serv-correo .btn{min-width:0;white-space:normal;max-width:100%}.serv-correo .btn span{min-width:0}.serv-correo small{overflow-wrap:anywhere}
.serv-correo .btn.pri small{color:inherit;opacity:.85}

/* arrastrar en el horario */
.hz-ev.mov{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hz-ev.mov:hover{cursor:grab}
.hz-ev.arrastrando{cursor:grabbing;z-index:10;opacity:.92;box-shadow:0 10px 24px rgba(0,0,0,.28);transition:none}
.hz-grid.arrastre .hz-ev:not(.arrastrando){pointer-events:none;opacity:.7}
.hz-rs{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize}
.hz-rs::after{content:'';position:absolute;left:50%;bottom:3px;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .15s}
.hz-ev.mov:hover .hz-rs::after,.hz-ev.arrastrando .hz-rs::after{opacity:.35}
.hz-et{position:absolute;z-index:11;transform:translate(-50%,-100%);background:var(--txt);color:var(--sup);font:600 12px/1.2 system-ui,sans-serif;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none}
@media print{.tabla-wrap{max-height:none!important;overflow:visible!important}.tabla thead th,.tabla tfoot td{position:static!important}.filtros,.barra-fechas,.btns,.periodos{display:none!important}}

/* lector universal */
.ld-zona{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 16px;border:2px dashed var(--borde);border-radius:var(--r-s);cursor:pointer;text-align:center;background:var(--campo)}
.ld-zona .bi{font-size:34px;color:var(--acento)}
.ld-zona span{color:var(--mut);font-size:13px}
.ld-zona.sobre,.ld-zona:hover{border-color:var(--acento);background:var(--sel)}
.ld-tipos{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:10px 0;color:var(--mut);font-size:13px}
.ld-cab{display:flex;gap:12px;align-items:flex-start}
.ld-cab h3{margin:6px 0 2px;font-size:18px}
.ld-cab p{margin:0 0 4px}
.ld-cab .ic-t{flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:22px;border-radius:10px;background:var(--sup2)}
tr.ld-mal td{background:color-mix(in srgb,#E5484D 7%,transparent)!important}
.chip.rojo{background:#FCE7E7;color:#9B1C1C;white-space:normal;text-align:left}
[data-theme="dark"] .chip.rojo{background:#4A1D1F;color:#FFC9C9}
.vc-arch{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;border:1px dashed var(--borde);border-radius:10px;width:100%}
.vc-arch .bi{font-size:40px;color:var(--acento)}

/* correo con adjunto + expediente */
.ld-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:4px 0 8px}
.ex-sec{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ex-barra{height:10px;border-radius:6px;background:var(--sup2);overflow:hidden;margin:6px 0}
.ex-barra span{display:block;height:100%;background:var(--acento);transition:width .2s}
.adj-ia{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.adj-ia .aviso{margin:0}
.ld-lote-cab{margin-bottom:4px}

/* informes */
.inf-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.inf-graf{position:relative;height:300px}
.inf-graf.corto{height:240px}
.neg-t{color:var(--bad);font-weight:700}.pos-t{color:var(--ok);font-weight:700}
@media (max-width:640px){.inf-graf{height:320px}.inf-graf.corto{height:220px}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.kpis .card{margin:0}

/* buscador (spotlight) */
.buscar-top{flex:1;max-width:460px;margin:0 auto;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--borde);border-radius:999px;background:var(--campo);color:var(--mut);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.buscar-top:hover{border-color:var(--acento);color:var(--txt)}
.buscar-top .bi{font-size:16px;color:var(--acento)}
.buscar-top span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buscar-top kbd,.bus-kbd{font:11px/1 ui-monospace,Menlo,monospace;padding:3px 6px;border:1px solid var(--borde);border-radius:5px;color:var(--mut);background:var(--sup)}
@media (max-width:700px){.buscar-top{flex:0 0 auto;width:40px;height:40px;padding:0;justify-content:center;margin:0 0 0 auto}.buscar-top span,.buscar-top kbd{display:none}}
.bus-fondo .modal{height:min(860px,calc(100vh - 32px))}
.bus-fondo .mcuerpo{display:flex;flex-direction:column;min-height:0;flex:1;padding-bottom:12px}
.bus{display:flex;flex-direction:column;min-height:0;flex:1}
.bus-barra{display:flex;align-items:center;gap:10px;border:2px solid var(--acento);border-radius:12px;padding:0 12px;background:var(--campo)}
.bus-barra .bi{font-size:20px;color:var(--acento)}
.bus-q{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:18px;padding:12px 0;color:var(--txt);min-width:0}
.bus-filtros{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.bus-filtros button{border:1px solid var(--borde);background:var(--sup);border-radius:999px;padding:4px 10px;font:inherit;font-size:13px;cursor:pointer;color:var(--txt)}
.bus-filtros button.act{background:var(--acento);color:#fff;border-color:var(--acento)}
.bus-filtros button.act .mut{color:rgba(255,255,255,.8)}
.bus-ia{margin:4px 0}
.bus-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;flex:1;min-height:0;margin-top:6px}
.bus-lista{overflow:auto;border:1px solid var(--borde2);border-radius:10px;padding:4px;min-height:0}
.bus-prev{overflow:auto;border:1px solid var(--borde2);border-radius:10px;padding:14px;min-height:0;background:var(--sup)}
.bus-it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px;cursor:pointer;font:inherit;color:var(--txt)}
.bus-it:hover{background:var(--sel)}.bus-it.act{background:var(--sel);box-shadow:inset 3px 0 0 var(--acento)}
.bus-it .ic-t{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:var(--sup2);font-size:16px}
.bus-mini{flex:none;width:34px;height:42px;border-radius:5px;background:var(--sup2) center/cover no-repeat;border:1px solid var(--borde2)}
.bus-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.bus-tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bus-tx small{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bus-m{flex:none;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.bus mark{background:#FFE58A;color:inherit;border-radius:2px;padding:0 1px}
[data-theme="dark"] .bus mark{background:#7A6400;color:#fff}
.bus-vacio{text-align:center;color:var(--mut);padding:40px 16px}.bus-vacio .bi{font-size:34px}
.bus-ej{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.bus-ej .chip{cursor:pointer}
.bp-cab{display:flex;gap:12px;align-items:flex-start}.bp-cab h3{margin:2px 0;font-size:18px}
.bp-cab .ic-t{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--sup2);font-size:20px}
.bp-monto{font-size:26px;font-weight:800;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.bp-img{margin:10px 0;display:flex;justify-content:center;cursor:zoom-in}
.bp-img img{max-width:100%;max-height:52vh;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.15);background:#fff}
.bp-img iframe{width:100%;height:52vh;border:0;border-radius:8px;background:#fff}
.bp-nota{padding:14px;border-radius:6px;margin-top:10px;white-space:pre-line;background:var(--n1,#FFF3A8);color:#2B2A33}
.bp-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bus-volver{display:none;margin-bottom:8px}
@media (max-width:760px){.bus-cuerpo{grid-template-columns:1fr}.bus-prev{display:none}.bus.ver-prev .bus-prev{display:block}.bus.ver-prev .bus-lista{display:none}.bus-volver{display:inline-flex}.bus-kbd{display:none}.bus-fondo .modal{height:100vh;max-height:100vh}}
.top .marca{flex:0 1 auto}
.bp-thumbs .th{width:70px;height:88px;border-radius:6px;background:var(--sup2) center/cover no-repeat;border:1px solid var(--borde2);cursor:zoom-in}

.bp-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:16px 0 6px;border-bottom:1px solid var(--borde2);padding-bottom:4px}
.bp-hist{list-style:none;margin:0;padding:0}.bp-hist li{padding:6px 0;border-bottom:1px dashed var(--borde2)}
.bp-com{padding:8px 10px;background:var(--sup2);border-radius:8px;margin-bottom:6px}
.bp-plan th{font-weight:400}.bp-obj th,.bp-obj td{text-decoration:line-through;opacity:.7}
.bp-correo{width:100%;min-height:320px;border:1px solid var(--borde2);border-radius:8px;background:#fff}
.bp-foto img{max-height:220px}
.ficha-t td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============ Ayuda: directorio por escalones ============ */
.ay-gratis h2 .chip{margin-left:6px}
.ay-gr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ay-gr{border:1px solid var(--borde2);border-radius:var(--r);padding:12px;background:var(--sup);display:flex;flex-direction:column;gap:8px}
.ay-gr p{margin:0;font-size:calc(var(--fs) - 1px);color:var(--txt)}
.ay-gr .btn{align-self:flex-start}
.ay-gr-t{display:flex;gap:10px;align-items:center}
.ay-gr .ic-t{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-s);background:var(--ok-bg);color:var(--ok);font-size:17px;flex:none}
.ay-links{display:flex;flex-direction:column;gap:4px;font-size:calc(var(--fs) - 1.5px)}
.ay-links a{color:var(--acento);text-decoration:none}.ay-links a:hover{text-decoration:underline}
.ay-ubi-f{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.ay-ubi-f .f{margin:0;min-width:200px;flex:1}
.ay-ubi-f .f:nth-child(3){flex:0 0 auto;min-width:0}
.ay-ubi-f .f>span{display:block}
.ay-ubi-b{display:flex;gap:8px;flex-wrap:wrap}
.ay-esc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 8px}
.ay-esc a{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border:1px solid var(--borde);border-radius:var(--r);background:var(--sup);color:var(--txt);text-decoration:none;font-weight:600;font-size:calc(var(--fs) - .5px);text-align:center;min-height:46px}
.ay-esc a.act{background:var(--relleno);border-color:var(--relleno);color:var(--sobre-relleno)}
.ay-esc .ay-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sup2);color:var(--mut);font-size:12px;flex:none}
.ay-esc a.act .ay-num{background:rgba(255,255,255,.25);color:inherit}
.ay-esc-d{margin:4px 0 10px;color:var(--mut)}
.ay-chips button .bi{margin-right:2px}
.ay-ver{color:var(--acento)}
.ay-sellos{display:flex;gap:6px;flex-wrap:wrap}
.ay-ft{width:100%;border-collapse:collapse;font-size:calc(var(--fs) - .5px)}
.ay-ft th{text-align:left;color:var(--mut);font-weight:500;padding:6px 12px 6px 0;vertical-align:top;white-space:nowrap;width:1%}
.ay-ft td{padding:6px 0;border-bottom:1px dashed var(--borde2);overflow-wrap:anywhere}
.ay-cto .cto{display:flex;gap:8px;flex-wrap:wrap}
.ay-plan{border:1px dashed var(--borde);border-radius:var(--r);padding:12px}
.ay-plan p{margin:6px 0 0}
.sug-ayuda{display:flex;gap:10px;align-items:flex-start;margin:-2px 0 12px;padding:8px 10px;border-radius:var(--r);border:1px dashed var(--borde);color:var(--mut);font-size:calc(var(--fs) - 1px)}
.sug-ayuda>.bi{font-size:16px;margin-top:2px;color:var(--acento)}
.sug-ayuda>div{flex:1}
.sug-ayuda a{color:var(--acento)}
.sug-ayuda .ib{width:28px;height:28px;font-size:12px}
@media (max-width:760px){
  .ay-esc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ay-esc a:first-child{grid-column:1/-1}
  .ay-ubi-f .f,.ay-ubi-f .f:nth-child(3){flex:1 1 100%}
  .ay-ubi-f .seg{display:flex}.ay-ubi-f .seg button{flex:1}
  .ay-ft th{white-space:normal;width:38%}
}
.ay-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ay-tabla tbody td.main{min-width:200px}
.ay-tabla th.ic-c,.ay-tabla td.ic-c{width:40px;max-width:40px}
@media (max-width:640px){.ay-tabla tbody td.main{min-width:0}}

/* pestañas de sección (varias pantallas bajo una entrada del menú) */
.subnav{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;border-bottom:1px solid var(--borde2);padding-bottom:0}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;color:var(--mut);text-decoration:none;font-weight:600;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subnav a:hover{color:var(--txt)}
.subnav a.act{color:var(--acento);border-bottom-color:var(--acento)}
.subnav .bd{background:var(--bad);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;margin-left:2px}

/* modo de uso */
.modos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modo-op{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;border:2px solid var(--borde);border-radius:var(--r-s,10px);background:var(--sup);color:var(--txt);font:inherit;cursor:pointer}
.modo-op .bi{font-size:26px;color:var(--acento)}
.modo-op b{font-size:17px}.modo-op span{font-size:13.5px;color:var(--mut);line-height:1.4}
.modo-op:hover{border-color:var(--acento)}.modo-op.act{border-color:var(--acento);background:var(--sel);box-shadow:inset 0 0 0 1px var(--acento)}
@media (max-width:560px){.modos{grid-template-columns:1fr}}
/* Ayuda: fotos de los profesionales */
.tl .ay-foto{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;margin:0 auto;background:var(--sup2)}
.ay-cab{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.ay-foto-g{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;background:var(--sup2);border:1px solid var(--borde2)}
.ay-cab .ic-t{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--sup2);font-size:24px;flex:none}
.tl img.ay-fm{float:left;width:44px;height:44px;border-radius:50%;object-fit:cover;margin:2px 10px 4px 0}

/* ===== PIN y bloqueo del equipo ===== */
.pin-pantalla{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));overflow:auto}
.pin-caja{width:100%;max-width:340px;text-align:center}
.pin-caja h1{font-size:22px;margin:14px 0 6px}
.pin-caja p{margin:0 0 18px;font-size:14px;line-height:1.45}
.pin-logo{width:56px;height:56px}
.pin-puntos{display:flex;justify-content:center;gap:14px;margin:6px 0 10px}
.pin-puntos i{width:14px;height:14px;border-radius:50%;border:2px solid var(--borde);display:block;transition:background .12s,border-color .12s}
.pin-puntos i.on{background:var(--relleno);border-color:var(--relleno)}
.pin-puntos.mal{animation:pinmal .35s}
@keyframes pinmal{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-err{min-height:20px;color:var(--bad);font-size:14px;margin-bottom:10px}
.pin-teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:290px;margin:0 auto}
.pin-teclado button{height:64px;border-radius:14px;border:1px solid var(--borde2);background:var(--sup);color:var(--txt);font-size:24px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.pin-teclado button:active{background:var(--sup2)}
.pin-teclado .pin-aux{font-size:13px;font-weight:500;border-color:transparent;background:transparent;color:var(--relleno)}
.pin-teclado .pin-aux .bi{font-size:24px}
.ib[hidden]{display:none}
.mesanio{display:flex;gap:8px}.mesanio select[data-m]{flex:1.5}.mesanio select[data-a]{flex:1}
/* totales arriba: fila bajo los títulos, fija al desplazarse */
.tabla thead tr[data-total] td{position:sticky;top:var(--th-alto,38px);z-index:3;background:var(--sup2);font-weight:800;border-bottom:2px solid var(--borde);box-shadow:inset 0 -1px 0 var(--borde)}
[data-forma="papel"] .tabla thead tr[data-total] td{background:var(--sup);border-bottom:2px solid var(--txt);font-family:var(--font-tit);font-size:calc(21px*var(--tk))}
@media print{.tabla thead tr[data-total] td{position:static!important}}

/* ── Pantalla de acceso (entrada, registro y PIN): mismo diseño que el login de AgroGescom ── */
.pin-pantalla.acceso{padding:0;display:flex;align-items:stretch;justify-content:stretch;background:var(--bg)}
.acc-visual{position:relative;flex:1.15;overflow:hidden;background:#0d2238}
.acc-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out;pointer-events:none}
.acc-slide.on{opacity:1}
.acc-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);transition:transform 8s ease-out}
.acc-slide.on .acc-bg{transform:scale(1.12)}
.acc-velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,16,30,.84) 0%,rgba(6,16,30,.32) 30%,rgba(6,16,30,0) 54%),linear-gradient(to bottom,rgba(6,16,30,.32) 0%,rgba(6,16,30,0) 16%)}
.acc-txt{position:absolute;left:0;right:0;bottom:0;padding:3.2rem 3.4rem 5rem;color:#fff;opacity:0;transform:translateY(16px);transition:opacity .9s ease .25s,transform .9s ease .25s}
.acc-slide.on .acc-txt{opacity:1;transform:none}
.acc-txt h2{font-size:2.5rem;font-weight:800;line-height:1.1;margin:0 0 .8rem;letter-spacing:-.5px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.acc-txt p{font-size:1.08rem;line-height:1.55;max-width:32rem;margin:0;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.acc-marca{position:absolute;top:2rem;left:3.4rem;z-index:3;display:flex;align-items:center;gap:.55rem;color:#fff;font-weight:800;font-size:1.2rem;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.acc-marca img{width:34px;height:34px;border-radius:9px}
.acc-puntos{position:absolute;bottom:2.4rem;left:3.4rem;z-index:3;display:flex;gap:9px}
.acc-puntos button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .35s,background .35s}
.acc-puntos button.on{width:28px;border-radius:5px;background:#fff}
.acc-form{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:auto;background:radial-gradient(130% 90% at 50% 0%,var(--sup) 0%,var(--bg) 75%)}
.acc-inner{width:100%;max-width:370px}
.acc-brand{display:flex;align-items:center;gap:.65rem;margin-bottom:1.4rem}
.acc-brand img{width:46px;height:46px;border-radius:12px}
.acc-brand b{display:block;font-size:1.3rem;color:var(--txt)}
.acc-brand span{font-size:.78rem;color:var(--mut)}
.acc-tit{font-size:1.45rem;margin:0 0 .35rem;color:var(--txt)}
.acc-sub{color:var(--mut);font-size:.95rem;margin:0 0 1.3rem;line-height:1.45}
.acc-btn{width:100%;margin-top:.9rem;min-height:46px;font-size:15px}
.acc-alt{text-align:center;font-size:.9rem;color:var(--mut);margin:1.1rem 0 0}
.acc-alt a{color:var(--acento);font-weight:600}
.acc-volver{text-align:center;margin-top:.6rem}
.acceso .pin-caja{max-width:340px;margin:0 auto}
.acceso .pin-caja h1{margin-top:0}
@media (max-width:900px){
  .pin-pantalla.acceso{flex-direction:column;overflow:auto}
  /* la foto parte DEBAJO del notch / isla dinámica / barra de estado: arriba queda una franja oscura del mismo color */
  .acc-visual{flex:none;height:calc(30vh + env(safe-area-inset-top));min-height:calc(190px + env(safe-area-inset-top))}
  .acc-slide{top:env(safe-area-inset-top)}
  .acc-bg{background-position:center 32%}
  .acc-marca{display:none}
  .acc-txt{padding:1rem 1.3rem 1.5rem}.acc-txt h2{font-size:1.4rem;margin:0}.acc-txt p{display:none}
  .acc-puntos{bottom:.9rem;left:auto;right:1.3rem}
  .acc-form{flex:1 0 auto;align-items:flex-start;padding:1.4rem 1.2rem max(1.4rem,env(safe-area-inset-bottom))}
  .acc-inner:has(.pin-caja) .acc-brand{display:none}
  .acceso .acc-brand{margin-bottom:1rem}.acceso .acc-brand img{width:38px;height:38px}.acceso .acc-brand b{font-size:1.15rem}
}
/* teléfonos bajos (iPhone SE, Safari con barras): franja de fotos y teclado del PIN más compactos para que todo entre sin desplazar */
@media (max-width:900px) and (max-height:760px){
  .acc-visual{height:calc(24vh + env(safe-area-inset-top));min-height:calc(104px + env(safe-area-inset-top))}
  .acc-txt{padding:.7rem 1.2rem 1rem}.acc-txt h2{font-size:1.15rem}
  .acc-form{padding-top:.9rem;padding-bottom:max(.8rem,env(safe-area-inset-bottom))}
  .acceso .pin-caja h1{font-size:20px;margin-bottom:4px}
  .acceso .pin-caja p{font-size:13px;margin-bottom:8px}
  .acceso .pin-puntos{margin:4px 0 6px}
  .acceso .pin-err{min-height:18px;margin-bottom:6px}
  .acceso .pin-teclado{gap:9px}
  .acceso .pin-teclado button{height:54px;font-size:22px}
}
@media (max-width:900px) and (max-height:580px){
  .acc-visual{height:calc(64px + env(safe-area-inset-top));min-height:0}
  .acc-txt h2{font-size:1rem}
  .acceso .pin-caja p{display:none}
  .acceso .pin-teclado button{height:48px}
}
/* el nombre «PensiónFácil» siempre completo: en pantallas angostas se achican los botones, nunca el nombre.
   Claro/oscuro se oculta de la barra porque ya está dentro de «Apariencia» (la paleta). */
.top .marca{flex:0 0 auto}
.marca span{overflow:visible;text-overflow:clip;white-space:nowrap}
@media (max-width:520px){
  .top{gap:6px;padding-left:12px;padding-right:12px}
  .top-der{gap:6px;margin-left:6px}
  .top .ib,.top .buscar-top{width:34px;height:34px}
  .top .quien{padding:3px}
  .top .quien .nm,.top .quien .bi-chevron-down{display:none}
  #tema{display:none}
  [data-forma="papel"] .marca span{font-size:calc(24px*var(--tk))}
}
@media (max-width:360px){
  .marca{gap:6px}
  .marca span{font-size:15px}
  .marca img{width:26px;height:26px}
  [data-forma="papel"] .marca span{font-size:calc(20px*var(--tk))}
}
.demo-barra.demo{background:var(--warn-bg);color:var(--warn);font-size:13px}.demo-barra.demo b{color:inherit}.demo-barra .btn.sm{padding:2px 10px;font-size:12px;vertical-align:middle}
/* Pantalla de acceso en computador: todo más grande (logo, títulos, formulario y teclado del PIN), escalando con la pantalla */
@media (min-width:901px){
  .acc-marca{top:clamp(2rem,3vw,3.2rem);left:clamp(3rem,4vw,5rem);gap:.8rem;font-size:clamp(1.5rem,1.7vw,2.1rem)}
  .acc-marca img{width:clamp(48px,3.4vw,68px);height:clamp(48px,3.4vw,68px);border-radius:14px}
  .acc-txt{padding:3.4rem clamp(3rem,4vw,5rem) clamp(5rem,6vw,7rem)}
  .acc-txt h2{font-size:clamp(2.8rem,3.6vw,4.4rem)}
  .acc-txt p{font-size:clamp(1.2rem,1.4vw,1.7rem);max-width:44rem}
  .acc-puntos{left:clamp(3rem,4vw,5rem);bottom:clamp(2.4rem,3vw,3.4rem)}
  .acc-puntos button{width:11px;height:11px}.acc-puntos button.on{width:34px}
  .acc-inner{max-width:clamp(400px,30vw,560px)}
  .acc-brand{gap:.9rem;margin-bottom:2rem}
  .acc-brand img{width:clamp(60px,4.4vw,88px);height:clamp(60px,4.4vw,88px);border-radius:18px}
  .acc-brand b{font-size:clamp(1.7rem,2.1vw,2.5rem)}
  .acc-brand span{font-size:clamp(.95rem,1.05vw,1.25rem)}
  .acc-tit{font-size:clamp(1.9rem,2.4vw,2.8rem)}
  .acc-sub{font-size:clamp(1.05rem,1.2vw,1.4rem)}
  .acceso label.f>span{font-size:clamp(14px,1vw,17px)}
  .acceso .in{min-height:clamp(46px,3.6vw,58px);font-size:clamp(16px,1.2vw,20px)}
  .acc-btn{min-height:clamp(50px,3.8vw,62px);font-size:clamp(16px,1.2vw,20px)}
  .acc-alt,.acc-volver .btn{font-size:clamp(.95rem,1.05vw,1.2rem)}
  .acceso .pin-caja{max-width:clamp(360px,27vw,480px)}
  .acceso .pin-caja h1{font-size:clamp(26px,2.4vw,38px)}
  .acceso .pin-caja p{font-size:clamp(15px,1.15vw,19px)}
  .acceso .pin-puntos{gap:clamp(14px,1.3vw,20px);margin:12px 0 16px}
  .acceso .pin-puntos i{width:clamp(14px,1.2vw,20px);height:clamp(14px,1.2vw,20px)}
  .acceso .pin-teclado{max-width:clamp(300px,24vw,420px);gap:clamp(12px,1.1vw,18px)}
  .acceso .pin-teclado button{height:clamp(64px,5.6vw,92px);font-size:clamp(24px,2.1vw,36px);border-radius:18px}
  .acceso .pin-teclado .pin-aux{font-size:clamp(13px,1.05vw,17px)}
  .acceso .pin-teclado .pin-aux .bi{font-size:clamp(24px,2.1vw,34px)}
}
/* aviso de mudanza a cidsoft.cl (solo en la página de celltek.cl) */
.mudanza{background:var(--sel);color:var(--txt);border-bottom:2px solid var(--acento);padding:8px 14px;font-size:13px;line-height:1.5;text-align:center}
.mudanza b{color:var(--acento)}
.mud-btns{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:center;vertical-align:middle;margin-left:4px}
.mudanza .btn.sm{padding:3px 10px;font-size:12px}
@media print{.mudanza{display:none!important}}
.demo-barra:empty{display:none}
.acc-adm{margin-top:.4rem;font-size:.82rem}.acc-adm a{color:var(--mut);font-weight:500}
/* Ayuda por zona */
.ay-zona-f{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ay-zona-t{display:flex;gap:10px;align-items:flex-start}
.ay-zona-t>.bi{font-size:20px;color:var(--acento);margin-top:2px}
.ay-zona-b{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ay-zona-sel select{min-width:200px}
.ay-zona-sel .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:640px){.ay-zona-b{width:100%}.ay-zona-b>*{flex:1}.ay-zona-sel select{width:100%;min-width:0}}

/* Sin zoom accidental en teléfonos: iOS hace zoom al tocar un campo con letra < 16 px y no vuelve solo.
   Con dedo: campos a 16 px como mínimo y sin zoom por doble toque (el pellizco lo bloquea el viewport). */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (pointer:coarse){input,select,textarea,.in,.it-fila .in,.rango-in .in{font-size:16px!important}}
/* visor de comprobantes: tocar para ampliar (sin pellizco) */
.vc-lienzo img{cursor:zoom-in}
.vc-lienzo.zoom{display:block;overflow:auto;max-height:68vh;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;border-radius:10px}
.vc-lienzo.zoom img{max-width:none;max-height:none;width:240%;cursor:zoom-out}
.vc-lienzo.zoom::after{content:"Toca de nuevo para volver";position:sticky;left:8px;bottom:8px;display:inline-block;margin-top:-34px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px}

/* Un pie de tabla con varias filas no puede quedarse pegado abajo: las filas se montan y las líneas se cortan. Con una sola fila sigue fijo. */
.tabla tfoot:has(tr + tr) td{position:static}
.tabla tfoot tr + tr td{border-top:1px solid var(--borde2)}

/* Formulario de gasto más simple: sin «Cant.» ni «Devol. Isapre» salvo que hagan falta (gasto de salud, varias unidades o con el botón de más opciones) */
.items-ed.simple .it-cab,.items-ed.simple .it-fila{grid-template-columns:minmax(140px,1.4fr) minmax(120px,1.4fr) minmax(110px,1fr) 110px 64px 34px}
.items-ed.simple .it-cab span:nth-child(4),.items-ed.simple .it-cab span:nth-child(6){display:none}
.items-ed.simple .it-lb:has([data-k="cant"]),.items-ed.simple .it-lb:has([data-k="reembolso"]){display:none}

/* ANOTAR: una sola puerta de entrada (caja en Inicio y botón +) */
.anotar-caja{padding:14px 16px;margin-bottom:12px}
.anotar-t{display:block;font-weight:700;margin-bottom:8px}
.anotar-fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.anotar-fila .in{flex:1 1 240px;min-width:0}
.anotar-in{font-size:18px;min-height:52px}
.anotar-ej{margin:8px 0 14px;line-height:1.5}
.anotar-bot{display:flex;gap:10px;flex-wrap:wrap}
.anotar-bot .btn{flex:1 1 180px;min-height:52px}

/* Resumen del período: en teléfono se ven todas las columnas (letra y espacios más chicos) */
.resumen-per .tl{width:100%}
.resumen-per .tl th.sec,.resumen-per .tl td.sec{display:table-cell!important}
.resumen-per .tl .solo-movil{display:none!important}
@media (max-width:640px){
  .resumen-per.card{padding-left:10px;padding-right:10px}
  .resumen-per .tl th,.resumen-per .tl td{padding:8px 4px;font-size:11.5px;white-space:nowrap}
  .resumen-per .tl td.main{white-space:normal;font-size:12.5px}
  .resumen-per .tl td.main .sub{font-size:10.5px}
}
/* Teléfono (v125): cada mes en dos líneas (mes arriba; Pensión, Gastos, Pagos y Saldo abajo en 4 columnas parejas),
   así entran todas las columnas sin cortarse ni desplazar a lo ancho, también en el iPhone SE (375 px). */
@media (max-width:520px){
  .resumen-per.card{padding-left:8px;padding-right:8px}
  .resumen-per .tl,.resumen-per .tl thead,.resumen-per .tl tbody,.resumen-per .tl tfoot{display:block;width:100%}
  .resumen-per .tl tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:baseline}
  .resumen-per .tl th,.resumen-per .tl td{padding:5px 3px;font-size:11.5px;white-space:nowrap;text-align:right;border-bottom:0}
  .resumen-per .tl th:first-child,.resumen-per .tl td:first-child{grid-column:1/-1;text-align:left;padding-top:9px;border-top:1px solid var(--borde2)}
  .resumen-per .tl th .ord-i{font-size:9px;margin-left:2px}
  .resumen-per .tl td.main{font-size:12.5px;white-space:normal}
  .resumen-per .tl thead tr[data-total] td{position:static}
}
@media (max-width:400px){
  .resumen-per .tl th,.resumen-per .tl td{padding:5px 2px;font-size:11px;letter-spacing:-.2px}
  .resumen-per .tl thead tr[data-total] td{font-size:10.5px}
  .resumen-per .tl td.main{font-size:12px}
}
/* Fila de totales fija (v125): en iPhone (WebKit) cada celda «sticky» se desplazaba por su cuenta cuando unas iban
   alineadas arriba y otras al centro, y la línea de abajo quedaba en escalón. Todas al centro y la línea dibujada
   dentro de cada celda (sombra), no como borde: así queda recta en todos los navegadores. */
.tabla thead tr[data-total] td{vertical-align:middle!important;border-bottom:0!important;box-shadow:inset 0 -2px 0 var(--borde)}
[data-forma="papel"] .tabla thead tr[data-total] td{box-shadow:inset 0 -2px 0 var(--txt)}
/* estilo «papel»/«archivador» en teléfono: su letra grande de la fila de totales no cabe en 4 columnas */
@media (max-width:520px){
  [data-forma="papel"] .resumen-per .tl th,[data-forma="papel"] .resumen-per .tl td{font-size:12.5px}
  [data-forma="papel"] .resumen-per .tl thead tr[data-total] td{font-size:12px}
  [data-forma="papel"] .resumen-per .tl td b{font-size:inherit}
}
@media (max-width:400px){
  [data-forma="papel"] .resumen-per .tl th,[data-forma="papel"] .resumen-per .tl td{font-size:11.5px}
  [data-forma="papel"] .resumen-per .tl thead tr[data-total] td{font-size:11px}
}
/* recorte de foto antes de guardarla */
.rc-ayuda{margin:0 0 10px}
.rc{display:flex;justify-content:center;background:#000;border-radius:10px;padding:18px;overflow:hidden}
.rc-area{position:relative;display:inline-block;touch-action:none;user-select:none;-webkit-user-select:none;max-width:100%}
.rc-area img{display:block;max-width:100%;max-height:62vh;pointer-events:none;-webkit-user-drag:none}
.rc-marco{position:absolute;box-shadow:0 0 0 9999px rgba(0,0,0,.55);outline:2px solid #fff;cursor:move;touch-action:none}

.rc-marco b{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;touch-action:none}
.rc-marco b::after{content:"";position:absolute;inset:9px;background:#fff;border:2px solid var(--acento);border-radius:50%}
.rc-marco b[data-h="no"]{left:0;top:0;cursor:nwse-resize}.rc-marco b[data-h="ne"]{left:100%;top:0;cursor:nesw-resize}
.rc-marco b[data-h="so"]{left:0;top:100%;cursor:nesw-resize}.rc-marco b[data-h="se"]{left:100%;top:100%;cursor:nwse-resize}
.rc-marco b[data-h="n"]{left:50%;top:0;cursor:ns-resize}.rc-marco b[data-h="s"]{left:50%;top:100%;cursor:ns-resize}
.rc-marco b[data-h="o"]{left:0;top:50%;cursor:ew-resize}.rc-marco b[data-h="e"]{left:100%;top:50%;cursor:ew-resize}
.rc-marco b[data-h="n"]::after,.rc-marco b[data-h="s"]::after{inset:12px 6px;border-radius:4px}
.rc-marco b[data-h="o"]::after,.rc-marco b[data-h="e"]::after{inset:6px 12px;border-radius:4px}
.rc-marco::before,.rc-marco::after{content:"";position:absolute;pointer-events:none;border:0 solid rgba(255,255,255,.45)}
.rc-marco::before{left:33.33%;right:33.33%;top:0;bottom:0;border-left-width:1px;border-right-width:1px}
.rc-marco::after{top:33.33%;bottom:33.33%;left:0;right:0;border-top-width:1px;border-bottom-width:1px}
@media (max-width:760px){.rc-area img{max-height:58vh}.rc{padding:16px}}
/* v126: «.main» (columna principal de la app) es flex; en una celda «td.main» eso la sacaba del modelo de tabla en WebKit (Mac/iPhone):
   la celda quedaba más baja que sus vecinas y su línea inferior no calzaba. Las celdas vuelven a ser celdas en todas las plataformas. */
td.main,th.main{display:table-cell;flex-direction:initial}
/* v126: el encabezado y la fila de totales se fijan JUNTOS (el thead completo) en vez de celda por celda:
   la fila de totales se fijaba a 38 px aunque el encabezado midiera menos y se montaba sobre la primera fila. */
.tabla thead{position:sticky;top:0;z-index:3}
.tabla thead th,.tabla thead tr[data-total] td{position:static!important;top:auto!important}
/* overflow:hidden en la tabla la volvía su propio contenedor de desplazamiento y el encabezado no podía quedar fijo; clip recorta igual las esquinas */
.tabla{overflow:clip}
/* el thead fijo lleva su propio fondo: así ninguna fila se ve por detrás aunque algún estilo deje las celdas transparentes */
.tabla thead{background:var(--sup2)}
[data-forma="papel"] .tabla thead{background:var(--sup)}
/* v128: repetición flexible en el horario (como el calendario de macOS) */
.rep-box{border:1px solid var(--borde);border-radius:var(--r-s,10px);background:var(--sup2);padding:12px;margin:-2px 0 12px;display:flex;flex-direction:column;gap:10px}
.rep-lin{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rep-lin>span{font-size:14px;color:var(--mut);min-width:84px}
.rep-lin .in{width:auto;flex:0 1 auto;min-width:0}
.rep-n{width:76px!important;text-align:center}
.rep-dias,.rep-mes,.rep-anio{display:grid;gap:4px}
.rep-dias{grid-template-columns:repeat(7,minmax(0,1fr));max-width:340px}
.rep-mes{grid-template-columns:repeat(7,minmax(0,1fr));max-width:340px}
.rep-anio{grid-template-columns:repeat(4,minmax(0,1fr));max-width:340px}
.rep-t{border:1px solid var(--borde);background:var(--campo);color:var(--txt);border-radius:8px;min-height:36px;padding:4px 0;font:inherit;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rep-t.act{background:var(--acento);border-color:var(--acento);color:#fff;font-weight:600}
.rep-op{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer}
.rep-op input{accent-color:var(--acento);width:18px;height:18px;margin:0}
.rep-mes.off,.rep-pos.off{opacity:.45}
.rep-res{display:flex;gap:6px;align-items:flex-start;color:var(--acento);margin:-4px 0 12px}
.rep-res:empty{display:none}
@media (hover:hover){.rep-t:hover{border-color:var(--acento)}}
/* v129: actividad con un solo campo (el ícono y el tipo se adivinan) + lápiz para editar o quitar desde las baldosas */
.act-nom{display:flex;align-items:center;gap:10px}
.act-nom .in{flex:1;min-width:0}
.act-prev .sticker{width:44px;height:44px;font-size:22px}
.act-adiv{margin:-6px 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.act-adiv .link,button.link{background:none;border:0;padding:0;font:inherit;color:var(--acento);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.act-tile-w{position:relative;display:flex}
.act-tile-w .cat-tile{flex:1}
.act-ed{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:8px;border:1px solid var(--borde);background:var(--sup);color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;padding:0}
.act-ed:hover,.act-ed:focus-visible{color:var(--acento);border-color:var(--acento)}
/* v131: régimen de cuidado y «¿Me toca?» */
.cui-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:1px;color:var(--txt);background:color-mix(in srgb,var(--pc) 22%,var(--sup));border:1px solid color-mix(in srgb,var(--pc) 55%,transparent);white-space:nowrap}
.hz-dia .cui-chip{display:flex;width:max-content;margin:3px auto 0}
.cui-card{padding:12px 14px}
.cui-hoy{display:flex;align-items:center;gap:12px;border-left:4px solid var(--pc);padding-left:10px}
.cui-hoy>div{flex:1;min-width:0}
.cui-hoy .em{color:var(--pc);font-size:20px}
.cui-mes{max-width:420px}
.cui-sem,.cui-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cui-sem span{text-align:center;font-size:12px;color:var(--mut);font-weight:600;padding:2px 0}
.cui-d{position:relative;border:1px solid color-mix(in srgb,var(--pc) 45%,var(--borde));background:color-mix(in srgb,var(--pc) 20%,var(--sup));color:var(--txt);border-radius:8px;min-height:44px;padding:3px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:inherit;cursor:pointer}
.cui-d b{font-size:14px;line-height:1.1}.cui-d small{font-size:10px;color:var(--mut);line-height:1.1}
.cui-d.hoy{outline:2px solid var(--acento);outline-offset:1px}
.cui-d.sel{box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 45%,transparent);font-weight:700}
.cui-d.cambio::before{content:"";position:absolute;left:3px;top:3px;width:0;height:0;border-left:7px solid var(--pc);border-bottom:7px solid transparent}
.cui-d.exc::after{content:"";position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--txt);opacity:.7}
.cui-2m{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cui-ley{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 4px}.cui-ley .cui-chip{margin-left:0}
.cui-nav{display:flex;align-items:center;justify-content:space-between;max-width:420px;margin:12px 0 6px}
.mt-resp{border-left:4px solid var(--pc)}
.cui-cuenta{display:flex;flex-direction:column;gap:8px;max-width:520px}
.cui-cuenta>div{position:relative;padding:6px 10px;border-radius:8px;background:var(--sup2);overflow:hidden}
.cui-cuenta>div>*{position:relative}
.cui-cuenta i{position:absolute!important;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--pc) 30%,transparent);z-index:0}
.cui-cuenta b,.cui-cuenta span{z-index:1}
.reg-tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:14px}
.reg-t{text-align:left;border:1px solid var(--borde);background:var(--sup);color:var(--txt);border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.reg-t small{color:var(--mut);font-size:12.5px;line-height:1.35}
.reg-t.act{border-color:var(--acento);box-shadow:0 0 0 2px color-mix(in srgb,var(--acento) 35%,transparent)}
.reg-pat{display:grid;grid-template-columns:repeat(7,minmax(0,52px));gap:4px;margin-bottom:8px}
.reg-exc{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.reg-exc-f{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--borde2);border-radius:8px}
.reg-exc-f>.in{flex:1 1 180px;min-width:0;width:auto}
.reg-exc-f select.in{flex:0 1 auto}
.reg-md{display:inline-flex;align-items:center;gap:4px}.reg-md .in{width:74px;text-align:center}
/* v133: Juzgado y mediación */
.jz-docs{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.jz-doc{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--borde2);border-radius:8px;background:var(--sup2)}
.jz-doc>span{flex:1;min-width:0;overflow-wrap:anywhere}
/* v134: buscador en el teléfono a pantalla completa respetando la barra de estado y la barra de inicio del iPhone */
@media (max-width:760px){
  .bus-fondo .modal{height:100vh;height:100dvh;max-height:none;border-radius:0;padding-top:env(safe-area-inset-top)}
  .bus-fondo .mcuerpo{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
/* cualquier ventana del teléfono deja libre la barra de estado */
@media (max-width:760px){.mfondo{padding-top:env(safe-area-inset-top)}.modal{max-height:calc(100vh - env(safe-area-inset-top));max-height:calc(100dvh - env(safe-area-inset-top))}}
@media (max-width:760px){.mfondo.bus-fondo{padding-top:0}}
/* v135: portal de abogados (cartera ejecutiva) */
.kpi-t{font-size:12.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;font-weight:600;display:flex;gap:6px;align-items:center}
.kpi-v{font-size:26px;font-weight:700;margin:4px 0 2px;font-variant-numeric:tabular-nums}
/* v136: portal de abogados con entrada propia (?abogados) */
.modo-abo #quien{display:none}
/* ── campanita de notificaciones (barra superior) ── */
.campana{position:relative;color:var(--txt)}
.campana[hidden]{display:none}
.campana .cmp-n{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:1;display:grid;place-items:center;border:2px solid var(--bg);box-sizing:content-box;font-variant-numeric:tabular-nums}
.campana .cmp-n[hidden]{display:none}
.campana.nuevo>i,.campana.nuevo>svg{color:var(--acento)}
.cmp-pop{position:fixed;z-index:95;width:400px;max-width:calc(100vw - 24px);max-height:min(72vh,600px);overflow:auto;background:var(--sup);color:var(--txt);border:1px solid var(--borde);border-radius:14px;box-shadow:var(--sombra),0 12px 32px rgba(0,0,0,.18);animation:fade .12s}
.cmp-cab{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;background:var(--sup);border-bottom:1px solid var(--borde)}
.cmp-cab b{display:flex;align-items:center;gap:8px;font-size:15px}
.cmp-g{display:flex;align-items:center;gap:6px;padding:10px 14px 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.cmp-it{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:10px 14px;border:0;border-bottom:1px solid var(--borde);background:transparent;color:var(--txt);font:inherit;cursor:pointer;position:relative}
.cmp-it:last-child{border-bottom:0}
@media (hover:hover){.cmp-it:hover{background:var(--sup2)}}
.cmp-it:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
.cmp-it.nuevo{background:var(--sel)}
.cmp-it .em{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--sup2);color:var(--acento);font-size:16px}
.cmp-it .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cmp-it .tx b{font-size:14px;line-height:1.3}
.cmp-it .d{font-size:13px;line-height:1.35;color:var(--txt);opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmp-it .m{font-size:12px;color:var(--mut)}
.cmp-it .pto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acento);margin-top:6px}
.cmp-vacio{padding:28px 14px;text-align:center;color:var(--mut)}
.cmp-vacio i,.cmp-vacio svg{font-size:28px;color:var(--ok)}
.cmp-hoja{margin:-4px -4px 0}
.cmp-hoja .cmp-it{border-radius:10px;border-bottom:0;margin-bottom:2px}
.cmp-ped{margin:6px 0 10px;padding:10px 12px;border-left:3px solid var(--acento);background:var(--sup2);border-radius:8px;white-space:pre-wrap;line-height:1.45}
.cmp-acc{display:grid;gap:8px;margin:0 0 12px}
.cmp-acc .btn{justify-content:flex-start}
/* ── suscripción y contrato del portal ── */
.sus-caja{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--borde);border-radius:12px;background:var(--sup2)}
.sus-caja .btn[disabled]{opacity:.7;cursor:not-allowed}
.contrato-txt{max-height:min(52vh,520px);overflow:auto;padding:14px 16px;border:1px solid var(--borde);border-radius:10px;background:var(--sup2);line-height:1.55;font-size:14px;margin-bottom:10px}
.contrato-txt h2,.contrato-txt h3,.contrato-txt h4{font-size:15px;margin:14px 0 6px}
.contrato-txt h2:first-child,.contrato-txt h3:first-child{margin-top:0}
.contrato-txt p{margin:0 0 8px}
.contrato-txt ul,.contrato-txt ol{margin:0 0 8px;padding-left:22px}
/* ── primeros pasos ── */
.asis-card{border-left:4px solid var(--acento)}
.asis-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.asis-cab h2{margin:0}
.asis-barra{height:8px;border-radius:6px;background:var(--sup2);overflow:hidden;margin:10px 0 12px}
.asis-barra span{display:block;height:100%;background:var(--acento);border-radius:6px;transition:width .3s}
.asis-lista{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 14px}
.asis-lista li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.asis-lista li.ok{color:var(--txt)}
.asis-lista li.ok i,.asis-lista li.ok svg{color:var(--ok)}
.asis-lista li.act{color:var(--txt);font-weight:600}
.asis-lista li.act i,.asis-lista li.act svg{color:var(--acento)}
.asis-cuerpo{display:flex;gap:14px;align-items:flex-start;margin-top:4px}
.asis-cuerpo .em{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--sel);color:var(--acento);font-size:22px}
.asis-cuerpo h3{margin:2px 0 6px;font-size:17px}
.asis-cuerpo p{margin:0;line-height:1.5}
.asis-fin{text-align:center}
.asis-fin i,.asis-fin svg{font-size:40px;color:var(--ok)}
.contrato-txt hr{border:0;border-top:1px solid var(--borde);margin:14px 0}
.contrato-txt .md-tabla{overflow-x:auto;margin:0 0 10px}
.contrato-txt table{border-collapse:collapse;width:100%;font-size:13px}
.contrato-txt th,.contrato-txt td{border:1px solid var(--borde);padding:6px 8px;text-align:left;vertical-align:top}
.contrato-txt th{background:var(--sup)}
.sus-caja.bad{border-color:var(--bad)}
.sus-caja .btns{display:flex;gap:6px;flex-wrap:wrap}

/* Solicitudes de cambio de días */
.cam-lista{display:grid;gap:10px}
.cam-card{border:1px solid var(--borde);border-radius:var(--r-s,10px);padding:12px 14px;display:grid;gap:6px;background:var(--panel,transparent)}
.cam-cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cam-cab .chip{margin-left:auto}
.cam-hist{margin:4px 0 0;padding-left:18px;font-size:.85rem;color:var(--mut)}
.cam-hist li{margin:2px 0}

/* Botones en pantallas pequeñas (pedido del dueño, 23-10-2026; igual que en Mis Gastos): como en las apps de teléfono, uno sobre
   otro a todo el ancho; lado a lado solo si quedan simétricos (exactamente dos, mitad y mitad, o una fila de botones chicos
   iguales, como «− 1 semana · Hoy · + 1 semana»). El principal va primero cuando se apilan. */
@media (max-width:760px){
  .vh .acc,div.btns,.mpie{display:grid;grid-template-columns:1fr;gap:8px;width:100%;margin-left:0}
  .vh .acc:has(> :nth-child(2):last-child),div.btns:has(> :nth-child(2):last-child),.mpie:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr}
  div.btns:not(:has(> :nth-child(5))):has(> .btn.sm:first-child){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .vh .acc > *,div.btns > *,.mpie > *{width:100%;min-width:0;margin:0;flex:none;justify-content:center;text-align:center;white-space:normal}
  .vh .acc:not(:has(> :nth-child(2):last-child)) > .pri,div.btns:not(:has(> :nth-child(2):last-child)) > .pri,.mpie:not(:has(> :nth-child(2):last-child)) > .pri{order:-1}
}

/* Inicio: gasto semanal con flechas (igual que en Mis Gastos) */
.graf-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.graf-cab h2{margin:0}
.sem-nav{display:flex;align-items:center;gap:6px}
.sem-nav span{min-width:120px;text-align:center;font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.sem-nav .btn{min-width:36px;justify-content:center}
.graf-sem{width:100%;height:auto;display:block}
.graf-sem text{fill:var(--mut);font-size:11px;font-family:inherit}
.graf-sem .val{fill:var(--txt);font-weight:700}
.graf-sem .eje{stroke:var(--borde2);stroke-width:1}
.graf-sem .col{fill:var(--acento);cursor:pointer}
.graf-sem .hoy .col{fill:var(--relleno)}
.graf-sem .dia:hover .col{opacity:.8}

/* miniaturas de adjuntos: botón para recortar o girar */
.adj .th{position:relative}
.adj .th .ed{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:8px;border:0;background:rgba(0,0,0,.6);color:#fff;display:inline-grid;place-items:center;font-size:14px;padding:0;cursor:pointer}
.adj .th .ed:hover,.adj .th .ed:focus-visible{background:var(--acento,#1f5fbf)}
.adj .th .ed:disabled{opacity:.5}

/* Barra lateral: en pantallas bajas (teléfono o tablet en horizontal) se desplaza sola, con scroll fluido e independiente
   del contenido (igual que en Mis Gastos). */
.side{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}