/* estilo.css — visual compartilhado das páginas internas (tabela, contatos, login), igual ao mapa */
:root {
  --fundo:#0a0c0b; --cartao:#0f1211; --cartao2:#141816; --linha:#232927; --linha2:#2f3633;
  --texto:#eef1ef; --apagado:#8d9692; --fraco:#646d69; --acento:#5cff72; --acento-escuro:#0b1a0e;
  --mono:"JetBrains Mono", ui-monospace, monospace; --titulo:"Space Grotesk", "Inter", sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--fundo); color:var(--texto); font:15px/1.5 "Inter", system-ui, sans-serif; }
.envolve { max-width:1200px; margin:0 auto; padding:0 24px; }
:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }
[v-cloak] { display:none; }
a { color:var(--acento); }

.rotulo { font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--apagado); }
.bar { color:var(--acento); }
.meta { color:var(--apagado); font-size:.8rem; }
.ponto { width:8px; height:8px; border-radius:50%; background:var(--acento); box-shadow:0 0 10px var(--acento); display:inline-block; flex:none; }

/* topo */
.topo { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; border-bottom:1px solid var(--linha2); }
.logo img { display:block; height:80px; width:auto; margin:-6px 0 -6px -8px; }
.nav { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.nav a { color:var(--texto); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; }
.nav a:hover { color:var(--acento); }
.nav a[aria-current="page"] { color:var(--acento); border-bottom-color:var(--acento); }
.nav .sair { color:var(--apagado); }

/* abertura */
.abertura { padding:40px 0 28px; }
h1 { font-family:var(--titulo); font-weight:500; font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.05; letter-spacing:-.03em; margin:12px 0 12px; }
.sub { font-family:var(--mono); font-size:.86rem; line-height:1.75; color:#c9cfcc; margin:0; max-width:52em; }

/* campos */
.filtros { display:flex; flex-wrap:wrap; gap:16px 20px; align-items:end; margin-bottom:22px; }
.campo { display:flex; flex-direction:column; gap:8px; min-width:0; }
select, input { font:inherit; font-size:.9rem; height:42px; padding:0 14px; border:1px solid var(--linha2); border-radius:6px; background:var(--cartao); color:var(--texto); }
select { appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
         background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23eef1ef' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
         background-repeat:no-repeat; background-position:right 14px center; }
select option { background:var(--cartao); color:var(--texto); }
input::placeholder { color:var(--fraco); font-family:var(--mono); font-size:.8rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:6px; font:inherit; font-size:.9rem;
       font-weight:600; text-decoration:none; cursor:pointer; border:1px solid var(--linha2); background:transparent; color:var(--texto); white-space:nowrap; }
.btn:hover { border-color:var(--apagado); }
.btn.primario { background:var(--acento); border-color:var(--acento); color:var(--acento-escuro); font-weight:700; }
.btn:disabled { opacity:.6; cursor:default; }
.aviso { padding:12px 14px; border-left:3px solid #f5a524; background:#1d1709; color:#f3d9a6; margin:0 0 16px; font-size:.9rem; }

/* números de destaque */
.numeros { display:flex; gap:0; }
.numeros div { padding:0 22px; border-left:1px solid var(--linha2); }
.numeros div:first-child { padding-left:0; border-left:0; }
.numeros b { display:block; font-family:var(--mono); font-size:1.3rem; font-weight:500; font-variant-numeric:tabular-nums; }
.numeros span { font-family:var(--mono); font-size:.72rem; color:var(--apagado); }

/* tabelas */
.tabela { overflow:auto; border:1px solid var(--linha); border-radius:6px; background:var(--cartao); max-height:75vh; }
.tabela table { border-collapse:separate; border-spacing:0; width:100%; font-size:.86rem; }
.tabela th, .tabela td { padding:10px 12px; border-bottom:1px solid var(--linha); font-variant-numeric:tabular-nums; }
.tabela th { position:sticky; top:0; z-index:2; background:var(--cartao); font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
             text-transform:uppercase; color:var(--apagado); font-weight:500; white-space:nowrap; }
.tabela tbody tr:hover td { background:#151a18; }
.vazio { padding:40px 16px; text-align:center; color:var(--apagado); }

/* rodapé */
footer { border-top:1px solid var(--linha2); display:flex; align-items:center; gap:24px; padding:22px 0 30px; margin-top:48px; flex-wrap:wrap; }
footer .logo img { height:38px; }
footer .tse { border-left:1px solid var(--linha2); padding-left:22px; font-size:.78rem; }
footer .resumo { flex:1; text-align:center; font-family:var(--mono); font-size:.68rem; color:#c9cfcc; }
footer .gratis { display:flex; align-items:center; gap:10px; font-size:.75rem; }

@media (max-width:760px) {
  .topo { flex-wrap:wrap; }
  footer .resumo { text-align:left; flex-basis:100%; order:3; }
}
.so-cel, .so-cel-texto { display:none !important; }

@media (max-width:600px) {
  .envolve { padding:0 16px; }
  .topo { padding:16px 0; }
  .logo img { height:80px; }
  .abertura { padding:28px 0 22px; }
  footer { gap:16px; }
  footer .tse { border-left:0; padding-left:0; }
  .so-cel { display:flex !important; }
  .so-cel-texto { display:inline !important; }
  .so-pc { display:none !important; }

  /* menu numa linha só, deslizando para o lado */
  .nav { flex-wrap:nowrap; overflow-x:auto; width:100%; gap:18px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .nav::-webkit-scrollbar { display:none; }
  .nav a { flex:none; }

  /* filtros em duas colunas; .largo ocupa a linha toda */
  .filtros { display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; }
  .filtros > * { min-width:0; }
  .filtros > .largo { grid-column:1 / -1; }
  .filtros select, .filtros input, .filtros .btn { width:100%; }

  /* números de destaque em grade, sem as divisórias que quebravam torto */
  .numeros { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:14px 16px; }
  .numeros div { padding:0; border-left:0; }
  .numeros b { font-size:1.1rem; }

  /* tabela vira lista de cartões: cada célula com seu rótulo (data-rotulo) */
  .tabela.cartoes-cel { max-height:none; overflow:visible; }
  .tabela.cartoes-cel table { min-width:0 !important; display:block; }
  .tabela.cartoes-cel thead { display:none; }
  .tabela.cartoes-cel tbody { display:block; }
  .tabela.cartoes-cel tbody tr { display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-flow:row dense;
                                 gap:10px 12px; padding:14px; border-bottom:1px solid var(--linha); }
  .tabela.cartoes-cel tbody tr:last-child { border-bottom:0; }
  .tabela.cartoes-cel tbody tr[hidden] { display:none; }
  .tabela.cartoes-cel tbody td { display:block; padding:0; border:0; text-align:left !important; white-space:normal !important;
                                 position:static !important; min-width:0 !important; background-clip:padding-box; }
  .tabela.cartoes-cel tbody td[data-rotulo]::before { content:attr(data-rotulo); display:block; font-family:var(--mono); font-size:.62rem;
                                 letter-spacing:.06em; text-transform:uppercase; color:var(--apagado); margin-bottom:2px; }
  .tabela.cartoes-cel tbody td.cheia { grid-column:1 / -1; }
  .tabela.cartoes-cel tbody td.primeiro { order:-1; }
  .tabela.cartoes-cel tbody tr:hover td { background:transparent; }
}