/* ===================================================== DonRoku — Sistema de Temas Aplica via: ===================================================== */ /* ── PURPLE (default) ─────────────────────────────── */ :root, [data-theme="purple"] { --primary: #6c5ce7; --primary-dark: #5a4bd1; --primary-rgb: 108,92,231; --secondary: #00cec9; --accent: #fd79a8; --dark: #0a0a1a; --dark-card: #12122a; --dark-surface: #1a1a3e; --text-light: #dfe6e9; --text-muted-color: #b2bec3; --body-bg: #0f0f23; --border-color: rgba(108,92,231,0.2); --gradient-primary: linear-gradient(135deg, #6c5ce7 0%, #a855f7 100%); --gradient-hero: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #2d1b69 100%); --nav-bg: rgba(10,10,26,0.95); --nav-link: #b2bec3; --input-bg: #1a1a3e; --scrollbar-track: #0a0a1a; } /* ── BLACK ────────────────────────────────────────── */ [data-theme="black"] { --primary: #cccccc; --primary-dark: #999999; --primary-rgb: 200,200,200; --secondary: #888888; --accent: #555555; --dark: #030303; --dark-card: #0a0a0a; --dark-surface: #141414; --text-light: #e0e0e0; --text-muted-color: #888888; --body-bg: #050505; --border-color: rgba(200,200,200,0.12); --gradient-primary: linear-gradient(135deg, #444444 0%, #1a1a1a 100%); --gradient-hero: linear-gradient(135deg, #030303 0%, #0a0a0a 50%, #111111 100%); --nav-bg: rgba(0,0,0,0.97); --nav-link: #aaaaaa; --input-bg: #141414; --scrollbar-track: #030303; } /* ── WHITE ────────────────────────────────────────── */ [data-theme="white"] { --primary: #5e35b1; --primary-dark: #4527a0; --primary-rgb: 94,53,177; --secondary: #1976d2; --accent: #9c27b0; --dark: #f4f6f9; --dark-card: #ffffff; --dark-surface: #eef0f8; --text-light: #1a1a2e; --text-muted-color: #546e7a; --body-bg: #f0f2f6; --border-color: rgba(94,53,177,0.18); --gradient-primary: linear-gradient(135deg, #5e35b1 0%, #9c27b0 100%); --gradient-hero: linear-gradient(135deg, #ede7f6 0%, #e8eaf6 50%, #e3f2fd 100%); --nav-bg: rgba(255,255,255,0.97); --nav-link: #37474f; --input-bg: #ffffff; --scrollbar-track: #e0e0e0; } /* ── RED ──────────────────────────────────────────── */ [data-theme="red"] { --primary: #ef5350; --primary-dark: #c62828; --primary-rgb: 239,83,80; --secondary: #ff8a80; --accent: #ff6e40; --dark: #0f0505; --dark-card: #1c0a0a; --dark-surface: #2c1212; --text-light: #fde8e8; --text-muted-color: #cf9f9f; --body-bg: #120606; --border-color: rgba(239,83,80,0.2); --gradient-primary: linear-gradient(135deg, #ef5350 0%, #b71c1c 100%); --gradient-hero: linear-gradient(135deg, #0f0505 0%, #1c0a0a 50%, #3b1010 100%); --nav-bg: rgba(15,5,5,0.97); --nav-link: #cf9f9f; --input-bg: #2c1212; --scrollbar-track: #0f0505; } /* ── BLUE ─────────────────────────────────────────── */ [data-theme="blue"] { --primary: #1a73e8; --primary-dark: #0d47a1; --primary-rgb: 26,115,232; --secondary: #00acc1; --accent: #40c4ff; --dark: #040d1f; --dark-card: #091628; --dark-surface: #0f2040; --text-light: #dce8f5; --text-muted-color: #90b4d8; --body-bg: #060f20; --border-color: rgba(26,115,232,0.2); --gradient-primary: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%); --gradient-hero: linear-gradient(135deg, #040d1f 0%, #091628 50%, #0f2040 100%); --nav-bg: rgba(4,13,31,0.97); --nav-link: #90b4d8; --input-bg: #0f2040; --scrollbar-track: #040d1f; } /* ===================================================== OVERRIDES GLOBALES usando variables ===================================================== */ body { background-color: var(--body-bg) !important; color: var(--text-light) !important; } /* Scrollbar */ ::-webkit-scrollbar-track { background: var(--scrollbar-track) !important; } ::-webkit-scrollbar-thumb { background: var(--primary) !important; } /* Navbar */ .navbar { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border-color) !important; } .navbar .nav-link { color: var(--nav-link) !important; } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--primary) !important; } .navbar-brand { color: var(--text-light) !important; } .dropdown-menu-dark { background-color: var(--dark-card) !important; border-color: var(--border-color) !important; } .dropdown-item { color: var(--nav-link) !important; } .dropdown-item:hover { background: rgba(var(--primary-rgb), 0.12) !important; color: var(--primary) !important; } /* Cards */ .card-product, .plan-card, .service-card, .review-card, .stat-card, .cart-item, .cart-summary, .bg-glass { background: var(--dark-card) !important; border-color: var(--border-color) !important; } .card-product:hover, .plan-card:hover, .service-card:hover, .stat-card:hover, .cart-item:hover, .review-card:hover { border-color: var(--primary) !important; box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.15) !important; } .plan-card.popular { border-color: var(--primary) !important; box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.25) !important; } .plan-card.popular::before { background: var(--gradient-primary) !important; } /* Service icon */ .service-icon { background: rgba(var(--primary-rgb), 0.1) !important; color: var(--primary) !important; } /* Hero */ .hero-section { background: var(--gradient-hero) !important; } .hero-section::before { background: radial-gradient(circle, rgba(var(--primary-rgb),0.15) 0%, transparent 70%) !important; } .section-dark { background: var(--dark) !important; } .section-gradient { background: linear-gradient(180deg, var(--body-bg) 0%, var(--dark-surface) 100%) !important; } /* Buttons */ .btn-primary { background: var(--gradient-primary) !important; border-color: transparent !important; } .btn-primary:hover { background: var(--gradient-primary) !important; } .btn-outline-primary { border-color: var(--primary) !important; color: var(--primary) !important; } .btn-outline-primary:hover { background: var(--primary) !important; color: #fff !important; } .btn-cart { background: rgba(var(--primary-rgb), 0.1) !important; color: var(--secondary) !important; border-color: rgba(var(--primary-rgb), 0.25) !important; } .btn-cart:hover { background: var(--secondary) !important; } /* Forms */ .form-control, .form-select { background: var(--input-bg) !important; border-color: var(--border-color) !important; color: var(--text-light) !important; } .form-control:focus, .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important; } .form-control::placeholder { color: var(--text-muted-color) !important; } .input-group-text { background: var(--dark-surface) !important; border-color: var(--border-color) !important; color: var(--text-muted-color) !important; } /* Text */ .text-primary { color: var(--primary) !important; } .text-muted { color: var(--text-muted-color) !important; } .text-gradient { background: var(--gradient-primary) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .highlight { background: var(--gradient-primary) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .divider-glow { background: var(--gradient-primary) !important; } /* Sidebar admin */ .sidebar { background: var(--dark-card) !important; border-right-color: var(--border-color) !important; } .sidebar .nav-link { color: var(--nav-link) !important; } .sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(var(--primary-rgb), 0.15) !important; color: var(--primary) !important; } /* Badges platform */ .badge-roku { background: rgba(var(--primary-rgb),0.15) !important; color: var(--primary) !important; } /* Price tags */ .price-tag, .plan-price { color: var(--secondary) !important; } .plan-features li i { color: var(--secondary) !important; } /* Table headers */ .table-dark-custom th { background: var(--dark) !important; } /* Cart summary */ .cart-summary { border-color: var(--border-color) !important; } /* ===================================================== OVERRIDES ESPECÍFICOS — TEMA WHITE (muchos colores hardcoded en el markup necesitan override) ===================================================== */ [data-theme="white"] body { color: #1a1a2e !important; } [data-theme="white"] .hero-title { color: #1a1a2e !important; } [data-theme="white"] .hero-subtitle { color: #546e7a !important; } [data-theme="white"] .section-title { color: #1a1a2e !important; } [data-theme="white"] .section-subtitle { color: #546e7a !important; } [data-theme="white"] .card-product .card-body, [data-theme="white"] .card-product .card-body * { color: #1a1a2e !important; } [data-theme="white"] .card-product .text-muted { color: #546e7a !important; } [data-theme="white"] .card-product .card-img-top { background: #f0f2f6 !important; } [data-theme="white"] .plan-card { color: #1a1a2e !important; } [data-theme="white"] .plan-features li { color: #37474f !important; border-bottom-color: rgba(0,0,0,0.06) !important; } [data-theme="white"] .service-card, [data-theme="white"] .service-card p { color: #37474f !important; } [data-theme="white"] .review-card, [data-theme="white"] .review-card .text-muted { color: #546e7a !important; } [data-theme="white"] .navbar .navbar-toggler-icon { filter: invert(1) !important; } [data-theme="white"] .dropdown-menu-dark .dropdown-item:hover { color: var(--primary) !important; } [data-theme="white"] .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.08) !important; } [data-theme="white"] .sidebar .nav-link { color: #37474f !important; } [data-theme="white"] .bg-glass { background: rgba(255,255,255,0.85) !important; border-color: rgba(94,53,177,0.15) !important; backdrop-filter: blur(10px) !important; } [data-theme="white"] .bg-glass .text-muted { color: #546e7a !important; } [data-theme="white"] .stat-card .stat-value { color: #1a1a2e !important; } [data-theme="white"] .table-dark-custom td { background: #ffffff !important; color: #2d3436 !important; } [data-theme="white"] .table-dark-custom tbody tr:nth-child(even) td { background: #f5f7ff !important; } [data-theme="white"] .carousel-caption { background: rgba(255,255,255,0.85) !important; color: #1a1a2e !important; } [data-theme="white"] h1,[data-theme="white"] h2,[data-theme="white"] h3, [data-theme="white"] h4,[data-theme="white"] h5,[data-theme="white"] h6 { color: #1a1a2e !important; } /* ===================================================== OVERRIDES ESPECÍFICOS — ADMIN PANEL ===================================================== */ /* Cards s-card (settings page) */ [data-theme="black"] .s-card, [data-theme="red"] .s-card, [data-theme="blue"] .s-card { background: rgba(255,255,255,.03) !important; border-color: var(--border-color) !important; } [data-theme="white"] .s-card { background: #ffffff !important; border-color: rgba(94,53,177,.12) !important; box-shadow: 0 2px 12px rgba(0,0,0,.06) !important; } [data-theme="white"] .s-card-header .card-title { color: #1a1a2e !important; } [data-theme="white"] .s-card-header .card-subtitle { color: #546e7a !important; } [data-theme="white"] .settings-tabs .nav-link { color: #546e7a !important; } [data-theme="white"] .settings-tabs .nav-link:hover { background: rgba(94,53,177,.08) !important; color: #5e35b1 !important; } [data-theme="white"] .settings-tabs .nav-link.active { background: rgba(94,53,177,.12) !important; color: #5e35b1 !important; border-color: rgba(94,53,177,.25) !important; } [data-theme="white"] .save-bar { background: rgba(240,242,246,.95) !important; border-top-color: rgba(94,53,177,.2) !important; } [data-theme="white"] .form-label { color: #37474f !important; } [data-theme="white"] .form-text { color: #78909c !important; } [data-theme="white"] code { background: #f0eef8 !important; color: #5e35b1 !important; padding: 1px 5px; border-radius: 4px; }