/* ============================================
   MENU RESPONSIVE — este archivo NO debe pisar
   los estilos del <style> inline de index.html
   Solo agrega dark mode y resets de pixel-menu
============================================ */

/* Cancelar pixel-menu.css si estuviera cargado */
#navLinks li a,
.nav-links li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    border-left: none !important;
    animation: none !important;
    image-rendering: auto !important;
}
#navLinks li a::before,
.nav-links li a::before {
    display: none !important;
    content: '' !important;
    opacity: 0 !important;
}
#navLinks li a:hover,
.nav-links li a:hover {
    transform: none !important;
    background: #e0dcd4 !important;
}
#navLinks.active li,
.nav-links.active li {
    animation: none !important;
}
.nav-links .nav-icon,
#navLinks .nav-icon {
    filter: none !important;
    image-rendering: auto !important;
}

/* ── DARK MODE variables ── */
[data-theme="dark"] {
    --bg: #111 !important;
    --bg2: #1a1a1a !important;
    --bg3: #222 !important;
    --ink: #f0f0f0 !important;
    --ink2: #aaa !important;
    --ink3: #666 !important;
    --border: #2a2a2a !important;
    --white: #1a1a1a !important;
}
[data-theme="dark"] body {
    background: #111 !important;
    color: #f0f0f0 !important;
}
[data-theme="dark"] .header {
    background: rgba(17,17,17,0.97) !important;
    border-bottom-color: #2a2a2a !important;
}
[data-theme="dark"] .nav-links,
[data-theme="dark"] #navLinks {
    background: #1a1a1a !important;
    border-left-color: #2a2a2a !important;
}
[data-theme="dark"] .nav-links a,
[data-theme="dark"] #navLinks a {
    color: #aaa !important;
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] #navLinks a:hover {
    background: #222 !important;
    color: #f0f0f0 !important;
}
[data-theme="dark"] .mobile-menu-toggle span {
    background: #f0f0f0 !important;
}

/* ── DARK MODE — Footer ── */
[data-theme="dark"] .footer {
    background: #0a0a0a !important;
    border-top: 1px solid #2a2a2a !important;
}
[data-theme="dark"] .footer-bottom {
    border-top-color: #2a2a2a !important;
    color: #444 !important;
}

