/* ==========================================================================
   Global Theme Override: Black & Gold (Dark) / White & Gold (Light)
   Eliminación radical de la temática morada y reemplazo por estética de lujo.
   ========================================================================== */

:root {
    /* Paleta Dorada Base (Dark Mode) */
    --gold-primary: #c9a84c;
    --gold-hover: #dfba55;
    --gold-active: #b59239;
    --gold-light: rgba(201, 168, 76, 0.12);
    --gold-border: rgba(201, 168, 76, 0.32);
    --gold-glow: 0 0 20px rgba(201, 168, 76, 0.25);
    
    /* Dorado de Alto Contraste (Light Mode - WCAG AA) */
    --gold-contrast: #a87e24;
    --gold-contrast-hover: #8f691b;
    --gold-contrast-light: rgba(168, 126, 36, 0.08);
    --gold-contrast-border: rgba(168, 126, 36, 0.28);
}

/* ── 1. Eliminación Radical del Fondo y Variables Moradas ── */
.cyber-var,
.cyber-var .v-theme--dark,
.cyber-var .v-theme--light,
.m-content.cyber.cyber-var,
#main-wrap {
    --v-theme-anchor-base: 201, 168, 76 !important;
    --v-theme-primarylight: 245, 230, 190 !important;
    --v-theme-primary: 201, 168, 76 !important; /* #c9a84c en vez de #651fff */
    --v-theme-primarydark: 12, 12, 16 !important; /* Neutral oscuro en vez de púrpura #311b92 */
    --v-theme-secondarylight: 250, 240, 210 !important;
    --v-theme-secondary: 212, 175, 55 !important;
    --v-theme-secondarydark: 168, 126, 36 !important;
    --v-theme-accentlight: 255, 245, 220 !important;
    --v-theme-accent: 201, 168, 76 !important;
    --v-theme-accentdark: 140, 105, 25 !important;
}

/* ── 2. Fondos Globales del Sistema ── */
/* MODO OSCURO (NEGRO OBSIDIANA PURO) */
html,
body,
.theme--dark,
.theme--dark body,
body[data-theme="dark"],
.theme--dark .main-wrap,
#app.theme--dark,
#app.theme--dark .main-wrap,
#app.theme--dark #main-wrap,
.theme--dark #home,
.theme--dark .container-general {
    background-color: #08080c !important;
    color: #f5f5f7 !important;
}

/* MODO CLARO (BLANCO PURO) */
.theme--light,
.theme--light body,
body[data-theme="light"],
.theme--light .main-wrap,
#app.theme--light,
#app.theme--light .main-wrap,
#app.theme--light #main-wrap,
.theme--light .container-general {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ── 3. Acentos de Texto Dorados Globales ── */
.theme--dark .use-text-primary,
.theme--dark .use-text-title-primary {
    color: #c9a84c !important;
}

.theme--light .use-text-primary,
.theme--light .use-text-title-primary {
    color: #a87e24 !important;
}

.theme--dark .use-text-secondary,
.theme--dark .use-text-title-secondary {
    color: #dfba55 !important;
}

.theme--light .use-text-secondary,
.theme--light .use-text-title-secondary {
    color: #8f691b !important;
}

/* ── 4. Botones Primarios y CTAs Dorados ── */
/* Modo Oscuro: Oro satinado con texto oscuro */
.theme--dark .btn.primary,
.theme--dark .btn-primary,
.theme--dark .btn-premium,
.theme--dark .pricing-btn-primary,
.theme--dark .primary-color .btn,
.theme--dark .btn-gold {
    background: linear-gradient(135deg, #c9a84c 0%, #b89033 100%) !important;
    color: #08080c !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme--dark .btn.primary:hover,
.theme--dark .btn-primary:hover,
.theme--dark .btn-premium:hover,
.theme--dark .pricing-btn-primary:hover,
.theme--dark .btn-gold:hover {
    background: linear-gradient(135deg, #dfba55 0%, #c9a84c 100%) !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.35) !important;
}

/* Modo Claro: Oro ámbar de contraste con texto blanco */
.theme--light .btn.primary,
.theme--light .btn-primary,
.theme--light .btn-premium,
.theme--light .pricing-btn-primary,
.theme--light .primary-color .btn,
.theme--light .btn-gold {
    background: linear-gradient(135deg, #a87e24 0%, #8f691b 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(168, 126, 36, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme--light .btn.primary:hover,
.theme--light .btn-primary:hover,
.theme--light .btn-premium:hover,
.theme--light .pricing-btn-primary:hover,
.theme--light .btn-gold:hover {
    background: linear-gradient(135deg, #b88a28 0%, #a87e24 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(168, 126, 36, 0.35) !important;
}

/* ── 5. Botones Secundarios / Outline ── */
.theme--dark .pricing-btn-secondary,
.theme--dark .btn-secondary-outline {
    background: transparent !important;
    color: #c9a84c !important;
    border: 1px solid rgba(201, 168, 76, 0.4) !important;
}

.theme--dark .pricing-btn-secondary:hover,
.theme--dark .btn-secondary-outline:hover {
    background: rgba(201, 168, 76, 0.1) !important;
    border-color: #c9a84c !important;
}

.theme--light .pricing-btn-secondary,
.theme--light .btn-secondary-outline {
    background: transparent !important;
    color: #a87e24 !important;
    border: 1px solid rgba(168, 126, 36, 0.4) !important;
}

.theme--light .pricing-btn-secondary:hover,
.theme--light .btn-secondary-outline:hover {
    background: rgba(168, 126, 36, 0.08) !important;
    border-color: #a87e24 !important;
}

/* ── 6. Badges y Píldoras Doradas ── */
.theme--dark .badge-gold,
.theme--dark .badge-popular,
.theme--dark .badge.primary {
    background: rgba(201, 168, 76, 0.15) !important;
    border: 1px solid rgba(201, 168, 76, 0.35) !important;
    color: #dfba55 !important;
}

.theme--light .badge-gold,
.theme--light .badge-popular,
.theme--light .badge.primary {
    background: rgba(168, 126, 36, 0.1) !important;
    border: 1px solid rgba(168, 126, 36, 0.3) !important;
    color: #8f691b !important;
}

/* ── 7. Selección de Texto & Scrollbar ── */
::selection {
    background: rgba(201, 168, 76, 0.35) !important;
    color: #ffffff !important;
}

::-webkit-scrollbar {
    width: 8px;
}

.theme--dark ::-webkit-scrollbar-track {
    background: #08080c;
}

.theme--dark ::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, 0.3);
    border-radius: 4px;
}

.theme--dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 168, 76, 0.5);
}

.theme--light ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.theme--light ::-webkit-scrollbar-thumb {
    background: rgba(168, 126, 36, 0.3);
    border-radius: 4px;
}

.theme--light ::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 126, 36, 0.5);
}

/* ── 8. Switch de Tema en Header ── */
.menu-setting .switch label input[type=checkbox]:checked+.lever {
    background-color: rgba(201, 168, 76, 0.35) !important;
}

.menu-setting .switch label input[type=checkbox]:checked+.lever:after {
    background-color: #c9a84c !important;
}