/* ============================================================
   POSTO NÁPOLES — Painel do sorteio (admin.html)
   Herda tokens, fontes e logos base64 do styles.css, carregado antes.
   Só o que é próprio do painel mora aqui. Sem cor cheia de fundo: o painel
   é ferramenta de trabalho, a identidade tricolor fica no cabeçalho e nos
   destaques. CSP do projeto proíbe style inline, então tudo vem daqui.

   Estrutura: casca de sistema. Abaixo de 1024px a navegação é uma barra
   inferior de cinco itens; acima vira coluna fixa de 248px à esquerda.
   ============================================================ */

.admin-body{
  background:var(--cinza-claro);
  color:var(--cinza-logo);
  font-family:'Inter';
  min-height:100dvh;

  /* Cinza de texto só do painel. O Cinza Médio #888888 da paleta dá 3,55:1
     sobre branco e reprova na WCAG AA para texto corrido. Em peça de marca
     ele continua valendo; aqui, que é ferramenta de trabalho lida o dia
     inteiro, o secundário escurece para 5,1:1. Números e títulos seguem nos
     tokens oficiais. */
  --cinza-texto:#6E6E6E;
}

/* Enquanto o JS decide login x painel, nada pisca na tela. */
[hidden]{display:none !important}

/* ── Marca d'água ─────────────────────────────────────────────
   Ícone da marca no canto inferior direito, fixo, bem apagado. Vive no body e
   não no .app-main, senão rolaria junto e sumiria. Fica em z-index 0, a camada
   de fundo do CLAUDE.md, e o .app sobe para 1, então nenhum conteúdo perde
   contraste por cima dela. pointer-events:none para não engolir clique.
   Opacidade em 5%: sobre o Cinza Claro do fundo ela aparece na diagonal da
   tela sem competir com número nenhum. */
.admin-body::before{
  content:'';position:fixed;z-index:0;pointer-events:none;
  right:-40px;bottom:-40px;width:min(420px,52vw);height:min(420px,52vw);
  background-image:var(--logo-icon-color);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.05;
}
.app,.login{position:relative;z-index:1}

/* Na barra inferior do celular a marca d'água encostaria atrás do menu, que é
   branco e opaco. Encolhe e sobe para ficar na área de leitura. */
@media (max-width:1023px){
  .admin-body::before{width:min(300px,64vw);height:min(300px,64vw);bottom:40px;right:-30px}
}

@media (prefers-reduced-motion:reduce){
  .admin-body::before{opacity:.04}
}

/* ── Login ────────────────────────────────────────────────── */
.login{
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--gap-lg);padding:24px 16px;
}
.login-card{
  width:100%;max-width:380px;background:var(--b);
  border:1px solid var(--borda);border-radius:var(--radius-lg);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:32px;display:flex;flex-direction:column;gap:var(--gap-md);
}
.login-card .logo-h-color{height:var(--logo-h-xs);margin:0 auto var(--gap-sm)}
.login-title{text-align:center;color:var(--g-dark)}
.login-sub{text-align:center;color:var(--cinza-texto);margin-bottom:var(--gap-sm)}
.login input[type="email"],
.login input[type="password"]{
  width:100%;font-family:'Inter';font-size:16px;color:var(--cinza-logo);
  background:var(--b);border:2px solid var(--borda);border-radius:var(--radius-md);
  padding:12px 14px;
}
.login input:focus-visible{outline:3px solid var(--g);outline-offset:2px;border-color:var(--g)}

/* ── Casca ────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:1fr;min-height:100dvh}

/* Coluna de conteúdo. O padding de baixo reserva a barra inferior, para
   nenhuma linha da tabela ficar escondida atrás dela. */
.app-main{
  min-width:0;width:100%;max-width:1080px;margin:0 auto;
  padding:0 16px calc(76px + env(safe-area-inset-bottom));
}

