/******************
    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
*/
/* Prueba inicial del tema Grupo Imelda */

/* =========================================
   TEMA GRUPO IMELDA
   Colores institucionales iniciales
========================================= */

/* ==========================================================
   TEMA INSTITUCIONAL – GRUPO IMELDA
   LimeSurvey 6 / Fruity TwentyThree

   Amarillo principal: #fed136
   Amarillo secundario: #f1c30f
   Negro institucional: #212529
========================================================== */


/* ==========================================================
   1. VARIABLES GENERALES
========================================================== */

:root {
    --imelda-yellow: #fed136;
    --imelda-yellow-dark: #f1c30f;
    --imelda-dark: #212529;

    --imelda-white: #ffffff;
    --imelda-background: #f6f7f8;
    --imelda-border: rgba(33, 37, 41, 0.18);
    --imelda-shadow: rgba(33, 37, 41, 0.10);

    --bs-primary: #fed136;
    --bs-primary-rgb: 254, 209, 54;

    --bs-secondary: #212529;
    --bs-secondary-rgb: 33, 37, 41;

    --bs-body-color: #212529;
    --bs-body-bg: #f6f7f8;

    --bs-link-color: #212529;
    --bs-link-hover-color: #212529;

    --bs-border-color: rgba(33, 37, 41, 0.18);
}


/* ==========================================================
   2. PÁGINA GENERAL
========================================================== */

html,
body {
    background-color: var(--imelda-background) !important;
    color: var(--imelda-dark) !important;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    min-height: 100vh;
}

#outerframeContainer,
.outerframe,
.survey-container,
.fruity {
    background-color: var(--imelda-background) !important;
}


/* ==========================================================
   3. CONTENEDOR PRINCIPAL
========================================================== */

#main-col,
.main-col,
.ls-answers,
.survey-welcome,
.survey-end,
.privacy,
.registration,
.token-page {
    color: var(--imelda-dark);
}

#main-col,
.main-col {
    padding-top: 25px;
    padding-bottom: 40px;
}


/* ==========================================================
   4. TÍTULOS Y TEXTOS
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.survey-name,
.group-title,
.question-title-container,
.question-text,
.ls-question-text,
.ls-heading {
    color: var(--imelda-dark) !important;
}

h1,
.survey-name {
    font-weight: 800 !important;
    letter-spacing: -0.6px;
}

h2,
.group-title {
    font-weight: 750 !important;
}

.question-title-container,
.question-text,
.ls-question-text {
    font-weight: 700;
}

.survey-description,
.group-description,
.question-help-container,
.ls-questionhelp,
.ls-question-help,
.help-block,
.form-text {
    color: rgba(33, 37, 41, 0.72) !important;
}

.text-muted {
    color: rgba(33, 37, 41, 0.65) !important;
}


/* ==========================================================
   5. ENCABEZADO DE LA ENCUESTA
========================================================== */

.navbar,
.navbar-default,
.top-container,
.ls-header,
.survey-header {
    background-color: var(--imelda-dark) !important;
    border-color: var(--imelda-dark) !important;
}

.navbar a,
.navbar .navbar-brand,
.navbar .navbar-text,
.navbar-default a,
.ls-header a {
    color: var(--imelda-white) !important;
}

.navbar a:hover,
.navbar a:focus {
    color: var(--imelda-yellow) !important;
}

.navbar-brand img,
.logo-container img,
.survey-logo img {
    max-height: 65px;
    width: auto;
}


/* ==========================================================
   6. TARJETAS DE PREGUNTAS
========================================================== */

