/* =========================================
   TEMA RAINBOW COMPLETO - LIMESURVEY
   ========================================= */

/* 1. FONDO ANIMADO ARCOÍRIS */
body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. BARRA DE PROGRESO MULTICOLOR */
.progress-bar {
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff) !important;
}

/* 3. CONTENEDOR DE PREGUNTAS (Efecto cristal/nube) */
#outerframeContainer, 
.surveydescription, 
.group-container, 
.well {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    border: none !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.15) !important;
    margin-bottom: 20px;
}

/* 4. BOTONES VIBRANTES */
.btn-primary, 
.button, 
.submit,
#ls-button-submit {
    background: #e73c7e !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 25px !important;
    font-weight: bold !important;
    transition: transform 0.2s ease;
}

.btn-primary:hover {
    transform: scale(1.05); /* Efecto de aumento al pasar el mouse */
    background: #23a6d5 !important;
}

/* 5. FOOTER ARCOÍRIS ANIMADO */
footer, 
.footer {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
    background-size: 400% 400% !important;
    animation: gradient 15s ease infinite !important;
    color: white !important;
    padding: 30px 0 !important;
    margin-top: 40px !important;
    border-top: 4px solid rgba(255,255,255,0.3) !important;
}

/* Estilo para los enlaces dentro del footer */
footer a, 
.footer a,
footer span,
.footer span {
    color: white !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* 6. AJUSTES DE TEXTO PARA LECTURA */
.question-text, .answertext {
    color: #333 !important; /* Asegura que las preguntas se lean bien sobre el blanco */
}