/* ── Navegação ────────────────────────────────────────────── */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--b);border-top:1px solid var(--borda);
  box-shadow:0 -2px 12px rgba(0,0,0,.06);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-brand{display:none}
/* Na barra inferior o menu e o Sair dividem a mesma linha. O .nav vira flex
   row e a .nav-list cresce, deixando o Sair como último item. */
.nav{display:flex;flex-direction:row;align-items:stretch}
.nav-list{display:flex;flex:1 1 auto;min-width:0}
.nav-item{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;padding:8px 2px;text-decoration:none;
  font-family:'Inter';font-weight:600;font-size:11px;line-height:1.2;text-align:center;
  color:var(--cinza-texto);
  transition:color 150ms ease,background 150ms ease;
  -webkit-tap-highlight-color:transparent;
}
.nav-ico{width:22px;height:22px;flex:0 0 auto}
.nav-rotulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.nav-item:hover{color:var(--cinza-logo)}
.nav-item[aria-current="page"]{color:var(--v)}
.nav-item:focus-visible{outline:3px solid var(--g);outline-offset:-3px;border-radius:var(--radius-sm)}

@media (min-width:1024px){
  .app{grid-template-columns:248px 1fr}
  .nav{
    position:sticky;top:0;left:auto;right:auto;bottom:auto;
    align-self:start;height:100dvh;
    border-top:none;border-right:1px solid var(--borda);box-shadow:none;
    display:flex;flex-direction:column;gap:var(--gap-lg);
    padding:24px 16px;
  }
  .nav-brand{display:block;padding:0 8px}
  /* De 64 para 48px, que é o piso --logo-h-min do design system. Abaixo disso
   não desce: a regra é do CLAUDE.md e vale para toda peça da marca. */
.nav-brand .logo-h-color{height:var(--logo-h-min)}
  .nav-list{flex-direction:column;gap:var(--gap-xs)}
  .nav-item{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;
    min-height:44px;padding:10px 12px;border-radius:var(--radius-md);
    font-size:14px;text-align:left;
  }
  .nav-ico{width:20px;height:20px}
  .nav-item:hover{background:var(--cinza-claro)}
  .nav-item[aria-current="page"]{
    background:var(--cinza-claro);color:var(--v);
    box-shadow:inset 3px 0 0 var(--v);
  }
  .app-main{padding:0 24px 48px}
  /* Na coluna o Sair desce para o pé sozinho e volta a ser botão de linha. */
  .btn-sair{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;
    margin-top:auto;
    min-height:44px;padding:10px 12px;border-radius:var(--radius-md);
    font-size:14px;text-align:left;
    border-left:none;border-top:1px solid var(--borda);
  }
  .btn-sair-ico{width:20px;height:20px}
  .btn-sair:hover{background:var(--cinza-claro);color:var(--v)}
}

/* ── Cabeçalho ────────────────────────────────────────────── */
.admtop{
  display:flex;align-items:center;gap:var(--gap-md);flex-wrap:wrap;
  padding:12px 0;
}
.admtop-logo{height:var(--logo-h-min)}
/* Sair. Mesma medida dos itens de navegação para a barra inferior não ficar
   torta, e um filete à esquerda separando ação de navegação. */
.btn-sair{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;padding:8px 2px;
  font-family:'Inter';font-weight:600;font-size:11px;line-height:1.2;text-align:center;
  color:var(--cinza-texto);background:none;border:none;cursor:pointer;
  border-left:1px solid var(--borda);
  -webkit-tap-highlight-color:transparent;
  transition:color 150ms ease,background 150ms ease;
}
.btn-sair-ico{width:22px;height:22px;flex:0 0 auto}
.btn-sair-rotulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.btn-sair:hover{color:var(--v)}
.btn-sair:focus-visible{outline:3px solid var(--g);outline-offset:-3px;border-radius:var(--radius-sm)}

/* Em telas estreitas o bloco do período cai sozinho para a segunda linha. O
   rótulo fica ao lado do campo, não acima: o cabeçalho se repete em todas as
   cinco seções e cada linha economizada vale conteúdo visível. */
