/**
 * =====================================================
 * MelhorLink - Tema Visual Global
 * Cores baseadas no logo: Laranja #D88C28 e Grafite #404345
 * =====================================================
 */

/* ============================================
   VARIÁVEIS GLOBAIS DO TEMA
   ============================================ */
:root {
    /* Cores Principais */
    --cor-primaria: #D88C28;           /* Laranja do logo */
    --cor-primaria-hover: #c2781f;     /* Laranja mais escuro para hover */
    --cor-primaria-light: #e9a84d;     /* Laranja mais claro */
    --cor-primaria-rgb: 216, 140, 40;  /* RGB para transparências */
    
    --cor-secundaria: #404345;         /* Grafite do logo */
    --cor-secundaria-hover: #2f3234;   /* Grafite mais escuro para hover */
    --cor-secundaria-light: #5a5d60;   /* Grafite mais claro */
    --cor-secundaria-rgb: 64, 67, 69;  /* RGB para transparências */
    
    /* Cores de Texto */
    --cor-texto: #404345;              /* Grafite como cor de texto */
    --cor-texto-light: #666666;
    --cor-texto-lighter: #999999;
    --cor-texto-branco: #ffffff;
    
    /* Cores de Fundo */
    --cor-fundo: #ffffff;
    --cor-fundo-claro: #f8f9fa;
    --cor-fundo-cinza: #f0f1f2;
    --cor-fundo-escuro: #404345;
    
    /* Cores de Estado */
    --cor-sucesso: #28a745;
    --cor-sucesso-light: #d4edda;
    --cor-erro: #dc3545;
    --cor-erro-light: #f8d7da;
    --cor-aviso: #ffc107;
    --cor-aviso-light: #fff3cd;
    --cor-info: #17a2b8;
    --cor-info-light: #d1ecf1;
    
    /* Bordas */
    --cor-borda: #dee2e6;
    --cor-borda-light: #e9ecef;
    
    /* Gradientes */
    --gradiente-primario: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-hover) 100%);
    --gradiente-secundario: linear-gradient(135deg, var(--cor-secundaria) 0%, var(--cor-secundaria-hover) 100%);
    --gradiente-hero: linear-gradient(135deg, var(--cor-secundaria) 0%, #2a2b2d 100%);
    
    /* Sombras */
    --sombra-sm: 0 1px 3px rgba(var(--cor-secundaria-rgb), 0.1);
    --sombra-md: 0 4px 12px rgba(var(--cor-secundaria-rgb), 0.15);
    --sombra-lg: 0 8px 24px rgba(var(--cor-secundaria-rgb), 0.2);
    --sombra-primaria: 0 4px 15px rgba(var(--cor-primaria-rgb), 0.4);
    
    /* Transições */
    --transicao-rapida: 0.2s ease;
    --transicao-normal: 0.3s ease;
    --transicao-lenta: 0.5s ease;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50px;
}

/* ============================================
   BOTÕES GLOBAIS
   ============================================ */

/* Botão Primário (Laranja) */
.btn-primario,
.btn-primary,
.btn-cta {
    background: var(--cor-primaria) !important;
    color: var(--cor-texto-branco) !important;
    border: none !important;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transicao-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primario:hover,
.btn-primary:hover,
.btn-cta:hover {
    background: var(--cor-primaria-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--sombra-primaria);
}

/* Botão Secundário (Grafite) */
.btn-secundario,
.btn-secondary {
    background: var(--cor-secundaria) !important;
    color: var(--cor-texto-branco) !important;
    border: none !important;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transicao-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-secundario:hover,
.btn-secondary:hover {
    background: var(--cor-secundaria-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
}

/* Botão Outline Primário */
.btn-outline-primario {
    background: transparent !important;
    color: var(--cor-primaria) !important;
    border: 2px solid var(--cor-primaria) !important;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transicao-normal);
}

.btn-outline-primario:hover {
    background: var(--cor-primaria) !important;
    color: var(--cor-texto-branco) !important;
}

/* Botão Outline Secundário */
.btn-outline-secundario {
    background: transparent !important;
    color: var(--cor-secundaria) !important;
    border: 2px solid var(--cor-secundaria) !important;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transicao-normal);
}

.btn-outline-secundario:hover {
    background: var(--cor-secundaria) !important;
    color: var(--cor-texto-branco) !important;
}

/* Botão de Login */
.btn-login {
    padding: 8px 20px;
    border: 2px solid var(--cor-primaria) !important;
    border-radius: var(--radius-md);
    color: var(--cor-primaria) !important;
    background: transparent !important;
    font-weight: 600;
    transition: all var(--transicao-normal);
}

.btn-login:hover {
    background: var(--cor-primaria) !important;
    color: var(--cor-texto-branco) !important;
}

/* ============================================
   SIDEBAR ADMIN (Grafite)
   ============================================ */

.sidebar {
    background: var(--gradiente-secundario) !important;
}

.sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar-nav .nav-link:hover {
    background: rgba(var(--cor-primaria-rgb), 0.2) !important;
    color: var(--cor-texto-branco) !important;
}

.sidebar-nav .nav-link.active {
    background: rgba(var(--cor-primaria-rgb), 0.3) !important;
    color: var(--cor-texto-branco) !important;
}

.sidebar-nav .nav-link.active::before {
    background: var(--cor-primaria) !important;
}

.nav-badge {
    background: var(--cor-primaria) !important;
}

/* ============================================
   HEADER E NAVEGAÇÃO
   ============================================ */

.landing-header {
    background: var(--cor-fundo) !important;
    border-bottom: 1px solid var(--cor-borda);
}

.logo h1,
.logo-text {
    color: var(--cor-primaria) !important;
}

.nav-menu a {
    color: var(--cor-texto) !important;
}

.nav-menu a:hover {
    color: var(--cor-primaria) !important;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    background: var(--gradiente-hero) !important;
}

/* ============================================
   CARDS E COMPONENTES
   ============================================ */

.card,
.stat-card,
.stats-card {
    background: var(--cor-fundo);
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--cor-borda-light);
    transition: all var(--transicao-normal);
}

