/* =====================================================================
   Design Ramsons · base.css
   Tokens + componentes para apps internos.
   Tema CLARO é o padrão; escuro só por escolha (data-theme="dark", ver base.js).
   Fonte padrão Ramsons (pilha do sistema). Vermelho só como marca e queda.
   Camadas: ajuste de tela vai em "telas", nunca empilhando remendo por cima.
   ===================================================================== */
@layer tokens, base, componentes, telas;

@layer tokens {
  :root {
    --fonte: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fundo: #F5F6F8; --superficie: #FFFFFF; --superficie-2: #F9FAFB;
    --linha: #E5E7EB; --linha-forte: #D1D5DB;
    --texto: #111827; --suave: #545D6B; --fraco: #646C78;
    --acento: #D91F2D; --acento-suave: #FCEBEC; --acento-texto: #B8182A;
    --prim-fundo: #2B3138; --prim-texto: #FFFFFF;
    --ok: #047857; --ok-suave: #E7F6EF;
    --atencao: #B45309; --atencao-suave: #FEF4E2;
    --erro: #B91C1C; --erro-suave: #FDEBEB;
    --info: #1D4ED8; --info-suave: #EAF0FD;
    --wa: #128C4A; --foco: #2563EB;
    /* dados: a cor diz o que o número é (ver references/cores-semanticas.md) */
    --barra-a: #10B981; --barra-b: #047857;      /* venda, receita, meta batida */
    --queda-a: #F87171; --queda-b: #DC2626;      /* devolução, cancelamento, queda */
    --volume-a: #60A5FA; --volume-b: #2563EB;    /* quantidade, clientes, pedidos */
    --serie-texto: #FFFFFF; --destaque: #F5B90F;  /* estrela do melhor período */
    --referencia: #9CA3AF;                        /* meta, período anterior */
    --serie-1: #DBE7FE; --serie-2: #A9C6FC; --serie-3: #6B9BF7; --serie-4: #3B74EE; --serie-5: #1E4FC4;
    --cat-1: #4F46E5; --cat-2: #0EA5E9; --cat-3: #10B981; --cat-4: #F59E0B; --cat-5: #EC4899; --cat-outros: #9CA3AF;
    --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
    --raio: 12px; --raio-p: 8px; --alvo: 44px;
    --sombra-1: 0 1px 2px #1118270d; --sombra-2: 0 8px 24px #11182714;
    --menu: 248px; --menu-recolhido: 72px; --topo: 64px; --topo-compacto: 52px;
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    --fundo: #0B0D10; --superficie: #14171C; --superficie-2: #1A1E24;
    --linha: #262B33; --linha-forte: #353B45;
    --texto: #F3F4F6; --suave: #9CA3AF; --fraco: #8B929E;
    --acento: #F0444F; --acento-suave: #3A1418; --acento-texto: #FF8088;
    --prim-fundo: #E5E7EB; --prim-texto: #111827;
    --ok: #34D399; --ok-suave: #0F2A20; --atencao: #FBBF24; --atencao-suave: #2E2410;
    --erro: #F87171; --erro-suave: #331515; --info: #93B4FF; --info-suave: #16223D;
    --wa: #2FBF6E; --foco: #93B4FF;
    --referencia: #6B7280;
    --serie-1: #16264A; --serie-2: #1F3A75; --serie-3: #2F58B0; --serie-4: #4F7FE6; --serie-5: #8FB2FA;
    --sombra-1: none; --sombra-2: 0 8px 24px #0006;
    color-scheme: dark;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  html { scroll-padding-top: calc(var(--topo) + 8px); }
  body { background: var(--fundo); color: var(--texto); font: 400 14px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
  h1 { font-size: clamp(20px, 1rem + .6vw, 26px); font-weight: 700; letter-spacing: -.01em; margin: 0; }
  h2 { font-size: 15px; font-weight: 700; margin: 0; }
  .num, .kpi b, td.num { font-variant-numeric: tabular-nums; }
  .rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fraco); }
  :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
  img, svg { max-width: 100%; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
}

@layer componentes {
  /* ---------- casca: menu lateral neutro, recolhível ---------- */
  .casca { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease; }
  .casca.recolhida { grid-template-columns: var(--menu-recolhido) minmax(0, 1fr); }
  .casca.sem-menu { grid-template-columns: 0 minmax(0, 1fr); }        /* modo apresentação */
  .casca.sem-menu .lateral { visibility: hidden; }
  .lateral > * { flex-shrink: 0; }   /* menu longo rola; logo e botão de recolher nunca são espremidos */
  .lateral { background: var(--superficie); border-right: 1px solid var(--linha); padding: var(--e3); display: flex; flex-direction: column; gap: var(--e1); position: sticky; top: 0; height: 100vh; overflow: hidden auto; overscroll-behavior: contain; }
  .lateral .marca { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 8px; font-weight: 700; white-space: nowrap; }
  .lateral .marca .recolher { margin-left: auto; }
  /* logo: nunca achata. Só uma dimensão fixa (altura), a outra é auto; contain segura a proporção */
  .lateral .marca .logo, .lateral .marca .logo-r { display: block; flex: none; height: 28px; width: auto; max-width: 100%; object-fit: contain; }
  .lateral .marca .logo-r { display: none; height: 32px; }           /* só o "R" da Ramsons, para o menu recolhido */
  .nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--raio-p); color: var(--suave); text-decoration: none; font-weight: 500; white-space: nowrap; }
  .nav-item svg { flex: none; width: 18px; height: 18px; }
  .nav-item:hover { background: var(--superficie-2); color: var(--texto); }
  .nav-item[aria-current="page"] { background: var(--superficie-2); color: var(--texto); font-weight: 600; }
  .nav-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--acento); } /* o único vermelho do menu */
  .nav-sub { display: grid; gap: 2px; margin: 2px 0 6px 21px; padding-left: 12px; border-left: 1px solid var(--linha); }
  .nav-sub .nav-item { min-height: 34px; font-size: 13.5px; }
  .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--acento-suave); color: var(--acento-texto); font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
  .lateral .pe { margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--linha); display: grid; gap: var(--e1); }
  /* recolhida: só ícones; nome aparece como dica, subitens somem */
  .casca.recolhida .nav-item { justify-content: center; padding: 0; }
  .casca.recolhida .nav-item > span, .casca.recolhida .nav-sub, .casca.recolhida .marca .nome, .casca.recolhida .pe .nome { display: none; }
  .casca.recolhida .badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 10px; }
  .casca.recolhida .marca { justify-content: center; flex-direction: column; }
  .casca.recolhida .marca .recolher { margin: 0; transform: scaleX(-1); }
  /* recolhida: troca a logo inteira pelo "R"; sem o "R", a logo inteira encolhe proporcional à largura */
  .casca.recolhida .marca:has(.logo-r) .logo { display: none; }
  .casca.recolhida .marca .logo-r { display: block; }
  .casca.recolhida .marca .logo { height: auto; width: 100%; max-width: calc(var(--menu-recolhido) - 2 * var(--e3)); }
  .conteudo { min-width: 0; }
  .miolo { padding: var(--e5) var(--e6); display: grid; gap: var(--e5); align-content: start; max-width: 1440px; }
  .fundo-menu { display: none; }
  @media (max-width: 900px) {
    .casca, .casca.recolhida { grid-template-columns: 1fr; }
    .lateral { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 40; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--sombra-2); }
    .casca.menu-aberto .lateral { transform: none; }
    .casca.menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; z-index: 35; background: #0006; }
    .casca.recolhida .nav-item > span, .casca.recolhida .nav-sub { display: revert; }
    .casca.recolhida .marca .logo, .casca.recolhida .marca:has(.logo-r) .logo { display: block; height: 28px; width: auto; max-width: 100%; }
    .casca.recolhida .marca .logo-r { display: none; }
    .miolo { padding: var(--e4); }
  }

  /* ---------- cabeçalho inteligente: fixo, encolhe ao rolar, some ao descer no celular ---------- */
  .topo-app { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--e3); height: var(--topo); padding: 0 var(--e6); background: color-mix(in srgb, var(--fundo) 92%, transparent); border-bottom: 1px solid transparent; transition: height .18s ease, transform .18s ease, border-color .18s; }
  .topo-app h1 { transition: font-size .18s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topo-app .resumo-filtro { display: none; }
  .topo-app .acoes { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }
  body.rolou .topo-app { height: var(--topo-compacto); border-bottom-color: var(--linha); background: var(--superficie); }
  body.rolou .topo-app h1 { font-size: 16px; }
  body.rolou .topo-app .resumo-filtro { display: inline-flex; }   /* "Set · 1 a 27 · Todas as lojas", clicável, volta aos filtros */
  .sentinela-topo { position: absolute; top: 0; height: 120px; width: 1px; pointer-events: none; }
  .topo-app .menu-btn { display: none; }
  @media (max-width: 900px) {
    .topo-app { padding: 0 var(--e4); }
    .topo-app .menu-btn { display: inline-flex; }
    body.esconde-topo .topo-app { transform: translateY(-100%); }
  }

  /* ---------- cabeçalhos de seção ---------- */
  .saudacao p { margin: 4px 0 0; color: var(--suave); }
  .sec-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }

  /* ---------- cartão ---------- */
  .card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e4) var(--e5); box-shadow: var(--sombra-1); min-width: 0; container-type: inline-size; contain: layout paint; }
  .card-cab { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); flex-wrap: wrap; }
  .card-cab .acoes { margin-left: auto; display: flex; gap: var(--e2); }
  .abaixo-dobra { content-visibility: auto; contain-intrinsic-size: auto 420px; }
  .grade { display: grid; gap: var(--e4); }
  .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grade-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  @media (max-width: 1199px) { .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-2-1 { grid-template-columns: 1fr; } }

  /* ---------- KPI: número proporcional ao cartão ---------- */
  .kpi { display: grid; gap: 6px; }
  .kpi .topo { display: flex; align-items: center; gap: 8px; color: var(--suave); font-weight: 600; }
  .kpi .periodo { margin-left: auto; font-size: 11.5px; color: var(--fraco); background: var(--superficie-2); border: 1px solid var(--linha); padding: 1px 8px; border-radius: 6px; white-space: nowrap; }
  .kpi b { font-size: clamp(22px, 9cqi, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
  .kpi .linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--fraco); }
  .delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .delta.sobe { background: var(--ok-suave); color: var(--ok); }
  .delta.desce { background: var(--erro-suave); color: var(--erro); }
  .delta.igual { background: var(--superficie-2); color: var(--suave); }
  .kpi.em-queda { box-shadow: inset 3px 0 0 var(--erro); }   /* queda relevante: marca na borda, sem pintar o cartão */

  /* ---------- meta (progresso com esperado até hoje) ---------- */
  .meta { position: relative; height: 10px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--linha); }
  .meta > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--barra-b), var(--barra-a)); }
  .meta.abaixo > i { background: var(--atencao); }              /* abaixo do esperado até hoje */
  .meta > s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texto); border-radius: 2px; } /* esperado até hoje */

  /* ---------- alertas ---------- */
  .alertas { display: grid; gap: var(--e2); }
  .alerta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--linha-forte); font-size: 13.5px; }
  .alerta .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; }
  .alerta b { color: var(--texto); }
  .alerta p { margin: 0; color: var(--suave); }
  .alerta.queda { border-left-color: var(--erro); } .alerta.queda .ico { background: var(--erro-suave); color: var(--erro); }
  .alerta.atencao { border-left-color: var(--atencao); } .alerta.atencao .ico { background: var(--atencao-suave); color: var(--atencao); }
  .alerta.info { border-left-color: var(--info); } .alerta.info .ico { background: var(--info-suave); color: var(--info); }
  .alerta.celebra { border-left-color: var(--ok); } .alerta.celebra .ico { background: var(--ok-suave); color: var(--ok); }

  /* ---------- botões e controles ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: 600 13.5px/1 var(--fonte); cursor: pointer; text-decoration: none; white-space: nowrap; }
  .btn:hover { border-color: var(--texto); }
  .btn.primario { background: var(--prim-fundo); border-color: var(--prim-fundo); color: var(--prim-texto); }
  .btn.primario:hover { filter: brightness(1.15); }
  .btn.fantasma { border-color: transparent; background: transparent; color: var(--suave); }
  .btn.fantasma:hover { background: var(--superficie-2); color: var(--texto); }
  .btn.icone { width: 38px; padding: 0; }
  .btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
  @media (pointer: coarse) { .btn { height: var(--alvo); } .btn.icone { width: var(--alvo); } }
  .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--superficie-2); border: 1px solid var(--linha); }
  .seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--suave); font: 600 13px/1 var(--fonte); cursor: pointer; }
  .seg button[aria-pressed="true"] { background: var(--prim-fundo); color: var(--prim-texto); }
  .pill-f { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: 600 13.5px/1 var(--fonte); cursor: pointer; }
  .pill-f.ativo { background: var(--prim-fundo); border-color: var(--prim-fundo); color: var(--prim-texto); }
  .campo { height: 38px; padding: 0 12px; border-radius: var(--raio-p); border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: inherit; min-width: 0; }
  .campo:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 20%, transparent); }

  /* ---------- filtros ---------- */
  .filtro-cab { display: flex; gap: var(--e4) var(--e5); flex-wrap: wrap; align-items: flex-end; padding: var(--e4) var(--e5); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
  .fc-grupo { display: grid; gap: 6px; }
  .fc-pills { display: flex; gap: 6px; flex-wrap: wrap; }
  .fc-limpar { margin-left: auto; }
  /* atalhos de período: um clique aplica; "Personalizar" abre as datas */
  .atalhos-periodo { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .atalhos-periodo .pill-f { flex: none; }
  .fc-ativos { display: flex; gap: 6px; flex-wrap: wrap; }
  .chip-filtro { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); font-size: 12.5px; font-weight: 600; color: var(--texto); }
  .chip-filtro button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--suave); cursor: pointer; }
  .chip-filtro button:hover { background: var(--linha); color: var(--texto); }
  .pill-f small { margin-left: 6px; color: inherit; opacity: .7; font-weight: 600; }

  /* ---------- etiquetas ---------- */
  .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .tag.ok { background: var(--ok-suave); color: var(--ok); }
  .tag.atencao { background: var(--atencao-suave); color: var(--atencao); }
  .tag.erro { background: var(--erro-suave); color: var(--erro); }
  .tag.info { background: var(--info-suave); color: var(--info); }
  .ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }

  /* ---------- tabela ---------- */
  .tabela-caixa { overflow-x: auto; margin: 0 calc(-1 * var(--e5)); }
  .tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .tabela th { position: sticky; top: 0; text-align: left; font-size: 12px; font-weight: 600; color: var(--suave); background: var(--superficie-2); padding: 10px var(--e5); border-block: 1px solid var(--linha); white-space: nowrap; }
  .tabela td { padding: 12px var(--e5); border-bottom: 1px solid var(--linha); }
  .tabela td.num, .tabela th.num { text-align: right; white-space: nowrap; }
  .tabela td.sobe { color: var(--ok); font-weight: 600; } .tabela td.desce { color: var(--erro); font-weight: 600; }
  .tabela tbody tr:hover { background: var(--superficie-2); }
  @media (max-width: 640px) {
    .tabela.vira-cartao thead { display: none; }
    .tabela.vira-cartao tr { display: grid; gap: 4px; padding: 12px var(--e4); border-bottom: 1px solid var(--linha); }
    .tabela.vira-cartao td { padding: 0; border: 0; }
    .tabela.vira-cartao td[data-rot]::before { content: attr(data-rot) " "; color: var(--fraco); font-size: 12px; }
  }

  /* ---------- colunas: valor a -90°, fonte proporcional à largura da barra ---------- */
  /* uso: <div class="colunas" style="--n:27">; a cor vem de .venda (padrão), .queda ou .volume */
  .colunas { --c-a: var(--barra-a); --c-b: var(--barra-b); container-type: inline-size; display: flex; align-items: flex-end; gap: clamp(2px, 1.2cqi, 8px); height: 210px; padding-top: 30px; }
  .colunas.queda { --c-a: var(--queda-a); --c-b: var(--queda-b); }
  .colunas.volume { --c-a: var(--volume-a); --c-b: var(--volume-b); }
  .colunas-caixa { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .colunas-caixa .colunas, .colunas-caixa .colunas-eixo { min-width: calc(var(--n, 12) * 18px); } /* barra nunca fica estreita demais para o rótulo */
  .colunas .col { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
  .colunas .col i { width: 100%; max-width: 44px; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px 6px 2px 2px; background-color: var(--c-b); background-image: linear-gradient(180deg, var(--c-a), var(--c-b)); transition: filter .15s; }
  .colunas .col:hover i { filter: brightness(1.1) saturate(1.1); }
  .colunas .col em { writing-mode: vertical-rl; transform: rotate(180deg); font-style: normal; line-height: 1; font-weight: 700; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums;
    font-size: clamp(10px, calc(100cqi / var(--n, 12) * .42), 15px); }
  .colunas .col i em { color: var(--serie-texto); padding: 7px 0; text-shadow: 0 1px 1px #0003; }
  .colunas .col em.fora { color: var(--texto); padding-bottom: 4px; }
  .colunas .col.top::after { content: "★"; position: absolute; top: -24px; color: var(--destaque); font-size: 14px; line-height: 1; } /* melhor período: estrela, sem trocar a cor */
  .colunas .col.top em.fora, .colunas .col.top i em { font-weight: 800; }
  .colunas .linha-meta { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--referencia); pointer-events: none; }
  .colunas-eixo { display: flex; gap: clamp(2px, 1.2cqi, 8px); margin-top: 6px; font-size: 11.5px; color: var(--fraco); }
  .colunas-eixo span { flex: 1; text-align: center; min-width: 0; overflow: hidden; }
  .colunas-total { margin-top: var(--e3); font-size: 13px; color: var(--suave); }
  .colunas-total b { color: var(--texto); }

  /* ---------- barras horizontais ranqueadas ---------- */
  .barras-h { display: grid; gap: 10px; }
  .barras-h .item { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
  .barras-h .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barras-h .trilho { height: 10px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
  .barras-h .trilho i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--barra-b), var(--barra-a)); }
  .barras-h.volume .trilho i { background: linear-gradient(90deg, var(--volume-b), var(--volume-a)); }
  .barras-h .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .barras-h .valor small { margin-left: 6px; font-weight: 700; }

  /* ---------- rosca (conic-gradient) com total no centro ---------- */
  .rosca-caixa { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--e5); align-items: center; }
  .rosca { width: 160px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
  .rosca::after { content: attr(data-total); width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font-weight: 700; font-size: 18px; text-align: center; }
  .legenda { display: grid; gap: 8px; font-size: 13px; margin: 0; padding: 0; }
  .legenda li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; list-style: none; }
  .legenda b { font-variant-numeric: tabular-nums; }
  .legenda small { color: var(--fraco); min-width: 38px; text-align: right; }
  @container (max-width: 380px) { .rosca-caixa { grid-template-columns: 1fr; justify-items: center; } }

  /* ---------- temperatura / barra 100% ---------- */
  .barra-100 { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--superficie-2); }
  .barra-100 i { display: flex; align-items: center; justify-content: center; color: #fff; font: 700 11.5px/1 var(--fonte); font-style: normal; min-width: 0; }
  .s-ativo { background: #047857; } .s-esfr { background: #B45309; } .s-frio { background: #1D4ED8; } .s-sem { background: #6B7280; }

  /* ---------- dica (só complementa) ---------- */
  .dica { position: fixed; z-index: 50; pointer-events: none; padding: 8px 10px; border-radius: var(--raio-p); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra-2); font-size: 12.5px; color: var(--texto); max-width: 260px; }

  /* ---------- estados ---------- */
  .esqueleto { background: linear-gradient(90deg, var(--superficie-2), var(--linha), var(--superficie-2)); background-size: 200% 100%; animation: brilho 1.2s linear infinite; border-radius: var(--raio-p); min-height: 14px; }
  @keyframes brilho { to { background-position: -200% 0; } }
  .vazio { padding: var(--e6) var(--e4); text-align: center; color: var(--suave); }
  .toast { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 60; padding: 12px 16px; border-radius: var(--raio-p); background: var(--prim-fundo); color: var(--prim-texto); font-weight: 600; box-shadow: var(--sombra-2); }

  /* ---------- início por tema ---------- */
  .inicio-temas { display: grid; gap: var(--e5); }
  .tema-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e3); }
  .atalho { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--superficie); color: var(--texto); text-decoration: none; transition: border-color .15s, transform .15s; }
  .atalho:hover { border-color: var(--linha-forte); transform: translateY(-1px); }
  .atalho .ico { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--superficie-2); color: var(--suave); }
  .atalho b { font-weight: 700; }
  .atalho span { font-size: 12.5px; color: var(--fraco); }

  /* ---------- modo apresentação (TV da diretoria): tudo maior, sem menu ---------- */
  .apresentacao { font-size: 16px; }
  .apresentacao .kpi b { font-size: clamp(28px, 11cqi, 48px); }
  .apresentacao .colunas { height: 300px; }

  /* ---------- transição entre telas (View Transitions, ver base.js) ---------- */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
}