@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/barlow-semi-condensed-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow-semi-condensed-600.woff2) format('woff2')}

:root{
  --ink:#14202E; --ink-2:#34424F; --muted:#5F6E7D; --faint:#8C99A6;
  --line:#D6DDE4; --line-2:#E7ECF1; --bg:#EEF2F6; --panel:#FFFFFF; --hover:#F5F8FB;
  --brand:#0078B8; --brand-600:#00609A; --brand-50:#E5F2FA; --cyan:#00C3DA; --cyan-50:#DDF6FA;
  --nav:#0C1D2E; --nav-2:#15304A; --nav-ink:#C9D6E2;
  --ok:#0B8A0B; --warn:#B87900; --crit:#C23434; --crit-50:#FCE8E6;
  --u1:#2a78d6; --u2:#eb6834; --u3:#1baf7a; --u4:#eda100; --u5:#e87ba4; --u6:#6250d6; --u7:#008300; --u8:#8C99A6;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --f-ui:'Barlow',system-ui,sans-serif; --f-num:'Barlow Semi Condensed','Barlow',sans-serif;
  --shadow-pop:0 6px 24px rgba(12,29,46,.16),0 1px 3px rgba(12,29,46,.12);
  --t-fast:160ms; --ease:cubic-bezier(.2,.7,.2,1);
  /* superficies y estados (cambian en modo oscuro) */
  --panel-2:#F7F9FB; --soft:#FAFBFC; --field:#FFFFFF; --line-3:#B8C4CF; --line-4:#C4CED8; --off-ink:#B7C1CB; --spin:#C9D3DD; --ico:#A9B6C2;
  --today:#F2FCFD; --hol:#FFF7DA; --hol-ink:#9A6B00; --fut:#F2F5F8; --vacio:#F1F4F7; --cur:#0C1D2E; --toast:#14202E; --sel-in:#FFFFFF;
  --ok-50:#E3F4E3; --ok-ink:#0A6B0A; --off-50:#ECEFF2; --off-ink2:#5F6E7D; --bad-ink:#A12A2A; --info-ink:#005A8C;
  --alta-line:#EBC3C0; --alta-bg:#FFF8F7; --media-line:#F2DC9B; --media-bg:#FFFCF2;
  --note-line:#BFDDF0; --note-ink:#0B4A70; --ex-bg:#FFF8E1; --ex-ink:#6B5000; --err-ink:#8A1F1F;
  --kD-ink:#0B5B67; --kF-ink:#B42323; --kF-ring:#E59A97; --kO:#E4E9EF; --kO-ink:#3B4A59; --kR:#EEE6D8; --kR-ink:#5E4A26;
  --kL:#F4F6F8; --kL-ink:#8492A0; --kV:#ECE5FB; --kV-ink:#5434A6; --kM:#FBE3EE; --kM-ink:#9E1F57; --kFE:#FFF1C2; --kFE-ink:#7D5800;
  --kP:#FFFFFF; --kP-ink:#5F6E7D; --kP-ring:#A9B6C2; --kZ-mix:#FFFFFF; --kZ-ink:#0f1b27; --kCSD:#2A3542;
  color-scheme:light;
}
/* Modo oscuro: lo elige cada usuario (Configuración o el botón de la luna); "auto" sigue a Windows/celular */
:root[data-tema="oscuro"]{
  --ink:#E6EDF4; --ink-2:#C3CFDB; --muted:#93A3B3; --faint:#71839A;
  --line:#2C3B4B; --line-2:#223040; --bg:#0D151E; --panel:#16212D; --hover:#1E2B39;
  --brand:#3A9FE0; --brand-600:#64B6EC; --brand-50:#12324A; --cyan-50:#0E3940;
  --nav:#09111A; --nav-2:#15304A;
  --ok:#3CC46A; --warn:#E0A100; --crit:#F07474; --crit-50:#3A1B1D;
  --shadow-pop:0 8px 28px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --panel-2:#1B2836; --soft:#131D28; --field:#0F1922; --line-3:#405366; --line-4:#4A5E72; --off-ink:#4E6070; --spin:#2C3B4B; --ico:#4E6070;
  --today:#0F2E36; --hol:#352B12; --hol-ink:#E8C35A; --fut:#1C2834; --vacio:#1C2834; --cur:#E6EDF4; --toast:#28394B; --sel-in:#16212D;
  --ok-50:#143A1E; --ok-ink:#82DE93; --off-50:#243241; --off-ink2:#A9B6C2; --bad-ink:#FF9C9C; --info-ink:#8CCBF2;
  --alta-line:#6B2B2B; --alta-bg:#2A1719; --media-line:#6B5517; --media-bg:#29230F;
  --note-line:#1F4F70; --note-ink:#A9D4F0; --ex-bg:#29230F; --ex-ink:#E8C35A; --err-ink:#FFB3B3;
  --kD-ink:#8CE4F0; --kF-ink:#FF9C9C; --kF-ring:#8A3B3B; --kO:#2A3644; --kO-ink:#C3CFDB; --kR:#3A3122; --kR-ink:#E2CDA6;
  --kL:#1F2A36; --kL-ink:#8C99A6; --kV:#2E2550; --kV-ink:#C9B9FF; --kM:#45192F; --kM-ink:#FF9CC7; --kFE:#4A3A10; --kFE-ink:#FFD873;
  --kP:#16212D; --kP-ink:#A9B6C2; --kP-ring:#5A6B7C; --kZ-mix:#16212D; --kZ-ink:#E6EDF4; --kCSD:#000000;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--f-ui);font-size:15px;line-height:1.45;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}

/* ---------- Estructura ---------- */
.app{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}
.side{background:var(--nav);color:var(--nav-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px}
.brand img{width:30px;height:auto}
.brand b{display:block;font-size:17px;color:#fff;font-weight:600;letter-spacing:.2px;line-height:1.1}
.brand span{font-size:12.5px;color:#8FA6BC}
.nav{padding:6px 10px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-md);color:var(--nav-ink);text-decoration:none;font-weight:500;transition:background var(--t-fast)}
.nav a svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav a:hover{background:var(--nav-2);color:#fff}
.nav a[aria-current="page"]{background:var(--nav-2);color:#fff;box-shadow:inset 3px 0 0 var(--cyan)}
.nav .sep{height:1px;background:#20384F;margin:10px 8px}
.nav kbd{white-space:nowrap;margin-left:auto;font-family:var(--f-num);font-size:11.5px;color:#7F96AC;border:1px solid #2A4560;border-radius:4px;padding:0 5px}
.side-foot{padding:14px 18px;border-top:1px solid #20384F;font-size:13px}
.side-foot .who{color:#fff;font-weight:600}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22C55E;margin-right:6px;vertical-align:1px}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:var(--s4);padding:14px 28px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top h1{font-size:22px;font-weight:600;margin:0;letter-spacing:.1px}
.top .date{color:var(--muted);font-size:14px}
.top .grow{flex:1}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);padding:6px 10px;width:260px;color:var(--muted);background:var(--hover)}
.search input{border:0;background:transparent;outline:0;width:100%}
.search kbd{white-space:nowrap;font-family:var(--f-num);font-size:12px;border:1px solid var(--line);border-radius:4px;padding:0 5px;background:var(--field)}
.top .menu-btn{display:none}
.page{padding:24px 28px 48px;display:flex;flex-direction:column;gap:20px;max-width:1500px;width:100%}

/* ---------- Componentes ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-h{display:flex;align-items:center;gap:var(--s3);padding:14px 18px;border-bottom:1px solid var(--line-2)}
.card-h h2{font-size:16.5px;font-weight:600;margin:0}
.card-h p{margin:0;color:var(--muted);font-size:13.5px}
.card-b{padding:16px 18px}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.grow{flex:1}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid3{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px}
.muted{color:var(--muted)}
.small{font-size:13px}

a.btn{text-decoration:none;color:inherit}
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel);font-weight:600;font-size:14.5px;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);white-space:nowrap}
.btn:hover{background:var(--hover);border-color:var(--line-4)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn.danger{color:var(--crit);border-color:var(--alta-line)}
.btn.danger:hover{background:var(--crit-50)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--hover)}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn:not(.primary).is-loading::after{border-color:var(--spin);border-top-color:var(--brand)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes spin{to{transform:rotate(360deg)}}
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:2px;background:var(--hover)}
.seg button{border:0;background:transparent;padding:5px 11px;border-radius:6px;font-weight:500;font-size:14px;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(12,29,46,.15);font-weight:600}

.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:12.5px;color:var(--muted)}
.input,.select{height:36px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 10px;background:var(--field);transition:border-color var(--t-fast),box-shadow var(--t-fast);width:100%}
.input:hover,.select:hover{border-color:var(--line-3)}
.input:focus,.select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,120,184,.18)}
.input[disabled]{background:var(--hover);color:var(--faint)}
.input.is-error{border-color:var(--crit);box-shadow:0 0 0 3px rgba(194,52,52,.12)}
.field .err{font-size:12.5px;color:var(--crit)}

.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:13px;font-weight:600;background:var(--line-2);color:var(--ink-2);white-space:nowrap}
.chip.ok{background:var(--ok-50);color:var(--ok-ink)}
.chip.off{background:var(--off-50);color:var(--off-ink2)}
.chip.bad{background:var(--crit-50);color:var(--bad-ink)}
.chip.info{background:var(--brand-50);color:var(--info-ink)}
.chip i{width:8px;height:8px;border-radius:2px;display:inline-block}

table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.t th{position:sticky;top:0;background:var(--panel-2);text-align:left;font-weight:600;color:var(--ink-2);font-size:13px;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.t tbody tr{transition:background var(--t-fast)}
.t tbody tr:hover{background:var(--hover)}
.t .r{text-align:right}
.t tr.clickable{cursor:pointer}
.scroll{overflow:auto}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi{padding:16px 18px}
.kpi .lab{font-size:14px;color:var(--muted);font-weight:500}
.kpi .val{font-family:var(--f-num);font-size:34px;font-weight:600;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:13px;color:var(--muted);margin-top:2px}
.kpi .bar{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px;margin-top:10px;background:var(--line-2)}
.kpi .bar span{display:block;height:100%}

.toast-wrap{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{background:var(--toast);color:#fff;padding:11px 16px;border-radius:var(--r-md);box-shadow:var(--shadow-pop);font-size:14px;display:block;animation:tin .2s var(--ease);max-width:380px}
.toast.err{background:#7E1F1F}
.toast b{color:#7FE3F0;font-weight:600}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}

.drawer-bg{position:fixed;inset:0;background:rgba(12,29,46,.35);z-index:60;animation:fade .18s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--panel);z-index:61;display:flex;flex-direction:column;box-shadow:var(--shadow-pop);animation:slide .22s var(--ease)}
.drawer-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.drawer-h h2{margin:0;font-size:19px;font-weight:600}
.drawer-b{padding:18px 22px;overflow:auto;display:flex;flex-direction:column;gap:20px}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(24px);opacity:.4}}
.modal{position:fixed;inset:0;margin:auto;width:min(440px,calc(100% - 32px));height:fit-content;background:var(--panel);border-radius:var(--r-lg);z-index:70;box-shadow:var(--shadow-pop);animation:fade .18s}
.modal .mh{padding:18px 20px 6px;font-size:18px;font-weight:600}
.modal .mb{padding:6px 20px 16px;display:flex;flex-direction:column;gap:12px}
.modal .mf{padding:12px 20px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:8px}
.sec-t{font-size:15px;font-weight:600;margin:0 0 8px}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 20px;color:var(--muted)}
.empty svg{width:44px;height:44px;stroke:var(--ico);fill:none;stroke-width:1.5}
.empty b{color:var(--ink);font-size:16px}

.campana,.tema-btn{position:relative;padding:0 9px}
.tema-btn svg{width:19px;height:19px}
.campana svg{width:20px;height:20px}
.campana .badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--crit);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;font-family:var(--f-num)}
.campana .badge[hidden]{display:none}
.al{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);font-size:14px;line-height:1.4}
.al-alta{border-color:var(--alta-line);background:var(--alta-bg)}
.al-media{border-color:var(--media-line);background:var(--media-bg)}
.al-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.aldot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--crit)}
.aldot.media{background:#E0A100}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--brand)}
th.sortable .sa{margin-left:5px;font-size:10px;color:var(--faint)}
th.sortable.on .sa{color:var(--brand)}
th.sortable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* ---------- Códigos de tareo ---------- */
.c{--cc:var(--u1)}
.c-TI,.c-ZI{--cc:var(--u1)} .c-TP,.c-ZP{--cc:var(--u2)} .c-TA,.c-ZA{--cc:var(--u3)}
.c-TE,.c-ZE{--cc:var(--u4)} .c-TS,.c-ZS{--cc:var(--u5)} .c-T,.c-Z{--cc:var(--u6)}
.cell{height:26px;min-width:30px;display:flex;align-items:center;justify-content:center;font-family:var(--f-num);font-weight:600;font-size:12.5px;border-radius:3px;user-select:none}
.k-T{background:var(--cc);color:#fff}
.c-TA.k-T,.c-TE.k-T,.c-TS.k-T{color:#13202c}
.k-Z{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--cc) 55%,var(--kZ-mix)) 0 3px,color-mix(in srgb,var(--cc) 14%,var(--kZ-mix)) 3px 7px);color:var(--kZ-ink);box-shadow:inset 0 0 0 1.5px var(--cc)}
.k-D{background:var(--cyan-50);color:var(--kD-ink)}
.k-F{background:var(--crit-50);color:var(--kF-ink);box-shadow:inset 0 0 0 1.5px var(--kF-ring)}
.k-O{background:var(--kO);color:var(--kO-ink)}
.k-R{background:var(--kR);color:var(--kR-ink)}
.k-L{background:var(--kL);color:var(--kL-ink)}
.k-V{background:var(--kV);color:var(--kV-ink)}
.k-M{background:var(--kM);color:var(--kM-ink)}
.k-FE{background:var(--kFE);color:var(--kFE-ink)}
.k-CSD{background:var(--kCSD);color:#fff;font-size:10.5px}
.k-P{background:var(--kP);color:var(--kP-ink);box-shadow:inset 0 0 0 1.5px var(--kP-ring);}

/* ---------- Tablero de tareo ---------- */
.board-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.months{display:flex;gap:2px;flex-wrap:wrap}
.months button{border:0;background:transparent;padding:5px 9px;border-radius:6px;cursor:pointer;font-weight:500;color:var(--ink-2)}
.months button:hover{background:var(--hover)}
.months button[aria-pressed="true"]{background:var(--ink);color:var(--panel);font-weight:600}
.months button[disabled]{color:var(--off-ink);cursor:default;background:transparent}
.board{overflow:auto;max-height:calc(100vh - 290px);position:relative}
.board table{border-collapse:separate;border-spacing:0;font-size:13.5px}
.board th,.board td{padding:0;border-bottom:1px solid var(--line-2)}
.board thead th{position:sticky;top:0;z-index:3;background:var(--panel-2);font-weight:600;color:var(--ink-2);height:44px;border-bottom:1px solid var(--line)}
.board .nm{position:sticky;left:0;z-index:2;background:var(--panel);min-width:250px;max-width:250px;padding:0 12px;border-right:1px solid var(--line);text-align:left}
.board thead .nm{z-index:4;background:var(--panel-2)}
.board td.nm{cursor:pointer}
.board td.nm:hover .pn{color:var(--brand)}
.board .pn{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.2}
.board .pc{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.board .dh{min-width:32px;text-align:center;line-height:1.05;font-family:var(--f-num)}
.board .dh small{display:block;font-size:11px;font-weight:500;color:var(--faint)}
.board .dh.we small{color:var(--brand)}
.board .dh.hol{background:var(--hol)}
.board .dh.hol small{color:var(--hol-ink)}
.board td.d{padding:2px 1px;min-width:32px}
.board td.d .cell{cursor:cell;transition:transform 80ms}
.board td.d .cell:empty{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.board td.d.sel .cell{box-shadow:0 0 0 2px var(--brand),inset 0 0 0 1px var(--sel-in);position:relative;z-index:1}
.board td.d.cur .cell{outline:2px solid var(--cur);outline-offset:1px;position:relative;z-index:1}
.board td.d.fut .cell:empty{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--fut) 5px 7px);box-shadow:none}
.board .today{position:relative}
.board thead .today{background:var(--cyan-50)}
.board thead .today::after{content:"";position:absolute;left:3px;right:3px;bottom:-1px;height:3px;background:var(--cyan);border-radius:2px}
.board td.today{background:var(--today)}
.board .sum{position:sticky;z-index:2;background:var(--panel);text-align:right;padding:0 10px;font-family:var(--f-num);font-weight:600;font-size:14px;white-space:nowrap}
.board thead .sum{z-index:4;background:var(--panel-2);font-family:var(--f-ui);font-size:12.5px;text-align:right;line-height:1.15}
.board .s1{right:150px;min-width:72px;border-left:1px solid var(--line)}
.board .s2{right:78px;min-width:72px}
.board .s3{right:0;min-width:78px}
#vboard .s3{min-width:150px;max-width:150px;white-space:normal;line-height:1.2}
#vboard .s2{right:150px;min-width:86px;max-width:86px}
#vboard .s1{right:236px;min-width:72px;max-width:72px}
.board .neg{color:var(--crit)}
.board tr.inactive td{opacity:.55}
.board tr.flash td.sum{animation:fl .5s}
@keyframes fl{from{background:var(--cyan-50)}}

.palette{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);background:var(--soft);border-radius:0 0 var(--r-lg) var(--r-lg)}
.palette .pk{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid transparent;background:transparent;border-radius:6px;padding:3px 4px;cursor:pointer}
.palette .pk:hover{background:var(--panel);border-color:var(--line)}
.palette .pk .cell{width:34px}
.palette .pk small{font-size:11px;color:var(--muted);font-family:var(--f-num)}
.palette .grp{display:flex;gap:2px;align-items:center;padding-right:8px;margin-right:4px;border-right:1px solid var(--line)}
.palette .unitsel{height:32px;font-size:14px;width:auto}

/* ---------- Gráficos ---------- */
.viz{font-family:var(--f-ui)}
.viz text{fill:var(--muted);font-size:12px}
.viz .gl{stroke:var(--line-2)}
.viz .ax{stroke:var(--line)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.tip{position:fixed;pointer-events:none;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-pop);border-radius:var(--r-md);padding:8px 10px;font-size:13px;z-index:90;min-width:150px}
.tip .tt{font-weight:600;margin-bottom:4px}
.tip .tr{display:flex;gap:10px;justify-content:space-between}
.tip .tr i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:6px}
.hbar{display:flex;flex-direction:column;gap:9px}
.hbar .hr{display:grid;grid-template-columns:120px 1fr 44px;gap:10px;align-items:center;font-size:14px}
.hbar .track{height:14px;background:var(--line-2);border-radius:3px;overflow:hidden}
.hbar .fill{height:100%;border-radius:0 4px 4px 0}

/* Simulador */
.timeline{display:flex;height:34px;border-radius:6px;overflow:hidden;gap:2px;margin:10px 0 6px}
.timeline div span{background:rgba(255,255,255,.88);color:#0f1b27;padding:1px 7px;border-radius:4px}
.timeline div{display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;min-width:2px;white-space:nowrap;overflow:hidden}
.res{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.res .rv{font-family:var(--f-num);font-size:22px;font-weight:600}
.res .rl{font-size:13px;color:var(--muted)}

.yr{display:grid;grid-template-columns:34px repeat(31,minmax(0,1fr));gap:2px;font-size:11px}
.yr .cell{height:16px;min-width:0;font-size:0;border-radius:2px}
.yr .cell:not([class*="k-"]){background:var(--vacio)}
.yr .ml{font-size:11.5px;color:var(--muted);display:flex;align-items:center}

.ds-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.ds-sw div{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:13px}
.ds-sw i{display:block;height:46px}
.ds-sw span{display:block;padding:6px 8px}
.ds-type div{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid var(--line-2);padding:8px 0}
.ds-type small{width:150px;color:var(--muted);font-size:12.5px;flex:none}

.note{background:var(--brand-50);border:1px solid var(--note-line);color:var(--note-ink);border-radius:var(--r-md);padding:10px 14px;font-size:13.5px}
.note.ex{background:var(--ex-bg);border-color:var(--media-line);color:var(--ex-ink)}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2,.grid3{grid-template-columns:minmax(0,1fr)}.res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:240px;z-index:80;transform:translateX(-100%);transition:transform .2s var(--ease)}
  .side.open{transform:none}
  .top .menu-btn{display:inline-flex}
  .top{padding:12px 16px;flex-wrap:nowrap;gap:8px}
  .top > div:not(.grow){min-width:0}
  .top h1,.top .date{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .search{display:none}
  .page{padding:16px 16px 40px}
  .board .nm{min-width:150px;max-width:150px}
  .board .s1,.board .s2,.board .s3{position:static}
}

/* ---------- Arranque e inicio de sesión ---------- */
.arranque{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);z-index:200;text-align:center;padding:16px}
.arranque[hidden]{display:none}
.arranque p{color:var(--muted);margin:0;max-width:420px}
.spin{width:28px;height:28px;border:3px solid var(--spin);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0C1D2E 0%,#15304A 55%,#0b4f7a 100%);padding:16px;z-index:150}
.login-card{background:var(--panel);border-radius:16px;padding:32px 28px;width:min(400px,100%);display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-pop)}
.login-card img{align-self:center;height:auto;max-width:100%}
.login-card h1{font-size:20px;font-weight:600;margin:0 0 4px;text-align:center;color:var(--ink-2)}
.salir{margin-top:8px;color:#C9D6E2;padding:0;height:28px}
.salir:hover{background:transparent;color:#fff;text-decoration:underline}
.err-note{background:var(--crit-50);border-color:var(--alta-line);color:var(--err-ink)}
.app[hidden]{display:none}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--brand)}
th.sortable .sa{margin-left:5px;font-size:10px;color:var(--faint)}
th.sortable.on .sa{color:var(--brand)}
th.sortable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.yr .cell.k-T{background:var(--cc)}
.timeline .k-T{background:var(--cc)}
@media (max-width:820px){.side-foot{font-size:12px}}
.login-card .btn.ghost{justify-content:center}
@media (max-width:820px){.board-tools .row{flex-wrap:wrap}.board-tools .input{width:100%!important}}
/* Celular: el título de cada tarjeta ocupa toda la fila y los botones bajan debajo */
@media (max-width:600px){.card-h{flex-wrap:wrap}.card-h>.grow{flex-basis:100%}}

/* ---------- Ajustes propios del modo oscuro ---------- */
:root[data-tema="oscuro"] .btn.primary{color:#06121C}
:root[data-tema="oscuro"] .btn.primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
:root[data-tema="oscuro"] .k-CSD{box-shadow:inset 0 0 0 1px #4E6070}
:root[data-tema="oscuro"] .seg button[aria-pressed="true"]{box-shadow:0 1px 2px rgba(0,0,0,.5)}
:root[data-tema="oscuro"] img[src*="logo-prisma"]{filter:brightness(0) invert(1)}

/* ---------- Aviso para instalar como app ---------- */
.aviso-instalar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:14px;width:min(560px,calc(100% - 24px));padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);animation:fade .2s}
.aviso-instalar img{border-radius:10px;flex:none}
.aviso-instalar b{display:block;font-size:15px}
.aviso-instalar span{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.pasos-ios{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;line-height:1.5}
.ico-ios{width:20px;height:20px;vertical-align:-4px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.aviso-instalar{flex-wrap:wrap;bottom:12px}.aviso-instalar .row{width:100%;justify-content:flex-end}}


/* Celular: nada se sale de la pantalla */
@media (max-width:600px){.orden{max-width:100%;min-width:0}.orden .select{min-width:0;flex:1 1 auto;max-width:100%;width:auto}.orden label{flex:none}}
.scroll-x{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
/* Tareo: resumen flotante de la selección */
.boardwrap{position:relative}
.selres{position:absolute;z-index:6;bottom:12px;right:12px;width:270px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:10px 12px;font-size:13px;pointer-events:none;animation:fade .12s}
.selres .sr-h{display:flex;flex-direction:column;gap:1px;padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid var(--line-2)}
.selres .sr-h b{font-size:14px}.selres .sr-h span{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selres .sr-f{display:flex;align-items:center;gap:6px;padding:3px 0}
.selres .sr-f>span:first-child{flex:none}.selres .sr-ch{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.selres .sr-f>b{min-width:26px;text-align:right;font-family:var(--f-num);font-size:14px}
.selres .sr-c{display:inline-flex;align-items:center;gap:2px}.selres .sr-c .cell{height:18px;min-width:24px;font-size:10.5px}
.selres .sr-c i{font-style:normal;font-size:11px;color:var(--muted);font-family:var(--f-num)}
.selres .sr-p{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-2);color:var(--ink-2)}
@media (max-width:600px){.selres{position:static;width:auto;margin:8px 0 0;box-shadow:none;animation:none}}