.card:hover,
.stat-card:hover,
.stats-card:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}

.card-header {
    border-bottom: 1px solid var(--cor-borda-light);
}

/* Stats com cor primária */
.stat-value,
.stats-value {
    color: var(--cor-primaria) !important;
}

/* ============================================
   TABELAS
   ============================================ */

.table thead th,
table thead th {
    background: var(--cor-fundo-claro) !important;
    color: var(--cor-texto) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--cor-primaria) !important;
}

.table tbody tr:hover,
table tbody tr:hover {
    background: rgba(var(--cor-primaria-rgb), 0.05) !important;
}

/* ============================================
   BADGES E TAGS
   ============================================ */

.badge-primary,
.badge-primario {
    background: var(--cor-primaria) !important;
    color: var(--cor-texto-branco) !important;
}

.badge-secondary,
.badge-secundario {
    background: var(--cor-secundaria) !important;
    color: var(--cor-texto-branco) !important;
}

.badge-success,
.badge-sucesso {
    background: var(--cor-sucesso) !important;
    color: var(--cor-texto-branco) !important;
}

.badge-danger,
.badge-erro {
    background: var(--cor-erro) !important;
    color: var(--cor-texto-branco) !important;
}

.badge-warning,
.badge-aviso {
    background: var(--cor-aviso) !important;
    color: var(--cor-texto) !important;
}

/* ============================================
   FORMULÁRIOS
   ============================================ */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), 0.2) !important;
    outline: none;
}

.form-label {
    color: var(--cor-texto) !important;
    font-weight: 600;
}

/* Checkbox e Radio customizados */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
}

/* Toggle Switch */
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--cor-primaria) !important;
}

/* ============================================
   LINKS E TEXTOS
   ============================================ */

a:not(.btn-primario):not(.btn-secundario):not(.nav-link) {
    color: var(--cor-primaria);
}

a:not(.btn-primario):not(.btn-secundario):not(.nav-link):hover {
    color: var(--cor-primaria-hover);
}

.text-primary,
.text-primario {
    color: var(--cor-primaria) !important;
}

.text-secondary,
.text-secundario {
    color: var(--cor-secundaria) !important;
}

/* ============================================
   MODAIS
   ============================================ */

.modal-header {
    background: var(--cor-secundaria) !important;
    color: var(--cor-texto-branco) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header .close,
.modal-header .btn-close {
    color: var(--cor-texto-branco) !important;
    opacity: 0.8;
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-footer {
    border-top: 1px solid var(--cor-borda-light);
}

/* ============================================
   ALERTAS E TOASTS
   ============================================ */

.alert-success,
.toast-success {
    background: var(--cor-sucesso-light) !important;
    border-color: var(--cor-sucesso) !important;
    color: #155724 !important;
}

.alert-error,
.alert-danger,
.toast-error {
    background: var(--cor-erro-light) !important;
    border-color: var(--cor-erro) !important;
    color: #721c24 !important;
}

.alert-warning,
.toast-warning {
    background: var(--cor-aviso-light) !important;
    border-color: var(--cor-aviso) !important;
    color: #856404 !important;
}

.alert-info,
.toast-info {
    background: var(--cor-info-light) !important;
    border-color: var(--cor-info) !important;
    color: #0c5460 !important;
}

/* ============================================
   SEÇÕES DA LANDING PAGE
   ============================================ */

.section-alt,
.section-gray {
    background: var(--cor-fundo-claro) !important;
}

.section-title {
    color: var(--cor-secundaria) !important;
}

.section-subtitle {
    color: var(--cor-texto-light) !important;
}

/* Feature Cards */
.feature-card,
.benefit-card {
    background: var(--cor-fundo);
    border-radius: var(--radius-lg);
    padding: 30px;
    text-align: center;
    box-shadow: var(--sombra-sm);
    transition: all var(--transicao-normal);
    border: 1px solid var(--cor-borda-light);
}

.feature-card:hover,
.benefit-card:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-5px);
}

