@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --azul: #12447f;
  --azul-forte: #0d3462;
  --azul-lavado: #e8eef6;
  --verde: #216e39;
  --verde-lavado: #e3f1e8;
  --vermelho: #b3261e;
  --vermelho-lavado: #fbeae9;
  --ambar: #8a5a00;
  --ambar-lavado: #fbf1dc;
  --branco: #ffffff;
  --cinza-bg: #f2f4f7;
  --cinza-borda: #d5dbe3;
  --cinza-borda-2: #e6e9ee;
  --texto: #1b1f24;
  --texto-2: #4a5361;
  --texto-3: #78818f;
  --fonte: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--fonte); background: var(--cinza-bg); color: var(--texto); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }

/* faixa institucional tricolor */
.gov-faixa { height: 4px; background: linear-gradient(90deg, var(--verde) 0 33%, var(--azul) 33% 66%, var(--vermelho) 66% 100%); }

/* ================= RECEPÇÃO ================= */
.gov-header {
  display: flex; align-items: center; gap: 16px; background: var(--branco);
  padding: 14px clamp(20px, 4vw, 48px); border-bottom: 1px solid var(--cinza-borda);
}
.gov-header img { height: 46px; }
.gov-header .t { display: flex; flex-direction: column; line-height: 1.25; }
.gov-header .t strong { font-size: 15px; font-weight: 700; }
.gov-header .t span { font-size: 12.5px; color: var(--texto-3); }
.gov-header .direita { margin-left: auto; font-size: 13px; color: var(--texto-3); }

.rec-conteudo {
  max-width: 1160px; margin: 0 auto; padding: 28px clamp(20px, 4vw, 48px) 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}
