/* =====================================================================
   Ahead Shipping · Painel de Prospecção
   Paleta extraída do logo oficial:
     #007A65 verde-petróleo (wordmark)  ·  #B4CC02 lima (seta)
     #00A17A verde claro ("shipping")
   Tipografia do site: Roboto (texto) + Roboto Slab (títulos)
   ===================================================================== */

:root{
  --verde:#007A65;
  --verde-claro:#00A17A;
  --lima:#B4CC02;
  --verde-escuro:#005A4A;

  --fundo:#eef1f0;
  --superficie:#ffffff;
  --superficie-2:#f6f8f7;
  --borda:#d9e0dd;
  --borda-forte:#c3cecb;

  --texto:#17221f;
  --texto-2:#56655f;
  --texto-3:#869590;

  --ok:#0f7a52;      --ok-bg:#e0f0e8;
  --aviso:#8a6410;   --aviso-bg:#f8efd7;
  --erro:#9c2f23;    --erro-bg:#f7e2de;
  --info:#1d5c7a;    --info-bg:#dfeef5;

  --raio:8px;
  --sombra:0 1px 2px rgba(10,30,25,.06), 0 4px 14px rgba(10,30,25,.05);
  --largura-menu:244px;
  --fonte:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --fonte-titulo:"Roboto Slab",Georgia,serif;
  --fonte-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fundo:#0e1715;
    --superficie:#15201d;
    --superficie-2:#1b2724;
    --borda:#2a3a36;
    --borda-forte:#3a4d48;
    --texto:#e6ecea;
    --texto-2:#a3b3ae;
    --texto-3:#7d8f8a;
    --verde:#17a085;
    --verde-claro:#2cbb9b;
    --verde-escuro:#0c7a65;
    --ok:#56c795;    --ok-bg:#153026;
    --aviso:#d7ae4e; --aviso-bg:#2f2814;
    --erro:#e08573;  --erro-bg:#331d19;
    --info:#73b4d2;  --info-bg:#15262e;
    --sombra:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-tema="escuro"]{
  --fundo:#0e1715; --superficie:#15201d; --superficie-2:#1b2724;
  --borda:#2a3a36; --borda-forte:#3a4d48;
  --texto:#e6ecea; --texto-2:#a3b3ae; --texto-3:#7d8f8a;
  --verde:#17a085; --verde-claro:#2cbb9b; --verde-escuro:#0c7a65;
  --ok:#56c795; --ok-bg:#153026; --aviso:#d7ae4e; --aviso-bg:#2f2814;
  --erro:#e08573; --erro-bg:#331d19; --info:#73b4d2; --info-bg:#15262e;
  --sombra:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo); color:var(--texto);
  font-family:var(--fonte); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--verde-claro); outline-offset:2px; border-radius:4px;
}
h1,h2,h3,h4{font-family:var(--fonte-titulo);margin:0;line-height:1.22;text-wrap:balance}
h1{font-size:23px;font-weight:600}
h2{font-size:18px;font-weight:600}
h3{font-size:15.5px;font-weight:600}

/* ---------------------------------------------------------- estrutura */
.app{display:grid;grid-template-columns:var(--largura-menu) 1fr;min-height:100vh}

.menu{
  background:var(--verde); color:#fff;
  display:flex;flex-direction:column;gap:2px;
  padding:18px 12px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.menu__marca{display:flex;align-items:center;gap:10px;padding:4px 10px 18px}
.menu__marca img{width:132px;height:auto;display:block;filter:brightness(0) invert(1)}
.menu__grupo{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding:16px 12px 6px;
}
.menu a{
  display:flex;align-items:center;gap:9px;
  padding:8px 12px;border-radius:6px;color:rgba(255,255,255,.88);
  font-size:14px;text-decoration:none;transition:background .12s,color .12s;
}
.menu a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.menu a.ativo{background:var(--verde-escuro);color:#fff;box-shadow:inset 3px 0 0 var(--lima)}
.menu__icone{width:17px;height:17px;flex:none;opacity:.9}
.menu__rodape{margin-top:auto;padding:14px 12px 4px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.7)}
.menu__rodape strong{display:block;color:#fff;font-weight:500;font-size:13px}

.conteudo{display:flex;flex-direction:column;min-width:0}
.topo{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 26px;background:var(--superficie);border-bottom:1px solid var(--borda);
  position:sticky;top:0;z-index:20;
}
.topo__titulo{flex:1;min-width:200px}
.topo__titulo p{margin:2px 0 0;font-size:12.5px;color:var(--texto-2)}
.pagina{padding:22px 26px 60px;max-width:1500px;width:100%}

/* ---------------------------------------------------------- blocos */
.cartao{
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--raio);box-shadow:var(--sombra);
}
.cartao__cabeca{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--borda);
}
.cartao__cabeca h2,.cartao__cabeca h3{flex:1;min-width:140px}
.cartao__corpo{padding:18px}
.cartao__corpo--limpo{padding:0}

.grade{display:grid;gap:16px}
.grade--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grade--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grade--4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pilha{display:flex;flex-direction:column;gap:16px}
.linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cresce{flex:1;min-width:0}

/* ---------------------------------------------------------- KPI */
.kpi{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);
  padding:15px 17px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:5px;
}
.kpi__rotulo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.kpi__valor{font-family:var(--fonte-titulo);font-size:27px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.kpi__nota{font-size:12px;color:var(--texto-2)}
.kpi--destaque{border-left:4px solid var(--lima)}

/* ---------------------------------------------------------- tabela */
.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
table.tabela th,table.tabela td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--borda);vertical-align:middle}
table.tabela thead th{
  background:var(--superficie-2);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-3);font-weight:600;white-space:nowrap;position:sticky;top:0;z-index:1;
}
table.tabela tbody tr:hover{background:var(--superficie-2)}
table.tabela tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.principal{font-weight:500}
.sub{display:block;font-size:12px;color:var(--texto-2)}

/* ---------------------------------------------------------- selos */
.selo{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500;
  background:var(--superficie-2);color:var(--texto-2);border:1px solid var(--borda);
  white-space:nowrap;
}
.selo--ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.selo--aviso{background:var(--aviso-bg);color:var(--aviso);border-color:transparent}
.selo--erro{background:var(--erro-bg);color:var(--erro);border-color:transparent}
.selo--info{background:var(--info-bg);color:var(--info);border-color:transparent}
.selo--lima{background:color-mix(in srgb,var(--lima) 22%,transparent);color:#5c6b00;border-color:transparent}
@media (prefers-color-scheme: dark){:root:not([data-tema="claro"]) .selo--lima{color:var(--lima)}}
.selo--modal{font-family:var(--fonte-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase}

/* ---------------------------------------------------------- botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 15px;border-radius:6px;border:1px solid transparent;
  font-family:var(--fonte);font-size:13.5px;font-weight:500;line-height:1.2;
  cursor:pointer;background:var(--verde);color:#fff;text-decoration:none;
  transition:filter .12s,background .12s;
}
.btn:hover{filter:brightness(1.08);text-decoration:none;color:#fff}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn--fantasma{background:transparent;color:var(--texto);border-color:var(--borda-forte)}
.btn--fantasma:hover{background:var(--superficie-2);color:var(--texto)}
.btn--lima{background:var(--lima);color:#2d3500}
.btn--lima:hover{color:#2d3500}
.btn--perigo{background:var(--erro)}
.btn--peq{padding:5px 10px;font-size:12.5px}
.btn--bloco{width:100%}

/* ---------------------------------------------------------- formulário */
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo label,.rotulo{
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-2);font-weight:500;
}
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=number],.campo input[type=date],.campo input[type=time],
.campo input[type=datetime-local],.campo select,.campo textarea,
input.entrada,select.entrada,textarea.entrada{
  width:100%;padding:8px 11px;border:1px solid var(--borda-forte);border-radius:6px;
  background:var(--superficie);color:var(--texto);font-family:var(--fonte);font-size:14px;
}
.campo textarea{min-height:90px;resize:vertical}
.campo .ajuda{font-size:12px;color:var(--texto-3)}
.campo--erro input,.campo--erro select{border-color:var(--erro)}
fieldset{border:1px solid var(--borda);border-radius:var(--raio);padding:14px 16px;margin:0}
legend{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2);padding:0 6px}

