/**
 * 🎨 ESTILO UNIFICADO - +MILIONÁRIA DASHBOARD
 * ===========================================
 * 
 * Padrão de cores e fontes unificado para todo o sistema
 */

/* Variáveis CSS para cores */
:root {
    /* Cores principais */
    --color-primary: #00E38C;      /* Verde principal */
    --color-secondary: #8B5CF6;    /* Roxo (trevos) */
    --color-background: #000000;   /* Fundo preto puro */
    --color-card: #1A1D25;         /* Fundo dos cards */
    --color-surface: #2E303A;      /* Superfícies */
    --color-text: #FFFFFF;         /* Texto branco */
    --color-text-secondary: #9CA3AF; /* Texto secundário */
    
    /* Cores de status */
    --color-success: #10B981;      /* Verde sucesso */
    --color-warning: #F59E0B;      /* Amarelo aviso */
    --color-error: #EF4444;        /* Vermelho erro */
    --color-info: #3B82F6;         /* Azul informação */
    
    /* Tipografia */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;       /* 12px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.875rem;     /* 30px */
    
    /* Espaçamentos */
    --spacing-1: 0.25rem;          /* 4px */
    --spacing-2: 0.5rem;           /* 8px */
    --spacing-3: 0.75rem;          /* 12px */
    --spacing-4: 1rem;             /* 16px */
    --spacing-6: 1.5rem;           /* 24px */
    --spacing-8: 2rem;             /* 32px */
    --spacing-12: 3rem;            /* 48px */
    
    /* Bordas */
    --border-radius-sm: 0.375rem;  /* 6px */
    --border-radius: 0.5rem;       /* 8px */
    --border-radius-lg: 0.75rem;   /* 12px */
    --border-radius-xl: 1rem;      /* 16px */
    --border-radius-2xl: 1.5rem;   /* 24px */
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Reset e configurações base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    min-width: 320px; /* Garante uma largura mínima para o corpo da página */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container específico para o Gerador de Números +Milionária */
.gerador-container {
    /* Desktop: posição normal (sem mudanças) */
}

/* Desktop: Centralizar o gerador de números */
@media (min-width: 769px) {
    .gerador-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .gerador-container .botoes-mobile-ajustados {
        justify-content: center;
        width: 100%;
    }
    
    /* Desktop: Uniformizar apenas dimensões dos botões do gerador */
    .gerador-container .botoes-mobile-ajustados button {
        width: 180px;
        height: 60px;
        padding: 0.75rem 0.5rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }
    
    /* Centralizar botões de análises estatísticas */
    .mt-8.flex.flex-wrap.gap-4 {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        gap: 1rem;
    }
}

/* Mobile/Tablet: move o gerador para cima */
@media (max-width: 768px) {
    .gerador-container {
        order: -1; /* Move para cima no mobile */
        padding-top: 2px !important;  /* reduzido ainda mais - próximo à borda */
        margin-top: 0px !important;   /* remove margem superior */
        margin-bottom: 20px !important;  /* reduz a distância entre esse e o próximo container */
    }

    .gerador-container h3 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 8px !important; /* reduz espaçamento abaixo do título */
    }

    /* Reduz distância entre header e container mestre */
    .bg-\[#1A1D25\] {
        margin-top: 0px !important;
        padding-top: 0.5rem !important;
    }

    /* Reduz espaço do header no mobile */
    header {
        padding-top: 0.25rem !important; /* ou 0 */
        padding-bottom: 0.25rem !important;
        min-height: auto !important; /* remove altura mínima se existir */
    }

    header .text-4xl {
        font-size: 1.2rem !important; /* Título "+Milionária" menor */
    }

    header .text-base {
        font-size: 0.8rem !important; /* Texto abaixo */
    }

    .btn-login {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.75rem !important;
    }

    /* Reduz espaçamentos verticais entre containers */
    .card, .container, .painel-numeros, .botoes-mobile-ajustados, .painel-trevo {
        margin-bottom: 0.5rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .painel-numeros {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }

    .painel-trevo {
        margin-top: 0.5rem !important;
    }

    /* Reduz espaço entre títulos e elementos */
    h2, h3 {
        margin-top: 0.6rem !important;
        margin-bottom: 0.4rem !important;
    }

    /* Seções gerais */
    section {
        padding: 0.5rem 0 !important;
    }

    /* Ajuste cirúrgico para o margin-bottom do cabeçalho */
    .mb-8 {
        margin-bottom: 0.5rem !important; /* Reduzindo para 0.5rem (8px) */
    }

    /* Ajuste para o texto de instrução do gerador */
    .gerador-container p.text-lg {
        font-size: 0.9rem !important; /* Reduz para 0.9rem (aprox. 14.4px) */
        line-height: 1.2 !important; /* Ajusta a altura da linha para evitar quebras estranhas */
    }

    /* Garante que a frase do gerador fique em uma única linha no mobile */
    .gerador-container p.text-xs {
        white-space: nowrap !important; /* Impede quebra de linha */
        overflow: hidden !important; /* Esconde conteúdo que ultrapassar */
        text-overflow: ellipsis !important; /* Adiciona "..." se necessário */
        font-size: 0.7rem !important; /* Reduz ainda mais a fonte para caber */
    }

    /* Reduzir margem inferior da seção principal do Gerador */
    section.mb-6 {
        margin-bottom: 0rem !important; /* Remove completamente a margem inferior */
    }

    /* Ajuste do padding inferior do container do gerador */
    .gerador-container {
        padding-bottom: 0rem !important; /* Zera completamente o padding inferior */
    }

    /* Ajuste da margem superior do bloco de texto final dentro do gerador */
    .gerador-container .mt-4 {
        margin-top: 0rem !important; /* Remove completamente a margem superior */
    }

    /* Reduzir a margem superior da div que contém os botões de análise */
    .gerador-container .mt-8.flex {
        margin-top: 1rem !important; /* Reduz de 2rem (32px) para 1rem (16px) */
    }

    /* Reduzir ainda mais o padding inferior do container do gerador */
    .gerador-container {
        padding-bottom: 0.5rem !important; /* Reduzindo de 1rem para 0.5rem (8px) */
    }

    /* Reduzir padding da seção principal */
    section.p-6 {
        padding: 1rem !important; /* Reduz de 1.5rem para 1rem */
    }
    
    /* Reduzir margem superior do gerador */
    .gerador-container.mt-6 {
        margin-top: 0.5rem !important; /* Reduz de 1.5rem para 0.5rem */
    }
    
    /* Reduzir padding do gerador */
    .gerador-container.p-6 {
        padding: 0px !important; /* Zera completamente o padding */
    }

    /* Reduzir margem inferior do gerador para 0px */
    .gerador-container {
        margin-bottom: 0px !important; /* Reduz de 20px para 0px */
        margin-top: 0px !important; /* Reduz de 8px para 0px */
        padding: 0px !important; /* Zera completamente o padding */
    }

    /* Reduzir o padding superior da seção 'Selecione 6 números entre 50' */
    section.mb-8 {
        padding-top: 0rem !important; /* Reduz de 1.5rem (24px) para 0rem (0px) */
    }

    /* Reduzir fonte do título 'Selecione 6 números entre 50' */
    section.mb-8 h2.text-xl {
        font-size: 12px !important; /* Reduz de 15px para 12px */
    }

    /* Aplicar mesmo padrão de fonte (12px) para todos os títulos */
    /* Trevos */
    section.mb-8 h3.text-lg {
        font-size: 12px !important; /* Escolha Trevo 1 e Escolha Trevo 2 */
    }

    /* Números selecionados */
    section.mb-8 h4.text-sm {
        font-size: 12px !important; /* Números Selecionados, Trevo 1, Trevo 2 */
    }

    /* Estatísticas rápidas */
    .stat-card h3.text-lg {
        font-size: 12px !important; /* Números Quentes, Números Frios, Trevos Mais Frequentes */
    }

    /* Reduzir tamanho dos casulos dos trevos para caberem em uma linha */
    .trevo {
        padding: 0.5rem !important; /* Reduz o tamanho do quadrado */
    }

    /* Eliminar a margem inferior do container dos números de 1 a 50 */
    #numeros-container {
        margin-bottom: 0rem !important; /* Remove completamente a margem inferior */
    }











}

