/*******************************************
    Custom CSS — Versión fusionada y limpia
*******************************************/

/* =========================================
   1. VARIABLES GLOBALES
   ========================================= */
:root {
    --color-primary:          #A83125;
    --color-primary-hover:    #CA0201;
    --color-primary-light:    #FFDDDD;
    --color-primary-text:     #212121;

    --color-accent:           #099bb0;
    --color-accent-hover:     #53b9c8;
    --color-accent-light:     #f0f9fa;

    --color-bg:               #f9f9f9;
    --color-surface:          #f9f9f9;
    --color-surface-alt:      #fae6f0;

    --color-text:             #111111;
    --color-text-muted:       #d1d1d1;
    --color-text-subtle:      #767476;

    --color-border:           #DDDDDD;
    --color-border-focus:     #940000;

    --color-success:          #1aaa55;
    --color-success-light:    #f2fff7;

    --color-error:            #A83125;
    --color-error-light:      #fdf1f1;

    --color-warning:          #fb6418;
    --color-warning-light:    #fff5ef;

    --radius-sm:  0.375rem;
    --radius-md:  0.75rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;

    --shadow-card: 0 4px 24px 0 #21212114;
}


/* =========================================
   2. BASE
   ========================================= */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    word-break: auto-phrase;
    font-family: Inter, sans-serif;
}

body * { margin:0; padding:0;}

/* =========================================
   3. BOTONES PRINCIPALES
   ========================================= */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color:     var(--color-primary) !important;
    color:            #ffffff !important;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--color-primary-hover) !important;
    border-color:     var(--color-primary-hover) !important;
    color:            #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(254, 0, 0, 0.2) !important;
}


/* =========================================
   4. BOTÓN SECUNDARIO / OUTLINE
   (botón "Anterior" y pop-up de validación)
   ========================================= */
