/******************
    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
*/
/* ============================================
   CONFIGURACIÓN GENERAL Y FONDO
   ============================================ */
body {
    padding-bottom: 10px;
    background-color: #F5F5F0 !important; /* Fondo hueso de tu código original */
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

/* ============================================
   NAVBAR INSTITUCIONAL (AZUL)
   ============================================ */
.navbar.navbar-expand-md, 
.navbar-default, 
#topsurveymenubar {
    background-color: #2D2D96 !important;
    border: none !important;
    min-height: 60px;
}

/* Texto del Navbar siempre blanco */
.navbar .navbar-brand, 
.navbar .nav-link, 
.navbar .navbar-nav > li > a {
    color: #FFFFFF !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
}

/* ============================================
   BARRA DE PROGRESO
   ============================================ */
.progress {
    height: 21px !important;
    background-color: #e9ecef !important;
    border-radius: 4px;
    margin-bottom: 20px;
}

.progress-bar {
    background-color: #2D2D96 !important;
}


/* ============================================
   CONTENEDOR DE PREGUNTA (BLOQUE AZUL INTEGRADO)
   ============================================ */

/* Eliminar bordes y sombras de la tarjeta de LS6 */
.ls-question-container, 
.card.question-container {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    /*margin-bottom: 2em !important;*/
}

/* Cabecera de la pregunta (Fondo Azul) */
.ls-question-header, 
.card-header, 
.question-title-container{
    background-color: #2D2D96 !important;
    color: #FFFFFF !important;
    padding: 2em 1em !important;
    border: none !important;
    border-radius: 0 !important; /* Cuadrado para pegar con la respuesta */
}

/* Texto de la pregunta y número */
.ls-question-text, 
.ls-question-number, 
.question-title {
    color: #FFFFFF !important;
}

/* Cuerpo de la respuesta (Fondo Blanco) */
.ls-question-body, 
.card-body, 
.answer-container {
    background-color: #ffffff !important;
    border: none !important;
    padding: 3em 1.5em !important;
    margin-top: -1px !important; /* Elimina la línea de separación */
}

/* ============================================
   TABLAS TIPO ARRAY (RESPONSIVAS)
   ============================================ */
.answer-container {
    width: 100% !important;
    overflow-x: auto !important;
}

.table.subquestion-list {
    min-width: 600px !important;
}

/* Quitar asterisco si es necesario */
.asterisk {
    display: none !important;
}

/* ============================================
   AJUSTES DE TITULOS Y TEXTOS
   ============================================ */
#surveynametitle, 
.group-title {
    color: #2D2D96 !important;
    text-align: center;
    font-size: 2.5em;
    margin-top: 20px;
}

#surveydescription {
    color: #2D2D96;
    text-align: center;
    margin-bottom: 20px;
}

/* ============================================
   MENSAJES DE AYUDA Y VALIDACIÓN
   ============================================ */
/* Contenedor de validación (el que se pone verde o rojo) */

.question-valid-container, 
.ls-question-help, 
.help-block {
    background-color: #2d2d96 !important; /* Evita el fondo blanco que rompe el azul */
    border: none !important;
    color: #B9CC14 !important; /* Verde lima/amarillo para validación positiva */
    font-weight: bold !important;
    text-align: center !important;
    padding: 5px 0 15px 0 !important;
}

/* Iconos de advertencia en la ayuda */
.questionvalidcontainer .fa, 
.ls-question-help .fa {
    margin-right: 20px;
}

/* Cuando la respuesta NO es válida (Color naranja/rojo) */
.text-danger, 
.has-error .help-block, 
.ls-question-help.text-danger {
    color: #FF6347 !important; /* Tomate/Naranja como en tu última imagen */
}

/* 4. El bloque de AYUDA/VALIDACIÓN (va al final, debajo de la respuesta) */
.ls-question-help-container,
.question-help-container {
    background-color: #ffffff !important; 
}

 
/* Contenedor principal */
.custom-header-ecuador {
    background-color: #1e2a78 !important; /* El azul oscuro exacto */
    color: #ffffff !important;
    min-height: 80px;
    padding: 0 !important;
    border: none !important;
}

/* Logos y textos de la izquierda */
.header-section-left {
    padding-left: 15px;
}
.logo-ecuador img {
    max-height: 50px;
    filter: brightness(0) invert(1); /* Convierte el logo a blanco si es oscuro */
}
.separator-line {
    width: 1px;
    height: 40px;
    background-color: rgba(255,255,255,0.5);
    margin: 0 15px;
}
.ministerio-text {
    font-size: 0.85rem;
    line-height: 1.1;
    font-weight: 500;
}

/* Título central */
/* Asegura que el contenedor central ocupe el espacio y centre el contenido */
.header-section-center {
    flex-grow: 1;           /* Toma todo el espacio disponible entre los logos y los botones */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    text-align: center;
    /*padding-right: 450px;*/
    
}
.header-section-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 1;
}

.survey-name-text {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.1rem;
    color: white;
    text-transform: uppercase; /* Para que se vea como en tu imagen original */
}

