/* =============================================================================
   A CASCA DO PAINEL — portada do drrodrigo/classificadosprime
   (app/admin/layout.tsx, components/CascaLateral.tsx e o bloco `.adm` do
   app/globals.css), com os tokens do Mapa dos Sítios.

   Regra dele, 20/09/2026: "o painel já tá 70% pronto" no classificadosprime,
   e era para eu ter partido de lá. O que veio de lá, com os comentários
   originais dos arquivos:

   - topo fixo com marca e o e-mail de quem está logado ("com dois cadastros no
     mesmo navegador, saber por qual você entrou evita mexer na conta errada");
   - lateral de 15rem que vira GAVETA abaixo de 900px ("no celular 15rem de
     menu comeriam metade da tela");
   - item aceso na seção aberta ("é a única pergunta que um menu lateral
     precisa responder sem a pessoa pensar");
   - o z-index do topo ACIMA da lateral ("sem isso a lateral cobre o canto
     esquerdo do topo e engole a marca") — defeito que já aconteceu lá;
   - o botão de sair usa a mesma peça dos links e por isso desfaz o que o
     navegador põe em <button>.

   O que mudou: a paleta. Lá o aceso é ouro, que é a cor do que é PAGO. Aqui o
   ouro segue reservado ao mesmo, então quem acende é o verde da marca.
   ========================================================================== */

