/*  ═══════════════════════════════════════════════════════════
    app-common.css — La de Manu · Sistema de diseño unificado
    Todos los HTML (excepto pedidos.html) importan este archivo.
    CSS específico de cada módulo va en <style> dentro del HTML.
    ═══════════════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root{
  /* Brand */
  --brand:#5C1A2E;--brand-d:#3D0F1E;--brand-lt:#C8899A;--brand-pale:#F5EBEE;
  /* Alias para compatibilidad con app.css */
  --ac:#5C1A2E;--ac2:#7B2442;--ac-bg:#F5EBED;--ac-lt:#C8899A;
  /* Surfaces */
  --bg:#F5F0ED;--sf:#FFFFFF;--sf2:#EDE9E3;--bd:#E0D5D0;--bd2:#CCC0B8;
  /* Text */
  --tx:#1C1410;--tx2:#6B5D52;--tx3:#A09080;
  /* Status */
  --ok:#1A6E3A;--ok-bg:#EAF5EF;--ok-bd:#BBF7D0;
  --er:#B02020;--er-bg:#FEF2F2;--er-bd:#FECACA;
  --wn:#92400E;--wn-bg:#FEF3C7;
  --in:#1A4FA8;--in-bg:#EAF1FB;
  /* Accents */
  --teal:#0D7377;--tl:#0D7377;--tl-bg:#E8F5EE;--tl-lt:#7EC9A0;
  --purple:#7C3AED;--pu:#7C3AED;--pu-bg:#EEEDFC;
  /* Radius */
  --r:6px;--radius:8px;--radius-lg:12px;--rl:10px;
  /* Fonts */
  --ff-body:system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --ff-mono:'Courier New',monospace;
  --ff-title:'Playfair Display',Georgia,serif;
  /* Layout */
  --header-h:58px;
  font-family:var(--ff-body);
}

/* ── DARK MODE ── */
@media(prefers-color-scheme:dark){:root{
  /* Brand */
  --brand:#C4607A;--brand-d:#2A1018;--brand-lt:#7A2A3C;--brand-pale:#2A1018;
  --ac:#C4607A;--ac2:#D4788E;--ac-bg:#2A1018;--ac-lt:#7A2A3C;
  /* Surfaces */
  --bg:#18110F;--sf:#231A17;--sf2:#2D221E;--bd:#3D2E29;--bd2:#4A3832;
  /* Text */
  --tx:#F0EAE4;--tx2:#A8948A;--tx3:#72615A;
  /* Status */
  --ok:#4CAF78;--ok-bg:#0F2A1A;--ok-bd:#1A4A2A;
  --er:#E05858;--er-bg:#2A1010;--er-bd:#4A1818;
  --wn:#D4A030;--wn-bg:#241A08;
  --in:#5BA3E0;--in-bg:#0E1E30;
  /* Accents */
  --teal:#4CAF78;--tl:#4CAF78;--tl-bg:#0F2A1A;--tl-lt:#085041;
  --purple:#8A82E0;--pu:#8A82E0;--pu-bg:#1A1840;
}}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:var(--ff-body);background:var(--bg);color:var(--tx);min-height:100dvh;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── OP-NAV (barra superior oscura) ── */
.op-nav{display:flex;background:var(--brand-d);padding:0 12px;gap:4px;flex-shrink:0;overflow-x:auto;position:sticky;top:0;z-index:50;scrollbar-width:none;-ms-overflow-style:none}
.op-nav::-webkit-scrollbar{display:none}
.op-nav a,.op-nav-btn{display:flex;align-items:center;gap:6px;padding:9px 14px;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap;cursor:pointer;font-family:var(--ff-body)}
.op-nav a:hover,.op-nav-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.op-nav a.active,.op-nav-btn.active{color:#fff;border-bottom-color:var(--brand-lt)}

/* Dropdown "Más ▾" en op-nav (agrupar tabs poco usadas).
   IMPORTANTE: .op-nav tiene overflow-x:auto, lo que recorta hijos absolutos.
   Por eso el panel usa position:fixed y JS lo posiciona bajo el botón. */
.op-nav-more{display:flex;align-items:stretch}
.op-nav-more-btn{border:0;background:transparent;font:inherit;cursor:pointer}
.op-nav-more-panel{position:fixed;top:0;left:0;min-width:220px;background:var(--brand-d);box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:9999;display:none;flex-direction:column;padding:4px 0;border-radius:0 0 10px 10px}
.op-nav-more-panel .op-nav-btn{border-bottom:none;padding:10px 16px;border-left:3px solid transparent;justify-content:flex-start;color:rgba(255,255,255,.85)}
.op-nav-more-panel .op-nav-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.op-nav-more-panel .op-nav-btn.active{border-bottom:none;border-left-color:var(--brand-lt);background:rgba(255,255,255,.1);color:#fff}
.op-nav-more[data-open="true"] .op-nav-more-panel{display:flex}
.op-nav-more-btn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.07)}

