/* =========================================================================
   Painel de TV (Diretoria) — estilos
   Regra numero 1 desta tela: TUDO cabe em UMA tela, sem scroll nenhum.
   Por isso nada aqui usa altura fixa em px - a pagina e' um grid de
   100dvh e cada bloco recebe uma fracao dessa altura. O tamanho das
   fontes vem de clamp() com vw, e os numeros ainda passam por um
   auto-ajuste em JS (ver ajustarFonte em app.js) pra nunca estourar a
   largura do cartao.

   Tema unico escuro, de proposito: a tela fica ligada o dia inteiro numa
   TV do salao, onde contraste alto e fundo escuro leem melhor de longe -
   nao ha troca claro/escuro aqui (diferente do dashboard de gestao).
   ========================================================================= */

:root {
  color-scheme: dark;
  --surface-1: #17171a;
  --surface-2: #0b0b0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8b8a84;
  --border: rgba(255,255,255,0.09);

  --rest:   #3987e5;  /* acento do bloco Restaurante */
  --cupula: #9085e9;  /* acento do bloco Cupula      */

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #e66767;

  --radius: 14px;
  --gap: clamp(8px, 0.9vw, 20px);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* a TV nunca rola */
}

body {
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;   /* numero nao "dança" a cada refresh */
  display: grid;
  grid-template-rows: auto 1fr auto;   /* header · paineis · faixa de aviso */
  gap: var(--gap);
  padding: var(--gap);
}

/* ---------------------------------------------------------------- header */

.tv-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0 clamp(4px, 0.5vw, 12px);
}

.tv-titulo { display: flex; align-items: baseline; gap: clamp(8px, 1vw, 20px); }

.tv-marca {
  font-size: clamp(0.9rem, 1.5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Seletor de mes. Numa TV ninguem mexe nisso no dia a dia (a tela abre
   sempre no mes corrente), entao ele e' discreto de proposito - parece o
   subtitulo do cabecalho e so' mostra a moldura no hover/foco, pra quem
   vai de fato clicar. */
.tv-mes {
  font: inherit;
  font-size: clamp(0.75rem, 1.2vw, 1.6rem);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  padding: 0.15em 0.4em;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.tv-mes:hover, .tv-mes:focus-visible {
  border-color: var(--border);
  color: var(--text-primary);
  outline: none;
}
/* As opcoes abrem no widget nativo do SO: sem fundo explicito elas sairiam
   claras mesmo com a pagina escura em alguns navegadores. */
.tv-mes option {
  background: var(--surface-1);
  color: var(--text-primary);
}

.tv-status { display: flex; align-items: baseline; gap: clamp(8px, 1vw, 20px); }

.tv-relogio {
  font-size: clamp(0.9rem, 1.5vw, 2rem);
  font-weight: 700;
}

.tv-atualizado {
  font-size: clamp(0.65rem, 0.95vw, 1.2rem);
  color: var(--text-muted);
}
/* Dado velho na tela (falhou o ultimo refresh): avisa sem apagar o painel */
.tv-atualizado.stale { color: var(--warning); }

/* ----------------------------------------------------------------- blocos */

.tv-main {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
  min-height: 0;                 /* deixa as linhas encolherem de verdade */
}

.tv-bloco {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(var(--gap) * 0.6);
  min-height: 0;
}

.tv-bloco-titulo {
  margin: 0;
  font-size: clamp(0.7rem, 1.05vw, 1.35rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rest);
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.8vw, 16px);
}
.tv-bloco-titulo::after {
  content: '';
  flex: 1;
  height: 2px;
  background: currentColor;
  opacity: 0.25;
}
.tv-bloco-cupula .tv-bloco-titulo { color: var(--cupula); }

.tv-grid {
  display: grid;
  gap: var(--gap);
  min-height: 0;
}
/* Os cartoes de valor em reais (faturamento, CAC) trazem o numero mais
   longo da faixa, entao ganham mais largura que os de contagem. As duas
   faixas tem 5 cartoes: Restaurante abre com o faturamento; a Cupula segue
   a ordem do funil (leads -> orcamentos -> fechados -> receita -> CAC). */
.tv-grid-5 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.15fr; }
.tv-bloco-cupula .tv-grid-5 { grid-template-columns: 1fr 1fr 1fr 1.6fr 1.15fr; }
.tv-grid-4 { grid-template-columns: 1fr 1fr 1.6fr 1.15fr; }

/* --------------------------------------------------------------- cartoes */

.tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-top: 3px solid var(--rest);
  border-radius: var(--radius);
  padding: clamp(8px, 1vw, 22px) clamp(10px, 1.1vw, 26px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.tv-bloco-cupula .tile { border-top-color: var(--cupula); }

.tile-label {
  font-size: clamp(0.6rem, 0.95vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O tamanho real do numero e' calculado em JS (ajustarLinha em app.js):
   ele ocupa a maior fonte que ainda cabe na largura E na altura deste
   espaco, e todos os cartoes da mesma faixa terminam com o mesmo tamanho.
   O align-self:stretch e' o que torna isso possivel - com "center" a
   altura do elemento seria a do texto, e nao haveria como medir quanto
   espaco sobra. */
.tile-valor {
  font-size: clamp(1.5rem, 4vw, 6rem);   /* so' vale ate o JS medir */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  align-self: stretch;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tile-sub {
  font-size: clamp(0.55rem, 0.82vw, 1.05rem);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1em;
}

/* Cartao sem fonte de dado ainda (ex.: orcamentos da Cupula antes de a
   linha existir na planilha) - fica visivel mas apagado, pra ninguem ler
   "0" como se fosse resultado real. */
.tile.vazio .tile-valor { color: var(--text-muted); opacity: 0.55; }

.tile-valor.good     { color: var(--good); }
.tile-valor.warning  { color: var(--warning); }
.tile-valor.critical { color: var(--critical); }

/* Barra de progresso do faturamento contra a meta do mes */
.tile-barra {
  height: clamp(5px, 0.5vw, 10px);
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  margin-top: clamp(4px, 0.5vw, 10px);
}
.tile-barra > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--rest);
  transition: width 600ms ease;
}
.tile-barra > span.good     { background: var(--good); }
.tile-barra > span.warning  { background: var(--warning); }

/* ---------------------------------------------------------------- avisos */

/* Faixa de aviso: e' a 3a linha do grid do body (nao flutua sobre os
   cartoes), entao quando aparece os paineis encolhem um pouco em vez de
   ficar com o rodape tapado. */
.tv-aviso {
  padding: clamp(6px, 0.6vw, 12px) clamp(10px, 1vw, 20px);
  border-radius: var(--radius);
  background: rgba(230,103,103,0.14);
  border: 1px solid rgba(230,103,103,0.4);
  color: #ffc9c9;
  font-size: clamp(0.6rem, 0.85vw, 1.05rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-aviso[hidden] { display: none; }

/* TV em pe / tela estreita (monitor vertical, tablet): vira 2 colunas em
   vez de 5 - continua sem scroll porque as linhas dividem a altura. */
@media (max-aspect-ratio: 1/1), (max-width: 900px) {
  .tv-grid-5 { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
  .tv-grid-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
  /* 5 cartoes em 2 colunas deixam um buraco na ultima linha - o CAC ocupa
     as duas celulas em vez de sobrar espaco morto. */
  #t-cac-rest { grid-column: 1 / -1; }
  .tile-valor { font-size: clamp(1.2rem, 7vw, 3.5rem); }
}