.btn-outline-secondary,
.btn.btn-outline-secondary,
.btn-outline-secondary.ls-move-previous-btn {
    background-color: #ffffff !important;
    border-color:     var(--color-primary) !important;
    color:            var(--color-primary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus,
.btn.btn-outline-secondary:active,
.btn-outline-secondary.ls-move-previous-btn:hover,
.btn-outline-secondary.ls-move-previous-btn:focus,
.btn-outline-secondary.ls-move-previous-btn:active {
    background-color: var(--color-primary) !important;
    border-color:     var(--color-primary) !important;
    color:            #ffffff !important;
}


/* =========================================
   5. TEXTOS
   ========================================= */
.text-primary {
    color: var(--color-text) !important;
}

.text-info {
    color: #000000 !important;
}


/* =========================================
   6. BARRA DE PROGRESO
   ========================================= */
.progress-bar {
    background-color: var(--color-primary) !important;
    color:            #ffffff !important;
    flex-direction:   column;
    justify-content:  center;
    text-align:       center;
    transition:       width .6s ease;
    white-space:      nowrap;
}


/* =========================================
   7. CONTENEDOR DE PREGUNTA
   ========================================= */
.question-container {
    border:        1px solid var(--color-border) !important;
    border-radius: 4px !important;
    padding:       16px !important;
    margin-bottom: 16px !important;
    background-color: #ffffff;
    padding-top:   1rem;
    padding-bottom: 1rem;
}

/* Boilerplate (texto introductorio / separador) */
.row.boilerplate.question-container {
    border:        0px !important;
    margin-bottom: 0px !important;
    margin-top:    25px !important;
    padding:       0px !important;
    font-size:     1.5em;
    background-color: transparent;
}

/* Sin borde en el área de respuesta */
.answer-container.col-12 {
    border: 0px;
}

/* =========================================
   8. CABECERA DE PREGUNTA
   ========================================= */
.question-title-container {
    background-color: transparent !important;
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    font-size:      1.1rem;
}

/* Cuando la cabecera tiene la clase bg-primary (fondo azul → blanco) */
.question-title-container.bg-primary,
.question-valid-container.bg-primary {
    background-color: transparent !important;
}

/* Texto de la cabecera sobre fondo blanco */
.question-title-container.bg-primary .question-text,
.question-title-container.bg-primary label {
    color: #333333 !important;
}

.question-valid-container {
    background-color: transparent !important;
}


/* =========================================
   9. INPUTS — CHECKBOX Y RADIO
   ========================================= */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
}

/* Checkbox sin marcar */
input[type="checkbox"] + label.checkbox-label.control-label::before,
input[type="checkbox"] + label.control-label.checkbox-label::before {
    border-color:     var(--color-primary) !important;
    background:       #ffffff !important;
    box-shadow:       none !important;
}

/* Checkbox marcado */
input[type="checkbox"]:checked + label.checkbox-label.control-label::before,
input[type="checkbox"]:checked + label.control-label.checkbox-label::before {
    border-color:     var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

input[type="checkbox"]:checked + label.checkbox-label.control-label::after,
input[type="checkbox"]:checked + label.control-label.checkbox-label::after {
    color:      #ffffff !important;
    background: transparent !important;
}

/* Radio sin marcar */
input[type="radio"] + label.radio-label.control-label::before,
input[type="radio"] + label.control-label.radio-label::before {
    border-color: var(--color-primary) !important;
    background:   #ffffff !important;
}

/* Radio marcado */
input[type="radio"]:checked + label.radio-label.control-label::before,
input[type="radio"]:checked + label.control-label.radio-label::before {
    border-color: var(--color-primary) !important;
}

input[type="radio"]:checked + label.radio-label.control-label::after,
input[type="radio"]:checked + label.control-label.radio-label::after {
    background-color: var(--color-primary) !important;
}

/* Focus en checkbox y radio */
input[type="checkbox"]:focus + label::before,
input[type="radio"]:focus + label::before {
    border-color: var(--color-border-focus) !important;
    box-shadow:   0 0 0 0.2rem rgba(254, 0, 0, 0.2) !important;
}

/* Hover en checkbox y radio */
input[type="checkbox"] + label:hover::before,
input[type="radio"] + label:hover::before {
    border-color: var(--color-primary-hover) !important;
}


/* =========================================
   10. FORM CONTROLS (input, textarea, select)
   ========================================= */
.form-control:focus {
    background-color: #ffffff;
    border-color:     var(--color-border-focus);
    box-shadow:       0 0 0 0.25rem rgba(254, 0, 0, 0.25);
    color:            var(--color-text);
    outline:          0;
}

select:focus {
    border-color: var(--color-border-focus) !important;
    box-shadow:   0 0 0 3px rgba(254, 0, 0, 0.25) !important;
}

select option:checked {
    background-color: var(--color-primary) !important;
    color:            #ffffff !important;
}

select option:hover {
    background-color: var(--color-primary-hover) !important;
    color:            #ffffff !important;
}

textarea:focus {
    border-color: var(--color-border-focus) !important;
    box-shadow:   0 0 0 3px rgba(254, 0, 0, 0.25) !important;
}

/* Sin padding extra en área de texto libre */
.ls-answers.answer-item.text-item {
    padding: 0px;
}
/* sin margenes extra en los inputs */
.ls-answers.answer-item {
    margin-bottom: 0px !important;
}
/* =========================================
   11. LINKS
   ========================================= */
a,
.btn-link {
    color: var(--color-primary);
}

a:hover,
.btn-link:hover {
    color: var(--color-primary-hover);
}


/* =========================================
   12. ELEMENTOS ESPECÍFICOS DE LIMESURVEY
   ========================================= */

/* Asterisco obligatorio */
.fa-asterisk.text-danger {
    color:        #E2004F !important;
    font-size:    0.5em !important;
    margin-right: 2px !important;
}

/* Tip "Seleccione una de las siguientes opciones" */
.ls-em-tip {
    color:      var(--color-primary) !important;
    text-align: left !important;
    font-size:  0.95em;
}

/* Símbolo de ayuda (?) */
.ls-questionhelp {
    color:         var(--color-primary) !important;
    margin-left:   16.5px !important;
    margin-bottom: 0px !important;
}

/* Texto obligatorio */
.ls-question-mandatory.ls-question-mandatory-initial.text-danger {
    text-align: left !important;
}

/* Ocultar contacto del survey */
.survey-contact {
    display: none !important;
}


/* =========================================
   13. CONTENEDORES DE LAYOUT
   ========================================= */

/* Contenedor principal del survey */
.outerframe {
    max-width:    800px;
    margin-left:  auto;
    margin-right: auto;
}

/* Contenedor exterior del grupo de preguntas */
.group-outer-container {
    max-width:    960px;
    margin-left:  auto;
    margin-right: auto;
}


/* =========================================
   14. PREGUNTAS CON ENCABEZADO FLOTANTE
   (question94 y question97)
   ========================================= */
:is(#question94, #question97) {
    position:   relative;
    margin-top: 70px;
}

:is(#question94, #question97)::before {
    width:       fit-content;
    position:    absolute;
    top:         -38px;
    left:        0;
    font-family: Inter, sans-serif;
    font-size:   16px;
    font-weight: 400;
}

/* Textos en español */
.lang-es #question94::before {
    content: 'Actuaciones prioritarias en materia de digitalización';
}
.lang-es #question97::before {
    content: 'De los anteriores recursos/herramientas, indique los 3 prioritarios';
}

