/* Base visual das telas de demonstração do Sistema Grupo Canaan (Proposta Cecora Tecnologia).
   Tema por loja: o JS define --marca, --marca-tinta e --lateral no :root conforme ?loja=.
   Fontes: Fraunces (títulos), Instrument Sans (texto), Sofia Sans Condensed (números). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800;9..144,900&family=Instrument+Sans:wght@400;500;600;700&family=Sofia+Sans+Condensed:wght@500;600;700;800&display=swap');
:root{
  --marca:#F3E23E; --marca-tinta:#030403; --lateral:#1E2022; --lateral2:#26292b;
  --fundo:#F4F1EA; --papel:#FFFFFF; --tinta:#1B1C1D; --mudo:#6E6A62; --linha:rgba(27,28,29,.10);
  --ok:#1F9D57; --alerta:#E08A00; --erro:#D93A2B; --info:#2563EB;
  --f-tit:'Fraunces',Georgia,serif; --f-txt:'Instrument Sans',system-ui,sans-serif; --f-num:'Sofia Sans Condensed','Instrument Sans',sans-serif;
  --r:16px; --r-s:11px;
  --sombra:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -26px rgba(30,25,10,.45),0 4px 12px -6px rgba(30,25,10,.18);
  --sombra-f:0 30px 60px -30px rgba(30,25,10,.55),0 10px 20px -12px rgba(30,25,10,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:clip}
body{font-family:var(--f-txt);color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased;font-size:15px}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.num{font-family:var(--f-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.tit{font-family:var(--f-tit);font-weight:800;letter-spacing:-.01em;line-height:1.05}
/* app com barra lateral */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,var(--lateral),var(--lateral2));color:#fff;padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.side .marca{display:flex;align-items:center;gap:10px;padding:6px 6px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.side .marca img{height:44px;width:auto;max-width:150px;object-fit:contain}
.side a,.side button.item{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:rgba(255,255,255,.78);font-weight:600;font-size:14.5px;transition:background .2s,color .2s}
.side a:hover,.side button.item:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.on,.side button.item.on{background:color-mix(in srgb,var(--marca) 18%,transparent);color:#fff;box-shadow:inset 3px 0 0 var(--marca)}
.side svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.side .rodape{margin-top:auto;font-size:11.5px;opacity:.55;line-height:1.4;padding:8px}
.main{padding:22px clamp(16px,2.4vw,32px) 40px;min-width:0}
.topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.topo h1{font-family:var(--f-tit);font-weight:800;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.01em}
.topo .sub{color:var(--mudo);font-size:14px}
.topo .dir{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.app{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px}.side .marca{border:0;padding:0 8px 0 0;margin:0}.side .rodape{display:none}.side a,.side button.item{white-space:nowrap}}
/* cartões */
.card{position:relative;background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);padding:18px;box-shadow:var(--sombra);overflow:hidden}
.card.acento::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:var(--marca)}
.card h3{font-family:var(--f-tit);font-weight:800;font-size:18px;margin-bottom:4px}
.card .rot{font-size:12.5px;color:var(--mudo);font-weight:600}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-160%) skewX(-18deg);animation:sheen 4.5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{to{transform:translateX(380%) skewX(-18deg)}}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.kpi .v{font-family:var(--f-num);font-weight:800;font-size:clamp(28px,2.6vw,38px);line-height:1;margin-top:6px;white-space:nowrap}
.kpi .d{font-size:12.5px;font-weight:700;margin-top:6px}
.up{color:var(--ok)}.down{color:var(--erro)}
/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 16px;font-weight:700;font-size:14.5px;background:var(--marca);color:var(--marca-tinta);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--marca) 80%,#000);transition:transform .15s,filter .2s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.btn.esc{background:var(--tinta);color:#fff;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.btn.cl{background:var(--papel);color:var(--tinta);border:1px solid var(--linha);box-shadow:none}
.btn.ok{background:var(--ok);color:#fff}
.btn.grande{padding:16px 22px;font-size:17px;border-radius:14px}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* etiquetas de status */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:rgba(27,28,29,.06);white-space:nowrap}
.tag.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:#137a42}
.tag.alerta{background:color-mix(in srgb,var(--alerta) 15%,transparent);color:#9a5d00}
.tag.erro{background:color-mix(in srgb,var(--erro) 13%,transparent);color:#a8291d}
.tag.marca{background:color-mix(in srgb,var(--marca) 35%,transparent);color:var(--marca-tinta)}
.tag .pt{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pisca 1.6s infinite}
@keyframes pisca{50%{opacity:.25}}
/* tabelas */
.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mudo);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tab td{padding:11px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tab tr:hover td{background:rgba(27,28,29,.025)}
.tab .dir{text-align:right}
.rola{overflow-x:auto}
/* campos */
.campo{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--mudo)}
.campo input,.campo select,.campo textarea{border:1px solid var(--linha);border-radius:12px;padding:11px 12px;background:#fff;font-weight:500;font-size:15px;color:var(--tinta);outline:none;transition:border-color .2s,box-shadow .2s}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--marca);box-shadow:0 0 0 4px color-mix(in srgb,var(--marca) 25%,transparent)}
/* seletor de loja (tema por loja) */
.lojas{display:flex;gap:8px;flex-wrap:wrap}
.lojas button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--linha);font-weight:700;font-size:13px;transition:.2s}
.lojas button i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--linha)}
.lojas button.on{border-color:var(--tinta);box-shadow:0 6px 16px -10px rgba(0,0,0,.5)}
/* aviso de demonstração */
.demo-aviso{position:fixed;left:12px;bottom:12px;z-index:90;font-size:11.5px;font-weight:700;background:rgba(27,28,29,.82);color:#fff;border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px)}
/* toast */
.toast{position:fixed;right:18px;top:18px;z-index:100;display:flex;gap:12px;align-items:center;background:#1B1C1D;color:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--sombra-f);transform:translateY(-20px);opacity:0;transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .3s;max-width:360px}
.toast.on{transform:none;opacity:1}
.toast .ti{width:34px;height:34px;border-radius:10px;background:var(--marca);color:var(--marca-tinta);display:grid;place-items:center;flex:none}
.toast .ti svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.toast b{display:block;font-size:14.5px}.toast small{opacity:.7;font-size:12.5px}
/* entrada */
.entra{animation:entra .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra{from{transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01s!important}}