/* =====================================================================
   Design System — Gestão DecorColors
   =====================================================================
   Grafite + dourado/diamante, herdado dos dashboards da loja.

   DOIS TEMAS, UMA PALETA. O escuro é o padrão (é o que a loja já
   conhece); o claro é o MESMO desenho com os papéis invertidos, não
   outra identidade. Quem troca é o botão da barra de cima, e o
   navegador lembra da escolha por pessoa.

   A regra que faz isso funcionar: NENHUMA cor fixa fora daqui. Se um
   #hex aparecer numa tela, ele fica preto no tema claro e ninguém
   descobre até alguém reclamar. As 14 telas que tinham foram
   convertidas em 22/08 — a folha impressa do orçamento é a única
   exceção, e de propósito: papel não tem tema.
   ===================================================================== */

:root{
  /* ---- superfícies (do fundo pra frente) ---- */
  --bg:#0d0f12; --bg2:#14171c; --card:#181c22;
  --campo:#0a0c0f;                    /* input, code, bloco "o que fazer" */
  --linha:#252a32; --linha2:#1c2027; --linha-forte:#3a414f;
  --hover:#1f242c;

  /* ---- texto ---- */
  --texto:#e8eaed; --texto2:#9aa3ad; --texto3:#6b7480;

  /* ---- marca ---- */
  --ouro:#c9a227; --ouro2:#e8c34a; --ouro-fundo:#a8871f;
  --sobre-ouro:#0d0f12;               /* o que se escreve EM CIMA do dourado */
  --diamante:#7fd4e8;

  /* ---- estado ---- */
  --verde:#3fb950; --amarelo:#d29922; --vermelho:#f85149; --roxo:#a371f7;
  --vermelho-txt:#ffa198;             /* vermelho legível em texto corrido */

  /* ---- fundos suaves (selo, chip, faixa) ----
     Guardados como token porque no claro eles precisam de MAIS opacidade:
     uma cor a 13% some no branco e o selo vira texto solto. */
  --ouro-suave:rgba(201,162,39,.13);
  --verde-suave:rgba(63,185,80,.15);
  --amarelo-suave:rgba(210,153,34,.15);
  --vermelho-suave:rgba(248,81,73,.15);
  --diamante-suave:rgba(127,212,232,.13);
  --roxo-suave:rgba(163,113,247,.15);
  --cinza-suave:rgba(154,163,173,.13);

  /* ---- resto ---- */
  --raio:12px;
  --sombra:0 4px 20px rgba(0,0,0,.4);

  /* O card não é cor chapada: é um degradê de cima pra baixo. No escuro
     ele quase não se nota — serve só pra tirar o ar de retângulo morto.
     No claro ele é o que SEPARA o card do fundo (ver o tema claro). */
  --card-grad:linear-gradient(158deg,#1c2129 0%,#181c22 55%,#15181e 100%);
  --card-sombra:0 1px 2px rgba(0,0,0,.28);
  --brilho-login:#1a1508;             /* o halo atrás da caixa de login */
  --fora:rgba(0,0,0,.16);             /* linha que saiu do faturamento */
  --esquema:dark;                     /* calendário do input[type=date] */
  --lateral-larg:230px;
}

/* =====================================================================
   TEMA CLARO
   =====================================================================
   Não é "o escuro clareado": o dourado precisou ESCURECER pra continuar
   legível. #e8c34a em fundo branco dá 1,8:1 de contraste — é um texto
   que existe na tela e não se lê. Aqui ele vira #8a6d10 (5,6:1) e o
   papel de "dourado claro" passa pro fundo do selo.
   ===================================================================== */
[data-tema="claro"]{
  --bg:#f2f4f7; --bg2:#ffffff; --card:#ffffff;
  --campo:#ffffff;
  --linha:#dde2e9; --linha2:#eef1f5; --linha-forte:#b6bfcc;
  --hover:#f0f3f7;

  --texto:#141a21; --texto2:#4a5462; --texto3:#77818f;

  --ouro:#8a6d10; --ouro2:#7a5f0c; --ouro-fundo:#6d5309;
  --sobre-ouro:#ffffff;
  --diamante:#0d6e86;

  --verde:#1a7f37; --amarelo:#8a6100; --vermelho:#c0362c; --roxo:#6b3fd4;
  --vermelho-txt:#a52e25;

  --ouro-suave:rgba(138,109,16,.11);
  --verde-suave:rgba(26,127,55,.12);
  --amarelo-suave:rgba(138,97,0,.13);
  --vermelho-suave:rgba(192,54,44,.11);
  --diamante-suave:rgba(13,110,134,.11);
  --roxo-suave:rgba(107,63,212,.11);
  --cinza-suave:rgba(74,84,98,.10);

  --sombra:0 1px 3px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.06);

  /* Branco no branco (24/08): o fundo é #f2f4f7 e o card era #ffffff
     chapado — a diferença existia no código e não na vista, e a tela
     virava uma folha só. O degradê desce pra um cinza de leve e a
     sombra levanta o card do fundo: a borda deixa de ser a única coisa
     dizendo onde um começa e o outro acaba. */
  --card-grad:linear-gradient(158deg,#ffffff 0%,#fbfcfe 52%,#f5f7fb 100%);
  --card-sombra:0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.05);
  --brilho-login:#fbf6e4;
  --fora:rgba(20,26,33,.05);
  --esquema:light;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--texto);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}

