/* ============================================================
   DARK MODE — Overrides de color (Córner Rojo)
   Incluir DESPUÉS de tu style.css principal.
   Solo toca color/paleta — no cambia tipografía ni textos.
   ============================================================ */

/* --- 1. Variables de color --- */
:root {
    --bg-body:        #0d0d0f;
    --bg-card:        #18181c;
    --bg-header:      #000000;
    --bg-dark:        #000000;
    --text-main:      #f5f1e8;
    --text-muted:     #9a958c;
    --text-over-dark: #f5f1e8;
    --accent:         #ff2b3d;
    --accent-hover:   #d4162b;
    --border-subtle:  #2a2a30;
    --border-light:   #35353c;
    --color-dorado:            #c9a84c;
    --color-dorado-brillante:  #e8c96a;
    --color-header:   #000000;
}

/* --- 2. Reglas con color hardcodeado que no siguen las variables ---
   Estas solo aplican si tu HTML usa las mismas clases que el proyecto
   de referencia (nav, tarjetas de peleadores, hero, etc). Ajustá los
   selectores si tus nombres de clase son distintos. --- */

body {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 23px, rgba(255,255,255,0.035) 23px, rgba(255,255,255,0.035) 24px);
}

header {
    background: linear-gradient(135deg, #0a0a0c 0%, #151517 50%, #0a0a0c 100%);
}

.logo-text {
    color: #f5f1e8;
}

.logo-main:hover .logo-text {
    color: var(--color-dorado-brillante);
}

.theme-toggle {
    border-color: var(--color-dorado);
}

.theme-toggle:hover {
    border-color: var(--color-dorado-brillante);
}

.nav-link {
    color: #f5f1e8;
    border: 1px solid transparent;
}
.nav-link:hover {
    color: #0d0d0f;
    border-color: var(--color-dorado);
    background: rgba(201, 168, 76, 0.15);
}
body.home .nav-link {
    border-color: rgba(245,241,232,0.3) !important;
}
body.home .nav-link:hover {
    border-color: rgba(245,241,232,0.8) !important;
}

.hero-home {
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 100%),
                url(/assets/img/hero/estructura_auto.webp) center/cover no-repeat;
}

.nota-titulo { color: var(--text-over-dark); }
.nota-fecha { color: var(--text-muted); }

.protagonista-nombre { color: var(--text-over-dark); }
.protagonista-stats-bar { border-top: 1px solid rgba(245,241,232,0.2); }
.pstat-val { color: var(--text-over-dark); }

.entrevista-play { background: rgba(255,43,61,0.7); }

.carta-nombre { color: var(--text-over-dark); }
.carta-stats { border-top: 1px solid rgba(201,168,76,0.3); }
.carta-stat { border-right: 1px solid rgba(201,168,76,0.2); }
.carta-stat-valor { color: var(--text-over-dark); }
.carta-borde { border: 1px solid rgba(201,168,76,0.2); }
.carta-peleador:hover .carta-borde { border-color: rgba(201,168,76,0.6); }
.carta-rating { border-color: rgba(201,168,76,0.7); }
.carta-rating-ovr { color: rgba(201,168,76,0.7) !important; }
.carta-rating-num { color: #e8c96a !important; }

.coming-soon-desc { color: var(--text-muted); }
.coming-soon-banner-contenido p { color: var(--text-muted); }

/* --- 3. SVG inline (badge hexagonal MMA) ---
   Si tu HTML trae fill/stroke inline en el <svg> (como en este proyecto),
   una regla CSS pisa esos atributos de presentación. Ajustá el selector
   al contenedor real de tu SVG. --- */
.carta-rating-hex polygon { stroke: rgba(201,168,76,0.6) !important; }
.carta-rating-hex text:first-of-type { fill: rgba(201,168,76,0.7) !important; }
.carta-rating-hex text:last-of-type { fill: #e8c96a !important; }

/* --- 4. Responsive adaptado para dark mode --- */

/* TABLET: 768px */
@media (max-width: 768px) and (min-width: 601px) {
    .hero-home h1 { color: #f5f1e8; }
    .logo-text { font-size: 1.8rem; }
}

/* MOBILE: 600px */
@media (max-width: 600px) {
    .hero-home h1 {
        font-size: 1.8rem;
        color: #f5f1e8;
    }
    .seccion-titulo {
        color: #f5f1e8;
        font-size: 1.6rem;
    }
    .logo-text {
        color: #f5f1e8;
        font-size: 1.5rem;
    }
    .logo-sub {
        font-size: 0.55rem;
    }
    .carta-nombre {
        font-size: 1.2rem;
    }
}

/* DESKTOP: 1024px+ */
@media (min-width: 1024px) {
    .hero-home h1 { color: #f5f1e8; }
}