/* Arquivo das apurações. Vive dentro do base_app.html: tudo é escopado em .el e o tema
   escuro segue o html.dark do Grabatus. Cores de candidato pela chave do registro. */

.el {
  --el-tinta: oklch(0.24 0.02 260);
  --el-tinta-2: oklch(0.44 0.02 260);
  --el-tinta-3: oklch(0.53 0.018 260);
  --el-linha: oklch(0.91 0.006 260);
  --el-linha-forte: oklch(0.85 0.008 260);
  --el-fundo: oklch(0.985 0.002 250);
  --el-fundo-2: oklch(0.955 0.004 260);
  --el-superficie: oklch(0.995 0.002 260);
  --el-superficie-alta: oklch(0.995 0.002 260);
  --el-acento: oklch(0.6 0.11 220);
  --el-acento-texto: oklch(0.5 0.1 222);
  --el-acento-halo: oklch(0.6 0.11 220 / 0.22);
  --el-contorno: oklch(0.3 0.02 260 / 0.5);
  --el-sombra: oklch(0.2 0.03 260 / 0.16);
  --el-erro: oklch(0.5 0.17 27);
  --el-empate: oklch(0.8 0.006 260);
  --el-lula: oklch(0.54 0.2 27);
  --el-lula-1: oklch(0.9 0.045 25);
  --el-lula-2: oklch(0.79 0.1 26);
  --el-lula-3: oklch(0.66 0.16 27);
  --el-lula-4: oklch(0.52 0.19 27);
  --el-flavio: oklch(0.5 0.14 258);
  --el-flavio-1: oklch(0.9 0.035 255);
  --el-flavio-2: oklch(0.78 0.075 256);
  --el-flavio-3: oklch(0.64 0.115 257);
  --el-flavio-4: oklch(0.48 0.135 259);

  container: el / inline-size;
  padding-top: 1.25rem;
  color: var(--el-tinta);
}

.dark .el {
  --el-tinta: oklch(0.95 0.005 260);
  --el-tinta-2: oklch(0.8 0.012 260);
  --el-tinta-3: oklch(0.7 0.015 260);
  --el-linha: oklch(0.34 0.02 260);
  --el-linha-forte: oklch(0.4 0.02 260);
  --el-fundo: oklch(0.21 0.034 264);
  --el-fundo-2: oklch(0.22 0.028 262);
  --el-superficie: oklch(0.278 0.029 257);
  --el-superficie-alta: oklch(0.36 0.025 258);
  --el-acento: oklch(0.79 0.13 212);
  --el-acento-texto: oklch(0.82 0.11 212);
  --el-acento-halo: oklch(0.79 0.13 212 / 0.25);
  --el-contorno: oklch(0.95 0.01 260 / 0.42);
  --el-sombra: oklch(0.1 0.02 260 / 0.5);
  --el-erro: oklch(0.72 0.15 27);
  --el-empate: oklch(0.52 0.012 260);
  --el-lula: oklch(0.71 0.16 25);
  --el-lula-1: oklch(0.37 0.07 25);
  --el-lula-2: oklch(0.47 0.12 26);
  --el-lula-3: oklch(0.58 0.16 27);
  --el-lula-4: oklch(0.7 0.17 27);
  --el-flavio: oklch(0.73 0.12 255);
  --el-flavio-1: oklch(0.36 0.05 258);
  --el-flavio-2: oklch(0.46 0.085 257);
  --el-flavio-3: oklch(0.58 0.115 256);
  --el-flavio-4: oklch(0.72 0.12 254);
}

.el [hidden] { display: none !important; }
.el :focus-visible { outline: 2px solid var(--el-acento); outline-offset: 2px; }
.el a { color: var(--el-acento-texto); text-underline-offset: 2px; }
.el-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

[data-cand="lula"] { --cor: var(--el-lula); }
[data-cand="flavio"] { --cor: var(--el-flavio); }
[data-cand="empate"] { --cor: var(--el-empate); }
.lula-1 { fill: var(--el-lula-1); background: var(--el-lula-1); }
.lula-2 { fill: var(--el-lula-2); background: var(--el-lula-2); }
.lula-3 { fill: var(--el-lula-3); background: var(--el-lula-3); }
.lula-4 { fill: var(--el-lula-4); background: var(--el-lula-4); }
.flavio-1 { fill: var(--el-flavio-1); background: var(--el-flavio-1); }
.flavio-2 { fill: var(--el-flavio-2); background: var(--el-flavio-2); }
.flavio-3 { fill: var(--el-flavio-3); background: var(--el-flavio-3); }
.flavio-4 { fill: var(--el-flavio-4); background: var(--el-flavio-4); }
.empate { fill: var(--el-empate); background: var(--el-empate); }

/* Cabeçalho */
.el-cabecalho { max-width: 46rem; margin-bottom: 1.75rem; }
.el-sobretitulo { margin: 0 0 0.625rem; color: var(--el-acento-texto); }
.el-manchete { margin: 0; color: var(--el-tinta); font-size: 1.875rem; line-height: 1.08; text-wrap: balance; }
.el-meta { max-width: 62ch; margin: 0.75rem 0 0; color: var(--el-tinta-2); font-size: 0.9375rem; line-height: 1.5; }

