/* =============================================================================
 * urna-visual-extra.css — complemento do urna-visual.css já portado.
 * Só o que o protótipo não tinha: tela de espera da mesa, fallback de iniciais
 * quando o candidato não tem foto, e os estados REGISTRANDO / ERRO.
 * Tudo escopado sob [data-cabine-visual="1"]: não vaza para a cabine atual.
 * ========================================================================== */

/* --- Fallback de iniciais (mesmo espaço da foto, sem quebrar o grid) ------ */
[data-cabine-visual="1"] .sem-foto{
  display:grid;place-items:center;width:100%;height:100%;
  background:#e9ecee;color:#7b858c;font-weight:900;letter-spacing:.04em;
  font-size:clamp(12px,1.6vw,28px);line-height:1;
}
[data-cabine-visual="1"] .candidate-mini .sem-foto{border-radius:clamp(4px,.55vw,9px)}
[data-cabine-visual="1"] .modal-person .sem-foto{aspect-ratio:1/1.08;border-radius:10px;font-size:clamp(20px,2vw,34px)}
[data-cabine-visual="1"] .selected .sem-foto{
  width:min(38%,132px);aspect-ratio:13/18;border-radius:10px;border:3px solid #fff;font-size:34px;
}

/* --- Espera da mesa (terminal liberado só pelo mesário) ------------------- */
[data-cabine-visual="1"] .espera{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:3%;padding:0 6%;
}
[data-cabine-visual="1"] .espera strong{
  font-size:clamp(17px,2.15vw,36px);font-weight:900;line-height:1.1;color:#1d2429;
}
[data-cabine-visual="1"] .espera small{
  font-size:clamp(10px,1.05vw,17px);line-height:1.4;color:#3d4650;max-width:30ch;
}
[data-cabine-visual="1"] .espera-pulso{
  width:clamp(14px,1.5vw,24px);aspect-ratio:1;border-radius:50%;
  background:var(--orange,#f26a21);animation:uv-pulso 2.2s ease-in-out 4;
}
@keyframes uv-pulso{0%,100%{opacity:.28;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  [data-cabine-visual="1"] .espera-pulso{animation:none;opacity:1}
}

/* --- Estados de envio ----------------------------------------------------- */
[data-cabine-visual="1"] .end.registrando{color:#3d4650}
[data-cabine-visual="1"] .end.erro{color:#b32d0c}
[data-cabine-visual="1"] .end.fim .recibo-lcd b{letter-spacing:.06em}

/* --- Foco visível em tudo que é operável --------------------------------- */
[data-cabine-visual="1"] button:focus-visible{outline:3px solid var(--orange,#f26a21);outline-offset:2px}

@media (prefers-reduced-motion: reduce){[data-cabine-visual="1"] *{animation:none !important}}

/* =============================================================================
 * Skin ligada: as telas de VOTO da cabine antiga saem de cena — a urna
 * visual assume intro, cargos e revisão. As telas do mesário (espera,
 * validar, conferência, contingência) permanecem, pois a skin não as cobre.
 * ========================================================================== */
[data-cabine-visual="1"] #tela-intro,
[data-cabine-visual="1"] #tela-cargo,
[data-cabine-visual="1"] #tela-revisao,
[data-cabine-visual="1"] [id^="tela-fim"] {
  display: none !important;
}

/* =============================================================================
 * Skin ligada — segundo ajuste: somem o cabeçalho antigo e as telas de
 * espera/entrada (a skin tem a própria tela "aguardando"). Ficam apenas as
 * telas que a skin NÃO cobre: validar e conferência (uso do mesário).
 * A barra de acessibilidade é mantida (eleitor idoso) e fixada embaixo.
 * ========================================================================== */
[data-cabine-visual="1"] header.cabecalho,
[data-cabine-visual="1"] #tela-espera,
[data-cabine-visual="1"] #tela-entrada {
  display: none !important;
}
[data-cabine-visual="1"] .barra-adaptacao {
  position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 50; margin: 0; padding: 6px 10px; border-radius: 12px;
  background: rgba(255,255,255,.92); box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
/* as telas do mesário que restam ficam centradas sobre a carcaça, discretas */
[data-cabine-visual="1"] #tela-validar,
[data-cabine-visual="1"] #tela-conferencia,
[data-cabine-visual="1"] #tela-contingencia {
  position: fixed; inset: 0; margin: auto; max-width: 720px; max-height: 80vh;
  z-index: 60; box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
[data-cabine-visual="1"] .barra-adaptacao{display:none!important}
[data-cabine-visual="1"] .barra-adaptacao{display:none!important}

/* ===== skin pura: pela classe no body (o atributo fica num div interno) ===== */
body.uv-ligada header.cabecalho,
body.uv-ligada .barra-adaptacao,
body.uv-ligada #tela-entrada,
body.uv-ligada #tela-espera,
body.uv-ligada #tela-intro,
body.uv-ligada #tela-cargo,
body.uv-ligada #tela-revisao,
body.uv-ligada #tela-fim { display: none !important; }

body.uv-ligada #tela-validar,
body.uv-ligada #tela-conferencia,
body.uv-ligada #tela-contingencia {
  position: fixed; inset: 0; margin: auto; max-width: 720px; max-height: 80vh;
  z-index: 60; box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* ===== telas do mesário em TELA CHEIA (cobrem a carcaça enquanto ativas) ===== */
body.uv-ligada #tela-validar,
body.uv-ligada #tela-conferencia,
body.uv-ligada #tela-contingencia {
  position: fixed !important; inset: 0 !important; margin: 0 !important;
  max-width: none !important; max-height: none !important; width: 100vw; height: 100vh;
  z-index: 60; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  padding: 6vh 6vw; box-sizing: border-box; border-radius: 0 !important; box-shadow: none !important;
  overflow: auto;
}
/* respeita o hidden do fluxo: quando a tela não está ativa, some */
body.uv-ligada #tela-validar[hidden],
body.uv-ligada #tela-conferencia[hidden],
body.uv-ligada #tela-contingencia[hidden] { display: none !important; }
/* conteúdo dessas telas maior e centrado */
body.uv-ligada #tela-validar > *,
body.uv-ligada #tela-conferencia > *,
body.uv-ligada #tela-contingencia > * { max-width: 860px; width: 100%; text-align: center; }

/* ===== telas do mesário em TELA CHEIA (cobrem a carcaça enquanto ativas) ===== */
body.uv-ligada #tela-validar,
body.uv-ligada #tela-conferencia,
body.uv-ligada #tela-contingencia {
  position: fixed !important; inset: 0 !important; margin: 0 !important;
  max-width: none !important; max-height: none !important; width: 100vw; height: 100vh;
  z-index: 60; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  padding: 6vh 6vw; box-sizing: border-box; border-radius: 0 !important; box-shadow: none !important;
  overflow: auto;
}
/* respeita o hidden do fluxo: quando a tela não está ativa, some */
body.uv-ligada #tela-validar[hidden],
body.uv-ligada #tela-conferencia[hidden],
body.uv-ligada #tela-contingencia[hidden] { display: none !important; }
/* conteúdo dessas telas maior e centrado */
body.uv-ligada #tela-validar > *,
body.uv-ligada #tela-conferencia > *,
body.uv-ligada #tela-contingencia > * { max-width: 860px; width: 100%; text-align: center; }