body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /* Aquí puedes poner tu imagen o color de fondo */
    background: #1a1a1a; 
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

.pantalla {
    position: relative;
    min-height: 100vh;
    width: 100%;

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

    overflow: hidden;
}

.pantalla.active{
    display: flex;
}

/* ASIGNACIÓN DE IMÁGENES ESPECÍFICAS */
.bg-one {
    background-image: url("/static/images/fondo1.webp");
}

.bg-two {
    background-image: url("/static/images/fondo2.webp");
}

.bg-three {
    background-image: url("/static/images/fondo3.webp");
}

.bg-four {
    background-image: url("/static/images/fondo4.webp");
}

.bg-five {
    background-image: url("/static/images/fondo5.webp");
}

.bg-six {
    background-image: url("/static/images/fondo6.webp");
}

.content-block.active {
    display: flex;
}

.pantalla-principal,
.pantalla-final {
    z-index: 2;
    /* Eliminamos flex-direction y align-items de aquí porque ya están en .content-block */
}


/* CONTENEDOR VERTICAL */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.content-block {
    display: none; /* Por defecto ocultos */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 100vh; /* Ocupa toda la pantalla para centrar verticalmente */
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* Fondo independiente */
.background-layer {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-size: cover;
    background-position: center;
}

/* Contenido */
.content-wrapper {
    position: relative;
    z-index: 1;

    padding: 0 5.5rem;
    text-align: center;
}


/* VIDEO */
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TEXTO OPCIONAL */
.overlay {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 40px;
    font-family: Arial;
}

.pantalla-principal {
    text-align: center;
    color: white;
    z-index: 2;
    gap: 12px;
}

.pantalla-principal span:first-of-type {
    font-family: "TrirongItalic", serif;
    font-size: 70px;
    line-height: 1;
    display: block;
}

.pantalla-principal span:nth-of-type(2) {
    font-family: "TrirongSemiBoldItalic", serif;
    font-size: 120px;
    line-height: 0.9;
    margin-top: 7%;
    display: block;
}

.pantalla-principal .btn-comenzar {
    font-size: 80px;
    padding: 18px 70px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    width: 80%;
    font-family: "TrirongItalic", serif;
    line-height: 1;
    background: white;
    color: black;
    margin-top: 15%;
}

.resultado-emocion {
    text-align: center;
    color: white;

    flex-direction: column;
    align-items: center;

    gap: 20px;
    width: 100%;
}

.texto {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.texto span {
    font-family: "TrirongItalic", serif;
    font-size: 90px;
    line-height: 1;
}


.resultado {
    margin-top: 30px;

    font-family: "TrirongSemiBoldItalic", serif;
    font-size: 120px;
    /* 👈 más grande */

    background: white;
    color: black;

    margin-top: 15%;
    padding: 25px 60px;
    border-radius: 20px;

    display: inline-block;
}

.pantalla-final {
    text-align: center;
    color: white;
    gap: 20px;
}

.pantalla-final span {
    font-family: "TrirongItalic", serif;
    font-size: 6rem;
    line-height: 1;
    /* 👈 más grande */
}

.botones {
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.btn {
    font-size: 80px;
    padding: 18px 70px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    width: 80%;
    font-family: "TrirongItalic", serif;
    line-height: 1;
}

.si {
    background: orange;
    color: white;

}

.no {
    background: white;
    color: black;
}

.pantalla-deteccion {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* VIDEO FULL SCREEN */
.pantalla-deteccion .video {
    position: absolute;
    inset: 0;
    z-index: 1;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 5px solid red;
    transform: scaleX(-1);
}

.pantalla-deteccion .video video,
.pantalla-deteccion .video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTENEDOR OVERLAY (ORDENA TODO VERTICALMENTE) */
.overlay-ui {
    position: absolute;
    z-index: 2;
    margin-top: 10%;
    top: 50%;
    /* NO centro exacto, más natural para cara */
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    /* Evita que el contenedor sea más pequeño que el área de detección */
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Estilo para el mensaje que viene de Python */
#mensaje-python {
    display: block;
    font-size: 3.5rem; /* Un poco más pequeño que el principal para jerarquía */
    color: #00ffcc;
    margin-top: 15px;
    font-family: "TrirongItalic", serif;
    min-height: 1.2em; /* Mantiene el espacio aunque esté vacío */
}

/* MALLA (ARRIBA DEL BLOQUE) */
/* Busca esta sección y reemplázala */
.malla-rostro {
    width: 60%;
    height: 40%;
    border: 4px dashed rgba(255, 255, 255, 0.2); /* Casi transparente al inicio */
    border-radius: 50% / 45%;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cuando Python nos diga que el usuario está en posición */
.malla-rostro.alineado {
    border-color: #00ffcc;
    border-style: solid;
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.4);
}

/* La "Imagen de Referencia" que guía al usuario */
.malla-rostro::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    background: url('/static/images/malla3.png') no-repeat center;
    background-size: contain;
    opacity: 0.2;
}

/* SLIDER (DEBAJO DE MALLA) */
.slider {
    width: 55vw;
    max-width: 900px;
    min-width: 300px;
    height: 28px;

    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;

    position: relative;
    overflow: hidden;
    /* clave */
}

/* RELLENO */
.slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    /* mismo alto que slider */
    width: var(--progress, 0%);

    background: linear-gradient(90deg, #00ffcc, #00aaff);

    border-radius: 999px;
    /* para que encaje con el contenedor */
    transform-origin: left center;
}

/* TEXTO (DEBAJO DEL SLIDER) */
.descripcion {
    width: 85vw;
    /* control libre */
    max-width: 1000px;

    color: white;
    font-size: 5rem;
    text-align: center;
    line-height: 1.3;
    font-family: "TrirongItalic", serif;
}

.pantalla-countdown .content-wrapper span {
    font-size: clamp(18rem, 24vh, 35rem);
    font-family: "TrirongSemiBoldItalic", serif;
    color: white;
    line-height: 1;
}

/*---------------------------------
    FUENTES DE TEXTO
------------------------------------
*/

@font-face {
    font-family: "TrirongItalic";
    src: url("../fonts/Trirong-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "TrirongSemiBoldItalic";
    src: url("../fonts/Trirong-SemiBoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 600;
}

/* ESCALADO AUTOMÁTICO EN PANTALLAS MÁS PEQUEÑAS */
@media (max-width: 1080px) {
    .container {
        width: 100%;
        min-height: 100vh;

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

@media (max-height: 1920px) {
    .container {
        width: 100%;
        min-height: 100vh;

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