.question-container,
.ls-question-container,
.group-container,
.survey-welcome,
.survey-end,
.privacy-container {
    background-color: var(--imelda-white) !important;
    border: 1px solid var(--imelda-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 18px var(--imelda-shadow) !important;
}

.question-container,
.ls-question-container {
    padding: 25px !important;
    margin-bottom: 24px !important;
}

.group-container {
    padding: 18px 22px;
    margin-bottom: 25px;
}

.question-container:hover,
.ls-question-container:hover {
    border-color: rgba(254, 209, 54, 0.75) !important;
}


/* Franja superior amarilla en cada pregunta */

.question-container::before,
.ls-question-container::before {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 20px;
    background-color: var(--imelda-yellow);
}


/* ==========================================================
   7. CAMPOS DE TEXTO, FECHA Y NÚMEROS
========================================================== */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background-color: var(--imelda-white) !important;
    color: var(--imelda-dark) !important;
    border: 1.5px solid rgba(33, 37, 41, 0.42) !important;
    border-radius: 8px !important;
    min-height: 44px;
    box-shadow: none !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

textarea.form-control,
textarea {
    min-height: 110px;
}

.form-control:hover,
.form-select:hover,
input:hover,
textarea:hover,
select:hover {
    border-color: var(--imelda-dark) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--imelda-yellow-dark) !important;
    box-shadow: 0 0 0 0.22rem rgba(254, 209, 54, 0.30) !important;
    outline: none !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: rgba(33, 37, 41, 0.50) !important;
}


/* ==========================================================
   8. BOTÓN DEL CALENDARIO E INPUT GROUP
========================================================== */

.input-group-text,
.input-group-addon {
    background-color: var(--imelda-yellow) !important;
    border-color: var(--imelda-yellow-dark) !important;
    color: var(--imelda-dark) !important;
}

.input-group .btn,
.datepicker-button,
.datepicker-trigger,
button[data-bs-toggle="datepicker"] {
    background-color: var(--imelda-yellow) !important;
    border-color: var(--imelda-yellow-dark) !important;
    color: var(--imelda-dark) !important;
}

.input-group .btn:hover,
.datepicker-button:hover,
.datepicker-trigger:hover {
    background-color: var(--imelda-yellow-dark) !important;
    border-color: var(--imelda-yellow-dark) !important;
    color: var(--imelda-dark) !important;
}


/* ==========================================================
   9. BOTONES PRINCIPALES
========================================================== */

.btn-primary,
.ls-move-next-btn,
.ls-move-submit-btn,
#ls-button-submit,
button[type="submit"],
input[type="submit"] {
    background-color: var(--imelda-yellow) !important;
    border: 2px solid var(--imelda-yellow) !important;
    color: var(--imelda-dark) !important;
    font-weight: 750 !important;
    border-radius: 9px !important;
    min-height: 44px;
    padding: 10px 24px !important;
    box-shadow: 0 4px 10px rgba(33, 37, 41, 0.12);
    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.ls-move-next-btn:hover,
.ls-move-next-btn:focus,
.ls-move-submit-btn:hover,
#ls-button-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--imelda-yellow-dark) !important;
    border-color: var(--imelda-yellow-dark) !important;
    color: var(--imelda-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(33, 37, 41, 0.18) !important;
}


/* ==========================================================
   10. BOTÓN ANTERIOR Y BOTONES SECUNDARIOS
========================================================== */

.btn-secondary,
.btn-outline-secondary,
.ls-move-previous-btn,
.ls-move-index-btn {
    background-color: var(--imelda-white) !important;
    border: 2px solid var(--imelda-dark) !important;
    color: var(--imelda-dark) !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    min-height: 44px;
    padding: 9px 22px !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.ls-move-previous-btn:hover,
.ls-move-index-btn:hover {
    background-color: var(--imelda-dark) !important;
    border-color: var(--imelda-dark) !important;
    color: var(--imelda-white) !important;
}


/* ==========================================================
   11. BOTONES DESACTIVADOS
========================================================== */

.btn:disabled,
.btn.disabled,
button:disabled,
input:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}


/* ==========================================================
   12. RADIO BUTTONS Y CHECKBOXES
========================================================== */

.form-check-input,
input[type="radio"],
input[type="checkbox"] {
    border-color: rgba(33, 37, 41, 0.55) !important;
    accent-color: var(--imelda-yellow-dark);
}

.form-check-input:checked,
input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--imelda-yellow) !important;
    border-color: var(--imelda-dark) !important;
}

