/* =====================================================================
   app.css  -  Gestao Pet XBee
   ---------------------------------------------------------------------
   NAO EDITE ESTE ARQUIVO A MAO.

   Ele foi EXTRAIDO, byte a byte, do bloco <style> do mockup aprovado
   000e-mockup-Gestao-Pet-DD.html, versao 1.1, em 2026-08-20.

   A regra do dono, dita em 20/08:
     "o mockup existe para eu aprovar e depois a execucao deve ser com
      base no mockup, nao mudar o layout. senao nao precisaria de mockup."

   Reescrever o CSS na mao seria exatamente o jeito de o layout derivar
   sem ninguem perceber. Por isso ele nao e reescrito: e extraido.

   Precisa mudar o layout? Muda no MOCKUP, o dono aprova, e o
   verificador/extrair.php gera este arquivo de novo.

   O verificador/conferir.php compara o hash deste arquivo com o hash do
   bloco <style> do mockup congelado. Divergiu, o portao fecha.
   ===================================================================== */

/* ==========================================================================
   MOCKUP 000e - Gestao Pet XBee
   Cliente: Spa Caes e Gatos D&D, Cambe PR. CNPJ 52.919.868/0001-93

   ISTO E CONTRATO VISUAL, NAO INSPIRACAO (P-529, ADR-0004).
   A entrega sai IDENTICA a isto. Desvio se registra ANTES de virar codigo (P-530).

   DECISAO ESTRUTURAL: MENU LATERAL FIXO com 11 itens.
   Foi o erro E-141 do QR Dinamico: mockup com menu lateral, entrega com menu
   horizontal, e TODA tela nasceu diferente por causa disso.

   ACESSIBILIDADE: contraste conferido, foco visivel, alvo de 44px,
   um h1 por tela, prefers-reduced-motion, min-width:0 em filho de grid.
   DADO: 100% ficticio (P-706).
   ========================================================================== */