.admtop-ciclo{
  flex:1 1 100%;
  display:flex;align-items:center;gap:var(--gap-sm) var(--gap-md);flex-wrap:wrap;
}
.ciclo-pick{display:flex;flex-direction:row;align-items:center;gap:var(--gap-sm)}
.ciclo-pick label{font-family:'Inter';font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--cinza-texto)}
.ciclo-select{
  font-family:'Barlow Condensed';font-weight:800;font-size:18px;text-transform:uppercase;
  color:var(--cinza-logo);background:var(--b);
  border:2px solid var(--borda);border-radius:var(--radius-md);
  padding:8px 12px;cursor:pointer;min-height:44px;max-width:100%;
}
.ciclo-select:focus-visible{outline:3px solid var(--g);outline-offset:2px}

/* ── Atalhos de período ───────────────────────────────────── */
.filtro-chips{display:flex;gap:var(--gap-xs);flex-wrap:wrap}
.chip{
  font-family:'Inter';font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--cinza-texto);background:var(--b);
  border:1px solid var(--borda);border-radius:var(--radius-pill);
  padding:8px 14px;min-height:36px;cursor:pointer;
  transition:background 150ms ease,color 150ms ease,border-color 150ms ease;
}
.chip:hover{background:var(--cinza-claro);color:var(--cinza-logo)}
.chip:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.chip-on{background:var(--g);border-color:var(--g);color:var(--b)}
.chip-on:hover{background:var(--g-dark);border-color:var(--g-dark);color:var(--b)}

@media (prefers-reduced-motion:reduce){ .chip{transition:none} }

.periodo-chip{
  font-family:'Inter';font-weight:600;font-size:14px;color:var(--cinza-logo);
  background:var(--b);border:1px solid var(--borda);border-radius:var(--radius-pill);
  padding:6px 14px;
}
.periodo-chip strong{font-weight:700;color:var(--g-dark)}
.badge{
  font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  border-radius:var(--radius-sm);padding:4px 10px;
}
.badge-aberto{background:var(--g);color:var(--b)}
.badge-encerrado{background:var(--cinza-logo);color:var(--b)}

@media (min-width:1024px){
  .admtop{padding:24px 0 8px;flex-wrap:nowrap}
  .admtop-logo{display:none}
  .admtop-ciclo{flex:1 1 auto;order:-1}
}

/* ── Seções ───────────────────────────────────────────────── */
.view{padding:8px 0 24px}
.view-titulo{
  font-family:'Barlow Condensed';font-weight:900;font-size:clamp(30px,7vw,40px);
  line-height:1;letter-spacing:.5px;text-transform:uppercase;color:var(--cinza-logo);
}
/* O título recebe foco na troca de seção só para o leitor de tela anunciar o
   conteúdo novo. Não é controle, então não ganha anel: um retângulo verde em
   volta do título a cada clique no menu lê como defeito. */
.view-titulo:focus{outline:none}
.view-sub{
  font-family:'Inter';font-size:14px;line-height:1.6;color:var(--cinza-texto);
  margin-top:var(--gap-sm);margin-bottom:var(--gap-lg);max-width:62ch;
}

/* ── Cards do funil ───────────────────────────────────────── */
.kpis{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-md);margin-bottom:var(--gap-lg);
}
/* Cinco cartões. Em tela larga entram todos numa linha; entre 900 e 1200px
   voltam a três, que é melhor do que cinco espremidos. */
@media (min-width:900px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.kpis{grid-template-columns:repeat(5,minmax(0,1fr))}}