:root{
  --mato:#15803d; --mato-fundo:#e7f5ec; --mato-fundo-2:#d0e9d9;
  --mato-escuro:#14532d;
  --ouro:#e3ab34; --ouro-fundo:#fdf4de;
  --carvao:#14532d;
  --papel:#f7fbf7; --superficie:#ffffff; --superficie-2:#eef6ef;
  --tinta:#16241b; --tinta-media:#4d6155; --tinta-fraca:#7c8f83;
  --borda:#dce9de; --borda-forte:#bcd3c1;
  --perigo:#b3261e; --perigo-fundo:#fdeceb;
  --sombra:0 1px 2px rgba(22,36,27,.05), 0 8px 24px -12px rgba(22,36,27,.14);
  --raio:10px;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --mato:#5cc47f; --mato-fundo:#16291d; --mato-fundo-2:#1d3526;
    --mato-escuro:#7ad39a;
    --ouro:#e8b95a; --ouro-fundo:#3a2f16;
    --carvao:#0f1a13;
    --papel:#0f1712; --superficie:#16211a; --superficie-2:#1d2a21;
    --tinta:#eaf4ed; --tinta-media:#a9bfb2; --tinta-fraca:#7f948a;
    --borda:#28362d; --borda-forte:#3b4c41;
    --perigo:#f2b8b5; --perigo-fundo:#3a1513;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
/* 🔴 A mesma linha que já me custou três sintomas na tela de entrar: sem ela,
   `hidden` não esconde nada quando o elemento tem `display` no CSS. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.55;
}
a{color:var(--mato)}

/* ------------------------------------------------------------------ a casca */
.adm{ --adm-topo:3.6rem; min-height:100dvh; background:var(--papel) }

/* A tela de acesso negado ocupa a página inteira, centrada: não há painel para
   mostrar por baixo, e uma casca vazia em volta de um recado é moldura à toa. */
.adm--barrado{ display:flex; align-items:center; justify-content:center;
  padding:2rem 1.25rem; min-height:100dvh }
.adm--barrado .vazio{ max-width:32rem }

.adm__topo{
  position:sticky; top:0;
  /* acima da lateral, senão ela cobre o canto esquerdo e engole a marca */
  z-index:60;
  min-height:var(--adm-topo);
  display:flex; align-items:center; gap:.75rem;
  padding:.5rem 1rem;
  background:var(--carvao); color:#f2fbf4;
  border-bottom:3px solid var(--ouro);
}
.adm__marca{ display:flex; align-items:center; gap:.55rem; color:inherit;
  font-weight:700; text-decoration:none }
.adm__marca img{ border-radius:50%; display:block }
.adm__marca span{ font-size:.95rem }
.adm__topo__quem{ margin-left:auto; font-size:.8rem; color:#b9d6c4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:22rem }
@media (max-width:700px){ .adm__topo__quem{ display:none } }

.adm__hamburguer{
  display:none;
  position:fixed; top:.5rem; left:.75rem; z-index:70;
  background:none; border:none; color:#f2fbf4; cursor:pointer;
  width:40px; height:40px; border-radius:8px;
  align-items:center; justify-content:center;
}
.adm__hamburguer:hover{ background:rgba(255,255,255,.16) }

.adm__corpo{ margin-left:15rem; padding:1.25rem 1.5rem 3rem; max-width:72rem }

.adm__lateral{
  position:fixed; top:0; bottom:0; left:0;
  width:15rem; z-index:50;
  background:var(--superficie); border-right:1px solid var(--borda);
  padding:.8rem; padding-top:calc(var(--adm-topo) + .8rem);
  display:flex; flex-direction:column; gap:.3rem; overflow-y:auto;
}
.adm__lateral__topo{ display:none; align-items:center; justify-content:space-between;
  margin-bottom:.4rem }
.adm__fechar{ background:none; border:none; font-size:1.1rem; cursor:pointer;
  color:var(--tinta-media); padding:.3rem .5rem }

.adm__nav{ display:flex; flex-direction:column; gap:.2rem }
.adm__link{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.55rem .7rem; border-radius:var(--raio);
  color:var(--tinta-media); text-decoration:none;
  border-left:3px solid transparent;
}
.adm__link strong{ font-size:.92rem; color:var(--tinta); font-weight:700 }
.adm__link span{ font-size:.74rem; color:var(--tinta-fraca) }
.adm__link:hover{ background:var(--superficie-2) }
.adm__link[data-ativo="true"]{ background:var(--mato-fundo); border-left-color:var(--mato) }

.adm__lateral__pe{ margin-top:auto; padding-top:.6rem; border-top:1px solid var(--borda);
  display:flex; flex-direction:column; gap:.2rem }
button.adm__link{ font:inherit; text-align:left; background:none; border:none;
  border-left:3px solid transparent; cursor:pointer; width:100% }
.adm__link--saida strong{ color:var(--perigo) }

.adm__vidro{ display:none }

@media (max-width:900px){
  .adm__hamburguer{ display:flex }
  .adm__topo{ padding-left:3.6rem }
  .adm__corpo{ margin-left:0; padding:1rem 1rem 3rem }
  .adm__lateral{
    width:min(17rem,82vw);
    transform:translateX(-100%);
    transition:transform .18s ease-out;
    box-shadow:var(--sombra);
  }
  .adm__lateral[data-aberta="true"]{ transform:none }
  .adm__lateral__topo{ display:flex }
  .adm__vidro{ display:block; position:fixed; inset:0; z-index:45;
    background:rgba(0,0,0,.4) }
}
@media (prefers-reduced-motion:reduce){ .adm__lateral{ transition:none } }

/* ----------------------------------------------------------------- miolo */
.secao{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin:1.5rem 0 .6rem }
.secao:first-child{ margin-top:0 }
.display{ font-weight:800; letter-spacing:-.01em; margin:0 }
h1.display{ font-size:1.4rem }
h2.display{ font-size:1.1rem }
.nota{ font-size:.82rem; color:var(--tinta-fraca) }

/* As métricas: cada número leva à lista dele. Comentário do original, que é a
   razão de ser deste componente: "ver '7 na fila' e não ter como chegar nos
   sete é o tipo de painel que a pessoa olha uma vez e nunca mais". */
.metricas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.6rem; margin:1rem 0 }
.metrica{
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--raio); padding:.8rem;
  display:flex; flex-direction:column; gap:.1rem;
  color:inherit; text-decoration:none;
}
a.metrica:hover{ border-color:var(--borda-forte) }
.metrica[data-alerta="true"]{ border-color:var(--ouro); background:var(--ouro-fundo) }
.metrica__valor{ font-size:1.8rem; line-height:1.1; font-weight:800 }
.metrica__rotulo{ font-size:.78rem; color:var(--tinta-fraca); font-weight:600 }

