/* Painel TV WOW — wallboard fullscreen (Sprint 41). Classes .tv-* escopadas. */

/* tv-mode: zera padding da página e força fundo dark (não esconde sidebar/topbar;
   tela cheia real é via botão → requestFullscreen no #tv-root). */
body.tv-mode .page { padding: 0 !important; overflow: hidden; }
body.tv-mode .content { background: #0a0a0f; }

.tv-wallboard {
  width: 100%; min-height: 100%; height: 100%;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,.18), transparent 60%),
              radial-gradient(900px 500px at 0% 110%, rgba(6,182,212,.12), transparent 55%), #0a0a0f;
  color: #e4e4e7; padding: 20px; display: flex; flex-direction: column; gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}
.tv-wallboard:fullscreen { padding: 24px; }

/* ─── HEADER ─── */
.tv-header {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  padding: 14px 24px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,.15) 0%, rgba(6,182,212,.08) 100%);
  border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(20px);
}
.tv-brand { display: flex; align-items: center; gap: 12px; }
.tv-brand-logo {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; letter-spacing: .5px;
  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%); box-shadow: 0 4px 20px rgba(124,58,237,.4);
}
.tv-brand-name { font-size: 20px; font-weight: 700; color: #fff; }
.tv-brand-sub { font-size: 12px; color: #a1a1aa; margin-top: 2px; }

.tv-headline-ticker { overflow: hidden; position: relative; height: 22px; }
.tv-ticker-track {
  display: inline-flex; gap: 16px; white-space: nowrap; align-items: center;
  font-size: 14px; color: #d4d4d8; position: absolute; left: 0;
  animation: tv-ticker 45s linear infinite;
}
.tv-ticker-item { font-weight: 500; }
.tv-ticker-sep { color: #7c3aed; }
@keyframes tv-ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

.tv-status { display: flex; align-items: center; gap: 16px; }
.tv-live {
  display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #ef4444;
}
.tv-pulse { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: tv-pulse 1.5s infinite; }
@keyframes tv-pulse {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.7); }
  50% { opacity: .6; transform: scale(1.1); box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.tv-clock { font-size: 30px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.tv-date { font-size: 12px; color: #a1a1aa; text-transform: capitalize; }
.tv-fs-btn {
  background: rgba(255,255,255,.08); color: #e4e4e7; border: 1px solid rgba(255,255,255,.1);
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tv-fs-btn:hover { background: rgba(255,255,255,.16); }

/* ─── BIG NUMBERS ─── */
.tv-big-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tv-kpi-card {
  position: relative; overflow: hidden; padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(20px); transition: all .3s;
}
.tv-kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 100%);
}
.tv-kpi-card.is-alert { border-color: rgba(239,68,68,.5); animation: tv-card-pulse 2s infinite; }
.tv-kpi-card.is-alert::before { background: linear-gradient(90deg, #ef4444 0%, #f59e0b 100%); }
@keyframes tv-card-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 20px 4px rgba(239,68,68,.3); } }
.tv-kpi-icon { font-size: 28px; margin-bottom: 12px; }
.tv-kpi-value {
  font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -2px; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tv-kpi-label { font-size: 13px; color: #a1a1aa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.tv-kpi-trend { font-size: 12px; color: #06b6d4; font-weight: 500; }

/* ─── GRID ─── */
.tv-grid { flex: 1; display: grid; grid-template-columns: 1.5fr 1.1fr 1fr; gap: 16px; min-height: 0; }
.tv-panel {
  display: flex; flex-direction: column; overflow: hidden; padding: 18px 20px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(20px);
}
.tv-panel-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.tv-panel-header h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: #e4e4e7; }
.tv-panel-meta { font-size: 11px; color: #71717a; text-transform: uppercase; }
.tv-refresh-indicator { display: inline-block; color: #06b6d4; animation: tv-spin 2s linear infinite; }
@keyframes tv-spin { 100% { transform: rotate(360deg); } }
.tv-empty { margin: auto; color: #71717a; font-size: 14px; text-align: center; }

/* chart por hora */
.tv-chart { flex: 1; display: flex; align-items: end; min-height: 0; }
.tv-bars { display: flex; gap: 6px; width: 100%; height: 100%; align-items: end; }
.tv-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: end; }
.tv-bar-value { font-size: 11px; color: #a1a1aa; font-weight: 600; }
.tv-bar {
  width: 100%; min-height: 4px; border-radius: 6px 6px 0 0; transition: height 1s ease-out;
  background: linear-gradient(180deg, #7c3aed 0%, #06b6d4 100%); box-shadow: 0 0 16px rgba(124,58,237,.3);
}
.tv-bar-label { font-size: 10px; color: #71717a; }

/* filas */
.tv-queues-list { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.tv-queue-row {
  display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 12px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.04); transition: all .3s;
}
.tv-queue-row.is-warning { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.05); }
.tv-queue-row.is-critical { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); animation: tv-card-pulse 1.5s infinite; }
.tv-queue-name { font-size: 15px; font-weight: 600; color: #e4e4e7; }
.tv-queue-stats { display: flex; gap: 16px; }
.tv-queue-stat { text-align: center; }
.tv-queue-stat-value { display: block; font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.tv-queue-stat-label { display: block; font-size: 9px; color: #71717a; letter-spacing: 1px; margin-top: 2px; }

/* podium */
.tv-podium-list { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.tv-podium-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.02); transition: all .3s; }
.tv-podium-row.is-top { background: linear-gradient(90deg, rgba(245,158,11,.08) 0%, transparent 100%); border: 1px solid rgba(245,158,11,.2); }
.tv-podium-rank { font-size: 24px; width: 40px; text-align: center; }
.tv-podium-info { flex: 1; min-width: 0; }
.tv-podium-name { font-size: 14px; font-weight: 600; color: #e4e4e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-podium-stat { font-size: 11px; color: #71717a; margin-top: 2px; }
.tv-podium-score { font-size: 22px; font-weight: 800; color: #06b6d4; font-variant-numeric: tabular-nums; }

/* alerts */
.tv-alerts { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 20px; border-radius: 12px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.4); }
.tv-alert { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tv-alert-icon { font-size: 18px; }
.tv-alert-msg { color: #fca5a5; font-weight: 500; }
.tv-alert-warning .tv-alert-msg { color: #fcd34d; }

@media (min-width: 1800px) { .tv-kpi-value { font-size: 80px; } }