/* Painel de TV: tela de gestão (prévia, dispositivos) + o quadro da TV (tv-quadro.js), também usado em /tv.
   Tons ApiceSoft: quadro em marinho com verde de destaque; composição da versão anterior
   (indicadores no topo, tarefas à esquerda, colaboradores à direita). */

/* ---------- gestão ---------- */
.tvp-escopo { color: var(--texto-3); font-size: 0.88rem; margin: -6px 0 12px; }
.botao.desligado { opacity: 0.55; pointer-events: none; }
.botao svg, .tv-botao-texto svg { width: 18px; height: 18px; }
.tvp-previa { margin-bottom: 24px; }
.tvp-previa #tv-previa { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.tvp-legenda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--texto-3); font-size: 0.82rem; padding: 8px 4px 0; }
.tv-previa-vazia { background: var(--marinho); color: rgba(255, 255, 255, 0.85); min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
.tv-previa-vazia b { color: #fff; font-family: Sora, Inter, sans-serif; }
.tvp-dispositivos h2 { font-size: 1.15rem; }
.tvp-disp-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tvp-disp { display: flex; flex-direction: column; gap: 6px; }
.tvp-disp-cabeca { display: flex; align-items: center; justify-content: space-between; color: var(--verde); }
.tvp-disp-cabeca svg { width: 26px; height: 26px; }
.tvp-disp h3 { font-size: 1.05rem; }
.tvp-disp .situacao { font-size: 0.85rem; line-height: 1.55; margin: 0; }
.tvp-disp-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.tvp-disp-acoes .botao { flex: 1 1 auto; min-height: 44px; }

/* editor e código */
.modal:has(.tvp-form) { width: min(620px, calc(100% - 24px)); }
.tvp-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tvp-grupo { margin-top: 16px !important; }
.tvp-grupo legend { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.tvp-opcoes { display: flex; flex-wrap: wrap; gap: 0 18px; }
.tvp-opcoes .caixa-check, .tvp-form > fieldset > .caixa-check { min-height: 44px; }
.tvp-blocos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tvp-bloco { display: flex; align-items: center; gap: 6px; border: 1px solid var(--linha); border-radius: 12px; padding: 2px 6px 2px 12px; }
.tvp-bloco.fora { background: var(--fundo); }
.tvp-bloco .caixa-check { flex: 1; min-height: 44px; }
.tvp-bloco .botao.icone-so { width: 44px; min-height: 44px; border: 0; background: none; font-size: 1.1rem; }
.tvp-passos { padding-left: 20px; color: var(--texto-2); }
.tvp-passos a { word-break: break-all; }
.tvp-codigo { font-family: Sora, Inter, monospace; font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 700; letter-spacing: 0.18em; text-align: center; background: var(--marinho); color: var(--verde-claro); border-radius: var(--raio); padding: 18px 10px; margin: 12px 0; user-select: all; }

/* ---------- quadro da TV ---------- */
.tv-quadro {
  --tv-fundo: var(--marinho);
  --tv-cartao: #102a37;
  --tv-linha: rgba(255, 255, 255, 0.08);
  --tv-texto: #ffffff;
  --tv-texto-2: rgba(255, 255, 255, 0.72);
  --tv-texto-3: rgba(255, 255, 255, 0.5);
  --tv-perigo: #ff7a6e;
  --tv-alerta: #ffbe55;
  --tv-hoje: #7cc7ff;
  background: radial-gradient(90% 60% at 100% 0%, rgba(53, 214, 106, 0.1), transparent 60%), var(--tv-fundo);
  color: var(--tv-texto);
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  font-family: Inter, system-ui, sans-serif;
}
.tv-quadro.imersivo { position: fixed; inset: 0; z-index: 80; height: 100dvh; padding: clamp(14px, 1.6vw, 28px); overflow: hidden; }
.tv-quadro.embutido { min-height: 520px; }
.tv-topo { display: flex; align-items: center; gap: 16px; }
.tv-identidade { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.tv-identidade img { width: clamp(34px, 3vw, 52px); height: auto; }
.tv-identidade h1 { font-size: clamp(1.1rem, 1.8vw, 2rem); }
.tv-identidade p { margin: 0; color: var(--verde-claro); font-weight: 600; text-transform: capitalize; font-size: clamp(0.85rem, 1.1vw, 1.2rem); }
.tv-topo-fim { display: flex; align-items: center; gap: 10px; }
.tv-conexao { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; border-radius: 999px; padding: 6px 12px; }
.tv-conexao svg { width: 15px; height: 15px; }
.tv-conexao.vivo { background: rgba(53, 214, 106, 0.16); color: var(--verde-claro); }
.tv-conexao.parado { background: rgba(255, 190, 85, 0.16); color: var(--tv-alerta); }
.tv-relogio { font-family: Sora, Inter, sans-serif; font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 2rem); font-variant-numeric: tabular-nums; }
.tv-botao-icone, .tv-botao-texto { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--tv-linha); background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; font-weight: 600; padding: 0 10px; }
.tv-botao-icone svg { width: 20px; height: 20px; }
.tv-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 14px; }
.tv-celula { min-height: 0; display: flex; }
.tv-celula > * { flex: 1; min-width: 0; }

/* indicadores */
.tv-progresso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; background: var(--tv-cartao); border-radius: var(--raio); padding: 14px 18px; }
.tv-progresso > div:first-child { display: flex; flex-direction: column; }
.tv-progresso strong { font-family: Sora, Inter, sans-serif; font-size: clamp(1.1rem, 1.6vw, 1.8rem); }
.tv-progresso span { color: var(--tv-texto-2); font-size: clamp(0.8rem, 0.95vw, 1.05rem); }
.tv-progresso-fim { flex: 1 1 320px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.tv-progresso-fim strong { color: var(--verde-claro); }
.tv-barra { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.tv-barra i { display: block; height: 100%; border-radius: 6px; background: var(--degrade); transition: width 0.6s; }
.tv-prazos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tv-numero { background: var(--tv-cartao); border-radius: var(--raio); padding: 12px 16px; border-top: 4px solid rgba(255, 255, 255, 0.2); }
.tv-numero span { display: flex; justify-content: space-between; align-items: center; color: var(--tv-texto-2); font-size: clamp(0.78rem, 0.95vw, 1.05rem); font-weight: 600; }
.tv-numero svg { width: 20px; height: 20px; }
.tv-numero strong { display: block; font-family: Sora, Inter, sans-serif; font-size: clamp(1.6rem, 3vw, 3.4rem); line-height: 1.15; }
.tv-numero.hoje { border-top-color: var(--tv-hoje); } .tv-numero.hoje svg { color: var(--tv-hoje); }
.tv-numero.alerta { border-top-color: var(--tv-alerta); } .tv-numero.alerta strong, .tv-numero.alerta svg { color: var(--tv-alerta); }
.tv-numero.perigo { border-top-color: var(--tv-perigo); } .tv-numero.perigo strong, .tv-numero.perigo svg { color: var(--tv-perigo); }
.tv-numero.ok { border-top-color: var(--verde-claro); } .tv-numero.ok strong, .tv-numero.ok svg { color: var(--verde-claro); }

/* listas */
.tv-painel { background: var(--tv-cartao); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tv-painel-cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tv-painel-cabeca h2 { font-size: clamp(0.95rem, 1.2vw, 1.35rem); }
.tv-conta { background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 1px 10px; font-weight: 700; font-size: 0.85rem; }
.tv-paginas { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--tv-texto-3); font-size: 0.78rem; }
.tv-paginas i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.tv-paginas i.ativo { background: var(--verde-claro); }
.tv-lista { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
.tv-linha { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border-left: 4px solid rgba(255, 255, 255, 0.2); }
.tv-linha.u-legal { border-left-color: var(--tv-perigo); }
.tv-linha.u-internal { border-left-color: var(--tv-alerta); }
.tv-linha.u-today { border-left-color: var(--tv-hoje); }
.tv-linha.u-feita { border-left-color: var(--verde-claro); }
.tv-linha-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-linha-principal strong { font-size: clamp(0.9rem, 1.1vw, 1.25rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-linha-principal span { color: var(--tv-texto-2); font-size: clamp(0.78rem, 0.95vw, 1.05rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-linha-principal b { color: #fff; font-weight: 600; }
.tv-linha-data { text-align: right; display: flex; flex-direction: column; }
.tv-linha-data strong { font-family: Sora, Inter, sans-serif; font-size: clamp(0.95rem, 1.2vw, 1.35rem); }
.tv-linha-data span { font-size: clamp(0.72rem, 0.85vw, 0.95rem); color: var(--tv-texto-3); white-space: nowrap; }
.u-legal .tv-linha-data span { color: var(--tv-perigo); }
.u-internal .tv-linha-data span { color: var(--tv-alerta); }
.u-today .tv-linha-data span { color: var(--tv-hoje); }
.u-feita .tv-linha-data span { color: var(--verde-claro); }
.tv-obrigacao { padding: 8px 4px; display: flex; flex-direction: column; gap: 6px; }
.tv-obrigacao > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.tv-obrigacao strong { font-size: clamp(0.88rem, 1.05vw, 1.2rem); font-weight: 600; }
.tv-obrigacao span { font-family: Sora, Inter, sans-serif; font-weight: 700; }
.tv-obrigacao small { color: var(--tv-texto-3); font-weight: 400; }

/* colaboradores (à direita) */
.tv-legenda { display: flex; justify-content: space-between; color: var(--tv-texto-3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 4px 6px; }
.tv-pessoa { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 6px; }
.tv-pessoa-cabeca { display: flex; align-items: center; gap: 10px; }
.tv-pessoa-cabeca > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-pessoa-cabeca strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(0.88rem, 1.05vw, 1.2rem); }
.tv-pessoa-cabeca span { color: var(--tv-texto-3); font-size: 0.78rem; }
.tv-pessoa-cabeca > b { font-family: Sora, Inter, sans-serif; font-size: clamp(1.2rem, 1.7vw, 1.9rem); }
.tv-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(53, 214, 106, 0.18); color: var(--verde-claro); font-weight: 700; font-size: 0.85rem; }
.tv-pessoa-andamento { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--tv-texto-2); }
.tv-pessoa-andamento strong { color: var(--verde-claro); }
.tv-vazio { display: grid; justify-items: center; gap: 6px; padding: 24px 8px; color: var(--tv-texto-3); text-align: center; }
.tv-vazio svg { width: 28px; height: 28px; color: var(--verde-claro); }
.tv-vazio p { margin: 0; }
.tv-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--tv-texto-3); font-size: 0.8rem; }

/* prévia embutida: no celular vira uma coluna e a rolagem é livre */
.tv-quadro.compacto .tv-numero strong { font-size: clamp(1.4rem, 2.4vw, 2.4rem); }
@media (max-width: 760px) {
  .tv-quadro.embutido { min-height: 0; padding: 14px; }
  .tv-quadro.embutido .tv-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: none !important; }
  .tv-quadro.embutido .tv-celula { grid-column: 1 !important; grid-row: auto !important; }
  .tv-quadro.embutido .tv-prazos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-quadro.embutido .tv-numero.ok { grid-column: 1 / -1; }
  .tv-quadro.embutido .tv-conexao { display: none; }
  .tv-quadro.imersivo { overflow-y: auto; }
  .tv-quadro.imersivo .tv-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: none !important; }
  .tv-quadro.imersivo .tv-celula { grid-column: 1 !important; grid-row: auto !important; }
  .tv-quadro.imersivo .tv-prazos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- tela cheia dentro do Gestor e TV pareada (/tv) ---------- */
.tv-exibir { position: fixed; inset: 0; z-index: 80; background: var(--marinho); }
.tv-ajuda { position: fixed; z-index: 90; left: 50%; bottom: 20px; transform: translateX(-50%); background: #fff; color: var(--marinho); border-radius: 12px; padding: 10px 14px; margin: 0; }
.tv-corpo { background: var(--marinho); overflow: hidden; }
.tv-corpo .veu { z-index: 85; }
.tv-corpo .modal { z-index: 90; }
.tv-parear { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(90% 60% at 100% 0%, rgba(53, 214, 106, 0.16), transparent 60%), var(--marinho); }
.tv-parear-cartao { width: min(460px, 100%); background: #102a37; color: #fff; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.tv-parear-cartao h1 { font-size: 1.6rem; }
.tv-parear-cartao p { margin: 0; color: rgba(255, 255, 255, 0.75); }
.tv-parear-cartao b { color: #fff; }
.tv-parear-marca { width: 150px; margin-bottom: 8px; }
.tv-parear-cartao form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tv-parear-cartao label { font-weight: 600; font-size: 0.9rem; }
.tv-parear-cartao input { min-height: 56px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; font-family: Sora, Inter, monospace; font-size: 1.5rem; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; }
.tv-parear-cartao input::placeholder { color: rgba(255, 255, 255, 0.25); }
.tv-parear-cartao .botao:not(.principal) { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.16); }
.tv-parear-nota { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5) !important; }
.tv-erro { background: rgba(255, 122, 110, 0.15); color: #ffb3ab; border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; }
.tv-parear-cartao .barra { margin: 4px 0 0; }