/* ==========================================================================
   ENCCI — FORM
   Filtros de Views + Webforms + objetivos estratégicos relacionados
   --------------------------------------------------------------------------
   Los valores de identidad visual proceden de variables.css.
   ========================================================================== */

/* ==========================================================================
   ENCCI — FORM
   Filtros de Views + Webforms + objetivos estratégicos relacionados
   --------------------------------------------------------------------------
   Los valores de identidad visual proceden de variables.css.
   No redefine .container globalmente.
   ========================================================================== */

/*==================================================
FILTROS ENCCI
==================================================*/

.views-exposed-form {

    background: var(--encci-white);

    border: 1px solid var(--encci-primary-light);

    border-radius: 18px;

    padding: 2rem;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);

    position: sticky;

    top: 7rem;
}

.views-exposed-form::before {

    display: block;

    font-size: 1.45rem;

    font-weight: 700;

    color: var(--encci-text);

    margin-bottom: .25rem;

}

.views-exposed-form.block-views-exposed-filter-blockmedidas-block-1::before {

    content: "Filtrar medidas";
}

.views-exposed-form .container {

    max-width: 100%;

    padding: 0;

}

.views-exposed-form .form-item {

    margin-bottom: 1.75rem;

}

.views-exposed-form .description {

    margin-top: .45rem;

    color: var(--encci-text-light);

    font-size: .84rem;

}

.views-exposed-form label {

    display: block;

    margin-bottom: .6rem;

    font-size: .95rem;

    font-weight: 700;

    color: var(--encci-primary-verydark);

}

.views-exposed-form input[type=text] {

    border-radius: 14px;

    border: 1px solid var(--encci-border);

    height: 54px;

    padding: 0 1rem;

    font-size: 1rem;

    transition: .25s;

    box-shadow: none;

}

.views-exposed-form input[type=text]:focus {

    border-color: var(--encci-primary-dark);

    box-shadow: 0 0 0 .25rem rgba(0, 90, 141, .15);

}

.views-exposed-form select {

    border-radius: 14px;

    border: 1px solid var(--encci-border);

    height: 54px;

    font-size: 1rem;

    transition: .25s;

}

.views-exposed-form select:focus {

    border-color: var(--encci-primary-dark);

    box-shadow: 0 0 0 .25rem rgba(0, 90, 141, .15);

}

/* ==========================================================================
   ACCIONES DEL FILTRO
   --------------------------------------------------------------------------
   Bootstrap/Drupal aplica float a los elementos de .form--inline.
   Las acciones deben salir de ese flujo y ocupar únicamente el panel.
   ========================================================================== */

.views-exposed-form .form--inline .form-actions {

    clear: both;

    float: none;

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    align-items: center;

    gap: .75rem;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    margin: 1.5rem 0 0;

    padding: 0;

    box-sizing: border-box;

}

.views-exposed-form .form--inline .form-actions > input {

    float: none;

    position: static;

    box-sizing: border-box;

    min-width: 0;

    margin: 0;

}

#edit-submit-medidas,
#edit-submit-taxonomias--2 {

    width: 100%;

    max-width: 100%;

    height: 48px;

    padding: 0 1.1rem;

    border-radius: 999px;

    background: var(--encci-primary);

    color: var(--encci-text);

    border: 0;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    box-shadow: none;

    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}

#edit-submit-medidas:hover,
#edit-submit-taxonomias--2:hover {

    background: var(--encci-primary-dark);

    color: var(--encci-white);

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(90, 174, 184, .35);

}

#edit-reset-medidas,
#edit-reset-taxonomias--2 {

    width: auto;
    min-width: 100px;
    max-width: 100%;

    height: 48px;

    padding: 0 .25rem;

    background: transparent;

    color: var(--encci-primary-dark);

    border: 0;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    box-shadow: none;

}

#edit-reset-medidas:hover,
#edit-reset-taxonomias--2:hover {

    color: var(--encci-primary-verydark);

    text-decoration: underline;

}