/* Tipografia */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--spacing-4);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
    margin-bottom: var(--spacing-4);
    color: var(--color-text-secondary);
}

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    border: none;
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: var(--spacing-2);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-background);
}

.btn-primary:hover {
    background-color: #00D17A;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text);
}

.btn-secondary:hover {
    background-color: #7C3AED;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-surface);
}

.btn-outline:hover {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
}

/* Cards */
.card {
    background-color: var(--color-card);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-surface);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.card-header {
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-surface);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Números da loteria */
/* ✅ Estilo padrão para DESKTOP - ORIGINAL */
.numero {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 2px solid transparent;
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.numero:hover {
    background-color: var(--color-primary);
    color: var(--color-background);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.numero.selecionado {
    background-color: var(--color-primary);
    color: var(--color-background);
    border-color: var(--color-primary);
}

/* Garantir que números não selecionados não tenham estados visuais indesejados */
.numero:not(.selecionado) {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: transparent !important;
    transform: scale(1) !important;
    box-shadow: none !important;
}

/* Trevos */
/* ✅ Estilo padrão para DESKTOP - ORIGINAL */
.trevo {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 2px solid transparent;
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.trevo:hover {
    background-color: var(--color-secondary);
    color: var(--color-text);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.trevo.selecionado {
    background-color: var(--color-secondary);
    color: var(--color-text);
    border-color: var(--color-secondary);
}

/* 🍀 TREVOS ELEGANTES EM FORMA DE ÍCONES - DESKTOP E MOBILE */
.trevo-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    margin: 4px;
}

.trevo-icon {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #4ADE80; /* Verde claro para trevo não selecionado */
    background: transparent;
    border-radius: 50%;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.trevo-icon::before {
    content: '🍀';
    position: absolute;
    font-size: 48px;
    z-index: 1;
    transition: all 0.3s ease;
}

.trevo-number {
    position: relative;
    z-index: 2;
    font-weight: 900;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(255, 255, 255, 0.8),
        0 0 12px rgba(255, 255, 255, 0.6);
    color: #FFFFFF; /* Branco para melhor contraste */
    transition: all 0.3s ease;
    font-size: 22px;
}

/* Hover effect */
.trevo-icon-container:hover .trevo-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.trevo-icon-container:hover .trevo-icon::before {
    filter: brightness(1.2);
}

/* Selecionado - foca na mudança visual dos números */
.trevo-icon-container.selecionado .trevo-number {
    color: #E879F9 !important; /* Lilás intenso */
    font-weight: 900 !important; /* Extra negrito */
    font-size: 26px !important; /* Maior */
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        0 0 10px rgba(232, 121, 249, 0.8),
        0 0 20px rgba(232, 121, 249, 0.6) !important; /* Glow lilás */
    transform: scale(1.2) !important; /* Número 20% maior */
    transition: all 0.3s ease !important;
}

/* Garantir que trevos não selecionados não tenham estados visuais indesejados */
.trevo-icon-container:not(.selecionado) .trevo-number {
    color: #FFFFFF !important; /* Branco para melhor contraste */
    font-weight: 900 !important;
    /* Mantém o tamanho original - não força font-size */
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(255, 255, 255, 0.8),
        0 0 12px rgba(255, 255, 255, 0.6) !important;
    transform: scale(1) !important;
    transition: all 0.3s ease !important;
}

.trevo-icon-container.selecionado .trevo-icon {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 0 15px rgba(232, 121, 249, 0.6)) !important; /* Glow lilás */
}

/* Modais */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--color-card);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-8);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
    scroll-behavior: smooth; /* Scroll suave */
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

/* Neon lilás global para todos os modais do site */
[id^="modal"] > .modal-content,
[id^="modal"] > div,
.modal .modal-content {
    border: 2px solid #8B5CF6;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.85),
                0 0 16px rgba(139, 92, 246, 0.55),
                0 0 24px rgba(139, 92, 246, 0.35),
                0 12px 28px rgba(0, 0, 0, 0.6);
}

@media (max-width: 640px) {
    [id^="modal"] > .modal-content,
    [id^="modal"] > div,
    .modal .modal-content {
        border-width: 1.5px;
        box-shadow: 0 0 6px rgba(139, 92, 246, 0.8),
                    0 0 12px rgba(139, 92, 246, 0.5),
                    0 0 18px rgba(139, 92, 246, 0.3),
                    0 8px 20px rgba(0, 0, 0, 0.6);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-surface);
}

.modal-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text);
}

