/* ==========================================================================
   TELAS DE CONFIGURAÇÃO DE TV — folha única do prefixo .tv- na SPA
   Refino Visual 4 · 26/07/2026

   POR QUE ESTE ARQUIVO EXISTE (e por que não é mais um <style> injetado)

   Duas telas usam o prefixo `.tv-`: "Dashboard TV" (dashboard_tv_config.js) e
   "Parear TV / Tokens" (tv_parear.js). Cada uma injetava o SEU PRÓPRIO <style>
   — `tvc-style` e `tvp-style` — e as duas definiam as MESMAS SEIS classes:
   .tv-config-wrap, .tv-config-header, .tv-config-body, .tv-config-section,
   .btn-tv-salvar e .tv-config-msg.

   Como cada bloco é protegido por um `if (!document.getElementById(...))` com
   id diferente, os dois ficam no <head> ao mesmo tempo depois de visitar as
   duas telas. Especificidade igual: vence o que entrou POR ÚLTIMO. Resultado
   medido no navegador, antes deste refino:

       Parear TV aberta direto ............... max-width 680px
       Parear TV depois de abrir Dashboard TV  max-width 640px

   Ou seja: a MESMA tela mudava de largura conforme o caminho que o usuário fez
   no menu. Não era estilo de módulo, era colisão de dois donos para uma classe
   só. A correção é ter UM dono: as classes compartilhadas moram aqui, os dois
   módulos não injetam mais nada.

   A COR NÃO MUDOU — NEM UMA (regra invertida do refino 4)
   Nestas telas a cor carrega ESTADO: token ativo x revogado, mensagem de erro
   x sucesso, o aviso de "copie o token agora". Todo valor abaixo é o mesmo que
   estava nos dois <style>. Onde há `var()`, o token vale EXATAMENTE o hex que
   substituiu (--azul-inst = #1a2744, --linha-forte = #d1d5db, --cinza-suave =
   #9ca3af, --cor-sucesso = #16a34a, --cor-erro = #c0392b, --cor-info =
   #2563eb). Os cinzas-ardósia (#718096, #e2e8f0, #f8fafc, #4b5563) NÃO têm
   token de valor idêntico e por isso ficaram literais — trocar por um token
   "parecido" mudaria a cor, e a cor não muda nesta leva.

   O QUE MUDOU: a FORMA. Cantos pelo token (--radius/--radius-sm), botão em
   pílula, cartão com sombra do sistema, espaçamento pela escala --esp-*,
   título em Barlow Condensed como o resto do ARGUS, campo com anel de foco em
   bronze e alvo de toque confortável.

   NÃO CONFUNDIR COM O css/tv.css
   O tv.css é a folha da TV de verdade (tv.html, tv-parear.html,
   tv-cast-receiver.html), com as séries --tv-cia1..4 / --tv-crack e o
   dimensionamento para LEITURA A METROS de distância. Ele NÃO é carregado pela
   SPA e não foi tocado. As duas telas desta folha são telas de mesa/celular do
   administrador; só dividem o prefixo do nome.
   ========================================================================== */

/* ---- Casca ------------------------------------------------------------- */
.tv-config-wrap {
  max-width: 680px;            /* o maior dos dois valores: a lista de tokens
                                  do Parear precisa da largura; a tela de
                                  configuração não perde nada com ela */
  margin: 0 auto;
  padding: var(--esp-5) var(--esp-4);
}

.tv-config-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--esp-5); gap: var(--esp-3); flex-wrap: wrap;
}
.tv-config-header h2 {
  font-family: var(--fonte-titulo);
  font-size: 1.35rem; font-weight: 700;
  color: var(--azul-inst);
  text-transform: uppercase; letter-spacing: .04em;
}

.tv-config-body { display: flex; flex-direction: column; gap: var(--esp-4); }

.tv-config-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: var(--esp-4) var(--esp-4);
}
.tv-config-section h3 {
  font-family: var(--fonte-titulo);
  font-size: .92rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: #718096;
  margin-bottom: var(--esp-3);
}
.tv-config-section p { line-height: 1.55; }

/* Texto de apoio das seções (era inline nos dois módulos). */
.tv-config-ajuda {
  font-size: .82rem; color: #718096;
  margin-bottom: var(--esp-3); line-height: 1.55;
}
.tv-config-ajuda code {
  font-family: var(--fonte-mono); font-size: .8rem;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 4px; padding: .05rem .3rem;
}