@media (max-width:575.98px) {

    .views-exposed-form .form--inline .form-actions {

        grid-template-columns: 1fr;

    }

    #edit-submit-medidas,
    #edit-submit-taxonomias--2,
    #edit-reset-medidas,
    #edit-reset-taxonomias--2 {

        width: 100%;

    }

}

@media (max-width:992px) {

    .views-exposed-form {

        position: static;

        margin-bottom: 2rem;

    }

}


/*==================================================
FORMULARIOS WEBFORM
==================================================*/



/* =========================================================
   ENCCI — Webform progress tracker
   ========================================================= */

.webform-progress-tracker {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

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

    margin: 0 auto 45px;
    padding: 0 10px;

    list-style: none;
}


/* =========================================================
   PASOS
   ========================================================= */

.webform-progress-tracker .progress-step {
    position: relative;

    flex: 1 1 0;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* =========================================================
   LÍNEA ENTRE PASOS
   ========================================================= */

.webform-progress-tracker .progress-step:not(:last-child)::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 18px;
    left: 50%;

    width: 100%;
    height: 2px;

    background: var(--encci-border);
}


/* Línea de los pasos completados */

.webform-progress-tracker .progress-step.is-complete:not(:last-child)::after {
    background: var(--encci-primary);
}

.webform-progress-tracker .progress-step.is-complete .progress-marker::before,
.webform-progress-tracker .progress-step.is-complete:hover .progress-marker::before,
.webform-progress-tracker .progress-step.is-complete .progress-marker::after {
    background-color: var(--encci-primary-verydark);
}

.progress-step .progress-marker::before {
    background-color: var(--encci-white);
    width: 38px;
    height: 38px;
}

/* =========================================================
   MARCADOR
   ========================================================= */

.webform-progress-tracker .progress-marker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    box-sizing: border-box;
    border: 2px solid var(--encci-disabled);
    border-radius: 50%;
    background: var(--encci-white);
    color: var(--encci-disabled);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}


/*
 * IMPORTANTE:
 * Webform ya genera el número a partir de data-text.
 * No añadimos ::before ni ::after.
 */


/* =========================================================
   PASO ACTIVO
   ========================================================= */

.webform-progress-tracker .progress-step.is-active .progress-marker {
    border-color: var(--encci-primary);
    background: var(--encci-white);
    color: var(--encci-primary-verydark);
    /* box-shadow: 0 0 0 5px rgb(159 215 222 / 0%); */
}

.webform-progress-tracker .progress-step.is-active:hover .progress-marker::before,
.webform-progress-tracker .progress-step.is-active .progress-marker::before {
    background-color: var(--encci-white);
}


/* =========================================================
   PASOS COMPLETADOS
   ========================================================= */

.webform-progress-tracker .progress-step.is-complete .progress-marker {
    border-color: var(--encci-primary-verydark);
    background: var(--encci-primary-verydark);
    color: var(--encci-white);
}


/* =========================================================
   TEXTO
   ========================================================= */

.webform-progress-tracker .progress-text {
    padding: 0 8px;
}