a{color:var(--ouro2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------- LOGIN */
.login-tela{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:radial-gradient(ellipse at top,var(--brilho-login) 0%,var(--bg) 55%);
}
.login-caixa{
  width:100%; max-width:400px;
  background:var(--card); border:1px solid var(--linha);
  border-radius:16px; padding:40px 34px; box-shadow:var(--sombra);
}
.login-marca{text-align:center;margin-bottom:30px}
.login-marca img{height:46px;width:auto;margin:0 auto;display:block}
.login-marca p{font-size:.82rem;color:var(--texto3);margin-top:12px}

.campo{margin-bottom:18px}
.campo label{
  display:block;font-size:.78rem;color:var(--texto2);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px;
}
.campo input{
  width:100%; padding:12px 14px;
  background:var(--campo); border:1px solid var(--linha); border-radius:9px;
  color:var(--texto); font-size:.95rem; font-family:inherit;
  transition:border-color .15s;
}
.campo input:focus{outline:none;border-color:var(--ouro)}

.botao{
  width:100%; padding:12px; margin-top:8px;
  background:linear-gradient(135deg,var(--ouro),var(--ouro-fundo));
  border:none; border-radius:9px;
  color:var(--sobre-ouro); font-size:.95rem; font-weight:700; font-family:inherit;
  cursor:pointer; transition:filter .15s;
}
.botao:hover{filter:brightness(1.1)}
.botao:active{transform:translateY(1px)}

.erro{
  background:var(--vermelho-suave); border:1px solid color-mix(in srgb, var(--vermelho) 45%, transparent);
  border-radius:9px; padding:11px 14px; margin-bottom:20px;
  color:var(--vermelho-txt); font-size:.87rem;
}

/* =====================================================================
   CHASSI — barra lateral + barra de cima
   =====================================================================
   Antes eram 12 links numa fila horizontal no topo. Em 1366px (a tela
   dos PCs da loja) eles já brigavam por espaço, e cada módulo novo
   empurrava o vizinho pra fora. Na vertical cabe crescer, e o agrupamento
   diz A QUE ÁREA cada tela pertence — "Pedido" sozinho no meio de uma
   fila não conta que é estoque.
   ===================================================================== */
.app{display:flex; min-height:100vh}

/* ---------------------------------------------------------- LATERAL */
.lateral{
  flex:0 0 var(--lateral-larg); width:var(--lateral-larg);
  background:var(--bg2); border-right:1px solid var(--linha);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  transition:flex-basis .16s, width .16s;
}
.lateral-marca{
  display:flex; align-items:center;
  padding:0 16px; height:58px; flex:0 0 58px;
  border-bottom:1px solid var(--linha);
  overflow:hidden;
}
.marca-logo{display:flex; align-items:center; text-decoration:none}
.marca-logo:hover{text-decoration:none; opacity:.85}
/* ⚠️ O `display` de cada logo é decidido AQUI, uma imagem de cada vez, e
   nunca num `.marca-logo img` geral. Um seletor de duas partes
   (classe + tag) pesa mais que a classe sozinha do `.logo-simbolo`, então
   o `display:block` do conjunto vencia o `display:none` do símbolo e a
   barra mostrava o logo inteiro E o diamante ao lado. */
.marca-logo img{width:auto}
.logo-cheio{display:block; height:25px}
.logo-simbolo{display:none; height:26px}   /* só quando a barra encolhe */

.lateral-menu{flex:1; overflow-y:auto; padding:12px 0 18px}
.lateral-menu::-webkit-scrollbar{width:8px}
.lateral-menu::-webkit-scrollbar-thumb{background:var(--linha);border-radius:8px}

.grupo-rot{
  padding:16px 18px 6px; font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; color:var(--texto3);
  white-space:nowrap; overflow:hidden;
}

.lateral-menu a{
  display:flex; align-items:center; gap:11px;
  padding:9px 18px; margin:1px 0;
  color:var(--texto2); font-size:.88rem; text-decoration:none;
  border-left:3px solid transparent; white-space:nowrap;
  transition:background .13s, color .13s;
}
.lateral-menu a:hover{background:var(--hover); color:var(--texto); text-decoration:none}
.lateral-menu a.ativo{
  background:var(--ouro-suave); color:var(--ouro2);
  border-left-color:var(--ouro); font-weight:600;
}
.lateral-menu a svg{flex:0 0 18px; width:18px; height:18px}
.lateral-menu a span{overflow:hidden; text-overflow:ellipsis}

/* Encolhida: só os ícones. A escolha fica no navegador de cada pessoa. */
[data-menu="encolhido"] .lateral{--lateral-larg:62px}
[data-menu="encolhido"] .logo-cheio{display:none}
[data-menu="encolhido"] .logo-simbolo{display:block}
[data-menu="encolhido"] .lateral-marca{padding:0; justify-content:center}
[data-menu="encolhido"] .lateral-menu a span,
[data-menu="encolhido"] .grupo-rot{display:none}
[data-menu="encolhido"] .lateral-menu a{justify-content:center; padding:11px 0; gap:0}
[data-menu="encolhido"] .grupo-rot{
  display:block; padding:10px 0 6px; text-indent:-9999px; position:relative;
}
[data-menu="encolhido"] .grupo-rot::after{
  content:''; position:absolute; left:14px; right:14px; top:50%;
  height:1px; background:var(--linha);
}

/* Alça na borda da barra, na altura do primeiro item. Fica no mesmo lugar
   aberta ou encolhida — e sem disputar espaço com o logo, que é o que
   fazia o botão sumir pra fora nos 62px do modo encolhido. */
.botao-encolher{
  position:absolute; z-index:5; right:-11px; top:74px;
  width:22px; height:22px; padding:0; border-radius:50%;
  background:var(--bg2); border:1px solid var(--linha); color:var(--texto3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-family:inherit; transition:.13s;
}
.botao-encolher:hover{color:var(--ouro2); border-color:var(--ouro)}
[data-menu="encolhido"] .botao-encolher{transform:rotate(180deg)}

/* ---------------------------------------------------------- PAINEL */
.painel{flex:1; min-width:0; display:flex; flex-direction:column}

.barra-topo{
  height:58px; flex:0 0 58px;
  background:var(--bg2); border-bottom:1px solid var(--linha);
  display:flex; align-items:center; gap:14px; padding:0 22px;
  position:sticky; top:0; z-index:50;
}
.barra-titulo{font-size:1.02rem; font-weight:600; letter-spacing:-.2px}
.barra-titulo small{
  display:block; font-size:.74rem; font-weight:400; color:var(--texto3);
  letter-spacing:0; margin-top:-2px;
}
.barra-espaco{flex:1}

.barra-acao{
  background:none; border:1px solid transparent; color:var(--texto2);
  cursor:pointer; padding:7px; border-radius:8px; display:flex;
  font-family:inherit; text-decoration:none;
}
.barra-acao:hover{background:var(--hover); color:var(--texto); text-decoration:none}
.barra-acao svg{width:18px; height:18px}

.barra-usuario{
  display:flex; align-items:center; gap:9px;
  font-size:.85rem; color:var(--texto2);
}
.barra-usuario .perfil{
  background:var(--ouro-suave); color:var(--ouro2);
  padding:4px 11px; border-radius:99px; font-size:.79rem; font-weight:600;
  text-decoration:none;
}
.barra-usuario .perfil:hover{text-decoration:none; filter:brightness(1.12)}

/* O ícone de sol/lua: só um dos dois aparece, conforme o tema em uso. */
[data-tema="claro"] .so-escuro{display:none}
:root:not([data-tema="claro"]) .so-claro{display:none}

.conteudo{max-width:1280px; margin:0 auto; width:100%; padding:26px 24px 60px}

/* ---------------------------------------------------------- CELULAR */
.botao-menu{display:none}

@media(max-width:860px){
  .botao-menu{
    display:flex; background:none; border:none; color:var(--texto2);
    cursor:pointer; padding:7px; border-radius:8px; font-family:inherit;
  }
  .botao-menu svg{width:20px; height:20px}

  /* A lateral sai da frente e volta por cima — em tela de celular ela
     comeria metade da largura útil se continuasse empurrando. */
  .lateral{
    position:fixed; z-index:80; left:0; top:0;
    transform:translateX(-100%); transition:transform .18s;
    box-shadow:var(--sombra);
  }
  .app.menu-aberto .lateral{transform:translateX(0)}
  .app.menu-aberto::after{
    content:''; position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.5);
  }
  [data-menu="encolhido"] .lateral{--lateral-larg:230px}
  [data-menu="encolhido"] .lateral-menu a span,
  [data-menu="encolhido"] .lateral-marca b,
  [data-menu="encolhido"] .grupo-rot{display:block}
  [data-menu="encolhido"] .lateral-menu a{justify-content:flex-start; padding:9px 18px; gap:11px}
  .botao-encolher{display:none}
  .conteudo{padding:18px 15px 50px}
  .barra-topo{padding:0 14px; gap:10px}
}

/* ---------------------------------------------------------- CARDS */
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--card-grad); border:1px solid var(--linha);
  border-radius:var(--raio); padding:22px;
  box-shadow:var(--card-sombra);
}
.card.clicavel{cursor:pointer;transition:border-color .15s,transform .15s}
.card.clicavel:hover{border-color:var(--ouro);transform:translateY(-2px)}

