/* ==========================================================================
   Sistema de Gestão de Emissora de Rádio
   Estilos base — variáveis, tipografia, layout e tema claro/escuro
   ========================================================================== */

:root {
    /* Superfícies */
    --cor-fundo:              #f6f7f9;
    /* Moldura: faixa fora da largura máxima do app, um tom mais fechado que o
       fundo do conteúdo, para destacar a área útil em telas largas. */
    --cor-fundo-externo:      #e9ecf1;
    --cor-superficie:         #ffffff;
    --cor-superficie-suave:   #f8fafc;
    --cor-superficie-ativa:   #f1f5f9;

    /* Texto */
    --cor-texto:              #0f172a;
    --cor-texto-suave:        #64748b;
    --cor-texto-tenue:        #94a3b8;

    /* Bordas */
    --cor-borda:              #e5e7eb;
    --cor-borda-forte:        #d1d5db;

    /* Marca */
    --cor-primaria:           #4f46e5;
    --cor-primaria-hover:     #4338ca;
    --cor-primaria-suave:     #eef2ff;
    --cor-primaria-texto:     #ffffff;

    /* Estados */
    --cor-sucesso:            #16a34a;
    --cor-sucesso-suave:      #dcfce7;
    --cor-alerta:             #d97706;
    --cor-alerta-suave:       #fef3c7;
    --cor-perigo:             #dc2626;
    --cor-perigo-suave:       #fee2e2;
    --cor-info:               #0284c7;
    --cor-info-suave:         #e0f2fe;
    --cor-roxo:               #7c3aed;
    --cor-roxo-suave:         #ede9fe;

    /* Geometria — cantos mais arredondados (visual moderno, tipo Mophy) */
    --raio:                   14px;
    --raio-pequeno:           10px;
    --raio-grande:            20px;

    /* Sombras — mais suaves e espalhadas, dando o efeito de card flutuante */
    --sombra-sutil:           0 1px 2px 0 rgb(15 23 42 / 0.04);
    --sombra:                 0 2px 8px -2px rgb(15 23 42 / 0.06), 0 1px 3px -1px rgb(15 23 42 / 0.05);
    --sombra-media:           0 8px 24px -6px rgb(15 23 42 / 0.10), 0 4px 10px -4px rgb(15 23 42 / 0.05);
    --sombra-grande:          0 20px 48px -12px rgb(15 23 42 / 0.16);
    /* Sombra do bloco do app sobre a moldura externa (descola sem linha dura). */
    --sombra-moldura:         0 0 30px rgb(15 23 42 / 0.10);
    /* Cabeçalho e topo da sidebar usam a MESMA sombra, só o esfumaçado (sem fio
       de 1px): assim a transição é contínua entre os dois lados, na mesma altura
       e com a mesma suavidade — sem linhas desencontradas. */
    --sombra-cabecalho:       inset 0 -1px 0 rgb(15 23 42 / 0.09), 0 12px 20px -12px rgb(15 23 42 / 0.16);
    /* Bloco da logo com leve realce de tom — mesma regra do tema escuro, mas
       aqui o realce é escurecer de leve (mesma dose de 3,5%). */
    --fundo-topo-sidebar:     rgb(15 23 42 / 0.035);
    /* Tokens da sidebar, calibrados por tema para a MESMA presença visual:
       contraste do texto ~7:1 (itens) e ~4:1 (títulos), e delta de fundo
       ~25 pontos no ativo/hover — os valores medidos no tema escuro. */
    --sidebar-cor-item:       #475569;
    --sidebar-cor-titulo:     #64748b;
    --sidebar-fundo-hover:    rgb(15 23 42 / 0.11);
    --sidebar-fundo-ativo:    #d3dcfd;
    /* Fio de contato na borda da sidebar: bem discreto, só dá definição. */
    --divisoria-sidebar:      linear-gradient(to bottom,
                                  transparent 0%,
                                  rgb(15 23 42 / 0.03) 10%,
                                  rgb(15 23 42 / 0.08) 40%,
                                  rgb(15 23 42 / 0.08) 60%,
                                  rgb(15 23 42 / 0.03) 90%,
                                  transparent 100%);
    /* Sombreado largo e suave: insinua a divisão sem cortar, integrando as
       áreas de forma uniforme (mesmo fundo dos dois lados). */
    --brilho-sidebar:         linear-gradient(to left,
                                  rgb(15 23 42 / 0.055) 0%,
                                  rgb(15 23 42 / 0.030) 30%,
                                  rgb(15 23 42 / 0.012) 60%,
                                  transparent 100%);

    /* Medidas (acompanham a escala tipográfica maior) */
    --largura-sidebar:        282px;
    --largura-sidebar-recolhida: 80px;
    --altura-cabecalho:       66px;

    /* Transições */
    --transicao:              150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Tipografia — Plus Jakarta Sans no corpo, Space Grotesk nos títulos/números */
    --fonte: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --fonte-titulo: "Space Grotesk", var(--fonte);
    --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Tema escuro */
[data-tema="escuro"] {
    --cor-fundo:              #0b1120;
    --cor-fundo-externo:      #060a14;
    --cor-superficie:         #131b2e;
    --cor-superficie-suave:   #1a2338;
    --cor-superficie-ativa:   #202b45;

    --cor-texto:              #e8edf7;
    --cor-texto-suave:        #94a3b8;
    --cor-texto-tenue:        #64748b;

    --cor-borda:              #26324d;
    --cor-borda-forte:        #35446b;

    --cor-primaria:           #6366f1;
    --cor-primaria-hover:     #818cf8;
    --cor-primaria-suave:     #1e2547;

    /* No escuro, as cores de estado precisam ser mais claras — os tons do tema
       claro somem sobre os fundos escuros dos avisos e selos. */
    --cor-sucesso:            #4ade80;
    --cor-alerta:             #fbbf24;
    --cor-perigo:             #f87171;
    --cor-info:               #38bdf8;

    --cor-sucesso-suave:      #10281b;
    --cor-alerta-suave:       #2b2110;
    --cor-perigo-suave:       #2d1618;
    --cor-info-suave:         #10273a;
    --cor-roxo-suave:         #241c47;

    --sombra-sutil:           0 1px 2px 0 rgb(0 0 0 / 0.30);
    --sombra:                 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30);
    --sombra-media:           0 4px 12px -2px rgb(0 0 0 / 0.50), 0 2px 6px -2px rgb(0 0 0 / 0.35);
    --sombra-grande:          0 12px 32px -8px rgb(0 0 0 / 0.65);
    /* No escuro a sombra precisa ser mais densa para descolar da moldura quase preta. */
    --sombra-moldura:         0 0 40px rgb(0 0 0 / 0.55);
    /* Mesma sombra nos dois lados (cabeçalho e topo da sidebar), só esfumaçado. */
    --sombra-cabecalho:       inset 0 -1px 0 rgb(255 255 255 / 0.09), 0 14px 28px -6px rgb(0 0 0 / 0.90);
    /* Bloco da logo levemente mais claro que o cabeçalho ao lado: no escuro,
       sem esse realce a faixa toda vira um bloco só e a estrutura some. */
    --fundo-topo-sidebar:     rgb(255 255 255 / 0.035);
    /* Tokens da sidebar no escuro: os valores de referência (o claro espelha). */
    --sidebar-cor-item:       #94a3b8;
    --sidebar-cor-titulo:     #64748b;
    --sidebar-fundo-hover:    #202b45;
    --sidebar-fundo-ativo:    #1e2547;
    /* Fio de contato na borda: no escuro é um toque de luz muito sutil. */
    --divisoria-sidebar:      linear-gradient(to bottom,
                                  transparent 0%,
                                  rgb(255 255 255 / 0.03) 10%,
                                  rgb(255 255 255 / 0.08) 40%,
                                  rgb(255 255 255 / 0.08) 60%,
                                  rgb(255 255 255 / 0.03) 90%,
                                  transparent 100%);
    /* Sombreado largo e suave: insinua a divisão sem cortar. A transição é
       gradual do começo ao fim, para as áreas se integrarem de forma uniforme. */
    --brilho-sidebar:         linear-gradient(to left,
                                  rgb(0 0 0 / 0.18) 0%,
                                  rgb(0 0 0 / 0.10) 30%,
                                  rgb(0 0 0 / 0.04) 60%,
                                  transparent 100%);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

/* Escala tipográfica base: sobe o rem de 16 → 17.5px, ampliando toda a interface
   de forma proporcional (menus, labels, tabelas, botões) — mais confortável e
   com melhor acabamento, sem mexer em cada regra. */
html { -webkit-text-size-adjust: 100%; font-size: 17.5px; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cor-texto);
    /* Moldura externa: a faixa fora da largura máxima do app. O app em si
       (.aplicacao) pinta o próprio --cor-fundo por cima. */
    background-color: var(--cor-fundo-externo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--cor-texto);
    margin-top: 0;
}

