/* ==========================================================================
   Painel de senhas (TV) — quadro de chamadas com a identidade de Naviraí.
   Linguagem: blocos sólidos, cantos retos, sem glow/gradiente/sombra.
   Hierarquia: 1) número do guichê (bloco amarelo) e senha; 2) últimas chamadas;
   3) vídeo, clima e avisos. Tamanhos em vmin/vw: serve de 768p a 4K, monitor
   5:4 e tablet em pé. Animações só de opacidade/transform (PCs fracos).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("fontes/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Inter";
  src: url("fontes/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113;
}

:root {
  --principal: #0b3c91;
  --principal-escuro: #05193d;
  --principal-medio: #072558;
  --destaque: #ffc20e;
  --prioridade: #c2410c;
  --tinta: #0b1220;
  --g: clamp(6px, 1.1vmin, 24px);
}

.tema-escuro {
  --fundo: var(--principal-escuro);
  --painel: var(--principal-medio);
  --linha: rgba(255, 255, 255, .12);
  --texto: #ffffff;
  --texto-2: rgba(255, 255, 255, .74);
  --texto-3: rgba(255, 255, 255, .5);
}
.tema-claro {
  --fundo: #e8ecf3;
  --painel: #ffffff;
  --linha: rgba(11, 18, 32, .1);
  --texto: #0b1220;
  --texto-2: #45506a;
  --texto-3: #7b869c;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html, body { height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  cursor: none;
}
.oculto { display: none !important; }
svg { display: block; }

/* ---- Grade -------------------------------------------------------------- */
.tela {
  height: 100vh;
  display: grid;
  gap: var(--g);
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
  grid-template-rows: auto minmax(0, 1.2fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "topo     topo"
    "chamada  midia"
    "historico midia"
    "faixa    faixa";
}
.sem-video .tela {
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "topo topo" "chamada historico" "faixa faixa";
}
.com-video.sem-historico .tela {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "topo topo" "chamada midia" "faixa faixa";
}
.sem-video.sem-historico .tela {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "topo" "chamada" "faixa";
}
.topo { grid-area: topo; }
.chamada { grid-area: chamada; margin-left: var(--g); }
.historico { grid-area: historico; margin-left: var(--g); }
.midia { grid-area: midia; margin-right: var(--g); }
.faixa { grid-area: faixa; }
.sem-video .historico { margin-left: 0; margin-right: var(--g); }
.sem-video.sem-historico .chamada { margin-right: var(--g); }

/* ---- Topo --------------------------------------------------------------- */
.topo {
  display: flex;
  align-items: center;
  gap: calc(var(--g) * 2.4);
  padding: calc(var(--g) * 1.2) calc(var(--g) * 2);
  background: var(--principal);
  color: #fff;
  border-bottom: clamp(3px, .7vmin, 14px) solid var(--destaque);
}
.topo__logo { height: clamp(34px, 7vmin, 150px); width: auto; flex: none; }
.topo__setor { display: flex; flex-direction: column; min-width: 0; flex: 1; padding-left: calc(var(--g) * 2.4); border-left: 1px solid rgba(255, 255, 255, .25); }
.topo__rotulo { font-size: clamp(10px, 1.45vmin, 30px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.topo__unidade { font-size: clamp(16px, 3.4vmin, 74px); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topo__clima { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .45em; font-size: clamp(14px, 2.2vmin, 48px); line-height: 1.1; }
.topo__clima svg { width: 2.1em; height: 2.1em; grid-row: span 2; }
.clima__temp { font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; }
.clima__desc { font-size: .68em; font-weight: 600; color: rgba(255, 255, 255, .78); white-space: nowrap; }

.topo__relogio { display: flex; flex-direction: column; align-items: flex-end; padding-left: calc(var(--g) * 2.4); border-left: 1px solid rgba(255, 255, 255, .25); }
.relogio__hora { font-size: clamp(24px, 6.2vmin, 136px); font-weight: 800; line-height: .95; letter-spacing: -.035em; }
.relogio__data { font-size: clamp(10px, 1.6vmin, 34px); font-weight: 600; color: rgba(255, 255, 255, .8); margin-top: .35em; }
.topo__conexao { align-self: flex-start; width: clamp(7px, 1vmin, 18px); height: clamp(7px, 1vmin, 18px); background: #34d27b; flex: none; }
.topo__conexao.offline { background: #ff5a5a; }

/* ---- Chamada atual (cartão claro: máximo contraste na TV) ---------------- */
.chamada {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--g) * 2.2) calc(var(--g) * 2.6);
  background: #fff;
  color: var(--tinta);
  border-left: clamp(6px, 1.3vmin, 28px) solid var(--destaque);
}
.tema-claro .chamada { border: 1px solid var(--linha); border-left: clamp(6px, 1.3vmin, 28px) solid var(--destaque); }
.chamada__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--g); }
.chamada__rotulo { font-size: clamp(11px, 1.7vmin, 36px); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--principal); }
.chamada__prioridade {
  padding: .3em .7em;
  background: var(--prioridade);
  color: #fff;
  font-size: clamp(11px, 1.6vmin, 34px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chamada__senha, .destaque__senha { display: flex; align-items: baseline; gap: .1em; white-space: nowrap; line-height: .9; letter-spacing: -.035em; }
.chamada__senha { margin: auto 0 calc(var(--g) * 1.6); font-size: clamp(48px, min(15vmin, 9vw), 380px); }
.sem-video .chamada__senha { font-size: clamp(56px, min(20vmin, 11vw), 480px); }
.chamada__senha .sigla { font-weight: 500; color: var(--principal); }
.chamada__senha .numero { font-weight: 900; }

.chamada__destino {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--g);
  padding-top: calc(var(--g) * 1.6);
  border-top: clamp(3px, .6vmin, 12px) solid var(--tinta);
}
.chamada__local { display: flex; flex-direction: column; min-width: 0; }
.chamada__dirija { font-size: clamp(10px, 1.5vmin, 32px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7590; }
.chamada__local-nome { font-size: clamp(20px, 5.4vmin, 120px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chamada__numero {
  min-width: 1.5em;
  padding: .02em .22em;
  background: var(--destaque);
  color: var(--tinta);
  font-size: clamp(40px, 11vmin, 250px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  text-align: center;
}
.chamada__numero:empty { display: none; }
.chamada__servico { margin-top: calc(var(--g) * 1.2); font-size: clamp(12px, 2vmin, 42px); font-weight: 600; color: #57627d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chamada.e-prioridade { border-left-color: var(--prioridade); }
.chamada.e-prioridade .chamada__senha .sigla { color: var(--prioridade); }
.chamada.novo .chamada__senha, .chamada.novo .chamada__numero { animation: piscar 1.1s steps(1) 3; }
@keyframes piscar { 50% { opacity: .2; } }

/* Antes da primeira chamada */
.chamada__vazio { display: none; }
.chamada.vazia .chamada__senha, .chamada.vazia .chamada__destino, .chamada.vazia .chamada__servico { display: none; }
.chamada.vazia .chamada__vazio { display: block; margin: auto 0; font-size: clamp(16px, 3.4vmin, 72px); font-weight: 700; color: #8a93a8; max-width: 16ch; line-height: 1.2; }

/* ---- Últimas chamadas --------------------------------------------------- */
.historico { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--painel); padding: calc(var(--g) * 1.6) calc(var(--g) * 2); }
.historico__cabeca, .historico__lista li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; align-items: baseline; gap: calc(var(--g) * 1.6); }
.historico__cabeca { padding-bottom: calc(var(--g) * .8); border-bottom: 2px solid var(--destaque); font-size: clamp(10px, 1.4vmin, 30px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.historico__cabeca span:last-child { text-align: right; }
.historico__lista { list-style: none; flex: 1; min-height: 0; overflow: hidden; }
.historico__lista li { padding: clamp(4px, 1.05vmin, 22px) 0; border-bottom: 1px solid var(--linha); font-size: clamp(15px, 3.3vmin, 72px); }
.historico__senha { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.historico__senha .sigla { font-weight: 500; color: var(--texto-2); }
.historico__local { color: var(--texto-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.historico__local b { color: var(--destaque); font-weight: 800; }
.tema-claro .historico__local b { color: var(--principal); }
.historico__hora { color: var(--texto-3); font-size: .62em; font-weight: 600; text-align: right; }
.historico__lista li.e-prioridade .historico__senha::before {
  content: "";
  display: inline-block;
  width: .32em; height: .32em;
  margin-right: .3em;
  vertical-align: .18em;
  background: var(--prioridade);
}

/* ---- Vídeo -------------------------------------------------------------- */
.midia { position: relative; min-height: 0; overflow: hidden; background: #000; }
.midia > div, .midia iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Faixa de avisos e notícias ----------------------------------------- */
.faixa { display: flex; align-items: stretch; min-height: clamp(34px, 6.2vmin, 130px); background: var(--painel); border-top: 1px solid var(--linha); overflow: hidden; }
.faixa__janela { flex: 1; overflow: hidden; display: flex; align-items: center; }
.faixa__trilho { display: inline-flex; align-items: center; gap: 3em; white-space: nowrap; padding-left: 100%; font-size: clamp(14px, 2.6vmin, 56px); font-weight: 600; animation: rolar 60s linear infinite; will-change: transform; }
.faixa__item { display: inline-flex; align-items: center; gap: .6em; }
.faixa__tag { padding: .12em .5em; font-size: .62em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--destaque); color: var(--tinta); }
.faixa__tag--noticia { background: transparent; color: var(--destaque); border: 2px solid var(--destaque); }
.tema-claro .faixa__tag--noticia { color: var(--principal); border-color: var(--principal); }
.faixa__noticia { color: var(--texto-2); }
@keyframes rolar { to { transform: translateX(-100%); } }

/* ---- Destaque de chamada (tela cheia) ----------------------------------- */
.destaque {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--g) * 2);
  padding: 4vmin;
  background: var(--principal);
  color: #fff;
  text-align: center;
}
.destaque::before, .destaque::after { content: ""; position: absolute; pointer-events: none; }
.destaque::before { left: 0; bottom: 0; width: 22vmin; height: 22vmin; background: var(--destaque); opacity: .14; }
.destaque::after { right: 6vmin; top: 10vmin; width: 26vmin; height: 26vmin; border: 2px solid rgba(255, 255, 255, .25); }
.destaque.e-prioridade { background: var(--prioridade); }
.destaque__tempo { position: absolute; left: 0; top: 0; width: 100%; height: clamp(5px, 1vmin, 20px); background: var(--destaque); transform-origin: left center; animation: esvaziar 8s linear forwards; }
@keyframes esvaziar { to { transform: scaleX(0); } }
.destaque__rotulo { font-size: clamp(16px, 3vmin, 66px); font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.destaque__senha { font-size: clamp(64px, min(30vmin, 21vw), 760px); max-width: 94vw; animation: subir .45s cubic-bezier(.2, .8, .2, 1) both; }
.destaque__senha .sigla { font-weight: 500; opacity: .8; }
.destaque__senha .numero { font-weight: 900; }
.destaque__destino { display: flex; align-items: center; gap: .35em; font-size: clamp(32px, min(11vmin, 8.5vw), 280px); font-weight: 800; letter-spacing: -.02em; max-width: 94vw; white-space: nowrap; animation: entrar-lado .45s .15s cubic-bezier(.2, .8, .2, 1) both; }
.destaque__seta svg { width: .9em; height: .9em; fill: var(--destaque); }
.destaque.e-prioridade .destaque__seta svg { fill: #fff; }
.destaque__numero { padding: .04em .26em; background: var(--destaque); color: var(--tinta); font-weight: 900; font-size: 1.35em; line-height: 1; }
.destaque__numero:empty { display: none; }
.destaque__servico { font-size: clamp(14px, 2.8vmin, 60px); font-weight: 600; color: rgba(255, 255, 255, .85); }
@keyframes subir { from { opacity: 0; transform: translateY(5vmin); } }
@keyframes entrar-lado { from { opacity: 0; transform: translateX(8vmin); } }

/* ---- Avisos do sistema -------------------------------------------------- */
/* Janela para liberar o áudio (o navegador exige um gesto antes de tocar som) */
.ativar-som { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 4vmin; background: rgba(5, 12, 28, .72); cursor: pointer; animation: som-fundo .25s ease-out both; }
.ativar-som__caixa {
  width: min(92vw, 30em); display: grid; justify-items: center; gap: .7em; text-align: center;
  padding: 1.6em 1.8em 1.4em; background: #fff; color: var(--tinta); border-top: .35em solid var(--destaque);
  font: 500 clamp(14px, 2.2vmin, 40px)/1.4 "Inter", system-ui, sans-serif;
  animation: som-caixa .35s cubic-bezier(.2, .8, .2, 1) both;
}
.ativar-som__icone { display: grid; place-items: center; width: 3.6em; height: 3.6em; background: var(--principal); }
.ativar-som__icone svg { width: 2em; height: 2em; fill: var(--destaque); animation: som-pulso 1.6s ease-in-out infinite; }
.ativar-som__titulo { margin: .2em 0 0; font-size: 1.7em; font-weight: 850; letter-spacing: -.025em; line-height: 1.1; }
.ativar-som__texto { margin: 0; max-width: 24em; color: #485062; }
.ativar-som__botao { margin-top: .4em; min-height: 2.9em; padding: 0 2em; border: 0; background: var(--destaque); color: var(--tinta); font: 800 1.15em "Inter", system-ui, sans-serif; cursor: pointer; }
.ativar-som__botao:hover { background: #f0b400; }
.ativar-som__botao:focus-visible { outline: .18em solid var(--principal); outline-offset: .18em; }
.ativar-som__dica { margin: 0; font-size: .8em; color: #7a8396; }
@keyframes som-fundo { from { opacity: 0; } }
@keyframes som-caixa { from { opacity: 0; transform: translateY(3vmin) scale(.98); } }
@keyframes som-pulso { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ativar-som, .ativar-som__caixa, .ativar-som__icone svg { animation: none; } }

.aviso-conexao { position: fixed; left: 50%; transform: translateX(-50%); z-index: 20; padding: .8em 1.4em; border: 0; font: 800 clamp(14px, 2.4vmin, 44px) "Inter", system-ui, sans-serif; }
.aviso-conexao { top: 15vh; background: #d92d2d; color: #fff; }

/* ---- 4:3 / 5:4 (monitores 17" e 19") ------------------------------------ */
@media (max-aspect-ratio: 3/2) and (orientation: landscape) {
  .com-video .tela {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1.3fr) auto auto;
    grid-template-areas: "topo topo" "chamada midia" "historico historico" "faixa faixa";
  }
  .com-video .historico { margin-right: var(--g); padding: var(--g) calc(var(--g) * 1.6); }
  .com-video .historico__cabeca { display: none; }
  .com-video .historico__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g); }
  .com-video .historico__lista li { display: flex; flex-direction: column; gap: 0; border: 0; padding: .3em 0; font-size: clamp(14px, 3vmin, 60px); }
  .com-video .historico__hora { display: none; }
  .com-video .chamada__senha { font-size: clamp(44px, min(14vmin, 11vw), 380px); }
  .topo__clima .clima__desc { display: none; }
}

/* ---- Retrato (tablet em pé, TV vertical) -------------------------------- */
@media (orientation: portrait) {
  .tela, .sem-video .tela, .com-video .tela, .com-video.sem-historico .tela, .sem-video.sem-historico .tela {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "topo" "chamada" "historico" "midia" "faixa";
  }
  .chamada, .historico, .midia { margin: 0 var(--g); }
  .midia { aspect-ratio: 16 / 9; }
  .chamada__senha, .sem-video .chamada__senha { font-size: clamp(48px, min(19vmin, 21vw), 400px); }
  .topo { flex-wrap: wrap; }
  .topo__clima { display: none; }
  .topo__setor { padding-left: var(--g); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .topo__clima, .topo__rotulo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faixa__trilho { animation-duration: 0s; }
  .destaque__senha, .destaque__destino, .chamada.novo .chamada__senha, .chamada.novo .chamada__numero { animation: none; }
}

/* ---- Pareamento --------------------------------------------------------- */
.pareamento { display: grid; place-items: center; cursor: default; overflow: hidden; position: relative;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 6vmin 6vmin; }
.pareamento__formas span { position: absolute; display: block; }
.pareamento__formas span:nth-child(1) { left: 0; bottom: 0; width: 26vmin; height: 26vmin; background: var(--destaque); }
.pareamento__formas span:nth-child(2) { right: 7vmin; top: 9vmin; width: 22vmin; height: 22vmin; border: 2px solid rgba(255, 255, 255, .35); }
.pareamento__formas span:nth-child(3) { right: 0; bottom: 18vmin; width: 18vmin; height: 10vmin; background: #1d5bd8; }
.pareamento__caixa { position: relative; max-width: min(1100px, 90vw); display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.4vmin, 44px); text-align: center; }
.pareamento__logo { height: clamp(48px, 9vmin, 160px); width: auto; }
.pareamento__selo { padding: .3em .8em; background: var(--destaque); color: var(--tinta); font-size: clamp(11px, 1.6vmin, 30px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pareamento h1 { font-size: clamp(24px, 5.6vmin, 110px); font-weight: 850; letter-spacing: -.025em; line-height: 1.05; }
.pareamento__texto { font-size: clamp(15px, 2.5vmin, 46px); color: var(--texto-2); max-width: 44ch; line-height: 1.4; }
.pareamento__texto strong { color: #fff; }
.pareamento__codigo { display: flex; gap: clamp(6px, 1.4vmin, 26px); margin-top: 1vmin; }
.pareamento__codigo span { display: grid; place-items: center; width: clamp(46px, 11vmin, 220px); height: clamp(60px, 14vmin, 280px); background: #fff; color: var(--tinta); font-size: clamp(36px, 9.5vmin, 190px); font-weight: 900; border-bottom: clamp(5px, 1vmin, 16px) solid var(--destaque); }
.pareamento__validade { display: grid; gap: .6em; width: min(100%, 72vmin); font-size: clamp(12px, 1.8vmin, 32px); font-weight: 600; color: var(--texto-3); }
.pareamento__barra { display: block; height: clamp(3px, .5vmin, 8px); background: var(--destaque); transform-origin: left center; }