/* ============================================================
   SISTEMA VISUAL
   Medidas únicas do site: tamanhos de fonte, espaçamentos e cantos.
   Carregado depois de identidade.css. Os módulos devem usar estas
   variáveis em vez de valores soltos em px.
   ============================================================ */

:root {
    /* Escala de fonte (7 degraus) */
    --fs-xs:  .75rem;    /* 12px  data, rótulos pequenos */
    --fs-sm:  .875rem;   /* 14px  apoio, legendas */
    --fs-md:  1rem;      /* 16px  texto */
    --fs-lg:  1.125rem;  /* 18px  título de item em lista */
    --fs-xl:  1.375rem;  /* 22px  título de seção na lateral */
    --fs-2xl: 1.75rem;   /* 28px  título de seção */
    --fs-3xl: 2.5rem;    /* 40px  título de página / destaque */

    /* Espaçamento */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 24px;
    --esp-6: 32px;
    --esp-7: 56px;
    --esp-secao: var(--esp-7);

    /* Cantos: o da rádio e um menor para miniaturas e botões */
    --raio-sm: calc(var(--raio, 10px) * .6);

    /* Linha divisória */
    --linha: color-mix(in srgb, var(--text-primary, #888) 14%, transparent);
}

@media (max-width: 767px) {
    :root { --esp-secao: var(--esp-6); }
}

/* ── Página de ponta a ponta (acabamento Moderno) ───────────
   Sem foto de fundo e sem painel "encaixotado": a cor de
   Configurações > Cores > "Fundo do Site" (--bg) vale para a página
   inteira. "Fundo do Conteúdo" (--conteudo) pinta os cards (podcasts,
   álbuns, notícias). No acabamento Clássico a foto continua valendo. */
body.acab-editorial { background: var(--bg) !important; }
body.acab-editorial::before { display: none !important; }
body.acab-editorial #page-content {
    background: transparent !important;
    margin-top: 0;
    padding: var(--esp-5) 0 var(--esp-secao);
}

/* Blocos que viraram listas lisas: sem fundo próprio, ficam sobre o
   fundo do site (senão viram caixas com o texto encostado na borda) */
html body.acab-editorial .top-musicas-container,
html body.acab-editorial .enquete-container,
html body.acab-editorial .recados-container,
html body.acab-editorial .camstudio,
html body.acab-editorial .eq-card,
html body.acab-editorial .sidebar-card,
html body.tema-claro .top-musicas-container,
html body.tema-claro .enquete-container,
html body.tema-claro .recados-container {
    background: transparent !important;
}

/* ── Topo transparente (Configurações > Topo > Transparência) ──
   Desfoque atrás do topo para o menu continuar legível sobre a página.
   (O acabamento Moderno desliga desfoque em tudo; aqui é exceção.) */
body.topo-transparente:not(.acab-editorial) .main-header-t2,
body.topo-transparente:not(.acab-editorial) .main-header-t3,
body.topo-transparente:not(.acab-editorial) .main-header-t4,
body.topo-transparente:not(.acab-editorial) .t3-header,
body.topo-transparente:not(.acab-editorial) .t3-navbar {
    -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
    backdrop-filter: blur(14px) saturate(1.3) !important;
}

/* ── Cabeçalho de página (páginas internas: Sobre, Contato…) ── */
.page-header-bar { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; padding-bottom: 22px; }
.page-header-icon { width: 56px; height: 56px; background: var(--titulos); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary-texto, var(--primary)); flex-shrink: 0; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.page-header-title { font-size: var(--fs-2xl); font-weight: 800; color: var(--titulos, #fff); margin: 0 0 3px; }
.page-header-sub { font-size: var(--fs-sm); color: var(--text-secondary, #9ba1a8); margin: 0; }

/* ── Páginas de texto (Sobre, Contato, páginas do painel) ────
   Coluna de leitura com ~70 caracteres por linha. */
.pagina-texto {
    max-width: 72ch;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-primary);
}
.pagina-texto p { margin: 0 0 1.2em; }
.pagina-texto h2, .pagina-texto h3 {
    font-family: var(--font-titulo, inherit);
    color: var(--titulos, inherit);
    line-height: 1.25;
    margin: 1.6em 0 .6em;
}
.pagina-texto img { max-width: 100%; height: auto; border-radius: var(--raio, 10px); }
.pagina-texto a:not(.btn) { color: var(--primary-texto, var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.pagina-texto ul, .pagina-texto ol { padding-left: 1.3em; margin: 0 0 1.2em; }

/* Formulário de contato padrão */
.contato-form { max-width: 560px; }
.contato-form .form-label { font-size: var(--fs-sm); font-weight: 700; color: var(--titulos, inherit); margin-bottom: 6px; }
.contato-form .form-control {
    background: transparent;
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    padding: 11px 14px;
    color: var(--text-primary);
}
.contato-form .form-control:focus { border-color: var(--primary); box-shadow: none; }
.contato-form .btn { width: auto !important; padding: 12px 28px; }

.pagina-404 p { color: var(--text-secondary); }

/* ── Cabeçalho de seção (módulos da home) ───────────────────── */
.secao-cab {
    container-type: inline-size;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-4);
    margin: 0 0 var(--esp-5);
    padding-bottom: var(--esp-3);
    border-bottom: 1px solid var(--linha);
    position: relative;
}
.secao-cab::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 3px;
    background: var(--primary);
}
.secao-cab-txt { min-width: 0; }
.secao-titulo {
    font-family: var(--font-titulo, inherit);
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--titulos, inherit) !important;
    margin: 0;
}
.secao-sub {
    font-size: var(--fs-sm);
    color: var(--text-secondary, #888);
    margin: var(--esp-1) 0 0;
}
.secao-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-secondary, #888) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s ease;
}
.secao-link:hover { color: var(--primary-texto, var(--primary)) !important; }
.secao-link i { font-size: .8em; transition: transform .2s ease; }
.secao-link:hover i { transform: translateX(3px); }
.secao-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* Coluna lateral (estreita): título menor */
.col-md-5 .secao-titulo,
.col-lg-4 .secao-titulo { font-size: var(--fs-xl); }

@media (max-width: 575px) {
    .secao-titulo { font-size: var(--fs-xl); }
}

/* ── Ritmo da home: mesmo espaço entre todas as seções ───── */
/* Em cima, só o respiro menor: o bloco de manchetes já fecha com margem */
.news-music-section { padding-top: var(--esp-6) !important; padding-bottom: var(--esp-secao) !important; }
/* Espaço só entre módulos (home.php envolve cada um em .home-mod).
   O antigo "* + *" pegava também o <style> de dentro dos módulos e
   empurrava o conteúdo para baixo do próprio título. */
.news-music-section .row > [class*="col-"] > * + * { margin-top: 0 !important; }
.news-music-section .row > [class*="col-"] > .home-mod + .home-mod,
.news-music-section .ev-mod + .ev-mod { margin-top: var(--esp-secao) !important; }

/* ── Módulos da home alinhados à mesma margem ──────────────
   Alguns módulos foram feitos como página inteira (com container,
   recuo e altura de tela). Dentro da home eles seguem a coluna. */
.news-music-section .row .container { padding-left: 0; padding-right: 0; max-width: none; }
.news-music-section .pod-page { padding: 0; }
.news-music-section .chat-wrapper { padding: 0; }
.news-music-section #tela-entrada { min-height: 0; }
/* Bate-Papo na home: o título vem do cabeçalho de seção; fica só o formulário */
.news-music-section .entrada-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}
.news-music-section .entrada-card > .chat-icon,
.news-music-section .entrada-card > h2,
.news-music-section .entrada-card > p { display: none; }
/* O script mostra o formulário com display:block; aqui ele vira linha (campo + botão) */
.news-music-section #entrada-form[style*="block"] { display: flex !important; gap: var(--esp-2); flex-wrap: wrap; }
.news-music-section #entrada-form .form-control { flex: 1 1 220px; margin: 0; }
.news-music-section #entrada-form .btn-entrar { flex: 0 0 auto; width: auto; margin: 0; padding-left: var(--esp-5); padding-right: var(--esp-5); }
.news-music-section #erro-entrada { flex-basis: 100%; }
@media (max-width: 575px) {
    .news-music-section #entrada-form .btn-entrar { flex: 1 1 100%; justify-content: center; }
}
body.acab-editorial .news-music-section .camstudio { padding: 0 !important; margin: 0; }

/* ── Top Vídeos no celular: fileira que desliza para o lado ──
   O próximo vídeo aparece pela metade, mostrando que dá para arrastar. */
@media (max-width: 575px) {
    .news-music-section .tv-faixa {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .news-music-section .tv-faixa::-webkit-scrollbar { display: none; }
    .news-music-section .tv-faixa > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        margin-bottom: 0 !important;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .secao-link, .secao-link i { transition: none; }
}

/* Modulos administraveis: o mesmo acabamento no site e no editor.
   As cores e os cantos continuam definidos pelo painel da radio. */
:is(.home-mod, .ev-mod:not(.ev-guardado)) {
    container: modulo / inline-size;
    min-width: 0;
    overflow-wrap: anywhere;
}
.container > .home-mod + .home-mod,
.container > .ev-col > .ev-mod + .ev-mod {
    margin-top: var(--esp-secao);
}
:is(.home-mod, .ev-mod) .secao-cab {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--esp-3) var(--esp-4);
}
:is(.home-mod, .ev-mod) .secao-titulo {
    line-height: 1.2;
}
:is(.home-mod, .ev-mod) :is(.news-card, .album-card, .pod-card) {
    background: var(--conteudo) !important;
    border: 1px solid var(--linha) !important;
    border-radius: var(--raio, 10px) !important;
    box-shadow: none !important;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    transition: border-color .2s ease;
}
:is(.home-mod, .ev-mod) :is(.news-card, .album-card, .pod-card):hover {
    border-color: var(--primary) !important;
    transform: none;
}
:is(.home-mod, .ev-mod) :is(.news-card, .album-card, .pod-card):focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}
:is(.home-mod, .ev-mod) :is(.album-info, .pod-body) {
    padding: var(--esp-4);
}
:is(.home-mod, .ev-mod) :is(.album-info, .pod-body) h3 {
    color: var(--titulos);
    font-family: var(--font-titulo, inherit);
    font-size: var(--fs-lg);
    line-height: 1.35;
    margin-bottom: var(--esp-2);
}
:is(.home-mod, .ev-mod) :is(.album-stats, .pod-meta) {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-3);
}
:is(.home-mod, .ev-mod) :is(.albums-grid, .pod-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--esp-4);
}
:is(.home-mod, .ev-mod) .pod-thumb {
    height: auto;
    aspect-ratio: 16 / 10;
}
:is(.home-mod, .ev-mod) .enquete-opcao {
    border-radius: var(--raio-sm);
    padding: var(--esp-3) var(--esp-4);
}
:is(.home-mod, .ev-mod) .enquete-opcao:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* A largura do modulo acompanha a coluna escolhida no arrastar e soltar. */
@container modulo (max-width: 460px) {
    .secao-titulo { font-size: var(--fs-xl); }
    :is(.home-mod, .ev-mod) .news-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    :is(.home-mod, .ev-mod) .news-featured { grid-column: auto; }
    :is(.home-mod, .ev-mod) :is(.albums-grid, .pod-grid) {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    :is(.home-mod, .ev-mod) :is(.news-card, .album-card, .pod-card) {
        transition: none;
        transform: none;
    }
}

/* Etapa 1: fundamentos editoriais. Cores, fontes e cantos vêm do painel.
   Escopo no body mantém o acabamento clássico e os controles do editor. */
body.acab-editorial {
    --fs-xs: .8125rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.2rem + .8vw, 2rem);
    --fs-3xl: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
    --esp-secao: clamp(32px, 4vw, 56px);
    --t-large: var(--fs-3xl);
    --t-title2: var(--fs-xl);
    --t-title3: var(--fs-lg);
    --t-head: var(--fs-lg);
    --t-body: var(--fs-md);
    --t-foot: var(--fs-xs);
    --r-card: var(--raio, 10px);
    --r-grupo: var(--raio, 10px);
    --r-mini: var(--raio-sm);
    --superficie: var(--conteudo, var(--bg));
    --superficie-hover: color-mix(in srgb, var(--conteudo, var(--bg)) 94%, var(--text-primary));
    --separador: var(--linha);
    --trilho: color-mix(in srgb, var(--bg) 84%, var(--text-primary));
    --tinta-primaria: color-mix(in srgb, var(--conteudo, var(--bg)) 90%, var(--primary));
    --nivel-cor: color-mix(in srgb, var(--conteudo, var(--bg)) 82%, var(--primary));
    --destaque-fundo: var(--conteudo, var(--bg));
    --destaque-texto: var(--text-primary);
    --destaque-titulo: var(--titulos, var(--text-primary));
    --postagem-inset: var(--esp-4);
}
body.acab-editorial #page-content :is(input, select, textarea, button) {
    font-family: var(--font-texto, inherit);
}
body.acab-editorial #page-content :is(.btn, .btn-votar, .btn-enviar-recado, .btn-entrar, .btn-parcial, .btn-voltar, .pod-tab) {
    min-height: 44px;
    white-space: normal;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
body.acab-editorial #page-content :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--primary-texto, var(--primary));
    outline-offset: 3px;
}
body.acab-editorial #page-content .row > [class*="col-"] { min-width: 0; }
body.acab-editorial #page-content :is(.secao-cab, .page-header-bar) { min-width: 0; }
body.acab-editorial #page-content .secao-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
@media (max-width: 575px) {
    body.acab-editorial #page-content .secao-cab { gap: var(--esp-2) var(--esp-3); }
    body.acab-editorial #page-content .page-header-bar { margin-bottom: var(--esp-5); }
}