.modal-close {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-2xl);
    cursor: pointer;
    padding: var(--spacing-1);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.modal-close:hover {
    color: var(--color-text);
    background-color: var(--color-surface);
}

/* Gráficos */
.chart-container {
    background-color: var(--color-card);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-6);
    margin: var(--spacing-4) 0;
    border: 1px solid var(--color-surface);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Estatísticas */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin: var(--spacing-6) 0;
}

.stat-card {
    background: linear-gradient(135deg, var(--color-card) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-surface);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-6);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-2);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Listas */
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-2);
    transition: all 0.3s ease;
}

.list-item:hover {
    background-color: var(--color-card);
    transform: translateX(4px);
}

.list-label {
    font-weight: 600;
    color: var(--color-text);
}

.list-value {
    color: var(--color-primary);
    font-weight: 600;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-primary {
    background-color: var(--color-primary);
    color: var(--color-background);
}

.badge-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text);
}

.badge-success {
    background-color: var(--color-success);
    color: var(--color-text);
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-text);
}

.badge-error {
    background-color: var(--color-error);
    color: var(--color-text);
}

/* Utilitários */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-muted { color: var(--color-text-secondary); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-card { background-color: var(--color-card); }
.bg-surface { background-color: var(--color-surface); }

/* Responsividade */
/* 📱 Estilo somente para MOBILE */
@media (max-width: 768px) {
    .modal-content {
        margin: 5% auto; /* Ajuste para centralizar verticalmente um pouco melhor */
        width: 95%; /* Ocupa 95% da largura */
        padding: 15px; /* Padding interno */
        max-width: 95vw;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* 📱 Otimizações gerais para mobile */
    h1 {
        font-size: 1.3rem !important;
    }
    
    h2 {
        font-size: 1.1rem !important;
    }
    
    h3 {
        font-size: 1rem !important;
    }
    
    /* 📱 Texto normal menor */
    p, span, div {
        font-size: 0.85rem !important;
    }
    
    /* 📱 Botões mais compactos */
    button {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }
    
    /* 📱 Números da loteria menores */
    .numero {
        font-size: 0.8rem !important;
    }
    

    
    /* 📱 Mantém subtítulo visível em tablets */
    header p {
        display: block !important;
        font-size: 0.8rem !important;
    }
    
    /* 📱 Botão login mais compacto em tablets */
    header button {
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
        max-width: 110px;
    }
}

/* 📱 Otimizações para telas médias e pequenas */
@media (max-width: 640px) {
    /* Regras para telas pequenas (celulares, como S20) */
    .modal-principal .modal-content {
        margin: 2% auto; /* Reduz margem superior/inferior para mais espaço */
        width: 98%; /* Ocupa quase toda a largura */
        padding: 10px; /* Reduz padding para dar mais espaço ao conteúdo */
    }

    
    /* Otimizações para container dos trevos */
    #trevos-container {
        gap: 6px;
        justify-content: center;
    }

    /* Containers dos gráficos dentro do modal - Otimização para remover "esprimido" */
    .modal-principal #grafico-clusters,
    .modal-principal #grafico-correlacao,
    .modal-principal #grafico-desvio-padrao,
    .modal-principal #grafico-teste-aleatoriedade,
    .modal-principal #grafico-probabilidades-condicionais,
    .modal-principal #grafico-estatisticas-distribuicao {
        /* Garanta que o container use a largura total disponível e tenha um padding razoável */
        width: 100% !important;
        box-sizing: border-box !important; /* Inclui padding e borda na largura total */
        padding: 0 8px !important; /* Padding um pouco maior para tablets */
        /* height já deve ser definido no HTML, como h-[400px] */
    }

    /* Opcional: Ajuste de espaçamento para a seção de interpretação de clusters */
    .modal-principal #interpretacao-clusters {
        padding: 0 8px !important; /* Alinhe com o padding dos gráficos, se necessário */
    }

    /* Reduz espaçamento entre seções do modal em tablets */
    .modal-principal .mt-8 {
        margin-top: 20px !important; /* Reduz de 32px para 20px */
    }

    .modal-principal .mb-6 {
        margin-bottom: 16px !important; /* Reduz de 24px para 16px */
    }

    .modal-principal .mb-4 {
        margin-bottom: 10px !important; /* Reduz de 16px para 10px */
    }

    .modal-principal .chart-container {
        margin-bottom: 16px !important; /* Reduz margem entre containers de gráficos */
        padding: 16px !important; /* Reduz padding interno */
    }

    /* Classes específicas para otimização de cards de cluster em tablets */
    .cluster-card-optimized {
        padding: 12px 16px !important; /* Reduz padding para tablets */
    }

    .cluster-title {
        font-size: 1.1rem !important; /* Reduz tamanho do título */
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
    }

    .cluster-description {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .cluster-subtitle {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }

    .cluster-list {
        margin-bottom: 6px !important;
    }

    .cluster-list-item {
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    .cluster-info {
        margin-top: 3px !important;
        line-height: 1.1 !important;
    }

    /* Otimização de espaçamento para cards de cluster em mobile */
    .modal-principal #interpretacao-clusters .bg-card {
        padding: 12px !important; /* Reduz padding interno dos cards */
        margin-bottom: 8px !important; /* Reduz margem entre cards */
    }

    /* Reduz espaçamento entre elementos de texto dentro dos cards */
    .modal-principal #interpretacao-clusters p {
        margin-bottom: 6px !important; /* Reduz margem entre parágrafos */
        line-height: 1.3 !important; /* Reduz altura da linha */
    }

    .modal-principal #interpretacao-clusters ul {
        margin-bottom: 6px !important; /* Reduz margem das listas */
    }

    .modal-principal #interpretacao-clusters li {
        margin-bottom: 2px !important; /* Reduz margem entre itens da lista */
        line-height: 1.2 !important; /* Reduz altura da linha dos itens */
    }

    .modal-principal #interpretacao-clusters h4 {
        margin-bottom: 8px !important; /* Reduz margem dos títulos */
        line-height: 1.2 !important; /* Reduz altura da linha dos títulos */
    }
    
    /* Reduzir tamanho dos trevos para caber em uma linha */
    .trevo-icon {
        width: 40px;
        height: 40px;
    }
    
    .trevo-icon::before {
        font-size: 40px;
    }
    
    .trevo-number {
        font-size: 18px;
    }
    
    /* Trevos selecionados em mobile */
    .trevo-icon-container.selecionado .trevo-number {
        font-size: 22px !important;
    }
    
    .trevo-icon-container {
        margin: 2px;
    }
}