/* Textos en euskera */
.lang-eu #question94::before {
    content: 'Digitalizazioaren arloko lehentasunezko jarduketak';
}
.lang-eu #question97::before {
    content: 'Aurreko baliabide/tresnetatik, adierazi lehentasunezko 3ak';
}


/* =========================================
   15. IMÁGENES
   ========================================= */
.aktibatuImg {
    display:   block;
    max-width: 100%;
    height:    auto;
}

.avisoLegal {
    max-width: 100%;
    height:    auto;
}


/* =========================================
   16. PREGUNTA TIPO TEXTO (label centrado)
   ========================================= */
#ls-question-text-469965X22X279.ls-label-question {
    text-align: center;
}

#ls-question-text-469965X22X279.ls-label-question a {
    display: inline-block;
}


/* =========================================
   17. RESPONSIVE — MÓVIL (≤768px)
   ========================================= */
@media (max-width: 768px) {

    html,
    body {
        width:      100% !important;
        max-width:  100% !important;
        overflow-x: hidden !important;
    }

    /* Encabezado flotante: más espacio en móvil */
    :is(#question94, #question97)::before {
        top: -62px;
    }

    .outerframe {
        width:        100% !important;
        max-width:    100% !important;
        min-width:    0 !important;
        margin-left:  auto !important;
        margin-right: auto !important;
        box-sizing:   border-box !important;
    }

    .container,
    .container-fluid,
    .row,
    .question-container,
    .question-title-container,
    .question-valid-container,
    .ls-label-question {
        width:      100% !important;
        max-width:  100% !important;
        min-width:  0 !important;
        box-sizing: border-box !important;
    }

    .ls-label-question p,
    .ls-label-question div,
    .ls-label-question a {
        width:      100% !important;
        max-width:  100% !important;
        min-width:  0 !important;
        box-sizing: border-box !important;
    }

    .ls-label-question img,
    .aktibatuImg,
    .avisoLegal {
        display:    block !important;
        width:      100% !important;
        max-width:  100% !important;
        min-width:  0 !important;
        height:     auto !important;
        object-fit: contain !important;
    }

    .question-title-container.bg-primary.col-12 {
        background-color: transparent !important;
        margin-bottom: 5px;
    } 

    .ls-answers.answer-item.text-item {
        margin-top: 10px;
    }
}