.cartao{ background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--raio); padding:1rem }
.cartao + .cartao{ margin-top:.75rem }

.lista{ list-style:none; margin:.5rem 0 0; padding:0 }
.linha{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.65rem 0; border-top:1px solid var(--borda) }
.linha:first-child{ border-top:0 }
.linha__corpo{ display:flex; flex-direction:column; min-width:12rem; flex:1 }
.linha__nome{ font-weight:700 }

.vazio{ background:var(--superficie); border:1px dashed var(--borda-forte);
  border-radius:var(--raio); padding:1.25rem; display:flex; flex-direction:column;
  gap:.5rem; text-align:center; align-items:center }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem .95rem; border-radius:var(--raio); border:1px solid transparent;
  background:var(--mato); color:#fff; font-weight:700; font-size:.92rem;
  cursor:pointer; text-decoration:none }
.btn:hover{ filter:brightness(1.05) }
.btn--vazado{ background:transparent; color:var(--mato-escuro);
  border-color:var(--mato) }
.btn--vazado:hover{ background:var(--mato-fundo); filter:none }
.btn[disabled]{ opacity:.6; cursor:default; filter:none }
.acoes-linha{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem }

.aviso{ background:var(--mato-fundo); border:1px solid var(--mato);
  border-radius:var(--raio); padding:.7rem .9rem; font-size:.9rem }
.erro{ background:var(--perigo-fundo); border:1px solid var(--perigo);
  border-radius:var(--raio); padding:.7rem .9rem; font-size:.9rem;
  color:var(--perigo) }

.selo{ font-size:.72rem; font-weight:700; padding:.1rem .45rem; border-radius:999px;
  border:1px solid var(--borda-forte); color:var(--tinta-media) }
.selo--alerta{ border-color:var(--ouro); background:var(--ouro-fundo); color:var(--tinta) }

/* ---- as peças que vieram junto com as telas do classificadosprime ----
   Vieram porque as telas delas vieram: copiar a tela e deixar o estilo para
   trás é o "pela metade" que ele apontou. Nomes iguais aos de lá, para quem
   for comparar achar de primeira. */

.painel-lista{ list-style:none; margin:.5rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.5rem }
.painel-item{
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--raio); padding:.75rem .9rem;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
/* Desligado fica APAGADO, e não escondido: some da página, mas continua aqui
   para ser religado — e quem olha a lista precisa ver isso de relance. */
.painel-item[data-inativo="true"]{ opacity:.62; border-style:dashed }
.painel-item__corpo{ display:flex; align-items:center; gap:.75rem; flex:1;
  min-width:14rem; flex-wrap:wrap }
.painel-item__corpo > div{ display:flex; flex-direction:column; gap:.1rem }

.banner-mini{ width:104px; height:39px; object-fit:cover; border-radius:6px;
  background:var(--superficie-2); display:block; flex-shrink:0 }

