/* urna.css — Folha de estilos única da interface VotaCNPq
   Tokens CSS, componentes urna-card, teclado, display LED e print CSS.
   Conforme UI-SPEC Phase 2 — sem build step, sem preprocessador (D-01).
*/

/* =========================================================================
   Tokens CSS — Design System
   ========================================================================= */
:root {
  /* Cores (UI-SPEC Color) */
  --color-bg:         #1a1a2e;   /* body / urna card bg (dominante 60%) */
  --color-panel:      #0d1117;   /* display panel bg (secundário 30%) */
  --color-border:     #2d6a4f;   /* borda do painel + linhas estruturais (TSE green) */
  --color-text:       #e8e8e8;   /* texto primário em superfícies escuras */
  --color-muted:      #8a8a9a;   /* rótulos secundários, header strip, placeholder */
  --color-led:        #39ff14;   /* dígito ativo no display (LED green) */
  --color-confirma:   #2d6a4f;   /* botão CONFIRMA background */
  --color-corrige:    #c87941;   /* botão CORRIGE background */
  --color-error:      #c0392b;   /* banners de erro e estado inválido */
  --color-key-bg:     #2a2a3e;   /* fundo dos botões de dígito */
  --color-key-border: #3a3a5e;   /* borda dos botões de dígito */

  /* Espaçamento (UI-SPEC Spacing Scale — múltiplos de 4px) */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* Tipografia (UI-SPEC Typography — exatamente 4 tamanhos: 13, 16, 20, 32px) */
  --font-led:  'Courier New', Courier, monospace;  /* display LED e hash */
  --font-body: Arial, 'Helvetica Neue', sans-serif; /* todo o restante */
}

/* =========================================================================
   Reset e Base
   ========================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  min-height: 100vh;
}

a {
  color: var(--color-led);
}

/* =========================================================================
   Layout — Centralização da urna
   ========================================================================= */
.page-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-xl) var(--sp-md); /* 32px vertical, 16px horizontal (mobile) */
}

@media (min-width: 768px) {
  .page-center {
    padding: var(--sp-3xl) var(--sp-md); /* 64px vertical no desktop */
  }
}

/* =========================================================================
   Urna Card — Componente principal
   ========================================================================= */
.urna-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--sp-lg); /* 24px interno */
  width: 100%;
  max-width: 400px; /* D-10 — largura máxima para mobile e desktop */
}

@media (min-width: 480px) {
  .urna-card {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.urna-card--info {
  text-align: center;
}

/* =========================================================================
   Header Strip — "TRIBUNAL SUPERIOR ELEITORAL"
   ========================================================================= */
.urna-header-strip {
  background-color: var(--color-panel);
  color: var(--color-muted);
  font-size: 13px;   /* UI-SPEC small labels */
  font-weight: 400;
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  padding: var(--sp-sm) var(--sp-md); /* 8px 16px */
  margin-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--color-border);
}

.urna-subheading {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 400;
  margin-bottom: var(--sp-md);
  text-align: center;
}

.urna-heading {
  font-size: 20px;  /* UI-SPEC confirmation heading */
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-md);
  text-align: center;
}

.urna-body {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--sp-sm);
}

/* =========================================================================
   Display Panel — LED
   ========================================================================= */
.display-panel {
  background-color: var(--color-panel);
  border: 1px solid var(--color-border);
  padding: var(--sp-md);  /* 16px */
  font-family: var(--font-led);
  font-size: 32px;  /* UI-SPEC LED display size */
  font-weight: 700;
  color: var(--color-led);
  min-height: 56px;
  margin-bottom: var(--sp-sm);
  letter-spacing: 0.1em;
}

.display-digit--idle    { color: var(--color-muted); }
.display-digit--active  { color: var(--color-led); }
.display-digit--invalid { color: var(--color-error); }

/* =========================================================================
   Candidate Zone — Avatar + nome do candidato
   ========================================================================= */
.candidate-zone {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);  /* 8px */
  padding: var(--sp-sm) 0;
  margin-bottom: var(--sp-sm);
  opacity: 1;
  transition: opacity 200ms ease-in;
}