.form-check-input:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    border-color: var(--imelda-yellow-dark) !important;
    box-shadow: 0 0 0 0.22rem rgba(254, 209, 54, 0.30) !important;
}


/* ==========================================================
   13. RESPUESTAS PRESENTADAS COMO BOTONES
   Ejemplo: Mujer / Hombre
========================================================== */

.btn-check + .btn,
.answer-item .btn,
.button-item .btn,
.radio-item label.btn,
.checkbox-item label.btn {
    background-color: var(--imelda-white) !important;
    border: 2px solid rgba(33, 37, 41, 0.60) !important;
    color: var(--imelda-dark) !important;
    border-radius: 9px !important;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.btn-check + .btn:hover,
.answer-item .btn:hover,
.button-item .btn:hover {
    background-color: rgba(254, 209, 54, 0.20) !important;
    border-color: var(--imelda-yellow-dark) !important;
    color: var(--imelda-dark) !important;
}

.btn-check:checked + .btn,
.btn-check:active + .btn,
.answer-item input:checked + label.btn,
.button-item input:checked + label.btn,
.radio-item input:checked + label,
.checkbox-item input:checked + label {
    background-color: var(--imelda-yellow) !important;
    border-color: var(--imelda-dark) !important;
    color: var(--imelda-dark) !important;
    font-weight: 750 !important;
    box-shadow: 0 0 0 0.18rem rgba(254, 209, 54, 0.25) !important;
}


/* ==========================================================
   14. ENLACES
========================================================== */

a {
    color: var(--imelda-dark) !important;
    text-decoration-color: var(--imelda-yellow-dark);
}

a:hover,
a:focus {
    color: var(--imelda-dark) !important;
    text-decoration-color: var(--imelda-yellow);
}

.question-container a,
.survey-welcome a {
    font-weight: 650;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}


/* ==========================================================
   15. BARRA DE PROGRESO
========================================================== */

.progress {
    height: 12px !important;
    background-color: rgba(33, 37, 41, 0.14) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--imelda-yellow) !important;
    color: var(--imelda-dark) !important;
    font-weight: 700;
}

.progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.22) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.22) 75%,
        transparent 75%,
        transparent
    ) !important;
}


/* ==========================================================
   16. MENÚ DESPLEGABLE
========================================================== */

.dropdown-menu {
    background-color: var(--imelda-white) !important;
    border: 1px solid var(--imelda-border) !important;
    border-radius: 9px !important;
    box-shadow: 0 8px 22px rgba(33, 37, 41, 0.15) !important;
}

.dropdown-item {
    color: var(--imelda-dark) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--imelda-yellow) !important;
    color: var(--imelda-dark) !important;
}


/* ==========================================================
   17. TABLAS Y PREGUNTAS TIPO MATRIZ
========================================================== */

.table,
.ls-answers table,
.array-flexible-row,
.array-flexible-column {
    color: var(--imelda-dark) !important;
    border-color: var(--imelda-border) !important;
}

.table thead th,
.ls-answers table thead th {
    background-color: var(--imelda-dark) !important;
    color: var(--imelda-white) !important;
    border-color: var(--imelda-dark) !important;
    vertical-align: middle;
}

.table tbody tr:nth-child(even),
.ls-answers table tbody tr:nth-child(even) {
    background-color: rgba(254, 209, 54, 0.08) !important;
}

.table tbody tr:hover,
.ls-answers table tbody tr:hover {
    background-color: rgba(254, 209, 54, 0.18) !important;
}

.table td,
.table th,
.ls-answers table td,
.ls-answers table th {
    border-color: var(--imelda-border) !important;
}


/* ==========================================================
   18. ALERTAS Y MENSAJES
========================================================== */

.alert {
    border-radius: 10px !important;
    border-width: 1px !important;
}

.alert-warning {
    background-color: var(--imelda-yellow) !important;
    border-color: var(--imelda-yellow-dark) !important;
    color: var(--imelda-dark) !important;
}

.alert-info {
    background-color: var(--imelda-white) !important;
    border-left: 5px solid var(--imelda-yellow) !important;
    color: var(--imelda-dark) !important;
}