/* Grade: busca, mapa e painel empilhados; lado a lado quando o conteúdo tem espaço */
.el-grade { display: grid; grid-template-areas: "busca" "mapa" "painel"; gap: 1.25rem; }
.el-busca { grid-area: busca; }
.el-mapa { grid-area: mapa; }
.el-painel { grid-area: painel; }

/* Busca */
.el-busca { position: relative; }
.el-busca-icone { position: absolute; top: 50%; left: 0.875rem; width: 1.125rem; height: 1.125rem; color: var(--el-tinta-3); transform: translateY(-50%); pointer-events: none; }
.el-busca-campo {
  width: 100%; height: 2.75rem; padding: 0 1rem 0 2.625rem;
  border: 1px solid var(--el-linha-forte); border-radius: 0.75rem;
  background: var(--el-superficie); color: var(--el-tinta);
  font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.el-busca-campo::placeholder { color: var(--el-tinta-3); opacity: 1; }
.el-busca-campo:focus { border-color: var(--el-acento); outline: none; box-shadow: 0 0 0 3px var(--el-acento-halo); }
.el-busca-lista {
  position: absolute; z-index: 20; top: calc(100% + 0.375rem); right: 0; left: 0;
  max-height: 20rem; margin: 0; padding: 0.375rem; overflow-y: auto; list-style: none;
  border: 1px solid var(--el-linha); border-radius: 0.75rem;
  background: var(--el-superficie); box-shadow: 0 16px 40px -16px var(--el-sombra);
}
.el-busca-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.9375rem; }
.el-busca-lista li[aria-selected="true"] { background: var(--el-fundo-2); }
.el-busca-lista small { flex-shrink: 0; color: var(--el-tinta-3); font-size: 0.8125rem; }
.el-busca-lista .el-vazio { cursor: default; color: var(--el-tinta-3); }