.candidate-zone.hidden {
  display: none;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;  /* UI-SPEC candidate name size */
  font-weight: 700;
  font-family: var(--font-body);
  color: #ffffff;
  flex-shrink: 0;
}

.candidate-name {
  font-size: 16px;  /* UI-SPEC candidate name size */
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.3;
}

.candidate-info {
  flex: 1;
}

/* =========================================================================
   Keypad Grid — 3×3 + linha inferior + linha de ação
   ========================================================================= */
.keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);  /* 8px */
  margin-bottom: var(--sp-sm);
}

.keypad-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-sm);  /* 8px */
  margin-bottom: var(--sp-sm);
}

.keypad-action-row {
  display: flex;
  gap: var(--sp-sm);  /* 8px */
  margin-top: var(--sp-sm);  /* 8px */
}

/* =========================================================================
   Keypad Buttons — Dígitos, BRANCO, NULO
   ========================================================================= */
.key-digit,
.key-branco,
.key-nulo {
  min-height: 44px;  /* D-10 — touch target mínimo de 44px */
  background-color: var(--color-key-bg);
  border: 1px solid var(--color-key-border);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 16px;  /* UI-SPEC keypad digit size */
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 80ms ease;  /* UI-SPEC Animation */
  width: 100%;
}

.key-digit:hover {
  background-color: var(--color-key-border);
}

.key-digit:active {
  background-color: var(--color-bg);
}

.key-digit:focus-visible {
  outline: 2px solid var(--color-led);  /* UI-SPEC Accessibility focus ring */
  outline-offset: 2px;
}

/* BRANCO Button */
.key-branco {
  background-color: #1a3a2a;  /* UI-SPEC dark green tint */
  border-color: var(--color-key-border);
  color: #a8d5b5;  /* UI-SPEC BRANCO text color */
  font-size: 13px;  /* UI-SPEC small labels */
}

.key-branco:hover {
  background-color: #243d2a;
}

.key-branco:focus-visible {
  outline: 2px solid var(--color-led);
  outline-offset: 2px;
}

/* NULO Button */
.key-nulo {
  background-color: #2a1a1a;  /* UI-SPEC dark red tint */
  border-color: var(--color-key-border);
  color: #d5a8a8;  /* UI-SPEC NULO text color */
  font-size: 13px;  /* UI-SPEC small labels */
}

.key-nulo:hover {
  background-color: #3a2020;
}

.key-nulo:focus-visible {
  outline: 2px solid var(--color-led);
  outline-offset: 2px;
}

/* =========================================================================
   Action Buttons — CONFIRMA e CORRIGE
   ========================================================================= */
.btn-confirma {
  background-color: var(--color-confirma);
  color: #ffffff;
  height: 48px;
  flex: 1;
  border: none;
  border-radius: 4px;
  font-size: 13px;  /* UI-SPEC small labels / action button text */
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 80ms ease;
  width: 100%;
}

.btn-confirma:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-confirma:not(:disabled):hover {
  background-color: #3a7d5f;
}

.btn-confirma:focus-visible {
  outline: 2px solid var(--color-led);
  outline-offset: 2px;
}

.btn-corrige {
  background-color: var(--color-corrige);
  color: #ffffff;
  height: 48px;
  flex: 1;
  border: none;
  border-radius: 4px;
  font-size: 13px;  /* UI-SPEC small labels / action button text */
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 80ms ease;
  width: 100%;
}

.btn-corrige:hover {
  background-color: #d98951;
}

.btn-corrige:focus-visible {
  outline: 2px solid var(--color-led);
  outline-offset: 2px;
}

/* =========================================================================
   Login Form — Campos matricula e PIN
   ========================================================================= */
#login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);  /* 8px entre elementos */
}

#login-form label {
  font-size: 13px;  /* UI-SPEC small labels */
  font-weight: 400;
  color: var(--color-muted);
}

#login-form input,
#admin-password {
  background-color: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 16px;  /* UI-SPEC candidate name size for inputs */
  font-family: var(--font-body);
  padding: var(--sp-sm) var(--sp-md);  /* 8px 16px */
  height: 44px;  /* D-10 touch target */
  width: 100%;
}

#login-form input::placeholder,
#admin-password::placeholder {
  color: var(--color-muted);
}

