*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;}
html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.titulo-rastrear a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.titulo-rastrear a:hover {
    opacity: 0.8;
}
body {
    display: flex;
    flex-direction: column;
}

.header {
    flex: 0 0 auto;
}

.main-layout {
    width: 100%;
    height: calc(100vh - 70px);

    display: grid;
    grid-template-columns:
        minmax(180px, 17%)
        minmax(0, 58%)
        minmax(280px, 25%);

    gap: 16px;
    padding: 16px;

    background:
        linear-gradient(
            rgba(25, 15, 8, 0.35),
            rgba(16, 9, 5, 0.65)
        ),
        url("img/textura-madera.webp");

    background-repeat: repeat;
    background-size: 420px auto;

    overflow: hidden;
}
.header {
    height: 70px;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        linear-gradient(
            rgba(32, 18, 9, 0.25),
            rgba(20, 11, 6, 0.65)
        ),
        url("img/textura-madera.webp");

    background-repeat: repeat;
    background-size: 420px auto;

    border-bottom: 4px solid var(--dorado);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.5);

    position: relative;
    z-index: 200;
}

.header h1 {
    margin: 0;

    color: var(--texto-claro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    letter-spacing: 3px;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.8);
}




#mainImage{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}
.side-panel{
    width:20%;
    background:#e5e5e5;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow: auto;
}


.btn {
    width: 100%;

    padding: 15px 16px;

    background:
        linear-gradient(
            to bottom,
            var(--verde),
            var(--verde-oscuro)
        );

    color: white;

    border: 2px solid #e5cf91;
    border-radius: 9px;

    box-shadow:
        0 0 0 2px #194a29,
        0 5px 10px rgba(0, 0, 0, 0.28);

    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.4px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.18s ease,
        box-shadow 0.25s ease;
}

.btn:hover {
    background:
        linear-gradient(
            to bottom,
            var(--azul),
            var(--azul-oscuro)
        );

    box-shadow:
        0 0 0 2px #174a78,
        0 8px 15px rgba(0, 0, 0, 0.35);

    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(1px);
    background:
        linear-gradient(
            to bottom,
            #b78331,
            #805517
        );
}

.btn.disabled {
    background:
        linear-gradient(
            to bottom,
            #9c8d70,
            #70634f
        );

    color: #ded6c6;

    border-color: #aa9b7d;

    box-shadow:
        0 0 0 2px #665a47;

    cursor: not-allowed;
    transform: none;
    opacity: 0.75;
}

#textoViajar {
    margin: -3px 0 7px;

    padding: 10px 12px;

    background: rgba(255, 248, 222, 0.72);

    border: 1px solid #9e7844;
    border-radius: 8px;

    color: #7b281e;

    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.extra-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:0.4s;}

.extra-buttons.show{
    max-height:200px;
    opacity:1;}

#imgPersona {
    position: absolute;
    bottom: 0;
    
    height: 80%;

    display: none;
    pointer-events: none;
    z-index: 100;
}

#cajaDialogo{

    position:absolute;

    top:10px;
    left:20px;
    right:20px;

    min-height:90px;

    padding:15px 25px;

    background:rgba(0,0,0,.55);

    border:2px solid rgba(255,255,255,.7);
    border-radius:12px;

    color:white;

    font-size:18px;
    font-family:Arial;

    display:none;

    box-sizing:border-box;

    z-index:90;
}
#textoDialogo{

    display:block;

}

#modalInvestigacion {
    position: fixed;
    inset: 0;

    display: none;
    justify-content: center;
    align-items: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.75);

    z-index: 60000;
}

.ventana-investigacion {
    position: relative;

    width: min(750px, 92vw);
    max-height: 85vh;

    padding: 28px 30px;

    background:
        linear-gradient(
            145deg,
            #f8edcf,
            #dbc38e
        );

    border: 5px solid #76502c;
    border-radius: 16px;

    box-shadow:
        0 0 0 3px #c9a85f,
        0 18px 45px rgba(0, 0, 0, 0.65);

    overflow-y: auto;
}

#ventanaInvestigacion{

    width:70%;
    max-height:80%;

    overflow-y:auto;

    background:white;

    border-radius:10px;

    padding:20px;

}

#listaInvestigacion{

    margin-top:20px;
    margin-bottom:20px;

}
#contenidoInvestigacion{

    position:relative;
}.btn-cerrar-modal {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 44px;
    height: 44px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0;
    margin: 0;

    background: #9e2f26;
    color: #ffffff;

    border: 3px solid #f2d39a;
    border-radius: 50%;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.35);

    font-size: 30px;
    font-weight: bold;
    line-height: 1;

    cursor: pointer;

    z-index: 1000;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.btn-cerrar-modal:hover {
    background: #d34838;

    transform: scale(1.06);
}
#modalVictoria{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.75);

    z-index:10000;

}

#ventanaVictoria{

    width:650px;

    background:white;

    border-radius:15px;

    padding:35px;

    text-align:center;

}

#ventanaVictoria h1{

    color:#008000;

    margin-bottom:10px;

}

#ventanaVictoria p{

    font-size:18px;

    margin:20px 0;

}
.mapa-container {
    height: 100%;
    min-height: 0;

    padding: 14px;

    background:
        linear-gradient(
            145deg,
            #d8c39a,
            #bea173
        );

    border: 4px solid var(--madera-clara);
    border-radius: 15px;

    box-shadow:
        inset 0 0 20px rgba(89, 61, 28, 0.2),
        0 8px 22px rgba(0, 0, 0, 0.42);

    overflow: hidden;
}
#mapaArgentina {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

#mapaArgentina svg {
    width: 100%;
    height: 100%;

    display: block;
}
.mapa-container {
    flex: 0 0 25%;
}

.mapa-container {
    position: relative;
}

.controles-zoom-mapa {
    position: absolute;

    top: 12px;
    right: 12px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    z-index: 20;
}

.btn-zoom-mapa {
    width: 42px;
    height: 42px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #3b2918;
    border-radius: 8px;

    background: #f5e6c8;
    color: #3b2918;

    font-size: 26px;
    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 2px 5px
        rgba(0, 0, 0, 0.25);
}

.btn-zoom-mapa:hover {
    transform: scale(1.05);
}
.controles-zoom-modal {
    top: 550px;
    right: 30px;
}
.image-container{
    width:54%;
    
    position: relative;

    height: 100%;
    min-height: 0;

    overflow: hidden;

    background: #16110d;

    border: 4px solid var(--madera-clara);
    border-radius: 15px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.45);
}

