/* Variables CSS para colores y fuentes */
:root {
    --color-background-dark: #222222; /* Gris oscuro suave para fondo de toda la app */
    --color-background-black: #000000; /* Negro puro para ciertas sombras/detalles */
    --color-text-light: #FFFFFF; /* Blanco para texto principal */
    --color-brand-red: #CC0000; /* Rojo de la marca */
    --color-accent-blue: #00BFFF; /* Azul vibrante para acentos y positivo */
    --color-button-background: #F8F8F8; /* Gris muy claro para fondo de botones */
    --color-button-text-dark: #333333; /* Gris oscuro para texto de botones */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;
    --border-radius-buttons: 12px; /* Mayor redondez para botones */
    --spacing-unit: 16px; /* Unidad base para espaciado */
}

/* Estilos Generales */
body {
    font-family: var(--font-secondary);
    background-color: var(--color-background-dark); /* Fondo principal gris oscuro, color sólido */
    color: var(--color-text-light);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el footer se quede abajo */
    overflow-x: hidden; /* Evita scroll horizontal */
}

/* Encabezado Principal */
.main-header {
    background-color: var(--color-background-dark); /* Fondo de la cabecera igual al fondo general para un look más integrado */
    padding: var(--spacing-unit);
    text-align: center; /* Esto centrará elementos inline y block por defecto */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil para darle algo de relieve */
}

.logo-container {
    margin-bottom: var(--spacing-unit) / 2;
}

.logo {
    max-width: 150px; /* Ajusta el tamaño del logo */
    height: auto;
    margin-bottom: 5px;
}

.app-title {
    font-family: var(--font-primary);
    font-size: 2.2em;
    font-weight: 700;
    margin: 10px 0 5px;
    color: var(--color-text-light); /* Cambiado a blanco para suavizar la intensidad */
}

.activity-title {
    font-family: var(--font-primary);
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--color-text-light);
}

/* Contenido Principal */
.main-content {
    flex-grow: 1; /* Permite que el contenido ocupe el espacio disponible */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-unit);
}

.section-instruction {
    font-family: var(--font-primary);
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: var(--spacing-unit) * 3; /* Aún más espaciado entre la instrucción y el primer botón */
    text-align: center;
}

.level-buttons-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit); /* Espacio entre los botones */
    width: 90%; /* Ajusta el ancho de los botones en móvil */
    max-width: 400px; /* Ancho máximo para pantallas más grandes */
}