#login-form input:focus,
#admin-password:focus {
  outline: 2px solid var(--color-led);
  outline-offset: 2px;
}

#login-form .btn-confirma {
  margin-top: var(--sp-sm);
}

/* =========================================================================
   Error Banner
   ========================================================================= */
.error-banner {
  background-color: var(--color-error);
  color: #ffffff;
  font-size: 13px;  /* UI-SPEC small labels */
  font-weight: 400;
  padding: var(--sp-sm) var(--sp-md);  /* 8px 16px */
  border-radius: 4px;
  margin-bottom: var(--sp-sm);
  opacity: 1;
  transition: opacity 150ms ease;  /* UI-SPEC Animation */
}

/* Flash messages */
.flash-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.flash {
  padding: var(--sp-sm) var(--sp-md);
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}

.flash--message,
.flash-- {
  background-color: var(--color-error);
  color: #ffffff;
}

/* =========================================================================
   Utility
   ========================================================================= */
.hidden {
  display: none;
}

/* =========================================================================
   Comprovante Page — Fundo claro para impressão (Screen 4)
   ========================================================================= */
.comprovante-page {
  max-width: 400px;
  margin: var(--sp-2xl) auto;  /* 48px vertical */
  padding: var(--sp-lg);  /* 24px */
  color: #1a1a2e;
  background: #ffffff;
  border-radius: 4px;
}

.comprovante-page h1 {
  font-size: 20px;  /* UI-SPEC confirmation heading */
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: var(--sp-md);
}

.comprovante-page p {
  font-size: 13px;
  color: #1a1a2e;
  margin-bottom: var(--sp-sm);
  line-height: 1.5;
}

.hash-block {
  background: #f4f4f5;
  border: 1px solid #2d6a4f;
  border-radius: 4px;
  padding: var(--sp-md);  /* 16px */
  font-family: var(--font-led);
  font-size: 13px;  /* UI-SPEC small labels for hash */
  color: #1a1a2e;
  word-break: break-all;
  line-height: 1.6;
  margin-bottom: var(--sp-md);
  white-space: pre-wrap;
}

.instrucoes {
  font-size: 13px;
  color: #1a1a2e;
  line-height: 1.5;
  margin-bottom: var(--sp-lg);
}

/* =========================================================================
   Print CSS — Comprovante imprimível (D-15, D-16)
   ========================================================================= */
@media print {
  body {
    background: #ffffff;
    color: #1a1a2e;
  }

  .no-print {
    display: none !important;
  }

  .hash-block {
    background: #f4f4f5;
    border: 1px solid #2d6a4f;
    padding: var(--sp-md);
  }

  .comprovante-page {
    margin: 0;
    padding: var(--sp-md);
    box-shadow: none;
    border: none;
  }
}

/* === Phase 3 — Admin & Resultado === */

/* Card modifiers */
.urna-card--admin {
  max-width: 680px;
}

.urna-card--resultado {
  max-width: 560px;
}

/* Election status badge */
.status-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: 4px;
  border: 1px solid;
}

.status-badge--pending {
  background: #1a3a5c;
  color: #7ab4e0;
  border-color: #2a5a8c;
}

.status-badge--open {
  background: #1a3a2a;
  color: #a8d5b5;
  border-color: var(--color-border);
}

.status-badge--closed {
  background: #3a1a1a;
  color: #d5a8a8;
  border-color: #6a2a2a;
}

/* Admin action buttons */
.btn-encerrar {
  background-color: var(--color-error);
  color: #ffffff;
  height: 48px;
  width: 100%;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 80ms ease;
}

.btn-encerrar:hover { background-color: #a93226; }
.btn-encerrar:focus-visible { outline: 2px solid var(--color-led); outline-offset: 2px; }

.btn-atualizar,
.btn-exportar {
  display: inline-block;
  background-color: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 80ms ease;
}

/* Vote count and audit tables */
.contagem-table,
.auditoria-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.contagem-table td,
.auditoria-table td,
.contagem-table th,
.auditoria-table th {
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.contagem-table .total-row td {
  border-top: 2px solid var(--color-border);
  font-weight: 700;
}

/* Result rows */
.resultado-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--color-panel);
  margin-bottom: 2px;
}