.image-container > #mainImage {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.side-panel {
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: 13px;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #e9d8aa,
            #cdb785
        );

    border: 4px solid var(--madera-clara);
    border-radius: 15px;

    box-shadow:
        inset 0 0 25px rgba(90, 60, 25, 0.18),
        0 8px 22px rgba(0, 0, 0, 0.42);

    overflow: auto;
}

#pantallaInicio {
    position: fixed;
    inset: 0;

    display: none;
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.82);

    z-index: 20000;
}

.ventana-inicio {
    width: 80%;

    padding: 35px 40px;

    background: rgba(24, 30, 38, 0.97);

    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;

    color: white;
    text-align: center;

    box-sizing: border-box;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55);
}

.ventana-inicio h1 {
    margin: 0 0 35px;

    font-size: 55px;
    letter-spacing: 3px;
}

.configuracion-inicio {
    margin-bottom: 30px;
    text-align: left;
}

.configuracion-inicio label {
    display: block;

    margin-bottom: 14px;

    font-size: 20px;
    line-height: 1.4;
}

.control-rango {
    display: flex;
    align-items: center;
    gap: 18px;
}

.control-rango input[type="range"] {
    flex: 1;
    cursor: pointer;
}

.control-rango span {
    min-width: 50px;

    padding: 7px 10px;

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;

    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.btn-iniciar {
    width: 100%;

    margin-top: 10px;
    padding: 15px 25px;

    border: none;
    border-radius: 10px;

    background: #2ecc71;
    color: white;

    font-size: 23px;
    font-weight: bold;

    cursor: pointer;

    transition:
        transform 0.2s,
        background 0.2s;
}

.btn-iniciar:hover {
    background: #27ae60;
    transform: scale(1.02);
}
#selectProvinciaInicial {
    width: 100%;

    padding: 12px 14px;

    background: rgba(255, 255, 255, 0.14);
    color: white;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;

    font-size: 18px;

    box-sizing: border-box;
    cursor: pointer;
}

#selectProvinciaInicial option {
    background: #202630;
    color: white;
}

#resumenVictoria {
    margin: 25px 0;

    padding: 20px;

    background: #f3f3f3;

    border-radius: 10px;

    text-align: left;
}

#resumenVictoria p {
    margin: 10px 0;
    font-size: 18px;
}

.recorrido-victoria {
    margin-top: 20px;
}

#victoriaRecorrido {
    padding: 12px;

    background: white;

    border: 1px solid #ccc;
    border-radius: 8px;

    line-height: 1.6;
}
#pantallaHistoria{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:flex-end;

    padding-bottom:20px;

    background:
        url("img/historia.webp")
        center center / cover
        no-repeat;

    z-index:99999;
}

#btnAceptarDesafio {
    
    min-width: 360px;

    padding: 10px 10px;

    background: linear-gradient(
        to bottom,
        #2f9b47,
        #1f6f34
    );

    color: #ffffff;

    border: 3px solid #d7c17c;
    border-radius: 10px;

    box-shadow:
        0 0 0 3px #174126,
        0 8px 20px rgba(0,0,0,.45);

    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;

    letter-spacing: 1px;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .30s,
        transform .20s,
        box-shadow .30s;
    
}

#btnAceptarDesafio:hover {

    background: linear-gradient(
        to bottom,
        #2b8cff,
        #0c5fcb
    );

    box-shadow:
        0 0 0 3px #0b417c,
        0 12px 28px rgba(0,0,0,.55);

    transform: scale(1.05);
}

#btnAceptarDesafio:active {

    transform: scale(.98);

}


/* =========================
   ESTILO GENERAL RASTREAR
========================= */

:root {
    --madera-oscura: #21170f;
    --madera-media: #4b3422;
    --madera-clara: #7a5736;

    --pergamino: #ead9ad;
    --pergamino-claro: #f7edcf;

    --verde: #277a43;
    --verde-oscuro: #15552c;

    --azul: #2477c9;
    --azul-oscuro: #14518d;

    --dorado: #c9a85f;
    --texto-oscuro: #302218;
    --texto-claro: #fff8e7;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(24, 15, 9, 0.35),
            rgba(24, 15, 9, 0.65)
        ),
        url("img/textura-madera.webp");

    background-repeat: repeat;
    background-size: 420px auto;
    background-position: center;

    color: var(--texto-oscuro);
    font-family: Arial, Helvetica, sans-serif;

    overflow: hidden;
}

.extra-buttons {
    display: none;

    flex-direction: column;
    gap: 10px;

    padding: 12px;

    background: rgba(81, 56, 32, 0.17);

    border: 1px solid rgba(100, 66, 33, 0.45);
    border-radius: 10px;
}

.extra-buttons.show {
    display: flex;
}

.extra-buttons .btn {
    padding: 12px;

    font-size: 15px;
}

.mapa-container,
.image-container,
.side-panel {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

/* ==================================
   PANTALLA DE CONFIGURACIÓN RASTREAR
================================== */

#pantallaInicio {
    position: fixed;
    inset: 0;

    display: none;
    justify-content: center;
    align-items: center;

    padding: 22px;

    background:
        linear-gradient(
            rgba(20, 12, 6, 0.58),
            rgba(12, 7, 4, 0.82)
        ),
        url("img/textura-madera.webp");

    background-repeat: repeat;
    background-size: 420px auto;
    background-position: center;

    box-sizing: border-box;
    overflow-y: auto;

    z-index: 40000;
}

.ventana-inicio {
    width: min(680px, 94vw);

    padding: 32px 38px;

    background:
        linear-gradient(
            145deg,
            #f8edcf,
            #dbc38e
        );

    border: 5px solid #76502c;
    border-radius: 18px;

    box-shadow:
        0 0 0 3px #c9a85f,
        inset 0 0 35px rgba(100, 66, 29, 0.18),
        0 18px 45px rgba(0, 0, 0, 0.65);

    color: #302218;

    box-sizing: border-box;
}

.ventana-inicio h1 {
    margin: 0 0 28px;

    color: #6e211d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    letter-spacing: 4px;
    text-align: center;

    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.45);
}

