*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --pri:#1A6FD4;--pri-d:#1258B0;--pri-l:#E8F3FF;--pri-m:#4B9AE8;
  --bg:#F2F8FF;--white:#FFFFFF;--surf:#E4F0FB;
  --ink:#0D1E30;--mid:#2D4A63;--muted:#6B8EAA;
  --border:#C4DCEF;
  --ok:#0A7C5C;--okbg:#D0F7EC;
  --err:#C0392B;--errbg:#FFEBEB;
  --wrn:#C97A00;--wrnbg:#FFF4D6;
  /* Escala de spacing (base 4px) — usar no lugar de paddings/margins inline */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
  /* Raios padronizados */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px;
  --radius-lg:14px; --radius-xl:18px; --radius-2xl:24px;
  /* Sombras padronizadas */
  --shadow-sm:0 1px 3px rgba(13,30,48,.06), 0 1px 2px rgba(13,30,48,.04);
  --shadow-md:0 4px 12px rgba(13,30,48,.10), 0 2px 4px rgba(13,30,48,.06);
  --shadow-lg:0 12px 32px rgba(13,30,48,.18), 0 4px 8px rgba(13,30,48,.08);
  --shadow-btn:0 3px 10px rgba(26,111,212,.28);
}

/* ── DARK MODE ── */
[data-theme="dark"]{
  --pri-l:#1A2E47;
  --bg:#0A1220;--white:#0F1A2E;--surf:#152238;
  --ink:#E8F0FF;--mid:#A8C4E0;--muted:#7B9BBC;
  --border:rgba(26,111,212,0.22);
  --okbg:#0E2E22;--errbg:#3A1A1A;--wrnbg:#3A2A0F;
}
[data-theme="dark"] body{background:var(--bg);}
[data-theme="dark"] .nav{background:rgba(15,26,46,0.92);backdrop-filter:blur(12px);}
[data-theme="dark"] .card,[data-theme="dark"] .kpi{background:var(--white);}
[data-theme="dark"] .field,[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:var(--surf);color:var(--ink);border-color:var(--border);
}
[data-theme="dark"] .modal{background:var(--white);}
[data-theme="dark"] .toast{background:var(--white);color:var(--ink);}
[data-theme="dark"] .tr:hover,[data-theme="dark"] tr:hover{background:var(--surf);}
[data-theme="dark"] .tab.on{background:var(--surf);}
[data-theme="dark"] img:not([src*=".svg"]){filter:brightness(.92);}