/* Título de seção: o texto e uma linha que atravessa o resto da largura. */
h2.secao{
  font-size:1.1rem;color:var(--ouro2);margin:30px 0 14px;
  display:flex;align-items:center;gap:9px;
}
h2.secao::after{content:'';flex:1;height:1px;background:var(--linha)}
h2.secao:first-child{margin-top:4px}

/* ---------------------------------------------------------- KPI
   A cor aqui QUER dizer alguma coisa: verde = no rumo, amarelo =
   atenção, vermelho = problema, dourado = número da marca (faturamento),
   cinza = informação sem estado. Card colorido só pra ficar bonito
   ensina o olho a ignorar cor — e aí o vermelho que importa passa
   despercebido junto com o resto. */
.kpi{border-left:3px solid var(--linha)}
.kpi .rot{font-size:.72rem;color:var(--texto3);text-transform:uppercase;letter-spacing:.8px}
.kpi .num{font-size:2rem;font-weight:800;margin:6px 0 2px;letter-spacing:-1px;
          font-variant-numeric:tabular-nums}
.kpi .obs{font-size:.8rem;color:var(--texto2);line-height:1.5}

.kpi.ouro    {border-left-color:var(--ouro);     --kpi-tinta:var(--ouro-suave)}
.kpi.verde   {border-left-color:var(--verde);    --kpi-tinta:var(--verde-suave)}
.kpi.amarelo {border-left-color:var(--amarelo);  --kpi-tinta:var(--amarelo-suave)}
.kpi.vermelho{border-left-color:var(--vermelho); --kpi-tinta:var(--vermelho-suave)}
.kpi.diamante{border-left-color:var(--diamante); --kpi-tinta:var(--diamante-suave)}
.kpi.ouro     .num{color:var(--ouro2)}
.kpi.verde    .num{color:var(--verde)}
.kpi.amarelo  .num{color:var(--amarelo)}
.kpi.vermelho .num{color:var(--vermelho)}
.kpi.diamante .num{color:var(--diamante)}
/* Sem cor não é um estado neutro: é "ninguém disse". Fica cinza e SEM tinta,
   senão o card sem informação disputa atenção com o que tem. */