/* Nombre de la encuesta bajo el header (opcional) */
.survey-name-sub {
    color: #2D2D96;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Nombre del Grupo de Preguntas */
.group-name {
    color: #2d2d96;
    font-weight:600;
    text-transform: none; /* O uppercase según prefieras */
    margin-bottom: 15px;
    padding-bottom: 10px;
    /*-bottom: 3px solid #1e2a78;*/
    display: inline-block;
}

.dir-ltr .ls-questionhelp:before
 {
    left: -0.1em;
}



.logo-small {
  max-width: 300px; /* ajusta el ancho máximo */
  height: auto;     /* mantiene proporción */
}


/* Elimina iconos extraños antes del número de pregunta */
.question-number::before, 
.question-title::before {
    content: "" !important;
    display: none !important;
}

/*signo de pregunta */
.ls-questionhelp:before {
    display: none;
}

/* Texto dentro de la descripción */
.group-description {
    padding: 555px;
    font-size: 14px;
    color: #444;              /* tu color institucional */
    line-height: 1.5;
}

/* Contenedor general */
.group-description-container {
    margin-bottom: 2em; 
}

/* Caja que contiene el texto de descripción */
.group-description {
    background-color: #ffffff !important;      /* Blanco limpio */
    padding: 1.5em 2em !important;             /* Padding elegante */
    border: 1px solid #dbdbdb !important;      /* Borde gris suave */
    border-radius: 8px !important;             /* Bordes más redondeados */
    color: #2d2d96 !important;                    /* Color institucional */
    font-size: 15px !important;                
    line-height: 1.6 !important;               /* Fácil lectura */
}

/* =================================================
   BOTONES TIPO LIME (ARREGLO DEFINITIVO)
   ================================================= */

/* SELECCIONADO */
.btn-group .btn.btn-primary.active,
.btn-group .btn.btn-primary:active {
    color: #fff ;              /* TEXTO BLANCO */
    background-color: #2d2d96 !important;
    border-color: #1f3a8a !important;
}

/* HOVER SOLO PARA NO SELECCIONADOS 
.btn-group .btn.btn-primary:not(.active):hover {
    color: #000 !important;
    background-color: #e6e9ff !important;
}*/


.flatly label::after {
    background-color: #2d2d96;
}

/* isnertado*/
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #fff;
    border-color: #212f3c;
}

/* =================================================
   ESTILO DE BOTONES: BLANCO (NORMAL) -> AZUL (ACTIVO)
   ================================================= */

/* 1. Estado Normal: Botón blanco con borde azul y texto negro */
.btn-primary, 
.button-item .btn,
.ls-answers .btn-outline-primary {
    background-color: #ffffff;
    color: #2d2d96;
    border: 2px solid #2d2d96;
    transition: all 0.2s ease-in-out;
}

/* 2. Estado Hover: Azul oscuro al pasar el mouse para dar feedback */
.btn-primary:hover,
.button-item .btn:hover {
    background-color: #f3f3f3 ; /* Un gris/azul muy tenue */
    color: #2d2d96 ;
    border-color: #1e1e6b ;
}

/* 3. Estado Seleccionado / Activo: Fondo azul institucional con texto blanco */
/* Esto aplica cuando el botón está 'checked' (en radios/checkboxes tipo botón) */
.btn-primary.active, 
.btn-primary:active, 
.btn-check:checked + .btn-primary,
.btn-check:checked + label.btn {
    background-color: #2d2d96 !important;
    color: #ffffff ;
    border-color: #2d2d96 ;
    box-shadow: none ;
}

/* 4. Evitar que el texto se oculte o se mueva */
.btn-group .btn {
    text-indent: 0 !important;
    overflow: visible !important;
}





/* =================================================
   COLOR INSTITUCIONAL PARA TÍTULOS Y DESCRIPCIÓN
   ================================================= */

/* Título principal (Encuesta de Satisfacción...) */
h1.text-center, 
.survey-name, 
#surveynametitle {
    color: #2d2d96 !important;
    font-weight: 700 !important;
    margin-top: 30px !important;
    text-transform: none !important; /* Mantener mayúsculas/minúsculas normales */
}

/* Texto de descripción de abajo (Tu opinión es fundamental...) */
.description-text, 
#surveydescription, 
div.text-info.text-center {
    color: #2d2d96 !important;
    font-style: italic !important; /* Mantiene el estilo de tu imagen */
    font-size: 1.1rem !important;
    opacity: 0.9;
    margin-top: 15px !important;
}

/* Opcional: Centrar el logo si fuera necesario */
.site-logo, 
.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}


/* =================================================
   CLASE ESPECIAL: .mis-botones-anchos
   ================================================= */

/* Contenedor principal: lo convertimos en un flexbox que ocupa el 100% */
.mis-botones-anchos .ls-answers {
    display: flex !important;
    flex-direction: row !important; /* Alineación horizontal */
    flex-wrap: wrap !important;     /* Permite bajar si no caben en móviles */
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 0 !important;
}

/* Forzar a que cada ítem de respuesta crezca para llenar el espacio */
.mis-botones-anchos .answer-item {
    flex: 1 1 0px !important; /* El '1' hace que todos midan lo mismo */
    min-width: 120px !important; /* Evita que se aplasten demasiado */
    margin: 0 !important;
}

/* Estilo del botón interno */
.mis-botones-anchos label.btn {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 15px 10px !important; /* Más alto para que se vea mejor */
}

/* Solo para móviles: que se pongan uno debajo de otro si el espacio es poco */
@media (max-width: 576px) {
    .mis-botones-anchos .ls-answers {
        flex-direction: column !important;
    }
    .mis-botones-anchos .answer-item {
        width: 100% !important;
    }
}



/* titulo sin barra*/ 
.contenedor_titulo{
.answer-container {
  background-color: #ffffff !important;
  border: none !important;
  padding: 3em 1.5em !important;
  margin-top: -1px !important;
  display: none;

}
}