/* ---- Botões: pílula, como o resto do sistema -------------------------- */
.btn-tv-salvar, .btn-tv-abrir, .btn-tv-revogar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--radius-pilula);
  font-weight: 600; letter-spacing: .01em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transicao), box-shadow var(--transicao),
              transform var(--transicao);
}
.btn-tv-salvar, .btn-tv-abrir {
  background: var(--azul-inst); color: #fff;
}
.btn-tv-salvar { padding: .55rem 1.4rem; font-size: .88rem; min-height: 38px; }
.btn-tv-abrir  { padding: .5rem 1.1rem;  font-size: .82rem; min-height: 38px; }

.btn-tv-salvar:hover, .btn-tv-abrir:hover {
  background: #2a3a60;
  box-shadow: 0 4px 14px rgba(26,39,68,.22);
}
.btn-tv-salvar:active, .btn-tv-abrir:active, .btn-tv-revogar:active { transform: translateY(1px); }
.btn-tv-salvar:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-tv-salvar:focus-visible, .btn-tv-abrir:focus-visible, .btn-tv-revogar:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 2px;
}

/* COR DE DADO — vermelho de AÇÃO DESTRUTIVA. Revogar derruba a TV que usa o
   link; era `style="background:#dc2626"` cravado no botão. Mesmo valor. */
.btn-tv-revogar {
  background: #dc2626; color: #fff;
  padding: .3rem .85rem; font-size: .76rem; min-height: 32px;
}
.btn-tv-revogar:hover { background: #b91c1c; box-shadow: 0 4px 12px rgba(220,38,38,.25); }

/* ---- Campos ----------------------------------------------------------- */
.tv-config-linha {
  display: flex; gap: var(--esp-2); margin-bottom: var(--esp-3); flex-wrap: wrap;
}
.tv-config-linha input {
  padding: .5rem .75rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--radius-sm);
  font-size: .85rem; min-height: 40px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.tv-config-linha input:focus {
  outline: none; border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.16);
}
.tv-config-input-larga { flex: 1; min-width: 220px; }

/* O código de pareamento são 6 DÍGITOS lidos da tela da TV e digitados aqui:
   monospace, tracking aberto e centralizado é o que torna a leitura dígito por
   dígito possível. É tipografia FUNCIONAL, não enfeite — não compactar. */
.tv-config-input-codigo {
  width: 150px; text-align: center;
  font-family: var(--fonte-mono); font-size: 1.05rem; letter-spacing: .18em;
}

.tv-config-radio-group { display: flex; flex-direction: column; gap: var(--esp-2); }
.tv-radio-label, .tv-check-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; cursor: pointer; min-height: 32px;
}
.tv-radio-label input, .tv-check-label input { cursor: pointer; accent-color: var(--bronze); }
.tv-config-checks { display: flex; gap: var(--esp-5); flex-wrap: wrap; }