/* ── HEADER (barra burdeos) ── */
.header{height:var(--header-h);background:var(--brand);display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2);position:sticky;top:37px;z-index:49}
.header img{height:38px;background:#fff;border-radius:8px;padding:4px 8px;object-fit:contain}
.header-title{color:white}
.header-title h1{font-size:18px;font-weight:800;letter-spacing:-.3px}
.header-title p{font-size:11px;opacity:.7;margin-top:1px}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.header-time{color:rgba(255,255,255,.6);font-size:13px;font-family:var(--ff-mono)}
.header-date{color:rgba(255,255,255,.6);font-size:12px}
.year-sel{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;padding:5px 10px;border-radius:6px;font-size:13px;font-weight:600}
.year-sel option{background:var(--brand-d);color:#fff}

/* ── MAIN LAYOUT ── */
.main{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;min-height:0;-webkit-overflow-scrolling:touch}
.panel{display:none}
.panel.active{display:block}
.panel>*+*{margin-top:16px}
.app{max-width:1200px;margin:0 auto;padding:0 20px 60px}

/* ── TABS ── */
.tabs{display:flex;border-bottom:1px solid var(--bd);overflow-x:auto;gap:0;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;margin:0 0 20px;align-items:stretch}
.tabs::-webkit-scrollbar{display:none}
.tab,.tb{padding:7px 11px;font-size:12.5px;font-family:var(--ff-body);cursor:pointer;border:none;background:transparent;color:var(--tx3);border-bottom:2.5px solid transparent;margin-bottom:-1px;font-weight:500;white-space:nowrap;letter-spacing:.2px;transition:color .15s}
.tab:hover,.tb:hover{color:var(--brand)}
.tab.on,.tab.active,.tb.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:var(--radius);border:1px solid var(--bd);background:var(--sf);color:var(--tx);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--ff-body);transition:all .15s;white-space:nowrap;text-decoration:none;line-height:1.4}
.btn:hover{border-color:var(--brand-lt);background:var(--sf)}
.btn.pr{background:var(--brand);color:#fff;border-color:var(--brand)}.btn.pr:hover{background:var(--brand-d)}
.btn.tl{background:var(--teal);color:#fff;border-color:var(--teal)}.btn.tl:hover{background:#0A5C5F}
.btn.er{background:var(--er-bg);color:var(--er);border-color:var(--er-bd)}.btn.er:hover{background:var(--er);color:#fff}
.btn.wn{background:var(--wn-bg);border-color:var(--wn);color:var(--wn)}.btn.wn:hover{background:var(--wn);color:#fff}
.btn.pu{background:var(--pu-bg);border-color:var(--pu);color:var(--pu)}.btn.pu:hover{background:var(--pu);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--tx2)}.btn.ghost:hover{background:var(--sf2);color:var(--tx)}
.btn.sm{padding:5px 10px;font-size:11px}
.btn.ic{padding:5px;border-radius:var(--radius)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── CARDS ── */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden;box-shadow:0 1px 3px rgba(92,26,46,.06)}
.ch{padding:10px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:var(--sf2)}
.ch h3{font-size:11px;font-weight:600;font-family:var(--ff-body);color:var(--tx2);text-transform:uppercase;letter-spacing:.7px}

/* ── KPIs ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.kpi{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius-lg);padding:14px 16px;transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(92,26,46,.08)}
.kpi-l{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);margin-bottom:4px}
.kpi-v{font-size:22px;font-weight:700;font-family:var(--ff-mono)}
.kpi-v.ok{color:var(--ok)}.kpi-v.er{color:var(--er)}.kpi-v.brand{color:var(--brand)}
.kpi-sub{font-size:11px;color:var(--tx3);margin-top:2px}
/* Dashboard-style KPIs (mc/ml/mv) */
.mc{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:12px 15px}
.ml{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.mv{font-size:21px;font-weight:700;font-family:var(--ff-mono)}
.mv.ok{color:var(--ok)}.mv.er{color:var(--er)}.mv.ac{color:var(--brand)}

/* ── SECTION TITLE ── */
.stitle{font-family:Georgia,serif;font-size:15px;color:var(--brand);font-weight:700;display:flex;align-items:center;gap:8px}
.stitle small{font-family:var(--ff-body);font-size:11px;color:var(--tx3);font-weight:400}

/* ── TABLES ── */
.tw{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius-lg);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--ff-body)}
th{text-align:left;padding:10px 12px;background:var(--sf2);color:var(--tx2);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0;white-space:nowrap;border-bottom:2px solid var(--bd)}
td{padding:8px 12px;border-top:1px solid var(--bd);white-space:nowrap;vertical-align:middle}
tr:hover td{background:var(--sf)}
.num{text-align:right;font-family:var(--ff-mono);font-size:12px}
.total-row td{font-weight:700;background:var(--sf2);border-top:2px solid var(--bd)}
/* dt-style tables (from app.css) */
.dt{width:100%;border-collapse:collapse;font-size:13px}
.dt th{padding:8px 12px;text-align:left;font-weight:600;font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.7px;background:var(--sf2);border-bottom:1px solid var(--bd)}
.dt td{padding:8px 12px;border-bottom:1px solid var(--bd);color:var(--tx);vertical-align:middle}
.dt tr:last-child td{border-bottom:none}.dt tr:hover td{background:var(--ac-bg)}

/* ── FORMS ── */
.form-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius-lg);padding:20px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:11px;color:var(--tx2);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.fg input,.fg select,.fg textarea{background:var(--bg);border:1px solid var(--bd);color:var(--tx);padding:9px 11px;border-radius:var(--radius);font-size:13px;font-family:var(--ff-body);transition:border-color .15s;outline:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(92,26,46,.1)}
.fg textarea{resize:vertical;min-height:50px}
/* fc-style form controls (from app.css) */
.fc{padding:7px 10px;border:1px solid var(--bd);border-radius:var(--r);font-size:13px;font-family:var(--ff-body);background:var(--sf);color:var(--tx);outline:none;width:100%}
.fc:focus{border-color:var(--brand)}.fc.err{border-color:var(--er)}
select.fc{cursor:pointer}
textarea.fc{resize:vertical;min-height:60px}
.fc[readonly]{background:var(--sf2);color:var(--tx3)}
.fl{font-size:12px;font-weight:600;color:var(--tx2)}

/* ── FILTERS ── */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.filters .fg{min-width:140px}

/* ── PILLS ── */
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid transparent}
.pill.on{background:var(--brand);color:#fff}
.pill-g{background:var(--ok-bg);color:var(--ok)}
.pill-r{background:var(--er-bg);color:var(--er)}
.pill-w{background:var(--wn-bg);color:var(--wn)}
.pill-n{background:var(--bd);color:var(--tx3)}
.pills{display:flex;gap:5px;flex-wrap:wrap}

/* ── BADGES ── */
.bdg{display:inline-block;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:600}
.bc{background:var(--ac-bg);color:var(--brand)}.bt2{background:var(--tl-bg);color:var(--teal)}.bp{background:var(--pu-bg);color:var(--purple)}.bi{background:var(--in-bg);color:var(--in)}.bn{background:var(--sf2);color:var(--tx3)}.bw2{background:var(--wn-bg);color:var(--wn)}

/* ── TOAST ── */
.toast-area,.ta{position:fixed;bottom:18px;right:18px;z-index:999;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast,.tos{background:var(--tx);color:var(--bg);padding:9px 15px;border-radius:var(--radius);font-size:13px;animation:slide-in .2s ease;pointer-events:none;font-family:var(--ff-body);border:1px solid transparent}
.toast.tok,.tos.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.toast.ter,.tos.er{background:var(--er);color:#fff;border-color:var(--er)}
.tos.inf{background:var(--tx);color:var(--bg);border-color:var(--tx)}

/* ── MODAL / OVERLAY ── */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;align-items:center;justify-content:center}
.modal-ov.active{display:flex}
.modal{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:24px;max-width:650px;width:92%;max-height:85vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.modal h2{font-size:15px;font-weight:700;margin-bottom:16px;color:var(--brand)}
/* co-style confirm modal (from app.css) */
.co{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:flex;align-items:center;justify-content:center}
.cb{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:20px;max-width:350px;width:90%}
.cb h3{font-size:15px;margin-bottom:6px}.cb p{font-size:13px;color:var(--tx2);margin-bottom:16px;line-height:1.5}
.ca{display:flex;gap:8px;justify-content:flex-end}
/* Overlay full (mobile sheet) */
.overlay{position:fixed;inset:0;background:var(--bg);z-index:100;overflow-y:auto;transform:translateY(100%);transition:transform .3s ease}
.overlay.on{transform:translateY(0)}
/* Backdrop + Drawer */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:800;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
.backdrop.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:750px;background:var(--bg);z-index:900;box-shadow:-8px 0 30px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:0 20px 40px;display:block!important}
.drawer.on{transform:translateX(0);animation:slideIn .35s cubic-bezier(.16,1,.3,1)}
.drawer .bbar{position:sticky;top:0;background:var(--bg);z-index:10;padding:20px 0 10px;border-bottom:1px solid var(--bd);margin-bottom:15px}

/* ── CONFIG SECTIONS ── */
.cfg-section{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px}
.cfg-section h3{font-size:13px;font-weight:700;color:var(--brand);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cfg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cfg-tag{display:inline-flex;align-items:center;gap:5px;background:var(--sf2);border:1px solid var(--bd);border-radius:20px;padding:4px 10px 4px 12px;font-size:12px;font-weight:500}
.cfg-tag .tag-x{background:none;border:none;color:var(--er);cursor:pointer;font-size:14px;font-weight:700;padding:0 2px;line-height:1}
.cfg-tag .tag-x:hover{color:#fff;background:var(--er);border-radius:50%}
.cfg-add{display:flex;gap:6px;align-items:center}
.cfg-add input{flex:1;padding:7px 10px;border:1px solid var(--bd);border-radius:var(--radius);font-size:12px;background:var(--bg)}
.cfg-add input:focus{outline:none;border-color:var(--brand)}

/* ── BAR CHART ── */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bar-label{width:170px;font-size:12px;color:var(--tx2);text-align:right;flex-shrink:0}
.bar-track{flex:1;background:var(--bd);border-radius:4px;height:20px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--brand-lt));transition:width .5s ease;min-width:2px}
.bar-val{width:90px;font-size:12px;font-weight:700;font-family:var(--ff-mono);text-align:right;color:var(--er);flex-shrink:0}
.bar-pct{width:50px;font-size:11px;color:var(--tx3);text-align:right;flex-shrink:0}

/* ── WEEK CARD ── */
.wcard{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius-lg);padding:16px;border-left:4px solid var(--bd);transition:border-color .2s}
.wcard.w-ok{border-left-color:var(--ok)}.wcard.w-er{border-left-color:var(--er)}.wcard.w-empty{border-left-color:var(--bd);opacity:.6}
.wcard h3{font-size:13px;color:var(--brand);font-weight:700;margin-bottom:10px}
.wcard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;text-align:center}
.wcard-grid .wg-l{font-size:9px;text-transform:uppercase;color:var(--tx3);letter-spacing:.3px}
.wcard-grid .wg-v{font-size:15px;font-weight:700;font-family:var(--ff-mono)}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:40px 20px;color:var(--tx3)}
.empty p{font-size:13px;margin-top:5px}