.alert-success {
    background-color: var(--imelda-white) !important;
    border: 2px solid var(--imelda-yellow-dark) !important;
    color: var(--imelda-dark) !important;
}

.alert-danger,
.ls-question-message,
.em_default,
.error {
    background-color: var(--imelda-white) !important;
    border: 2px solid var(--imelda-dark) !important;
    color: var(--imelda-dark) !important;
}

.ls-question-message::before,
.alert-danger::before {
    color: var(--imelda-yellow-dark) !important;
}


/* ==========================================================
   19. CAMPOS OBLIGATORIOS
========================================================== */

.asterisk,
.mandatory,
.required,
.text-danger {
    color: var(--imelda-dark) !important;
    font-weight: 800 !important;
}

.asterisk::after {
    color: var(--imelda-yellow-dark);
}


/* ==========================================================
   20. CALENDARIO / DATEPICKER
========================================================== */

.ui-datepicker,
.datepicker,
.datepicker-dropdown {
    background-color: var(--imelda-white) !important;
    border: 1px solid var(--imelda-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(33, 37, 41, 0.18) !important;
}

.ui-datepicker-header,
.datepicker-days thead,
.datepicker table thead {
    background-color: var(--imelda-dark) !important;
    color: var(--imelda-white) !important;
}

.ui-datepicker-title,
.ui-datepicker-prev,
.ui-datepicker-next {
    color: var(--imelda-white) !important;
}

.ui-state-active,
.ui-datepicker-current-day a,
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background: var(--imelda-yellow) !important;
    border-color: var(--imelda-yellow-dark) !important;
    color: var(--imelda-dark) !important;
}

.ui-state-highlight,
.datepicker table tr td.today {
    background: rgba(254, 209, 54, 0.35) !important;
    color: var(--imelda-dark) !important;
}


/* ==========================================================
   21. NAVEGACIÓN INFERIOR
========================================================== */

.navigator,
.navigation-container,
.ls-navigation {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--imelda-border);
}


/* ==========================================================
   22. PÁGINA DE BIENVENIDA
========================================================== */

.survey-welcome {
    padding: 32px !important;
    border-top: 6px solid var(--imelda-yellow) !important;
}

.survey-welcome h1,
.survey-welcome h2 {
    margin-bottom: 20px;
}

.survey-welcome .survey-description {
    font-size: 1.05rem;
    line-height: 1.7;
}


/* ==========================================================
   23. POLÍTICA DE PRIVACIDAD
========================================================== */

.privacy,
.privacy-container,
.privacy-policy {
    background-color: var(--imelda-white) !important;
    border-left: 5px solid var(--imelda-yellow) !important;
    color: var(--imelda-dark) !important;
}


/* ==========================================================
   24. PIE DE PÁGINA
========================================================== */

footer,
.footer,
.ls-footer {
    background-color: var(--imelda-dark) !important;
    color: var(--imelda-white) !important;
    margin-top: 35px;
}

footer a,
.footer a,
.ls-footer a {
    color: var(--imelda-yellow) !important;
}


/* ==========================================================
   25. SELECCIÓN DE TEXTO
========================================================== */

::selection {
    background-color: var(--imelda-yellow);
    color: var(--imelda-dark);
}


/* ==========================================================
   26. ACCESIBILIDAD Y FOCO
========================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--imelda-yellow-dark) !important;
    outline-offset: 3px !important;
}


/* ==========================================================
   27. AJUSTES PARA CELULAR
========================================================== */

