/* =========================================================================
   Urnas Eletrônicas Escolhidas — TRE-RJ
   Aplicação estática, embutida como iframe na aba "Urnas Eletrônicas
   Escolhidas" da Auditoria da Votação Eletrônica.

   A página é servida dentro de um quadro, então o corpo não tem margens
   próprias: quem dá o respiro é o conteúdo do portal em volta.
   ========================================================================= */

:root {
  --ue-azul:        #0b3d91;   /* azul institucional */
  --ue-amarelo:     #f5b301;   /* amarelo das abas do portal */
  --ue-texto:       #212529;
  --ue-texto-fraco: #6c757d;
  --ue-borda:       #dee2e6;
  --ue-borda-leve:  #e9ecef;
  --ue-zebra:       #f6f7f9;
  --ue-cabecalho:   #f8f9fa;
  --ue-hover:       #fff8e1;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: .25rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ue-texto);
  background: #fff;
}

/* ---- Cabeçalho da página avulsa ---------------------------------------- */

.ue-cabecalho { padding: 1rem .25rem; border-bottom: 3px solid var(--ue-amarelo); margin-bottom: 1rem; }
.ue-cabecalho h1 { margin: 0 0 .25rem; font-size: 1.35rem; color: var(--ue-azul); }
.ue-cabecalho p  { margin: 0; font-size: .82rem; color: var(--ue-texto-fraco); }

/* Embutida no portal, o cabeçalho institucional é o de lá */
body.ue-embutido .ue-cabecalho { display: none; }
body.ue-embutido { padding: 0; }

/* ---- Estados de carregamento e erro ------------------------------------ */

.ue-carregando, .ue-erro {
  margin: 0; padding: 1.5rem .5rem; text-align: center; font-size: .85rem;
  color: var(--ue-texto-fraco);
}
.ue-erro {
  color: #842029; background: #f8d7da;
  border: 1px solid #f5c2c7; border-radius: 4px; text-align: left;
}
.ue-erro strong { display: block; margin-bottom: .25rem; }

/* ---- Endereço dos testes (art. 60-A) ------------------------------------ */

.ue-local {
  margin: 0 0 .6rem;
  padding: .5rem .7rem;
  background: #f8f9fa;
  border-left: 3px solid var(--ue-amarelo);
  border-radius: 0 4px 4px 0;
  font-size: .82rem;
}
.ue-local-linha { margin: 0; }
/* 1.5rem, e não .45rem: cada endereço tem várias linhas próprias, e com o
   espaço curto os dois blocos se liam como um só. */
.ue-local-linha + .ue-local-linha { margin-top: 1.5rem; }

/* O endereço vem com quebras de linha próprias; o bloco respira um pouco
   abaixo do rótulo para os dois não se confundirem numa massa só. */
.ue-local-valor { margin-top: .1rem; line-height: 1.45; }
.ue-local-valor p { margin: 0 0 .3rem; }
.ue-local-valor p:last-child { margin-bottom: 0; }

/* A origem cadastra o endereço começando por um <h4> com o nome do evento
   (28/09/2026). Sem isto ele entra com o tamanho e as margens padrão do
   navegador — maior que o rótulo que está logo acima dele, e com um vão que
   parte o bloco em dois. Aqui ele vira o que de fato é: a primeira linha do
   endereço, um pouco destacada. */
.ue-local-valor h3,
.ue-local-valor h4,
.ue-local-valor h5,
.ue-local-valor h6 {
  margin: 0 0 .2rem;
  font-size: 1em;
  line-height: 1.45;
}

/* Relação ainda não divulgada. Tom informativo, e não de erro: publicando só
   produção, a relação fica legitimamente vazia até o sorteio oficial. O bloco
   de erro (.ue-erro) continua sendo outra coisa — ali houve falha. */
.ue-aguardando {
  display: flex; flex-direction: column; gap: .3rem;
  margin: 0; padding: 1rem 1.1rem;
  background: #f8f9fa;
  border-left: 3px solid var(--ue-azul);
  border-radius: 0 4px 4px 0;
  font-size: .9rem;
  line-height: 1.5;
}

/* ---- Barra de ferramentas ---------------------------------------------- */

.ue-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: space-between; margin-bottom: .6rem;
}