.campo{ display:flex; flex-direction:column; gap:.25rem; margin-bottom:.8rem }
.campo:last-child{ margin-bottom:0 }
.campo label{ font-size:.85rem; font-weight:700 }
.campo__linha{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
.campo input, .campo select, .painel-item input, .painel-item select{
  font:inherit; padding:.5rem .6rem; border-radius:8px;
  border:1px solid var(--borda-forte); background:var(--superficie);
  color:var(--tinta); width:100%;
}
.campo input[type=number], .painel-item input[type=number]{ width:auto }
.campo input[type=checkbox], .painel-item input[type=checkbox]{ width:auto }
/* A ajuda é onde mora o PORQUÊ de cada campo. É ela que evita a pergunta de
   volta — e pergunta de volta, aqui, custa horas. */
.ajuda{ font-size:.76rem; color:var(--tinta-fraca); line-height:1.45 }

.ticker-config{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap }
.ticker-config > div:first-child{ display:flex; flex-direction:column; gap:.1rem }
.ticker-config__acoes{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }

/* A prévia é a MESMA peça do site, e não uma imitação: se ela mentir, a tela
   inteira perde a razão de existir. */
.ticker{ overflow:hidden; background:var(--carvao); padding:.5rem 0;
  border-radius:var(--raio); margin:.4rem 0 1rem }
.ticker__trilho{ display:flex; align-items:center; gap:2.5rem; width:max-content;
  animation:correr 30s linear infinite }
.ticker__item{ display:inline-flex; align-items:center; white-space:nowrap;
  color:#f2fbf4; font-size:.82rem; font-weight:600 }
.ticker__item::after{ content:"◆"; margin-left:2.5rem; color:var(--ouro); opacity:.8 }
/* "Piscando" era o pedido. Isto é um pulso LENTO: chama atenção sem o risco
   que texto piscando rápido traz para quem tem epilepsia fotossensível. */
.ticker__item[data-destaque]{ color:var(--ouro); animation:pulsar 2.4s ease-in-out infinite }
@keyframes correr{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes pulsar{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
@media (prefers-reduced-motion:reduce){
  .ticker__trilho{ animation:none; flex-wrap:wrap; width:auto }
  .ticker__item[data-destaque]{ animation:none }
}

.form-bloco{ background:var(--superficie-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:1rem; margin-top:.6rem; width:100% }

/* ---- a bolinha do "mais" ----
   Pedido dele, 26/09/2026, com 168 sítios na lista. Fica acima de tudo, e
   FORA do <div class="adm__corpo"> para não rolar junto com o conteúdo.

   No canto direito de baixo, que é onde o polegar alcança no celular sem
   trocar a mão de posição — e longe do menu lateral, que mora na esquerda. */
.mais{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:65;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.85rem 1.1rem; border:none; border-radius:999px;
  background:var(--mato); color:#fff; font:inherit; font-weight:700;
  cursor:pointer; box-shadow:var(--sombra);
}
.mais:hover{ filter:brightness(1.06) }
.mais span[aria-hidden]{ font-size:1.25rem; line-height:1 }
.mais__rotulo{ font-size:.9rem }
/* No celular fica só o sinal: o rótulo comeria meia tela, e ali o polegar já
   sabe o que essa bolinha faz porque ela é a única. */
@media (max-width:640px){
  .mais{ padding:0; width:3.25rem; height:3.25rem; justify-content:center }
  .mais__rotulo{ display:none }
}
@media (prefers-reduced-motion:reduce){ .mais{ transition:none } }

/* ---- as filas de prospecção ---- */
.filas{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.8rem 0 0 }
.fila{
  font:inherit; font-weight:700; font-size:.9rem; cursor:pointer;
  padding:.45rem .85rem; border-radius:999px;
  border:1px solid var(--borda-forte); background:var(--superficie);
  color:var(--tinta-media);
}
.fila[aria-pressed="true"]{
  background:var(--mato); border-color:var(--mato); color:#fff;
}
.fila__conta{ opacity:.75; font-weight:600 }

/* Os botões de ação de cada linha. Em telas estreitas eles quebram em duas
   fileiras em vez de espremer o nome do sítio até ele sumir. */
.acoes-do-item{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center }
.acoes-do-item .btn{ padding:.4rem .7rem; font-size:.85rem }

/* Convidado fica marcado, e não escondido: a secretária precisa ver quando foi
   para decidir se já dá para cobrar resposta. */
.selo--convidado{ border-color:var(--mato); background:var(--mato-fundo); color:var(--mato-escuro) }