.configuracion-inicio {
    margin-bottom: 22px;
    padding: 16px 18px;

    background: rgba(255, 248, 222, 0.55);

    border: 1px solid #a98450;
    border-radius: 10px;

    box-shadow:
        inset 0 0 12px rgba(85, 53, 20, 0.08);
}

.configuracion-inicio label {
    display: block;

    margin-bottom: 12px;

    color: #3c291a;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.35;
}

.control-rango {
    display: flex;
    align-items: center;
    gap: 16px;
}

.control-rango input[type="range"] {
    flex: 1;

    height: 8px;

    appearance: none;
    -webkit-appearance: none;

    background: linear-gradient(
        to right,
        #2f8a48,
        #1c5f32
    );

    border: 1px solid #6c4b2b;
    border-radius: 20px;

    cursor: pointer;
}

.control-rango input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;

    appearance: none;
    -webkit-appearance: none;

    background: #d7bd74;

    border: 3px solid #5c3c20;
    border-radius: 50%;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35);

    cursor: grab;
}

.control-rango input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;

    background: #d7bd74;

    border: 3px solid #5c3c20;
    border-radius: 50%;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35);

    cursor: grab;
}

.control-rango span {
    min-width: 54px;

    padding: 8px 10px;

    background: #fff5d8;

    border: 2px solid #8b6839;
    border-radius: 8px;

    color: #6e211d;

    font-size: 21px;
    font-weight: bold;
    text-align: center;

    box-shadow:
        inset 0 0 8px rgba(96, 58, 22, 0.12);
}

#selectProvinciaInicial {
    width: 100%;

    padding: 12px 14px;

    background: #fff5d8;
    color: #332318;

    border: 2px solid #8b6839;
    border-radius: 8px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;

    box-shadow:
        inset 0 0 10px rgba(92, 56, 23, 0.12);

    cursor: pointer;
}

#selectProvinciaInicial:focus,
.control-rango input[type="range"]:focus {
    outline: 3px solid rgba(36, 119, 201, 0.38);
    outline-offset: 3px;
}

.btn-iniciar {
    width: 100%;

    margin-top: 6px;
    padding: 16px 24px;

    background:
        linear-gradient(
            to bottom,
            #2f914b,
            #1b622f
        );

    color: white;

    border: 3px solid #dbc47e;
    border-radius: 10px;

    box-shadow:
        0 0 0 3px #184529,
        0 8px 18px rgba(0, 0, 0, 0.35);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.18s ease,
        box-shadow 0.25s ease;
}

.btn-iniciar:hover {
    background:
        linear-gradient(
            to bottom,
            #2d8ee0,
            #145a9f
        );

    box-shadow:
        0 0 0 3px #174f7e,
        0 11px 22px rgba(0, 0, 0, 0.45);

    transform: translateY(-2px);
}

.btn-iniciar:active {
    transform: translateY(1px);
}


@media (max-width: 700px), (max-height: 760px) {

    #pantallaInicio {
        align-items: flex-start;
        padding: 12px;
    }

    .ventana-inicio {
        padding: 22px 20px;
    }

    .ventana-inicio h1 {
        margin-bottom: 20px;
        font-size: 37px;
    }

    .configuracion-inicio {
        margin-bottom: 14px;
        padding: 12px 14px;
    }

    .configuracion-inicio label {
        font-size: 16px;
    }

    .btn-iniciar {
        padding: 13px 18px;
        font-size: 18px;
    }
}


/* =========================
   TRANSICIÓN DE VIAJE
========================= */

#transicionViaje {
    position: fixed;
    inset: 0;

    display: none;

    background:
        linear-gradient(
            to bottom,
            rgba(93, 184, 232, 0.88),
            rgba(215, 238, 247, 0.78)
        );

    overflow: hidden;

    pointer-events: all;

    z-index: 60000;
}

#transicionViaje.activa {
    display: block;
}

#avionViaje {
    position: absolute;

    top: 42%;
    left: -35%;

    width: clamp(190px, 25vw, 390px);
    height: auto;

    transform: translateY(-50%);

    filter:
        drop-shadow(0 12px 10px rgba(0, 0, 0, 0.28));

    pointer-events: none;
}

#avionViaje.volando {
    animation:
        vueloAvion 1.6s
        cubic-bezier(0.35, 0.05, 0.65, 0.95)
        forwards;
}

.texto-transicion-viaje {
    position: absolute;

    left: 50%;
    bottom: 12%;

    transform: translateX(-50%);

    padding: 12px 28px;

    

    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
}

@keyframes vueloAvion {

    0% {
        left: -35%;
        top: 58%;

        transform:
            translateY(-50%)
            rotate(-4deg)
            scale(0.88);
    }

    45% {
        top: 40%;

        transform:
            translateY(-50%)
            rotate(1deg)
            scale(1);
    }

    100% {
        left: 110%;
        top: 25%;

        transform:
            translateY(-50%)
            rotate(5deg)
            scale(0.9);
    }
}

@media (max-width: 700px) {

    #avionViaje {
        width: 210px;
    }

    .texto-transicion-viaje {
        bottom: 9%;

        padding: 10px 20px;

        font-size: 18px;
        position: absolute;

        top: 50%;
        left: 50%;
    }
}

/* Reduce el movimiento si el usuario lo tiene configurado */
@media (prefers-reduced-motion: reduce) {

    #avionViaje.volando {
        animation-duration: 0.5s;
    }
}

#profesorFinal {
    position: absolute;

    left: 25%;
    bottom: -22%;

    height: 92%;
    max-width: 50%;

    object-fit: contain;

    display: none;

    pointer-events: none;

    z-index: 110;

    transform: translateX(-50%);

    filter:
        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
}

#profesorFinal.aparecer {
    display: block;

    animation:
        aparecerProfesor 0.9s ease-out forwards;
}

@keyframes aparecerProfesor {

    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(25px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}
#mainImage.encuentro-final {
    filter: grayscale(100%) brightness(0.62);
    transition:
        filter 0.8s ease;
}
/* ================================
   MAPA EN PANTALLA COMPLETA
================================ */

#modalMapa {
    position: fixed;
    inset: 0;

    display: none;

    padding: 18px;

    background:
        linear-gradient(
            rgba(24, 14, 7, 0.92),
            rgba(12, 7, 4, 0.97)
        ),
        url("img/textura-madera.webp");

    background-size: 420px auto;

    z-index: 70000;
}