.ue-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ue-busca {
  flex: 1 1 240px; max-width: 340px; padding: .4rem .6rem;
  border: 1px solid #ced4da; border-radius: 4px;
  font: inherit; font-size: .8125rem; background: #fff; color: var(--ue-texto);
}
.ue-busca:focus { outline: 2px solid var(--ue-amarelo); outline-offset: 1px; border-color: var(--ue-amarelo); }

.ue-grupo-eleicao { display: flex; align-items: center; gap: .4rem; }

.ue-rotulo-eleicao {
  font-size: .8125rem; font-weight: 600; color: var(--ue-texto);
  white-space: nowrap;
}

.ue-eleicao {
  padding: .4rem .6rem; border: 1px solid #ced4da; border-radius: 4px;
  font: inherit; font-size: .8125rem; background: #fff; color: var(--ue-texto);
  max-width: 16rem;
}
.ue-eleicao:focus { outline: 2px solid var(--ue-amarelo); outline-offset: 1px; border-color: var(--ue-amarelo); }

.ue-info { font-size: .78rem; color: var(--ue-texto-fraco); text-align: right; }
.ue-info .ue-contador { font-weight: 600; color: var(--ue-texto); }

/* ---- Área rolável ------------------------------------------------------
   Aberta direto, a página rola por dentro da caixa, com o cabeçalho fixo no
   topo. Embutida, quem manda na altura é o quadro do Plone — ver adiante. */

.ue-scroll {
  width: 100%;
  overflow: auto;
  max-height: 70vh;
  min-height: 8rem;
  border: 1px solid var(--ue-borda);
  border-radius: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* não "vaza" a rolagem para a página do portal */
}
.ue-scroll:focus-visible { outline: 2px solid var(--ue-amarelo); outline-offset: 2px; }

.ue-tabela {
  /* 680px é o piso: abaixo disso as colunas de texto ficam ilegíveis de tão
     estreitas. Acima, quem manda é o conteúdo — o Local de Votação quebra em
     mais linhas e a tabela cabe na coluna do portal, sem barra horizontal.
     O chão real é o Código de Carga: 25 dígitos sem espaço onde quebrar, ou
     seja, ~235px que não espremem. Rever quando entrarem Cód. de
     Correspondência e Modalidade. */
  width: 100%; border-collapse: collapse; min-width: 680px;
  background: #fff; font-size: .8125rem;
}

/* Embutida: sem limite de altura próprio.
   Dentro do iframe, `vh` é a altura DO QUADRO, não a da janela. Com um
   quadro de 620px, o limite de 70vh virava 434px e a tabela ganhava uma
   barra de rolagem vertical própria, ainda que houvesse espaço de sobra na
   página do portal. Quem decide a altura ali é o campo "Altura da página" da
   Janela; a tabela só precisa caber nele. A rolagem horizontal continua. */
body.ue-embutido .ue-scroll {
  max-height: none;
}
/* Sem overflow-y: visible aqui: com overflow-x em auto, o outro eixo é
   forçado a auto pela especificação. Não é preciso — sem limite de altura a
   caixa cresce com o conteúdo e simplesmente não há transbordo vertical.
   Em troca, o cabeçalho fixo deixa de valer quando embutida: quem rola é a
   página do portal, não a caixa. */

/* ---- Cabeçalho da tabela ----------------------------------------------- */

.ue-tabela thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ue-cabecalho);
  border-bottom: 2px solid var(--ue-borda);
  padding: .45rem .6rem; text-align: left; vertical-align: middle;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.3; color: #343a40;
}

/* Centralizado na vertical, e não alinhado pela base: os rótulos têm alturas
   diferentes porque os longos quebram em duas linhas ("ZONA ELEITORAL", "LOCAL
   DE VOTAÇÃO"), e com vertical-align: bottom os curtos desciam enquanto os
   longos subiam — a linha do cabeçalho ficava serrilhada. Centralizar resolve
   sem depender de quais rótulos quebram, o que muda com a largura da tela.

   Bloco, e não inline-flex: como flex, o rótulo não quebrava em duas linhas,
   e cada coluna reservava a largura do título inteiro — "ZONA ELEITORAL" e
   "Nº INTERNO DA URNA" tomavam mais espaço que os próprios valores, deixando
   o Município espremido. Em bloco, o texto quebra e o alinhamento dos
   numéricos sai pelo text-align, sem precisar de justify-content. */