@media (max-width: 768px) {

    #main-col,
    .main-col {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .question-container,
    .ls-question-container {
        padding: 18px !important;
        border-radius: 11px !important;
    }

    h1,
    .survey-name {
        font-size: 1.85rem !important;
    }

    h2,
    .group-title {
        font-size: 1.45rem !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-outline-secondary,
    .ls-move-next-btn,
    .ls-move-previous-btn,
    .ls-move-submit-btn {
        width: 100%;
        margin-top: 7px;
    }

    .navigator,
    .navigation-container,
    .ls-navigation {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .table-responsive {
        border-radius: 8px;
    }

}


/* ==========================================================
   MENÚ DESPLEGABLE: OPCIONES DE FORMULARIO
========================================================== */

/* Contenedor general del menú */
#main-dropdown.dropdown-menu {
    min-width: 270px !important;
    padding: 8px 0 !important;
    background-color: #ffffff !important;

    border: 1px solid rgba(33, 37, 41, 0.14) !important;
    border-top: 5px solid #fed136 !important;
    border-radius: 10px !important;

    box-shadow: 0 10px 28px rgba(33, 37, 41, 0.22) !important;
    overflow: hidden !important;
}

/* Encabezado: OPCIONES DE FORMULARIO */
#main-dropdown .dropdown-header {
    padding: 12px 17px 10px !important;

    background-color: #ffffff !important;
    color: #212529 !important;

    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;

    border-bottom: 1px solid rgba(33, 37, 41, 0.10) !important;
}

/* Elementos de la lista */
#main-dropdown li.nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Enlace normal */
#main-dropdown .nav-link {
    display: block !important;
    width: 100% !important;

    padding: 13px 18px !important;
    margin: 0 !important;

    background-color: #ffffff !important;
    color: #212529 !important;

    font-size: 0.95rem !important;
    font-weight: 650 !important;
    text-decoration: none !important;

    border: 0 !important;
    border-left: 4px solid transparent !important;
    border-radius: 0 !important;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        padding-left 0.18s ease !important;
}

/* Hover amarillo */
#main-dropdown .nav-link:hover {
    background-color: #fed136 !important;
    color: #212529 !important;
    border-left-color: #212529 !important;
    padding-left: 23px !important;
}

/* Foco por teclado */
#main-dropdown .nav-link:focus,
#main-dropdown .nav-link:focus-visible {
    background-color: #f1c30f !important;
    color: #212529 !important;

    border-left-color: #212529 !important;
    box-shadow: inset 0 0 0 2px #212529 !important;
    outline: none !important;
}

/* Al presionar o cuando esté activo */
#main-dropdown .nav-link:active,
#main-dropdown .nav-link.active,
#main-dropdown .nav-item.active .nav-link {
    background-color: #212529 !important;
    color: #fed136 !important;
    border-left-color: #fed136 !important;
}

/* Elimina cualquier verde heredado de LimeSurvey */
#main-dropdown .nav-link:hover,
#main-dropdown .nav-link:focus,
#main-dropdown .nav-link:active {
    text-decoration: none !important;
}

/* Separadores, por si aparecen más opciones */
#main-dropdown .dropdown-divider {
    margin: 6px 0 !important;
    border-color: rgba(33, 37, 41, 0.12) !important;
}


/* ==========================================================
   BOTÓN DE LOS TRES PUNTOS
========================================================== */

#navbar-toggler {
    color: #ffffff !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    padding: 7px 10px !important;
}

#navbar-toggler:hover,
#navbar-toggler:focus {
    color: #212529 !important;
    background-color: #fed136 !important;
    box-shadow: none !important;
    outline: none !important;
}

#navbar-toggler[aria-expanded="true"] {
    color: #212529 !important;
    background-color: #fed136 !important;
}


/* Ajuste para celular */
@media (max-width: 768px) {

    #main-dropdown.dropdown-menu {
        min-width: 250px !important;
        max-width: calc(100vw - 28px) !important;
    }

    #main-dropdown .nav-link {
        padding: 14px 17px !important;
    }

    #main-dropdown .nav-link:hover {
        padding-left: 21px !important;
    }
}


/* ==========================================================
   BIENVENIDA COMPLETA Y CENTRADA
   GRUPO IMELDA
========================================================== */

:root {
    --imelda-yellow: #fed136;
    --imelda-yellow-hover: #f1c30f;
    --imelda-dark: #212529;
    --imelda-text: #41464b;
    --imelda-muted: #697078;
    --imelda-white: #ffffff;
    --imelda-background: #f5f6f7;
}