#modalMapa.mostrar {
    display: flex;
    justify-content: center;
    align-items: center;
}

#contenidoMapaModal {
    width: min(900px, 94vw);
    height: min(850px, 88vh);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 12px;

    background:
        linear-gradient(
            145deg,
            #dfc99c,
            #b99865
        );

    border: 5px solid #76502c;
    border-radius: 16px;

    box-shadow:
        0 0 0 3px #c9a85f,
        0 18px 50px rgba(0, 0, 0, 0.65);

    overflow: hidden;
}

.tocar-continuar {
    display: inline-block;

    padding: 7px 14px;
    margin-top: 4px;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;

    font-weight: bold;
    font-size: 0.9em;

    cursor: pointer;
}

.tocar-continuar::after {
    content: " ›";
}

#contenidoMapaModal .mapa-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    padding: 5px;

    border: none;
    box-shadow: none;
}

#contenidoMapaModal svg,
#contenidoMapaModal object {
    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    object-fit: contain;
}

#btnCerrarMapa {
    position: absolute;

    top: 16px;
    right: 18px;

    width: 48px;
    height: 48px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #9e2f26;
    color: white;

    border: 3px solid #f2d39a;
    border-radius: 50%;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.45);

    font-size: 34px;
    font-weight: bold;
    line-height: 1;

    cursor: pointer;

    z-index: 2;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

#btnCerrarMapa:hover {
    background: #d34838;
    transform: scale(1.08);
}

body.mapa-abierto {
    overflow: hidden;
}
#introJuego {
    position: fixed;
    inset: 0;

    z-index: 70000;

    overflow: hidden;

    background: #000;

    cursor: pointer;
}

#fondoIntroJuego {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================
   ASISTENTE
========================= */

#asistenteIntro {
    position: absolute;

    left: 15%;
    bottom: -55%;

    width: min(42vw, 530px);
    height: auto;

    z-index: 2;

    pointer-events: none;
}


/* =========================
   CUADRO DE DIÁLOGO
========================= */

#dialogoIntroJuego {
    position: absolute;

    top: 10%;
    right: 20%;

    width: min(55vw, 760px);

    padding: 22px 26px;

    background: rgba(0, 0, 0, 0.68);

    border-bottom: 3px solid white;
    border-radius: 12px;

    color: white;

    z-index: 3;

    box-sizing: border-box;
}

#textoIntroJuego {
    margin: 0;

    font-size: 22px;
    line-height: 1.5;
}

#contadorIntroJuego {
    display: block;

    margin-top: 12px;

    text-align: right;

    font-size: 13px;

    opacity: 0.75;
}

#dialogoIntroJuego::after {
    content: "Tocá en cualquier parte para continuar ›";

    display: block;

    margin-top: 10px;

    text-align: right;

    font-size: 13px;

    opacity: 0.75;
}

#dialogoIntroJuego.ultimo-mensaje::after {
    display: none;
}


/* =========================
   BOTÓN
========================= */

#btnComenzarAventura {
    position: absolute;

    left: 50%;
    bottom: 5%;

    transform: translateX(-50%);

    width: auto;
    min-width: 220px;

    padding: 12px 24px;

    z-index: 4;
}

#btnComenzarAventura.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#btnComenzarAventura.habilitado {
    opacity: 1;
    cursor: pointer;
}

/* =========================================
   MODAL OBJETO ENCONTRADO
========================================= */

.modal-objeto {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.7);

    /*
    Tiene que quedar por encima
    de la Bitácora.
    */
    z-index: 5000;
}

.modal-objeto.activo {
    display: flex;
}

.modal-objeto-contenido {
    width: min(500px, 92vw);

    padding: 28px;

    text-align: center;

    background: #fff;

    border-radius: 16px;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.4);
}

.modal-objeto-contenido h2 {
    margin-top: 0;
}

#imagenObjeto {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 45vh;

    margin: 20px auto;

    object-fit: contain;
}

#nombreObjeto {
    margin: 15px 0 20px;

    font-size: 1.3rem;
}

#cajaDialogo.objeto-pendiente {
    cursor: pointer;
}
#cajaDialogo.objeto-pendiente {
    cursor: pointer;

    animation:
        pulsoObjeto 1.3s
        ease-in-out infinite;
}

@keyframes pulsoObjeto {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }
}

.ver-objeto-bitacora {
    display: inline-block;

    margin-top: 8px;

    cursor: pointer;

    font-weight: bold;

    text-decoration: underline;
}

/* =========================================
   MISTERIO FINAL
========================================= */

.modal-misterio-final {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.75);

    z-index: 4000;
}

.modal-misterio-final.activo {
    display: flex;
}

.modal-misterio-contenido {
    width: min(600px, 92vw);

    padding: 30px;

    background: white;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.45);
}

#opcionesMisterio {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin: 25px 0;
}

#opcionesMisterio .btn {
    width: 100%;
}