.kpi.apagado .num{color:var(--texto3)}
.kpi.apagado{--kpi-tinta:transparent}

/* A LÂMINA DE COR NO CARD (24/08/2026, pedido de quem usa)
   A barra de 3px na esquerda já dizia o estado, e ela some quando os cards
   estão lado a lado numa fileira de quatro: o olho compara os RETÂNGULOS, e
   quatro retângulos iguais parecem quatro coisas iguais. A lâmina dá o mesmo
   recado à distância, sem pedir leitura.

   ⚠️ É lâmina, não fundo chapado: nasce no topo e se dissolve antes da
   metade. Card inteiro pintado vira semáforo, e aí o vermelho que importa
   passa despercebido junto com o resto — que é a regra escrita logo acima e
   continua valendo. O que muda é a dose, não o princípio.

   ⚠️ E só entra em card que TEM estado. `.card` sem classe de cor continua
   neutro: a tinta é informação, não decoração. */
.card.kpi{
  background:
    linear-gradient(158deg, var(--kpi-tinta,transparent) 0%, transparent 52%),
    var(--card-grad);
}

/* O card "Meta do mês" da home não precisa mais de regra própria: ele é um
   `.kpi` com classe de estado, e a lâmina acima já o cobre. A classe
   `kpi-meta` continua no template só como nome — não custa nada e diz o que
   aquele card é. */

/* A seta de comparação: sobe verde, desce vermelha, e o texto ao lado
   diz contra o quê — número sozinho com seta não informa nada. */
.tend{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:.79rem}
.tend.sobe{color:var(--verde)}
.tend.desce{color:var(--vermelho)}

/* ---------------------------------------------------------- TABELA */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{
  text-align:left;padding:10px;color:var(--texto3);font-weight:600;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;
  border-bottom:1px solid var(--linha);
}
td{padding:10px;border-bottom:1px solid var(--linha2)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--hover)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- AVISOS */
.aviso{
  border-radius:10px;padding:16px 18px;margin-bottom:14px;
  border:1px solid var(--linha);border-left-width:4px;
  background:var(--card-grad);
  box-shadow:var(--card-sombra);
}
.aviso.info{border-left-color:var(--diamante)}
.aviso.ok{border-left-color:var(--verde)}
.aviso.atencao{border-left-color:var(--amarelo)}
.aviso.critico{border-left-color:var(--vermelho)}
.aviso h4{font-size:.93rem;margin-bottom:4px}
.aviso p{font-size:.85rem;color:var(--texto2)}

.selo{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.73rem;font-weight:600}
.selo.verde{background:var(--verde-suave);color:var(--verde)}
.selo.amarelo{background:var(--amarelo-suave);color:var(--amarelo)}
.selo.vermelho{background:var(--vermelho-suave);color:var(--vermelho)}
.selo.ouro{background:var(--ouro-suave);color:var(--ouro2)}
.selo.diamante{background:var(--diamante-suave);color:var(--diamante)}
.selo.cinza{background:var(--cinza-suave);color:var(--texto2)}
.selo.roxo{background:var(--roxo-suave);color:var(--roxo)}

/* --------------------------------------------- MÓDULO VENDAS (dia 5) */
/* Seletor de período: as três telas do módulo usam o mesmo. */
.filtro-periodo{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;
}
.pilula{
  display:inline-block;padding:6px 13px;border-radius:99px;
  border:1px solid var(--linha);background:var(--card);
  color:var(--texto2);font-size:.82rem;text-decoration:none;transition:.15s;
}
.pilula:hover{border-color:var(--ouro);color:var(--texto);text-decoration:none}
.pilula.ativo{background:var(--ouro-suave);border-color:var(--ouro);color:var(--ouro2)}
.botao-pilula{cursor:pointer;font-family:inherit}
.filtro-periodo .separador{flex:1}
.filtro-periodo label{font-size:.8rem;color:var(--texto3);display:flex;align-items:center;gap:6px}
.filtro-periodo input[type=date]{
  background:var(--campo);border:1px solid var(--linha);border-radius:8px;
  color:var(--texto);padding:5px 9px;font-family:inherit;font-size:.82rem;
  color-scheme:var(--esquema);
}

/* Ações da semana — é o bloco que o João lê primeiro, então ele tem peso. */
.acoes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:900px){.acoes{grid-template-columns:1fr}}