/* ── DIVIDER ── */
.divider{border:none;border-top:1px solid var(--bd);margin:4px 0}

/* ── PROGRESS BARS ── */
.bw{margin-top:5px}.bl{display:flex;justify-content:space-between;font-size:10px;margin-bottom:2px;color:var(--tx3)}
.bt{height:5px;background:var(--sf2);border-radius:3px;overflow:hidden}
.bf{height:100%;border-radius:3px}.bf.g{background:var(--ok)}.bf.o{background:var(--wn)}.bf.r{background:var(--er)}

/* ── SWITCH ── */
.sw2{position:relative;width:34px;height:19px;flex-shrink:0;display:inline-block}
.sw2 input{opacity:0;width:0;height:0}
.sl{position:absolute;cursor:pointer;inset:0;background:var(--bd);border-radius:10px}
.sl::before{content:'';position:absolute;width:13px;height:13px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s}
input:checked+.sl{background:var(--teal)}input:checked+.sl::before{transform:translateX(15px)}

/* ── TOOLTIPS ── */
.tip{position:relative;display:inline-flex}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--tx);color:var(--bg);font-size:11px;white-space:nowrap;padding:4px 9px;border-radius:5px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:200;font-weight:400;letter-spacing:.2px}
.tip::before{content:'';position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--tx);pointer-events:none;opacity:0;transition:opacity .15s;z-index:200}
.tip:hover::after,.tip:hover::before{opacity:1}