/* Painel da área escolhida */
.el-painel { container: painel / inline-size; display: grid; align-content: start; gap: 1rem; }
.el-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: -0.625rem; color: var(--el-tinta-3); font-size: 0.8125rem; }
.el-trilha button { padding: 0.125rem 0; border: 0; background: none; color: var(--el-acento-texto); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
.el-area { margin: 0; font-size: 1.5rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.el-vantagem { margin: -0.625rem 0 0; color: var(--el-tinta-2); font-size: 0.875rem; }
.el-cands { display: grid; gap: 0.875rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.el-cand { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.75rem; }
.el-foto { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--el-fundo-2) center top / cover no-repeat; box-shadow: 0 0 0 2px var(--el-fundo), 0 0 0 3.5px var(--cor); }
.el-cand[data-cand="lula"] .el-foto { background-image: url("lula.jpeg"); }
.el-cand[data-cand="flavio"] .el-foto { background-image: url("flavio.jpeg"); }
.el-cand-id { display: grid; min-width: 0; }
.el-cand-nome { font-size: 0.9375rem; font-weight: 600; }
.el-cand-partido { color: var(--el-tinta-3); font-size: 0.75rem; letter-spacing: 0.02em; }
.el-cand-num { display: grid; justify-items: end; }
.el-pct { color: var(--cor); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.el-votos { margin-top: 0.25rem; color: var(--el-tinta-3); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.el-barra { display: flex; gap: 2px; height: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--el-fundo-2); }
.el-barra i { display: block; background: var(--cor); transition: width 240ms cubic-bezier(0.25, 1, 0.5, 1); }
.el-outros { margin: -0.5rem 0 0; color: var(--el-tinta-3); font-size: 0.75rem; }
.el-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; margin: 0.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--el-linha); }
.el-dados dt { color: var(--el-tinta-3); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.el-dados dd { margin: 0.25rem 0 0; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Mapa */
.el-mapa { margin: 0; padding: 0.75rem 0.75rem 1rem; border: 1px solid var(--el-linha); border-radius: 1rem; background: var(--el-superficie); }
.el-ferramentas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.el-alternador { display: inline-flex; padding: 0.1875rem; border-radius: 999px; background: var(--el-fundo-2); }
.el-alternador button, .el-voltar {
  min-height: 2rem; border: 0; border-radius: 999px; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.el-alternador button { padding: 0 0.875rem; background: transparent; color: var(--el-tinta-2); }
.el-alternador button[aria-pressed="true"] { background: var(--el-superficie-alta); color: var(--el-tinta); box-shadow: 0 1px 2px var(--el-sombra); }
.el-voltar { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.75rem 0 0.5rem; background: var(--el-fundo-2); color: var(--el-tinta); }
.el-voltar svg { width: 1rem; height: 1rem; }
.el-tela { position: relative; width: min(100%, 62vh); width: min(100%, 62svh); aspect-ratio: 466 / 468.5; margin: 0.5rem auto 0; }
/* hidden: ampliado, o estado não pode cobrir a barra de ferramentas nem a legenda */
.el-svg { display: block; width: 100%; height: 100%; overflow: hidden; touch-action: manipulation; }
.el-aviso { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; color: var(--el-tinta-3); font-size: 0.875rem; text-align: center; }
.el-aviso.erro { color: var(--el-erro); }
.el-semjs { margin: 0.75rem 0 0; color: var(--el-tinta-2); font-size: 0.875rem; text-align: center; }

.el-palco { transform-box: view-box; transform-origin: 0 0; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.el-svg path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.el-mun path { stroke: var(--el-superficie); stroke-width: 0.25px; cursor: pointer; }
.el-mun g { transition: opacity 200ms ease-out; }
.el-mapa.zoom .el-mun path { stroke-width: 0.5px; }
.el-mapa.zoom .el-mun g:not(.ativo) { opacity: 0.28; }
.el-uf path { stroke: var(--el-superficie); stroke-width: 1px; cursor: pointer; }
.el-mapa[data-modo="municipios"] .el-uf path { fill: none; stroke: var(--el-contorno); stroke-width: 0.75px; pointer-events: none; }
.el-mapa[data-modo="estados"] .el-mun { display: none; }
.el-destaque path { fill: none; pointer-events: none; }
.el-destaque .el-realce { stroke: var(--el-tinta); stroke-width: 1.25px; }
.el-destaque .el-halo { stroke: var(--el-superficie); stroke-width: 4.5px; }
.el-destaque .el-selecao { stroke: var(--el-tinta); stroke-width: 2px; }

.el-dica {
  position: absolute; z-index: 5; top: 0; left: 0; display: grid; gap: 0.125rem;
  padding: 0.5rem 0.625rem; border-radius: 0.5rem; background: var(--el-tinta); color: var(--el-superficie);
  font-size: 0.8125rem; line-height: 1.3; white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 24px -8px var(--el-sombra);
}
.el-dica b { font-weight: 650; }
.el-dica span { opacity: 0.85; font-variant-numeric: tabular-nums; }

/* Legenda divergente */
.el-legenda { display: grid; gap: 0.375rem; max-width: 26rem; margin: 0.75rem auto 0; color: var(--el-tinta-2); font-size: 0.75rem; }
.el-legenda-titulo { margin: 0; color: var(--el-tinta-3); text-align: center; }
.el-escala, .el-marcas { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.el-escala i { height: 0.625rem; }
.el-escala i:first-child { border-radius: 999px 0 0 999px; }
.el-escala i:last-child { border-radius: 0 999px 999px 0; }
.el-marcas span { grid-row: 1; justify-self: start; color: var(--el-tinta-3); font-variant-numeric: tabular-nums; transform: translateX(calc(-50% - 1px)); }
.el-contagem { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; margin: 0.25rem 0 0; }
.el-contagem [data-cand]:first-child { grid-column: 1; justify-self: start; }
.el-contagem [data-cand]:nth-child(2) { grid-column: 3; justify-self: end; text-align: right; }
.el-contagem .el-empates { grid-row: 1; grid-column: 2; color: var(--el-tinta-3); }
.el-contagem b { color: var(--cor); font-weight: 650; }
.el-mapa[data-modo="municipios"] .el-contagem[data-modo="estados"],
.el-mapa[data-modo="estados"] .el-contagem[data-modo="municipios"] { display: none; }

/* Tabela por estado */
.el-tabela { margin-top: 2rem; border-top: 1px solid var(--el-linha); }
.el-tabela summary { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; font-weight: 600; list-style: none; cursor: pointer; }
.el-tabela summary::-webkit-details-marker { display: none; }
.el-tabela summary::after {
  content: ""; width: 0.5rem; height: 0.5rem; margin-right: 0.375rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 200ms ease-out;
}
.el-tabela[open] summary::after { transform: rotate(-135deg); }
.el-tabela-rolagem { overflow-x: auto; }
.el-tabela table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.el-tabela th, .el-tabela td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--el-linha); text-align: left; white-space: nowrap; }
.el-tabela thead th { color: var(--el-tinta-3); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.el-tabela tbody th { font-weight: 500; }
.el-tabela tfoot th, .el-tabela tfoot td { border-bottom: 0; font-weight: 700; }
.el-tabela .el-num { text-align: right; }
.el-ponto { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.375rem; border-radius: 50%; background: var(--cor); vertical-align: 0.05em; }

.el-rodape { display: grid; gap: 0.5rem; margin-top: 1.5rem; padding: 1rem 0 2rem; border-top: 1px solid var(--el-linha); color: var(--el-tinta-3); font-size: 0.8125rem; line-height: 1.55; }
.el-rodape p { max-width: 70ch; margin: 0; }

@container el (min-width: 40rem) {
  .el-manchete { font-size: 2.375rem; }
}

@container el (min-width: 46rem) {
  .el-grade {
    grid-template-areas: "busca mapa" "painel mapa";
    grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 1.75rem 2.5rem;
  }
}

@container painel (min-width: 26rem) {
  .el-dados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .el { padding-top: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .el *, .el *::after { transition: none !important; }
}