.ue-tabela thead th button {
  all: unset; cursor: pointer; display: block;
  width: 100%; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit;
}
.ue-tabela thead th button:hover { color: var(--ue-azul); }
.ue-tabela thead th button:focus-visible { outline: 2px solid var(--ue-amarelo); outline-offset: 2px; }

.ue-seta { font-size: .7em; line-height: 1; opacity: .45; margin-left: .35rem;
            white-space: nowrap; }
.ue-tabela th[aria-sort="ascending"]  .ue-seta,
.ue-tabela th[aria-sort="descending"] .ue-seta { opacity: 1; color: var(--ue-azul); }
.ue-tabela th[aria-sort="ascending"],
.ue-tabela th[aria-sort="descending"] { box-shadow: inset 0 -3px 0 var(--ue-amarelo); }

/* ---- Corpo -------------------------------------------------------------- */

.ue-tabela tbody td {
  padding: .45rem .6rem; border-bottom: 1px solid var(--ue-borda-leve);
  vertical-align: middle; line-height: 1.4;
}

/* Zebra por classe: acompanha a ordenação e o filtro, ao contrário de nth-child */
.ue-tabela tbody tr.ue-par { background: var(--ue-zebra); }
.ue-tabela tbody tr:hover  { background: var(--ue-hover); }

.ue-nowrap { white-space: nowrap; }

/* Colunas numéricas centralizadas, valores e cabeçalho. */
.ue-num { text-align: center; }

/* Centralizadas por decisão de layout, e não por serem numéricas: são códigos
   curtos e de largura fixa, que alinhados à esquerda ficavam soltos na coluna.
   É para isso que existe a classe por coluna — ajustar uma sem depender da
   posição dela na tabela. */
.ue-col-cod_corresp,
.ue-col-modalidade { text-align: center; }

/* Largura mínima do Município: sem ela, "PARAÍBA DO SUL" quebrava em duas
   linhas nas 33 urnas, custando ~500px de altura à toa. Um nome longo, como
   "SÃO JOSÉ DO VALE DO RIO PRETO", ainda quebra — e deve mesmo, senão a
   tabela ficaria mais larga que a coluna do portal. */
.ue-col-municipio { min-width: 8.5rem; }

/* Código de Carga: dígitos de largura fixa, para alinhar de uma linha à outra */
.ue-carga { font-variant-numeric: tabular-nums; }

.ue-situacao {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .75rem; white-space: nowrap;
  background: #e7f4ea; color: #1c6b33;
}
.ue-situacao.ue-situacao-pendente { background: #fff3cd; color: #7a5b00; }
.ue-situacao.ue-situacao-negativa { background: #f8d7da; color: #842029; }

/* Modalidade do teste. Duas modalidades previstas, nenhuma delas um problema:
   por isso "sem biometria" sai em cinza-azulado neutro, e não em vermelho —
   vermelho numa página pública sugere alerta, e o cidadão leria como se a urna
   tivesse algo de errado. A cor distingue; quem informa é o texto. */
.ue-modalidade {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .75rem; white-space: nowrap;
  background: #eef2f7; color: #37475a;
}
.ue-modalidade.ue-modalidade-com { background: #e7f4ea; color: #1c6b33; }
.ue-modalidade.ue-modalidade-sem { background: #eef2f7; color: #37475a; }

.ue-vazio { padding: 1.25rem .6rem; text-align: center; color: var(--ue-texto-fraco); }

/* ---- Telas estreitas ---------------------------------------------------- */

@media (max-width: 767px) {
  .ue-tabela thead th { padding: .4rem .45rem; font-size: .65rem; }
  .ue-tabela tbody td { padding: .4rem .45rem; font-size: .75rem; }
  .ue-info { text-align: left; }
  .ue-scroll { max-height: 60vh; }
}

/* ---- Impressão ---------------------------------------------------------- */

@media print {
  .ue-toolbar { display: none; }
  .ue-scroll  { overflow: visible; max-height: none; border: 0; }
  .ue-tabela  { min-width: 0; font-size: .6rem; }
  .ue-tabela thead th { position: static; font-size: .55rem; }
  .ue-tabela tbody tr.ue-par { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}