.kpi{
  background:var(--b);border-radius:var(--radius-lg);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:20px 16px;min-width:0;
  display:flex;flex-direction:column;gap:var(--gap-xs);
}
@media (min-width:900px){.kpi{padding:24px}}
.kpi-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-md);margin-bottom:var(--gap-xs);
}
.kpi-ico svg{width:20px;height:20px}
.kpi-num{
  font-family:'Barlow Condensed';font-weight:900;font-size:clamp(34px,9vw,44px);
  line-height:1;letter-spacing:.5px;color:var(--cinza-logo);
  font-variant-numeric:tabular-nums;
}
.kpi-rotulo{
  font-family:'Inter';font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--cinza-texto);
}
.kpi-nota{font-family:'Inter';font-size:12px;line-height:1.5;color:var(--cinza-texto)}

.kpi-scan .kpi-ico{background:rgba(60,60,60,.08);color:var(--cinza-logo)}
.kpi-ok   .kpi-ico{background:rgba(65,133,80,.12);color:var(--g-dark)}
.kpi-ok   .kpi-num{color:var(--g)}
.kpi-pend .kpi-ico{background:rgba(255,0,0,.08);color:var(--v-dark)}
.kpi-pend .kpi-num{color:var(--v)}
.kpi-conv .kpi-ico{background:rgba(107,181,122,.2);color:var(--g-dark)}
.kpi-part .kpi-ico{background:rgba(65,133,80,.12);color:var(--g-dark)}
.kpi-part .kpi-num{color:var(--cinza-logo)}

/* Variação contra o período anterior. Sobe em verde, cai em vermelho, e some
   quando não há período anterior para comparar. */
.kpi-delta{
  font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:.3px;
  display:inline-flex;align-items:center;gap:3px;
}
.kpi-delta[hidden]{display:none}
.kpi-delta-sobe{color:var(--g-dark)}
.kpi-delta-cai{color:var(--v-dark)}
.kpi-delta-igual{color:var(--cinza-texto)}

/* Estado de número indisponível: traço em cinza, sem alarme de erro. */
.kpi-num.vazio{color:var(--cinza-e4)}

.aviso-medicao{
  font-family:'Inter';font-size:13px;line-height:1.6;color:var(--cinza-logo);
  background:var(--b);border:1px solid var(--borda);border-left:4px solid var(--cinza-texto);
  border-radius:var(--radius-md);padding:12px 14px;margin-bottom:var(--gap-lg);
}
.aviso-medicao strong{color:var(--v-dark)}

/* Nota dos importados. Mesma caixa do aviso de medição, filete verde: não é
   problema, é explicação de onde 42 pessoas foram parar. */
.nota-importados{
  font-family:'Inter';font-size:13px;line-height:1.6;color:var(--cinza-logo);
  background:var(--b);border:1px solid var(--borda);border-left:4px solid var(--g);
  border-radius:var(--radius-md);padding:12px 14px;margin-bottom:var(--gap-lg);
}
.nota-importados strong{font-family:'Barlow Condensed';font-weight:900;font-size:17px;color:var(--g-dark)}

/* ── Cards de leitura com gráfico de barra horizontal ─────── */
.cards{display:grid;grid-template-columns:1fr;gap:var(--gap-lg);margin-bottom:var(--gap-lg)}
@media (min-width:720px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards-2{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:repeat(3,1fr)}
}

.card{
  background:var(--b);border-radius:var(--radius-lg);
  box-shadow:0 4px 16px rgba(0,0,0,.06);padding:24px;min-width:0;
}
.card-titulo{
  font-family:'Barlow Condensed';font-weight:800;font-size:20px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--cinza-logo);margin-bottom:var(--gap-md);
}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:var(--gap-sm)}
.bar-row:last-child{margin-bottom:0}
.bar-label{
  flex:0 0 96px;font-family:'Inter';font-size:13px;color:var(--cinza-logo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bar-track{
  flex:1;min-width:0;height:12.5px;background:var(--borda);border-radius:6.25px;overflow:hidden;
}
.bar-fill{height:100%;background:var(--g);border-radius:6.25px;min-width:2px;transition:width .4s ease}
.bar-val{
  flex:0 0 auto;font-family:'Barlow Condensed';font-weight:900;font-size:15px;
  color:var(--cinza-logo);font-variant-numeric:tabular-nums;min-width:24px;text-align:right;
}
.card-vazio{font-family:'Inter';font-size:14px;color:var(--cinza-texto)}

/* ── Ranking de frentistas ────────────────────────────────── */
/* Uma linha por frentista. A barra cinza mede a exposição do crachá, e a
   verde, dentro dela, a parte que virou cadastro. Sem escaneamento a linha
   cai para barra verde simples, proporcional ao maior cadastro. */
.rank-row{padding:14px 0;border-bottom:1px solid var(--cinza-e4)}
.rank-row:first-child{padding-top:0}
.rank-row:last-child{border-bottom:none;padding-bottom:0}
.rank-topo{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:var(--gap-sm);
}
.rank-nome{
  font-family:'Inter';font-weight:600;font-size:14px;color:var(--cinza-logo);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rank-nums{
  flex:0 0 auto;font-family:'Inter';font-size:12px;color:var(--cinza-texto);white-space:nowrap;
}
.rank-nums strong{
  font-family:'Barlow Condensed';font-weight:900;font-size:16px;color:var(--cinza-logo);
  font-variant-numeric:tabular-nums;
}
.rank-nums .conv{color:var(--g-dark);font-weight:700}
/* O trilho é o teto da escala. O segmento de escaneamento precisa destacar
   dele: em Cinza E4 sobre borda E8 os dois somam a mesma cor e a barra some. */
.rank-track{height:12.5px;background:var(--cinza-claro);border-radius:6.25px;overflow:hidden}
.rank-scan{height:100%;background:rgba(60,60,60,.22);border-radius:6.25px;min-width:2px;transition:width .4s ease}
.rank-conv{height:100%;background:var(--g);border-radius:6.25px;min-width:2px;transition:width .4s ease}

/* Linha de quem chegou sem crachá: separada por um filete, fora da disputa. */
.rank-nota{
  font-family:'Inter';font-size:12px;line-height:1.5;color:var(--cinza-texto);
  border-top:2px solid var(--borda);padding-top:var(--gap-md);margin-top:var(--gap-md);
}
.rank-solto{padding-top:var(--gap-sm)}
.rank-solto .rank-nome{color:var(--cinza-texto)}

.legenda{
  display:flex;align-items:center;gap:var(--gap-sm);flex-wrap:wrap;
  font-family:'Inter';font-size:12px;color:var(--cinza-texto);margin-top:var(--gap-lg);
}
.swatch{width:12px;height:12px;border-radius:2px;display:inline-block;margin-left:var(--gap-sm)}
.legenda .swatch:first-child{margin-left:0}
.swatch-cinza{background:rgba(60,60,60,.22)}
.swatch-verde{background:var(--g)}

/* ── Contador do sorteio ──────────────────────────────────── */
.contador{
  background:var(--b);border-radius:var(--radius-lg);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:32px;text-align:center;margin-bottom:var(--gap-lg);
}
.contador-num{
  font-family:'Barlow Condensed';font-weight:900;font-size:clamp(56px,18vw,80px);
  line-height:1;letter-spacing:.5px;color:var(--g);
  font-variant-numeric:tabular-nums;
}
.contador-rotulo{
  font-family:'Inter';font-weight:600;font-size:14px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--cinza-texto);margin-top:var(--gap-xs);
}
.ganhador-linha{
  margin-top:var(--gap-md);font-family:'Inter';font-size:15px;color:var(--cinza-logo);
}
.ganhador-linha strong{color:var(--g-dark)}

/* ── Bloco de lista dentro de uma view ────────────────────────
   A lista de inscritos deixou de ser seção própria e agora fecha a Visão
   geral; a tabela de escaneamentos fecha a de Frentistas. O bloco só marca a
   quebra com um respiro e um subtítulo, sem virar card por fora. */
.lista-bloco{margin-top:var(--gap-xl)}
.lista-bloco-titulo{
  font-family:'Barlow Condensed';font-weight:800;font-size:24px;letter-spacing:.5px;text-transform:uppercase;
  line-height:1;color:var(--cinza-logo);margin-bottom:var(--gap-sm);
}
.lista-bloco .view-sub{margin-top:0}

/* ── Busca e lista ────────────────────────────────────────── */
.lista-topo{
  display:flex;align-items:center;gap:var(--gap-md);flex-wrap:wrap;margin-bottom:var(--gap-md);
}
.busca{
  flex:1 1 220px;min-width:0;
  display:flex;align-items:center;gap:var(--gap-sm);
  background:var(--b);border:2px solid var(--borda);border-radius:var(--radius-md);
  padding:0 12px;min-height:48px;
  transition:border-color 150ms ease,box-shadow 150ms ease;
}
.busca svg{width:18px;height:18px;flex:0 0 auto;color:var(--cinza-texto)}
.busca input{
  flex:1;min-width:0;border:none;background:none;padding:12px 0;
  font-family:'Inter';font-size:16px;color:var(--cinza-logo);
}
/* O anel de foco vive na caixa inteira, não some: veja :focus-within abaixo. */
.busca input:focus{outline:none}
.busca:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(65,133,80,.2)}
.lista-topo .btn-sec{flex:0 0 auto;width:auto}

.lista-card{
  background:var(--b);border-radius:var(--radius-lg);
  box-shadow:0 4px 16px rgba(0,0,0,.06);padding:24px;margin-bottom:var(--gap-lg);
  overflow-x:auto;
}
/* Tabela compacta. O respiro caiu de 10 para 6px na vertical, o corpo de 14
   para 13px e o cabeçalho de 12 para 11px. O que mais estreitou, porém, não
   foi a fonte: foi tirar o botão de revelar de cada linha. */
.tabela{width:100%;border-collapse:collapse;font-family:'Inter';font-size:13px}
.tabela th{
  text-align:left;font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--cinza-texto);padding:6px 8px;border-bottom:2px solid var(--borda);white-space:nowrap;
}
/* Nome em linha única: a tabela já rola na horizontal, e nome quebrado em
   três linhas engorda a lista inteira sem ganho de leitura. */
