/******************
    FAD UNAM — LimeSurvey Survey Theme
    Tema base: Fruity TwentyThree
    Archivo: custom.css
******************/

/* ==========================================================
   1. VARIABLES INSTITUCIONALES
========================================================== */

:root {
    --fad-dark: #373538;
    --fad-teal: #136684;
    --fad-cyan: #31cfd3;
    --fad-navy: #234180;
    --fad-orange: #f39719;
    --fad-red: #e41f2a;

    --fad-white: #ffffff;
    --fad-background: #f7f4ec;
    --fad-background-alt: #f1eee6;
    --fad-text: #373538;
    --fad-muted: #6f6c70;
    --fad-border: rgba(55, 53, 56, 0.18);
    --fad-shadow: rgba(55, 53, 56, 0.12);

    --bs-primary: #136684;
    --bs-primary-rgb: 19, 102, 132;

    --bs-secondary: #373538;
    --bs-secondary-rgb: 55, 53, 56;

    --bs-success: #136684;
    --bs-success-rgb: 19, 102, 132;

    --bs-info: #31cfd3;
    --bs-info-rgb: 49, 207, 211;

    --bs-warning: #f39719;
    --bs-warning-rgb: 243, 151, 25;

    --bs-danger: #e41f2a;
    --bs-danger-rgb: 228, 31, 42;

    --bs-dark: #373538;
    --bs-dark-rgb: 55, 53, 56;

    --bs-body-color: #373538;
    --bs-body-bg: #f7f4ec;

    --bs-link-color: #136684;
    --bs-link-hover-color: #f39719;

    --bs-border-color: rgba(55, 53, 56, 0.18);
}


/* ==========================================================
   2. PÁGINA GENERAL Y TIPOGRAFÍA
========================================================== */

html,
body {
    min-height: 100%;
    background-color: var(--fad-background) !important;
    color: var(--fad-text) !important;

    font-family:
        "Source Sans 3",
        "Source Sans Pro",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;
}

body {
    min-height: 100vh;
}

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

#main-col,
.main-col,
.ls-answers,
.survey-welcome,
.survey-end,
.privacy,
.registration,
.token-page {
    color: var(--fad-text) !important;
}

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


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

h1,
h2,
h3,
h4,
h5,
h6,
.survey-name,
.group-title,
.question-title-container,
.question-text,
.ls-question-text,
.ls-heading {
    font-family:
        "Bricolage Grotesque",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;
}

h1,
h2,
.survey-name,
.group-title {
    color: var(--fad-dark) !important;
}

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

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

h3,
.question-title-container,
.question-text,
.ls-question-text,
.ls-heading {
    color: var(--fad-teal) !important;
    font-weight: 750 !important;
}

h4 {
    color: var(--fad-orange) !important;
    font-weight: 750 !important;
}

h5,
h6 {
    color: var(--fad-dark) !important;
    font-weight: 700 !important;
}

.survey-description,
.group-description,
.question-help-container,
.ls-questionhelp,
.ls-question-help,
.help-block,
.form-text {
    color: var(--fad-muted) !important;
}

.text-muted {
    color: rgba(55, 53, 56, 0.68) !important;
}


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

.navbar,
.navbar-default,
.top-container,
.ls-header,
.survey-header {
    background-color: var(--fad-navy) !important;
    border-color: var(--fad-navy) !important;
    box-shadow: 0 3px 12px rgba(35, 65, 128, 0.18) !important;
}

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

.navbar a:hover,
.navbar a:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background-color: var(--fad-teal) !important;
    color: var(--fad-white) !important;
}

.navbar .active > a,
.navbar .nav-link.active,
.navbar .show > .nav-link {
    background-color: var(--fad-teal) !important;
    color: var(--fad-white) !important;
}

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


/* ==========================================================
   5. TARJETAS DE PREGUNTAS
========================================================== */