.level-button {
    background-color: var(--color-button-background);
    color: var(--color-button-text-dark);
    border: none;
    padding: var(--spacing-unit) * 1.8 0; /* Aumentar aún más el padding vertical (altura) de los botones */
    border-radius: var(--border-radius-buttons);
    font-family: var(--font-primary);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra sutil */
    transition: transform 0.2s ease, background-color 0.2s ease; /* Efecto al presionar/hover */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    display: flex; /* Para centrar el texto dentro del enlace */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.level-button:hover {
    transform: translateY(-3px); /* Pequeño levantamiento al pasar el mouse */
    background-color: #E0E0E0; /* Ligeramente más oscuro en hover */
}

.level-button:active {
    transform: translateY(0); /* Vuelve a la posición original al presionar */
    background-color: #D0D0D0; /* Más oscuro al presionar */
}

/* Pie de Página */
.main-footer {
    background-color: var(--color-background-black); /* Fondo negro para el footer */
    color: #AAAAAA; /* Gris suave para el texto del footer */
    font-size: 0.8em;
    text-align: center;
    padding: var(--spacing-unit);
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea sutil */
}

.main-footer p {
    margin: 0;
    line-height: 1.5;
}

.main-footer a {
    color: var(--color-accent-blue); /* Color azul para los enlaces del footer */
    text-decoration: none;
    transition: color 0.2s ease;
}

.main-footer a:hover {
    color: var(--color-text-light); /* Blanco al pasar el mouse por los enlaces */
}

/* Media Queries para Responsividad (ejemplo básico) */
@media (min-width: 768px) {
    .main-header {
        padding: var(--spacing-unit) * 1.5;
    }

    .app-title {
        font-size: 2.8em;
    }

    .activity-title {
        font-size: 1.5em;
    }

    .level-buttons-container {
        width: 70%;
        max-width: 500px; /* Permite que los botones sean un poco más anchos en tablets */
    }

    .level-button {
        font-size: 1.3em;
        padding: var(--spacing-unit) * 2.2 0; /* Aumenta más la altura en tablets */
    }
}

@media (min-width: 1024px) {
    .main-header {
        padding: var(--spacing-unit) * 2;
    }

    .app-title {
        font-size: 3.5em;
    }

    .activity-title {
        font-size: 1.8em;
    }

    .level-buttons-container {
        max-width: 600px; /* Ancho ideal para desktop */
    }

    .level-button {
        font-size: 1.5em;
        padding: var(--spacing-unit) * 2.5 0; /* Aumenta aún más la altura en desktop */
    }
}

/* Estilos para la Pantalla de Ejercicio */

/* Encabezado en pantalla de ejercicio */
.main-header .header-top {
    display: flex;
    align-items: center;
    /* Eliminamos justify-content: space-between; para que el logo se centre */
    padding: 0 var(--spacing-unit); /* Ajustar padding si es necesario */
    position: relative; /* Para posicionar elementos absolutamente si es necesario */
}

.main-header .back-button {
    color: var(--color-text-light);
    font-size: 1.8em;
    text-decoration: none;
    position: absolute; /* Posicionamos el botón de regreso absolutamente */
    left: var(--spacing-unit); /* Lo fijamos a la izquierda */
    top: 50%; /* Lo centramos verticalmente */
    transform: translateY(-50%); /* Ajuste para centrado vertical perfecto */
    transition: color 0.2s ease;
    z-index: 10; /* Aseguramos que esté por encima del logo si se superponen */
}

.main-header .back-button:hover {
    color: var(--color-accent-blue);
}

.main-header .logo-container {
    /* Eliminamos margin-bottom para el logo en la pantalla de ejercicio ya que el header-top lo controla */
    flex-grow: 1; /* Permite que el contenedor del logo ocupe el espacio disponible */
    display: flex; /* Para centrar el logo dentro de su contenedor */
    justify-content: center; /* Centra el logo horizontalmente */
    align-items: center; /* Centra el logo verticalmente (si el logo tuviera altura diferente) */
    width: 100%; /* Asegura que ocupe todo el ancho disponible para centrar */
}

/* Ocultar el lema cuando hay botón de volver */
.main-header .logo-container .motto {
    display: none;
}

.exercise-screen {
    justify-content: flex-start; /* Alinear contenido al inicio de la pantalla */
    padding-top: var(--spacing-unit) * 2; /* Espaciado superior */
}

.level-title {
    font-family: var(--font-primary);
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: var(--spacing-unit) * 1.5;
    text-align: center;
    color: var(--color-text-light);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 400px;
    margin-bottom: var(--spacing-unit);
    font-size: 0.95em;
    color: #AAAAAA; /* Gris suave para contadores */
}

.instructions-button {
    background-color: var(--color-accent-blue);
    color: var(--color-text-light);
    border: none;
    padding: var(--spacing-unit) * 0.8 var(--spacing-unit) * 1.5;
    border-radius: var(--border-radius-buttons);
    font-family: var(--font-secondary);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
    margin-bottom: var(--spacing-unit) * 3; /* Aumentado para separar del botón de reproducir */
}

.instructions-button:hover {
    background-color: #0099CC; /* Azul un poco más oscuro */
}

.play-scale-button {
    background-color: var(--color-brand-red);
    color: var(--color-text-light);
    border: none;
    padding: var(--spacing-unit) var(--spacing-unit) * 2;
    border-radius: var(--border-radius-buttons);
    font-family: var(--font-primary);
    font-size: 1.4em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
    margin-bottom: var(--spacing-unit);
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre icono y texto */
}

.play-scale-button:hover {
    transform: translateY(-3px);
    background-color: #A00000; /* Rojo un poco más oscuro */
}

.play-scale-button:active {
    transform: translateY(0);
    background-color: #800000;
}

.play-instruction {
    font-size: 0.9em;
    color: #CCCCCC;
    margin-top: 0;
    margin-bottom: var(--spacing-unit) * 2;
}

.options-container {
    display: flex; /* Siempre visible */
    flex-direction: column; /* Por defecto apilado */
    gap: var(--spacing-unit);
    width: 90%;
    max-width: 400px;
    margin-bottom: var(--spacing-unit);
}

.options-container.two-options {
    /* No se necesita CSS específico para 2 opciones, ya que el column es el default */
}

/* Estilo base para los botones de opción (Mayor Asc., etc.) */
.option-button {
    background-color: var(--color-button-background);
    color: var(--color-button-text-dark);
    border: none;
    padding: var(--spacing-unit) * 1.2 0; /* Buen padding para altura */
    border-radius: var(--border-radius-buttons);
    font-family: var(--font-secondary);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.option-button:hover:not(:disabled) {
    transform: translateY(-2px);
    background-color: #E8E8E8;
}

.option-button:active:not(:disabled) {
    transform: translateY(0);
    background-color: #D0D0D0;
}

/* Estados de feedback para botones de opción */
.option-button.correct {
    background-color: var(--color-accent-blue);
    color: var(--color-text-light);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.6); /* Resplandor azul */
}

.option-button.incorrect {
    background-color: var(--color-brand-red);
    color: var(--color-text-light);
    box-shadow: 0 0 15px rgba(204, 0, 0, 0.6); /* Resplandor rojo */
}

.option-button:disabled {
    opacity: 0.5; /* Más opaco para indicar que está deshabilitado */
    cursor: not-allowed;
    background-color: #AAAAAA; /* Un gris más oscuro cuando está deshabilitado */
    color: #666666; /* Texto más oscuro */
    box-shadow: none; /* Sin sombra cuando deshabilitado */
}


/* Área de Feedback */
.feedback-area {
    width: 90%;
    max-width: 400px;
    margin-bottom: var(--spacing-unit) * 2;
    text-align: center;
}

.feedback-message {
    font-family: var(--font-primary);
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
    padding: var(--spacing-unit) * 0.8;
    border-radius: var(--border-radius-buttons);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.feedback-message.correct-message {
    color: var(--color-accent-blue);
    /* Puedes añadir un fondo sutil si quieres, ej: background-color: rgba(0, 191, 255, 0.1); */
}

.feedback-message.incorrect-message {
    color: var(--color-brand-red);
    /* Puedes añadir un fondo sutil si quieres, ej: background-color: rgba(204, 0, 0, 0.1); */
}

/* Contenedor de botones de acción (Repetir Nivel, Siguiente) */
.action-buttons-container {
    display: flex;
    flex-direction: column; /* Apilados por defecto */
    gap: var(--spacing-unit);
    width: 90%;
    max-width: 400px;
    margin-top: auto; /* Empuja los botones al final de la pantalla */
    margin-bottom: var(--spacing-unit) * 2; /* Espacio extra antes del footer */
}

.action-button {
    border: none;
    padding: var(--spacing-unit) * 1 0;
    border-radius: var(--border-radius-buttons);
    font-family: var(--font-primary);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.action-button.primary-button {
    background-color: var(--color-brand-red);
    color: var(--color-text-light);
}

.action-button.primary-button:hover {
    background-color: #A00000;
    transform: translateY(-2px);
}

.action-button.primary-button:active {
    background-color: #800000;
    transform: translateY(0);
}

.action-button.outlined-button {
    background-color: transparent;
    color: var(--color-text-light);
    border: 2px solid var(--color-text-light); /* Borde blanco */
}

.action-button.outlined-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.action-button.outlined-button:active {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(0);
}


/* Media Queries para Responsividad en pantalla de Ejercicio */
@media (min-width: 768px) {
    .level-title {
        font-size: 1.6em;
    }

    .progress-info {
        font-size: 1.1em;
        max-width: 500px;
    }

    .instructions-button {
        padding: var(--spacing-unit) * 0.9 var(--spacing-unit) * 1.8;
        font-size: 1.1em;
        margin-bottom: var(--spacing-unit) * 4; /* Más espacio en tablets */
    }

    .play-scale-button {
        font-size: 1.6em;
        padding: var(--spacing-unit) * 1.2 var(--spacing-unit) * 2.5;
    }

    .options-container {
        max-width: 500px;
    }
    
    .option-button {
        font-size: 1.3em;
        padding: var(--spacing-unit) * 1.5 0;
    }

    .feedback-message {
        font-size: 1.8em;
    }

    .action-buttons-container {
        flex-direction: row; /* En fila para tablets y desktop */
        justify-content: center;
        gap: var(--spacing-unit) * 2;
        max-width: 500px;
    }

    .action-button {
        flex: 1; /* Para que ocupen el espacio equitativamente */
        max-width: 200px;
        padding: var(--spacing-unit) * 1.2 0;
        font-size: 1.2em;
    }
}

@media (min-width: 1024px) {
    .level-title {
        font-size: 2em;
    }

    .progress-info {
        max-width: 600px;
    }

    .instructions-button {
        font-size: 1.2em;
        margin-bottom: var(--spacing-unit) * 5; /* Más espacio en desktop */
    }

    .play-scale-button {
        font-size: 1.8em;
    }

    .options-container {
        max-width: 600px;
    }

    .option-button {
        font-size: 1.4em;
        padding: var(--spacing-unit) * 1.8 0;
    }

    .feedback-message {
        font-size: 2em;
    }

    .action-buttons-container {
        max-width: 600px;
    }

    .action-button {
        font-size: 1.3em;
    }
}