/* ── DARK MODE — Tienda cards ── */
[data-theme="dark"] .card-premium {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
[data-theme="dark"] .card-content {
    background: #1a1a1a !important;
}
[data-theme="dark"] .card-title {
    color: #f0f0f0 !important;
}
[data-theme="dark"] .card-description {
    color: #aaa !important;
}
[data-theme="dark"] .card-features li {
    color: #888 !important;
}
[data-theme="dark"] .card-image {
    background: #222 !important;
    border-left-color: #2a2a2a !important;
}
[data-theme="dark"] .card-stock {
    background: #222 !important;
    border-color: #333 !important;
    color: #888 !important;
}
[data-theme="dark"] .btn-premium {
    background: #f0f0f0 !important;
    color: #111 !important;
}
[data-theme="dark"] .btn-premium:hover {
    background: #fff !important;
    opacity: 1 !important;
}
[data-theme="dark"] .btn-premium:disabled {
    background: #2a2a2a !important;
    color: #555 !important;
}

/* ── DARK MODE — Secciones generales ── */
[data-theme="dark"] .hero-stat-card {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
[data-theme="dark"] .hero-stat-card.dark {
    background: #f0f0f0 !important;
    color: #111 !important;
}
[data-theme="dark"] .ranking-table-wrapper,
[data-theme="dark"] .podium-section,
[data-theme="dark"] .chat-box,
[data-theme="dark"] .stream-container {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
[data-theme="dark"] .cpx-card {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
[data-theme="dark"] .cpx-card:hover {
    border-color: #444 !important;
}

/* ── DARK MODE — Botón modo en el menú ── */
[data-theme="dark"] #themeLabel {
    color: #aaa !important;
}

/* ══════════════════════════════════════════════
   DARK MODE — Fix botones con background:var(--ink)
   En dark mode --ink=#f0f0f0 entonces fondo blanco
   con texto blanco = ilegible. Los invertimos.
   ══════════════════════════════════════════════ */

/* Botones primarios */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-connect,
[data-theme="dark"] .chat-send-button,
[data-theme="dark"] .stream-cta,
[data-theme="dark"] .entry-btn {
    background: #f0f0f0 !important;
    color: #111 !important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-connect:hover {
    background: #fff !important;
    opacity: 1 !important;
}

/* Botón secundario */
[data-theme="dark"] .btn-secondary {
    background: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #333 !important;
}
[data-theme="dark"] .btn-secondary:hover {
    background: #222 !important;
}

/* Hero stat card dark (la negra) */
[data-theme="dark"] .hero-stat-card.dark {
    background: #f0f0f0 !important;
    color: #111 !important;
}
[data-theme="dark"] .hero-stat-card.dark .hero-stat-val,
[data-theme="dark"] .hero-stat-card.dark .hero-stat-lbl {
    color: #111 !important;
}

/* Podio primer lugar */
[data-theme="dark"] .podium-place.first .rank-badge,
[data-theme="dark"] .podium-place.first .podium-base {
    background: #f0f0f0 !important;
    color: #111 !important;
    border-color: #f0f0f0 !important;
}

/* Badges/highlights con fondo ink */
[data-theme="dark"] .highlight,
[data-theme="dark"] .search-verified,
[data-theme="dark"] .chat-remove-preview {
    background: #f0f0f0 !important;
    color: #111 !important;
}

/* Inputs */
[data-theme="dark"] #searchUsuarios,
[data-theme="dark"] .chat-input,
[data-theme="dark"] .bet-input {
    background: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #333 !important;
}
[data-theme="dark"] #searchUsuarios::placeholder,
[data-theme="dark"] .chat-input::placeholder {
    color: #555 !important;
}

/* Bet quick buttons */
[data-theme="dark"] .bet-quick-btn {
    background: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #333 !important;
}
[data-theme="dark"] .bet-quick-btn:hover {
    background: #f0f0f0 !important;
    color: #111 !important;
}

/* Ranking tabla rows */
[data-theme="dark"] #rankingBody tr,
[data-theme="dark"] .ranking-table tr {
    background: #1a1a1a !important;
}
[data-theme="dark"] #rankingBody tr:hover,
[data-theme="dark"] .ranking-table tr:hover {
    background: #222 !important;
}
[data-theme="dark"] #rankingBody td,
[data-theme="dark"] .ranking-table td,
[data-theme="dark"] .ranking-table th {
    color: #f0f0f0 !important;
    border-color: #2a2a2a !important;
}

/* Podio segundo/tercer lugar */
[data-theme="dark"] .podium-place.second .rank-badge,
[data-theme="dark"] .podium-place.third .rank-badge {
    background: #2a2a2a !important;
    color: #f0f0f0 !important;
}

/* Search results */
[data-theme="dark"] .search-results-box {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
[data-theme="dark"] .search-result-item {
    color: #f0f0f0 !important;
}
[data-theme="dark"] .search-result-item:hover {
    background: #222 !important;
}

/* Modal */
[data-theme="dark"] .modal-overlay {
    background: rgba(0,0,0,0.7) !important;
}
[data-theme="dark"] .modal-container {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
}
[data-theme="dark"] .modal-header {
    border-bottom-color: #2a2a2a !important;
    color: #f0f0f0 !important;
}
[data-theme="dark"] .modal-close {
    color: #aaa !important;
}

/* Canjes section */
[data-theme="dark"] .canjes-px {
    background: #0f0f0f !important;
}

/* ══════════════════════════════════════════════
   DARK MODE — Tienda botón "Obtener Ahora"
   ══════════════════════════════════════════════ */
[data-theme="dark"] .btn-premium {
    background: #ffffff !important;
    color: #111111 !important;
    border: none !important;
}
[data-theme="dark"] .btn-premium:hover {
    background: #e0e0e0 !important;
    color: #111111 !important;
    opacity: 1 !important;
}
[data-theme="dark"] .btn-premium:disabled,
[data-theme="dark"] .btn-premium.disabled {
    background: #2a2a2a !important;
    color: #555 !important;
}