.question-container,
.ls-question-container,
.group-container,
.survey-welcome,
.survey-end,
.privacy-container {
    background-color: var(--fad-white) !important;
    border: 1px solid var(--fad-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px var(--fad-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(49, 207, 211, 0.78) !important;
}

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


/* ==========================================================
   6. CAMPOS DE TEXTO, FECHA, SELECT Y TEXTAREA
========================================================== */

.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"],
input[type="search"],
textarea,
select {
    min-height: 44px;
    background-color: var(--fad-white) !important;
    color: var(--fad-dark) !important;

    border: 1.5px solid rgba(55, 53, 56, 0.34) !important;
    border-radius: 12px !important;

    box-shadow: none !important;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease !important;
}

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

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

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--fad-teal) !important;
    box-shadow: 0 0 0 0.22rem rgba(49, 207, 211, 0.24) !important;
    outline: none !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: rgba(55, 53, 56, 0.48) !important;
}


/* ==========================================================
   7. INPUT GROUP Y BOTÓN DEL CALENDARIO
========================================================== */

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

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

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


/* ==========================================================
   8. BOTONES PRINCIPALES
========================================================== */

.btn-primary,
.ls-move-next-btn,
.ls-move-submit-btn,
#ls-button-submit,
button[type="submit"],
input[type="submit"] {
    min-height: 44px;
    padding: 10px 24px !important;

    background-color: var(--fad-teal) !important;
    border: 2px solid var(--fad-teal) !important;
    border-radius: 22px !important;

    color: var(--fad-white) !important;
    font-weight: 750 !important;

    box-shadow: 0 4px 11px rgba(19, 102, 132, 0.20) !important;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.ls-move-next-btn:hover,
.ls-move-next-btn:focus,
.ls-move-submit-btn:hover,
.ls-move-submit-btn:focus,
#ls-button-submit:hover,
#ls-button-submit:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: var(--fad-cyan) !important;
    border-color: var(--fad-cyan) !important;
    color: var(--fad-dark) !important;

    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(49, 207, 211, 0.28) !important;
}

.btn-primary:active,
.btn-primary.active,
.ls-move-next-btn:active,
.ls-move-submit-btn:active,
#ls-button-submit:active {
    background-color: #0d5269 !important;
    border-color: #0d5269 !important;
    color: var(--fad-white) !important;
    transform: none !important;
}


/* ==========================================================
   9. BOTÓN ANTERIOR Y SECUNDARIOS
========================================================== */

.btn-secondary,
.btn-outline-secondary,
.ls-move-previous-btn,
.ls-move-index-btn,
.ls-loadall,
.ls-clearall {
    min-height: 44px;
    padding: 9px 22px !important;

    background-color: var(--fad-white) !important;
    border: 2px solid var(--fad-navy) !important;
    border-radius: 22px !important;

    color: var(--fad-navy) !important;
    font-weight: 700 !important;
}

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


/* Botones destructivos */
.btn-danger,
.ls-clearall {
    border-color: var(--fad-red) !important;
    color: var(--fad-red) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.ls-clearall:hover,
.ls-clearall:focus {
    background-color: var(--fad-red) !important;
    border-color: var(--fad-red) !important;
    color: var(--fad-white) !important;
}


/* ==========================================================
   10. BOTONES DESACTIVADOS
========================================================== */

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


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

.form-check-input,
input[type="radio"],
input[type="checkbox"] {
    border-color: rgba(55, 53, 56, 0.55) !important;
    accent-color: var(--fad-teal);
}

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

.form-check-input:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    border-color: var(--fad-cyan) !important;
    box-shadow: 0 0 0 0.22rem rgba(49, 207, 211, 0.25) !important;
}


/* ==========================================================
   12. RESPUESTAS PRESENTADAS COMO BOTONES
========================================================== */

