/* ==========================================================================
   layout.css — App shell, atmosfera, topbar, toolbar, containers, footer
   Depende de tokens.css + base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SHELL
   Coluna unica: topbar (fixa) / main (cresce) / footer.
   -------------------------------------------------------------------------- */

.epg-app {
  position: relative;
  isolation: isolate;              /* contem as camadas de atmosfera */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--epg-surf-void);
}

/* --- 1.1 Atmosfera: mesh frio ---------------------------------------------
   Tres focos radiais muito suaves (dois frios nas bordas, um levemente
   quente ao centro-baixo, sugerindo o brilho dos monitores). Fixo, sem
   repaint na rolagem, e atras de todo conteudo.                          */
.epg-app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--epg-surf-void);
  background-image:
    radial-gradient(58rem 40rem at 12% -8%, rgba(60, 116, 168, 0.16), transparent 62%),
    radial-gradient(50rem 34rem at 92% 4%, rgba(58, 152, 176, 0.11), transparent 60%),
    radial-gradient(64rem 44rem at 50% 108%, rgba(120, 88, 52, 0.10), transparent 66%),
    linear-gradient(180deg, var(--epg-surf-0) 0%, var(--epg-surf-void) 72%);
}

/* --- 1.2 Atmosfera: grain / scanlines -------------------------------------
   Textura gerada 100% em CSS (gradientes repetidos, zero imagem e zero URL).
   Linhas horizontais de 1px em 3px + trama vertical de 2px: le como grao
   fino e, no tema de broadcast, como varredura de monitor CRT. Opacidades
   abaixo de 2% — nao altera nenhuma relacao de contraste do texto.        */
.epg-app::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(214, 232, 250, 0.016) 0, rgba(214, 232, 250, 0.016) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg,
      rgba(214, 232, 250, 0.011) 0, rgba(214, 232, 250, 0.011) 1px,
      transparent 1px, transparent 2px);
}

.epg-app__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-xl);
  padding-block: var(--epg-space-xl) var(--epg-space-3xl);
  /* min-width:0 impede que a grade larga estufe o shell */
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. CONTAINERS
   -------------------------------------------------------------------------- */

.epg-container {
  width: 100%;
  max-width: var(--epg-max-w);
  margin-inline: auto;
  padding-inline: var(--epg-gutter);
  min-width: 0;
}

.epg-container--wide {
  max-width: none;
}

/* Sem padding lateral: usado pela grade, que sangra ate a borda da viewport */
.epg-container--flush {
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   3. TOPBAR
   Fica presa ao topo. Duas fileiras: identidade + relogio, e filtros.
   -------------------------------------------------------------------------- */

/* Rola junto com a página. Presa ao topo, ela comia altura fixa da tela --
   no celular, com marca, relógio, seções e a barra de filtros, era um terço
   do visor sempre ocupado. `relative` fica porque o fio âmbar da base é
   posicionado em relação a ela. */
.epg-topbar {
  position: relative;
  z-index: var(--epg-z-topbar);
  background-color: var(--epg-surf-1);
  border-bottom: 1px solid var(--epg-line);
}

/* Fio de luz ambar de 1px na base — assinatura de "no ar" */
.epg-topbar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    transparent 0%,
    var(--epg-noar-borda) 18%,
    var(--epg-live-borda) 52%,
    transparent 92%);
  opacity: 0.5;
}

.epg-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--epg-space-lg);
  min-height: var(--epg-topbar-h);
  width: 100%;
  max-width: var(--epg-max-w);
  margin-inline: auto;
  padding-inline: var(--epg-gutter);
}

/* --- 3.1 Marca ----------------------------------------------------------- */

.epg-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--epg-space-md);
  flex: none;
  min-width: 0;
  color: var(--epg-txt);
}

.epg-topbar__brand:hover {
  text-decoration: none;
  color: var(--epg-txt);
}

/* Logo: quadrado com o ponto ambar de sinal */
.epg-topbar__logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--epg-noar);
  background-color: var(--epg-surf-3);
  border: 1px solid var(--epg-line-forte);
  border-radius: var(--epg-radius-sm);
}

.epg-topbar__logo::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  background-color: var(--epg-noar);
  border: 1px solid var(--epg-surf-glass-forte);
  border-radius: 50%;
}

.epg-topbar__title {
  font-family: var(--epg-font-display);
  font-size: var(--epg-fs-lg);
  font-weight: var(--epg-fw-display);
  line-height: 1.05;
  letter-spacing: var(--epg-ls-tight);
  white-space: nowrap;
}

.epg-topbar__subtitle {
  display: block;
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-3xs);
  font-weight: var(--epg-fw-medium);
  letter-spacing: var(--epg-ls-caps);
  text-transform: uppercase;
  color: var(--epg-txt-3);
  white-space: nowrap;
}

/* --- 3.2 Relogio --------------------------------------------------------- */