/* 📱 Otimizações específicas para telas muito pequenas (Samsung S8, etc.) */
@media (max-width: 360px) {
    /* Reduzir ainda mais para telas muito pequenas */
    .trevo-icon {
        width: 35px;
        height: 35px;
    }
    
    .trevo-icon::before {
        font-size: 35px;
    }
    
    .trevo-number {
        font-size: 16px;
    }
    
    /* Trevos selecionados em telas muito pequenas */
    .trevo-icon-container.selecionado .trevo-number {
        font-size: 20px !important;
    }
    
    .trevo-icon-container {
        margin: 1px;
    }
    
    #trevos-container {
        gap: 4px;
    }
}

/* 🖥️ Garante que o subtítulo apareça apenas no desktop */
@media (min-width: 769px) {
    header p {
        display: block !important;
    }
    
    /* Estilos para o texto "PREMIUM" no desktop */
    .texto-premium {
        color: #FF0000 !important; /* Deixa o texto vermelho */
        font-weight: bold !important; /* Negrito */
    }
}

/* 🔧 Ajustes para telas menores que 768px - SOLUÇÃO AGGRESSIVA */
@media screen and (max-width: 768px) {
    /* Reduz tamanho do título +Milionária */
    header h1 {
        font-size: 20px !important;
    }

    /* Reduz botão Login/Criar Conta */
    header button {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Ajusta modais para caberem melhor */
    .modal-content {
        width: 95% !important;
        font-size: 14px;
    }
    
    /* AJUSTES NO TOPO DA PÁGINA */
    header {
        padding-top: 0 !important;   /* Zera o padding superior do cabeçalho */
        padding-bottom: 0 !important; /* Zera o padding inferior do cabeçalho */
    }

    /* Reduz ainda mais o padding superior do container mestre */
    .bg-\[#1A1D25\] {
        padding-top: 0rem !important; /* Zera o padding superior */
    }

    /* Zera margens e paddings do gerador no topo */
    .gerador-container {
        padding-top: 0px !important;
        margin-top: 0px !important;
        padding-bottom: 0px !important;
    }

    /* Ajuste do padding interno dos cards de estatísticas */
    .stat-card {
        padding: 0.5rem !important; /* Reduz de 1rem (16px) para 0.5rem (8px) */
        /* Se ainda quiser um pouco mais, pode tentar 0.25rem (4px) */
    }

    /* Centralizar os títulos (h3) dentro dos cards */
    .stat-card h3 {
        text-align: center !important;
    }

    /* Centralizar os números (spans) dentro dos containers de números/trevos */
    #numeros-quentes,
    #numeros-frios,
    #trevos-frequentes {
        text-align: center !important;
    }

    /* AJUSTES NA BASE DA PÁGINA */
    /* Zera completamente a margem inferior da seção dos Números Quentes/Frios/Trevos Frequentes */
    section.grid.grid-cols-1.md\:grid-cols-3.gap-6.mb-8 {
        margin-bottom: 0rem !important;
        gap: 0.5rem !important; /* Reduz espaçamento entre os 3 cards de 24px para 8px */
        /* Se quiser ainda menos: gap: 0.25rem !important; (4px) */
    }

    /* Outra verificação geral para remover margens indesejadas */
    body > *:last-child {
        margin-bottom: 0 !important; /* Garante que o último elemento da body não tenha margem inferior */
    }

    /* Ajustes para os próprios botões de análise (os 6 botões verdes) - SOLUÇÃO UNIVERSAL */
    /* Seletor mais amplo para pegar todos os botões de análise */
    button[onclick*="abrirModal"], 
    button[onclick*="analise"],
    .bg-\[#00E38C\],
    .mt-8.flex.flex-wrap.gap-4 button,
    .flex.flex-wrap.gap-4 button {
        /* Manter as regras anteriores de font-size e padding */
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;

        /* -------- NOVAS REGRAS PARA UNIFORMIDADE DE TAMANHO -------- */
        min-width: 90px !important; /* Define uma largura mínima para todos os botões (ajuste conforme necessário) */
        height: 40px !important;    /* Define uma altura fixa para todos os botões (ajuste conforme necessário) */

        /* Garantir que o conteúdo (texto) seja centralizado dentro do botão */
        display: flex !important;
        flex-direction: column !important; /* Essencial se o texto tiver quebra de linha ou `<small>` */
        justify-content: center !important; /* Centraliza verticalmente */
        align-items: center !important;    /* Centraliza horizontalmente */
        text-align: center !important;     /* Garante centralização do texto */
        white-space: normal !important;    /* Permite que o texto quebre linha se for muito longo */
        line-height: 1.2 !important;       /* Ajusta o espaçamento entre linhas para caber o texto */

        /* Opcional: Se 'flex-1' do Tailwind estiver causando problemas de largura
           apesar do 'min-width', você pode tentar desativá-lo assim: */
        /* flex: none !important; */
    }
}

/* 📱 Otimizações para telas muito pequenas (Galaxy S20, iPhone SE) */
@media (max-width: 480px) {
    /* Containers dos gráficos dentro do modal - Otimização para remover "esprimido" */
    .modal-principal #grafico-clusters,
    .modal-principal #grafico-correlacao,
    .modal-principal #grafico-desvio-padrao,
    .modal-principal #grafico-teste-aleatoriedade,
    .modal-principal #grafico-probabilidades-condicionais,
    .modal-principal #grafico-estatisticas-distribuicao {
        /* Garanta que o container use a largura total disponível e tenha um padding razoável */
        width: 100% !important;
        box-sizing: border-box !important; /* Inclui padding e borda na largura total */
        padding: 0 5px !important; /* Reduza o padding horizontal se ele estiver causando o 'espremido' */
        /* height já deve ser definido no HTML, como h-[400px] */
    }

    /* Opcional: Ajuste de espaçamento para a seção de interpretação de clusters */
    .modal-principal #interpretacao-clusters {
        padding: 0 5px !important; /* Alinhe com o padding dos gráficos, se necessário */
    }

    /* Otimização de espaçamento para cards de cluster em mobile pequeno */
    .modal-principal #interpretacao-clusters .bg-card {
        padding: 8px !important; /* Reduz ainda mais o padding interno dos cards */
        margin-bottom: 6px !important; /* Reduz ainda mais a margem entre cards */
    }

    /* Reduz espaçamento entre seções do modal em mobile pequeno */
    .modal-principal .mt-8 {
        margin-top: 16px !important; /* Reduz de 32px para 16px */
    }

    .modal-principal .mb-6 {
        margin-bottom: 12px !important; /* Reduz de 24px para 12px */
    }

    .modal-principal .mb-4 {
        margin-bottom: 8px !important; /* Reduz de 16px para 8px */
    }

    .modal-principal .chart-container {
        margin-bottom: 12px !important; /* Reduz margem entre containers de gráficos */
        padding: 12px !important; /* Reduz padding interno */
    }

    /* Classes específicas para otimização de cards de cluster em mobile pequeno */
    .cluster-card-optimized {
        padding: 8px 12px !important; /* Reduz ainda mais o padding para mobile pequeno */
    }

    .cluster-title {
        font-size: 1rem !important; /* Reduz ainda mais o tamanho do título */
        margin-bottom: 4px !important;
        line-height: 1.1 !important;
    }

    .cluster-description {
        margin-top: 3px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }

    .cluster-subtitle {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        line-height: 1.1 !important;
    }

    .cluster-list {
        margin-bottom: 4px !important;
    }

    .cluster-list-item {
        margin-bottom: 1px !important;
        line-height: 1.1 !important;
    }

    .cluster-info {
        margin-top: 2px !important;
        line-height: 1.0 !important;
    }

    /* Reduz espaçamento entre elementos de texto dentro dos cards */
    .modal-principal #interpretacao-clusters p {
        margin-bottom: 4px !important; /* Reduz ainda mais a margem entre parágrafos */
        line-height: 1.2 !important; /* Reduz ainda mais a altura da linha */
    }

    .modal-principal #interpretacao-clusters ul {
        margin-bottom: 4px !important; /* Reduz ainda mais a margem das listas */
    }

    .modal-principal #interpretacao-clusters li {
        margin-bottom: 1px !important; /* Reduz ainda mais a margem entre itens da lista */
        line-height: 1.1 !important; /* Reduz ainda mais a altura da linha dos itens */
    }

    .modal-principal #interpretacao-clusters h4 {
        margin-bottom: 6px !important; /* Reduz ainda mais a margem dos títulos */
        line-height: 1.1 !important; /* Reduz ainda mais a altura da linha dos títulos */
    }

    /* Reduz o tamanho do texto do título */
    header h1 {
        font-size: 1rem !important;
    }
    
    /* Mantém o subtítulo visível no mobile */
    header p {
        display: block !important;
        font-size: 0.7rem !important;
    }

    /* Ajusta o botão Login / Criar Conta - ainda menor */
    header button {
        font-size: 0.6rem !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        max-width: 100px;
        white-space: nowrap;
    }
    
    /* 📱 Texto ainda menor em telas muito pequenas */
    p, span, div {
        font-size: 0.75rem !important;
    }
    
    /* 📱 Títulos menores */
    h2 {
        font-size: 0.95rem !important;
    }
    
    h3 {
        font-size: 0.85rem !important;
    }
    
    /* 📱 Números menores */
    .numero {
        font-size: 0.7rem !important;
    }

    /* Espaçamento lateral do header */
    header {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Se a logo for uma imagem */
    header img {
        max-width: 80px !important;
        height: auto;
    }
}

