/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff; /* Fondo blanco */
    color: #333;
    /* Reintroducimos el padding para que no se pegue a los bordes de la ventana */
    padding: 30px; 
    
    /* ❌ ELIMINAR O COMENTAR estas líneas de Flexbox en el body: */
    /* display: flex; */
    /* line-height: 1.6; */
    /* width: 100%; */
    /* align-items: center; */
    /* padding-left: 0; */
    /* padding-right: 0; */
    
    line-height: 1.6; /* Mantener solo las propiedades relevantes */
}

h1 {
    text-align: center;
    font-size: 2rem;
    color: #0a5c8c;
    margin-bottom: 30px;
}

form {
    background-color: #fff;
    max-width: 600px;
    margin: 0 auto 20px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

form label {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

form textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: vertical;
    margin-bottom: 15px;
}


#respuesta {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-size: 1.1rem;
    color: #2c3e50;
}

audio {
    display: block;
    margin: 20px auto 0;
    width: 100%;
    max-width: 500px;
}

@media (max-width: 700px) {
    body {
        padding: 20px;
    }

    form, #respuesta {
        padding: 15px;
    }

    h1 {
        font-size: 1.5rem;
    }

    form textarea {
        height: 80px;
    }
}
/* Estilo para centrar el contenido principal */
.main-wrapper {
    /* Define el ancho máximo que deseas para tu contenido centrado */
    max-width: 1000px; 
    
    /* Centra el contenedor horizontalmente */
    margin: 0 auto; 
    
    /* Si el body tiene padding, este contenedor también lo tendrá */
    padding: 0; 
}










/* 1. ESTILO BASE CORREGIDO: Define las propiedades de tamaño y transición para ambos */
form button {
    padding: 12px 25px; 
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    margin-right: 10px; 
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    
    /* 🔑 FIX: Establecemos un background-color inicial por defecto (el mismo color que el de Enviar) */
    background-color: #007bff; /* Color que tendrán por defecto si no se sobreescribe */
    color: #fff;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}










/* 2. BOTÓN DE ENVIAR (SÓLIDO) */
form button:first-of-type {
    background-color: #007bff; 
    color: #fff;
    border: none;
    /* Mantiene el box-shadow base */
}

form button:first-of-type:hover {
    background-color: #0056b3; 
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}







/* 3. BOTÓN DE HABLAR (GHOST/OUTLINE) */
form #btnHablar {
    background-color: transparent; /* Fondo transparente */
    color: #007bff; /* Texto azul */
    border: 2px solid #007bff; /* Borde azul */
    box-shadow: none; /* Quitamos la sombra de la base para el ghost */
}

form #btnHablar:hover {
    background-color: #e9f5ff; /* Fondo blanco azulado suave */
    color: #0056b3;
    border-color: #0056b3;
}









/* 4. ESTADO ACTIVO (SOBRESCRIBE TODO) */
.btn-escuchando {
    background-color: #ff7f50 !important; 
    color: #fff !important; 
    border: 2px solid #ff7f50 !important; 
    box-shadow: 0 0 10px rgba(255, 127, 80, 0.7) !important; 
}

.btn-escuchando:hover {
    background-color: #e66738 !important; 
    border-color: #e66738 !important;
}