/* ============================================================================
   LINHA · Telas públicas: TV de chamada, Totem de senha e Senhas emitidas
   Lidas de longe ou tocadas de pé: tipo grande, contraste alto, nada de enfeite.
   Os controles do técnico ficam pequenos e discretos num canto.
   ============================================================================ */

/* ---------------------------------------------------------------- TV */
.tv{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px, 30vw); min-height:100dvh }
.tv-palco{
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:1.5vh;
  padding:6vh 6vw; background:var(--l-marca); color:var(--l-sobre-marca);
}
.tv-rotulo{ font-size:clamp(16px, 2vw, 28px); font-weight:500; letter-spacing:.08em; text-transform:uppercase; opacity:.75 }
.tv-tipo{ align-self:flex-start; padding:.3em .9em; border-radius:var(--l-raio-pilula); background:rgba(255,255,255,.16); font-size:clamp(14px, 1.6vw, 24px); font-weight:600 }
.tv-tipo.is-pref{ background:var(--l-r-amarelo); color:#1d2211 }
.tv-tipo.is-appt{ background:var(--l-r-azul); color:#fff }
.tv-senha{ white-space:nowrap; font-size:clamp(64px, min(12vw, 24vh), 240px); font-weight:700; line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums }
.tv-senha.is-name{ white-space:normal; font-size:clamp(40px, min(6vw, 12vh), 120px); line-height:1.05; letter-spacing:-.01em }
.tv-senha.blink{ animation:tv-pisca 1s ease-in-out 3 }
@keyframes tv-pisca{ 50%{ opacity:.35 } }
.tv-nome{ font-size:clamp(24px, 3.4vw, 56px); font-weight:500 }
.tv-guiche{ font-size:clamp(22px, 3vw, 48px); font-weight:600; opacity:.9 }
.tv-relogio{ position:absolute; top:4vh; right:4vw; font-size:clamp(18px, 2vw, 32px); font-weight:600; font-variant-numeric:tabular-nums; opacity:.8 }

.tv-lado{ display:flex; flex-direction:column; gap:var(--l-e3); padding:4vh 2vw; background:var(--l-sup); overflow:hidden }
.tv-lado h3{ font-size:clamp(14px, 1.2vw, 20px); font-weight:600; color:var(--l-texto-3); text-transform:uppercase; letter-spacing:.06em }
.tv-historico{ display:flex; flex-direction:column; margin-bottom:var(--l-e5) }
.tv-history-item{ display:grid; grid-template-columns:auto 1fr; column-gap:var(--l-e4); align-items:baseline; padding:1.2vh 0; border-bottom:1px solid var(--l-fio) }
.tv-history-item .code{ grid-row:span 2; font-size:clamp(24px, 2.4vw, 40px); font-weight:700; font-variant-numeric:tabular-nums; color:var(--l-texto) }
.tv-history-item .meta{ font-size:clamp(13px, 1vw, 17px); color:var(--l-texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tv-hist-type{ grid-column:2; justify-self:start; margin-top:2px; font-size:12px; font-weight:600; color:var(--l-texto-3) }
.tv-history-empty{ display:block; color:var(--l-texto-3); font-size:clamp(14px, 1.1vw, 18px) }
.tv-aguardando{ display:flex; flex-direction:column }
.tv-waiting-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--l-e3); padding:1vh 0; border-bottom:1px solid var(--l-fio) }
.tv-waiting-dept{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.tv-waiting-dept strong{ font-size:clamp(14px, 1.2vw, 20px); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tv-waiting-code{ display:none }
.tv-waiting-prio{ font-size:12px; color:var(--l-atencao) }
.tv-waiting-count{ font-size:clamp(22px, 2vw, 34px); font-weight:700; font-variant-numeric:tabular-nums }
.tv-waiting-empty{ color:var(--l-texto-3); font-size:clamp(14px, 1.1vw, 18px) }

/* controles do técnico: discretos, no pé da lateral */
.tv-tecnico, .totem-tecnico{ display:flex; gap:var(--l-e4); margin-top:auto; padding-top:var(--l-e4) }
.tv-tecnico button, .totem-tecnico button{ border:0; background:none; padding:0; font-size:12px; color:var(--l-texto-3) }
.tv-tecnico button:hover, .totem-tecnico button:hover{ color:var(--l-texto); text-decoration:underline }
.tv-tecnico .hidden, .totem-tecnico .hidden{ display:none }
.tv-audio-btn.is-off{ color:var(--l-erro) }

/* ---------------------------------------------------------------- Totem */
/* Tudo cabe em 100dvh, sem rolagem (02/10): cada etapa ocupa a area livre e os
   blocos encolhem com a altura da tela, nunca empurram para baixo. */
.totem{ display:flex; flex-direction:column; height:100dvh; overflow:hidden; padding:2.5vh 4vw 1.5vh; background:var(--l-fundo) }
.totem-topo{ flex:none; display:flex; align-items:center; justify-content:space-between }
.totem-brasao{ width:clamp(36px, 6vh, 56px); height:clamp(36px, 6vh, 56px); object-fit:contain }
.totem-relogio{ font-size:clamp(16px, 3vh, 24px); font-weight:600; font-variant-numeric:tabular-nums; color:var(--l-texto-2) }
.totem-palco{ flex:1; min-height:0; display:flex; justify-content:center; padding-top:1vh }
.totem-etapa{ width:min(1400px, 100%); min-height:0; display:flex; flex-direction:column; align-items:center; gap:2vh; text-align:center }
.totem-cabeca{ flex:none; display:flex; flex-direction:column; gap:.6vh }
.totem-etapa h1{ font-size:clamp(26px, min(4.5vw, 7vh), 60px); font-weight:700; letter-spacing:-.02em; line-height:1.05 }
.totem-etapa .totem-cabeca p, .totem-pronta > p{ font-size:clamp(15px, min(1.8vw, 3vh), 24px); color:var(--l-texto-2) }

/* 1. Atendimento: colunas e fonte calculadas em app.totem._ajustarGrade */
.totem-grade{ flex:1; min-height:0; width:100%; display:grid; gap:16px;
  grid-template-columns:repeat(var(--cols, 4), 1fr); grid-template-rows:repeat(var(--linhas, 4), minmax(0, 1fr)) }
.totem-setor{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; min-height:0; overflow:hidden;
  padding:.6em; border:2px solid var(--l-borda); border-radius:var(--l-raio-4);
  background:var(--l-sup); color:var(--l-texto); font-size:var(--fs, 24px); font-weight:600; line-height:1.15;
  transition:border-color var(--l-rapido), background var(--l-rapido), transform var(--l-rapido);
}
.totem-setor svg{ flex:none; width:1.5em; height:1.5em; color:var(--l-marca) }
.totem-setor span{ overflow-wrap:anywhere }
.totem-setor:hover{ border-color:var(--l-marca) }
.totem-setor:active{ transform:scale(.97); background:var(--l-marca-suave) }
.totem-grid-message{ grid-column:1 / -1; grid-row:1 / -1; align-self:center; font-size:20px; color:var(--l-texto-3) }

/* 2. Dados: campos a esquerda, teclado a direita, emitir embaixo */
.totem-escolhido{ font-weight:600; color:var(--l-marca-tinta) !important }
.totem-form{ flex:1; min-height:0; width:100%; display:grid; gap:2vh 3vw;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows:minmax(0, 1fr) auto; text-align:left }
.totem-campos{ min-height:0; display:flex; flex-direction:column; justify-content:center; gap:2vh }
.totem-campo{ display:flex; flex-direction:column; gap:.6vh; padding:1.4vh 1.2vw; border:2px solid var(--l-borda); border-radius:var(--l-raio-3); background:var(--l-sup); cursor:pointer }
.totem-campo.is-ativo{ border-color:var(--l-marca); box-shadow:0 0 0 4px var(--l-marca-suave) }
.totem-campo label{ font-size:clamp(14px, 2.2vh, 18px); font-weight:600; color:var(--l-texto-2); cursor:pointer }
.totem .totem-campo input, .totem .totem-campo input:focus{ height:auto !important; min-height:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; outline:0;
  font-size:clamp(20px, min(2.6vw, 5vh), 38px) !important; line-height:1.2 !important; font-weight:600; letter-spacing:.02em; color:var(--l-texto); cursor:pointer; caret-color:transparent }
.totem .totem-campo input.is-achado{ color:var(--l-ok) }
.totem-campo .campo-status{ min-height:1.3em; font-size:clamp(13px, 2vh, 17px); color:var(--l-texto-2) }
.totem-campo .campo-status[data-tom="ok"]{ color:var(--l-ok) }
.totem-campo .campo-status[data-tom="atencao"]{ color:var(--l-atencao) }
.totem-campo .campo-status[data-tom="erro"]{ color:var(--l-erro) }
.totem-aviso{ min-height:1.3em; font-size:clamp(14px, 2.2vh, 19px); font-weight:600; color:var(--l-erro) }

.totem-teclado{ min-height:0; display:grid; gap:1.2vh }
.totem-teclado.is-num{ grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(4, minmax(0, 1fr)) }
.totem-teclado.is-letras{ grid-template-rows:repeat(4, minmax(0, 1fr)) }
.totem-linha{ min-height:0; display:flex; justify-content:center; gap:.5vw }
.totem-tecla{ flex:1; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--l-borda); border-radius:var(--l-raio-3); background:var(--l-sup); color:var(--l-texto);
  font-size:clamp(18px, min(2.4vw, 4.5vh), 36px); font-weight:600; transition:background var(--l-rapido), transform var(--l-rapido) }
.totem-teclado.is-letras .totem-tecla{ max-width:9%; font-size:clamp(16px, min(1.8vw, 3.8vh), 28px) }
.totem-teclado.is-letras .totem-tecla.is-espaco{ max-width:50%; flex:5 }
.totem-teclado.is-letras .totem-tecla.is-acao{ max-width:18%; flex:2 }
.totem-tecla.is-acao{ background:var(--l-sup-2); color:var(--l-texto-2); font-size:clamp(15px, 2.6vh, 22px) }
.totem-tecla svg{ width:1.3em; height:1.3em }
.totem-tecla:active{ transform:scale(.95); background:var(--l-marca-suave) }

.totem-acoes{ grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr 1fr; gap:1.2vw; height:clamp(64px, 12vh, 104px) }
.totem-voltar{ display:flex; align-items:center; gap:.4em; padding:0 1.6vw; border:2px solid var(--l-borda); border-radius:var(--l-raio-3);
  background:var(--l-sup); color:var(--l-texto-2); font-size:clamp(16px, 2.6vh, 22px); font-weight:600 }
.totem-voltar svg{ width:1.1em; height:1.1em }
.totem-emitir{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2em; border:0; border-radius:var(--l-raio-3);
  background:var(--l-marca); color:var(--l-sobre-marca); transition:transform var(--l-rapido), filter var(--l-rapido) }
.totem-emitir b{ font-size:clamp(18px, min(2.2vw, 4vh), 32px); font-weight:700 }
.totem-emitir small{ font-size:clamp(12px, 1.9vh, 16px); opacity:.85 }
.totem-emitir.is-pref{ background:var(--l-r-amarelo); color:#1d2211 }
.totem-emitir:active{ transform:scale(.98); filter:brightness(.95) }
.totem-dados.is-emitindo .totem-emitir{ opacity:.6; pointer-events:none }

/* 3. Senha pronta */
.totem-pronta{ justify-content:center }
.totem-senha{ white-space:nowrap; font-size:clamp(64px, min(14vw, 24vh), 220px); font-weight:700; line-height:1; color:var(--l-marca-tinta); font-variant-numeric:tabular-nums }
.totem-pronta-info{ display:flex; align-items:center; gap:1vw; font-size:clamp(18px, min(2.2vw, 3.6vh), 30px); font-weight:600 }
.totem-tipo{ padding:.2em .8em; border-radius:var(--l-raio-pilula); background:var(--l-r-amarelo); color:#1d2211; font-size:.8em }
.totem-nova{ width:min(420px, 100%); height:clamp(64px, 12vh, 100px); margin-top:1vh }

.totem-tecnico{ flex:none; justify-content:flex-end; padding-top:1vh !important; margin-top:0 !important ; min-height:58px; align-items:flex-end }

/* Retrato (totem em pe): teclado embaixo dos campos */
@media (orientation:portrait){
  .totem-form{ grid-template-columns:1fr; grid-template-rows:auto minmax(0, 1fr) auto }
  .totem-acoes{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; height:auto }
  .totem-voltar{ grid-column:1 / -1; justify-content:center; height:7vh }
  .totem-emitir{ height:11vh }
}

/* ---------------------------------------------------------------- Senhas emitidas */
.emt{ display:flex; flex-direction:column; gap:var(--l-e6); min-height:100dvh; padding:4vh 4vw; background:var(--l-fundo) }
.emt-topo{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--l-e4) }
.emt-topo h1{ font-size:clamp(28px, 3vw, 44px); font-weight:700; letter-spacing:-.02em }
.emt-topo p{ font-size:18px; color:var(--l-texto-2) }
.emt-relogio{ font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--l-texto-2) }
.emt-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--l-e4); align-content:start; flex:1 }
.issued-ticket-card{ display:flex; flex-direction:column; gap:4px; padding:var(--l-e5); border:1px solid var(--l-borda); border-radius:var(--l-raio-3); background:var(--l-sup) }
.issued-ticket-card.is-served{ box-shadow:inset 0 3px 0 var(--l-marca) }
.issued-ticket-head{ display:flex; justify-content:space-between; font-size:13px; color:var(--l-texto-3) }
.issued-ticket-code{ font-size:44px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums }
.issued-ticket-patient{ font-size:18px; font-weight:500 }
.issued-ticket-meta{ display:flex; gap:var(--l-e2); font-size:13px; color:var(--l-texto-2) }
.issued-ticket-priority{ color:var(--l-atencao); font-weight:600 }
.issued-ticket-time{ font-size:12px; color:var(--l-texto-3) }
.issued-empty-state{ grid-column:1 / -1; padding:10vh 0; text-align:center }
.issued-empty-icon{ display:none }
.issued-empty-title{ font-size:24px; font-weight:600 }
.issued-empty-sub{ font-size:16px; color:var(--l-texto-2) }
.issued-empty-state.is-error .issued-empty-title{ color:var(--l-erro) }

@media (max-width:900px){
  .tv{ grid-template-columns:1fr }
}

/* nas telas públicas o paciente não usa o sino nem o painel de acessibilidade do servidor */
body:has(:is(#view-tv, #view-totem, #view-issued).active) :is(#ui-global-controls, #app-notification-widget){ display:none !important }