/* =========================================
   TEMPLATE CSS BASE - 2026
   ========================================= */

/* 1. Valores por defecto (Tema Oscuro por defecto según tu :root) */
:root {
    --bg-body: #2c3035;
    --bg-section: #2c3035;
    --color-heading: #5195b7;
    --color-text: #f9f9f9;
    --bg-button: #5195b7;
    --color-button: #ffffff;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-title: "tt-modernoir", sans-serif;
    --spacing: 1rem;
    --max_width: 1200px;
    --bg-azul: #023853;

    /* ... resto de tus variables ... */
}

/* 2. Sobreescritura para Tema Blanco */
.tema-blanco {
    --bg-body: #f9f9f9;
    --bg-section: #ffffff;
    --color-heading: #5195b7;
    --color-text: #2c3035;
    --bg-button: #2c3035;
    --color-button: #f9f9f9;
}

.tema-celeste {
    --bg-body: #61b6e7;
    --bg-section: #5195b7;
    --color-heading: #f5eccf;
    --color-text: #f9f9f9;
    --bg-button: #2c3035;
    --color-button: #f9f9f9;
}

.tema-celeste_viejo {
    --bg-body: #5195b7;
    --bg-section: #5195b7;
    --color-heading: #f5eccf;
    --color-text: #f9f9f9;
    --bg-button: #2c3035;
    --color-button: #f9f9f9;
}

/* 3. Aplicación (SIN !important) */

.tema-blanco,
.tema-oscuro,
.tema-celeste,
.tema-celeste_viejo {
    background-color: var(--bg-body);
    color: var(--color-text);
    min-height: 100vh;
    /* Para que cubra toda la pantalla */
    width: 100%;
    max-width: var(--max_width);
    margin: 0 auto;
}

/* Quita los estilos del body que bloquean el diseño */
body {
    font-family: var(--font-main);
    font-size: 18px;
    margin: 0;
    padding: 0;
    background-color: #2c3035;
}

.barra_lateral_izq {
    position: fixed;
    left: 0;
    height: 100vh;
}

.barra_lateral_izq {
    position: fixed;
    left: 0;
    height: 100vh;
}

.barra_lateral_izq img,
.barra_lateral_der img {
    height: 120vh;
    max-width: 30px;
}

.btn-back {
    text-align: center;

}

.btn-collect {
    text-align: center;
    background-color: var(--bg-azul);
    /* border-radius: 1em; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
    margin-bottom: 1em;

}

.btn-collect img {
    max-width: 50px;
    margin: 0.5em;

}

.cromo-obtener {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.cromo-obtener img {
    max-width: 60px;
}

section {
    background-color: var(--bg-section);
}



/* 2. Reseteo de Estilos (Reset/Normalize) */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* padding y bordes no alteran tamaño [3] */
    margin: 0;
    padding: 0;
}


p {
    /* color: var(--text-color); */
    font-weight: normal;
    line-height: 1.3;
}



.header_right,
.header_left,
.footer_right,
.footer_left {
    width: 10%;
    height: auto;
    position: fixed;

}

.header_right {
    right: 0;
    top: 0;
}

.header_left {
    left: 0;
    top: 0;
}

hr {
    margin: 1em;
}

.footer_right {
    right: 0;
    bottom: 0;
}

.footer_left {
    left: 0;
    bottom: 0;
}

.fondo_sol {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    margin: 0;
    z-index: -1;
}



h1,
h2,
h3 {
    font-family: "tt-modernoir", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: var(--color-heading);
    font-size: 3em;
    /* color: var(--text-color); */
    /* color: var(--white); */
}

h2 {
    font-size: 2.5em;
    line-height: normal;
}

h3 {
    font-size: 1.5em;
    line-height: normal;
    /* color: #fff; */
    /* font-family: var(--font-main); */
}

/* 3. Estilos Tipográficos y Estructura */
a {
    text-decoration: none;
    color: var(--primary-color);
    transition: 0.3s;
}


ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* 4. Layout Base (Header, Main, Footer) */
.header {
    background: var(--white);
    padding: var(--spacing);
    text-align: center;
    border-bottom: 2px solid #eee;
}

.home_logo {
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 0em;
    background-color: var(--third-color);
}


.nav_logo,
.img_estrella {
    width: 50%;
    height: auto;
    margin: 0 auto;
    /* margin-top: 2em; */
}

.img_estrella {
    margin-top: 2em;
}

.nav_logo img {
    /* max-width: 450px; */
}

.nav_footer {
    text-align: center;
}

.main-nav {
    text-align: center;
    color: var(--text-color);
    position: fixed;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    /* background-color: var(--background-color); */
}

.main-content {
    flex: 1;
    /* Empuja el footer hacia abajo */
    padding: calc(var(--spacing) * 2);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.mobile-nav {
    position: fixed;
    /* visibility: hidden; */

}


.footer {
    background: var(--text-color);
    color: var(--white);
    text-align: center;
    padding: var(--spacing);
    margin-top: auto;
}

.footer_credits {
    text-align: center;
    padding-bottom: 3em;
}

button,
.btn {
    font-family: var(--font-title);
    font-size: 1.6em;
    padding: 0.3em;
    background-color: var(--bg-button);
    color: var(--color-button);
    border: 0px solid;
    border-radius: 0.2em;
    border-color: var(--white);
    /* border-width: 0; */
    margin: 0.5em;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s;
}


button:hover {
    opacity: 0.8;
    /* Efecto simple de hover que funciona con cualquier color */
}

#next-question {}

#map {
    width: 100%;
    height: 5%;
    min-height: 75vh;
    margin-top: 80px;
    border-radius: 10px;
}

.mapa-detail {}

#map {
    max-width: var(--max_width);
    margin: 0 auto;

}

.locationButton {
    margin-bottom: 25px;
    padding: 12px 20px;
    color: #2c3035;
    background: rgb(245 239 209);
    border: 2px solid #fff;
    cursor: pointer;
    font-weight: normal;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* PARADAS */
.parada-media-main {
    display: flex;
    justify-content: center;
}

/* 5. Utilidades y Media Queries */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

#score-box {
    margin-top: 2em;
    text-align: center;
    /* font-size:20px; 
    font-weight:bold;
    margin-bottom:15px; */
}

.section-circuitos,
.section-trivia,
.section-login {
    text-align: center;
    font-size: 1.2em;
    padding-top: 2em;
}

.section-login {
    padding: 2em;
    margin-bottom: 5em;
}




#trivia {
    padding: 1em;
    text-align: center;
    width: 90%;
    max-width: var(--max_width);
    margin: 0 auto;
    padding-bottom: 3em;

}

/* Ajuste para que cada año tenga un color propio */

/* Estilos por año (Campaña) */
#trivia.parada--mundial30 {
    /* background-color: #5095b7;  */
}

#trivia.parada--mundial50 {
    /* background-color: #6c757d; */
}

/* Estilos por tipo */
#trivia.parada--tipo-objeto .parada-main {
    /* border: 2px dashed #4CAF50; */
}

#trivia.parada--tipo-contenido h1 {
    /* color: #2c3e50; */
}


/* Responsive: Ajustes para móviles */
@media (max-width: 768px) {
    .main-content {
        padding: var(--spacing);
    }

    .header_left,
    .header_right,
    .footer_left,
    .footer_right {
        width: 15%;
    }

}