.acao{
  background:var(--card-grad);box-shadow:var(--card-sombra);border:1px solid var(--linha);
  border-left:4px solid var(--linha);border-radius:var(--raio);padding:20px 22px;
}
.acao.critico{border-left-color:var(--vermelho)}
.acao.atencao{border-left-color:var(--amarelo)}
.acao.info{border-left-color:var(--diamante)}
.acao.ok{border-left-color:var(--verde)}

.acao-topo{display:flex;gap:14px;align-items:flex-start}
.acao-ordem{
  flex:0 0 28px;height:28px;border-radius:50%;
  background:var(--ouro-suave);color:var(--ouro2);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700;
}
.acao h4{font-size:.95rem;margin-bottom:2px}
.acao-numero{font-size:1.55rem;font-weight:800;letter-spacing:-.5px;color:var(--ouro2)}
.acao-texto{font-size:.87rem;color:var(--texto2);margin:12px 0 10px}
.acao-fazer{
  font-size:.85rem;color:var(--texto);background:var(--campo);
  border-radius:9px;padding:11px 13px;
}
.acao-fazer strong{color:var(--ouro2)}
.acao-link{display:inline-block;margin-top:11px;font-size:.83rem}

.card.destacado{border-color:var(--ouro)}
.titulo-card{font-size:.95rem;margin-bottom:12px;color:var(--ouro2)}
.nota{font-size:.78rem;color:var(--texto3);margin-top:14px;line-height:1.5}

code{
  background:var(--campo);padding:2px 7px;border-radius:5px;
  font-family:Consolas,monospace;font-size:.85em;color:var(--ouro2);
}

.rodape{
  margin-top:44px;padding-top:20px;border-top:1px solid var(--linha);
  text-align:center;color:var(--texto3);font-size:.78rem;
}

/* ===================================================================
   BLOCO DA META — topo da /vendas (lapidação 05/08, achado nº 3)

   É o primeiro bloco da tela por decisão do João: "esse é o número que
   mais me interessa". O `--meta-cor` muda com o estado (atrás, no ritmo,
   à frente) e tinge a borda, a barra e o número grande — pra dar o
   recado antes da leitura.
   =================================================================== */
/* O fundo diz o estado antes da leitura (24/08). A borda, a barra e o
   número grande já mudavam de cor; o bloco em si continuava neutro, e
   quem batia o olho de longe via um retângulo igual ao de todo mês.
   Agora o degradê nasce tingido: uma lâmina da cor do estado no topo,
   que se dissolve antes da metade. É a MESMA regra que já decide o
   resto (`ritmo.estado`, comparado com o esperado até hoje) — nada aqui
   inventa um segundo critério de "está bom" ou "está ruim".
   ⚠️ A tinta vem dos tokens `-suave`, que têm mais opacidade no tema
   claro de propósito: cor a 11% some no branco e o bloco volta a ser
   igual aos outros. */
.meta-bloco{
  background:
    linear-gradient(158deg, var(--meta-tinta,transparent) 0%, transparent 58%),
    var(--card-grad);
  border:1px solid var(--linha);
  border-left:4px solid var(--meta-cor,var(--linha));
  border-radius:var(--raio); padding:20px 22px; margin:14px 0 26px;
  box-shadow:var(--card-sombra);
}
.meta-bloco.verde   { --meta-cor:var(--verde);    --meta-tinta:var(--verde-suave) }
.meta-bloco.amarelo { --meta-cor:var(--amarelo);  --meta-tinta:var(--amarelo-suave) }
.meta-bloco.vermelho{ --meta-cor:var(--vermelho); --meta-tinta:var(--vermelho-suave) }

.meta-cabeca{
  display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start;
  justify-content:space-between;
}
.meta-rotulo{
  display:block; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.6px; color:var(--texto3);
}
.meta-valor{font-size:1.4rem; font-weight:700; letter-spacing:-.4px; margin:2px 0}
.meta-estado{align-self:center; font-size:.8rem; font-weight:700; letter-spacing:.5px}

.meta-barra{
  height:8px; background:var(--bg2); border-radius:999px;
  overflow:hidden; margin:16px 0 18px;
}
.meta-barra-cheia{height:100%; background:var(--meta-cor,var(--ouro)); border-radius:999px}

/* O número grande: o que fazer HOJE. */
.meta-destaque{
  text-align:center; padding:16px 0 12px;
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
}
.meta-numerao{
  font-size:2.6rem; font-weight:800; letter-spacing:-1.5px;
  color:var(--meta-cor,var(--ouro2)); line-height:1.1; margin:2px 0;
}

.meta-linhas{
  display:flex; flex-wrap:wrap; gap:28px; margin:16px 0 4px;
}
.meta-linhas strong{font-size:1.05rem}

.meta-frase{margin:10px 0 0; line-height:1.5}
.meta-rodape{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--linha);
  font-size:.82rem; color:var(--texto3); line-height:1.5;
}
.secao-sub{margin:-8px 0 14px; color:var(--texto3); font-size:.88rem}

@media (max-width:640px){
  .meta-cabeca{gap:16px}
  .meta-numerao{font-size:2.1rem}
  .meta-linhas{gap:18px}
}

/* Linha de filtros da Curva ABC (lapidação 05/08) */
.filtro-linha{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 4px;
}
.filtro-rot{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--texto3);
}
.filtro-linha .pilula.ativa{
  background:var(--ouro); color:var(--sobre-ouro); border-color:var(--ouro); font-weight:700;
}
.filtro-linha select.pilula{max-width:280px}