/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes slide-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .main{padding:12px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .op-nav a,.op-nav-btn{padding:8px 10px;font-size:12px}
  .bar-label{width:80px;font-size:10px}
  .wcard-grid{grid-template-columns:repeat(3,1fr)}
  .tw{max-height:70vh;overflow:auto}
}
@media(max-width:520px){
  .kpis{grid-template-columns:1fr 1fr}
  .header-title h1{font-size:15px}
  .header-title p{display:none}
}

/* ── DARK MODE: component overrides ── */
@media(prefers-color-scheme:dark){
  .header{background:var(--sf);box-shadow:0 2px 8px rgba(0,0,0,.4)}
  .header-title{color:var(--tx)}
  .header-title h1{color:var(--brand)}
  .header-title p{color:var(--tx3);opacity:1}
  .header img{background:var(--sf2)}
  .op-nav{background:var(--sf2)}
  .op-nav a,.op-nav-btn{color:var(--tx3)}
  .op-nav a:hover,.op-nav-btn:hover{color:var(--tx);background:rgba(255,255,255,.05)}
  .op-nav a.active,.op-nav-btn.active{color:var(--brand);border-bottom-color:var(--brand)}
  .year-sel{background:var(--sf2);border-color:var(--bd);color:var(--tx)}
  .year-sel option{background:var(--sf);color:var(--tx)}
  .modal{box-shadow:0 8px 32px rgba(0,0,0,.4)}
  .drawer{box-shadow:-8px 0 30px rgba(0,0,0,.4)}
  .fg input,.fg select,.fg textarea{background:var(--sf);border-color:var(--bd);color:var(--tx)}
  .fc{background:var(--sf);border-color:var(--bd);color:var(--tx)}
  .bar-fill{background:linear-gradient(90deg,var(--brand),var(--brand-lt))}
  img{opacity:.92}
}