.resultado-row--winner {
  background: #1a3a2a;
  border-left: 4px solid var(--color-confirma);
  font-weight: 700;
}

.resultado-row--branco { }

.resultado-row--nulo { }

.resultado-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 2px;
  flex: 1;
}

/* Stats summary block */
.stats-block {
  background: var(--color-panel);
  padding: var(--sp-md);
  margin-top: var(--sp-md);
  font-size: 13px;
  color: var(--color-muted);
}

/* Admin footer (logout area) */
.admin-footer {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--color-border);
  text-align: right;
}

/* Muted text when result/action not available */
.estado-indisponivel {
  color: var(--color-muted);
  font-size: 13px;
}

/* Native dialog element styling */
dialog {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--sp-lg);
  max-width: 360px;
  color: var(--color-text);
  position: fixed;
  inset: 0;
  margin: auto;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* =========================================================================
   Quick 260618-gb2 — Redesenho: login só-matrícula + cartões de candidato
   APPEND-ONLY: estilos novos abaixo não alteram telas existentes
   (comprovante, admin, resultado, auditoria, ja_votou).
   ========================================================================= */

/* --- Tela de login institucional (D-02) --- */
.login-card {
  background: linear-gradient(160deg, #1f2746 0%, var(--color-bg) 100%);
  border: 1px solid var(--color-key-border);
  border-radius: 16px;
  padding: var(--sp-2xl) var(--sp-xl);  /* 48px / 32px */
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Painel branco para os logos institucionais (azuis) contrastarem no card escuro */
.login-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-lg);
  background: #ffffff;
  border-radius: 14px;
  padding: var(--sp-md) var(--sp-lg);
}

.login-logo-img { display: block; height: auto; max-width: 100%; }
.login-logo-cnpq  { height: 92px; }
.login-logo-ascon { height: 64px; }

/* Fallback de texto quando o arquivo de logo ainda não foi salvo */
.login-logo-fallback {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1b4f9c;
}

.login-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: var(--sp-xl);
}

@media (min-width: 480px) {
  .login-title { font-size: 28px; }
}

/* Campo de matrícula maior nesta tela */
.login-card #login-form input {
  font-size: 18px;
  height: 52px;
  text-align: center;
}

/* Botão ENTRAR grande (D-02) */
.btn-entrar {
  margin-top: var(--sp-md);
  width: 100%;
  min-height: 60px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1976d2 0%, var(--color-confirma) 100%);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: filter 120ms ease, transform 80ms ease;
}

.btn-entrar:hover { filter: brightness(1.08); }
.btn-entrar:active { transform: translateY(1px); }
.btn-entrar:focus-visible {
  outline: 3px solid var(--color-led);
  outline-offset: 3px;
}

/* --- Tela de votação moderna (D-03, D-04, D-07) --- */
.votar-card {
  max-width: 720px;
  background: linear-gradient(165deg, #20284a 0%, var(--color-bg) 100%);
  border: 1px solid var(--color-key-border);
  border-radius: 16px;
  /* TROCAR por imagem de fundo real:
     background-image: url('/static/fundo-votacao.jpg');
     background-size: cover; background-position: center; */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

@media (min-width: 480px) {
  .votar-card { width: 720px; margin-left: auto; margin-right: auto; }
}

.greeting {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-led);
  margin-bottom: var(--sp-xs);
}

@media (min-width: 480px) {
  .greeting { font-size: 24px; }
}

.votar-card .urna-heading {
  font-size: 22px;
  margin-bottom: var(--sp-lg);
}

/* Grid responsivo de cartões */
.candidate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

@media (min-width: 560px) {
  .candidate-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

/* Cartão clicável de candidato */
.candidate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-sm);
  padding: var(--sp-lg) var(--sp-md);
  background: var(--color-panel);
  border: 2px solid var(--color-key-border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

.candidate-card:hover {
  border-color: #3a7d5f;
  transform: translateY(-2px);
}

.candidate-card:focus-visible {
  outline: 3px solid var(--color-led);
  outline-offset: 3px;
}

.candidate-card.selected,
.candidate-card[aria-selected="true"] {
  border-color: var(--color-led);
  box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35);
  background: #18213a;
}

.card-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-body);
  color: #ffffff;
  flex-shrink: 0;
}