.tv-config-datas, .tv-config-rotacao {
  margin-top: var(--esp-3); padding-top: var(--esp-3);
  border-top: 1px solid #e2e8f0;
}
.tv-config-datas { display: flex; align-items: flex-end; gap: var(--esp-3); flex-wrap: wrap; }
.tv-config-datas label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .74rem; font-weight: 700; color: #718096;
  text-transform: uppercase; letter-spacing: .04em;
}
.tv-config-datas input, .tv-config-rotacao input {
  min-height: 40px; padding: 0 .6rem;
  border: 1px solid var(--linha-forte); border-radius: var(--radius-sm);
  font-size: .85rem;
  /* `input[type=text]` do main.css:106 deixa o sistema todo em CAIXA ALTA (é
     convenção do ARGUS para dado policial). Data e número não devem herdar
     isso de ancestral nenhum — era `style="text-transform:none"` inline nos
     dois campos de data; virou regra, mesmo efeito. */
  text-transform: none;
}
.tv-config-datas input:focus, .tv-config-rotacao input:focus {
  outline: none; border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.16);
}
.tv-config-rotacao { font-size: .88rem; }
.tv-config-rotacao input { width: 74px; text-align: center; margin: 0 .4rem; }
.tv-config-sep { color: #718096; align-self: flex-end; padding-bottom: .6rem; }

.tv-config-actions {
  display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
}

/* ---- Mensagens: COR DE DADO (estado da operação) ---------------------- */
.tv-config-msg { font-size: .82rem; font-weight: 600; }
.tv-config-msg.ok   { color: var(--cor-sucesso); }   /* #16a34a */
.tv-config-msg.erro { color: var(--cor-erro); }      /* #c0392b */

/* ---- Aviso do token recém-gerado: COR DE DADO ------------------------- */
/* Âmbar de ATENÇÃO. Este é o único momento em que o token aparece: fechada a
   tela, não há como recuperá-lo. O destaque é o que evita perder o segredo —
   preservado valor por valor (#fffbea / #f3c94a / #92400e). */
.tv-config-token-novo {
  background: #fffbea; border: 1px solid #f3c94a;
  border-radius: var(--radius-sm);
  padding: var(--esp-3); margin-bottom: var(--esp-3);
}
.tv-config-token-aviso {
  font-size: .82rem; font-weight: 700; color: #92400e;
  margin: 0 0 .4rem; line-height: 1.45;
}
.tv-config-token-url {
  display: block; word-break: break-all;
  font-family: var(--fonte-mono); font-size: .8rem;
  background: #fff; border: 1px solid #eee;
  border-radius: var(--radius-sm); padding: .6rem .7rem;
}

/* ---- Lista de tokens -------------------------------------------------- */
.tv-tokens-vazio { color: var(--cinza-suave); font-size: .85rem; }
.tv-tokens-erro  { color: var(--cor-erro); font-size: .85rem; }

.tv-tokens-tabela { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tv-tokens-tabela th {
  text-align: left; font-family: var(--fonte-titulo);
  color: #718096; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .6rem .5rem; border-bottom: 1px solid #e2e8f0;
}
.tv-tokens-tabela td {
  padding: .75rem .5rem; border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}
.tv-tokens-tabela tr:last-child td { border-bottom: none; }
.tv-tokens-desc { font-weight: 600; }
.tv-tokens-autor { font-size: .7rem; color: var(--cinza-suave); margin-top: .15rem; }
.tv-tokens-data  { font-size: .78rem; color: #4b5563; white-space: nowrap; }

/* COR DE DADO — o ESTADO do token. Verde = ativo (a TV funciona), vermelho =
   revogado (o link está morto). É por essa cor que se lê a lista de relance;
   uniformizar apagaria a distinção. Mesmos valores de antes (#16a34a /
   #b91c1c); a pílula com fundo translúcido é FORMA, e o matiz é o próprio. */
.tv-token-status {
  display: inline-block; padding: .18rem .6rem;
  border-radius: var(--radius-pilula);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.tv-token-status.ativo    { color: var(--cor-sucesso); background: rgba(22,163,74,.10); }
.tv-token-status.revogado { color: #b91c1c;            background: rgba(185,28,28,.10); }
.tv-token-revogado-em { font-size: .7rem; color: var(--cinza-suave); margin-top: .15rem; }

/* ---- Rodapé de acesso à TV ------------------------------------------- */
.tv-config-preview {
  margin-top: var(--esp-5); padding: var(--esp-3) var(--esp-4);
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: var(--radius);
}
.tv-config-preview-label { font-size: .75rem; color: #718096; margin-bottom: .35rem; line-height: 1.55; }
.tv-config-preview-nota { margin-top: var(--esp-3); }
.tv-config-url {
  display: block; font-family: var(--fonte-mono);
  font-size: .88rem; color: var(--azul-inst); margin-bottom: .5rem;
}
.tv-config-link-tv { font-size: .82rem; color: var(--cor-info); text-decoration: none; font-weight: 600; }
.tv-config-link-tv:hover { text-decoration: underline; }

/* ---- Celular ---------------------------------------------------------- */
/* O piso de toque de 44px vem da fundação (tema-argus.css, seção 8, por ID do
   <main>) e alcança estas telas — conferido no navegador a 390px. Aqui só o
   que é layout: nada pode estourar a largura, e a tabela de tokens rola dentro
   do próprio bloco em vez de empurrar a página. */
@media (max-width: 1024px) {
  .tv-config-wrap { padding: var(--esp-4) var(--esp-3); max-width: 100%; }
  .tv-config-section { padding: var(--esp-3); }
  .tv-config-input-codigo { width: 100%; }
  .tv-config-linha input { flex: 1 1 100%; }
  .tv-tokens-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tv-tokens-tabela { min-width: 520px; }
  .btn-tv-salvar, .btn-tv-abrir { min-height: var(--toque-min); }
  .btn-tv-revogar { min-height: var(--toque-min); padding-left: 1.1rem; padding-right: 1.1rem; }
}