.mensaje-misterio {
    min-height: 25px;

    margin: 15px 0;

    font-weight: bold;
}

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto;

        overflow-x: hidden;
        overflow-y: auto;
    }

    .header {
        height: 52px;
        min-height: 52px;
    }

    .header h1 {
        font-size: 23px;
        letter-spacing: 2px;
    }

    .main-layout {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column;

        gap: 7px;
        padding: 7px;

        overflow: visible !important;
    }

    /*
    Imagen principal arriba.
    */
    .image-container {
        order: 1;

        width: 100% !important;
       /* height: auto !important;*/
        min-height: 0 !important;

        aspect-ratio: 16 / 10;

        border-width: 3px;
        border-radius: 10px;
    }

    .image-container > #mainImage {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }
 
 /*ARREGLAR*/
    .image-container {
        height: 65vh;
        min-height:  50vh;
    }
    /*
    El mapa se oculta del diseño normal.
    Sigue existiendo para abrirlo en el modal.
    */
    
    #contenidoMapaModal .mapa-container {
        display: block;
    }

    /*
    Panel de controles debajo de la imagen.
    */
    .side-panel {
        order: 2;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        /*
        Fila 1: botones principales
        Fila 2: estado
        Fila 3: botones dinámicos
        */
        grid-template-rows:
            auto
            auto
            auto;

        gap: 7px;
        padding: 8px;

        align-items: start;

        overflow: visible !important;
    }

    #btnBuscar {
        grid-column: 1;
        grid-row: 1;
    }

    #btnViajar {
        grid-column: 2;
        grid-row: 1;
    }

    #btnInvestigar {
        grid-column: 3;
        grid-row: 1;
    }

    #btnMostrarMapa {
        grid-column: 4;
        grid-row: 1;
    }

    #textoViajar {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        margin: 0;
        padding: 7px 8px;
    }

    #extraBuscar,
    #extraViajar {
        grid-column: 1 / -1;
        grid-row: 3;

        width: 100%;
        min-width: 0;

        flex-direction: column;
        gap: 6px;

        padding: 6px;
    }

    /*
    Botones principales:
    Buscar, Viajar, Bitácora y Ver mapa.
    Se muestran de izquierda a derecha.
    */
    #btnBuscar,
    #btnViajar,
    #btnInvestigar,
    #btnMostrarMapa {
        width: 100%;
        min-width: 0;

        padding: 9px 4px;

        font-size: 11px;
        line-height: 1.15;

        white-space: normal;
    }

    /*
    Los botones dinámicos ocupan todo
    el ancho y se muestran verticalmente.
    */
    #extraBuscar,
    #extraViajar {
        grid-column: 1 / -1;

        width: 100%;

        flex-direction: column;
        gap: 6px;

        padding: 6px;
    }

    #extraBuscar .btn,
    #extraViajar .btn {
        width: 100%;

        padding: 9px 7px;

        font-size: 12px;
        line-height: 1.2;
    }

    /*
    Texto de estado ocupa todo el ancho.
    */
    #textoViajar {
        grid-column: 1 / -1;

        margin: 0;

        padding: 7px 8px;

        font-size: 12px;
        line-height: 1.25;
    }

    /*
    Diálogo sobre la imagen.
    */
    #cajaDialogo {
        position: absolute;

        top: 2% !important;
        bottom: auto !important;

        left: 3% !important;
        right: auto !important;

        width: 94%;

        min-height: 0;

        padding: 8px 10px;

        font-size: 13px;
        line-height: 1.3;

        box-sizing: border-box;

        z-index: 120 !important;
    }

    #textoDialogo {
        margin: 0;
        font-size: inherit;
    }

    .persona {
        right: 2%;
        bottom: 0;

        height: 73%;
        max-width: 50%;
    }

    #profesorFinal {
        height: 84%;
        max-width: 58%;
    }
     #btnMostrarMapa {
        display: block !important;
    }

   

    /*
    Cuando el mapa fue trasladado al modal,
    debe volver a mostrarse.
    */
    #contenidoMapaModal > .mapa-container {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 5px !important;

        border: none !important;
        box-shadow: none !important;

        overflow: hidden !important;
    }

    #contenidoMapaModal > .mapa-container svg,
    #contenidoMapaModal > .mapa-container object,
    #contenidoMapaModal > .mapa-container iframe {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        transform: none !important;
        object-fit: contain !important;
    }

      /* =========================
       MOSTRAR BOTÓN DEL MAPA
    ========================= */

    #btnMostrarMapa {
        display: block !important;

        grid-column: 4 !important;
        grid-row: 1 !important;

        width: 100%;
        min-width: 0;

        padding: 9px 4px;

        font-size: 11px;
        line-height: 1.15;
        white-space: normal;
    }


    /* =========================
       PERSONAJES
    ========================= */

    .image-container .persona {
        position: absolute;

        left: 1% !important;
        right: auto !important;
        bottom: -10%;

        height: 72%;
        max-width: 48%;

        object-fit: contain;
        object-position: left bottom;

        /*
        Debajo del cuadro de diálogo.
        */
        z-index: 40 !important;

        pointer-events: none;
    }


    /* =========================
       CUADRO DE DIÁLOGO
    ========================= */

    #cajaDialogo {
        position: absolute;

        left: 3%;
        right: auto;
        bottom: 2%;
        top: auto;

        width: 94%;

        padding: 8px 10px;

        font-size: 13px;
        line-height: 1.3;

        /*
        Delante del personaje.
        */
        z-index: 120 !important;
    }

    #textoDialogo {
        position: relative;
        z-index: 121;

        margin: 0;
    }
    #contenidoMapaModal {
        padding: 2px !important;
    }

    #contenidoMapaModal > .mapa-container {
        width: 100% !important;
        height: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;
    }

    #contenidoMapaModal .mapa-container svg,
    #contenidoMapaModal .mapa-container object,
    #contenidoMapaModal .mapa-container iframe {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        transform: scale(1.45) !important;
        transform-origin: center center !important;

        object-fit: contain !important;
    }
}