/* ===================================================================
   BUSCA DE PRODUTO (06/08)

   Substitui o <select> com 690 opções. No balcão, com o cliente na
   frente, ninguém rola lista — digita.
   =================================================================== */
.busca-produto{position:relative}

.bp-lista{
  position:absolute; z-index:30; left:0; right:0;
  background:var(--card); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra);
  max-height:320px; overflow-y:auto; margin-top:4px;
}
.bp-item{
  padding:10px 12px; cursor:pointer; display:flex; gap:10px;
  justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--linha);
}
.bp-item:last-child{border-bottom:none}
.bp-item:hover, .bp-item.marcado{background:var(--hover)}

.bp-escolhido{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px 12px; background:var(--bg2);
  border:1px solid var(--linha); border-radius:var(--raio);
}
.bp-escolhido span:first-child{font-weight:600}

/* ===================================================================
   O PISO DE TODO CAMPO (24/08/2026)

   Até aqui cada tela vestia o próprio input no `style=` de dentro do
   HTML. Onde alguém esqueceu, o campo nasceu branco do navegador: eram
   14 deles — 10 na /contatos, 3 no /atendimento/historico e 1 no
   /contatos/importar — acendendo no meio do tema escuro como lanterna.
   Não eram as telas antigas: são as MAIS NOVAS (11/08 e 17/08), feitas
   depois do padrão, o que mostra que "lembrar de vestir cada campo" não
   é padrão, é sorte.

   Isto é o piso, não a roupa: vale pra qualquer campo, inclusive o que
   ninguém vestiu, e o `style=` de cada tela continua ganhando por cima
   (regra escrita no elemento pesa mais que folha de estilo). Também
   perde de propósito pra `.campo`, `.filtro-periodo` e `.conserto`, que
   já são mais específicas — nenhuma tela que hoje está certa muda.

   Ficam de fora os que não são caixa de digitar: botão, checkbox, radio
   e o arquivo — o `input[type=file]` é botão nativo, e pintar o fundo
   dele só suja o desenho que o Windows já faz.
   =================================================================== */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea{
  background:var(--campo); color:var(--texto);
  border:1px solid var(--linha); border-radius:8px;
  padding:7px 11px; font-family:inherit; font-size:.88rem;
  color-scheme:var(--esquema);
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):focus,
select:focus, textarea:focus{outline:none; border-color:var(--ouro)}

/* ===================================================================
   FORMULÁRIO — o padrão é <div class="campo"> com label e input DENTRO.
   As telas de 06/08 usaram class="campo" no próprio input, que não pega
   estilo nenhum: o label ficava na mesma linha e o campo, minúsculo.
   Isto faz select e textarea seguirem o mesmo visual do input, e aceita
   a classe no elemento também, pra não quebrar de novo por descuido.
   =================================================================== */
.campo select, .campo textarea,
select.campo, textarea.campo, input.campo{
  width:100%; padding:12px 14px;
  background:var(--bg2); color:var(--texto);
  border:1px solid var(--linha); border-radius:10px;
  font-size:.95rem; font-family:inherit;
}
.campo select:focus, .campo textarea:focus,
select.campo:focus, textarea.campo:focus, input.campo:focus{
  outline:none; border-color:var(--ouro);
}

/* Label solto (fora do <div class="campo">), como nas telas novas. */
label.rot{
  display:block; font-size:.78rem; color:var(--texto2);
  text-transform:uppercase; letter-spacing:.7px; margin-bottom:7px;
}

/* ⚠️ A grade (.g2/.g3/.g4) já existe lá em cima e vira 1 coluna em 900px.
   Só o mínimo é acrescentado aqui: sem `minmax(0, 1fr)` uma coluna com
   input longo estoura a largura da grade em vez de encolher. */
.g2, .g3, .g4{grid-template-columns:repeat(auto-fit, minmax(0, 1fr))}
.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:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ------------------------------------------------- TABELA QUE NÃO CABE
   ⚠️ Tabela larga rola DENTRO da própria caixa — a página nunca rola de lado.
   Quando o histórico ganhou a caixinha de seleção e a coluna "corrigir"
   (24/08), a tabela passou da largura da tela: a última coluna saiu cortada e
   apareceu barra horizontal na PÁGINA inteira, empurrando o cabeçalho e o
   menu junto. É o que a loja viu como "margens irregulares".

   ⚠️ A classe já era usada na tela de puxar e não existia aqui — usar nome de
   classe que ninguém definiu falha em silêncio: o HTML fica certo, o navegador
   ignora, e só se descobre quando a tabela cresce. */
.rolagem{
  overflow-x:auto;
  /* A borda vem pra cá porque, com rolagem, ela precisa acompanhar a caixa e
     não a tabela — senão some do lado direito ao rolar. */
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--card-grad); box-shadow:var(--card-sombra);
}
.rolagem > table{margin:0}

/* ⚠️ Dentro de um `.card` a moldura já existe — a rolagem não desenha outra,
   senão fica caixa dentro de caixa. E ela ESTICA até a borda do card (margem
   negativa do mesmo tamanho do padding): rolar dentro de uma moldura com
   margem desperdiçaria 44px de largura justamente quando o problema É falta
   de largura. */
/* Numa tabela de 12 colunas, 4px a menos de padding por lado devolvem ~100px
   de largura — é a diferença entre caber e rolar. Vale só dentro da rolagem:
   as tabelas curtas do resto do sistema continuam com o respiro maior. */