.webform-progress-tracker .progress-title {
    color: var(--encci-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
}


/* Activo */

.webform-progress-tracker .progress-step.is-active .progress-title {
    color: var(--encci-primary-verydark);
    font-weight: 700;
}


/* Completado */

.webform-progress-tracker .progress-step.is-complete .progress-title {
    color: var(--encci-primary-verydark);
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .webform-progress-tracker {
        margin-bottom: 35px;
        padding: 0;
    }

    .webform-progress-tracker .progress-marker {
        width: 32px;
        height: 32px;

        margin-bottom: 8px;

        font-size: 13px;
    }

    .webform-progress-tracker .progress-step:not(:last-child)::after {
        top: 16px;
    }

    .webform-progress-tracker .progress-title {
        padding: 0 3px;
        font-size: 11px;
    }
}


@media (max-width: 480px) {

    .webform-progress-tracker {
        margin-bottom: 30px;
    }

    .webform-progress-tracker .progress-marker {
        width: 28px;
        height: 28px;

        font-size: 11px;
    }

    .webform-progress-tracker .progress-step:not(:last-child)::after {
        top: 14px;
    }

    .webform-progress-tracker .progress-title {
        font-size: 10px;
        line-height: 1.2;
    }
}

/* =========================================================
   ENCCI - Anular elementos gráficos nativos del marker
   ========================================================= */

/* La librería progress-tracker utiliza pseudo-elementos
   propios del marcador. Los anulamos para controlar
   completamente nuestro diseño. */

.webform-progress-tracker .progress-marker::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   Línea ENCCI
   ========================================================= */

.webform-progress-tracker .progress-step:not(:last-child)::after {
    content: "" !important;

    display: block !important;

    position: absolute;
    z-index: 0;

    top: 17px;
    left: 50%;

    width: 100%;
    height: 2px;

    margin: 0;

    background: var(--encci-border) !important;

    transform: none;
}


/* Línea de pasos completados */

.webform-progress-tracker .progress-step.is-complete:not(:last-child)::after {
    background: var(--encci-primary) !important;
}






/* =========================================================
   ENCCI — Recuadro principal del Webform
   ========================================================= */

.encci-webform-page {
    max-width: 1050px;
    margin: 0 auto 50px;
    padding: 45px 55px 50px;

    background: var(--encci-surface);

    border: 1px solid var(--encci-border);
    border-radius: 18px;

    box-shadow:
        0 4px 18px rgba(21, 63, 74, 0.06);
}


/* =========================================================
   Título de la página
   ========================================================= */

.encci-webform-page legend {
    /* margin-bottom: 35px; */
    padding: 0;
    border: 0;
}


.encci-webform-page legend .fieldset-legend,
.encci-webform-page .js-webform-type-textarea label,
.encci-webform-page .webform-type-webform-likert > label {
    display: block;
    margin-bottom: 20px;
    color: var(--encci-primary-verydark);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}


.encci-form h2 {
    font-family: var(--logo-family);
    font-size: 2rem;
    margin-bottom: 35px;
    color: var(--encci-text);
}

/* =========================================================
   Preguntas
   ========================================================= */

.encci-webform-page .fieldset-wrapper > fieldset {
    margin: 0 0 30px;
    padding: 0;

    border: 0;
}


/* Título de cada pregunta */
.encci-webform-page .fieldset-wrapper > fieldset > legend > .fieldset-legend {
    color: var(--encci-primary-verydark);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}


/* =========================================================
   Opciones
   ========================================================= */

.encci-webform-page .form-check {
    margin-bottom: 7px;
}


.encci-webform-page .form-check-label {
    color: var(--encci-text);
    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   Texto informativo final
   ========================================================= */

.encci-webform-page {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--encci-border);
    color: var(--encci-text-light);
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {

    .encci-webform-page {
        margin: 0 15px 35px;
        padding: 30px 22px 35px;

        border-radius: 14px;
    }

    .encci-webform-page legend {
        margin-bottom: 28px;
    }

    .encci-webform-page legend.fieldset-legend {
        font-size: 24px;
    }

    .encci-webform-page .form-check-label {
        font-size: 14px;
    }
}



.encci-webform-page .webform-type-processed-text a {
    color: var(--encci-primary-dark);
    font-weight: 600;
    text-decoration: underline;
}

.encci-webform-page .webform-type-processed-text a:hover {
    color: var(--encci-primary-verydark);
}


/* =========================================================
   2. PREGUNTAS LIKERT
   ========================================================= */

.encci-webform-page .webform-type-webform-likert {
    margin-top: 35px;
    padding-top: 30px;
    /* border-top: 1px solid var(--encci-border); */
}


/* =========================================================
   3. TABLAS LIKERT
   ========================================================= */

.encci-webform-page .webform-likert-table-wrapper {
    overflow-x: auto;

    border: 1px solid var(--encci-border);
    border-radius: 12px;

    background: var(--encci-white);
}


/* Tabla */
table.sticky-header thead {
    top: 0 !important;
}

.encci-webform-page .webform-likert-table {
    width: 100%;
    margin: 0;

    border-collapse: collapse;
}


/* Cabecera */

.encci-webform-page .webform-likert-table thead th {
    padding: 14px 10px;

    background: var(--encci-surface-blue);

    color: var(--encci-primary-verydark);

    font-size: 13px;
    font-weight: 700;

    text-align: center;

    border-bottom: 1px solid var(--encci-border);
}


/* Primera columna */

.encci-webform-page .webform-likert-table thead th:first-child {
    width: 45%;
    text-align: left;
}


/* Filas */

.encci-webform-page .webform-likert-table tbody tr {
    border-bottom: 1px solid var(--encci-border);
}

.encci-webform-page .webform-likert-table tbody tr:last-child {
    /* border-bottom: 0; */
}


/* Pregunta */

.encci-webform-page .webform-likert-table tbody td:first-child {
    padding: 18px 16px;

    color: var(--encci-text);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;

    text-align: left;
}


/* Celdas de respuesta */

.encci-webform-page .webform-likert-table tbody td:not(:first-child) {
    width: 11%;
    padding: 12px 6px;

    text-align: center;
    vertical-align: middle;
}

/* =========================================================
   ENCCI — LIKERT RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    /* El wrapper deja de comportarse como una tabla desplazable */
    .encci-webform-page .webform-likert-table-wrapper {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    /* La tabla se convierte en un conjunto de tarjetas */
    .encci-webform-page .webform-likert-table {
        display: block;
        width: 100%;
    }

    /* Ocultamos la cabecera de columnas */
    .encci-webform-page .webform-likert-table thead {
        display: none;
    }

    /* Cada pregunta = una tarjeta */
    .encci-webform-page .webform-likert-table tbody {
        display: block;
        width: 100%;
    }

    .encci-webform-page .webform-likert-table tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 1.25rem;
        padding: 0;

        background: var(--encci-white);

        border: 1px solid var(--encci-border);
        border-radius: 14px;

        overflow: hidden;
    }

    /* -----------------------------------------------------
       PREGUNTA
       ----------------------------------------------------- */

    .encci-webform-page .webform-likert-table tbody td:first-child {
        display: block;
        width: 100% !important;

        padding: 1rem 1rem .85rem;

        background: var(--encci-surface-blue);

        border-bottom: 1px solid var(--encci-border);

        font-size: 15px;
        font-weight: 600;
        line-height: 1.45;
    }

    /* -----------------------------------------------------
       OPCIONES
       ----------------------------------------------------- */

    .encci-webform-page .webform-likert-table tbody td:not(:first-child) {
        display: block;
        width: 100% !important;

        min-height: 52px;

        padding: 0;

        text-align: left;

        border-bottom: 1px solid var(--encci-border);
    }

    .encci-webform-page .webform-likert-table tbody td:last-child {
        border-bottom: 0;
    }

    /* -----------------------------------------------------
       LABEL DE CADA OPCIÓN
       ----------------------------------------------------- */

    .encci-webform-page .webform-likert-table tbody td:not(:first-child) .form-check {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 52px;

        margin: 0;
        padding: .75rem 1rem;

        cursor: pointer;
    }

    .encci-webform-page .webform-likert-table tbody td:not(:first-child)
    .form-check-label {
        display: flex;
        align-items: center;

        width: 100%;
        margin: 0;
        padding: 0;

        cursor: pointer;

        font-size: 14px;
        line-height: 1.35;
        color: var(--encci-text);
    }

    /* -----------------------------------------------------
       HACEMOS VISIBLE EL TEXTO QUE WEBFORM OCULTA
       ----------------------------------------------------- */

    .encci-webform-page .webform-likert-table
    .webform-likert-label.visually-hidden {
        position: static !important;

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

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

        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;

        white-space: normal !important;

        color: var(--encci-text);
        font-size: 14px;
        font-weight: 400;
    }

    /* -----------------------------------------------------
       RADIO
       ----------------------------------------------------- */

    .encci-webform-page .webform-likert-table
    .form-check-input {
        flex: 0 0 auto;

        width: 20px;
        height: 20px;

        margin: 0 .75rem 0 0 !important;

        cursor: pointer;
    }

    /* Estado seleccionado */
    .encci-webform-page .webform-likert-table
    .form-check-input:checked {
        accent-color: var(--encci-primary-dark);
    }

    /* Feedback visual al tocar una opción */
    .encci-webform-page .webform-likert-table
    .form-check:has(.form-check-input:checked) {
        background: var(--encci-surface-primary);
    }

}
/* =========================================================
   4. RADIO BUTTONS
   ========================================================= */

.encci-webform-page .webform-likert-table .form-check {
    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
}


.encci-webform-page .webform-likert-table .form-check-input {
    width: 19px;
    height: 19px;

    margin: 0;

    cursor: pointer;
}






/* ==========================================================
   ENCCI — OBJETIVOS ESTRATÉGICOS
========================================================== */
.encci-objectives {
    border-top: 1px solid var(--encci-border);
    padding: 40px 0;
    background: white;
}

/* ==========================================================
   ÁMBITOS
========================================================== */

.encci-objectives__areas {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 4rem;

    margin-top: 2.5rem;
}


/* ==========================================================
   ÁMBITO
========================================================== */

.encci-objective-area__intro {

    display: grid;

    grid-template-columns: 96px 1fr;

    gap: 1.5rem;

    align-items: start;
}

/* ==========================================================
   TÍTULOS
========================================================== */

.encci-objective-area h3 {

    margin: 0 0 .55rem;

    font-family: var(--title-family);

    font-size: 1.75rem;
    line-height: 1.2;

    font-weight: 800;

    color: var(--encci-text);
}

/* ==========================================================
   DESCRIPCIÓN
========================================================== */




/* ==========================================================
   LISTA DE OBJETIVOS
========================================================== */



.encci-objective-list li {
    position: relative;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
    line-height: 1.55;
    list-style: none;
    color: var(--encci-text);
}

.encci-objective-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--encci-secondary);
}