.tabela td{padding:6px 8px;border-bottom:1px solid var(--cinza-e4);color:var(--cinza-logo);vertical-align:middle;white-space:nowrap}
.tabela td:first-child{max-width:240px;overflow:hidden;text-overflow:ellipsis}
.tabela tr:last-child td{border-bottom:none}
/* Linhas alternadas: com o respiro menor o olho precisa de outra pista para
   não pular de linha no meio da leitura. */
.tabela tbody tr:nth-child(even){background:rgba(60,60,60,.025)}
.td-tel{font-variant-numeric:tabular-nums}
.td-hora{font-variant-numeric:tabular-nums;color:var(--cinza-texto)}
.pill-frentista{
  font-family:'Inter';font-weight:600;font-size:11px;color:var(--g-dark);
  background:rgba(65,133,80,.1);border-radius:var(--radius-sm);padding:2px 7px;white-space:nowrap;
}
.pill-direto{color:var(--cinza-logo);background:rgba(60,60,60,.08)}
.selo-importado{
  font-family:'Inter';font-weight:600;font-size:10px;letter-spacing:.3px;text-transform:uppercase;
  color:var(--cinza-texto);background:var(--cinza-claro);border:1px solid var(--borda);
  border-radius:var(--radius-sm);padding:1px 5px;white-space:nowrap;
}
.lista-vazia{font-family:'Inter';font-size:15px;color:var(--cinza-texto);padding:8px 0}