.rolagem table th, .rolagem table td{padding-left:10px; padding-right:10px}

/* As duas colunas que estouravam a largura do histórico.
   ⚠️ `white-space:nowrap` numa célula que ganhou botão dentro faz ela crescer
   sem limite: a de Registro foi de 138px pra 211px só por causa do "corrigir".
   O telefone tem o nome do cliente embaixo, e nome comprido esticava a coluna
   inteira — aqui ele corta com reticências e o título completo fica no hover. */
.col-tel{max-width:150px}
.col-tel > :first-child{white-space:nowrap}
.col-tel .nota{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px;
}
/* O selo e o "corrigir" ficam LADO A LADO, não empilhados: são duas coisas
   curtas, e empilhar as duas mais o "corrigido" fazia cada linha da tabela
   crescer três níveis. */
.col-registro{max-width:132px}
.col-registro .pilula{padding:3px 9px; font-size:.76rem}
.col-registro > .selo + .pilula{margin-left:6px; margin-top:0}
.col-registro .nota{font-size:.7rem; line-height:1.3; margin-top:3px}

.card > .rolagem{
  border:0; border-radius:0; background:none; box-shadow:none;
  margin:0 -22px -22px; padding:0 22px 22px;
}

/* ------------------------------------------------- BARRAS E LEGENDA
   O gráfico de barras do painel de atendimento. É div com largura em %, não
   SVG: barra horizontal não precisa de desenho, e assim ela reflui sozinha no
   celular e o leitor de tela lê o número do lado. */
.barras{display:flex; flex-direction:column; gap:9px}
.barra-linha{
  display:grid; grid-template-columns:minmax(96px,168px) 1fr 64px;
  align-items:center; gap:12px;
}
.barra-nome{
  font-size:.83rem; color:var(--texto2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barra-trilho{
  display:flex; height:15px; border-radius:999px; overflow:hidden;
  background:var(--linha2);
}
.barra-parte{height:100%; transition:width .2s}
.barra-parte.levou{background:var(--verde)}
.barra-parte.procurou{background:var(--amarelo)}
.barra-num{
  font-size:.83rem; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--texto2);
}
.barra-num b{color:var(--texto)}

.legenda{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:16px;
  font-size:.79rem; color:var(--texto2);
}
.legenda span{display:inline-flex; align-items:center; gap:6px}
.legenda .ponto{width:9px; height:9px; border-radius:3px; display:inline-block}
.legenda .ponto.levou{background:var(--verde)}
.legenda .ponto.procurou{background:var(--amarelo)}
.legenda .ponto.ouro{background:var(--ouro)}

@media(max-width:640px){
  .barra-linha{grid-template-columns:minmax(80px,110px) 1fr 52px; gap:8px}
}

/* ---------------------------------------------------------- CHIPS
   Marcar com o dedo, sem abrir lista. O radio/checkbox de verdade fica
   escondido dentro do <label>: o formulário continua funcionando sem uma
   linha de JavaScript, e o teclado navega como em qualquer form. */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:999px;
  border:1.5px solid var(--linha); background:var(--bg2);
  color:var(--texto2); font-size:.85rem; font-weight:600;
  cursor:pointer; user-select:none; transition:.13s;
}
.chip:hover{border-color:var(--linha-forte); color:var(--texto)}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip:has(input:checked){
  background:var(--ouro-suave); border-color:var(--ouro); color:var(--ouro2);
}
.chip.sim:has(input:checked){
  background:var(--verde-suave); border-color:var(--verde); color:var(--verde);
}
.chip.nao:has(input:checked){
  background:var(--vermelho-suave); border-color:var(--vermelho); color:var(--vermelho-txt);
}
.chip.alerta:has(input:checked){
  background:var(--vermelho-suave); border-color:var(--vermelho); color:var(--vermelho-txt);
}
.chip:has(input:focus-visible){outline:2px solid var(--diamante); outline-offset:2px}

/* Caixa de marcar solta, com o texto do lado (não é chip nem campo). */
.marca-caixa{
  display:flex; align-items:center; gap:8px; margin-top:8px;
  font-size:.83rem; color:var(--texto2); cursor:pointer;
}
.marca-caixa input{width:16px; height:16px; accent-color:var(--ouro)}

/* ⚠️ `:has()` só existe em navegador recente. A classe `.on` é posta pelo
   JS da tela e faz o mesmo, pra que o chip marcado apareça marcado também
   num Chrome atrasado — que é exatamente o cenário do PC de loja. */
.chip.on{background:var(--ouro-suave); border-color:var(--ouro); color:var(--ouro2)}
.chip.sim.on{background:var(--verde-suave); border-color:var(--verde); color:var(--verde)}
.chip.nao.on{background:var(--vermelho-suave); border-color:var(--vermelho); color:var(--vermelho-txt)}
.chip.alerta.on{background:var(--vermelho-suave); border-color:var(--vermelho); color:var(--vermelho-txt)}

/* ===================================================================
   EXTRATO DE VENDAS (14/08)

   Uma tabela por dia, e a linha que não conta precisa PARECER que não
   conta — riscada e apagada. A tela existe pra alguém reconhecer o
   próprio dia de trabalho; se cancelada e válida tiverem o mesmo peso
   visual, o olho passa reto pelas duas.
   =================================================================== */