/* ==========================================================
   FOOTER DEL BLOQUE
========================================================== */

.encci-objectives__footer {
    margin-top: 2rem;
}

.encci-objectives__footer p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .encci-objectives__inner {
        padding: 2.5rem;
    }

    .encci-objectives__areas {

        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .encci-objectives__footer {

        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .encci-objectives__footer .encci-btn {

        min-width: 0;
        width: fit-content;
    }

}


@media (max-width: 576px) {

    .encci-objectives {
        padding: 2rem 0;
    }

    .encci-objectives__inner {
        padding: 1.5rem;
        border-radius: var(--radius-md);
    }

    .encci-objectives__header p {
        font-size: 1.1rem;
    }

    .encci-objective-area__intro {

        grid-template-columns: 64px 1fr;

        gap: 1rem;
    }

    .encci-objective-area__icon {

        width: 64px;
        height: 64px;

        font-size: 1.5rem;
    }

    .encci-objective-area h3 {
        font-size: 1.4rem;
    }

    .encci-objective-area__intro p {
        font-size: 1rem;
    }

    .encci-objectives__footer .encci-btn {
        width: 100%;
        min-height: 62px;
        font-size: 1rem;
    }

}




/*==================================================
Botones
==================================================*/

.encci-form div.form-actions {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.encci-form div.form-actions input {
    margin-bottom: 20px;
}