.btn-check + .btn,
.answer-item .btn,
.button-item .btn,
.radio-item label.btn,
.checkbox-item label.btn {
    background-color: var(--fad-white) !important;
    border: 2px solid rgba(55, 53, 56, 0.52) !important;
    border-radius: 12px !important;

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

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

.btn-check + .btn:hover,
.answer-item .btn:hover,
.button-item .btn:hover,
.radio-item label.btn:hover,
.checkbox-item label.btn:hover {
    background-color: rgba(49, 207, 211, 0.16) !important;
    border-color: var(--fad-cyan) !important;
    color: var(--fad-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(--fad-teal) !important;
    border-color: var(--fad-teal) !important;
    color: var(--fad-white) !important;
    font-weight: 750 !important;

    box-shadow: 0 0 0 0.18rem rgba(49, 207, 211, 0.22) !important;
}


/* ==========================================================
   13. ENLACES
========================================================== */

a {
    color: var(--fad-teal) !important;
    text-decoration-color: var(--fad-orange) !important;
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: var(--fad-orange) !important;
    text-decoration-color: var(--fad-cyan) !important;
}

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


/* ==========================================================
   14. BARRA DE PROGRESO
========================================================== */

.progress {
    height: 12px !important;
    background-color: rgba(55, 53, 56, 0.13) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--fad-teal) !important;
    color: var(--fad-white) !important;
    font-weight: 700;
}

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


/* ==========================================================
   15. MENÚ DESPLEGABLE GENERAL
========================================================== */

.dropdown-menu {
    background-color: var(--fad-white) !important;
    border: 1px solid var(--fad-border) !important;
    border-top: 4px solid var(--fad-cyan) !important;
    border-radius: 12px !important;

    box-shadow: 0 9px 24px rgba(55, 53, 56, 0.18) !important;
    overflow: hidden !important;
}

.dropdown-header {
    background-color: var(--fad-background-alt) !important;
    color: var(--fad-dark) !important;
    font-weight: 750 !important;
}

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

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--fad-cyan) !important;
    color: var(--fad-dark) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--fad-teal) !important;
    color: var(--fad-white) !important;
}


/* ==========================================================
   16. MENÚ “OPCIONES DE FORMULARIO”
========================================================== */

#main-dropdown.dropdown-menu {
    min-width: 270px !important;
    padding: 8px 0 !important;

    background-color: var(--fad-white) !important;
    border: 1px solid var(--fad-border) !important;
    border-top: 5px solid var(--fad-cyan) !important;
    border-radius: 12px !important;

    box-shadow: 0 10px 28px rgba(55, 53, 56, 0.22) !important;
    overflow: hidden !important;
}

#main-dropdown .dropdown-header {
    padding: 12px 17px 10px !important;

    background-color: var(--fad-background-alt) !important;
    color: var(--fad-dark) !important;

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

    border-bottom: 1px solid var(--fad-border) !important;
}

#main-dropdown li.nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

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

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

    background-color: var(--fad-white) !important;
    color: var(--fad-dark) !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;
}

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

    background-color: var(--fad-cyan) !important;
    border-left-color: var(--fad-teal) !important;

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

#main-dropdown .nav-link:focus,
#main-dropdown .nav-link:focus-visible {
    background-color: rgba(49, 207, 211, 0.24) !important;
    border-left-color: var(--fad-teal) !important;

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

    box-shadow: inset 0 0 0 2px var(--fad-teal) !important;
    outline: none !important;
}

#main-dropdown .nav-link:active,
#main-dropdown .nav-link.active,
#main-dropdown .nav-item.active .nav-link {
    background-color: var(--fad-teal) !important;
    border-left-color: var(--fad-cyan) !important;

    color: var(--fad-white) !important;
}

#main-dropdown .dropdown-divider {
    margin: 6px 0 !important;
    border-color: var(--fad-border) !important;
}


/* ==========================================================
   17. BOTÓN DE TRES PUNTOS
========================================================== */