/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Loading */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scrollbar personalizada - Verde Lima */
::-webkit-scrollbar {
    width: 10px; /* Mais larga para ser mais visível */
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Fundo sutil */
    border-radius: var(--border-radius);
}

::-webkit-scrollbar-thumb {
    background: #32CD32; /* Verde Lima */
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
}

::-webkit-scrollbar-thumb:hover {
    background: #228B22; /* Verde mais escuro no hover */
    box-shadow: 0 0 8px rgba(50, 205, 50, 0.4); /* Glow verde */
}

/* Scrollbar específica para modais - Verde Lima */
.modal-content::-webkit-scrollbar {
    width: 8px; /* Um pouco mais larga para modais */
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #32CD32; /* Verde Lima */
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #228B22; /* Verde mais escuro no hover */
    box-shadow: 0 0 6px rgba(50, 205, 50, 0.4);
}

/* Suporte para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #32CD32 rgba(0, 0, 0, 0.1);
}

/* Scrollbar personalizada - Verde Lima */
html {
    overflow-y: auto; /* Scrollbar apenas quando necessário */
}

body {
    overflow-y: auto; /* Scrollbar apenas quando necessário */
}

/* Scrollbar para modais */
.modal-content {
    overflow-y: auto; /* Scrollbar apenas quando necessário */
}

