/* =========================================================================
   Painel de TV — camada de design Apple (mesmo sistema do dashboard
   principal, ver /assets/ui.css). Carregada DEPOIS de style.css: so'
   aparencia, a grade de uma tela sem rolagem continua a mesma.
   Tema escuro fixo de proposito (TV ligada o dia todo no salao).
   ========================================================================= */

:root {
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
           "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --surface-1: #1c1c1e;
  --surface-2: #000000;
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-muted: #6e6e73;
  --border: rgba(255, 255, 255, 0.08);

  --rest: #3aa97a;     /* verde da marca */
  --cupula: #a18cf5;   /* violeta suave */
  --good: #30d158;
  --warning: #ffd60a;
  --critical: #ff6961;

  --material: rgba(28, 28, 30, 0.66);
  --material-borda: rgba(255, 255, 255, 0.07);
  --blur: saturate(160%) blur(22px);
  --radius: 16px;
}

html { background: #000; }
body {
  background: transparent;
  font-family: var(--fonte);
  font-variant-numeric: normal;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}

/* Fundo ambiente: o que o vidro dos cartoes desfoca. */
.ambiente { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #000; pointer-events: none; }
.mancha { position: absolute; border-radius: 50%; filter: blur(110px); }
.mancha.m1 { width: 60vw; height: 60vw; left: -18vw; top: -30vw; background: rgba(46, 125, 91, 0.34); }
.mancha.m2 { width: 46vw; height: 46vw; right: -14vw; top: 28vh; background: rgba(200, 135, 60, 0.16); }
.mancha.m3 { width: 50vw; height: 50vw; left: 22vw; bottom: -36vw; background: rgba(120, 100, 230, 0.16); }

/* ---- cabecalho ---- */
.tv-header { align-items: center; }
.tv-titulo { align-items: center; }
.tv-logo {
  width: clamp(28px, 2.4vw, 52px); height: clamp(28px, 2.4vw, 52px);
  border-radius: 22%; object-fit: cover;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.tv-marca { font-weight: 600; letter-spacing: -0.02em; }
.tv-mes {
  text-transform: none; letter-spacing: -0.01em; font-weight: 500;
  background: rgba(255, 255, 255, 0.07);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 0.3em 0.9em;
}
.tv-relogio { font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---- titulos dos blocos: rotulo discreto com ponto de cor ---- */
.tv-bloco-titulo {
  font-weight: 600; letter-spacing: 0.08em;
}
.tv-bloco-titulo::before {
  content: ''; width: 0.55em; height: 0.55em; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.tv-bloco-titulo::after { height: 1px; opacity: 0.18; }

/* ---- cartoes: material fosco, sem a faixa colorida no topo ---- */
.tile {
  background: var(--material);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 0.5px solid var(--material-borda);
  border-top: 0.5px solid var(--material-borda);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.25);
}
.tile-label { text-transform: none; letter-spacing: -0.005em; font-weight: 500; }
.tile-valor { font-weight: 700; letter-spacing: -0.035em; }

/* O faturamento (1o cartao do Restaurante) e' o numero que a casa persegue:
   o unico cartao cheio de cor na tela, como no dashboard principal. */
#t-faturamento {
  background: linear-gradient(155deg, #2e7d5b 0%, #1d5c40 55%, #163f2d 100%);
  border-color: rgba(255, 255, 255, 0.10);
}
#t-faturamento .tile-label, #t-faturamento .tile-sub { color: rgba(255, 255, 255, 0.78); }
#t-faturamento .tile-valor { color: #fff; }
#t-faturamento .tile-barra { background: rgba(255, 255, 255, 0.20); }
#t-faturamento .tile-barra > span,
#t-faturamento .tile-barra > span.good,
#t-faturamento .tile-barra > span.warning { background: #fff; }

.tile-barra { background: rgba(255, 255, 255, 0.10); }

.tv-aviso {
  background: rgba(255, 69, 58, 0.14);
  border: 0.5px solid rgba(255, 69, 58, 0.35);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}

.tv-bloco-cupula .tile { border-top-color: var(--material-borda); }