#navbar-toggler {
    padding: 7px 10px !important;

    background-color: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;

    color: var(--fad-white) !important;
}

#navbar-toggler:hover,
#navbar-toggler:focus,
#navbar-toggler[aria-expanded="true"] {
    background-color: var(--fad-cyan) !important;
    color: var(--fad-dark) !important;

    box-shadow: none !important;
    outline: none !important;
}


/* ==========================================================
   18. TABLAS Y MATRICES
========================================================== */

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

.table thead th,
.ls-answers table thead th {
    background-color: var(--fad-navy) !important;
    border-color: var(--fad-navy) !important;
    color: var(--fad-white) !important;

    vertical-align: middle;
}

.table tbody tr:nth-child(even),
.ls-answers table tbody tr:nth-child(even) {
    background-color: rgba(49, 207, 211, 0.06) !important;
}

.table tbody tr:hover,
.ls-answers table tbody tr:hover {
    background-color: rgba(49, 207, 211, 0.16) !important;
}

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


/* ==========================================================
   19. ALERTAS Y MENSAJES
========================================================== */

.alert {
    border-radius: 12px !important;
    border-width: 1px !important;
    box-shadow: 0 4px 12px rgba(55, 53, 56, 0.08) !important;
}

.alert-warning {
    background-color: rgba(243, 151, 25, 0.16) !important;
    border-color: var(--fad-orange) !important;
    color: var(--fad-dark) !important;
}

.alert-info {
    background-color: rgba(35, 65, 128, 0.10) !important;
    border-color: var(--fad-navy) !important;
    border-left: 5px solid var(--fad-navy) !important;
    color: var(--fad-navy) !important;
}

.alert-success {
    background-color: rgba(49, 207, 211, 0.14) !important;
    border-color: var(--fad-teal) !important;
    color: var(--fad-dark) !important;
}

.alert-danger,
.ls-question-message,
.em_default,
.error {
    background-color: rgba(228, 31, 42, 0.08) !important;
    border: 2px solid var(--fad-red) !important;
    color: var(--fad-red) !important;
}

.ls-question-message::before,
.alert-danger::before {
    color: var(--fad-red) !important;
}


/* ==========================================================
   20. CAMPOS OBLIGATORIOS
========================================================== */

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


/* ==========================================================
   21. CALENDARIO / DATEPICKER
========================================================== */

.ui-datepicker,
.datepicker,
.datepicker-dropdown {
    background-color: var(--fad-white) !important;
    border: 1px solid var(--fad-border) !important;
    border-radius: 12px !important;

    box-shadow: 0 8px 24px rgba(55, 53, 56, 0.18) !important;
}

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

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

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

.ui-state-highlight,
.datepicker table tr td.today {
    background: rgba(243, 151, 25, 0.22) !important;
    color: var(--fad-dark) !important;
}


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

.navigator,
.navigation-container,
.ls-navigation {
    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid var(--fad-border);
}


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

#welcome-container {
    display: block !important;

    width: calc(100% - 32px) !important;
    max-width: 1080px !important;

    margin: 0 auto !important;
    padding: 30px 24px 50px !important;

    text-align: center !important;
}

#welcome-container .survey-name,
#welcome-container .survey-name h1,
#welcome-container h1.survey-name,
#limesurvey #welcome-container .survey-name {
    width: 100% !important;
    max-width: 1020px !important;

    margin: 0 auto 12px !important;

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

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

    font-size: clamp(1.9rem, 3.2vw, 2.85rem) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.5px !important;

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

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

#welcome-container .survey-name::after,
#limesurvey #welcome-container .survey-name::after {
    content: "";

    display: block;

    width: 88px;
    height: 5px;

    margin: 20px auto 4px !important;

    background-color: var(--fad-cyan);
    border-radius: 20px;
}

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

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

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

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

    font-size: 1.05rem !important;
    font-weight: 650 !important;
    line-height: 1.6 !important;

    text-align: center !important;
}

