/* ============================================================================
   ÁGUIA · Player TV — style.css
   Identidade visual ÁGUIA · responsivo Full HD (1080p) e 4K (2160p)
   ============================================================================ */

:root {
  /* Paleta primária */
  --azul:   #24247D;
  --ciano:  #408FF7;
  --branco: #FFFFFF;
  /* Paleta secundária */
  --verde:    #62BB46;
  --amarelo:  #F5C445;
  --laranja:  #FF941F;

  /* Tons de apoio derivados */
  --azul-escuro: #16164f;
  --azul-noite:  #0d0d34;
  --vidro:       rgba(13, 13, 52, 0.55);
  --vidro-borda: rgba(64, 143, 247, 0.35);

  /* Escala tipográfica fluida: ~20px em 1080p, ~40px em 2160p */
  font-size: clamp(15px, 1.05vw, 42px);

  --gap: 1.2rem;
  --radius: 0.9rem;
  --chrome-h: 4.6rem;     /* altura do rodapé */
  --shadow: 0 1.2rem 3rem rgba(0,0,0,.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--azul-noite);
  color: var(--branco);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  cursor: none;                 /* esconde o cursor na TV */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, strong { font-family: "Sora", system-ui, sans-serif; }

.hidden { display: none !important; }

/* ============================================================================
   PALCO, MOLDURA E CAMADAS (crossfade)
   ============================================================================ */
#stage {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(64,143,247,.16), transparent 60%),
    var(--azul-noite);
}

/* Moldura central: todo conteúdo (Power BI, imagens, painéis) vive aqui. */
#frame {
  position: absolute;
  top: 5.8rem; left: 2rem; right: 2rem; bottom: 2rem;
  border-radius: 1.3rem;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(36,36,125,.55), rgba(13,13,52,.85));
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--shadow);
}

.layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .8s ease;
  will-change: opacity;
}
.layer.show { opacity: 1; }

/* Mídia preenche a moldura (cantos arredondados herdados do overflow). */
.layer img,
.layer video,
.layer iframe {
  width: 100%; height: 100%;
  border: 0;
  object-fit: contain;
}
.layer video,
.layer iframe { background: #000; }   /* só vídeo/Power BI levam fundo preto */
.layer video.cover { object-fit: cover; }

/* Preenchimento de imagem com fundo BORRADO (evita barras pretas) */
.media-fill { position: absolute; inset: 0; overflow: hidden; }
.media-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(30px) brightness(.5) saturate(1.15);
  transform: scale(1.18);          /* esconde bordas borradas */
}
.media-fg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;             /* imagem inteira, sem cortar */
  background: transparent;         /* deixa o fundo borrado aparecer */
}
.media-fg.cover { object-fit: cover; }

/* ============================================================================
   PAINÉIS DE CONTEÚDO (preenchem a moldura)
   ============================================================================ */
.panel {
  width: 100%; height: 100%;
  padding: 3.2rem 3.6rem;
  display: flex; flex-direction: column;
  justify-content: center;
}
.panel .kicker {
  display: inline-block;
  font-family: "Sora";
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--ciano);
  margin-bottom: 1rem;
}

/* ---- Mensagem global ---- */
.layer.global-bg {
  background:
    radial-gradient(130% 100% at 20% 0%, rgba(64,143,247,.28), transparent 55%),
    linear-gradient(135deg, var(--azul) 0%, var(--azul-noite) 100%);
}
.global-message {
  text-align: center;
  margin: auto;
  max-width: 84%;
}
.global-message .gm-icon {
  width: 9rem; height: 9rem;
  margin: 0 auto 1.6rem;
  display: block;
}
.global-message h1 {
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.global-message p {
  margin-top: 1.4rem;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  color: rgba(255,255,255,.85);
  font-weight: 500;
}
.global-message .accent-bar {
  height: .5rem; width: 9rem;
  margin: 2rem auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--verde), var(--amarelo), var(--laranja));
}

/* ---- Notícias ---- */
.noticias h2 { font-size: 2.4rem; margin-bottom: 1.8rem; }
.noticias ul { list-style: none; display: grid; gap: 1.1rem; }
.noticias li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem; align-items: start;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.noticias li:last-child { border-bottom: 0; }
.noticias .bullet {
  width: .9rem; height: .9rem; margin-top: .55rem;
  border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 0 .35rem rgba(64,143,247,.18);
}
.noticias .n-title { font-size: 1.55rem; line-height: 1.25; font-weight: 600; }