.extrato-dia{padding:0; margin-bottom:16px; overflow:hidden}

.extrato-cabeca{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:13px 18px; background:var(--bg2);
  border-bottom:1px solid var(--linha);
}
.extrato-cabeca strong{font-size:1rem; color:var(--ouro2)}
.extrato-semana{font-size:.78rem; color:var(--texto3); margin-left:8px}
.extrato-total{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}
.extrato-total .extrato-semana{display:block; margin:0; font-weight:400}

.extrato-dia table{font-size:.86rem}
.extrato-dia th{padding-left:18px}
.extrato-dia td{padding-left:18px; vertical-align:top}

.extrato-itens{color:var(--texto2); font-size:.82rem; line-height:1.45}
.extrato-operacao{
  display:block; font-size:.74rem; color:var(--texto3); font-style:italic;
}

/* A linha que saiu do faturamento: fica, mas fica apagada. */
.linha-fora td{color:var(--texto3); background:var(--fora)}
.linha-fora .extrato-itens{color:var(--texto3)}
.riscado{text-decoration:line-through; opacity:.75}

.extrato-motivo{
  font-size:.78rem; color:var(--texto2); margin-top:6px; line-height:1.45;
  max-width:280px;
}
.extrato-motivo span{display:block; color:var(--texto3); font-size:.73rem}

/* "não existiu" abre o formulário no lugar, sem JS e sem sair da página:
   o motivo é escrito com a linha da venda ainda na frente dos olhos. */
details.marcar{margin-top:6px}
details.marcar summary{
  cursor:pointer; font-size:.76rem; color:var(--texto3);
  list-style:none; display:inline-block;
  padding:2px 8px; border:1px dashed var(--linha); border-radius:99px;
}
details.marcar summary::-webkit-details-marker{display:none}
details.marcar summary:hover{color:var(--vermelho); border-color:var(--vermelho)}
details.marcar[open] summary{color:var(--vermelho); border-color:var(--vermelho)}
details.marcar textarea{
  width:100%; min-width:230px; margin:8px 0 6px; padding:8px 10px;
  background:var(--bg2); color:var(--texto);
  border:1px solid var(--linha); border-radius:8px;
  font-size:.82rem; font-family:inherit; resize:vertical;
}
details.marcar textarea:focus{outline:none; border-color:var(--ouro)}
details.marcar .botao{padding:7px 12px; font-size:.8rem; margin-top:0}

.link-botao{
  background:none; border:none; padding:0; margin-top:6px;
  color:var(--texto3); font-size:.76rem; font-family:inherit;
  cursor:pointer; text-decoration:underline;
}
.link-botao:hover{color:var(--ouro2)}

@media(max-width:900px){
  .extrato-dia td, .extrato-dia th{padding-left:10px}
  .extrato-itens{display:none}
}

/* ===================================================================
   CONSERTO NA LINHA (14/08) — a fila de cadastro deixou de mandar a
   pessoa pra outro sistema. O campo que resolve o problema fica na
   própria linha do problema: quem já está olhando a LONA errada não
   deveria ter que procurar onde se conserta a LONA.
   =================================================================== */
.conserto{margin-top:10px}
.conserto form{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.conserto-rot{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--texto3); width:100%;
}
.conserto input[type=text], .conserto input:not([type]){
  padding:8px 11px; min-width:120px; flex:1;
  background:var(--bg2); color:var(--texto);
  border:1px solid var(--linha); border-radius:8px;
  font-size:.85rem; font-family:inherit;
}
.conserto input:focus{outline:none; border-color:var(--ouro)}
.conserto .botao-pilula{white-space:nowrap}
.conserto-nota{
  font-size:.78rem; color:var(--texto3); margin-top:8px; line-height:1.5;
}

/* Na tabela dos "pra completar quando der" o formulário é apertado: uma
   linha só, sem o rótulo em cima. */
td .conserto{margin-top:0}
td .conserto .conserto-rot{display:none}
td .conserto input{min-width:96px; font-size:.8rem; padding:6px 9px}
td .conserto .botao-pilula{font-size:.78rem; padding:6px 10px}
td .conserto .conserto-nota{margin-top:6px}
td .conserto details.marcar{margin-top:6px}

/* ------------------------------------------------- EDIÇÃO EM MASSA
   A barra que aparece quando alguém marca linhas no histórico. Ela é
   `hidden` até ter escolha: barra de ação sempre visível vira paisagem, e
   a pessoa deixa de ver que ela mudou de estado. */
.massa{
  margin-top:16px; padding:16px 18px;
  background:var(--card-grad); box-shadow:var(--card-sombra);
  border:1px solid var(--linha); border-left:3px solid var(--ouro);
  border-radius:var(--raio);
  display:flex; flex-direction:column; gap:12px;
}
.massa-topo{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.massa-campos{display:flex; gap:20px; flex-wrap:wrap}
.massa-campo{
  display:flex; align-items:center; gap:8px;
  font-size:.85rem; color:var(--texto2);
}
.massa-campo select{max-width:230px}
/* Enquanto a caixinha do campo não é marcada, o controle fica apagado: é o
   que diz, sem texto, que campo não escolhido não vai ser alterado. */
.massa-campo:not(:has(> input:checked)) select,
.massa-campo:not(:has(> input:checked)) .chips{opacity:.4; pointer-events:none}