/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* 1. Fondo general y tipografía */
body {
    background-color: #f8f9fa !important; /* Gris muy claro de fondo */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
}

/* 2. Contenedor principal de la encuesta */
.outerframe {
    background-color: #ffffff;
    max-width: 900px; /* Centra y limita el ancho como en el sitio ITAM */
    margin: 40px auto;
    padding: 20px;
    border-top: 6px solid #548235; /* Franja verde institucional arriba */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra muy sutil */
}

/* 3. Estilo de los encabezados de pregunta */
.question-text {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

/* 4. Botones verdes estilo ITAM */
.btn-primary, #ls-button-submit {
    background-color: #548235 !important;
    border-color: #4a722e !important;
    border-radius: 4px;
    padding: 10px 25px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #43692a !important;
}

/* 5. Barra de progreso */
.progress-bar {
    background-color: #548235 !important;
}

/* 6. Inputs y campos de texto */
input[type="text"], textarea {
    border: 1px solid #ced4da !important;
    border-radius: 0px !important; /* Bordes rectos más formales */
    padding: 10px !important;
}

input[type="text"]:focus {
    border-color: #548235 !important;
    box-shadow: 0 0 0 0.2rem rgba(84, 130, 53, 0.25);
}

.navbar-brand { display: none; }

/* Ocultar el selector de idioma y su contenedor */
.ls-language-changer, 
.language-changer, 
#language-changer {
    display: none !important;
}

/* Opcional: Ocultar también el botón "Salir y borrar encuesta" si quieres un look más limpio */
.clear-all {
    display: none !important;
}