/* =========================================
    INTERFAZ DEL JUEGO (GAME UI)
    ========================================= */

/* Contenedor de la tarjeta del juego */
.juegos-header {
    .fa-puzzle-piece {
        color: #E6B86A;
        transform: rotate(25deg);
    }
    .fa-dice {
        color: #C98696;
        transform: rotate(310deg);
    }
    .fa-game-board {
        color: #5E8C8C;
    }
    .fa-gamepad-modern {
        color: #E09F7D;
        transform: rotate(10deg);
    }
    .fa-paw {
        color: var(--color-ai);
    }
}
.game-interface {
    text-align: left;
    background-color: var(--color-blanco);
    padding: 40px;
    border: 2px solid var(--color-principal);
    border-radius: 25px; /* Bordes muy redondeados como tus otras tarjetas */
    box-shadow: 6px 6px 0px rgba(114, 133, 85, 0.15); /* Sombra sólida característica */
}

/* El cuadro de la definición */
.texto-definicion {
    background: var(--color-fondo-suave);
    padding: 25px;
    border-left: 6px solid var(--color-principal);
    border-radius: 0 15px 15px 0;
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    line-height: 1.6;
    margin: 20px 0 30px 0;
    text-align: left;
}

/* Estilo para el Input de texto */
#user-guess {
    width: 100%;
    padding: 15px 25px;
    border: 2px solid var(--color-borde);
    border-radius: 50px; /* Estilo pastilla */
    font-family: var(--font-cuerpo);
    font-size: 1.2rem;
    color: var(--color-texto);
    background-color: var(--color-blanco);
    transition: all 0.3s ease;
    box-sizing: border-box; /* Evita que el padding ensanche el input */
    outline: none;
    /* margin-bottom: 10px; */
}

#user-guess:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 8px rgba(114, 133, 85, 0.2);
}

/* Botones del Juego */
#check-answer-btn,
#next-word-btn {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border: none;
    border-radius: 50px;
    padding: 12px 35px;
    font-family: var(--font-cuerpo);
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: lowercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    box-shadow: 3px 3px 0px var(--color-principal-hover);
}

#check-answer-btn:hover,
#next-word-btn:hover {
    background-color: var(--color-principal-hover);
    transform: translateY(-2px);
    box-shadow: 1px 1px 0px var(--color-principal-hover);
}

#next-word-btn:focus {
    /* border: none; */
    outline: none;
}
/* Feedback de éxito/error */
.game-feedback {
    font-family: var(--font-cuerpo);
    font-size: 1.2rem;
    margin: 15px 0;
    /* padding: 10px; */
    border-radius: 10px;
    flex-wrap: wrap;       /* Permite que los elementos bajen si no caben */
    justify-content: center; /* Centra todo si se pone en dos líneas */
}

.button-container {
    min-height: 60px; /* Reserva el espacio para que la definición no suba y baje */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#check-answer-btn, #next-word-btn {
    margin-top: 0 !important; /* Quitamos el margen para que queden centrados en el min-height */
}

/* El contenedor padre que ahora envuelve botones + mensaje */
.game-feedback {
    display: flex;          /* Ponemos todo en una fila */
    align-items: center;    /* Centramos verticalmente botones y texto */
    margin-top: 15px;
    min-height: 60px;       /* Mantenemos una altura mínima para estabilidad */
}

/* El div específico donde aparece el texto de "Excelente" o "Casi" */
#game-feedback {
    font-family: var(--font-cuerpo);
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;             /* Quitamos márgenes para que no desalinee el flex */
    /* ¡EL ARREGLO! */
    white-space: normal;   /* Permite que el texto se rompa en varias líneas */
    text-align: center;    /* Se ve mejor centrado si cae debajo del botón */
    line-height: 1.4;      /* Un poquito de aire entre líneas por si se rompe */
}

/* Ajuste para el contenedor de botones dentro del flex */
.button-container {
    display: flex;
    align-items: center;
    margin: 0;
}

/* Aseguramos que los botones no tengan márgenes extra que estorben */
#check-answer-btn, #next-word-btn {
    margin: 0 !important;
}

.selector-tema-juego {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-cuerpo);
}

.selector-tema-tarjetas {
    margin-bottom: 25px;
    font-family: var(--font-cuerpo);
}

.selector-tema-juego select,
.selector-tema-tarjetas select {
    padding: 8px 15px;
    border: 2px solid var(--color-principal-claro);
    border-radius: 20px;
    background-color: var(--color-blanco);
    color: var(--color-texto);
    font-family: var(--font-cuerpo);
    cursor: pointer;
    outline: none;
    box-shadow: 2px 2px 0px rgba(114, 133, 85, 0.2);
}

.selector-tema-juego select:active,
.selector-tema-tarjetas select:focus {
    border: 2px solid var(--color-principal);
    outline: none;
}