/* ── DARK MODE — Correções de poluição visual ── */
[data-theme="dark"] .prod-c,
[data-theme="dark"] .pay-btn,
[data-theme="dark"] .btn-s{
  background:var(--white);
  color:var(--ink);
}
[data-theme="dark"] .btn-s{color:var(--mid);}
[data-theme="dark"] .btn-s:hover{background:var(--surf);color:var(--pri);border-color:var(--pri);}
[data-theme="dark"] .pay-btn:hover{background:var(--surf);}
[data-theme="dark"] .prod-c:hover{background:var(--surf);}
/* Toast precisa permanecer escuro com texto claro em ambos os temas */
[data-theme="dark"] .toast{background:#0A1220;color:#E8F0FF;border-left-color:var(--pri);}
/* DRE rows — gradiente adaptado pro dark */
[data-theme="dark"] .dl-tot{background:linear-gradient(135deg,rgba(26,111,212,.22),rgba(26,111,212,.10));border-color:rgba(75,154,232,.28);}
[data-theme="dark"] .dl-res{background:linear-gradient(135deg,rgba(26,111,212,.30),rgba(75,154,232,.14));border-color:rgba(75,154,232,.32);}
[data-theme="dark"] .dl-bg{background:var(--surf);}
/* Status badges — substitui fundos hardcoded por versões dark */
[data-theme="dark"] .st-pendente,[data-theme="dark"] .st-aberta{background:rgba(201,122,0,.18);color:#FFB84D;border-color:rgba(201,122,0,.38);}
[data-theme="dark"] .st-separando{background:rgba(67,56,202,.22);color:#A5B4FC;border-color:rgba(67,56,202,.44);}
[data-theme="dark"] .st-saiu{background:rgba(29,78,216,.22);color:#93C5FD;border-color:rgba(29,78,216,.44);}
[data-theme="dark"] .st-entregue,[data-theme="dark"] .st-paga,[data-theme="dark"] .st-ativo{background:rgba(10,124,92,.20);color:#34D399;border-color:rgba(10,124,92,.40);}
[data-theme="dark"] .st-cancelado,[data-theme="dark"] .st-vencida,[data-theme="dark"] .st-inadimplente{background:rgba(192,57,43,.22);color:#FCA5A5;border-color:rgba(192,57,43,.42);}
[data-theme="dark"] .st-inativo{background:var(--surf);color:var(--muted);border-color:var(--border);}
/* Badges genéricos — bordas mais sutis no dark */
[data-theme="dark"] .b-ok{background:rgba(10,124,92,.20);color:#34D399;border-color:rgba(10,124,92,.40);}
[data-theme="dark"] .b-w{background:rgba(201,122,0,.18);color:#FFB84D;border-color:rgba(201,122,0,.38);}
[data-theme="dark"] .b-e{background:rgba(192,57,43,.22);color:#FCA5A5;border-color:rgba(192,57,43,.42);}
[data-theme="dark"] .b-p{background:rgba(26,111,212,.18);color:#7CB3F0;border-color:rgba(26,111,212,.38);}
/* TR hover mais sutil */
[data-theme="dark"] .tr:hover,[data-theme="dark"] tr:hover{background:rgba(26,111,212,.10);}
/* Alertas inline (warning/error backgrounds) com texto legível */
[data-theme="dark"] [style*="var(--wrnbg)"]{color:#FFB84D !important;}
[data-theme="dark"] [style*="var(--errbg)"]{color:#FCA5A5 !important;}
[data-theme="dark"] [style*="var(--okbg)"]{color:#34D399 !important;}
/* Sidebar / nav-group hover mais legível */
[data-theme="dark"] .nav-group:hover{background:rgba(26,111,212,.12);color:var(--ink);}
[data-theme="dark"] .nav-group.on{background:rgba(26,111,212,.20);color:#7CB3F0;}
[data-theme="dark"] .nav-group.nav-group-solo.on{background:var(--pri);color:#fff;}
[data-theme="dark"] .nav-drop-item:hover{background:rgba(26,111,212,.12);color:var(--ink);}
[data-theme="dark"] .nav-drop-item.on{background:var(--pri);color:#fff;}
/* KPI strip — borda esquerda colorida mais visível no dark */
[data-theme="dark"] .kpi{border-color:var(--border);}
/* Pills: pill.on no dark deve manter contraste */
[data-theme="dark"] .pill:not(.on){background:transparent;color:var(--muted);}
[data-theme="dark"] .pill:hover:not(.on){background:rgba(26,111,212,.10);color:#7CB3F0;}
/* Skeleton dark */
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,var(--surf) 25%,rgba(75,154,232,.10) 50%,var(--surf) 75%);background-size:200% 100%;}
/* Cart line */
[data-theme="dark"] .cline{background:var(--surf);}
/* surf-box (login + diversos) */
[data-theme="dark"] .surf-box{background:var(--surf);}
/* Modal backdrop — mais escuro no dark pra dar mais foco */
[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.65);}
/* Progress bar track */
[data-theme="dark"] .prog{background:var(--surf);}
/* Scrollbar dark — track sutil */
[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--surf);}
body{background:var(--bg);font-family:'DM Sans',sans-serif;color:var(--ink);font-size:14px;}
h1,h2,h3{font-family:'Syne',sans-serif;font-weight:800;}
.mono-val{font-family:'Roboto Mono',monospace;letter-spacing:-.5px;}
.mi{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;}
/* NAV */
.nav{background:#fff;border-bottom:1.5px solid var(--border);position:sticky;top:0;z-index:50;}
.logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--pri),var(--pri-d));display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(26,111,212,.3);}
/* CARDS */
.card{background:#fff;border:1.5px solid var(--border);border-radius:14px;transition:border .2s,box-shadow .2s;}
.card:hover{border-color:var(--pri);box-shadow:0 4px 18px rgba(26,111,212,.09);}
/* KPI */
.kpi{background:#fff;border-radius:12px;border:1.5px solid var(--border);border-left:4px solid var(--pri);padding:14px 16px;display:flex;align-items:center;gap:12px;}
.kpi.g{border-left-color:var(--ok);}
.kpi.o{border-left-color:var(--wrn);}
.kpi.r{border-left-color:var(--err);}
.kpi.a{border-left-color:var(--pri-m);}
.kpi-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* BUTTONS */
.btn{border-radius:8px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;border:none;display:inline-flex;align-items:center;gap:5px;padding:9px 18px;}
.btn-p{background:linear-gradient(135deg,var(--pri),var(--pri-d));color:#fff;box-shadow:0 3px 10px rgba(26,111,212,.25);}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(26,111,212,.35);}
.btn-s{background:#fff;border:1.5px solid var(--border);color:var(--mid);}
.btn-s:hover{border-color:var(--pri);color:var(--pri);}
.btn-d{background:var(--errbg);border:1.5px solid #FFC0C0;color:var(--err);}
.btn-d:hover{background:var(--err);color:#fff;}
.btn-g{background:var(--okbg);border:1.5px solid #7EECD4;color:var(--ok);}
.btn-g:hover{background:var(--ok);color:#fff;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;}
/* TABS */
.tabs{background:var(--surf);border-radius:12px;padding:3px;display:inline-flex;gap:3px;flex-wrap:wrap;}
.tab{padding:7px 14px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);white-space:nowrap;border:none;background:transparent;transition:all .2s;}
.tab.on{background:#fff;color:var(--pri);box-shadow:0 2px 6px rgba(26,111,212,.12);}
.tab:hover:not(.on){color:var(--ink);}
/* ─── SIDEBAR LATERAL (só navegação) ─── */
.sidebar{position:fixed;left:0;top:60px;bottom:0;width:230px;background:#fff;border-right:1.5px solid var(--border);display:flex;flex-direction:column;z-index:40;overflow-y:auto;}
[data-theme="dark"] .sidebar{background:var(--surf);}
.sidebar-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;}
.main-wrap{margin-left:230px;min-height:calc(100vh - 60px);}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(13,30,48,.45);z-index:35;}
.sidebar-backdrop.on{display:block;}

/* NAV GROUPS — vertical accordion na sidebar */
.nav-group-wrap{display:block;}
.nav-group{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;color:var(--mid);text-align:left;border:none;background:transparent;transition:all .15s;font-family:'DM Sans',sans-serif;}
.nav-group:hover{background:var(--pri-l);color:var(--pri);}
.nav-group.on{background:var(--pri-l);color:var(--pri);}
.nav-group.nav-group-solo.on{background:var(--pri);color:#fff;box-shadow:0 2px 8px rgba(26,111,212,.25);}
.nav-group-label{flex:1;}
.nav-group-chev{font-size:10px;opacity:.7;transition:transform .2s;margin-left:6px;}
.nav-group.open .nav-group-chev{transform:rotate(180deg);}
.nav-drop{display:none;flex-direction:column;gap:1px;padding:3px 0 6px 8px;margin-left:8px;border-left:2px solid var(--border);}
.nav-drop.open{display:flex;}
.nav-drop-item{text-align:left;padding:8px 12px;border-radius:7px;font-size:12.5px;font-weight:500;cursor:pointer;color:var(--mid);border:none;background:transparent;transition:all .12s;font-family:'DM Sans',sans-serif;}
.nav-drop-item:hover{background:var(--pri-l);color:var(--pri);}
.nav-drop-item.on{background:var(--pri);color:#fff;font-weight:600;}
[data-theme="dark"] .nav-drop{border-left-color:var(--border);}
[data-theme="dark"] .nav-group:hover, [data-theme="dark"] .nav-group.on{background:var(--bg);}

/* Mobile: sidebar vira drawer */
@media (max-width: 900px){
  .sidebar{top:0;transform:translateX(-100%);transition:transform .25s ease;width:260px;box-shadow:4px 0 24px rgba(0,0,0,.15);padding-top:14px;z-index:60;}
  .sidebar.open{transform:translateX(0);}
  .main-wrap{margin-left:0;min-height:auto;}
  .sidebar-toggle{display:inline-flex !important;align-items:center;justify-content:center;}
}
/* PILLS */
.pill{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;border:1.5px solid var(--border);color:var(--muted);transition:all .18s;text-transform:uppercase;letter-spacing:.03em;}
.pill.on{background:var(--pri);border-color:var(--pri);color:#fff;}
.pill:hover:not(.on){border-color:var(--pri);color:var(--pri);}
/* INPUTS */
.field{background:#fff;border:1.5px solid var(--border);color:var(--ink);padding:9px 12px;border-radius:8px;width:100%;font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border .2s;}
.field:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(26,111,212,.1);}
.field::placeholder{color:var(--muted);}
.field[disabled]{background:var(--surf);cursor:not-allowed;}
/* Variante compacta — usar no lugar de <input> com style inline repetido */
.field-sm{background:#fff;border:1.5px solid var(--border);color:var(--ink);padding:8px 10px;border-radius:8px;width:100%;font-family:'DM Sans',sans-serif;font-size:12px;outline:none;transition:border .2s;}
.field-sm:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(26,111,212,.1);}
.field-sm::placeholder{color:var(--muted);}
[data-theme="dark"] .field-sm{background:var(--surf);color:var(--ink);border-color:var(--border);}
.flabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;display:block;}
/* BADGES */
.badge{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.b-ok{background:var(--okbg);color:var(--ok);border:1px solid #7EECD4;}
.b-w{background:var(--wrnbg);color:var(--wrn);border:1px solid #FFD980;}
.b-e{background:var(--errbg);color:var(--err);border:1px solid #FFC0C0;}
.b-p{background:var(--pri-l);color:var(--pri);border:1px solid #9DC8F0;}
/* PROGRESS */
.prog{height:4px;background:var(--border);border-radius:10px;overflow:hidden;}
.pbar{height:100%;background:linear-gradient(90deg,var(--pri),var(--pri-m));border-radius:10px;transition:width .5s;}
.pbar.g{background:linear-gradient(90deg,var(--ok),#34D39A);}
.pbar.o{background:linear-gradient(90deg,var(--wrn),#FBBF24);}
.pbar.r{background:linear-gradient(90deg,var(--err),#F87171);}
/* PDV */
.prod-c{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;transition:all .2s;}
.prod-c:hover{transform:translateY(-3px);border-color:var(--pri);box-shadow:0 8px 24px rgba(26,111,212,.12);}
.prod-c.out{opacity:.45;cursor:not-allowed;}
/* CART */
.cline{background:var(--surf);border-radius:8px;padding:9px 12px;margin-bottom:7px;}
/* PAYMENT */
.pay-btn{border:1.5px solid var(--border);border-radius:10px;padding:12px 8px;cursor:pointer;text-align:center;transition:all .18s;background:#fff;color:var(--mid);font-family:'DM Sans',sans-serif;font-weight:600;font-size:12px;}
.pay-btn:hover{border-color:var(--pri);}
.pay-btn.sel{background:linear-gradient(135deg,var(--pri),var(--pri-d));border-color:var(--pri);color:#fff;}
/* PDV — toggle modo Balcão / Pedido WhatsApp */
.pdv-modo-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--border);background:#fff;border-radius:12px;cursor:pointer;transition:all .18s;font-family:'DM Sans',sans-serif;}
.pdv-modo-btn:hover{border-color:var(--pri);}
.pdv-modo-btn.ativo{border-color:var(--pri);background:var(--pri-l);box-shadow:0 2px 10px rgba(26,111,212,.12);}
[data-theme="dark"] .pdv-modo-btn{background:var(--surf);}
[data-theme="dark"] .pdv-modo-btn.ativo{background:rgba(26,111,212,.18);border-color:var(--pri);}
/* TABLE */
.th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
.tr{border-bottom:1px solid var(--border);transition:background .12s;}
.tr:hover{background:var(--pri-l);}
/* DRE */
.dl{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:10px;margin-bottom:5px;}
.dl-bg{background:var(--surf);}
.dl-tot{background:linear-gradient(135deg,var(--pri-l),#D0E8FF);border:1.5px solid rgba(26,111,212,.18);}
.dl-res{background:linear-gradient(135deg,#E0F2FE,#BFDBFE);border:1.5px solid rgba(26,111,212,.2);}
/* TOAST */
.toast{position:fixed;bottom:24px;right:20px;background:var(--ink);color:#fff;border-left:4px solid var(--pri);padding:12px 20px;border-radius:10px;z-index:9999;animation:tin .3s ease;font-size:13px;font-weight:500;box-shadow:0 10px 32px rgba(0,0,0,.2);max-width:320px;}
.toast.ok{border-left-color:var(--ok);}
.toast.err{border-left-color:var(--err);}
.toast.wn{border-left-color:var(--wrn);}
/* Toast dentro do stack: posição estática (o container #toastStack é que é fixed) */
.toast-stacked{position:static;bottom:auto;right:auto;}
@keyframes tin{from{transform:translateX(110%);opacity:0;}to{transform:translateX(0);opacity:1;}}
/* SCROLLBAR */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--pri);border-radius:10px;}
::-webkit-scrollbar-track{background:var(--border);}
/* LOGIN */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#0D3F7A 0%,#1258B0 40%,#1A6FD4 72%,#4B9AE8 100%);position:relative;overflow:hidden;}
.login-bg::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 15% 85%,rgba(255,255,255,.07),transparent 45%),radial-gradient(circle at 85% 15%,rgba(255,255,255,.05),transparent 40%);}
.login-card{background:rgba(255,255,255,.98);border-radius:20px;padding:40px;width:100%;max-width:400px;box-shadow:0 28px 70px rgba(13,63,122,.38);position:relative;z-index:2;}
.sep{border:none;border-top:1px solid var(--border);margin:16px 0;}
.surf-box{background:var(--surf);border-radius:12px;padding:14px;}
.gl{display:inline-block;width:24px;height:3px;background:var(--pri);border-radius:2px;vertical-align:middle;margin-right:7px;}
/* SKELETON */
.skeleton{background:linear-gradient(90deg,var(--surf) 25%,var(--border) 50%,var(--surf) 75%);background-size:200% 100%;animation:skel 1.4s infinite;}
@keyframes skel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* ANIMATE IN */
@keyframes up{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.fu{animation:up .35s ease both;}
.fu1{animation-delay:.05s;}.fu2{animation-delay:.1s;}.fu3{animation-delay:.15s;}
/* SPINNER */
.spin{width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--pri);border-radius:50%;animation:rot .7s linear infinite;display:inline-block;}
@keyframes rot{to{transform:rotate(360deg);}}
/* STATUS BADGES */
.st-pendente{background:#FFF4D6;color:#C97A00;border:1px solid #FFD980;}
.st-separando{background:#EEF2FF;color:#4338CA;border:1px solid #A5B4FC;}
.st-saiu{background:#DBEAFE;color:#1D4ED8;border:1px solid #93C5FD;}
.st-entregue{background:var(--okbg);color:var(--ok);border:1px solid #7EECD4;}
.st-cancelado{background:var(--errbg);color:var(--err);border:1px solid #FFC0C0;}
.st-aberta{background:#FFF4D6;color:#C97A00;border:1px solid #FFD980;}
.st-paga{background:var(--okbg);color:var(--ok);border:1px solid #7EECD4;}
.st-vencida{background:var(--errbg);color:var(--err);border:1px solid #FFC0C0;}
.st-ativo{background:var(--okbg);color:var(--ok);border:1px solid #7EECD4;}
.st-inadimplente{background:var(--errbg);color:var(--err);border:1px solid #FFC0C0;}
.st-inativo{background:var(--surf);color:var(--muted);border:1px solid var(--border);}
/* PRINT */
@media print{
  .nav,.tabs,.btn,.no-print{display:none!important;}
  body{background:#fff!important;}
  .card{box-shadow:none!important;border:1px solid #ccc!important;}
}

/* ═════════ RESPONSIVO DASHBOARD ═════════ */

/* Inputs com font-size 16px evita zoom no iOS */
@media (max-width: 768px) {
  input, select, textarea, .field { font-size: 16px !important; }
}

/* Abas com scroll horizontal no mobile (não quebrar linha) */
@media (max-width: 900px) {
  .tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0 !important; }
}

/* Tabelas com scroll horizontal */
@media (max-width: 768px) {
  table { min-width: 520px; }
  .card > div[style*="overflow"], .card[style*="overflow"] { overflow-x: auto; }
}

/* KPIs: 2 colunas no mobile, 4 no desktop (auto-fit já cuida, mas forçamos min mais agressivo) */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  [style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi { padding: 12px !important; }
  .kpi-icon { width: 32px !important; height: 32px !important; font-size: 16px !important; }
  .kpi [style*="font-size:22px"], .kpi [style*="font-size:24px"] { font-size: 18px !important; }
  .kpi [style*="font-size:18px"], .kpi [style*="font-size:20px"] { font-size: 15px !important; }
}

/* Modais como bottom-sheet no mobile */
@media (max-width: 640px) {
  .modal-bg { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }
}

/* Container principal com padding reduzido no mobile */
@media (max-width: 640px) {
  #cont { padding: 12px !important; }
  .nav > div { padding: 8px 12px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 14px !important; }
  .btn { padding: 8px 12px !important; font-size: 12px !important; }
  .btn-sm { padding: 6px 10px !important; font-size: 11px !important; }
}

/* PDV — operável com uma mão: carrinho fica empilhado no mobile */
@media (max-width: 768px) {
  [id*="pdv"], [id*="caixa"] { grid-template-columns: 1fr !important; }
}

/* Kanban Entregas/Pedidos — scroll horizontal */
@media (max-width: 1024px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fit,minmax(240px"] {
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: 80vw;
  }
}

/* Hover effects apenas em dispositivos com mouse */
@media (hover: none) {
  .card:hover, .kpi:hover, .tr:hover, .tab:hover, .pill:hover, .btn:hover, .prod-c:hover {
    transform: none !important;
    box-shadow: var(--sh-s) !important;
  }
}

/* Safe area iPhone (notch) */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Touch target mínimo 44px (iOS HIG) */
@media (max-width: 640px) {
  button, a.btn, .btn { min-height: 38px; }
  .btn-p, .btn-d { min-height: 44px; }
}

/* ═══ A11Y — FASE A ═══ */
/* Foco visível por teclado em todos os elementos interativos.
   :focus-visible só dispara em navegação por teclado, não em clique de mouse. */
.btn:focus-visible, .pill:focus-visible, .tab:focus-visible,
.nav-group:focus-visible, .nav-drop-item:focus-visible,
.pay-btn:focus-visible, .field:focus-visible, .prod-c:focus-visible,
.kpi[onclick]:focus-visible, [role="button"]:focus-visible,
button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid var(--pri);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Remove o outline padrão só quando NÃO é navegação por teclado */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

/* Touch targets — botões pequenos ainda precisam de área tocável adequada no mobile */
@media (max-width: 768px) {
  .btn-sm { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
}