.marcadores{display:flex;flex-wrap:wrap;gap:6px}
.marcador{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--borda-forte);border-radius:999px;font-size:12.5px;
  cursor:pointer;user-select:none;background:var(--superficie);
}
.marcador input{position:absolute;opacity:0;width:0;height:0}
.marcador:has(input:checked){background:var(--verde);border-color:var(--verde);color:#fff}
.marcador:has(input:focus-visible){outline:2px solid var(--verde-claro);outline-offset:2px}

/* ---------------------------------------------------------- avisos */
.aviso{
  display:flex;gap:10px;padding:11px 14px;border-radius:6px;font-size:13.5px;
  border:1px solid transparent;margin-bottom:14px;
}
.aviso--ok{background:var(--ok-bg);color:var(--ok)}
.aviso--erro{background:var(--erro-bg);color:var(--erro)}
.aviso--aviso{background:var(--aviso-bg);color:var(--aviso)}
.aviso--info{background:var(--info-bg);color:var(--info)}
.aviso a{color:inherit;text-decoration:underline}

/* ---------------------------------------------------------- filtros */
.filtros{position:sticky;top:0}
.filtros details{border-bottom:1px solid var(--borda)}
.filtros details:last-of-type{border-bottom:0}
.filtros summary{
  cursor:pointer;padding:11px 16px;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--texto-2);font-weight:500;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.filtros summary::-webkit-details-marker{display:none}
.filtros summary::after{content:"+";font-size:15px;color:var(--texto-3)}
.filtros details[open] summary::after{content:"−"}
.filtros details[open] summary{color:var(--verde)}
.filtros__corpo{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.contagem-viva{
  background:var(--superficie-2);border-top:1px solid var(--borda);
  padding:12px 16px;font-size:13px;display:flex;flex-direction:column;gap:3px;
}
.contagem-viva b{font-family:var(--fonte-titulo);font-size:19px;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- gráficos */
.barras{display:flex;flex-direction:column;gap:9px}
.barra{display:grid;grid-template-columns:118px 1fr 52px;gap:10px;align-items:center;font-size:13px}
/* display:block é obrigatório: são <span>, e altura não se aplica a caixa inline */
.barra__trilho{display:block;background:var(--superficie-2);border-radius:999px;height:9px;overflow:hidden}
.barra__preenche{display:block;height:100%;background:var(--verde);border-radius:999px}
.barra:nth-child(2n) .barra__preenche{background:var(--verde-claro)}
.barra:nth-child(3n) .barra__preenche{background:var(--lima)}
.barra__valor{text-align:right;font-variant-numeric:tabular-nums;color:var(--texto-2)}

.serie{display:flex;align-items:flex-end;gap:3px;height:90px}
.serie__col{flex:1;background:var(--verde-claro);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.serie__col:hover{opacity:1;background:var(--lima)}

/* ---------------------------------------------------------- paginação */
.paginacao{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:14px 18px}
.paginacao a,.paginacao span{
  padding:5px 10px;border-radius:5px;border:1px solid var(--borda);
  font-size:13px;color:var(--texto-2);text-decoration:none;
}
.paginacao a:hover{background:var(--superficie-2);text-decoration:none}
.paginacao .atual{background:var(--verde);color:#fff;border-color:var(--verde)}

/* ---------------------------------------------------------- vazio */
.vazio{padding:46px 24px;text-align:center;color:var(--texto-2)}
.vazio h3{margin-bottom:6px;color:var(--texto)}
.vazio p{margin:0 auto;max-width:48ch;font-size:13.5px}

/* ---------------------------------------------------------- login */
.entrada-tela{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(145deg,var(--verde) 0%,var(--verde-escuro) 58%,#063b32 100%);
}
.entrada-caixa{
  width:100%;max-width:392px;background:var(--superficie);
  border-radius:12px;padding:32px;box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.entrada-caixa img{width:168px;margin:0 auto 22px;display:block}
.entrada-caixa h1{font-size:18px;margin-bottom:4px}
.entrada-caixa p.sub-tela{color:var(--texto-2);font-size:13px;margin:0 0 22px}
.entrada-faixa{height:4px;background:var(--lima);margin:-32px -32px 26px;border-radius:12px 12px 0 0}

/* no tema escuro o verde do logo encosta no fundo do cartão:
   mesmo tratamento monocromático usado na barra lateral */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .entrada-caixa img{filter:brightness(0) invert(1);opacity:.94}
}
:root[data-tema="escuro"] .entrada-caixa img{filter:brightness(0) invert(1);opacity:.94}

/* ---------------------------------------------------------- editor */
.editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:16px;align-items:start}
.editor textarea{font-family:var(--fonte-mono);font-size:13px;min-height:420px;line-height:1.5}
.previa-quadro{width:100%;height:560px;border:1px solid var(--borda);border-radius:6px;background:#fff}
.tags-lista{display:flex;flex-wrap:wrap;gap:6px}
.tag-btn{
  font-family:var(--fonte-mono);font-size:11.5px;padding:3px 8px;border-radius:4px;
  border:1px solid var(--borda-forte);background:var(--superficie-2);color:var(--texto-2);cursor:pointer;
}
.tag-btn:hover{border-color:var(--verde);color:var(--verde)}

/* ---------------------------------------------------------- utilidades */
.mono{font-family:var(--fonte-mono);font-size:12.5px}
.silencio{color:var(--texto-2)}
.pequeno{font-size:12.5px}
.direita{margin-left:auto}
.centro{text-align:center}
.oculto{display:none !important}
hr.divisor{border:0;border-top:1px solid var(--borda);margin:16px 0}
.barra-progresso{display:block;height:7px;background:var(--superficie-2);border-radius:999px;overflow:hidden}
.barra-progresso i{display:block;height:100%;background:var(--verde-claro);border-radius:999px}

@media (max-width:1040px){
  .editor{grid-template-columns:1fr}
  .previa-quadro{height:420px}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .menu{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px}
  .menu__marca{padding:0 14px 0 4px}
  .menu__marca img{width:104px}
  .menu__grupo{display:none}
  .menu__rodape{width:100%;margin-top:8px}
  .pagina,.topo{padding-left:16px;padding-right:16px}
}
@media print{
  .menu,.topo,.btn,.filtros{display:none}
  .pagina{padding:0}
  .cartao{border:0;box-shadow:none}
}