/* ---- Cotações / Indicadores (tela cheia) ---- */
.cotacoes h2, .indicadores h2 { font-size: 2.4rem; margin-bottom: 1.8rem; }
.cot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem,1fr)); gap: 1.4rem; }
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cot-item {
  padding: 1.6rem 1.8rem;
  border-radius: .7rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.cot-item .c-sym { font-family:"Sora"; font-weight:700; color: var(--ciano); font-size: 1.2rem; letter-spacing:.05em; }
.cot-item .c-val { font-size: 2.4rem; font-weight: 700; margin-top: .4rem; font-family:"Sora"; }
.cot-item .c-var { font-size: 1.15rem; font-weight: 600; margin-top: .3rem; }
.cot-item .c-foot { font-size: .95rem; color: rgba(255,255,255,.7); margin-top: .5rem; }
.cot-item .c-dupla { display: flex; gap: 1.6rem; margin-top: .6rem; font-size: 1.2rem; }
.cot-item .c-dupla b { font-family:"Sora"; font-weight: 700; }
.c-up   { color: var(--verde); }
.c-down { color: var(--laranja); }

@media (max-width: 1280px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   INTERFACE SOBREPOSTA (chrome)
   ============================================================================ */
#chrome { position: fixed; inset: 0; pointer-events: none; z-index: 20; }

/* Marca / nome da TV / status */
#brandmark {
  position: absolute; top: 1.4rem; left: 1.8rem;
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 1.3rem .7rem .8rem;
  border-radius: 99px;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(8px);
}
.brand-logo-wrap { display: inline-flex; }
.brand-logo, .brand-logo-wrap img { width: 9.2rem; height: 2.6rem; object-fit: contain; display: block; }
.brand-name { font-family: "Sora"; font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; }

/* Nome da TV + status — centralizado no topo */
#tvname {
  position: absolute; top: 1.95rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.6rem;
  border-radius: 99px;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(8px);
}
#tvname #screen-name {
  font-family: "Sora"; font-weight: 700;
  font-size: 1.2rem; letter-spacing: .16em; /*text-transform: uppercase;*/
  color: var(--branco);
}

/* Bolinha de status on-line / off-line */
#status-dot {
  width: .7rem; height: .7rem; border-radius: 50%;
  background: #888; flex: none;
  box-shadow: 0 0 0 .25rem rgba(136,136,136,.18);
}
#status-dot.on  { background: var(--verde); box-shadow: 0 0 0 .25rem rgba(98,187,70,.22); animation: pulse-on 2.2s ease-in-out infinite; }
#status-dot.off { background: var(--laranja); box-shadow: 0 0 0 .25rem rgba(255,148,31,.22); }
@keyframes pulse-on {
  0%,100% { box-shadow: 0 0 0 .2rem rgba(98,187,70,.28); }
  50%     { box-shadow: 0 0 0 .45rem rgba(98,187,70,.10); }
}

/* Relógio (canto superior direito) */
#topright {
  position: absolute; top: 1.4rem; right: 1.8rem;
  display: flex; align-items: center; gap: 1rem;
}
#clock {
  padding: .7rem 1.3rem;
  border-radius: 99px;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; line-height: 1; gap: .25rem; text-align: right;
}
#clock-time { font-family:"Sora"; font-weight: 700; font-size: 1.5rem; letter-spacing: .04em; }
#clock-date { font-size: .8rem; color: rgba(255,255,255,.75); text-transform: capitalize; }

/* Barra de progresso: linha fina na base da JANELA (borda do navegador).
   Enche ao longo da duração do conteúdo e completa na troca. */
#progress {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: .34rem;
  background: rgba(64,143,247,.18);
  overflow: hidden;
  z-index: 60;
}
#progress-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ciano), var(--verde));
  box-shadow: 0 0 .6rem rgba(64,143,247,.7);
}

/* Conteúdo em tela cheia opcional (observacao "tela cheia") */
#frame { transition: top .4s ease, left .4s ease, right .4s ease, bottom .4s ease, border-radius .4s ease; }
#frame.full {
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 0; border: 0; box-shadow: none;
}

/* ============================================================================
   FALLBACK E BOOT
   ============================================================================ */
#fallback, #boot {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.2rem; text-align: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(64,143,247,.22), transparent 55%),
    linear-gradient(160deg, var(--azul) 0%, var(--azul-noite) 100%);
}
#fallback h1, #boot h1 {
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: .06em;
}
.fallback-logo, .boot-logo { width: 7rem; height: 7rem; animation: float 3s ease-in-out infinite; }

/* Logo personalizado (imagem) — topo, abertura e fallback */
.logo-img { object-fit: contain; display: block; }
.logo-topo { height: 2.6rem; width: auto; max-width: 16rem; }
.logo-splash { height: 9rem; width: auto; max-width: 60%; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-.6rem);} }
#fallback p, #boot p { font-size: 1.3rem; color: rgba(255,255,255,.8); }
.fallback-clock { margin-top: 1rem; font-family:"Sora"; font-weight:700; font-size: clamp(3rem,8vw,6rem); }

.boot-bar {
  width: 16rem; height: .45rem; border-radius: 99px;
  background: rgba(255,255,255,.15); overflow: hidden;
}
.boot-bar span {
  display: block; height: 100%; width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ciano), var(--verde));
  animation: boot-load 1.4s ease-in-out infinite;
}
@keyframes boot-load {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* ============================================================================
   AJUSTES 4K (telas muito largas) — apenas refinamentos
   ============================================================================ */
@media (min-width: 3000px) {
  :root { --chrome-h: 5.4rem; }
}