/* =========================================
   ARQUIVO: estilos-gerais/identidade-visual.css
   ========================================= */

:root {
    /* Cores Fundamentais (Baseadas na Logo) */
    --brand-blue: #003399;
    --brand-blue-dark: #001a4d;
    --brand-red: #cc0000;
    --brand-red-dark: #800000;
    --brand-white: #ffffff;
    --brand-black: #050505;

    /* Gradientes Sofisticados e Modernos */
    --grad-blue-elegant: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    --grad-red-elegant: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    --grad-dark-elegant: linear-gradient(135deg, #1e1e1e 0%, var(--brand-black) 100%);

    /* Tema Claro (Padrão) */
    --bg-global: #f4f7f9;
    --bg-surface: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border-subtle: rgba(0, 51, 153, 0.08);

    /* Sombras Elevadas (Sensação de Flutuação/Profundidade) */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-float: 0 12px 32px rgba(0, 51, 153, 0.12);
    --shadow-float-hover: 0 16px 40px rgba(0, 51, 153, 0.20);

    /* Estrutura e Animação */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================
   MODO NOTURNO GLOBAL
   ========================================= */
body.dark-theme {
    --bg-global: #0a0a0a;
    --bg-surface: #141414;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --border-subtle: rgba(255, 255, 255, 0.05);

    /* Sombras ajustadas para fundo escuro */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-float-hover: 0 16px 40px rgba(0, 0, 0, 0.8);

    /* Gradientes mais profundos no modo noturno */
    --grad-blue-elegant: linear-gradient(135deg, #001a4d 0%, #000a1a 100%);
    --grad-red-elegant: linear-gradient(135deg, #800000 0%, #330000 100%);
}

/* =========================================
   RESET E CONFIGURAÇÃO BASE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-global);
    color: var(--text-primary);
    transition: background-color 0.4s ease, color 0.4s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* =========================================
   CLASSES UTILITÁRIAS GLOBAIS
   ========================================= */
.hidden {
    display: none !important;
}

/* =========================================
   CUSTOMIZAÇÃO DE SCROLLBAR (Ultrafina e Moderna)
   ========================================= */
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px; /* Para scroll horizontal */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 51, 153, 0.25);
    border-radius: 10px;
    transition: var(--transition-smooth);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 51, 153, 0.6);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 51, 153, 0.25) transparent;
}

/* Scrollbar no Modo Noturno */
body.dark-theme ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}
body.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
body.dark-theme * {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* =========================================
   CLASSES UTILITÁRIAS DE DESIGN (A serem aplicadas nas próximas remessas)
   ========================================= */

/* Contêineres Elegantes */
.container-flutuante {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-float);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.container-flutuante:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float-hover);
}

/* Textos com Gradiente (Modernidade sem exageros) */
.texto-gradiente-azul {
    background: var(--grad-blue-elegant);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.texto-gradiente-vermelho {
    background: var(--grad-red-elegant);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Animação Suave para Elementos de Destaque */
.animacao-pulsar {
    animation: flutuarElegante 3.5s ease-in-out infinite alternate;
}

@keyframes flutuarElegante {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

/* Linhas Estilosas Separadoras */
.linha-divisoria-elegante {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
    margin: 20px 0;
    border: none;
}

/* =========================================
   RESPONSIVIDADE BASE (Mobile e Tablet)
   ========================================= */
@media (max-width: 900px) {
    :root {
        /* Reduz os arredondamentos em telas menores para melhor aproveitamento de espaço */
        --radius-md: 12px;
        --radius-lg: 16px;
    }
    
    .container-flutuante:hover {
        /* Desativa o pulo no hover em touchscreens para evitar bugs de clique */
        transform: none;
        box-shadow: var(--shadow-float);
    }
}

@media (max-width: 480px) {
    /* No celular, escondemos as barras de rolagem para um visual de App Nativo */
    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background: transparent;
    }
    
    * {
        scrollbar-width: none;
    }
}

/* =========================================
   ESTRUTURA GLOBAL DE PÁGINAS (Respiro para AdSense)
   ========================================= */
.app-content {
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    /* Teto máximo global para garantir espaço dos banners em telas de Notebook/PC */
    max-width: 950px; 
    transition: var(--transition-smooth, all 0.3s ease);
}