.painel { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 8px; overflow: hidden; }
.painel-cab { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--cinza-borda-2); }
.painel-cab .icone { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--azul-lavado); color: var(--azul); }
.painel-cab h2 { margin: 0; font-size: 15px; font-weight: 700; }
.painel-cab p { margin: 1px 0 0; font-size: 12.5px; color: var(--texto-3); }
.painel-corpo { padding: 20px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.campo label { font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.campo label .op { font-weight: 400; color: var(--texto-3); }
.campo input, .campo textarea {
  font-family: var(--fonte); font-size: 15px; color: var(--texto); padding: 11px 13px;
  border: 1px solid var(--cinza-borda); border-radius: 6px; background: var(--branco); resize: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18,68,127,0.14); }
.dica-campo { font-size: 12px; color: var(--texto-3); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 6px; font-weight: 700; font-size: 14.5px; padding: 12px 18px; }
.btn-azul { width: 100%; background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-forte); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { filter: brightness(0.94); }

.toast-ok { margin-top: 14px; padding: 11px 14px; border-radius: 6px; font-weight: 600; font-size: 13.5px; background: var(--verde-lavado); border: 1px solid #b7dcc4; color: var(--verde); display: flex; align-items: center; gap: 8px; }

.chamada-vazia { padding: 26px 20px; text-align: center; font-size: 13.5px; color: var(--texto-3); border: 1px dashed var(--cinza-borda); border-radius: 8px; background: #fafbfc; }
.chamada-card { border: 1px solid #e6b8b4; border-left: 5px solid var(--vermelho); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.chamada-card .faixa { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--vermelho-lavado); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vermelho); }
.chamada-card .corpo { padding: 14px; background: var(--branco); }
.chamada-card .corpo .info strong { display: block; font-size: 17px; font-weight: 700; }
.chamada-card .corpo .info em { font-style: normal; font-size: 13px; color: var(--texto-2); }
.chamada-card .corpo .obs-linha { margin-top: 8px; font-size: 12.5px; color: var(--ambar); background: var(--ambar-lavado); border-radius: 5px; padding: 6px 9px; }
.chamada-card .corpo .acoes { margin-top: 12px; display: flex; justify-content: flex-end; }
.pisca { animation: pisca 1.4s ease-in-out infinite; }
@keyframes pisca { 50% { background: #fff4f3; } }

/* ================= SMART TV ================= */
.tv-wrap { background: var(--cinza-bg); min-height: 100vh; }
.tv-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; background: var(--azul); color: #fff; padding: 14px clamp(24px, 4vw, 56px); }
.tv-header .logo-central { justify-self: center; }
.tv-header .logo-central img { height: 68px; background: #fff; border-radius: 10px; padding: 7px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); display: block; }
.tv-header .esquerda { display: flex; flex-direction: column; line-height: 1.28; }
.tv-header .esquerda strong { font-size: 19px; font-weight: 800; }
.tv-header .esquerda span { font-size: 13px; color: rgba(255,255,255,0.75); }
.tv-header .direita { justify-self: end; display: flex; align-items: center; gap: 20px; }
.tv-header .hora { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-header .aovivo { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.tv-header .aovivo .dot { width: 8px; height: 8px; border-radius: 50%; background: #7fe0a0; box-shadow: 0 0 8px #7fe0a0; }
.tv-header .aovivo.offline .dot { background: #ff8a8a; box-shadow: 0 0 8px #ff8a8a; }

.tv-body { padding: 26px clamp(24px, 4vw, 56px) 18px; }
.tv-rotulo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); }
.tv-rotulo .cont { background: var(--azul-lavado); color: var(--azul); border-radius: 999px; padding: 1px 11px; font-size: 12.5px; letter-spacing: 0; }

/* HERO */
.tv-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; align-items: stretch; gap: 26px; width: 100%; text-align: left;
  border: 1px solid var(--cinza-borda); border-left: 7px solid var(--vermelho); border-radius: 10px;
  background: var(--branco); padding: 26px 32px; margin-bottom: 26px; outline: none;
  box-shadow: 0 2px 4px rgba(16,32,56,0.05); transition: box-shadow .12s ease;
}
.tv-hero .lado-esq { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tv-hero .selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vermelho); margin-bottom: 10px; }
.tv-hero .nome { font-size: clamp(30px, 3.2vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.tv-hero .chegada { margin-top: 12px; font-size: 15px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.tv-hero .assunto-col { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: var(--azul-lavado); border-left: 4px solid var(--azul); border-radius: 10px; padding: 18px 22px; }
.tv-hero .assunto-col .rot { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul); }
.tv-hero .assunto-col .assunto { font-size: clamp(22px, 2.3vw, 32px); font-weight: 800; line-height: 1.14; color: var(--azul-forte); }
.tv-hero .assunto-col .obs { margin-top: 4px; display: inline-flex; align-items: flex-start; gap: 7px; font-size: 14.5px; color: var(--ambar); background: var(--branco); border: 1px solid #e9d5a8; border-radius: 7px; padding: 8px 11px; }
.tv-hero .acao { flex-shrink: 0; padding: 12px 22px; border-radius: 6px; background: var(--azul-lavado); color: var(--azul); font-weight: 700; font-size: 14px; align-self: center; }

.tv-lista { display: flex; flex-direction: column; gap: 8px; }
.tv-card {
  display: grid; grid-template-columns: auto minmax(200px, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 20px; width: 100%; text-align: left; outline: none;
  border: 1px solid var(--cinza-borda); border-radius: 8px; background: var(--branco); padding: 15px 22px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.tv-card .num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; font-weight: 800; font-size: 17px; color: #fff; background: var(--azul); }
.tv-card .col-nome { min-width: 0; }
.tv-card .nome { font-size: 22px; font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-card .obs-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; color: var(--ambar); background: var(--ambar-lavado); border-radius: 4px; padding: 1px 8px; font-weight: 600; }
.tv-card .assunto { min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--azul); background: var(--azul-lavado); border-left: 3px solid var(--azul); border-radius: 6px; padding: 8px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-card .dir { display: flex; align-items: center; gap: 14px; }
.tv-card .chegada { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; text-align: right; }
.tv-card .chegada b { display: block; color: var(--texto-2); font-weight: 700; }
.tv-card .acao { padding: 8px 18px; border-radius: 6px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--azul); opacity: 0; transition: opacity .12s ease; }
.tv-card.focado { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18,68,127,0.22); }
.tv-card.focado .chegada { display: none; }
.tv-card.focado .acao { opacity: 1; }
.tv-hero:focus { box-shadow: 0 0 0 3px rgba(33,110,57,0.5); }
.tv-hero:focus .acao { background: var(--verde); color: #fff; }
.tv-vazio { color: var(--texto-3); font-size: 16px; padding: 18px 0; }

.tv-rodape { display: flex; gap: 24px; justify-content: center; padding: 18px; border-top: 1px solid var(--cinza-borda); background: var(--branco); }
.tv-dica { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto-3); }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 5px; background: #f0f2f5; border: 1px solid var(--cinza-borda); box-shadow: 0 1px 0 var(--cinza-borda); font-size: 12px; font-weight: 700; color: var(--texto-2); }

/* O display das classes abaixo venceria a regra [hidden] do navegador,
   e elementos escondidos por JS continuariam aparecendo. */
[hidden] { display: none !important; }

/* ================= AVISO DE ERRO (as duas telas) ================= */
/* Antes, uma falha de rede não deixava rastro na tela. */
.aviso-erro {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  z-index: 90; max-width: min(560px, calc(100vw - 32px));
  background: var(--vermelho); color: #fff; font-size: 14.5px; font-weight: 600;
  padding: 13px 20px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.aviso-erro.visivel { opacity: 1; transform: translate(-50%, 0); }

#conexao.offline { color: var(--vermelho); font-weight: 700; }

/* link no canto direito do cabeçalho (recepção e histórico) */
.link-topo { color: var(--azul); text-decoration: none; font-weight: 600; font-size: 13px; margin-left: 16px; white-space: nowrap; }
.link-topo:hover { text-decoration: underline; }

/* botão-link no canto do cabeçalho de um painel */
.cab-botao {
  margin-left: auto; flex-shrink: 0; text-decoration: none;
  border: 1px solid var(--cinza-borda); background: var(--branco); color: var(--texto-2);
  border-radius: 6px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
}
.cab-botao:hover { background: var(--azul-lavado); border-color: var(--azul); color: var(--azul); }

/* ================= RECEPÇÃO — extras ================= */
.painel.largo { grid-column: 1 / -1; }

.form-acoes { display: flex; gap: 10px; }
.form-acoes .btn-azul { flex: 1; width: auto; }
.btn-secundario { background: var(--branco); color: var(--texto-2); border: 1px solid var(--cinza-borda); }
.btn-secundario:hover { background: #f7f8fa; }
.btn:disabled { opacity: 0.55; cursor: default; }

.cont-fila { display: inline-block; background: var(--azul-lavado); color: var(--azul); border-radius: 999px; padding: 1px 10px; font-size: 12.5px; font-weight: 700; margin-left: 4px; }

.som-aviso {
  display: block; width: 100%; margin-bottom: 12px; text-align: left;
  background: var(--ambar-lavado); border: 1px solid #e9d5a8; color: var(--ambar);
  border-radius: 6px; padding: 10px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.som-aviso:hover { background: #f7e9cd; }

.fila-lista { display: flex; flex-direction: column; gap: 8px; }
.fila-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  border: 1px solid var(--cinza-borda); border-left: 4px solid var(--cinza-borda);
  border-radius: 8px; padding: 12px 14px; background: var(--branco);
}
.fila-item.atendendo { border-left-color: var(--vermelho); background: #fffdfd; }
.fila-item .pos {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 7px; background: var(--azul-lavado); color: var(--azul); font-weight: 800; font-size: 14px;
}
.fila-item.atendendo .pos { background: var(--vermelho-lavado); color: var(--vermelho); }
.fila-item .dados { min-width: 0; }
.fila-item .linha-1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila-item .linha-1 strong { font-size: 15px; font-weight: 700; }
.fila-item .linha-2 { margin-top: 2px; font-size: 13.5px; color: var(--azul); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-item .linha-3 { margin-top: 4px; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.fila-item .obs-mini { display: inline-block; margin-left: 6px; color: var(--ambar); background: var(--ambar-lavado); border-radius: 4px; padding: 1px 7px; font-weight: 600; }

.tag-status { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; padding: 2px 7px; }
.tag-status.st-espera { background: var(--cinza-bg); color: var(--texto-2); }
.tag-status.st-atend { background: var(--vermelho-lavado); color: var(--vermelho); }

.acoes-mini { display: flex; gap: 6px; flex-shrink: 0; }
.btn-mini {
  border: 1px solid var(--cinza-borda); background: var(--branco); color: var(--texto-2);
  border-radius: 6px; padding: 7px 13px; font-size: 12.5px; font-weight: 700;
}
.btn-mini:hover { background: #f7f8fa; border-color: var(--texto-3); }
.btn-mini.perigo { color: var(--vermelho); border-color: #e6b8b4; }
.btn-mini.perigo:hover { background: var(--vermelho-lavado); }
.btn-mini:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 820px) { .rec-conteudo { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .fila-item { grid-template-columns: auto minmax(0, 1fr); }
  .fila-item .acoes-mini { grid-column: 1 / -1; justify-content: flex-end; }
  .form-acoes { flex-direction: column; }
}