/* ==========================================================
   FORMULARIO GENERAL
========================================================== */

#limesurvey.survey-form-container {
    display: block !important;
    width: 100% !important;
    max-width: 1180px !important;

    margin: 0 auto !important;
    padding: 25px 30px 55px !important;

    background-color: transparent !important;
}


/* Contenedores principales */
#limesurvey #welcome-container,
#limesurvey .privacy,
#limesurvey #navigator-container {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   TÍTULO DE LA ENCUESTA
========================================================== */

#limesurvey #welcome-container .survey-name {
    display: block !important;

    width: 100% !important;
    max-width: 1050px !important;

    margin: 15px auto 12px !important;

    color: #343a40 !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.5px !important;

    text-align: center !important;
    text-transform: none !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}


/* Línea amarilla debajo del título */
#limesurvey #welcome-container .survey-name::after {
    content: "";

    display: block;

    width: 85px;
    height: 5px;

    margin: 22px auto 0 !important;

    background-color: var(--imelda-yellow);
    border-radius: 20px;
}


/* ==========================================================
   DESCRIPCIÓN: GUÍA I, GUÍA II, ETC.
========================================================== */

#limesurvey #welcome-container .survey-description {
    width: 100% !important;
    max-width: 1000px !important;

    margin: 12px auto 22px !important;
    padding: 0 !important;

    color: var(--imelda-muted) !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 1.05rem !important;
    font-weight: 600 !important;

    text-align: center !important;
}


/* ==========================================================
   TARJETA COMPLETA DE INSTRUCCIONES
========================================================== */

#limesurvey #welcome-container .survey-welcome {
    display: block !important;

    width: 100% !important;
    max-width: 1000px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    text-align: left !important;
}


/* Panel principal */
#limesurvey .survey-welcome .panel-instru {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 30px 38px 34px !important;

    background-color: var(--imelda-white) !important;

    border: 1px solid rgba(33, 37, 41, 0.14) !important;
    border-top: 5px solid var(--imelda-yellow) !important;
    border-radius: 15px !important;

    box-shadow: 0 8px 25px rgba(33, 37, 41, 0.10) !important;

    color: var(--imelda-text) !important;
}


/* Títulos del panel */
#limesurvey .survey-welcome .panel-heading {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;

    color: var(--imelda-dark) !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}


/* Separación después del último encabezado */
#limesurvey .survey-welcome .panel-heading + .panel-body,
#limesurvey .survey-welcome .panel-heading + .panel-body3 {
    margin-top: 18px !important;
}


/* Cuerpo del panel */
#limesurvey .survey-welcome .panel-body,
#limesurvey .survey-welcome .panel-body3 {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   ELIMINAR LA DIVISIÓN 7/5 DE BOOTSTRAP
========================================================== */

/* Fila que contiene las dos columnas */
#limesurvey .survey-welcome .panel-body3 > .row {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Columna que contiene el texto: ahora ocupa el 100% */
#limesurvey .survey-welcome .panel-body3 .col-md-7.text-instru {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Oculta la columna vacía */
#limesurvey .survey-welcome .panel-body3 .col-md-5:empty {
    display: none !important;
}


/* ==========================================================
   TEXTO DE LAS INSTRUCCIONES
========================================================== */

#limesurvey .survey-welcome .text-instru,
#limesurvey .survey-welcome .text-instru p,
#limesurvey .survey-welcome .text-instru ul,
#limesurvey .survey-welcome .text-instru ol,
#limesurvey .survey-welcome .text-instru li,
#limesurvey .survey-welcome .text-instru span,
#limesurvey .survey-welcome .text-instru strong,
#limesurvey .survey-welcome .text-instru b {
    max-width: 100% !important;

    color: inherit !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 1.03rem !important;
    line-height: 1.65 !important;

    text-align: left !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
}


/* Párrafos */
#limesurvey .survey-welcome .text-instru p {
    margin: 0 0 18px !important;
}


/* Listas */
#limesurvey .survey-welcome .text-instru ul,
#limesurvey .survey-welcome .text-instru ol {
    margin: 18px 0 22px !important;
    padding-left: 28px !important;
}

