/* Tablet do apresentador — NC News Eleicoes 2026
   Base 1024x768 CSS px (iPad 2048x1536 @2x). A escala sobe por min(vw, vh) para 16:10 e 1920x1080.
   Animacoes: somente transform e opacity. Nada depende de hover. */
:root {
  --roxo: #791CFF; --roxo-prof: #250751; --tinta: #202020; --cinza-esc: #474E5B; --cinza-med: #616A7B;
  --cinza: #9299AA; --linha: #EDEDED; --bloco: #F2F2F2; --fundo: #FFFFFF;
  --c1: #791CFF; --c2: #C2570D; --c3: #0E7FA8; --c4: #B01A6E; --c5: #2F8547; --outros: #77848F;
  --positivo: #2F8547; --atencao: #8A5A00; --negativo: #A6130A;
  --toque: max(48px, 3rem);
  --raio: 0.5rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-size: clamp(14px, min(1.5625vw, 2.0833vh), 28px);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta); overflow: hidden;
  font-family: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--roxo); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
[hidden] { display: none !important; }

.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh;
  padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); }

/* ---------- topo ---------- */
.topo { min-width: 0; display: flex; align-items: center; gap: 1rem; padding-block: 0.625rem; border-bottom: 2px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.marca img { height: 2.5rem; width: auto; display: block; }
.marca-txt { font-weight: 700; color: var(--roxo-prof); font-size: 1.125rem; white-space: nowrap; }
.espaco { flex: 1; }
.seg { display: inline-flex; background: var(--bloco); border-radius: var(--raio); padding: 0.25rem; gap: 0.25rem; }
.seg button { min-height: var(--toque); min-width: var(--toque); padding-inline: 1.125rem; border-radius: calc(var(--raio) - 2px);
  font-weight: 700; font-size: 1rem; color: var(--cinza-esc); transition: transform .15s var(--ease); }
.seg button[aria-pressed="true"] { background: var(--roxo-prof); color: #fff; }
.seg button:active, .btn:active, .uf:active, .card-toque:active { transform: scale(.96); }
.btn { min-height: var(--toque); min-width: var(--toque); padding-inline: 1.125rem; border-radius: var(--raio);
  background: var(--bloco); font-weight: 700; font-size: 1rem; color: var(--roxo-prof); transition: transform .15s var(--ease); }
.status { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding-inline: 0.75rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; border: 2px solid currentColor; }
.status::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: currentColor; }
.status[data-fonte="api"] { color: var(--positivo); }
.status[data-fonte="api"][data-sse="1"]::before { animation: pulso 1.6s ease-in-out infinite; }
.status[data-fonte="cache"] { color: var(--atencao); }
.status[data-fonte="fixture"] { color: var(--negativo); }
@keyframes pulso { 50% { opacity: .25; transform: scale(.7); } }

/* ---------- miolo ---------- */
.miolo { min-height: 0; position: relative; }
.tela { position: absolute; inset: 0; display: grid; gap: 1rem; padding-block: 0.875rem; min-height: 0;
  animation: entra .28s var(--ease) both; }
@keyframes entra { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
.pesq { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.apur { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.col { min-height: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.painel { min-height: 0; flex: 1; position: relative; }
.rolagem { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
h2 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--roxo-prof); line-height: 1.2; }
.sub { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--cinza-esc); }
.rotulo { font-size: 0.8125rem; font-weight: 700; color: var(--cinza-esc); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- graficos ---------- */
.grafico { position: absolute; inset: 0; }
.grafico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.grafico text { font-family: inherit; }
.eixo { font-size: 13px; font-weight: 600; fill: var(--cinza-esc); }
.grade { stroke: var(--linha); stroke-width: 1.5; }
.fade { animation: fade .45s var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* barras HTML: preenchimento via transform scaleX */
.lista { display: flex; flex-direction: column; gap: 0.625rem; }
.linha-cand { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 0.25rem 0.625rem; align-items: center; }
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bloco); grid-row: span 2; object-fit: cover; border: 3px solid var(--c); }
.nome { font-weight: 700; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nome small { font-weight: 600; color: var(--cinza-esc); font-size: 0.8125rem; margin-left: 0.25rem; }
.valor { font-weight: 700; font-size: 1.625rem; line-height: 1; text-align: right; grid-row: span 2; }
.valor small { font-size: 0.75rem; display: block; font-weight: 700; margin-top: 0.25rem; }
.trilho { height: 0.75rem; background: var(--bloco); border-radius: 999px; overflow: hidden; }
.trilho i { display: block; height: 100%; background: var(--c); transform-origin: left center; transform: scaleX(var(--p)); border-radius: 999px;
  animation: cresce .7s var(--ease) both; }
@keyframes cresce { from { transform: scaleX(0); } }
.sobe { color: var(--positivo); } .desce { color: var(--negativo); } .igual { color: var(--cinza-esc); }
.tag { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--atencao); border: 1.5px solid currentColor; border-radius: 4px; padding: 0 0.3rem; margin-left: 0.375rem; vertical-align: middle; }

/* institutos lado a lado */
.multiplos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem; height: 100%; }
.multiplo { background: var(--bloco); border-radius: var(--raio); padding: 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.multiplo h3 { margin: 0; font-size: 1.125rem; color: var(--roxo-prof); }
.multiplo .meta { font-size: 0.75rem; color: var(--cinza-med); font-weight: 600; }
.mb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.5rem; font-size: 0.9375rem; }
.mb .trilho { grid-column: 1 / -1; height: 0.625rem; background: #fff; }
.mb b { font-size: 1.125rem; }

/* 2o turno */
.cenarios { display: flex; flex-direction: column; gap: 1rem; }
.cenario { background: var(--bloco); border-radius: var(--raio); padding: 0.875rem 1rem; }
.cen-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cen-nomes { display: flex; justify-content: space-between; margin-top: 0.5rem; font-weight: 700; font-size: 1.125rem; }
.cen-nomes span:last-child { text-align: right; }
.cen-nomes b { display: block; font-size: 2.25rem; line-height: 1.05; }
.pilha { display: flex; height: 1.25rem; border-radius: 4px; overflow: hidden; margin-top: 0.5rem; background: #fff; }
.pilha i { display: block; height: 100%; }
.pilha .meio { background: repeating-linear-gradient(135deg, #D6D9DF 0 6px, #fff 6px 10px); }

/* apuracao */
.urnas { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: end; }
.urnas .grande { font-size: 3.25rem; font-weight: 700; line-height: .95; color: var(--roxo-prof); }
.urnas .trilho { grid-column: 1 / -1; height: 1rem; }
.urnas .trilho i { --c: var(--roxo); }
.viradas { display: flex; flex-direction: column; gap: 0.375rem; }
.virada { display: flex; gap: 0.625rem; align-items: center; font-size: 0.9375rem; padding: 0.5rem 0.75rem; background: var(--bloco); border-radius: var(--raio);
  border-left: 0.3rem solid var(--c); min-height: var(--toque); width: 100%; text-align: left; }
.virada b.uf-sig { font-size: 1.125rem; color: var(--roxo-prof); min-width: 2rem; }

.mapa-wrap { flex: 1; width: 100%; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; flex: 1; }
.mapa { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 0.3rem; aspect-ratio: 7 / 7; max-height: 100%; max-width: 100%; margin-inline: auto; width: min(100%, var(--mapa-h, 100%)); }
.uf { min-width: 48px; min-height: 48px; border-radius: 0.375rem; background: var(--c, var(--cinza)); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.05; transition: transform .15s var(--ease); position: relative; }
.uf b { font-size: 1.0625rem; font-weight: 700; }
.uf span { font-size: 0.75rem; font-weight: 700; opacity: .95; }
.uf[data-virou="1"]::after { content: ""; position: absolute; inset: -4px; border: 3px solid var(--tinta); border-radius: 0.5rem; }
.legenda { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.875rem; }
.legenda span { display: inline-flex; align-items: center; gap: 0.375rem; }
.legenda i { width: 0.875rem; height: 0.875rem; border-radius: 3px; background: var(--c); display: inline-block; }

/* ---------- rodape art. 10 ---------- */
.rodape { display: flex; align-items: center; gap: 1rem; min-height: calc(var(--toque) + 1.25rem);
  padding-block: 0.625rem max(0.625rem, env(safe-area-inset-bottom)); padding-left: 9.5rem; border-top: 2px solid var(--linha); }
.art10 { font-size: 0.8125rem; font-weight: 600; color: var(--cinza-esc); line-height: 1.35; min-width: 0; }
.art10 b { color: var(--tinta); font-weight: 700; }
.art10 .sep { color: var(--cinza); padding-inline: 0.25rem; }

/* botao Brasil fixo na zona do polegar */
.brasil { position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: max(0.625rem, env(safe-area-inset-bottom)); z-index: 30;
  min-height: calc(var(--toque) + 0.5rem); min-width: 8rem; padding-inline: 1.25rem; border-radius: 999px; background: var(--roxo-prof); color: #fff;
  font-weight: 700; font-size: 1.125rem; box-shadow: 0 0.25rem 1rem rgba(37, 7, 81, .28); transition: transform .15s var(--ease); }
.brasil:active { transform: scale(.95); }

/* ---------- ficha do estado (sheet) ---------- */
.veu { position: fixed; inset: 0; background: rgba(32, 32, 32, .35); z-index: 10; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.veu.aberto { opacity: 1; pointer-events: auto; }
.ficha { position: fixed; top: 0; right: 0; bottom: 0; width: min(100vw, 78%); z-index: 20; background: var(--fundo);
  box-shadow: -0.5rem 0 2rem rgba(0, 0, 0, .18); transform: translateX(105%); transition: transform .32s var(--ease);
  display: grid; grid-template-rows: auto auto 1fr auto; padding: 0.875rem 1.25rem 0; will-change: transform; }
.ficha.aberta { transform: none; }
.ficha-topo { display: flex; align-items: center; gap: 1rem; }
.ficha-topo h2 { font-size: 1.75rem; }
.ficha-abas { padding-block: 0.625rem; }
.ficha-corpo { min-height: 0; position: relative; }
.ficha-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; height: 100%; }
.ficha .rodape { padding-left: 9.5rem; margin-left: -1.25rem; }

/* seletor de UF (modo pesquisas) */
.seletor .mapa { width: min(100%, 34rem); }

.aviso { padding: 1rem; background: var(--bloco); border-radius: var(--raio); color: var(--cinza-esc); font-size: 1rem; }

/* Controle sem dado fica desabilitado (opacidade reduzida), nunca escondido. */
.seg button.indisponivel { opacity: .45; }

@media (max-aspect-ratio: 5/4) { /* 4:3 */
  .pesq { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .urnas .grande { font-size: 2.75rem; }
}
@media (max-width: 1100px) { .marca-txt { display: none; } .seg button, .btn { padding-inline: 0.8rem; } .topo { gap: 0.625rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }