/* Alpha Dashboard: painel da TV (1920x1080, sem rolagem).
   Regra do projeto: legível a 4 metros. Luzes 24 px, nomes 22 px, números 36 px,
   faixa de alerta 28 px com fundo vermelho sólido, nada abaixo de 14 px. */

:root {
  --fundo: #0B1220;
  --cartao: #121A2B;
  --cartao-2: #0E1626;
  --borda: #1E2A40;
  --linha: #1A2438;
  --texto: #E6EDF7;
  --texto-2: #B8C4D9;
  --secundario: #8FA0BA;
  --ok: #34D399;
  --aviso: #FBBF24;
  --fora: #F87171;
  --neutro: #64748B;
  --acento: #38BDF8;
  --alerta-fundo: #B91C1C;
  --alerta-texto: #FFF1F2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; overflow: hidden; }
h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: 1.2px; }

.tela {
  width: 1920px; height: 1080px; margin: 0 auto;
  padding: 28px 44px 20px; display: flex; flex-direction: column; gap: 18px;
  transition: opacity 0.4s;
}

/* cabeçalho */
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 60px; }
.marca { display: flex; align-items: center; gap: 16px; }
.marca-logo { width: 48px; height: 48px; border-radius: 12px; background: var(--acento); color: var(--fundo); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; }
.marca-titulo { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
.marca-sub { font-size: 14px; color: var(--secundario); }
.cabecalho-direita { display: flex; align-items: center; gap: 24px; }
.relogio { text-align: right; }
.relogio-hora { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.relogio-data { font-size: 14px; color: var(--secundario); }

.selo { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; font-size: 20px; font-weight: 700; border: 1px solid; }
.selo.status-ok { background: #0F2A1E; border-color: #1F6B45; color: #7CE3A8; }
.selo.status-aviso { background: #2A2108; border-color: #8A6508; color: #FCD34D; }
.selo.status-fora { background: #2A1114; border-color: #7F2A33; color: #FCA5A5; }

/* luzes */
.luz { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: var(--neutro); flex: none; }
.luz-media { width: 16px; height: 16px; }
.status-ok .luz { background: var(--ok); box-shadow: 0 0 18px var(--ok); }
.status-aviso .luz { background: var(--aviso); box-shadow: 0 0 18px var(--aviso); }
.status-fora .luz { background: var(--fora); box-shadow: 0 0 22px var(--fora); animation: pulsar 1.6s ease-in-out infinite; }
.status-desconhecido .luz { background: var(--neutro); }
.status-texto { font-size: 14px; font-weight: 700; letter-spacing: 0.8px; }
.status-ok .status-texto { color: var(--ok); }
.status-aviso .status-texto { color: var(--aviso); }
.status-fora .status-texto { color: var(--fora); }
.status-desconhecido .status-texto { color: var(--secundario); }
.status-bloco { display: flex; align-items: center; gap: 10px; flex: none; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .status-fora .luz { animation: none; } }

/* faixas do topo: alerta (vermelha) e aviso positivo (verde) dividem a mesma linha quando coexistem */
.faixas { display: flex; gap: 16px; align-items: stretch; }
.alertas { display: flex; flex-direction: column; gap: 8px; flex: 3 1 0; min-width: 0; }
.avisos { flex: 2 1 0; min-width: 0; }
.alerta-titulo, .aviso .alerta-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alerta-detalhe { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alerta { display: flex; align-items: center; gap: 18px; background: var(--alerta-fundo); color: var(--alerta-texto); border-radius: 14px; padding: 10px 24px; }
.alerta.alerta-aviso { background: #92400E; } /* laranja: vencimento se aproximando, sem ser emergencia */
.alerta-icone { flex: none; }
.alerta-titulo { font-size: 28px; font-weight: 700; line-height: 1.15; }
.alerta-detalhe { font-size: 18px; opacity: 0.95; }

/* avisos positivos (ex.: revisao de site encerrada): verde, mesmo tamanho da faixa de alerta */
.avisos { display: flex; flex-direction: column; gap: 8px; }
.aviso-faixa { height: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 18px; background: #166534; color: #F0FDF4; border-radius: 14px; padding: 10px 24px; }

/* principal */
.principal { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; flex: 1 1 auto; min-height: 0; }
.coluna-esquerda { display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; }
.clientes-area, .redes-area { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 0 1 auto; }
.revisoes-area { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; min-height: 26px; }
.resumo-sites { display: flex; gap: 18px; font-size: 15px; color: var(--secundario); }
.resumo-sites span { display: inline-flex; align-items: center; gap: 6px; }
.resumo-sites i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* sites: linhas compactas (luz, nome, dominio, selos de SSL e dominio, leads de hoje) */
.clientes, .redes { display: grid; gap: 8px 14px; min-height: 0; grid-auto-rows: minmax(0, auto); flex: 0 1 auto; overflow: hidden; }
.clientes[data-colunas="3"], .redes[data-colunas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clientes[data-colunas="4"], .redes[data-colunas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clientes[data-colunas="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cliente { display: flex; align-items: center; gap: 12px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 6px 14px; min-width: 0; overflow: hidden; }
.cliente.status-fora { border-color: var(--fora); background: #1A1220; }
.cliente > .luz { flex: none; }
.cliente-textos { flex: 1 1 auto; min-width: 0; }
.cliente-nome { font-size: 18px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cliente-site { font-size: 14px; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.selos { display: flex; gap: 8px; flex: none; }
.selo-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--secundario); white-space: nowrap; }
.selo-mini .luz { width: 10px; height: 10px; box-shadow: none !important; animation: none !important; }
.selo-mini.status-ok .luz { background: var(--ok) !important; }
.selo-mini.status-aviso .luz { background: var(--aviso) !important; }
.selo-mini.status-fora .luz { background: var(--fora) !important; }
.selo-mini.status-desconhecido .luz { background: var(--neutro) !important; }
.selo-mini.status-ok .selo-texto, .selo-mini.status-desconhecido .selo-texto { display: none; }
.selo-mini.status-aviso { color: var(--aviso); font-weight: 700; }
.selo-mini.status-fora { color: var(--fora); font-weight: 700; }
.metrica-leads { display: flex; align-items: center; gap: 6px; flex: none; }
.leads-hoje { font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
.leads-rotulos { display: flex; flex-direction: column; font-size: 14px; line-height: 1.1; color: var(--secundario); }
.leads-rotulo { text-transform: uppercase; letter-spacing: 0.4px; }
.metrica-leads.aviso .leads-hoje, .metrica-leads.aviso .leads-semana { color: var(--aviso); }
/* 4 ou 5 colunas (10+ sites): sem dominio, nome em ate duas linhas, semana escondida */
.clientes[data-colunas="4"] .cliente-site, .clientes[data-colunas="5"] .cliente-site { display: none; }
.clientes[data-colunas="4"] .cliente-nome, .clientes[data-colunas="5"] .cliente-nome { font-size: 17px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.clientes[data-colunas="4"] .leads-semana, .clientes[data-colunas="5"] .leads-semana { display: none; }
.clientes[data-colunas="4"] .metrica-leads.aviso .leads-semana { display: block; }

/* redes sociais: uma linha por conta (nome, @, total e semana; ganho de hoje grande; comentarios sem resposta) */
.rede { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 8px 14px; min-width: 0; overflow: hidden; }
.rede-id { min-width: 0; }
.rede-nome { font-size: 18px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rede-handle { font-size: 14px; color: var(--acento); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seguidores-total { font-size: 14px; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rede-hoje { display: flex; flex-direction: column; align-items: center; }
.rede-hoje .metrica-valor { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.rede-hoje .metrica-rotulo { font-size: 14px; color: var(--secundario); text-transform: uppercase; letter-spacing: 0.6px; }
.seguidores-hoje.positivo { color: #7CE3A8; }
.seguidores-hoje.negativo { color: var(--aviso); }
.rede-comentarios { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; color: var(--secundario); text-align: center; min-width: 84px; }
.rede-comentarios .comentarios { font-size: 24px; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1; }
.rede-comentarios.status-aviso .comentarios, .rede-comentarios.status-aviso .rede-comentarios-texto { color: var(--aviso); }
.luz-pequena { width: 12px; height: 12px; box-shadow: none !important; animation: none !important; }
.redes[data-colunas="4"] .seguidores-total { display: none; }
.redes[data-colunas="4"] .rede-comentarios-texto { display: none; }

/* lateral */
.lateral { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 12px 20px; display: flex; flex-direction: column; gap: 6px; }
/* 9 servidores; o detalhe so aparece quando ha algo a dizer (aviso, fora, aguardando) */
.servidores { display: flex; flex-direction: column; }
.servidor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px solid var(--linha); min-height: 32px; }
.servidor:first-child { border-top: 0; }
.servidor.status-ok .servidor-detalhe { display: none; }
.servidor-nome { font-size: 16px; font-weight: 600; line-height: 1.15; }
.servidor-detalhe { font-size: 14px; line-height: 1.15; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px; }
.barras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.barra-rotulo { display: flex; justify-content: space-between; font-size: 14px; color: var(--secundario); margin-bottom: 5px; }
.barra-rotulo span:last-child { color: var(--texto); font-variant-numeric: tabular-nums; }
.barra-trilho { height: 8px; border-radius: 4px; background: var(--cartao-2); overflow: hidden; }
.barra-preenchida { height: 8px; background: var(--ok); width: 0; transition: width 0.6s; }
.barra-preenchida.aviso { background: var(--aviso); }
.barra-preenchida.fora { background: var(--fora); }

.totais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.total { gap: 2px; }
.rotulo { font-size: 14px; color: var(--secundario); text-transform: uppercase; letter-spacing: 0.8px; }
.rotulo-sub { font-size: 14px; color: var(--secundario); }
.numero-grande { font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.acento { color: var(--acento); }

.ultimos { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.leads-lista { display: flex; flex-direction: column; }
.lead[hidden] { display: none; }
.lead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--linha); }
.lead:first-child { border-top: 0; }
.lead-nome { font-size: 16px; font-weight: 600; line-height: 1.15; }
.lead-origem { font-size: 14px; line-height: 1.15; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.lead-hora { font-size: 15px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.vazio { font-size: 15px; color: var(--secundario); padding: 8px 0; }

/* faixa de baixo: plataformas e correcoes de site */
.rodape-blocos { display: flex; gap: 24px; align-items: stretch; }
.plataformas-area { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; min-width: 0; }
.plataformas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; flex: 1 1 auto; min-width: 0; }

/* correcoes de site: linha propria na coluna da esquerda, abaixo das redes */
.revisoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.revisao { display: flex; flex-direction: column; gap: 4px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 14px; min-width: 0; }
.revisao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.revisao-nome { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.revisao-percentual { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--acento); }
.revisao-barra { height: 8px; border-radius: 4px; background: var(--cartao-2); overflow: hidden; }
.revisao-barra-preenchida { height: 8px; background: var(--acento); width: 0; transition: width 0.6s; }
.revisao-detalhe { font-size: 14px; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.revisao-encerrada { border-color: #1F6B45; background: #0F2A1E; }
.revisao-encerrada .revisao-percentual, .revisao-encerrada .revisao-barra-preenchida { color: var(--ok); background: var(--ok); }
.revisao-encerrada .revisao-percentual { background: none; }
.revisao-encerrada .revisao-detalhe { color: #7CE3A8; }
.revisao-parada .revisao-percentual, .revisao-parada .revisao-barra-preenchida { color: var(--aviso); background: var(--aviso); }
.revisao-parada .revisao-percentual { background: none; }
.revisao-parada .revisao-detalhe { color: var(--aviso); }
.plataforma-nome { font-size: 17px; }
.plataforma { display: flex; align-items: center; gap: 12px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 16px; }
.plataforma.status-fora { border-color: var(--fora); }
.plataforma-textos { flex: 1 1 auto; min-width: 0; }
.plataforma-nome { font-size: 18px; font-weight: 700; }
.plataforma-msg { font-size: 14px; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* rodapé */
.rodape { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--secundario); height: 20px; }
.rodape-aviso { color: var(--aviso); font-weight: 600; letter-spacing: 0.6px; }

/* sem conexão */
.sem-conexao-faixa { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--alerta-fundo); color: var(--alerta-texto); font-size: 28px; font-weight: 700; text-align: center; padding: 16px; }
body.sem-conexao { box-shadow: inset 0 0 0 12px var(--fora); }
body.sem-conexao .tela { opacity: 0.55; }