#limesurvey .survey-welcome .text-instru li {
    margin-bottom: 10px !important;
    padding-left: 5px !important;
}


/* Textos importantes */
#limesurvey .survey-welcome .text-instru strong,
#limesurvey .survey-welcome .text-instru b {
    color: var(--imelda-dark) !important;
    font-weight: 700 !important;
}


/* Correo o textos pegados desde Word */
#limesurvey .survey-welcome span[style] {
    font-family: inherit !important;
    font-size: inherit !important;
}


/* ==========================================================
   BOTÓN SIGUIENTE
========================================================== */

#limesurvey #navigator-container {
    display: flex !important;
    align-items: center !important;

    max-width: 1000px !important;

    margin-top: 25px !important;
    padding-top: 22px !important;

    border-top: 1px solid rgba(33, 37, 41, 0.12) !important;
}

#limesurvey #navigator-container .col-6 {
    flex: 1 1 50% !important;
    max-width: 50% !important;
}

#limesurvey #ls-button-submit {
    min-width: 170px !important;
    min-height: 48px !important;

    padding: 10px 28px !important;

    background-color: var(--imelda-dark) !important;
    border: 2px solid var(--imelda-dark) !important;
    border-radius: 9px !important;

    color: var(--imelda-white) !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 1rem !important;
    font-weight: 700 !important;
}

#limesurvey #ls-button-submit:hover,
#limesurvey #ls-button-submit:focus {
    background-color: var(--imelda-yellow) !important;
    border-color: var(--imelda-yellow) !important;

    color: var(--imelda-dark) !important;
}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 768px) {

    #limesurvey.survey-form-container {
        padding: 20px 14px 40px !important;
    }

    #limesurvey #welcome-container .survey-name {
        font-size: 1.85rem !important;
        line-height: 1.22 !important;
    }

    #limesurvey .survey-welcome .panel-instru {
        padding: 24px 21px 28px !important;
        border-radius: 12px !important;
    }

    #limesurvey .survey-welcome .text-instru,
    #limesurvey .survey-welcome .text-instru p,
    #limesurvey .survey-welcome .text-instru li,
    #limesurvey .survey-welcome .text-instru span {
        font-size: 1rem !important;
        line-height: 1.58 !important;
    }

    #limesurvey #navigator-container {
        display: block !important;
    }

    #limesurvey #navigator-container .col-6 {
        width: 100% !important;
        max-width: 100% !important;
    }

    #limesurvey #ls-button-submit {
        width: 100% !important;
        margin-top: 8px !important;
    }
}

footer#surveyListFooter {
    display: none;
}


/*Texto de preguntas*/
.question-title-container {
    display: flex;
    align-items: flex-start;
}

.question-container .ls-label-question {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.asterisk, .mandatory, .required, .text-danger {
    color: #ed5757 !important;
    font-weight: 500 !important;
    font-size: 13px;
}

.survey-description, .group-description, .question-help-container, .ls-questionhelp, .ls-question-help, .help-block, .form-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.ls-answers .ls-heading th, .ls-answers th {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 20px;
}

@media only screen and (max-width: 767px) {
    .no-tables-mobile table.ls-answers .radio-item .ls-label-xs-visibility, .no-tables-mobile table.ls-answers .checkbox-item .ls-label-xs-visibility {
	margin-left: 0;
	font-size: 14px;

    }
}

@media only screen and (max-width: 767px) {
    .no-tables-mobile table.ls-answers .radio-item label.ls-label-xs-visibility::before, .no-tables-mobile table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
        margin-top: -3px;
    }
}

i.asterisk.ri-asterisk{
    margin-top: -3px;
    font-weight: 600;
}

.alert-danger, .ls-question-message, .em_default, .error {
    background-color: var(--imelda-white) !important;
    border: 0px solid #ffffff !important;
    color: rgba(33, 37, 41, 0.72) !important;
    font-size: 12px !important;
}

.form-control{
        font-size: 12px!important;
}