.card-nome {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.card-bio {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-muted);
}

/* Variações BRANCO / NULO */
.candidate-card.card--branco { border-style: dashed; }
.candidate-card.card--nulo   { border-style: dashed; }

/* Bio na tela de confirmação (renderCandidato) */
.candidate-bio {
  font-size: 14px;
  color: var(--color-muted);
  margin-top: var(--sp-xs);
}

/* Botão "Sair das eleições" (D-04) — secundário/discreto */
.btn-sair-wrapper {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-key-border);
  text-align: center;
}

.btn-sair {
  background: transparent;
  color: var(--color-corrige);
  border: 1px solid var(--color-corrige);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  padding: var(--sp-sm) var(--sp-lg);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.btn-sair:hover {
  background: var(--color-corrige);
  color: #ffffff;
}

.btn-sair:focus-visible {
  outline: 3px solid var(--color-led);
  outline-offset: 3px;
}

/* CONFIRMA/CORRIGE maiores nas telas de votação/confirmação */
.votar-card .btn-confirma,
.votar-card .btn-corrige {
  height: 56px;
  font-size: 16px;
}

/* =========================================================================
   Plano 07-02 — Painel de lista de votações e tela de detalhe
   APPEND-ONLY: não altera nenhuma regra existente acima.
   ========================================================================= */

/* Variante de page-center com max-width maior para o painel admin */
.page-center--wide {
  align-items: flex-start;
  padding-top: var(--sp-xl);
}

/* Barra superior do painel: título + botão Nova votação */
.panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
  gap: var(--sp-sm);
}

.panel-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

/* Botão Nova votação */
.btn-nova-votacao {
  background-color: var(--color-confirma);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 80ms ease;
}

.btn-nova-votacao:hover { background-color: #3a7d5f; }
.btn-nova-votacao:focus-visible { outline: 2px solid var(--color-led); outline-offset: 2px; }

/* Seções atuais / histórico */
.eleicao-section {
  margin-bottom: var(--sp-lg);
}

.eleicao-section--historico {
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-md);
}

.eleicao-section__titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--sp-sm);
}

/* Lista de eleições */
.eleicao-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Linha de eleição */
.eleicao-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--color-panel);
  border-radius: 4px;
  flex-wrap: wrap;
}

.eleicao-row--closed {
  opacity: 0.75;
}

.eleicao-row__info {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex: 1;
  min-width: 0;
}

.eleicao-row__titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Metadados: votos e participação */
.eleicao-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: 13px;
  color: var(--color-muted);
  flex-shrink: 0;
}

.eleicao-meta__item { white-space: nowrap; }
.eleicao-meta__sep  { color: var(--color-border); }

/* Estado vazio de seção */
.eleicao-empty {
  font-size: 13px;
  color: var(--color-muted);
  padding: var(--sp-sm) 0;
}

/* Botão Gerir / Ver */
.btn-gerir {
  display: inline-block;
  background-color: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  padding: var(--sp-xs) var(--sp-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 80ms ease;
  flex-shrink: 0;
}

.btn-gerir:hover { background-color: var(--color-key-bg); }
.btn-gerir--muted { color: var(--color-muted); }
.btn-gerir:focus-visible { outline: 2px solid var(--color-led); outline-offset: 2px; }

/* Tela de detalhe de eleição */
.eleicao-nav {
  margin-bottom: var(--sp-md);
}

.eleicao-nav__back {
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
}

.eleicao-nav__back:hover { color: var(--color-text); }

.eleicao-detalhe-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-bottom: var(--sp-xs);
}

.eleicao-detalhe-titulo {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.eleicao-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: var(--sp-lg);
}

/* Área de ações da tela de detalhe */
.eleicao-acoes {
  margin-bottom: var(--sp-lg);
}

/* Seção de formulário inline (editar título) */
.eleicao-form-section {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--sp-md);
}

.eleicao-form-section__titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-sm);
}