a {
    color: var(--cor-primaria);
    text-decoration: none;
    transition: color var(--transicao);
}

a:hover { color: var(--cor-primaria-hover); }

/* Foco visível e consistente em todo o sistema. */
:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: var(--raio-pequeno);
}

::selection {
    background: var(--cor-primaria);
    color: #fff;
}

/* Barras de rolagem discretas. */
* { scrollbar-width: thin; scrollbar-color: var(--cor-borda-forte) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: var(--cor-borda-forte);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--cor-texto-tenue); }

/* ==========================================================================
   Utilitários de texto
   ========================================================================== */

.texto-suave  { color: var(--cor-texto-suave) !important; }
.texto-tenue  { color: var(--cor-texto-tenue) !important; }
.texto-forte  { font-weight: 600; }
.texto-mono   { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
.texto-numero { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.texto-pequeno{ font-size: 0.8125rem; }
.texto-micro  { font-size: 0.75rem; }

.texto-positivo { color: var(--cor-sucesso) !important; }
.texto-negativo { color: var(--cor-perigo) !important; }
.texto-alerta   { color: var(--cor-alerta) !important; }

.titulo-secao {
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cor-texto-tenue);
}

/* ==========================================================================
   Estrutura da aplicação
   A sidebar fica à direita em telas largas.
   ========================================================================== */

.aplicacao {
    display: flex;
    min-height: 100vh;
    flex-direction: row-reverse;
    /* Toda a aplicação (sidebar + conteúdo) limitada e centralizada em telas largas. */
    max-width: 1500px;
    margin-inline: auto;
    /* Fundo do app por cima da moldura externa (body), com uma sombra nas
       laterais para "descolar" da moldura — profundidade, sem linhas duras. */
    background-color: var(--cor-fundo);
    box-shadow: var(--sombra-moldura);
}

.area-principal {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.conteudo {
    flex: 1 1 auto;
    padding: 1.5rem 1.75rem 3rem;
    width: 100%;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .conteudo { padding: 1rem 1rem 2.5rem; }
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

/*
 * Cabeçalho translúcido com blur: compartilha o MESMO fundo do conteúdo e da
 * sidebar (integração uniforme, sem degrau de cor). O blur mantém a leitura
 * quando o conteúdo passa por trás ao rolar, e a sombra insinua a separação —
 * sem linha, sem mudança de tom.
 */
.cabecalho {
    height: var(--altura-cabecalho);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.75rem;
    /*
     * Fundo SÓLIDO (o mesmo tom do app), sem backdrop-filter.
     *
     * O efeito vidro dependia do navegador recalcular o desfoque a cada quadro
     * da rolagem; quando a velocidade mudava, ele não acompanhava e por alguns
     * quadros o conteúdo aparecia nítido sob o cabeçalho — o "pisca". Com fundo
     * opaco não há o que recalcular: nada atravessa, em qualquer velocidade.
     */
    background: var(--cor-fundo);
    box-shadow: var(--sombra-cabecalho);
    position: sticky;
    top: 0;
    z-index: 1020;
}

@media (max-width: 991.98px) {
    .cabecalho { padding: 0 1rem; }
}

/*
 * Tema/usuário ficam sempre na extrema esquerda do cabeçalho — com ou sem ações
 * de página. Por isso NÃO usam margin-left:auto: quem empurra para a direita é o
 * grupo de ações da página (.cabecalho-grupo-direita). Antes, sem ações, estes
 * ícones escorregavam para a direita.
 */
.cabecalho-acoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
 * Ações da página movidas para o cabeçalho (ver cabecalho.js): ficam na extrema
 * direita, no canto oposto aos ícones de tema/usuário.
 */
.cabecalho-grupo-direita {
    margin-left: auto; /* empurra as ações da página para a borda direita */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cabecalho-grupo-direita .pagina-acoes {
    margin-bottom: 0;
}

/*
 * No mobile as ações viram um menu "⋯" (ver cabecalho.js), evitando que os
 * botões quebrem em várias linhas sobre o cabeçalho. O gatilho tem a mesma
 * altura dos demais botões.
 */
.cabecalho-menu-acoes .dropdown-menu {
    min-width: 12rem;
}
/* Botões que viram itens do menu ocupam a linha toda, alinhados à esquerda. */
.cabecalho-menu-acoes .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* O título da página fica sozinho na sua linha quando as ações sobem. */
.pagina-cabecalho-sem-acoes {
    margin-bottom: 1.25rem;
}

/*
 * Antifflash: enquanto o cabecalho.js não moveu as ações para o topo, elas
 * ficam ocultas no lugar original — assim não aparecem por um instante embaixo
 * antes de subir. A marca .acoes-subindo é posta no <html> antes da primeira
 * pintura e removida pelo cabecalho.js (que também tem respaldo por tempo).
 */
.acoes-subindo .conteudo .pagina-acoes {
    display: none;
}
/* Já no cabeçalho, o seletor .conteudo deixa de casar e as ações reaparecem. */

/*
 * Antiflash dos botões "Salvar": os formulários com data-desabilitar-limpo
 * nascem com o botão de envio habilitado no HTML e só são desabilitados pelo
 * formularios.js. Enquanto o JS não roda (marca .js-pendente no <html>), o CSS
 * já os mostra desabilitados — sem o flash de habilitado→desabilitado. Ao
 * inicializar, o JS remove a marca e reavalia cada botão de verdade.
 */
html.js-pendente form[data-desabilitar-limpo] [data-botao-envio],
html.js-pendente form[data-desabilitar-limpo] button[type="submit"] {
    opacity: 0.65;
    pointer-events: none;
}

/* ==========================================================================
   Página
   ========================================================================== */

.pagina-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.pagina-titulo {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
    letter-spacing: -0.015em;
}

/*
 * Título com selo de situação ao lado (ex.: "Recebida"). O selo é inline-flex
 * e, apoiado na baseline, estica a linha do título para baixo — deixando o
 * cabeçalho mais alto e empurrando os cards. Tratando o título como flex, o
 * selo alinha ao centro do texto sem somar altura à linha.
 */
.pagina-titulo-com-selo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    row-gap: 0.35rem;
}

.pagina-titulo-com-selo .selo {
    font-size: 0.8125rem;
}

.pagina-descricao {
    color: var(--cor-texto-suave);
    font-size: 0.875rem;
    margin: 0;
}

.pagina-acoes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Impressão
   ========================================================================== */

@media print {
    .sidebar, .cabecalho, .pagina-acoes, .sem-impressao,
    .paginacao, .filtros, .btn { display: none !important; }

    .aplicacao { display: block; }
    .conteudo { padding: 0; max-width: none; }
    body { background: #fff; font-size: 11pt; }
    .cartao { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
}