@media screen and (max-width: 430px) {

    .side-panel {
        order: 2;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        /*
        Fila 1: botones principales
        Fila 2: estado
        Fila 3: botones dinámicos
        */
        grid-template-rows:
            auto
            auto
            auto;

        gap: 7px;
        padding: 8px;

        align-items: start;

        overflow: visible !important;
    }

    #btnBuscar {
        grid-column: 1;
        grid-row: 1;
    }

    #btnViajar {
        grid-column: 2;
        grid-row: 1;
    }

    #btnInvestigar {
        grid-column: 3;
        grid-row: 1;
    }

    #btnMostrarMapa {
        grid-column: 4;
        grid-row: 1;
    }

    #textoViajar {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        margin: 0;
        padding: 7px 8px;
    }

    #extraBuscar,
    #extraViajar {
        grid-column: 1 / -1;
        grid-row: 3;

        width: 100%;
        min-width: 0;

        flex-direction: column;
        gap: 6px;

        padding: 6px;
    }

    #btnBuscar,
    #btnViajar,
    #btnInvestigar,
    #btnMostrarMapa {
        padding: 8px 2px;

        font-size: 9.5px;
        letter-spacing: 0;
    }

    #extraBuscar .btn,
    #extraViajar .btn {
        font-size: 11px;
    }

    #cajaDialogo {
        font-size: 12px;
    }

    #contenidoMapaModal {
        width: 96vw;
        height: 90vh;

        padding: 7px;
    }

    #btnCerrarMapa {
        top: 8px;
        right: 8px;

        width: 42px;
        height: 42px;

        font-size: 29px;
    }
     #btnMostrarMapa {
        display: block !important;
    }

  

    /*
    Cuando el mapa fue trasladado al modal,
    debe volver a mostrarse.
    */
    #contenidoMapaModal > .mapa-container {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 5px !important;

        border: none !important;
        box-shadow: none !important;

        overflow: hidden !important;
    }

    #contenidoMapaModal > .mapa-container svg,
    #contenidoMapaModal > .mapa-container object,
    #contenidoMapaModal > .mapa-container iframe {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        transform: none !important;
        object-fit: contain !important;
    }

      /* =========================
       MOSTRAR BOTÓN DEL MAPA
    ========================= */

    #btnMostrarMapa {
        display: block !important;

        grid-column: 4 !important;
        grid-row: 1 !important;

        width: 100%;
        min-width: 0;

        padding: 9px 4px;

        font-size: 11px;
        line-height: 1.15;
        white-space: normal;
    }


    /* =========================
       PERSONAJES
    ========================= */

    .image-container .persona {
        position: absolute;

        left: 1% !important;
        right: auto !important;
        bottom: -10%;

        height: 72%;
        max-width: 48%;

        object-fit: contain;
        object-position: left bottom;

        /*
        Debajo del cuadro de diálogo.
        */
        z-index: 40 !important;

        pointer-events: none;
    }


    /* =========================
       CUADRO DE DIÁLOGO
    ========================= */

    #cajaDialogo {
        position: absolute;

        left: 3%;
        right: auto;
        bottom: 2%;
        top: auto;

        width: 94%;

        padding: 8px 10px;

        font-size: 13px;
        line-height: 1.3;

        /*
        Delante del personaje.
        */
        z-index: 120 !important;
    }

    #textoDialogo {
        position: relative;
        z-index: 121;

        margin: 0;
    }
    #contenidoMapaModal {
        padding: 2px !important;
    }

    #contenidoMapaModal > .mapa-container {
        width: 100% !important;
        height: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;
    }

    #contenidoMapaModal .mapa-container svg,
    #contenidoMapaModal .mapa-container object,
    #contenidoMapaModal .mapa-container iframe {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        transform: scale(1.45) !important;
        transform-origin: center center !important;

        object-fit: contain !important;
    }
}


/* =========================================
   COMPORTAMIENTO GENERAL / PC
========================================= */

#btnMostrarMapa {
    display: none;
}

.mapa-container {
    display: block;
}

@media screen and (max-width: 768px) {

    .ventana-investigacion {
        width: 94vw;
        max-height: 88vh;

        padding: 22px 16px;
    }

    
}


.image-container .persona {
        position: absolute;

        left: 1% !important;
        right: auto !important;
        bottom: -10%;

        height: 72%;
        max-width: 48%;

        object-fit: contain;
        object-position: left bottom;

        /*
        Debajo del cuadro de diálogo.
        */
        z-index: 40 !important;

        pointer-events: none;
    }

@media screen and (max-width: 768px) {

    

    #contenidoMapaModal .mapa-container {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    #contenidoMapaModal .mapa-container > svg,
    #contenidoMapaModal .mapa-container > object,
    #contenidoMapaModal .mapa-container > iframe,
    #contenidoMapaModal .mapa-container > img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 auto !important;

        object-fit: contain !important;

        transform: none !important;
    }
}

@media screen and (max-width: 768px) {

    #contenidoMapaModal {
        width: 96vw;
        height: 90vh;

        display: flex;
        justify-content: center;
        align-items: center;

        padding: 4px;
    }

    #contenidoMapaModal .mapa-container {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    #contenidoMapaModal #mapaArgentina {
        display: flex !important;
        justify-content: center;
        align-items: center;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;
    }

    #contenidoMapaModal #mapaArgentina svg {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        transform: scale(1.35);
        transform-origin: center;
    }
}

@media screen and (max-width: 768px) {

  

    #btnMostrarMapa {
        display: block !important;
    }

    #contenidoMapaModal {
        width: 96vw;
        height: 90vh;

        display: flex;
        justify-content: center;
        align-items: center;

        padding: 5px;

        background:
            linear-gradient(
                145deg,
                #dfc99c,
                #b99865
            );

        border: 5px solid #76502c;
        border-radius: 16px;

        box-sizing: border-box;
        overflow: hidden;
    }

    #contenidoMapaModal svg,
    #contenidoMapaModal .svg-mapa-modal {
        display: block;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain;

        /*
        Ajustá este valor si querés
        acercar más el mapa.
        */
        transform: scale(1.18);
        transform-origin: center;
    }
}

@media screen and (max-width: 768px) {

    /*
    El mapa continúa existiendo y conservando tamaño,
    pero queda fuera de la pantalla principal.
    Esto permite que mapa.js lo inicialice correctamente.
    */
    .main-layout > .mapa-container {
        position: absolute !important;

        left: -10000px !important;
        top: 0 !important;

        display: block !important;

        width: 360px !important;
        height: 640px !important;

        min-width: 360px !important;
        min-height: 640px !important;

        visibility: hidden !important;

        pointer-events: none !important;
    }

    #btnMostrarMapa {
        display: block !important;
    }

    /* ============================
   BOTONES PRINCIPALES MÓVIL
============================ */