#welcome-container .survey-welcome,
#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 de instrucciones personalizado */
#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(--fad-white) !important;

    border: 1px solid var(--fad-border) !important;
    border-top: 5px solid var(--fad-cyan) !important;
    border-radius: 16px !important;

    box-shadow: 0 8px 25px var(--fad-shadow) !important;

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

#limesurvey .survey-welcome .panel-heading {
    width: 100% !important;

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

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

    color: var(--fad-teal) !important;

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

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

#limesurvey .survey-welcome .panel-heading + .panel-body,
#limesurvey .survey-welcome .panel-heading + .panel-body3 {
    margin-top: 18px !important;
}

#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;
}


/* Elimina la división 7/5 de Bootstrap */
#limesurvey .survey-welcome .panel-body3 > .row {
    display: block !important;

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

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

#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;
}

#limesurvey .survey-welcome .panel-body3 .col-md-5:empty {
    display: none !important;
}


/* Texto de 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:
        "Source Sans 3",
        "Source Sans Pro",
        "Segoe UI",
        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;
}

#limesurvey .survey-welcome .text-instru p {
    margin: 0 0 18px !important;
}

#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;
}

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

#limesurvey .survey-welcome span[style] {
    font-family: inherit !important;
    font-size: inherit !important;
}


/* ==========================================================
   24. FORMULARIO GENERAL Y CONTENIDO CENTRADO
========================================================== */

#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;
}

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

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

#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 var(--fad-border) !important;
}

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


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

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


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

footer,
.footer,
.ls-footer {
    margin-top: 35px;

    background-color: var(--fad-dark) !important;
    color: var(--fad-white) !important;
}

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

footer a:hover,
.footer a:hover,
.ls-footer a:hover {
    color: var(--fad-orange) !important;
}


/* ==========================================================
   27. SELECCIÓN Y ACCESIBILIDAD
========================================================== */

::selection {
    background-color: var(--fad-cyan);
    color: var(--fad-dark);
}

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


/* ==========================================================
   28. RESPONSIVE
========================================================== */

@media (max-width: 992px) {

    #welcome-container {
        width: calc(100% - 24px) !important;
        padding: 26px 18px 40px !important;
    }

    #limesurvey .survey-welcome .panel-instru {
        padding: 28px 30px !important;
    }
}


@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: 12px !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: 10px;
    }

    #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;
    }

    #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;
    }
}


@media (max-width: 576px) {

    #welcome-container {
        width: 100% !important;
        padding: 22px 12px 35px !important;
    }

    #welcome-container .survey-name,
    #welcome-container .survey-name h1,
    #welcome-container h1.survey-name,
    #limesurvey #welcome-container .survey-name {
        font-size: 1.65rem !important;
        line-height: 1.22 !important;
        letter-spacing: -0.25px !important;
    }

    #limesurvey .survey-welcome .panel-instru {
        padding: 23px 20px !important;
    }
}

/* ==========================================================
   AJUSTE DE TIPOGRAFÍA Y MENSAJES DE VALIDACIÓN
   LIMESURVEY — ENCUESTA FAD
   PEGAR AL FINAL DEL CSS
========================================================== */


/* ==========================================================
   1. TÍTULO PRINCIPAL DE LA SECCIÓN
========================================================== */

#limesurvey .group-title,
#limesurvey .group-name,
#limesurvey .survey-group-name,
#limesurvey .survey-name,
#limesurvey h1 {
    font-size: clamp(1.85rem, 2.7vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
}


/* Descripción debajo del título principal */
#limesurvey .group-description,
#limesurvey .survey-description,
#limesurvey .group-description p {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}


/* ==========================================================
   2. TÍTULO DE CADA PREGUNTA
========================================================== */