/* 🎯 BOTÕES EM UMA LINHA NO MOBILE */
@media (max-width: 768px) {
    .botoes-mobile-ajustados {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.3rem;
        margin-top: 0.5rem;
    }

    .botoes-mobile-ajustados button {
        font-size: 0.65rem !important; /* Reduzindo ainda mais a fonte principal */
        padding: 0.6rem 0.4rem !important;
        height: 55px;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        white-space: normal;
        border-radius: 8px;
        text-align: center;
        line-height: 1.1; /* Adicionado: Espaço entre linhas mais apertado */
    }

    .botoes-mobile-ajustados button small {
        font-size: 0.55rem !important; /* Reduzindo a fonte do texto secundário */
        margin-top: 0.1rem; /* Reduzindo um pouco a margem entre o texto principal e o pequeno */
        line-height: 1; /* Adicionado: Espaço entre linhas mais apertado para o texto pequeno */
    }

    /* Estilos para o texto "GRATUITO" */
    .texto-gratuito {
    font-weight: bold !important; /* Para destacar */
    color: inherit !important; /* Mantém a cor herdada (ou você pode definir uma cor específica) */
    }

    /* Estilos para o texto "PREMIUM" */
    .texto-premium {
        color: #FF0000 !important; /* Deixa o texto vermelho */
        font-weight: bold !important; /* Opcional: remove qualquer negrito herdado */
    }  

}