.side-panel > .btn,
.side-panel > button {

    height: 54px;
    min-height: 54px;
    max-height: 54px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0 10px;

    box-sizing: border-box;

    font-size: 17px;
    line-height: 1.1;

    white-space: nowrap;
}
#btnAceptarDesafio {
        width: auto !important;
        min-width: 0 !important;
        max-width: 88vw;

        padding: 13px 22px;

        font-size: 17px;
        line-height: 1.15;

        white-space: nowrap;
    }

    #pantallaInicio {
        align-items: center;

        padding: 8px;

        overflow-y: auto;
    }

    .ventana-inicio {
        width: min(94vw, 520px);
        max-height: 94dvh;

        padding: 16px 14px;

        border-width: 3px;
        border-radius: 13px;

        overflow-y: auto;
    }

    .ventana-inicio h1 {
        margin: 0 0 12px;

        font-size: 30px;
        letter-spacing: 2px;
    }

    .configuracion-inicio {
        margin-bottom: 9px;
        padding: 9px 10px;

        border-radius: 8px;
    }

    .configuracion-inicio label {
        margin-bottom: 7px;

        font-size: 14px;
        line-height: 1.2;
    }

    .control-rango {
        gap: 9px;
    }

    .control-rango span {
        min-width: 42px;

        padding: 5px 7px;

        font-size: 16px;
    }

    #selectProvinciaInicial {
        padding: 8px 9px;

        font-size: 14px;
    }

    .btn-iniciar {
        margin-top: 2px;

        padding: 11px 16px;

        font-size: 17px;
    }
}
@media screen and (max-width: 400px) {

    #btnAceptarDesafio {
        max-width: 92vw;

        padding: 12px 16px;

        font-size: 15px;
        letter-spacing: 0.4px;
    }
}
@media screen and (max-width: 768px) and (max-height: 700px) {

    #pantallaInicio {
        align-items: flex-start;
        padding: 5px;
    }

    .ventana-inicio {
        width: 96vw;
        max-height: 98dvh;

        padding: 10px;
    }

    .ventana-inicio h1 {
        margin-bottom: 7px;
        font-size: 24px;
    }

    .configuracion-inicio {
        margin-bottom: 6px;
        padding: 6px 8px;
    }

    .configuracion-inicio label {
        margin-bottom: 4px;
        font-size: 12px;
    }

    .control-rango span {
        padding: 3px 6px;
        font-size: 14px;
    }

    #selectProvinciaInicial {
        padding: 6px 8px;
        font-size: 13px;
    }

    .btn-iniciar {
        padding: 9px 13px;
        font-size: 15px;
    }
}
#contenidoMapaModal {
    width: min(900px, 94vw);
    height: min(850px, 88vh);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 6px;

    box-sizing: border-box;
    overflow: hidden;
}

#contenidoMapaModal > svg {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;
}

@media screen and (max-width: 768px) {

    #contenidoMapaModal {
        width: 96vw;
        height: 90vh;
    }

    #contenidoMapaModal > svg {
        transform: scale(1.15);
        transform-origin: center;
    }
}

/* =========================================
   MODALES DE VICTORIA  - CELULAR
========================================= */
@media screen and (max-width: 768px) {

    #modalVictoria .modal-contenido,
    .modal-contenido {

        width: 92vw;
        max-width: 420px;

        max-height: 88dvh;

        padding: 18px 16px;

        overflow-y: auto;

        border-radius: 12px;

        box-sizing: border-box;
    }

    #modalVictoria h {
        font-size: 24px;
        margin-bottom: 12px;
    }

    #modalVictoria p {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    #modalVictoria button{

        width: 100%;
        min-height: 48px;

        font-size: 17px;
    }
}

@media screen and (max-width: 768px) {

    #modalVictoria img {

        max-width: 140px;
        height: auto;
    }

}
/* =========================================
   MODALES PISTAS / VIAJAR
========================================= */

.modal-opciones-juego {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.65);

    z-index: 1000;
}

.modal-opciones-juego.activo {
    display: flex;
}

.modal-opciones-juego-contenido {
    position: relative;

    width: min(600px, 92vw);
    max-height: 85vh;

    padding: 30px;

    overflow-y: auto;

     background:
        linear-gradient(
            145deg,
            #dfc99c,
            #b99865
        );

    border: 5px solid #76502c;
    border-radius: 16px;

    box-shadow:
        0 0 0 3px #c9a85f,
        0 18px 50px rgba(0, 0, 0, 0.65);
}

.modal-opciones-juego-contenido h2 {
    margin:
        0
        45px
        25px
        0;

    text-align: center;
}


/* CONTENEDORES DE BOTONES */

#contenidoModalPistas,
#contenidoModalViajar {
    display: flex;
    flex-direction: column;

    gap: 12px;

    width: 100%;
}


/* BOTONES */

#contenidoModalPistas .btn,
#contenidoModalViajar .btn {
    width: 100%;
}
/* =========================================
   PANTALLA DE CONFIGURACIÓN - CELULAR
========================================= */

#pantallaInicio {

    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100dvh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0;

    overflow: hidden;
}

.ventana-inicio {

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    margin: 0;
    padding: 18px;

    border-radius: 0;

    box-sizing: border-box;

    overflow-y: auto;
}

@media screen and (max-width: 768px) {

    #victoriaRecorrido {
        font-size: 11px !important;
        line-height: 1.25;

        max-height: 120px;
        overflow-y: auto;

        margin: 5px 0 10px;
        padding: 4px 6px;

        overflow-wrap: anywhere;
        word-break: normal;
    }

}
@media screen and (max-width: 768px) {

    .ventana-inicio {

        width: 100%;
        height: 100dvh;

        padding: 10px 14px;

        box-sizing: border-box;

        overflow-y: auto;
    }

    .ventana-inicio h1 {

        font-size: 28px;
        margin-bottom: 10px;
    }

    .configuracion-inicio {

        margin-bottom: 8px;
        padding: 8px 10px;
    }

    .configuracion-inicio label {

        font-size: 14px;
        margin-bottom: 4px;
    }

    .control-rango {

        gap: 8px;
    }

    .control-rango input[type="range"] {

        height: 20px;
    }

    .control-rango span {

        min-width: 34px;

        font-size: 15px;
        padding: 3px 6px;
    }

    #selectProvinciaInicial {

        padding: 7px 8px;

        font-size: 14px;
    }

    #btnAceptarDesafio {

        margin-top: 10px;

        min-height: 46px;

        font-size: 17px;
    }
}

#pantallaInicio {
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;

    box-sizing: border-box;
}

.ventana-inicio {
    width: min(620px, 92vw);
    max-height: 90vh;

    padding: 18px 22px;

    box-sizing: border-box;

    overflow-y: auto;
}

.ventana-inicio h1 {
    margin: 0 0 14px;

    font-size: 34px;
}

.configuracion-inicio {
    margin-bottom: 10px;
    padding: 9px 12px;
}

.configuracion-inicio label {
    margin-bottom: 5px;

    font-size: 15px;
}

.control-rango {
    gap: 10px;
}

.control-rango span {
    min-width: 38px;

    padding: 4px 7px;

    font-size: 15px;
}

#selectProvinciaInicial {
    padding: 8px 10px;

    font-size: 15px;
}

.btn-iniciar {
    margin-top: 8px;

    padding: 11px 18px;

    font-size: 17px;
}