#limesurvey .question-container .question-title-container,
#limesurvey .question-container .ls-label-question,
#limesurvey .question-container [id^="ls-question-text-"],
#limesurvey .question-container .question-text {
    font-size: 1.22rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}


/* Evita negritas demasiado pronunciadas dentro del título */
#limesurvey .question-container .question-title-container strong,
#limesurvey .question-container .question-title-container b,
#limesurvey .question-container .ls-label-question strong,
#limesurvey .question-container .ls-label-question b,
#limesurvey .question-container [id^="ls-question-text-"] strong,
#limesurvey .question-container [id^="ls-question-text-"] b {
    font-weight: 600 !important;
}


/* ==========================================================
   3. ASTERISCO OBLIGATORIO AL LADO DE LA PREGUNTA
========================================================== */

#limesurvey .question-container .ls-label-question,
#limesurvey .question-container [id^="ls-question-text-"] {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: baseline !important;
    column-gap: 7px !important;
}


/* Asterisco */
#limesurvey .question-container .asterisk,
#limesurvey .question-container .mandatory,
#limesurvey .question-container .mandatory-star {
    display: inline-block !important;
    position: static !important;
    float: none !important;

    width: auto !important;
    height: auto !important;

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

    color: var(--fad-red, #e41f2a) !important;

    font-size: 1.15rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    vertical-align: baseline !important;
    flex: 0 0 auto !important;
}


/* ==========================================================
   4. TEXTO DE AYUDA O INSTRUCCIÓN
========================================================== */

#limesurvey .question-container .question-help-container,
#limesurvey .question-container .question-help,
#limesurvey .question-container .ls-questionhelp,
#limesurvey .question-container .help-block,
#limesurvey .question-container .form-text {
    margin-top: 7px !important;
    margin-bottom: 10px !important;

    color: var(--fad-muted, #6f6c70) !important;

    font-size: 0.96rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}


/* Reduce negritas pegadas desde el editor */
#limesurvey .question-container .question-help-container strong,
#limesurvey .question-container .question-help-container b,
#limesurvey .question-container .question-help strong,
#limesurvey .question-container .question-help b,
#limesurvey .question-container .ls-questionhelp strong,
#limesurvey .question-container .ls-questionhelp b {
    font-weight: 500 !important;
}


/* ==========================================================
   5. MENSAJE “ELIJA UNA DE LAS SIGUIENTES OPCIONES”
========================================================== */

#limesurvey .question-container .question-valid-container,
#limesurvey .question-container .ls-question-message,
#limesurvey .question-container .ls-em-tip,
#limesurvey .question-container .em_default,
#limesurvey .question-container .alert-danger,
#limesurvey .question-container .text-danger {
    width: auto !important;
    min-height: 0 !important;

    margin: 7px 0 12px !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: rgba(228, 31, 42, 0.72) !important;

    font-size: 0.9rem !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.4 !important;

    box-shadow: none !important;
}


/* Elementos internos del mensaje */
#limesurvey .question-container .question-valid-container *,
#limesurvey .question-container .ls-question-message *,
#limesurvey .question-container .ls-em-tip *,
#limesurvey .question-container .em_default *,
#limesurvey .question-container .alert-danger *,
#limesurvey .question-container .text-danger * {
    margin: 0 !important;
    padding: 0 !important;

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

    color: inherit !important;

    font-size: inherit !important;
    font-weight: 400 !important;
    font-style: normal !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. AJUSTE PARA CELULARES
========================================================== */

@media (max-width: 576px) {

    #limesurvey .group-title,
    #limesurvey .group-name,
    #limesurvey .survey-group-name,
    #limesurvey .survey-name,
    #limesurvey h1 {
        font-size: 1.75rem !important;
    }

    #limesurvey .question-container .question-title-container,
    #limesurvey .question-container .ls-label-question,
    #limesurvey .question-container [id^="ls-question-text-"],
    #limesurvey .question-container .question-text {
        font-size: 1.1rem !important;
    }

}