/* ── Interruptor ──────────────────────────────────────────── */
.switch{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--gap-sm);
  min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-trilho{
  width:40px;height:22px;border-radius:var(--radius-pill);
  background:var(--cinza-e4);display:inline-flex;align-items:center;padding:2px;
  transition:background 150ms ease;
}
.switch-bola{
  width:18px;height:18px;border-radius:var(--radius-pill);background:var(--b);
  box-shadow:0 1px 3px rgba(0,0,0,.24);transition:transform 150ms ease;
}
.switch input:checked + .switch-trilho{background:var(--g)}
.switch input:checked + .switch-trilho .switch-bola{transform:translateX(18px)}
.switch input:focus-visible + .switch-trilho{outline:3px solid var(--g);outline-offset:2px}
.switch-rotulo{
  font-family:'Inter';font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--cinza-texto);
}

/* ── Ações ────────────────────────────────────────────────── */
.acoes{display:grid;grid-template-columns:1fr;gap:var(--gap-md)}
@media (min-width:560px){.acoes{grid-template-columns:repeat(2,1fr)}}
.acoes .cta,.acoes .btn-sec{min-height:48px}
.cta-roleta{background:var(--v)}
.cta-roleta:hover:not(:disabled){background:var(--v-dark);box-shadow:0 8px 22px rgba(204,0,0,.28)}
.cta-roleta:focus-visible{outline-color:var(--v-dark)}
.cta-encerrar{background:var(--cinza-logo)}
.cta-encerrar:hover:not(:disabled){background:#000;box-shadow:0 8px 22px rgba(0,0,0,.24)}
.cta-encerrar:disabled{background:var(--cinza-e4);color:var(--cinza-texto)}

/* Mensagem de erro geral do painel (falha de rede etc.) */
.painel-erro{
  font-family:'Inter';font-size:14px;color:var(--v-dark);
  background:rgba(255,0,0,.06);border:1px solid rgba(255,0,0,.2);border-radius:var(--radius-md);
  padding:12px 14px;margin-bottom:var(--gap-md);
}

/* Texto do sheet de encerramento herda .sheet do styles.css. */
.sheet-aviso{font-family:'Inter';font-size:14px;color:var(--cinza-logo);text-align:center;max-width:340px}
.sheet-aviso strong{color:var(--cinza-logo)}
.sheet-aviso .reforco{color:var(--g-dark);font-weight:700}

/* ── Linha do tempo dos eventos ───────────────────────────── */
.linha-tempo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lt-item{
  display:flex;align-items:flex-start;gap:var(--gap-md);
  padding:12px 0 12px 16px;border-bottom:1px solid var(--cinza-e4);position:relative;
}
.lt-item:last-child{border-bottom:none}
/* Filete da cor do evento na lateral: verde para apuração, cinza para
   encerramento. É o que faz a lista virar linha do tempo e não tabela. */
.lt-item::before{
  content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;
}
.lt-sorteio::before{background:var(--g)}
.lt-encerramento::before{background:var(--cinza-logo)}
.lt-hora{
  flex:0 0 96px;font-family:'Inter';font-weight:600;font-size:12px;
  color:var(--cinza-texto);font-variant-numeric:tabular-nums;padding-top:2px;
}
.lt-corpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.lt-corpo strong{font-family:'Inter';font-weight:700;font-size:14px;color:var(--cinza-logo)}
.lt-detalhe{font-family:'Inter';font-size:13px;color:var(--cinza-texto)}

/* ── Marcas da tabela de logs ─────────────────────────────── */
.tag-tipo{
  font-family:'Inter';font-weight:600;font-size:11px;
  color:var(--g-dark);background:rgba(65,133,80,.1);
  border-radius:var(--radius-sm);padding:2px 7px;white-space:nowrap;
}
.tag-retorno{color:var(--cinza-texto);background:rgba(60,60,60,.08)}
.td-sessao{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--cinza-texto)}
.btn-mais{margin-top:var(--gap-md);width:100%}

@media (prefers-reduced-motion:reduce){
  .bar-fill,.rank-scan,.rank-conv,.nav-item,.busca{transition:none}
  .switch-trilho,.switch-bola{transition:none}
}