/* ===================================
   🎨 PALETA DE CORES K7CVV
   VERMELHO | PRETO | BRANCO | CINZA
   =================================== */

:root {
    /* Cores Principais */
    --vermelho-acao: #DC143C;        /* Vermelho principal - CTAs */
    --vermelho-escuro: #B71C1C;      /* Vermelho escuro - Hover */
    --preto: #000000;                /* Preto puro */
    --preto-suave: #1a1a1a;          /* Preto suave */
    --branco: #FFFFFF;               /* Branco puro */
    --cinza-claro: #F5F5F5;          /* Cinza muito claro - Fundo */
    --cinza-medio: #9E9E9E;          /* Cinza médio - Bordas */
    --cinza-escuro: #424242;         /* Cinza escuro - Texto secundário */
    
    /* Mapeamento compatível */
    --azul-primario: #000000;
    --verde-acento: #DC143C;
    --fundo-claro: #F5F5F5;
    --texto-escuro: #1a1a1a;
    --neutro-borda: #9E9E9E;
    --azul-escuro: #000000;
    --verde-hover: #B71C1C;
    --vermelho-hover: #B71C1C;
    --texto-secundario: #424242;
    --gold: #DC143C;
    
    /* Fundos */
    --bg-dark-primary: #000000;
    --bg-dark-secondary: #1a1a1a;
    --bg-dark-card: #2a2a2a;
}

/* ===================================
   APLICAÇÃO GLOBAL
   =================================== */

body {
    background: var(--fundo-claro);
    color: var(--texto-escuro);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--azul-primario);
    font-weight: 700;
}

/* Links */
a {
    color: var(--verde-acento);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--verde-hover);
}

/* ===================================
   BOTÕES E CTAs
   =================================== */

.btn-primary,
.btn-buy,
.btn-success {
    background: linear-gradient(135deg, var(--vermelho-acao), var(--vermelho-hover));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-buy:hover {
    background: linear-gradient(135deg, var(--vermelho-hover), #8B1526);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(196, 30, 58, 0.3);
}

.btn-secondary,
.btn-outline {
    background: transparent;
    color: var(--verde-acento);
    border: 2px solid var(--verde-acento);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--verde-acento);
    color: white;
}

/* ===================================
   CARDS E CONTAINERS
   =================================== */

.card,
.card-modern {
    background: white;
    border: 1px solid var(--neutro-borda);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27, 43, 58, 0.08);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 24px rgba(27, 43, 58, 0.12);
    transform: translateY(-4px);
}

/* Cards com fundo escuro (manter para contraste) */
.card-dark {
    background: var(--bg-dark-card);
    border: 1px solid rgba(74, 155, 142, 0.2);
}

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

.navbar,
.header-main {
    background: white;
    border-bottom: 1px solid var(--neutro-borda);
    box-shadow: 0 2px 4px rgba(27, 43, 58, 0.05);
}

.navbar-brand,
.logo-text {
    color: var(--azul-primario);
    font-weight: 800;
    font-size: 1.5rem;
}

.nav-link {
    color: var(--texto-escuro);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--verde-acento);
}

/* ===================================
   FORMULÁRIOS E INPUTS
   =================================== */

input,
select,
textarea {
    background: white;
    border: 2px solid var(--neutro-borda);
    color: var(--texto-escuro);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--verde-acento);
    box-shadow: 0 0 0 3px rgba(74, 155, 142, 0.1);
    outline: none;
}

input::placeholder {
    color: var(--texto-secundario);
}

/* ===================================
   BADGES E LABELS
   =================================== */

.badge,
.label {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

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

.badge-success {
    background: var(--verde-acento);
    color: white;
}

.badge-danger,
.badge-alert {
    background: var(--vermelho-acao);
    color: white;
}

.badge-secondary {
    background: var(--neutro-borda);
    color: var(--texto-escuro);
}

/* ===================================
   ALERTAS E NOTIFICAÇÕES
   =================================== */

.alert-success {
    background: rgba(74, 155, 142, 0.1);
    border: 1px solid var(--verde-acento);
    color: var(--verde-hover);
}

.alert-danger,
.alert-error {
    background: rgba(196, 30, 58, 0.1);
    border: 1px solid var(--vermelho-acao);
    color: var(--vermelho-hover);
}

.alert-info {
    background: rgba(27, 43, 58, 0.1);
    border: 1px solid var(--azul-primario);
    color: var(--azul-primario);
}

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

table {
    background: white;
    border: 1px solid var(--neutro-borda);
    border-radius: 8px;
    overflow: hidden;
}

thead {
    background: var(--azul-primario);
    color: white;
}

tbody tr {
    border-bottom: 1px solid var(--neutro-borda);
    transition: background 0.2s ease;
}

tbody tr:hover {
    background: rgba(74, 155, 142, 0.05);
}

/* ===================================
   PREÇOS E VALORES
   =================================== */

.price,
.valor-destaque {
    color: var(--verde-acento);
    font-weight: 700;
    font-size: 1.5rem;
}

.price-old,
.valor-anterior {
    color: var(--texto-secundario);
    text-decoration: line-through;
}

/* ===================================
   LOADING E ESTADOS
   =================================== */

.loading-spinner {
    border: 3px solid var(--neutro-borda);
    border-top-color: var(--verde-acento);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

/* ===================================
   MODO ESCURO (Opcional)
   =================================== */

@media (prefers-color-scheme: dark) {
    body.dark-mode {
        background: var(--bg-dark-primary);
        color: var(--fundo-claro);
    }
    
    .dark-mode .card {
        background: var(--bg-dark-card);
        border-color: rgba(74, 155, 142, 0.2);
    }
    
    .dark-mode .navbar {
        background: var(--bg-dark-secondary);
        border-bottom-color: rgba(74, 155, 142, 0.2);
    }
}

/* ===================================
   UTILIDADES
   =================================== */

.text-primary { color: var(--azul-primario) !important; }
.text-secondary { color: var(--texto-secundario) !important; }
.text-success { color: var(--verde-acento) !important; }
.text-danger { color: var(--vermelho-acao) !important; }

.bg-primary { background: var(--azul-primario) !important; }
.bg-success { background: var(--verde-acento) !important; }
.bg-danger { background: var(--vermelho-acao) !important; }
.bg-light { background: var(--fundo-claro) !important; }

.border-primary { border-color: var(--azul-primario) !important; }
.border-success { border-color: var(--verde-acento) !important; }
.border-danger { border-color: var(--vermelho-acao) !important; }
.border-light { border-color: var(--neutro-borda) !important; }