/* Form horizontal: input + botão lado a lado */
.eleicao-inline-form {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  flex-wrap: wrap;
}

.eleicao-inline-form input {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 16px;
  font-family: var(--font-body);
  padding: var(--sp-sm) var(--sp-md);
  height: 44px;
}

.eleicao-inline-form input:focus {
  outline: 2px solid var(--color-led);
  outline-offset: 2px;
}

/* Lista de candidatos (leitura) */
.candidatos-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-sm);
}

.candidato-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.candidato-row:last-child { border-bottom: none; }

.candidato-numero {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-led);
  font-family: var(--font-led);
  min-width: 28px;
  text-align: center;
}

.candidato-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.candidato-nome {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.candidato-bio {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.4;
}

/* =========================================================================
   Candidatos — admin (Plano 07-03): forms de adicionar/editar/excluir
   Append-only: nenhuma regra existente acima foi alterada.
   ========================================================================= */

/* Linha de candidato no painel admin (substitui .candidato-row no contexto admin) */
.candidato-admin-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.candidato-admin-row:last-child { border-bottom: none; }

/* Bloco info (numero + nome/bio) dentro da linha admin */
.candidato-admin-info {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
}

/* Bloco de ações de editar/excluir por candidato */
.candidato-admin-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding-left: calc(28px + var(--sp-md)); /* alinha com .candidato-info */
}

/* Form genérico de candidato (editar inline ou adicionar) */
.candidato-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

/* Linha label + input dentro do form de adicionar */
.candidato-form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--sp-xs);
}

.candidato-form__label {
  font-size: 13px;
  color: var(--color-muted);
}

/* Input de texto dentro de forms de candidato */
.candidato-form__input {
  padding: 6px 10px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 16px;
  font-family: var(--font-body);
}

/* Input de número (campo numero — menor largura) */
.candidato-form__input--numero {
  max-width: 120px;
}

/* Textarea dentro de forms de candidato */
.candidato-form__textarea {
  padding: 6px 10px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 13px;
  font-family: var(--font-body);
  resize: vertical;
  line-height: 1.4;
}

/* Botão Salvar inline (menor que o btn-confirma padrão) */
.candidato-form__btn {
  align-self: flex-start;
  padding: 6px 16px;
  font-size: 13px;
}

/* Botão Excluir inline */
.candidato-form__btn--excluir {
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 13px;
  background: var(--color-error);
  color: var(--color-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.candidato-form__btn--excluir:hover {
  opacity: 0.85;
}

/* Seção "Adicionar candidato" — separada da lista */
.candidato-add-section {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-border);
}

.candidato-add-section__titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-sm);
}

/* Variante do form de candidato para o bloco de adicionar (largura total) */
.candidato-form--add {
  max-width: 480px;
}

/* =========================================================================
   Fase 8 — Foto e bio_url de candidato na tela admin (append-only)
   ========================================================================= */

/* Miniatura da foto atual do candidato na linha do painel admin */
.candidato-foto-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  margin-right: var(--sp-sm);
}

/* Avatar de iniciais — fallback quando foto_url é NULL */
.candidato-foto-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-panel);
  border: 2px solid var(--color-border);
  color: var(--color-muted);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: var(--sp-sm);
  text-transform: uppercase;
  user-select: none;
}

/* Link "Ver biografia" exibido abaixo do nome quando bio_url presente */
.candidato-bio-link {
  display: inline-block;
  margin-top: var(--sp-xs);
  font-size: 13px;
  color: var(--color-led);
  text-decoration: underline;
  word-break: break-all;
}

/* ==========================================================
   Fase 9 — Lista de votações (votacoes.html)
   Todas as regras abaixo são NOVAS — nenhuma regra anterior alterada.
   ========================================================== */

.votacoes-card {
  max-width: 640px;
  width: 100%;
}

.votacoes-lista {
  list-style: none;
  padding: 0;
  margin: var(--sp-md) 0;
  width: 100%;
}