.epg-topbar__clock {
  display: flex;
  align-items: baseline;
  gap: var(--epg-space-xs);
  flex: none;
  margin-inline-start: auto;
  padding: var(--epg-space-2xs) var(--epg-space-sm);
  font-family: var(--epg-font-mono);
  font-variant-numeric: tabular-nums;
  background-color: var(--epg-surf-1);
  border: 1px solid var(--epg-line);
  border-radius: var(--epg-radius-sm);
}

.epg-topbar__clock-hora {
  font-size: var(--epg-fs-md);
  font-weight: var(--epg-fw-semibold);
  letter-spacing: var(--epg-ls-wide);
  color: var(--epg-noar);
  /* Sem "salto" de largura ao trocar de minuto */
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.epg-topbar__clock-zona {
  font-size: var(--epg-fs-3xs);
  font-weight: var(--epg-fw-medium);
  letter-spacing: var(--epg-ls-caps);
  text-transform: uppercase;
  color: var(--epg-txt-3);
}

.epg-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--epg-space-sm);
  flex: none;
}

/* Fileira secundaria da topbar (filtros/dias) */
.epg-topbar__row--filters {
  border-top: 1px solid var(--epg-line-suave);
}

.epg-topbar__row--filters .epg-topbar__inner {
  min-height: auto;
  padding-block: var(--epg-space-sm);
  gap: var(--epg-space-md);
}

/* --------------------------------------------------------------------------
   4. TOOLBAR — grupos de controles (busca, filtros, zoom, troca de visao)
   -------------------------------------------------------------------------- */

.epg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--epg-space-md);
  min-width: 0;
}

.epg-toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--epg-space-sm);
  min-width: 0;
}

/* Grupo que empurra os seguintes para a direita */
.epg-toolbar__group--fim {
  margin-inline-start: auto;
}

/* Grupo com rolagem horizontal propria (fila longa de chips) */
.epg-toolbar__group--scroll {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--epg-space-3xs);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  /* Desvanece nas pontas, indicando que ha mais conteudo */
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--epg-space-lg),
              #000 calc(100% - var(--epg-space-lg)), transparent 100%);
}

.epg-toolbar__group--scroll::-webkit-scrollbar {
  height: 0;
}

.epg-toolbar__label {
  flex: none;
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-3xs);
  font-weight: var(--epg-fw-medium);
  letter-spacing: var(--epg-ls-caps);
  text-transform: uppercase;
  color: var(--epg-txt-3);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. SECOES
   -------------------------------------------------------------------------- */

.epg-section {
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-md);
  min-width: 0;
}

.epg-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--epg-space-md);
  width: 100%;
  max-width: var(--epg-max-w);
  margin-inline: auto;
  padding-inline: var(--epg-gutter);
}

.epg-section__title {
  display: flex;
  align-items: center;
  gap: var(--epg-space-sm);
  font-family: var(--epg-font-display);
  font-size: var(--epg-fs-xl);
  font-weight: var(--epg-fw-display);
  letter-spacing: var(--epg-ls-tight);
}

/* Tracinho ambar antes do titulo da secao */
.epg-section__title::before {
  content: '';
  flex: none;
  width: 3px;
  height: 1.1em;
  background-color: var(--epg-noar);
  border-radius: var(--epg-radius-pill);
}

.epg-section__meta {
  display: flex;
  align-items: center;
  gap: var(--epg-space-sm);
  margin-inline-start: auto;
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-2xs);
  letter-spacing: var(--epg-ls-wide);
  color: var(--epg-txt-3);
}

/* --------------------------------------------------------------------------
   6. FOOTER
   -------------------------------------------------------------------------- */

.epg-footer {
  flex: none;
  margin-block-start: auto;
  background-color: var(--epg-surf-0);
  border-top: 1px solid var(--epg-line);
}

.epg-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--epg-space-md) var(--epg-space-xl);
  width: 100%;
  max-width: var(--epg-max-w);
  margin-inline: auto;
  padding: var(--epg-space-xl) var(--epg-gutter);
}

.epg-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--epg-space-2xs) var(--epg-space-md);
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-2xs);
  letter-spacing: var(--epg-ls-wide);
  color: var(--epg-txt-3);
}

.epg-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--epg-space-md);
  margin-inline-start: auto;
  font-size: var(--epg-fs-md);
}

.epg-footer__links a {
  color: var(--epg-txt-2);
}

.epg-footer__links a:hover {
  color: var(--epg-live-claro);
}

/* ==========================================================================
   HEADER COMPACTO
   O header ocupava ~190px: primeira linha de 60px + fila de filtros quebrando
   em tres linhas de controles com 32-36px cada. Aqui a densidade e reduzida
   COM ESCOPO em .epg-topbar, para nao encolher os mesmos componentes quando
   aparecem no conteudo (modal, paginas internas).
   ========================================================================== */

/* --- Linha 1: marca, seções, relógio ------------------------------------- */

.epg-topbar__inner {
  gap: var(--epg-space-md);
}

/* A marca não precisa de duas linhas de texto no topo de todas as páginas:
   o nome basta; a descrição segue no <title> e no rodapé. */
.epg-topbar__subtitle {
  display: none;
}

.epg-topbar__title {
  font-size: var(--epg-fs-md);
}