#ubicacionPista {
    position: absolute;

    top: auto;
    left: auto;

    right: 14px;
    bottom: 14px;

    display: none;

    max-width: 70%;

    padding: 8px 14px;

    background: rgba(34, 22, 12, 0.78);

    color: #ffffff;

    border: 2px solid #e5cf91;
    border-radius: 7px;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35);

    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.4px;

    text-align: right;

    z-index: 130;

    pointer-events: none;
}
@media screen and (max-width: 768px) {

    #ubicacionPista {
        top: auto !important;
        left: auto !important;

        right: 8px !important;
        bottom: 8px !important;

        max-width: 75%;

        padding: 6px 9px;

        font-size: 11px;
        line-height: 1.2;

        text-align: right;
    }

}



#ubicacionPista {
    position: absolute;

    top: auto;
    left: auto;

    right: 14px;
    bottom: 14px;

    display: none;
    align-items: center;

    gap: 8px;

    max-width: 75%;

    padding: 6px 12px 6px 6px;

    background: rgba(34, 22, 12, 0.82);

    color: #ffffff;

    border: 2px solid #e5cf91;
    border-radius: 7px;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35);

    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.4px;

    z-index: 130;

    pointer-events: none;
}

#banderaUbicacion {
    width: 42px;
    height: 28px;

    object-fit: cover;

    flex-shrink: 0;

    border-radius: 3px;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.35);
 
    cursor: pointer;
    pointer-events: auto;

}

#textoUbicacion {
    line-height: 1.2;
}

@media screen and (max-width: 768px) {

    #ubicacionPista {
        right: 8px !important;
        bottom: 8px !important;

        max-width: 82%;

        gap: 5px;

        padding: 4px 7px 4px 4px;

        font-size: 10px;
    }

    #banderaUbicacion {
        width: 32px;
        height: 21px;
    }

}

#modalBandera {
    position: fixed;
    inset: 0;

    display: none;

    justify-content: center;
    align-items: center;

    padding: 20px;

    background:
        rgba(18, 10, 5, 0.9);

    z-index: 80000;
}

#modalBandera.mostrar {
    display: flex;
}

.contenido-bandera-modal {
    position: relative;

    width: min(700px, 90vw);

    padding:
        65px
        24px
        24px;

    background:
        linear-gradient(
            145deg,
            #dfc99c,
            #b99865
        );

    border: 5px solid #76502c;
    border-radius: 16px;

    box-shadow:
        0 0 0 3px #c9a85f,
        0 18px 50px rgba(0, 0, 0, 0.65);

    text-align: center;
}

#banderaAmpliada {
    display: block;

    width: 100%;
    max-height: 65vh;

    object-fit: contain;

    margin: 0 auto 14px;
}

#nombreBandera {
    margin: 0;

    color: #432d1a;

    font-size: 20px;
    font-weight: bold;
}

.logo-rastrear {
    display: block;

    width: auto;
    height: 70px;

    margin-bottom: 18px;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(0, 0, 0, 0.35)
        );
}

@media screen and (max-width: 768px) {

    #modalBandera {
        padding: 10px;
    }

    .contenido-bandera-modal {
        width: 94vw;

        padding: 14px;
    }

    #banderaAmpliada {
        max-height: 60vh;
    }

    #nombreBandera {
        font-size: 16px;
    }

    

    .logo-rastrear {
        width: auto;
        margin-bottom: 14px;
        height: 50px;
    }
}


@media screen and (max-width: 768px) {

    #asistenteIntro {
        left: -8%;
        bottom: -20%;

        width: 98vw;
        max-width: 490px;
    }

    #dialogoIntroJuego {
        top: 4%;
        right: 4%;

        width: 67%;

        padding: 14px 16px;
    }

    #textoIntroJuego {
        font-size: 15px;
        line-height: 1.35;
    }

    #btnComenzarAventura {
        bottom: 3%;

        width: auto !important;
        min-width: 190px;

        padding: 10px 18px;
    }
}


/* =========================================
   PROVINCIAS DURANTE EL VIAJE
========================================= */

#provinciasTransicion {
    position: absolute;

    left: 0;
    right: 0;

    top: 50%;
    transform: translateY(-50%);

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 0 8%;

    box-sizing: border-box;

    pointer-events: none;

    z-index: 2;
}

.provincia-transicion {
    width: 30%;
    height: 55vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}


.silueta-transicion {
    width: 100%;
    height: 42vh;

    overflow: visible;
}


.silueta-transicion path {
    fill: rgba(
        255,
        255,
        255,
        0.85
    );

    stroke: #3b2918;

    stroke-width: 2;

    vector-effect:
        non-scaling-stroke;
}


.provincia-origen {
    opacity: 0.55;
}


.provincia-destino {
    opacity: 0.95;
}


.nombre-provincia-transicion {
    margin-top: 5px;

    font-size: clamp(
        18px,
        2.2vw,
        30px
    );

    font-weight: bold;

    color: white;

    text-shadow:
        0 2px 4px
        rgba(0, 0, 0, 0.55);
}


.etiqueta-provincia-transicion {
    margin-top: 2px;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 2px;

    color: rgba(
        255,
        255,
        255,
        0.75
    );
}
.silueta-transicion path {
    fill: #f5e6c8;

    stroke: #3b2918;

    stroke-width: 2;

    vector-effect:
        non-scaling-stroke;
}
.nombre-provincia-transicion {
    margin-top: 5px;

    font-size: clamp(
        18px,
        2.2vw,
        30px
    );

    font-weight: 800;

    color: #3b2918;

    text-shadow: none;
}
.etiqueta-provincia-transicion {
    margin-top: 3px;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 2px;

    color: #3b2918;

    opacity: 0.75;
}
@media screen and (max-width: 768px) {

    #provinciasTransicion {
        top: 50%;
        bottom: auto;

        transform:
            translateY(-50%);

        padding: 0;

        height: 82%;

        flex-direction: column;

        justify-content:
            space-between;

        align-items: center;
    }


    .provincia-transicion {
        width: 65%;
        height: 38%;

        justify-content: center;
    }


    .silueta-transicion {
        width: 100%;
        height: 25vh;
    }


    .nombre-provincia-transicion {
        margin-top: 2px;

        font-size: 16px;
    }


    .etiqueta-provincia-transicion {
        margin-top: 1px;

        font-size: 9px;

        letter-spacing: 1px;
    }
}


#cajaDialogo.dialogo-profesor-final::after {
    content: "Tocá en cualquier parte para continuar ›";

    display: block;

    margin-top: 10px;

    text-align: right;

    font-size: 13px;

    opacity: 0.75;
}