/* Reduzir tamanho dos títulos dos módulos em smartphones */
@media (max-width: 640px) {
    .bg-\[#2E303A\] h4 {
        font-size: 14px !important;
    }
    
    /* Preservar layout ovalado dos módulos em smartphones - REGRAS MAIS ESPECÍFICAS */
    div.bg-\[#2E303A\].p-4.rounded-xl {
        border-radius: 0.75rem !important; /* Manter rounded-xl */
        padding: 1rem !important; /* Manter padding */
        margin-bottom: 1.5rem !important; /* Espaçamento entre módulos */
        min-height: 120px !important; /* Altura mínima para preservar forma */
        width: 100% !important; /* Largura total */
        box-sizing: border-box !important; /* Incluir padding na largura */
        min-width: 280px !important; /* Largura mínima para preservar forma */
    }
    
    /* Preservar container principal */
    div.bg-\[#1A1D25\].p-6.rounded-2xl.shadow-md {
        padding: 1.5rem !important; /* Padding preservado */
        border-radius: 1rem !important; /* Bordas preservadas */
    }
    
    /* Preservar grid layout */
    div.grid.grid-cols-1.md\:grid-cols-2.gap-6 {
        gap: 1.5rem !important; /* Manter gap entre módulos */
    }
    
    /* Preservar badges dos passos */
    span.bg-\[#00E38C\].text-black.font-bold.px-3.py-1.rounded-full.text-sm.mr-3 {
        border-radius: 9999px !important; /* Manter rounded-full */
        padding: 0.25rem 0.75rem !important; /* Manter padding */
    }
}