#cantidad-parejas {
    font-size: 1.2rem;
    padding: 8px 12px;
    border: 2px solid var(--color-principal-clarito);
    border-radius: 8px;
    width: 80px; /* Un poco más ancho */
    text-align: center;
    cursor: pointer;
    font-family: var(--fuente-cuerpo);
    outline: none;
    box-shadow: 2px 2px 0px rgba(114, 133, 85, 0.2);
    /* 3. El truco maestro: Forzarlo al frente */
    position: relative !important;
    z-index: 100 !important; /* "Yo voy primero" */
}

#cantidad-parejas:active,
#cantidad-parejas:focus {
    border: 2px solid var(--color-principal);
    outline: none;
}

/* Hacer las flechas un poco más grandes en navegadores modernos */
#cantidad-parejas::-webkit-inner-spin-button,
#cantidad-parejas::-webkit-outer-spin-button {
    transform: scale(1.5); /* Esto las hace 50% más grandes */
    margin-left: 10px;     /* Un poco de aire a la izquierda */
    opacity: 1;
    cursor: pointer;
    padding-top: 5px !important;    /* Menos relleno arriba */
    padding-bottom: 5px !important; /* Menos relleno abajo */
    line-height: normal;            /* Resetea la altura de línea */
}

/* Contenedor principal */
.gender-switch {
    position: relative;
    display: flex;
    background-color: #ffffff;
    border: 2px solid var(--color-principal); /* Tu verde oliva */
    border-radius: 30px;
    padding: 4px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    overflow: hidden;
}

/* Escondemos el circulito de radio */
.radio-genero {
    display: none !important;
}

/* Estilo de las etiquetas (los botones) */
.gender-switch label {
    flex: 1;
    padding: 6px 0;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    font-family: var(--font-pretty-cursive), cursive; /* Tu estilo manuscrito */
    font-size: 1.4rem;
    color: var(--color-principal);
    transition: color 0.4s ease;
}

/* La pastilla deslizante */
.switch-selection {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 4px;
    display: block;
    width: calc(33.33% - 8px);
    height: calc(100% - 8px);
    border-radius: 25px;
    background-color: var(--color-principal); /* Fondo verde cuando selecciona */
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Lógica de movimiento según el ID */

#masc:checked ~ .switch-selection { transform: translateX(0); }
#fem:checked ~ .switch-selection { transform: translateX(calc(100% + 8px)); }
/* Aquí está el truco: usamos 200% pero asegúrate de que el ancho sea exacto */
#inv:checked ~ .switch-selection { transform: translateX(calc(200% + 16px)); }

/* Cambio de color de texto al estar activo */
#masc:checked ~ label[for="masc"],
#fem:checked ~ label[for="fem"],
#inv:checked ~ label[for="inv"] {
    color: #ffffff;
}

.game-stats {
    color: var(--color-principal-hover);
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    font-family: var(--font-cuerpo);
    margin-top: 10px;
}

.game-header .selector-tema-juego {
    margin-bottom: 0;
    display: block;
}

/* escribir ejemplos con feedback */
.miacat-cabecera {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 15px;
}