.epg-topbar__clock-hora {
  font-size: var(--epg-fs-md);
}

.epg-topbar__clock-zona {
  font-size: var(--epg-fs-3xs);
}

/* --- Linha 2: filtros --------------------------------------------------- */

.epg-topbar__row--filters .epg-topbar__inner {
  padding-block: var(--epg-space-2xs);
  gap: var(--epg-space-sm);
  /* Quando quebra, as linhas ficam coladas em vez de espaçadas */
  row-gap: var(--epg-space-2xs);
}

.epg-topbar .epg-toolbar {
  gap: var(--epg-space-sm);
  row-gap: var(--epg-space-2xs);
}

.epg-topbar .epg-toolbar__group {
  gap: var(--epg-space-2xs);
}

.epg-topbar .epg-toolbar__group--scroll {
  padding-block: 0;
}

/* --- Controles menores DENTRO do header --------------------------------- */

.epg-topbar .epg-btn {
  min-height: 1.875rem;          /* 30px (era 36px) */
  padding-inline: var(--epg-space-md);
  font-size: var(--epg-fs-sm);
}

.epg-topbar .epg-chip {
  height: 1.75rem;               /* 28px (era 32px) */
  padding-inline: var(--epg-space-sm);
  font-size: var(--epg-fs-sm);
}

.epg-topbar .epg-input,
.epg-topbar .epg-select {
  height: 1.75rem;               /* 28px (era 36px) */
  font-size: var(--epg-fs-sm);
}

.epg-topbar .epg-field__control {
  padding-inline: var(--epg-space-sm);
}

/* Rótulo do campo ao LADO do controle (não acima): economiza uma linha
   inteira por campo e mantém a informação visível. */
.epg-topbar .epg-field {
  flex-direction: row;
  align-items: center;
  gap: var(--epg-space-2xs);
}

.epg-topbar .epg-field__label {
  flex: none;
  font-size: var(--epg-fs-3xs);
}

/* A busca é o controle mais usado: ganha o espaço que sobra. */
.epg-topbar .epg-search {
  flex: 1 1 12rem;
  min-width: 9rem;
}

@media (max-width: 900px) {
  .epg-topbar .epg-field__label {
    /* Em tela estreita o rótulo textual sai; o placeholder/ícone identifica. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Fim da faixa calculado (início + duração): informação, não controle. */
.epg-toolbar__fim {
  flex: none;
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-3xs);
  font-variant-numeric: tabular-nums;
  color: var(--epg-txt-3);
  white-space: nowrap;
}

/* O select de tipo/gênero não precisa esticar: largura suficiente para o
   rótulo mais longo ("Documentários (99)"). */
.epg-topbar #epg-filtro-genero {
  min-width: 10.5rem;
}

.epg-topbar #epg-filtro-dur {
  min-width: 7.5rem;
}

/* ==========================================================================
   BLOCO "QUANDO" — dia + hora inicial + duração
   As três respondem a uma pergunta só ("o que passa quando?"), então formam um
   bloco contínuo: uma superfície, um rótulo, separadores finos entre os campos.
   Antes eram três grupos soltos, cada um com rótulo e caixa próprios.
   ========================================================================== */

.epg-quando {
  display: flex;
  align-items: center;
  gap: var(--epg-space-xs);
  padding: 2px var(--epg-space-sm) 2px var(--epg-space-xs);
  background-color: var(--epg-surf-2);
  border-radius: var(--epg-radius-sm);
}

/* Dentro do bloco os campos perdem a superfície própria: o bloco já é a caixa */
.epg-topbar .epg-quando .epg-field__control {
  background-color: transparent;
  padding-inline: var(--epg-space-2xs);
}

.epg-topbar .epg-quando .epg-field__control:hover {
  background-color: transparent;
}

.epg-quando__campo {
  min-width: 0;
}

/* Fio vertical separando os campos, no lugar das palavras "Faixa"/"por" */
.epg-quando__sep {
  flex: none;
  width: 1px;
  height: 1.125rem;
  background-color: var(--epg-line);
}

.epg-quando .epg-toolbar__label {
  padding-inline-start: var(--epg-space-2xs);
}

/* O fim calculado fecha o bloco, alinhado com os campos */
.epg-topbar .epg-toolbar__fim {
  padding-inline-start: var(--epg-space-2xs);
  color: var(--epg-txt-3);
}

/* Em tela estreita o rótulo sai e o bloco pode quebrar */
@media (max-width: 900px) {
  .epg-quando .epg-toolbar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Filtro de nota (só na lista por canal): dois campos curtos lado a lado */
.epg-nota-filtro {
  display: flex;
  align-items: center;
  gap: var(--epg-space-xs);
  padding: 2px var(--epg-space-sm) 2px var(--epg-space-xs);
  background-color: var(--epg-surf-2);
  border-radius: var(--epg-radius-sm);
}

.epg-topbar .epg-nota-filtro .epg-field__control {
  background-color: transparent;
  padding-inline: var(--epg-space-2xs);
}

.epg-nota-filtro__input {
  width: 3.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}