:root{
  --ouro:#8A6D1F;        /* 4,9:1 sobre branco, conferido */
  --ouro-forte:#6E5518;
  --ouro-claro:#C9A227;
  --ouro-fraco:#F5EFDF;
  --tinta:#1C1C1C;       /* 15,9:1 */
  --mut:#5A5A5A;         /* 6,9:1 */
  --linha:#E3DCC9;
  --fundo:#FAF8F3;
  --card:#FFFFFF;
  --ok:#1F5C2E;          /* 7,9:1 */
  --ok-bg:#EDF5EF;
  --alerta:#8A2B1F;      /* 7,2:1 */
  --alerta-bg:#FDF1EF;
  --aviso:#7A5B00;
  --aviso-bg:#FFF8E5;
  --info:#1A4E7A;
  --info-bg:#EEF4FA;
  --nav:#2A2318;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--tinta);background:var(--fundo)}
h1,h2,h3{margin:0;line-height:1.25}
a{color:var(--ouro-forte)}
:focus-visible{outline:3px solid #0B5FFF;outline-offset:2px;border-radius:4px}

/* ---------- tarja de ambiente (P-706): some na impressao ---------- */
.tarja{position:fixed;top:0;left:0;right:0;height:26px;background:var(--alerta);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;
  justify-content:center;z-index:60}

/* ---------- casca: menu lateral fixo + conteudo. 2 filhos, sempre (P-531) ---------- */
.app{display:grid;grid-template-columns:216px 1fr;min-height:100vh;padding-top:26px}
.app>*{min-width:0}

.side{background:var(--nav);color:#EDE7D8;padding:14px 0 30px;position:sticky;top:26px;height:calc(100vh - 26px);overflow-y:auto}
.marca{display:flex;align-items:center;gap:9px;padding:0 16px 14px;border-bottom:1px solid #3E3524;margin-bottom:10px}
.logo{width:38px;height:38px;border-radius:50%;background:var(--ouro-claro);color:#2A2318;
  display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto}
.marca b{font-size:13px;display:block;line-height:1.2}
.marca span{font-size:10.5px;color:#B9AE93;letter-spacing:.05em}
.side h6{margin:14px 16px 5px;font-size:10px;letter-spacing:.09em;color:#8E8570;font-weight:700}
.side a{display:flex;align-items:center;gap:9px;padding:9px 16px;color:#EDE7D8;text-decoration:none;
  font-size:13.5px;min-height:44px;border-left:3px solid transparent}
.side a:hover{background:#37301F}
.side a[aria-current="page"]{background:#463C27;border-left-color:var(--ouro-claro);font-weight:600}
.side a .ic{width:17px;text-align:center;opacity:.85;flex:0 0 auto}
.side .trava{display:flex;align-items:center;gap:9px;padding:9px 16px;color:#8E8570;font-size:13.5px;min-height:44px;cursor:not-allowed}

.main{padding:18px 22px 60px;max-width:1180px}
.topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.topo h1{font-size:21px;color:var(--ouro-forte)}
.topo p{margin:3px 0 0;color:var(--mut);font-size:13px}

.card{background:var(--card);border:1px solid var(--linha);border-radius:10px;padding:16px;margin-bottom:14px}
.card>*{min-width:0}
.card h2{font-size:15px;color:var(--ouro-forte);margin-bottom:3px}
.card h3{font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.g2>*,.g3>*,.g4>*{min-width:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  padding:10px 16px;border-radius:7px;border:1px solid var(--ouro);background:var(--ouro);
  color:#fff;font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.btn.sec{background:#fff;color:var(--ouro-forte)}
.btn.peq{min-height:44px;padding:8px 12px;font-size:13px}   /* 44px e o piso do P-108, nao 36 */
.btn.perigo{background:#fff;color:var(--alerta);border-color:var(--alerta)}
.btn:hover{filter:brightness(1.07)}

label{display:block;font-weight:600;font-size:13.5px;margin-bottom:4px}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid #B8B0A0;border-radius:6px;
  font:inherit;font-size:16px;min-height:44px;background:#fff;color:var(--tinta)}
.campo{margin-bottom:13px}
.dica{font-size:12px;color:var(--mut);margin:6px 0 0}
input+.dica,select+.dica{margin-top:5px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);
  padding:7px 8px;border-bottom:2px solid var(--linha);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid #F0EBE0;vertical-align:middle}
tr:last-child td{border-bottom:0}
.tw{overflow-x:auto;position:relative}
.tw table{min-width:560px}
.tw[data-rola="1"]::after{content:"arraste para o lado \2192";position:sticky;left:0;bottom:0;
  display:block;font-size:11px;color:var(--ouro-forte);background:var(--ouro-fraco);
  padding:3px 8px;border-radius:0 0 7px 0;width:max-content}   /* sem piso, a tabela encolhe ate o texto invadir a coluna vizinha
                                em vez de rolar. Foi o defeito achado no print da comanda. */
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* .num carrega nowrap porque numero nao pode quebrar. Mas .num.dica e NOTA,
   nao numero: com nowrap ela estourava a tabela e vazava 96px na horizontal
   a 360px, e o vazamento nasce fora do .tw, entao nem rolagem salvava. */
.num.dica{white-space:normal}
code{background:#F4F1E9;border:1px solid var(--linha);border-radius:4px;padding:1px 5px;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace}

.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap}
.t-agendado{background:#EDEDED;color:#333}
.t-confirmado{background:var(--info-bg);color:var(--info)}
.t-checkin{background:var(--aviso-bg);color:var(--aviso)}
.t-atend{background:#E9E2F5;color:#4A3078}
.t-concl{background:var(--ok-bg);color:var(--ok)}
.t-entregue{background:#DDEEE1;color:#14411F}
.t-faltou{background:var(--alerta-bg);color:var(--alerta)}
.t-cancel{background:#F0F0F0;color:#666;text-decoration:line-through}
.t-ouro{background:var(--ouro-fraco);color:var(--ouro-forte)}

.alerta{background:var(--alerta-bg);border:1px solid #E0B5AE;border-left:5px solid var(--alerta);
  border-radius:7px;padding:12px 14px;margin-bottom:13px}
.alerta b{color:var(--alerta)}
.aviso{background:var(--aviso-bg);border:1px solid #E6D194;border-left:5px solid var(--ouro);border-radius:7px;padding:12px 14px;margin-bottom:13px}
.bom{background:var(--ok-bg);border:1px solid #B4D3BC;border-left:5px solid var(--ok);border-radius:7px;padding:12px 14px;margin-bottom:13px}
.buraco{background:#F7F5F0;border:1px dashed #C2B79C;border-radius:7px;padding:14px;color:var(--mut);font-size:13.5px}
.buraco b{color:var(--tinta)}

.kpi{background:var(--card);border:1px solid var(--linha);border-radius:10px;padding:13px 15px}
.kpi .rot{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:5px}
.kpi .val{font-size:23px;font-weight:800;color:var(--ouro-forte);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .sub{font-size:12px;color:var(--mut);margin-top:3px}
.kpi.destaque{border-color:var(--ouro);border-width:2px;background:#FFFDF7}
.kpi.risco .val{color:var(--alerta)}
.kpi.bom .val{color:var(--ok)}

.nota{background:#FFFDF7;border:1px dashed var(--ouro-claro);border-radius:8px;padding:11px 13px;
  font-size:12.5px;color:var(--ouro-forte);margin-bottom:13px}
.nota b{color:var(--ouro-forte)}

/* barra de mockup */
.mock-bar{background:var(--nav);color:#EDE7D8;padding:9px 22px;font-size:12.5px;display:flex;
  gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;position:sticky;top:26px;z-index:50}
.mock-bar select{width:auto;min-height:36px;padding:5px 9px;font-size:13px}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  /* O menu vira CHIPS QUE QUEBRAM LINHA, nao rolagem horizontal.
     Duas razoes, e as duas doeram antes:
     1. container de scroll dentro de item de grid estoura o scrollWidth da raiz
        e produz vazamento horizontal na pagina inteira (E-023, P-524);
     2. menu que rola na horizontal esconde item, e o usuario nao descobre.
        Foi o achado de gravidade alta do Portal Colmeia: menu de celular
        inalcancavel. Aqui todo item fica visivel e alcancavel por Tab. */
  .side{position:static;height:auto;display:flex;flex-wrap:wrap;overflow:visible;padding:8px;gap:4px}
  .side .marca,.side h6{display:none}
  .side a,.side .trava{flex:0 0 auto;white-space:nowrap;border-left:0;border:1px solid #4A3F2B;
    border-radius:7px;padding:7px 11px;min-height:44px;font-size:12.5px}
  .side a[aria-current="page"]{border-left:0;border-color:var(--ouro-claro);background:#463C27}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .main{padding:14px 12px 50px}
  .topo h1{font-size:19px}
  .kpi .val{font-size:20px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.tarja,.side,.mock-bar{display:none}.app{grid-template-columns:1fr;padding-top:0}.card{break-inside:avoid}}

/* ===== painel de fila: quadro de operacao ===== */
.fila-prox{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.btn.grande{min-height:64px;padding:16px 26px;font-size:17px;
  -webkit-tap-highlight-color:transparent;user-select:none}
/* resposta no :active e nao no :hover. Em toque nao existe hover, e ele
   deixa botao "grudado" aceso. Mesmo motivo do controle usado no escuro (P-2307). */
.btn:active{background:var(--ouro-forte);transform:translateY(1px)}
.btn.sec:active{background:var(--ouro-fraco)}

.fila-quadro{align-items:start}
.col-fila{background:#F4F1E9;border:1px solid var(--linha);border-radius:10px;padding:10px}
.col-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.06em;font-weight:800;color:var(--mut);
  padding:2px 4px 9px;border-bottom:2px solid var(--linha);margin-bottom:10px}
.col-cab b{font-size:17px;color:var(--ouro-forte)}
.pcard{background:#fff;border:1px solid var(--linha);border-left:4px solid var(--linha);
  border-radius:8px;padding:11px;margin-bottom:9px}
.pcard.atencao{border-left-color:var(--aviso)}
.pcard.ativo{border-left-color:#4A3078;background:#FBFAFF}
.pcard.pronto{border-left-color:var(--ok);background:#F7FBF8}
.pcard.saida{border-left-color:var(--info)}
.pnome{font-size:16px;font-weight:800;color:var(--tinta);margin-bottom:3px}
.pserv{font-size:13px;color:var(--tinta);margin-bottom:3px}
.pfase{font-size:12px;color:#4A3078;font-weight:700;margin-bottom:2px}
.ptempo{font-size:12px;color:var(--mut);font-weight:700}
.ptempo.alto{color:var(--alerta)}
.pobs{font-size:11.5px;color:var(--mut);margin-top:3px}
.pbarra{height:6px;background:#E6E1D5;border-radius:4px;overflow:hidden;margin:7px 0 2px}
.pbarra span{display:block;height:100%;background:#4A3078}

/* ===== pagina do tutor: superficie publica ===== */
.fone{max-width:360px;margin:0 auto;border:9px solid #2A2318;border-radius:26px;overflow:hidden;background:#fff}
.fone-topo{background:#2A2318;color:#B9AE93;font-size:11px;text-align:center;padding:5px 8px}
.fone-tela{padding:14px 15px 20px;background:var(--fundo)}
.tfoto{background:#EFEADE;border:1px dashed #C2B79C;border-radius:10px;height:150px;
  display:grid;place-items:center;text-align:center;color:var(--mut);font-size:12.5px}
.linha-t{border-left:2px solid var(--linha);margin-left:9px;padding-left:0}
.lt{position:relative;padding:0 0 15px 20px;font-size:13.5px}
.lt i{position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--linha)}
.lt b{display:block;color:var(--mut);font-weight:600}
.lt span{font-size:11.5px;color:var(--mut)}
.lt.feito i{background:var(--ok);border-color:var(--ok)}
.lt.feito b{color:var(--tinta)}
.lt.agora i{background:var(--ouro);border-color:var(--ouro);box-shadow:0 0 0 4px var(--ouro-fraco)}
.lt.agora b{color:var(--ouro-forte);font-weight:800;font-size:15px}
@media(max-width:900px){.fone{border-width:0;max-width:100%;border-radius:0}}

/* ===== calendario do mes ===== */
.cal-topo{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.cal-leg{display:flex;gap:13px;flex-wrap:wrap;font-size:12px;color:var(--mut)}
.cal-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.lg-bt{background:var(--ouro)}
.lg-ht{background:var(--info)}
.lg-cr{background:var(--ok)}
.lg-fe{background:#C8C2B4}
.cal-cab{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.cal-cab span{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--mut);text-align:center;padding:4px 0}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal>*{min-width:0}
.dia{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:7px 7px 8px;min-height:104px}
.dia.fora{background:#F6F4EE;color:var(--mut)}
.dia.hoje{border:2px solid var(--ouro);background:#FFFDF7}
.dia>b{display:block;font-size:14px;margin-bottom:5px}
.dia>b small{font-size:10px;font-weight:400;color:var(--mut)}
.oc{font-size:11.5px;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums}
.oc i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:0}
.oc.cheio{color:var(--alerta);font-weight:800}
.fech{font-size:11px;color:var(--mut);font-style:italic}
.vazio{font-size:11px;color:var(--mut);font-style:italic}
.hosp{font-size:10.5px;background:var(--info-bg);color:var(--info);border-radius:4px;
  padding:2px 5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hosp.cont{background:#DCE8F3;color:#3A6E9A}
.hosp.fim{background:#D4E3F0;color:var(--info);font-weight:700}
.vac{font-size:10.5px;background:var(--aviso-bg);color:var(--aviso);border-radius:4px;padding:2px 5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt{font-size:10.5px;background:var(--ouro-fraco);color:var(--ouro-forte);border-radius:4px;padding:2px 5px;margin-top:4px}
td.livre{color:var(--mut);font-style:italic;background:#FAFAF7}
/* A 360px a grade de 7 colunas da 45px por dia, e nada cabe.
   Vira lista vertical de dias, que e legivel de verdade no celular. */
@media(max-width:820px){
  .cal-cab{display:none}
  .cal{grid-template-columns:1fr}
  .dia{min-height:0;display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center}
  .dia>b{margin:0;min-width:52px}
  .dia.fora{display:none}
}

/* ===== modo tv: superficie de exibicao, lida a 3 metros ===== */
.tv{background:#1A1610;color:#F2ECDC;border-radius:12px;padding:20px 22px 0;
  border:8px solid #0D0B08;overflow:hidden;position:relative}
.tv *{min-width:0}
.tv-topo{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid #3A3325}
.tv-marca{display:flex;align-items:center;gap:11px;font-size:19px}
.tv-logo{width:40px;height:40px;border-radius:50%;background:var(--ouro-claro);color:#1A1610;
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto}
.tv-rel{text-align:right;line-height:1.1}
.tv-rel b{font-size:34px;color:var(--ouro-claro);font-variant-numeric:tabular-nums;display:block}
.tv-rel span{font-size:13px;color:#A79C82}

.tv-prox{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  background:#231D14;border:2px solid var(--ouro-claro);border-radius:10px;padding:16px 20px;margin:16px 0}
.tv-rot{font-size:12px;letter-spacing:.12em;color:var(--ouro-claro);font-weight:800;display:block;margin-bottom:5px}
.tv-prox-nome{font-size:44px;font-weight:800;color:#FFF7E2;line-height:1}
.tv-prox-nome em{font-size:19px;font-style:normal;background:var(--ouro-claro);color:#1A1610;
  padding:2px 10px;border-radius:20px;vertical-align:middle;margin-left:9px}
.tv-prox-sub{font-size:17px;color:#C9BFA6;margin-top:7px}
.tv-alerta{background:#4A1A12;border:2px solid #C4553F;border-radius:9px;padding:11px 16px;
  color:#FFC9BC;font-weight:800;font-size:17px;line-height:1.3;text-align:right}
.tv-alerta span{display:block;font-weight:400;font-size:14px;color:#E0A798;margin-top:3px}

.tv-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.tv-cols.tres{grid-template-columns:repeat(3,1fr)}
.tv-col{background:#231D14;border-radius:10px;padding:12px}
.tv-cab{font-size:12px;letter-spacing:.09em;font-weight:800;color:#A79C82;
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:9px;border-bottom:1px solid #3A3325;margin-bottom:11px}
.tv-cab b{font-size:21px;color:var(--ouro-claro)}
.tv-item{border-left:4px solid #3A3325;padding:2px 0 2px 11px;margin-bottom:13px}
.tv-item.at{border-left-color:#D9A441}
.tv-item.ativo{border-left-color:#9B87D6}
.tv-item.pronto{border-left-color:#6FBF84}
.tv-nome{display:block;font-size:27px;font-weight:800;color:#FFF7E2;line-height:1.1}
.tv-inf{display:block;font-size:14px;color:#C9BFA6;margin-top:3px}
.tv-t{display:block;font-size:14px;color:#A79C82;margin-top:2px;font-weight:700}
.tv-t.alto{color:#F0907A}
.tv-vago{font-size:14px;color:#8A8069;font-style:italic;border:1px dashed #3A3325;
  border-radius:8px;padding:11px;text-align:center}

.tv-rodape{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  border-top:1px solid #3A3325;padding:12px 0;font-size:14px;color:#A79C82}
.tv-live{display:flex;align-items:center;gap:7px;color:#6FBF84;font-weight:800;font-size:13px;letter-spacing:.07em}
.tv-live i{width:9px;height:9px;border-radius:50%;background:#6FBF84;display:block}

.tv-manual{background:#0D0B08;margin:0 -22px;padding:11px 22px;display:flex;gap:18px;
  flex-wrap:wrap;font-size:12.5px;color:#8A8069}
.tv-manual b{color:#C9BFA6}
.tv.publica .tv-nome{font-size:31px}

@media(max-width:900px){
  .tv{padding:14px 14px 0;border-width:5px}
  .tv-cols,.tv-cols.tres{grid-template-columns:1fr}
  .tv-prox-nome{font-size:34px}
  .tv-alerta{text-align:left}
  .tv-manual{margin:0 -14px;padding:11px 14px}
}

/* ===== modulos como produto ===== */
.card.mod{display:flex;flex-direction:column}
.card.mod.on{border-color:var(--ouro);border-width:2px}
.card.mod.off{background:#F7F5F0}
.card.mod.off h2,.card.mod.off .mod-sub{color:var(--mut)}
.mod-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.mod-ic{font-size:25px;line-height:1}
.mod-sub{font-size:12px;color:var(--mut);margin:3px 0 11px}
.mod-lista{margin:0;padding-left:17px;font-size:13px;line-height:1.7;flex:1}
.mod-lista li{margin-bottom:2px}
.mod-pe{display:flex;justify-content:space-between;gap:9px;border-top:1px solid var(--linha);
  margin-top:12px;padding-top:9px;font-size:12.5px;color:var(--mut)}
.mod-pe b{color:var(--ouro-forte)}
.card.mod.peq .mod-lista{font-size:12.5px;line-height:1.6}

.vis-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tela{display:none}
.tela.ativa{display:block}

/* ===== PDV, estoque e analise ===== */
.pdv{display:grid;grid-template-columns:1fr 380px;gap:14px;align-items:start}
.pdv-busca{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pdv-busca input{flex:1 1 240px}
.tecla{display:inline-block;background:#F4F1E9;border:1px solid var(--linha);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;font-size:11px;font-weight:700;color:var(--mut);
  font-family:ui-monospace,Menlo,Consolas,monospace}
.gride{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.prod{background:#fff;border:1px solid var(--linha);border-radius:9px;padding:11px;text-align:left;
  cursor:pointer;min-height:82px;font:inherit;color:inherit;display:block;width:100%}
.prod:active{background:var(--ouro-fraco);border-color:var(--ouro)}
.prod .pn,.prod .pp,.prod .pe{display:block}
.prod .pn{font-weight:700;font-size:13.5px;line-height:1.25;margin-bottom:4px}
.prod .pp{color:var(--ouro-forte);font-weight:800;font-variant-numeric:tabular-nums}
.prod .pe{font-size:11.5px;color:var(--mut);margin-top:3px}
.prod.zerado{opacity:.55;background:#F7F5F0}
.prod.zerado .pe{color:var(--alerta);font-weight:700}
.cupom{background:#fff;border:2px solid var(--ouro);border-radius:10px;padding:13px;position:sticky;top:82px}
.cl{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #F0EBE0;font-size:13.5px}
.cl .cq{color:var(--mut);font-size:12px}
.ctot{display:flex;justify-content:space-between;gap:10px;font-size:19px;font-weight:800;
  color:var(--ouro-forte);padding:11px 0 4px;border-top:2px solid var(--linha);margin-top:6px;
  font-variant-numeric:tabular-nums}
.pgs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}
.pg{background:#F4F1E9;border:1px solid var(--linha);border-radius:8px;padding:9px;font-size:12.5px;
  font-weight:700;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:inherit;color:inherit;width:100%}
.pg.on{background:var(--ouro-fraco);border-color:var(--ouro);color:var(--ouro-forte)}

/* graficos, SVG puro. Sem CDN: o arquivo tem que abrir offline (P-336) */
.graf{width:100%;height:auto;display:block;overflow:visible}
.graf .eixo{stroke:#E6E1D5;stroke-width:1}
.graf .bar{fill:var(--ouro)}
.graf .bar2{fill:#C9BFA6}
.graf .rot{font-size:10px;fill:#6E6455}
.graf .val{font-size:10px;fill:#5C4A17;font-weight:700}
.graf .ln{fill:none;stroke:#4A3078;stroke-width:2.5;stroke-linejoin:round}
.graf .pt{fill:#4A3078}
.graf .meta{stroke:var(--alerta);stroke-width:1.5;stroke-dasharray:5 4}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-top:8px}
.legenda span{display:flex;align-items:center;gap:5px}
.legenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* mapa de calor: divs sem texto, so cor. title da a leitura */
.mapa{display:grid;grid-template-columns:auto repeat(12,1fr);gap:3px;font-size:10.5px;align-items:center}
.mapa .mh{color:var(--mut);text-align:center;font-size:10px}
.mapa .ml{color:var(--mut);padding-right:6px;white-space:nowrap;font-weight:700}
.mapa i{display:block;height:22px;border-radius:3px;background:#F0EBE0}
.mapa i.q1{background:#EFE4C4}.mapa i.q2{background:#E3CE92}.mapa i.q3{background:#D4B25C}
.mapa i.q4{background:#B8912F}.mapa i.q5{background:#8A6B18}
.tw .mapa{min-width:520px}

.barh{display:grid;grid-template-columns:150px 1fr 78px;gap:9px;align-items:center;
  font-size:13px;padding:5px 0}
.barh .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barh .b{height:17px;background:#F0EBE0;border-radius:4px;overflow:hidden}
.barh .b i{display:block;height:100%;background:var(--ouro);border-radius:4px}
.barh .b i.neg{background:#C08A7E}
.barh .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}

.escolha{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.esc{border:1px solid var(--linha);border-radius:9px;padding:11px 12px;background:#fff;display:block}
.esc.on{border-color:var(--ouro);border-width:2px;background:#FFFDF7}
.esc .en{font-weight:700;font-size:13.5px;margin-bottom:3px}
.esc .ed{font-size:12px;color:var(--mut)}
@media(max-width:900px){
  .pdv{grid-template-columns:1fr}
  .cupom{position:static}
  .barh{grid-template-columns:1fr;gap:3px}
  .barh .v{text-align:left}
}


/* O menu de celular com 26 itens virava uma parede: era preciso rolar o menu
   inteiro para chegar no conteudo. Vira <details> recolhido abaixo de 900px.
   Continua sendo HTML nativo, alcancavel por Tab e por leitor de tela, e no
   desktop o summary some e o menu fica sempre aberto. */
.side summary{display:none}
.side details{display:block}
@media(max-width:900px){
  .side details{display:flex;flex-wrap:wrap;gap:4px;width:100%}
  .side summary{display:flex;align-items:center;gap:8px;flex:1 0 100%;
    min-height:44px;padding:9px 12px;border:1px solid #4A3F2B;border-radius:7px;
    color:#EDE7D8;font-weight:700;font-size:13.5px;cursor:pointer;list-style:none}
  .side summary::-webkit-details-marker{display:none}
  /* [ERRO] Sem esta linha o recolhimento NAO acontece: .side a e
     .side .trava tem display:flex, e display explicito no filho vence a
     ocultacao que o navegador aplica ao conteudo de <details> fechado.
     O menu ficava inteiro na tela mesmo com open=false, e o teste nao
     acusava porque so media o miolo, nunca o menu. Dois bugs, um
     visivel e outro no proprio teste. */
  .side details:not([open]) > *:not(summary){display:none}
  .side summary::after{content:"\25BE";margin-left:auto}
  .side details[open] summary::after{content:"\25B4"}
  .side details[open] summary{margin-bottom:4px}
}