.feature-icon,
.benefit-icon {
    width: 70px;
    height: 70px;
    background: rgba(var(--cor-primaria-rgb), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--cor-primaria);
    font-size: 28px;
}

/* ============================================
   FOOTER
   ============================================ */

.footer,
.landing-footer {
    background: var(--cor-secundaria) !important;
    color: var(--cor-texto-branco) !important;
}

.footer a,
.landing-footer a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.footer a:hover,
.landing-footer a:hover {
    color: var(--cor-primaria) !important;
}

/* ============================================
   PREÇOS E DESTAQUES
   ============================================ */

.price-current,
.preco-atual {
    color: var(--cor-primaria) !important;
    font-weight: 700;
}

.price-old,
.preco-antigo {
    color: var(--cor-texto-lighter) !important;
    text-decoration: line-through;
}

.discount-badge,
.badge-desconto {
    background: var(--cor-primaria) !important;
    color: var(--cor-texto-branco) !important;
}

/* ============================================
   ÍCONES E DESTAQUES
   ============================================ */

.icon-primary,
.icone-primario {
    color: var(--cor-primaria) !important;
}

.icon-secondary,
.icone-secundario {
    color: var(--cor-secundaria) !important;
}

/* Bullets coloridos */
.check-list li::before,
.feature-list li::before {
    color: var(--cor-primaria) !important;
}

/* ============================================
   TABS E NAVEGAÇÃO
   ============================================ */

.nav-tabs .nav-link.active {
    color: var(--cor-primaria) !important;
    border-bottom-color: var(--cor-primaria) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--cor-primaria) !important;
}

.tab-btn.active,
.config-tab.active {
    background: var(--cor-primaria) !important;
    color: var(--cor-texto-branco) !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.progress-bar {
    background: var(--cor-primaria) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination .page-link.active,
.pagination .page-item.active .page-link {
    background: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    color: var(--cor-texto-branco) !important;
}

.pagination .page-link:hover {
    background: var(--cor-fundo-claro) !important;
    color: var(--cor-primaria) !important;
}

/* ============================================
   LOADING E SPINNERS
   ============================================ */

.spinner,
.loading-spinner {
    border-color: var(--cor-fundo-claro);
    border-top-color: var(--cor-primaria) !important;
}

/* ============================================
   SCROLL E SELEÇÃO
   ============================================ */

::selection {
    background: var(--cor-primaria);
    color: var(--cor-texto-branco);
}

::-webkit-scrollbar-thumb {
    background: var(--cor-secundaria);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-secundaria-hover);
}

/* ============================================
   UTILITÁRIOS
   ============================================ */

.bg-primary,
.bg-primario {
    background-color: var(--cor-primaria) !important;
}

.bg-secondary,
.bg-secundario {
    background-color: var(--cor-secundaria) !important;
}

.border-primary,
.borda-primaria {
    border-color: var(--cor-primaria) !important;
}

.border-secondary,
.borda-secundaria {
    border-color: var(--cor-secundaria) !important;
}

/* Destaque suave */
.highlight,
.destaque {
    background: rgba(var(--cor-primaria-rgb), 0.1);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

@media (max-width: 768px) {
    :root {
        --radius-lg: 10px;
        --radius-xl: 12px;
    }
    
    .btn-primario,
    .btn-primary,
    .btn-cta,
    .btn-secundario,
    .btn-secondary {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

/* Focus visível para acessibilidade */
.btn-primario:focus,
.btn-secundario:focus,
button:focus {
    outline: 3px solid rgba(var(--cor-primaria-rgb), 0.5);
    outline-offset: 2px;
}

/* Alto contraste para links */
@media (prefers-contrast: high) {
    :root {
        --cor-primaria: #c67b1e;
        --cor-secundaria: #2a2b2d;
    }
}

/* Modo escuro (opcional - pode ativar depois) */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --cor-fundo: #1a1b1c;
        --cor-fundo-claro: #2a2b2d;
        --cor-texto: #e0e0e0;
        --cor-borda: #3a3b3d;
    }
}
*/