.votacao-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-xs);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.votacao-titulo {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.votacao-status {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.votacao-status--votado {
  background: var(--color-led);
  color: var(--color-bg);
}

.btn-votar {
  display: inline-block;
  padding: 6px 18px;
  background: var(--color-led);
  color: var(--color-bg);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.btn-votar:hover {
  opacity: 0.85;
}

.btn-votar--disabled {
  background: var(--color-muted);
  color: var(--color-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.votacoes-vazia {
  text-align: center;
  color: var(--color-muted);
  font-size: 15px;
  margin: var(--sp-lg) 0;
}

/* Comprovante — ações abaixo do hash */
.comprovante-actions {
  display: flex;
  gap: var(--sp-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-md);
}

.btn-voltar-votacoes {
  display: inline-block;
  padding: 10px 24px;
  background: var(--color-panel);
  color: var(--color-led);
  border: 2px solid var(--color-led);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-voltar-votacoes:hover {
  background: var(--color-led);
  color: var(--color-bg);
}

/* =========================================================
   Fase 10 — Links por eleicao encerrada no painel admin
   e aviso para eleicoes atuais (Plano 10-02)
   ========================================================= */

.eleicao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.eleicao-acoes__link {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-panel);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.eleicao-acoes__link:hover {
  color: var(--color-led);
  border-color: var(--color-led);
}

.eleicao-aviso {
  display: block;
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 4px;
  font-style: italic;
}

/* ============================================================
   Fase 11 — Relatório de participação admin (Plano 11-02)
   APPEND-ONLY: nenhuma regra anterior alterada (T-11-08)
   ============================================================ */

.participacao-aviso {
  font-size: 12px;
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: var(--sp-md);
  padding: 8px 12px;
  border-left: 3px solid var(--color-border);
}

/* ============================================================
   BDO — Botão destrutivo Arquivar e excluir (QUICK-ARQUIVAR-01)
   APPEND-ONLY: nenhuma regra anterior alterada
   ============================================================ */

.btn-arquivar {
  display: inline-block;
  padding: 4px 10px;
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.btn-arquivar:hover {
  background: var(--color-error);
  color: var(--color-bg);
}

.participacao-table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--sp-md);
}

.participacao-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.participacao-th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}

.participacao-tr:hover {
  background: var(--color-panel);
}

.participacao-td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.participacao-td--data {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}

.participacao-td--foto {
  text-align: center;
}

.foto-validacao-thumb {
  max-height: 64px;
  max-width: 64px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

.participacao-foto-link {
  display: inline-block;
}

.participacao-sem-foto {
  color: var(--color-muted);
  font-size: 14px;
}

.eleicao-descricao-leitura {
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: var(--sp-sm);
  font-style: italic;
}

.eleicao-exige-foto-leitura {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: var(--sp-sm);
}

/* =========================================================================
   Melhorias frontend — preview de foto + estado "Enviando" + barras de resultado
   (append-only — não altera regras existentes)
   ========================================================================= */

/* Miniatura da foto de validação selecionada (tela de confirmação) */
.foto-preview {
  display: block;
  max-width: 180px;
  max-height: 180px;
  margin-top: var(--sp-sm);
  border-radius: 10px;
  border: 2px solid var(--color-key-border);
  object-fit: cover;
}
.foto-preview.hidden { display: none; }

/* Estado "Enviando..." no botão de confirmar voto */
.btn-confirma[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* Resultado — barras de percentual mais claras (sobrescreve o layout flex anterior) */
.resultado-row {
  display: block;
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
  border-radius: 8px;
}
.resultado-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xs);
}
.resultado-nome { font-size: 16px; font-weight: 700; color: var(--color-text); }
.resultado-valor { font-size: 14px; color: var(--color-muted); white-space: nowrap; }
.resultado-track {
  height: 16px;
  background: var(--color-key-bg);
  border-radius: 8px;
  overflow: hidden;
}
.resultado-fill {
  height: 100%;
  min-width: 2px;
  background: linear-gradient(90deg, #1976d2, #2d6a4f);
  border-radius: 8px;
  transition: width 400ms ease;
}
.resultado-row--winner { box-shadow: inset 0 0 0 1px var(--color-confirma); }
.resultado-row--winner .resultado-fill {
  background: linear-gradient(90deg, #39ff14, #2d6a4f);
}

/* === Revisão de fotos de validação (painel admin) === */
.foto-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
}
.foto-badge--pendente  { color: #d8b24a; border-color: #6a5a2a; background: #2a2410; }
.foto-badge--aprovada  { color: #a8d5b5; border-color: var(--color-border); background: #1a3a2a; }
.foto-badge--rejeitada { color: #d5a8a8; border-color: #6a2a2a; background: #3a1a1a; }

.foto-revisao-acoes {
  margin-top: var(--sp-xs);
  display: flex;
  gap: var(--sp-xs);
}
.btn-foto-aprovar, .btn-foto-rejeitar {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
}
.btn-foto-aprovar  { color: #a8d5b5; border-color: var(--color-confirma); }
.btn-foto-aprovar:hover  { background: var(--color-confirma); color: #fff; }
.btn-foto-rejeitar { color: #d5a8a8; border-color: var(--color-error); }
.btn-foto-rejeitar:hover { background: var(--color-error); color: #fff; }

/* =========================================================================
   Comparecimento Card — Card de resumo e exportação (Item 1 / 260619-e23)
   ========================================================================= */
.comparecimento-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.comparecimento-resumo {
  font-size: 16px;
  color: var(--color-text);
  margin-bottom: var(--sp-sm);
  text-align: center;
}

.comparecimento-barra-container {
  width: 100%;
  height: 12px;
  background: var(--color-bg);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--sp-sm);
}

.comparecimento-barra-fill {
  height: 100%;
  background: var(--color-led);
  transition: width 0.3s ease;
}

.comparecimento-percent {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-led);
  text-align: center;
  margin-bottom: var(--sp-md);
}

.btn-exportar {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--color-confirma);
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--sp-sm);
}

.btn-exportar:hover {
  background: #2a5d47;
  color: #fff;
}

.comparecimento-refresh {
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
}

/* =========================================================================
   Reordenar Candidatos — Botões ↑/↓ (Item 2 / 260619-e23)
   ========================================================================= */
.candidato-reordenar {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}

.btn-mover {
  padding: 8px 16px;
  background: var(--color-key-bg);
  border: 1px solid var(--color-key-border);
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-mover:hover {
  background: var(--color-key-border);
}

/* =========================================================================
   Mobile Polish (Item 3 / 260619-e23) — Append-only: better touch targets
   ========================================================================= */
@media (max-width: 480px) {
  /* Increase font-size in inputs to prevent iOS auto-zoom */
  #login-form input,
  #admin-password,
  .candidato-form__input,
  .eleicao-inline-form input {
    font-size: 16px;
  }

  /* Larger touch targets for all buttons */
  .btn-confirma,
  .btn-corrige,
  .btn-entrar,
  .btn-sair,
  .btn-votar,
  .btn-gerir,
  .btn-nova-votacao,
  .btn-exportar,
  .key-digit,
  .key-branco,
  .key-nulo {
    min-height: 48px;
    padding: var(--sp-sm) var(--sp-md);
  }

  /* Larger card text for readability */
  .candidate-card {
    padding: var(--sp-lg);
  }

  .card-nome {
    font-size: 18px;
  }

  .card-bio {
    font-size: 15px;
  }

  /* Larger headings on mobile */
  .urna-heading {
    font-size: 22px;
  }

  .greeting {
    font-size: 20px;
  }

  /* Larger candidate info in voting screen */
  .candidato-row {
    padding: var(--sp-md) 0;
  }

  .candidato-nome {
    font-size: 17px;
  }

  /* Better spacing for mobile action rows */
  .keypad-action-row {
    gap: var(--sp-md);
  }

  /* Larger panel title */
  .panel-title {
    font-size: 18px;
  }

  /* Stack election row on mobile */
  .eleicao-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-sm);
  }

  .eleicao-row__info {
    width: 100%;
  }

  .eleicao-meta {
    width: 100%;
  }

  .btn-gerir {
    width: 100%;
    text-align: center;
    padding: var(--sp-sm) var(--sp-md);
  }
}

/* Logo da ASCON como marca única no login (override append-only).
   PNG oficial com transparência sobre o painel branco .login-logos. */
.login-logo-ascon { height: 104px; }
@media (max-width: 480px) {
  .login-logo-ascon { height: 84px; }
}