/* ── PRINT ── */
@media print{
  .op-nav,.header,.toast-area,.ta,.btn,.modal-ov,.co,.backdrop,.drawer,.hdr-acts,.filters,.cfg-section,.cfg-add{display:none!important}
  body{background:#fff!important;color:#000!important;min-height:auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{color-scheme:light!important}
  .main,.pers-body,.content,.app,.inv-app{overflow:visible!important;padding:0;max-height:none!important;height:auto!important}
  .panel,.view,.sv{display:block!important;position:static!important}
  .panel:not(.active),.view:not(.on),.sv:not(.on){display:none!important}
  .kpi,.kpis,.card,.mc,.wcard,.form-card,.tw,.cfg-section{break-inside:avoid;box-shadow:none!important;border:1px solid #ccc!important}
  .kpis{grid-template-columns:repeat(3,1fr)!important}
  .kpi:hover,.card:hover{transform:none!important}
  .tw{overflow:visible!important;max-height:none!important}
  table{font-size:11px!important}
  th{background:#f0f0f0!important;color:#333!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  td{border-color:#ddd!important}
  .num{color:#000!important}
  .total-row td{background:#f0f0f0!important;font-weight:700}
  .stitle{color:#5C1A2E!important;page-break-after:avoid}
  .bar-track{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bar-fill{background:#5C1A2E!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pill,.bdg{border:1px solid #ccc!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kpi-v{color:#000!important}
  .kpi-v.ok{color:#1A6E3A!important}.kpi-v.er{color:#B02020!important}
  .toast-area,.modal-ov,.backdrop,.drawer{display:none!important}
  a{color:#000!important;text-decoration:none!important}
  @page{margin:15mm}
  h1,h2,h3,.stitle{page-break-after:avoid}
  tr{page-break-inside:avoid}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS
   ═══════════════════════════════════════════════════════════ */

/* ── Table responsive wrapper (mobile touch scroll) ── */
.tw{-webkit-overflow-scrolling:touch}

/* ── Mobile ≤600px ── */
@media(max-width:600px){
  .kpi-row,.kpi-grid{flex-direction:column}
  table{font-size:12px}
  .main{padding:10px}
  .op-nav{flex-wrap:wrap;gap:0}
  .op-nav-btn,.op-nav a{font-size:12px;padding:8px 12px}
}

/* ── Print (supplementary) ── */
@media print{
  nav,.op-nav,.toast-area,.skip-link,button{display:none!important}
  body{background:#fff!important;color:#000!important}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
}

/* ── ACCESSIBILITY ── */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-40px;left:0;background:var(--brand);color:#fff;padding:8px 16px;z-index:10000;text-decoration:none;font-weight:600;font-size:13px}
.skip-link:focus{top:0}