@import url('/comum/fontes.css');
/* Painel Conecta: unidades proporcionais a 720p/1080p; sem fontes remotas. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: 'Outfit', sans-serif; --fonte: 'Outfit', sans-serif; --mono: 'Outfit', sans-serif; --apagado: #bbc6cc; background: #101c23; color: #f5f7f8; grid-template-rows: 10vh 1fr 10vh; font-variant-numeric: tabular-nums; }
.barra { background: #101c23; border: 0; padding: 0 2vw; gap: 2vw; }
.marca .logo { border-radius: .8vh; background: #fff; color: #17272e; width: 6vh; height: 6vh; }
.marca .logo img { object-fit: contain; }
.marca h1 { font-size: 3vh; letter-spacing: -.025em; }
.relogio b { font-family: inherit; font-size: 4.5vh; }
.relogio span, .clima div span { font-family: inherit; font-size: 1.8vh; color: #bbc6cc; letter-spacing: 0; text-transform: none; }
.clima b { font-family: inherit; font-size: 4.5vh; }
.corpo { grid-template-columns: minmax(0, 1fr) 43vw; gap: 1.2vw; padding: 0 1.5vw 1.8vh; }
.palco { border-radius: 1vh; background: #17272e; min-width: 0; }
.lateral { grid-template-rows: 40vh minmax(0, 1fr); gap: 1.5vh; }
.atual { background: #f5f6f2; color: #152830; border-radius: 1vh; border-top: .9vh solid var(--cor); padding: 2vh 2vw; }
.atual .titulo { font-size: 1.9vh; line-height: 1.3; letter-spacing: .12em; color: #43565d; gap: 1vw; }
.atual .titulo span:last-child { text-align: right; max-width: 75%; }
.atual .numero { font-size: 18vh; letter-spacing: -.045em; margin: .8vh 0; line-height: 1; }
.atual .numero.longo { font-size: 14vh; }
.atual .numero.nome { font-size: 8vh; line-height: 1.1; }
.atual .cliente { font-size: 4.2vh; margin: 0 0 1vh; }
.atual .local { display: flex; background: #e2e8e5; border-radius: .6vh; padding: .8vh 1vw; font-size: 3vh; line-height: 1.15; max-width: 100%; }
.atual .local::before { content: '→'; width: auto; height: auto; border-radius: 0; background: none; color: #243c45; margin-right: .4vw; flex: none; }
.atual.vazia .numero { color: #57686b; }
.historico { padding: 1.5vh 1.5vw; background: #1b2c35; border-radius: 1vh; overflow: hidden; }
.historico h3 { font-size: 1.8vh; margin-bottom: .7vh; color: #bbc6cc; }
.historico ol { min-height: 0; }
.historico li, .historico.compacta li { display: grid; grid-template-columns: minmax(0, 1fr) 38%; align-items: center; gap: 1vw; min-height: 0; padding: .5vh 0; border-color: #40515b; }
.historico li b, .historico.compacta li b { font-size: 3.1vh; line-height: 1.1; letter-spacing: -.02em; }
.historico li span, .historico.compacta li span { font-size: 2vh; line-height: 1.15; text-align: right; color: #d5dfe3; white-space: normal; }
.historico li.sem { display: block; font-size: 2.4vh; color: #d5dfe3; padding-top: 2vh; }
.filas-status { display: flex; flex-wrap: wrap; gap: .4vh .8vw; margin-top: .7vh; }
.filas-status span { background: none; padding: 0; font-size: 1.6vh; color: #bbc6cc; }
.legenda { left: 2vw; right: 2vw; bottom: 4vh; }
.legenda h2, .oferta h2 { font-size: 5.8vh; line-height: 1.07; }
.etiqueta b, .preco .etq b { font-size: 10vh; }
.chip, .letreiro span b { background: #f5f6f2; color: #17272e; border-radius: .4vh; }
.cartaz { background: #172b34; border-top: 1vh solid var(--cor); padding: 4vh 3vw; color: #fff; }
.cartaz h2 { font-size: 7vh; }
.cartaz .chip { color: #17272e; }
.wifi { padding: 4vh 2vw; gap: 2vw; }
.wifi h2 { font-size: 6vh; }
.wifi img { width: 24vh; border-radius: 1vh; }
.wifi p { font-size: 2.6vh; }
.rodape { background: #1b2c35; border-top: 1px solid #40515b; color: #f5f7f8; }
.rodape .qr { padding: .7vh 1.5vw; gap: 1vw; background: #fff; color: #17272e; }
.rodape .qr img { height: 8.4vh; width: 8.4vh; padding: .3vh; object-fit: contain; }
.rodape .qr b { font-family: inherit; font-size: 2.1vh; }
.rodape .qr small { display: block; font-size: 1.7vh; font-weight: 400; }
.letreiro div { font-size: 2.8vh; }
.letreiro span b { font-family: inherit; font-size: 1.6vh; }
.chamada-cheia { background: #f5f6f2; color: #152830; border: 1.8vh solid var(--cor); padding: 4vh 4vw; }
.chamada-cheia .rotulo-c { color: #43565d; font-family: inherit; font-size: 3vh; }
.chamada-cheia .grande { font-family: inherit; font-size: 27vh; color: #152830; text-shadow: none; line-height: 1; animation: none; }
.chamada-cheia.vis .grande { animation: pulsa 1s ease-in-out 3; }
.chamada-cheia .grande.nome { font-family: inherit; font-size: 14vh; color: #152830; text-shadow: none; }
.chamada-cheia .nome-c { font-size: 7vh; }
.chamada-cheia .onde-c { font-family: inherit; font-size: 5vh; background: #e2e8e5; color: #152830; padding: 1.2vh 2vw; border-radius: .7vh; max-width: 88vw; }
.ativar { inset: auto; left: 2.5vw; top: 12vh; transform: none; display: flex; text-align: left; gap: .8vw; padding: 1.1vh 1vw; background: #fff; color: #17272e; border: 2px solid #536971; border-radius: .7vh; box-shadow: 0 .4vh 1.4vh rgba(0,0,0,.2); max-width: 43vw; }
.ativar b { color: #17272e; font-size: 2vh; }
.ativar p { color: #475b64; font-size: 1.5vh; }
.ativar:focus { outline: 3px solid #f6c85b; outline-offset: 4px; }
.desconectado { top: 1vh; right: 1vw; background: #a52c21; font-size: 2vh; }
/* Variante com uma linha por fila: mesmos dados e eventos do painel original. */
.senhas { background: #1b2c35; border: 0; border-radius: 1vh; overflow: hidden; }
.senhas > h3 { color: #cbd6dc; font: 700 1.9vh 'Outfit', sans-serif; padding: 1.4vh 1.6vw; }
.fila { background: #f5f6f2; border: 0; border-top: .6vh solid var(--cor); padding: 1.2vh 1.6vw; color: #152830; }
.fila .topo-fila { color: #43565d; font-size: 1.9vh; letter-spacing: .03em; }
.fila .atual, .fila:nth-child(odd) .atual { background: none; padding: 0; border: 0; border-radius: 0; color: #152830; text-shadow: none; font-size: 11vh; }
.fila .atual.nome { font-size: 6vh; }
.fila .onde { color: #263e47; font-size: 2.5vh; letter-spacing: 0; text-transform: none; }
.fila .antes { color: #43565d; font-size: 2vh; }
.fila .antes span { border-color: #bcc8c7; }
.fila.chamando { animation: destaque 1s ease-in-out 4; background: #fff; }
@keyframes destaque { 50% { box-shadow: inset 0 0 0 .7vh var(--cor); } }
@media (prefers-reduced-motion: reduce) { .slide, .chamada-cheia { transition: none; } .slide.vis img, .chamada-cheia.vis .grande, .atual.chamando, .fila.chamando { animation: none; } }
.historico li span, .historico.compacta li span { max-width: 100%; overflow: visible; }
/* A senha tem precedência sobre o valor da oferta também na variante por fila. */
.preco .etq b { font-size: 8vh; }

/* Rodada 2: marca em grande área, senha protagonista e histórico para leitura à distância. */
body { font-family: 'DM Sans', sans-serif; }
.marca h1, .numero, .grande, .historico b, .fila .atual { font-family: 'Outfit', sans-serif; }
.corpo { grid-template-columns: minmax(0, 1fr) 47vw; }
.lateral { grid-template-rows: 43vh minmax(0, 1fr); gap: 1.2vh; }
.lateral > .atual { background: linear-gradient(rgba(0,0,0,.56), rgba(0,0,0,.56)), var(--cor); color: #fff; border: 0; border-left: 1.1vw solid var(--cor); padding: 2vh 1.8vw; display: flex; flex-direction: column; justify-content: center; }
.atual .titulo { color: #fff; font-size: 2.1vh; }
.atual .numero { font-size: 23vh; font-weight: 800; letter-spacing: -.045em; margin: .6vh 0; }
.atual .numero.longo { font-size: 18vh; }
.atual .numero.nome { font-size: 9vh; }
.atual .cliente { font-size: 4.7vh; line-height: 1.1; }
.atual .local { background: #fff; color: #172e36; font-size: 3.2vh; padding: .9vh 1vw; align-self: flex-start; }
.atual.vazia .numero { color: #fff; }
.historico { padding: 1.3vh 1.6vw; }
.historico h3 { font-size: 2vh; color: #e0e8ec; }
.historico li b, .historico.compacta li b { font-size: 3.9vh; line-height: 1.12; }
.historico li span, .historico.compacta li span { font-size: 2.6vh; color: #f1f5f7; }
.historico li, .historico.compacta li { grid-template-columns: minmax(0, 1fr) 34%; }
.filas-status span { font-size: 1.7vh; }
.chamada-cheia { background: linear-gradient(rgba(0,0,0,.56), rgba(0,0,0,.56)), var(--cor); color: #fff; border: 2vh solid var(--cor); }
.chamada-cheia .rotulo-c { color: #fff; font-size: 3.5vh; }
.chamada-cheia .grande { color: #fff; font-size: 30vh; font-weight: 800; letter-spacing: -.035em; }
.chamada-cheia .grande.nome { color: #fff; }
.chamada-cheia .onde-c { background: #fff; font-size: 5.5vh; }
.chamada-cheia.vis { animation: entrada-chamada .45s ease-out; }
.chamada-cheia.vis .grande { animation: pulso-chamada 1.2s ease-in-out 4; }
.atual.chamando, .fila.chamando { animation: foco-chamada 1.2s ease-in-out 4; }
.fila { background: linear-gradient(rgba(0,0,0,.56), rgba(0,0,0,.56)), var(--cor); color: #fff; border-top: .6vh solid var(--cor); }
.fila .atual, .fila:nth-child(odd) .atual { color: #fff; font-size: 13vh; }
.fila .atual.nome { font-size: 6.5vh; }
.fila .topo-fila, .fila .onde, .fila .antes { color: #fff; }
.fila .onde { font-size: 3vh; }
.fila .antes { font-size: 2.7vh; }
.fila.chamando { background: linear-gradient(rgba(0,0,0,.56), rgba(0,0,0,.56)), var(--cor); }
@keyframes entrada-chamada { from { opacity: 0; transform: translateY(3vh); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulso-chamada { 50% { transform: scale(1.035); } }
@keyframes foco-chamada { 50% { box-shadow: inset 0 0 0 .8vh #fff; } }
@media (prefers-reduced-motion: reduce) { .chamada-cheia.vis, .chamada-cheia.vis .grande, .atual.chamando, .fila.chamando { animation: none; } }
.lateral { grid-template-rows: 44vh minmax(0, 1fr); }
.atual .numero { font-size: 22vh; margin: .3vh 0; }
.atual .numero.longo { font-size: 18vh; }
.atual .numero.nome { font-size: 9vh; }