/* REGRAS ULTRA ESPECÍFICAS PARA GARANTIR QUE FUNCIONEM */
@media (max-width: 640px) {
    /* Forçar especificidade máxima para os módulos */
    div.bg-\[#2E303A\].p-4.rounded-xl[class*="bg-[#2E303A]"] {
        border-radius: 0.75rem !important;
        padding: 1rem !important;
        min-height: 120px !important;
        min-width: 280px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Regras adicionais para telas muito pequenas */
@media (max-width: 480px) {
    /* Forçar layout ovalado mesmo em telas muito pequenas */
    div.bg-\[#2E303A\].p-4.rounded-xl {
        min-width: 260px !important; /* Largura mínima ajustada */
        min-height: 110px !important; /* Altura mínima ajustada */
        border-radius: 0.75rem !important; /* Manter bordas arredondadas */
        padding: 0.75rem !important; /* Padding reduzido mas mantido */
    }
    
    /* Preservar grid mesmo em telas pequenas */
    div.grid.grid-cols-1.md\:grid-cols-2.gap-6 {
        gap: 1rem !important; /* Gap reduzido mas mantido */
    }
}

/* BADGES DOS PASSOS - DIMENSÕES FIXAS PARA TODOS OS AMBIENTES */
span.rounded-full {
  width: 60px !important; /* Largura fixa */
  height: 24px !important; /* Altura fixa */
  display: inline-flex !important; /* Para centralizar o texto */
  align-items: center !important; /* Centraliza verticalmente */
  justify-content: center !important; /* Centraliza horizontalmente */
  text-align: center !important; /* Centraliza o texto */
  white-space: nowrap !important; /* Impede quebra de linha */
  overflow: hidden !important; /* Esconde texto que ultrapassar */
  text-overflow: ellipsis !important; /* Adiciona "..." se necessário */
}

/* MELHORIAS SIMPLES E EFICAZES PARA RESPONSIVIDADE */
@media (max-width: 640px) {
  /* Reduz altura e padding dos cards dos passos */
  .bg-\[\#2E303A\] {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .bg-\[\#2E303A\] h4 {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
  }

  .bg-\[\#2E303A\] p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Reduz tamanho dos badges dos passos - APENAS FONTE */
  span.rounded-full {
    font-size: 0.61rem !important; /* ~9.8px - redução de 30% de 14px */
    padding: 0.25rem 0.5rem !important;
  }

  /* Substitui texto explicativo em smartphones */
  .bg-\[#1A1D25\] p[style*="text-align: center"] {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  /* Regra mais específica para substituir o texto */
  .bg-\[#1A1D25\] .p-8 p[style*="text-align: center"]::before {
    content: "Configure filtros, selecione padrões e use suas próprias decisões estratégicas para orientar o sistema de análise estatística. O controle está nas suas mãos — com o apoio da tecnologia de dados reais.";
    display: block !important;
  }

  .bg-\[#1A1D25\] .p-8 p[style*="text-align: center"] > * {
    display: none !important;
  }

  /* Regra ultra específica para garantir funcionamento */
  div.bg-\[#1A1D25\].p-8.rounded-2xl.shadow-md p[style*="text-align: center"]::before {
    content: "Configure filtros, selecione padrões e use suas próprias decisões estratégicas para orientar o sistema de análise estatística. O controle está nas suas mãos — com o apoio da tecnologia de dados reais." !important;
    display: block !important;
  }

  div.bg-\[#1A1D25\].p-8.rounded-2xl.shadow-md p[style*="text-align: center"] > * {
    display: none !important;
  }

  /* Regra específica para a classe texto-explicativo-premium */
  @media (max-width: 640px) {
    .texto-explicativo-premium {
      display: none !important;
    }
    
    .texto-explicativo-premium::before {
      content: "Configure filtros, selecione padrões e use suas próprias decisões estratégicas para orientar o sistema de análise estatística. O controle está nas suas mãos — com o apoio da tecnologia de dados reais.";
      display: block !important;
      text-align: center !important;
      color: #ccc !important;
      font-size: 0.9rem !important;
      line-height: 1.4 !important;
    }
  }

  /* CONTROLE DE TEXTO POR DISPOSITIVO */
  /* Por padrão, mostra apenas o texto para desktop */
  .texto-desktop {
    display: block;
  }

  .texto-mobile {
    display: none;
  }

  /* Quando for uma tela menor que 640px (smartphone), inverte a lógica */
  @media (max-width: 640px) {
    .texto-desktop {
      display: none !important;
    }

    .texto-mobile {
      display: block !important;
    }
  }

  /* Oculta/mostra textos conforme o tamanho da tela */
  .texto-desktop {
    display: block;
  }

  .texto-mobile {
    display: none;
  }

  /* Exibir versão mobile em telas pequenas */
  @media (max-width: 768px) {
    .texto-desktop {
      display: none !important;
    }

    .texto-mobile {
      display: block !important;
      font-size: 0.85rem;
      line-height: 1.4;
      color: var(--color-text-secondary);
    }
  }

  /* SOLUÇÃO GARANTIDA - CSS PURO PARA CONTROLE DE TEXTO */
  .texto-desktop {
    display: block;
  }

  .texto-mobile {
    display: none;
  }

  /* Aplica a troca de visibilidade para smartphones */
  @media only screen and (max-width: 640px) {
    .texto-desktop {
      display: none !important;
    }

    .texto-mobile {
      display: block !important;
    }
  }
}

/* Estilos personalizados para o slider range */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #2E303A 0%, #2E303A 100%);
  outline: none;
  transition: all 0.3s ease;
}

/* Estilo para Webkit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: linear-gradient(to right, #00E38C 0%, #00E38C 50%, #2E303A 50%, #2E303A 100%);
  border-radius: 4px;
  border: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00E38C 0%, #00C973 100%);
  cursor: pointer;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 227, 140, 0.4), 0 0 0 2px rgba(0, 227, 140, 0.2);
  transition: all 0.3s ease;
  transform: scale(1);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 227, 140, 0.6), 0 0 0 3px rgba(0, 227, 140, 0.3);
}

input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0, 227, 140, 0.8), 0 0 0 4px rgba(0, 227, 140, 0.4);
}

/* Estilo para Firefox */
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: linear-gradient(to right, #00E38C 0%, #00E38C 50%, #2E303A 50%, #2E303A 100%);
  border-radius: 4px;
  border: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-moz-range-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00E38C 0%, #00C973 100%);
  cursor: pointer;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 227, 140, 0.4), 0 0 0 2px rgba(0, 227, 140, 0.2);
  transition: all 0.3s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 4px 12px rgba(0, 227, 140, 0.6), 0 0 0 3px rgba(0, 227, 140, 0.3);
}

input[type="range"]::-moz-range-thumb:active {
  box-shadow: 0 2px 6px rgba(0, 227, 140, 0.8), 0 0 0 4px rgba(0, 227, 140, 0.4);
}

/* Estilo para Edge */
input[type="range"]::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: #00E38C;
  border-radius: 4px;
}

input[type="range"]::-ms-fill-upper {
  background: #2E303A;
  border-radius: 4px;
}

input[type="range"]::-ms-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00E38C 0%, #00C973 100%);
  cursor: pointer;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 227, 140, 0.4);
}

/* Animação de brilho no slider */
input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0, 227, 140, 0.3), 0 2px 8px rgba(0, 227, 140, 0.4);
}

/* Efeito de brilho sutil na barra */
input[type="range"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, 
    rgba(0, 227, 140, 0.1) 0%, 
    rgba(0, 227, 140, 0.05) 50%, 
    transparent 100%);
  border-radius: 4px;
  pointer-events: none;
  z-index: -1;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
  input[type="range"] {
    height: 6px;
  }
  
  input[type="range"]::-webkit-slider-track {
    height: 6px;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
  }
  
  input[type="range"]::-moz-range-track {
    height: 6px;
  }
  
  input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
  }
  
  input[type="range"]::-ms-thumb {
    height: 20px;
    width: 20px;
  }
}

/* Efeito de pulso sutil no valor exibido */
#valorNumeros, #valorTrevos {
  animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    text-shadow: 0 0 5px rgba(0, 227, 140, 0.5);
  }
  to {
    text-shadow: 0 0 15px rgba(0, 227, 140, 0.8), 0 0 25px rgba(0, 227, 140, 0.4);
  }
}