.miacat-nota-badge {
    background-color: var(--color-ai); /* Tu morado tinto */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nota-numero {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
}

.nota-label {
    font-size: 0.7rem;
    opacity: 0.8;
}

.miacat-seccion {
    margin-bottom: 15px;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    border-left: 4px solid #7a8c61; /* Tu verde */
}

.miacat-seccion h5 {
    margin: 0 0 5px 0;
    color: #5E3047;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.texto-rojo { color: #c0392b; text-decoration: line-through; margin: 0; }
.texto-verde { color: #27ae60; margin: 5px 0 0 0; }
.cita-natural { font-style: italic; color: #555; }

.texto-verde {
    color: var(--color-principal);
}

#cuentaParejas {
    color: var(--color-principal-hover);
    font-size: 1.3em;
}

#resultado-hablado {
    min-height: 60px;
    margin: 20px 0;
    font-style: italic;
    color: #888;
}

#resultado-bonus, #resultado-hablado {
    display: flex;             /* Usamos flex para centrar */
    flex-wrap: wrap;           /* ¡IMPORTANTE! Permite caer a la siguiente línea */
    justify-content: center;   /* Centrado horizontal */
    gap: 5px;                  /* Un pequeño espacio entre palabras */
    overflow-wrap: break-word; /* Seguridad extra para palabras muy largas */
}


/* --- ANIMACIÓN DE CARGA (HUELLITAS) --- */
.loading-huellitas {
    display: inline-flex;
    gap: 8px; /* Espacio entre huellitas */
    align-items: center;
    justify-content: center;
    margin: 10px 0;

    i {
        font-size: 1.5rem; /* Tamaño de la huella */
        opacity: 0; /* Empiezan invisibles */
        animation:
            caminar 2.5s infinite ease-in-out both,  /* El movimiento (rápido) */
            colores-michi 12s infinite linear;
    }

    i:nth-child(1) {
        color: var(--color-frambuesa);
        animation-delay: 0s;
        transform-origin: center bottom;
    }

    i:nth-child(2) {
        color: var(--color-principal-claro);
        animation-delay: 0.4s; /* Espera un poquito */
        transform-origin: center bottom;
    }

    i:nth-child(3) {
        color: var(--color-amarillo); /* Usamos el oscuro para que se vea bien */
        animation-delay: 0.8s; /* Espera un poco más */
        transform-origin: center bottom;
    }
}

    /* --- 1. DEFINIMOS EL ORDEN DE LOS COLORES (TU ARRAY) --- */
    @keyframes colores-michi {
        0%   { color: var(--color-verde); }
        12%  { color: var(--color-frambuesa); }
        25%  { color: var(--color-azul); }       /* El nuevo azul cielo */
        37%  { color: var(--color-menta); }      /* El nuevo menta */
        50%  { color: var(--color-amarillo-oscuro); }
        62%  { color: var(--color-coral); }
        75%  { color: var(--color-morado); }
        87%  { color: var(--color-teal); }
        100% { color: var(--color-verde); }      /* Vuelta al principio */
    }


    /* --- LA COREOGRAFÍA (KEYFRAMES) --- */
    @keyframes caminar {
        0% {
            opacity: 0;
            transform: translateY(5px) scale(0.75) rotate(-20deg);
        }
        30% {
            opacity: 1;
            transform: translateY(0) scale(1.1) rotate(deg); /* ¡Pop! Aparece y crece */
        }
        50% {
            transform: translateY(0) scale(1) rotate(10deg); /* Se asienta */
        }
        80% {
            opacity: 1; /* Se queda visible un momento */
        }
        100% {
            opacity: 0; /* Desaparece para reiniciar el ciclo */
        }
    }

.juego-entrevista {
    #input-respuesta {
        width: calc(100% - 30px);
        border: 2px solid #eee;
        border-radius: 15px; padding: 15px; font-size: 1.1rem;
        font-family: inherit; resize: vertical;
    }
    #btnSiguienteContainer {
        margin-bottom: 60px;
        margin-top: 20px;
    }
    #btn-siguiente-pregunta {
        float: right;
    }

    #texto-pregunta { transition: opacity 0.3s ease; }
    .efecto-borroso { filter: blur(10px); opacity: 0.5; cursor: pointer; transition: 0.3s; user-select: none; }
    .efecto-borroso.revelado { filter: blur(0); opacity: 1; user-select: auto; }
    #feedback-contenido-ia {
        .correcciones {
            li + li {
                margin-top: 8px; font-size: 1rem; border-top: 1px dashed #ffdcdc; padding-top: 8px;
            }
        }
    }
    .boton-audio-grande {
        background-color: var(--color-azul-mas-oscuro); color: white;
        border: none; padding: 15px 30px; border-radius: 50px;
        font-size: 1.2rem; cursor: pointer; transition: 0.2s;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: inline-flex;
        align-items: center; gap: 10px; }
    .boton-audio-grande:hover { transform: scale(1.05);}

    /* Botón Bonus */
    .boton-micro-bonus { width: 60px; height: 60px; border-radius: 50%; background: var(--color-azul-mas-oscuro); color: white; border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.3s; margin-top: 10px; }
    .boton-micro-bonus:hover { transform: scale(1.1); }
    .boton-micro-bonus.escuchando { background: var(--color-frambuesa); animation: latido 1.5s infinite; }
    #intentaDecir {font-size: 1.2em; }
    @keyframes latido { 0% {box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);} 70% {box-shadow: 0 0 0 15px rgba(229, 57, 53, 0);} 100% {box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);} }

}

    #frase-objetivo, #texto-objetivo {
        display: flex;             /* Convierte el contenedor en flexible */
        flex-wrap: wrap;           /* Permite que las palabras salten de línea */
        justify-content: center;   /* Centra las palabras */
        gap: 0.3em;               /* Espacio automático entre palabras (el "whitespace") */

        /* Mantenemos tus estilos base */
        font-size: 1.6rem;
        color: #444;
        margin: 20px 0;
        line-height: 1.4;
    }

    .boton-microfono {
        width: 80px; height: 80px; border-radius: 50%;
        background-color: var(--color-azul-oscuro); color: white; border: none;
        font-size: 2rem; cursor: pointer;
        transition: all 0.3s; box-shadow: 0 5px 15px rgba(111, 160, 212, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .boton-microfono:hover { transform: scale(1.1); background-color: var(--color-azul-mas-oscuro); }
    .boton-microfono.escuchando { background-color: var(--color-frambuesa); animation: pulso-mic 1.5s infinite; }
    .boton-microfono:active, .boton-microfono:focus { outline: none; }
    .boton-microfono:disabled {
        color: var(--color-principal-hover);
        background-color: var(--color-principal-clarito);
        transform: none;
        box-shadow: none;
        cursor: inherit;
    }
    @keyframes pulso-mic {
        0% { box-shadow: 0 0 0 0 rgba(201, 134, 150, 0.7); }
        70% { box-shadow: 0 0 0 20px rgba(201, 134, 150, 0); }
        100% { box-shadow: 0 0 0 0 rgba(201, 134, 150, 0); }
    }