/* ==========================================================================
   Estilos de la web
   ========================================================================== */

html {
    overflow-y: scroll;
}

body {
    background-color: #fdfbff;
}

/*  Caja de ejemplos*/
#cardParagraphRangeEjemplos {
    background-color: #fdfbff;
    padding-bottom: 15px;
}

.ver-ejemplos {
    color: #004f8a;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    font-weight: bold;
}

#collapseOptionsEjemplos {
    border-radius: 15px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    width: 95%;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), 1px 3px 7px rgba(0,0,0,0.1);
    max-width: 450px;
    z-index: 2000;
    transition: height .5s linear;
    position: absolute;
    margin-left: 15px;
}

/* Footer */
footer {
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #004f8a;
    font-size: small;
    text-align: center;
    flex-direction: row;
    margin-top: 50px;
}

.texto-pie {
    height: 70px;
    padding-top: 5px;
    min-width: 400px;
}



.card-body {
    padding-bottom: 0;
}
/* Caja de opciones del formulario */
.collapsing1 {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#collapseOptions.collapsing1 {
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

#collapseOptions {
    border-radius: 15px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    width: 95%;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), 1px 3px 7px rgba(0,0,0,0.1);
    transition: height .5s linear;
}

.text-tres-puntos {
    position: absolute;
    right: 10px;
    top: 0;
}

.tooltip {
    z-index: 2000;
}

    .tooltip > .tooltip-inner {
        background-color: #004f8a;
        font-weight: 700;
        letter-spacing: 0.05em;
        z-index: 2000;
    }

    .tooltip > .tooltip-arrow {
        border-bottom-color: #004f8a;
    }

/* Tarjetas */
.card {
    border-radius: 0;
}

#card_group_menu {
    margin: 0;
}

.formCard {
    z-index: 1;
    margin-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1), 4px 4px 7px rgba(0,0,0,0.1);
}

    .formCard .card-body input[type=text],
    .formCard .card-body button {
        font-size: 105%;
    }

/* Barra de progreso */
#progressBar_form {
    width: 0%;
    background-color: #004f8a;
}

.progress {
    background-color: white;
    height: 3px;
}

/* slider para el tamaño de los párrafos */
.custom-range::-moz-range-thumb {
    background: #004f8a;
}

.custom-range::-webkit-slider-thumb {
    background: #004f8a;
}

/* Div para el resultado */
.tiempo {
    font-size: small;
    color: #212529;
}

.filtros {
    color: #004f8a !important;
}

.panelInput {
    flex: 1 1 auto;
    width: 1%;
}

/* OPCIONES DEL DROPDOWN*/
.dropdown-menu {
    max-width: calc(40vw);
}



.btn-light {
    color: #004f8a;
    background-color: white;
    border-color: #004f8a !important;
    border-radius: 0 !important;
}

.actions-btn.btn-light {
    color: #004f8a;
    background-color: white;
    border-color: #004f8a;
    box-shadow: none;
}

    .actions-btn.btn-light:hover {
        color: white;
        background-color: #004f8a;
        border-color: #004f8a;
        box-shadow: none;
    }


.btn.dropdown-toggle.btn-light {
    border-color: #004f8a;
    color: #004f8a;
}

    .btn.dropdown-toggle.btn-light:focus {
        color: #004f8a;
        background-color: white;
        border-color: #004f8a;
        box-shadow: none;
        outline: none !important;
    }

    .btn.dropdown-toggle.btn-light.bs-placeholder {
        border-color: #004f8a;
        color: white;
        background-color: #004f8a;
    }

        .btn.dropdown-toggle.btn-light.bs-placeholder:hover {
            color: #004f8a;
            background-color: white !important;
            border-color: #004f8a;
        }

        .btn.dropdown-toggle.btn-light.bs-placeholder:focus {
            box-shadow: none;
            outline: none !important;
        }

.dropdown-item {
    color: #004f8a !important;
}

    .dropdown-item:hover {
        background-color: #004f8a !important;
        color: white !important;
    }

        .dropdown-item:hover > .check-mark {
            color: white !important;
        }

    .dropdown-item.selected .check-mark {
        color: #004f8a !important;
    }

    .dropdown-item.selected:hover .check-mark {
        color: white !important;
    }

    .notify {
        color: white;
        background-color: red !important;
        border-radius: 5px;
    }

.actions-btn.bs-select-all.btn.btn-light{
    display:none;
}
#result {
    margin-top: 10px;
}

/* Resultado*/
.resultStyle {
    background-color: #fdfbff !important;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%), 1px 3px 7px rgb(0 0 0 / 10%);
}

/* Resultado*/
.resultCard {
    border: 0;
}

    .resultCard .row {
        margin-left: -20px;
        margin-right: -20px;
    }

    .resultCard .card-header {
        border: 0;
        background-color: #fdfbff;
    }

    .resultCard .card-body {
        background-color: #fdfbff;
    }

    .resultCard .sectionTitle {
        border-left: 3px solid #004f8a;
    }

        .resultCard .sectionTitle h4 {
            margin-bottom: 1px;
            color: #004f8a;
        }

        .resultCard .sectionTitle a {
            margin-left: 15px;
        }

        .resultCard .sectionTitle i {
            cursor: pointer;
            padding-top: 15px;
            margin-bottom: 15px;
            color: #004f8a;
        }

            .resultCard .sectionTitle i:hover {
                color: #E74C3C;
            }
 

.resultAccordionCard {
    border: 0;
    background-color: #fdfbff;
}

    .resultAccordionCard .card-header {
        /*        display: inline;*/
        background-color: #fdfbff;
        border: 0;
        border-radius: 0;
        border-left: 3px solid #004f8a;
        margin-top: 10px;
        padding: 0rem 1.25rem;
        margin-bottom: 5px;
    }

        .resultAccordionCard .card-header:hover, .resultAccordionCard .card-header:focus, .resultAccordionCard .card-header:active {
            box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px, rgba(0, 0, 0, 0.1) 1px 3px 7px !important;
            background-color: #d6eaf9 !important;
            outline: 0;
        }

        .resultAccordionCard .card-header .row {
            transition: background-color 1s linear;
        }

        .resultAccordionCard .card-header .col-md-11 {
            padding-right: 0;
        }

        .resultAccordionCard .card-header .col-md-1 {
            padding-left: 0;
        }

    .resultAccordionCard div[id^=collapse] {
        border: 0;
        border-radius: 0;
        box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px, rgba(0, 0, 0, 0.1) 1px 3px 7px;
        margin-bottom: 10px;
        margin-top: -5px;
        transition: height .5s linear;
    }

        .resultAccordionCard div[id^=collapse] .card-body {
            padding-left: 0;
            padding-top: 0;
            border-left: 3px solid #004f8a;
        }

    .resultAccordionCard .card-body p {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-bottom: 0;
        padding-bottom: 10px;
        padding-top: 10px;
        border-right: 2px solid #004f8a;
        background-color: #e5f3fd;
        min-height: 70px;
    }

    .resultAccordionCard .accordionFrase {
        margin-bottom: 0;
        color: #000071;
    }

    .resultAccordionCard .infoFrase {
        margin-bottom: 0;
        font-variant: small-caps;
        font-size: small;
        color: #4a4a4a;
    }

.divParagraph {
    background-color: rgb(251, 231, 126);
    padding-right: 0;
    padding-left: 15px;
    flex-grow: 1;
    color: #000071;
    min-height: 70px;
}

/* Paginación */
#paginationDiv {
    margin-top: 15px;
    margin-bottom: 15px;
}

    #paginationDiv .page-link {
        cursor: pointer;
        border: 0;
        background: none;
    }

    #paginationDiv span {
        color: #212529;
        font-weight: 400;
        font-size: 105%;
    }

.pagination i {
    color: #004f8a;
}

.pagination .page-item:hover i {
    color: #E74C3C;
}

/* Botón para scrollear a la parte superior de la página */
.btnGoUpPage {
    color: #004f8a;
    position: fixed;
    right: 25px;
    bottom: 25px;
}

    .btnGoUpPage:focus {
        outline: 0;
        box-shadow: none;
    }

    .btnGoUpPage:hover {
        color: #E74C3C;
    }

/* Subrayado para la frase en el párrafo */
.underlinedText {
    text-decoration: none;
    border-bottom: 1px solid #004f8a;
}

/* Botón flecha del resultado */
.btnArrow {
    color: #004f8a;
}

    .btnArrow:hover {
        color: #E74C3C;
    }

    .btnArrow:focus {
        outline: 0;
        box-shadow: none;
    }

/* Botón para abrir/cerrar todos los elementos del resultado */
#toggleAccordion {
    color: #004f8a;
    cursor: pointer;
}

    #toggleAccordion:hover {
        color: #E74C3C;
    }

/* Botón de las opciones del formulario */
#btnFormOptions {
    color: #004f8a;
}

    #btnFormOptions:hover {
        color: #E74C3C;
    }

    #btnFormOptions i {
        cursor: pointer;
    }
    #btnFormOptions > .fas {
        position: absolute;
        bottom: 0;
        right: 10px;
    }

/* Botones de los párrafos */
.paragraphOptionsBtn {
    padding-left: 5px;
    padding-right: 0;
    width: 20px;
}

.paragraphQuestionBtn i {
    width: 12px;
}

.paragraphQuestionBtn button:focus, .paragraphPdfBtn:focus {
    outline: 0;
    box-shadow: none;
}

.paragraphQuestionBtn i, .paragraphPdfBtn i {
    color: #004f8a;
}

.paragraphQuestionBtn:hover i, .paragraphPdfBtn:hover i {
    color: #E74C3C;
}

.paragraphPdfBtn{
    padding-top: 0;
}

/* Cambio de color de los checkbox */
/* Cambio de color de los checkbox */
.miCheckbox input {
    opacity: 0;
    margin-right: 10px;
}

    .miCheckbox input:hover {
        background-color: #004f8a !important;
        border-color: #004f8a;
    }

    .miCheckbox input:checked ~ label::before {
        background-color: #004f8a !important;
        border-color: #6C3F99;
        color: #fff;
        z-index: 10;
        cursor: pointer;
    }

.miCheckbox label {
    cursor: pointer;
    color: #004f8a;
}

    .miCheckbox label::before {
        border-radius: 0.25rem;
        position: absolute;
        top: 0.2rem;
        left: 1rem;
        display: block;
        width: 1rem;
        height: 1rem;
        pointer-events: none;
        content: "";
        background-color: #fff;
        border: #adb5bd solid 1px;
    }

.miCheckbox input:active ~ label::before {
    background-color: #004f8a !important;
    border-color: #004f8a;
}

.miCheckbox label::after {
    position: absolute;
    top: 0.2rem;
    left: 1rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
}

    .miCheckbox label::after:hover {
        color: #004f8a;
    }

.miCheckbox input:checked ~ label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
    z-index: 100;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #004f8a !important;
    border-color: #004f8a;
}

.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
    box-shadow: none;
    border-color: #004f8a;
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
    border-color: #004f8a;
}

.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
    background-color: #004f8a;
    border-color: #004f8a;
}
/* Fin del cambio de color de los checkbox */

#rangeHelp {
    color: #004f8a !important;
    margin-top: -5px;
}

.LabelDropdown {
    color: #004f8a;
}

.selectors {
    margin-bottom: 25px;
}

#divUserLogin #codigoUsuario {
    width: 100px;
}

#modalUserLogin #codigoUsuario {
    width: 100%;
}

/* Modal User Login */
#modalUserLogin {
    padding-right: 0px !important;
}

body.modal-open {
    padding-right: 0px !important;
}

/* Mensaje bienvenida usuario */
#userMessage {
    font-size: 1.25rem;
    color: #6c757d;
}


/* Botón de LogOut*/
#logoutBtn, #logoutBtnModal {
    cursor: pointer;
}

    #logoutBtn, #logoutBtnModal i {
        color: #6c757d;
    }

        #logoutBtn:hover i, #logoutBtnModal:hover i {
            color: #004f8a;
        }

/* Selector categorias gramáticales */
#divBtnCatGrama {
    display: none;
}

#divCatGrama {
    margin-right: 10px;
}

#selectorPickerCatGramaticales + button {
    background-color: #004f8a;
    border: 1px solid #ced4da;
    border-radius: 0px;
}

a[role=option].dropdown-item:active {
    background-color: white;
    color: #004f8a;
}

/* Botón para el modal de categorías gramaticales */
#btnCatGrama {
    background-color: white;
    border: 1px solid #ced4da;
    color: #999;
    border-radius: .25rem;
}

/* Cookie Consent */
#cookieConsent {
    background-color: white;
    position: fixed;
    bottom: 15px;
    width: 60%;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,.125);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1), 4px 4px 7px rgba(0,0,0,0.1);
}

    #cookieConsent p {
        margin: 10px;
    }

    #cookieConsent button {
        margin: 10px;
    }

/* Imagenes Logo */

.imagenLogo {
    display: none;
}

/* Título en la navbar */
.title {
    color: #004f8a;
    white-space: break-spaces;
}

    .title:hover {
        color: #6c757d;
    }

/* Botón buscar */
.buttonBuscar {
    background-color: #004f8a;
    border-color: #004f8a;
    border-radius: 0;
}

    .buttonBuscar:hover, .buttonBuscar:focus:hover{
        color: #004f8a;
        background-color: white;
        border-color: #004f8a;
        box-shadow: none !important;
    }

    .buttonBuscar:focus {
        background-color: #004f8a;
        border-color: #004f8a;
        box-shadow: none !important;
    }


/* Imagen Logo */

/* Logo izquierdo: el logo visible mide ~250x175px.
   Se coloca debajo de la barra superior: el logo visible empieza a 24px de ella
   (barra de progreso 3px + barra 84px + 24px = 111px desde arriba). */
.imagenLogoI {
    height: 210px;
    position: absolute;
    left: -15px;
    top: 91px;
}

.imagenLogoD {
    width: 150px;
    position: absolute;
    right: 20px;
    top: 111px;
}

.explicacion {
    font-size: 0.9rem;
    color: #004f8a;
}

.color-ayuda {
    color: #ca3d3c;
    cursor: pointer;
    display: inline-flex;
}

/* Media */
@media screen and (max-width: 1200px) {
    .container {
        max-width: 100%;
    }

    /* disecan.png tiene margen transparente: con 61px de alto el logo visible mide
       ~51px de alto; los márgenes negativos compensan ese margen. */
    .imagenLogo {
        display: flex;
        height: 61px;
        width: auto;
        margin: -6px 1px -4px -10px;
    }

    .imagenLogoD, .imagenLogoI {
        display: none;
    }

    .formCard {
        margin-top: 0px;
    }

    .dropdown-menu {
        max-width: calc(40vw);
    }

}

@media (max-width: 992px) {
    .container {
        flex-wrap: nowrap !important;
    }

    #divUserLogin {
        display: none;
    }
}

@media (min-width: 993px) {
    #btnModalUserLogin {
        display: none;
    }
}

@media (max-width: 768px) {
    .title {
        font-size: large;
    }

    .explicacion {
        margin-left: 0;
    }

    #result {
        margin: 20px 5px 0 5px;
        padding-right: 5px;
    }

    footer {
        flex-direction: column;
    }
}

@media (max-width: 588px) {
    #inputText {
        width: 100%;
    }

    .formCard #divBtnSubmit, .formCard #divCatGrama {
        display: none;
    }

    .formCard #divBtnCatGrama {
        display: flex !important;
    }

    .formCard #divInputGroup {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .tarjeta {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .explicacion {
        margin-left: -10px;
    }
    #result {
        margin-right: 0px;
    }

        #result .card-body {
            padding-right: 0;
        }

    .divParagraph p {
        margin-left: -10px;
    }
}

@media (min-width: 769px) {
    .title {
        font-size: x-large;
    }
}

/* disecan.png: entre 1201px y 1439px no cabe a tamaño completo en el hueco de 185px
   que deja .container, así que se muestra con un ancho visible de 150px. */
@media (min-width: 1201px) and (max-width: 1439px) {
    .imagenLogoI {
        height: 126px;
        left: -1px;
        top: 99px;
    }
}

/* ==========================================================================
   TEMA INSTITUCIONAL
   --------------------------------------------------------------------------
   Sobrio y minimalista, con los colores del logotipo: azul marino (la "D")
   y dorado (el arco y el sol). Este bloque sobrescribe las reglas de más arriba.
   ========================================================================== */

:root {
    --dc-azul: #0b3d6e;          /* azul del logotipo */
    --dc-azul-oscuro: #072a4d;
    --dc-azul-suave: #eef3f8;    /* fondo de hover / selección */
    --dc-dorado: #d9a23a;        /* dorado del logotipo */
    --dc-dorado-oscuro: #8f6410; /* dorado legible sobre blanco (contraste AA) */
    --dc-dorado-suave: #fbf5e7;  /* fondo de la frase abierta */
    --dc-texto: #1f2933;
    --dc-texto-suave: #5b6672;
    --dc-borde: #dfe4ea;
    --dc-fondo: #f6f7f9;
    --dc-superficie: #ffffff;
    --dc-radio: 6px;
    --dc-sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    /* Una sola familia, IBM Plex Sans: sobria, institucional y muy legible. */
    --dc-fuente: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --dc-fuente-titulos: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Base --- */
body {
    background-color: var(--dc-fondo);
    color: var(--dc-texto);
    font-family: var(--dc-fuente);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--dc-azul);
}

    a:hover {
        color: var(--dc-azul-oscuro);
    }

/* Foco visible y discreto para teclado */
.btn:focus-visible,
a:focus-visible,
[role=button]:focus-visible {
    outline: 2px solid var(--dc-dorado) !important;
    outline-offset: 2px;
}

/* --- Barra de progreso (dorado sobre la línea superior) --- */
.progress {
    background-color: transparent;
    height: 3px;
    border-radius: 0;
}

#progressBar_form {
    background-color: var(--dc-dorado);
}

/* --- Cabecera --- */

/* Barra azul del logotipo con filete dorado (el arco del logo) y una línea
   de luz dorada muy tenue arriba a la izquierda, como el sol del logo. */
:root {
    --dc-altura-barra: 84px;     /* alto fijo en escritorio: los logos laterales se colocan debajo */
}

.navbar {
    min-height: var(--dc-altura-barra);
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--dc-azul);
    background-image:
        radial-gradient(ellipse 420px 160px at 12% -40%, rgba(217, 162, 58, 0.28), transparent 70%),
        linear-gradient(100deg, var(--dc-azul-oscuro) 0%, var(--dc-azul) 55%, #12507f 100%);
    border-bottom: 3px solid var(--dc-dorado);
    box-shadow: 0 2px 10px rgba(7, 42, 77, 0.25);
}

.title {
    color: #fff;
    font-family: var(--dc-fuente-titulos);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
}

    .title b {
        color: #f0c46c;          /* dorado claro: legible sobre el azul */
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    .title:hover,
    .title:focus {
        color: #fff;
        text-decoration: none;
        opacity: 0.9;
    }

#userMessage {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Iconos con color en línea (#6c757d) en Default.aspx: se aclaran para el fondo azul */
#divUserLogin .fa-user,
#btnModalUserLogin .fa-bars {
    color: rgba(255, 255, 255, 0.85) !important;
}

#logoutBtn i, #logoutBtnModal i {
    color: rgba(255, 255, 255, 0.85);
}

    #logoutBtn:hover i {
        color: #f0c46c;
    }

#divUserLogin #codigoUsuario {
    width: 150px;           /* espacio para los 5 dígitos del código */
    height: 34px;
    font-size: 0.9rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

    #divUserLogin #codigoUsuario::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    #divUserLogin #codigoUsuario:focus {
        background-color: rgba(255, 255, 255, 0.18);
        border-color: #f0c46c;
        box-shadow: 0 0 0 3px rgba(240, 196, 108, 0.3);
    }

/* El logo pequeño de la barra se oculta en todos los tamaños: el logo ya aparece
   grande y centrado en la cabecera (.cabeceraLogo). */
.imagenLogo,
.navbar .imagenLogo {
    display: none !important;
}

/* --- Cabecera con logo ---
   El logo es el protagonista de la portada: centrado sobre el buscador, sobre un
   fondo claro (está diseñado para fondo claro) con un halo blanco que lo realza.
   disecan.png mide 1536x1024 con margen transparente (~10% arriba, ~7% abajo):
   los márgenes negativos lo compensan. */
.cabeceraLogo {
    position: relative;
    text-align: center;
    padding: 34px 16px 6px 16px;
    background:
        radial-gradient(ellipse 460px 190px at 50% 42%, #ffffff 0%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg, #eaf0f6 0%, var(--dc-fondo) 100%);
}

    /* Filete dorado corto bajo el logo, eco del arco del logotipo */
    .cabeceraLogo::after {
        content: "";
        display: block;
        width: 72px;
        height: 3px;
        margin: 14px auto 0 auto;
        border-radius: 2px;
        background-color: var(--dc-dorado);
    }

.imagenCabecera {
    height: 230px;               /* logo visible ~275x190px */
    width: auto;
    max-width: 100%;
    margin: -22px auto -16px auto;
    filter: drop-shadow(0 8px 18px rgba(11, 61, 110, 0.16));
}

/* Al haber cabecera, el buscador va más pegado a ella */
.cabeceraLogo + .container .formCard {
    margin-top: 18px;
}

/* Sombreado en tonos azules alrededor de los cuadros del buscador y de los filtros:
   halo azul visible por los cuatro lados */
.cabeceraLogo + .container .formCard,
.cabeceraLogo + .container #cardParagraphRange {
    border-color: #b8cce2;
    box-shadow:
        0 0 0 1px rgba(11, 61, 110, 0.06),
        0 0 14px rgba(18, 80, 127, 0.22),
        0 10px 34px rgba(11, 61, 110, 0.30);
}

    /* Al escribir en el buscador, el halo azul se intensifica */
    .cabeceraLogo + .container .formCard:focus-within {
        box-shadow:
            0 0 0 1px rgba(11, 61, 110, 0.10),
            0 0 18px rgba(18, 80, 127, 0.30),
            0 12px 40px rgba(11, 61, 110, 0.38);
    }

/* Texto explicativo bajo los filtros (estilo .textoIntro) */
.textoInferior {
    margin-top: 36px;
}

/* Créditos del proyecto (autores, financiación) como nota al pie de página:
   letra pequeña y gris, con una raya corta encima como en las notas de un documento. */
.notaPie {
    margin-top: 48px;
    padding-top: 12px;
    color: var(--dc-texto-suave);
    font-size: 0.78rem;
    line-height: 1.55;
    position: relative;
}

    .notaPie::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 160px;
        border-top: 1px solid #b9c2cc;
    }

    .notaPie p {
        margin-bottom: 0.5rem;
    }

        .notaPie p:last-child {
            margin-bottom: 0;
        }

/* Con resultados en pantalla, la cabecera se compacta para no empujarlos hacia abajo
   (navegadores actuales; en los antiguos simplemente se mantiene grande). */
body:has(#result) .cabeceraLogo {
    padding-top: 18px;
}

body:has(#result) .imagenCabecera {
    height: 130px;               /* logo visible ~155x108px */
    margin: -13px auto -9px auto;
}

@media (max-width: 768px) {
    .cabeceraLogo {
        padding-top: 22px;
    }

    .imagenCabecera {
        height: 170px;           /* logo visible ~200x140px */
        margin: -17px auto -12px auto;
    }
}

@media (max-width: 588px) {
    /* Sin ancho mínimo en el pie: más ancho que un móvil, provocaría desplazamiento
       horizontal de toda la página. */
    .texto-pie {
        min-width: 0;
        height: auto;
    }

    .imagenCabecera {
        height: 140px;           /* logo visible ~165x115px */
        margin: -14px auto -10px auto;
    }
}

/* Móvil en horizontal: pantalla muy baja, el logo se reduce para que el buscador
   aparezca en la primera pantalla */
@media (orientation: landscape) and (max-height: 500px) {
    .cabeceraLogo,
    body:has(#result) .cabeceraLogo {
        padding-top: 14px;
    }

    .imagenCabecera,
    body:has(#result) .imagenCabecera {
        height: 100px;           /* logo visible ~120x83px */
        margin: -10px auto -7px auto;
    }
}

/* En escritorio la barra tiene alto fijo y el título se ajusta para caber en dos líneas
   como mucho, de modo que los logos laterales siempre quedan por debajo de la barra. */
@media (min-width: 1201px) {
    .navbar {
        height: var(--dc-altura-barra);
        padding-top: 0;
        padding-bottom: 0;
    }

    /* El contenido de la barra ocupa todo el ancho de la ventana (no el del buscador):
       así el título cabe en una línea y el logo de IATEXT queda pegado a la derecha. */
    .navbar > .container {
        flex-wrap: nowrap;   /* título y acceso de usuario en la misma fila */
        width: 100%;
        max-width: none;
        padding-left: 32px;
        padding-right: 32px;
    }

    /* Título en una sola línea */
    .title {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;          /* seguridad: si no cabe, puntos suspensivos en vez de montarse */
        text-overflow: ellipsis;
        font-size: clamp(1rem, 1.3vw, 1.5rem);
        font-weight: 500;
    }
}

/* Logo horizontal de IATEXT (blanco, fondo transparente) a la derecha de la barra.
   logo_iatext_horizontal.png mide 1200x233 y el logo visible ocupa ~1064x103 en el centro:
   los márgenes negativos compensan ese margen transparente. Con 63px de alto, el logo
   visible mide ~28px de alto y ~288px de ancho. */
.enlaceLogoBarra {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 24px;
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);   /* separador fino respecto al acceso */
}

    .enlaceLogoBarra:hover .imagenLogoBarra {
        opacity: 0.85;
    }

.imagenLogoBarra {
    height: 63px;
    width: auto;
    margin: -18px -18px -18px -18px;
    transition: opacity .15s ease;
}

/* Hasta 1399px: algo más pequeño (logo visible ~24px de alto), para que el título quepa en una línea. */
@media (max-width: 1399px) {
    .imagenLogoBarra {
        height: 54px;
        margin: -15px;
    }

    .enlaceLogoBarra {
        margin-left: 16px;
        padding-left: 16px;
    }
}

/* Móvil: no cabe junto al título; el logo de IATEXT sigue en el pie de página */
@media (max-width: 768px) {
    .enlaceLogoBarra {
        display: none;
    }
}

/* --- Tarjeta del buscador --- */
.card {
    border-color: var(--dc-borde);
}

.formCard {
    margin-top: 28px;
    background-color: var(--dc-superficie);
    border: 1px solid var(--dc-borde);
    border-radius: var(--dc-radio);
    box-shadow: var(--dc-sombra);
}

    .formCard .card-body {
        padding: 22px 24px 6px 24px;
    }

    .formCard .card-body input[type=text],
    .formCard .card-body button {
        font-size: 1.05rem;
    }

/* Campos de texto */
.form-control {
    height: 46px;
    color: var(--dc-texto);
    border: 1px solid #c9d1da;
    border-radius: var(--dc-radio);
}

    .form-control::placeholder {
        color: #8a949f;
    }

    .form-control:focus {
        border-color: var(--dc-azul);
        box-shadow: 0 0 0 3px rgba(11, 61, 110, 0.15);
    }

#inputText {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 16px;
}

/* Botón Buscar */
.buttonBuscar,
.buttonBuscar:focus {
    height: 46px;
    padding-left: 26px;
    padding-right: 26px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
    background-color: var(--dc-azul);
    border-color: var(--dc-azul);
    border-radius: 0 var(--dc-radio) var(--dc-radio) 0;
}

    .buttonBuscar:hover,
    .buttonBuscar:focus:hover {
        color: #fff;
        background-color: var(--dc-azul-oscuro);
        border-color: var(--dc-azul-oscuro);
    }

#divBtnCatGrama .buttonBuscar {
    border-radius: var(--dc-radio);
}

/* Selector de categorías gramaticales junto al buscador (neutro, no compite con Buscar) */
#divCatGrama {
    margin-right: 0;
}

#selectorPickerCatGramaticales + button,
#selectorPickerCatGramaticales + button.bs-placeholder {
    height: 46px;
    color: var(--dc-texto-suave);
    background-color: #f9fafb !important;
    border: 1px solid #c9d1da !important;
    border-left: 0 !important;
    border-radius: 0 !important;
}

    #selectorPickerCatGramaticales + button:hover {
        color: var(--dc-azul);
        background-color: var(--dc-azul-suave) !important;
    }

    /* bootstrap-select coloca el texto con position:absolute pegado arriba (padding-top):
       se centra en vertical para alinearlo con el texto del buscador y con "Buscar". */
    #selectorPickerCatGramaticales + button .filter-option {
        display: flex;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
    }

/* Foco del buscador: el input no es hijo directo de .input-group (va dentro del UpdatePanel),
   así que no recibe el z-index de Bootstrap. Se le da aquí para que el halo azul quede por
   encima del selector de categorías y rodee el buscador completo. */
#inputText:focus {
    position: relative;
    z-index: 3;
}

/* Categorías gramaticales con la inicial en mayúscula (solo visual: el valor que se añade
   al buscador sigue siendo el original en minúsculas) */
#divCatGrama .dropdown-item .text,
#divBtnCatGrama .dropdown-item .text,
#modalCatGrama .list-group-item {
    display: inline-block;
}

    #divCatGrama .dropdown-item .text::first-letter,
    #divBtnCatGrama .dropdown-item .text::first-letter,
    #modalCatGrama .list-group-item::first-letter {
        text-transform: uppercase;
    }

#btnCatGrama {
    color: var(--dc-texto-suave);
    border-color: #c9d1da;
    border-radius: var(--dc-radio);
}

/* "Mostrar ejemplos de búsqueda" y botón de opciones */
.ver-ejemplos {
    color: var(--dc-azul);
    font-size: 0.92rem;
    font-weight: 600;
}

    .ver-ejemplos:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* --- Panel de ejemplos --- */
#collapseOptionsEjemplos {
    border: 1px solid var(--dc-borde);
    border-top: 0;
    border-radius: 0 0 var(--dc-radio) var(--dc-radio);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
    max-width: 480px;
}

#cardParagraphRangeEjemplos {
    background-color: var(--dc-superficie);
    border: 0;
    border-radius: 0 0 var(--dc-radio) var(--dc-radio);
    padding: 4px 18px 16px 18px;
}

.explicacion {
    color: var(--dc-texto);
    font-size: 0.9rem;
    line-height: 1.9;
}

/* Ejemplos clicables: aspecto de "código" */
.color-ayuda {
    color: var(--dc-azul);
    background-color: var(--dc-azul-suave);
    border: 1px solid #d6e1ec;
    border-radius: 4px;
    padding: 0 6px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.84rem;
    line-height: 1.6;
}

    .color-ayuda:hover {
        color: #fff;
        background-color: var(--dc-azul);
        border-color: var(--dc-azul);
    }

/* --- Panel de opciones / filtros --- */
#collapseOptions {
    width: 100%;
    margin-top: 12px;
    border-radius: var(--dc-radio);
    box-shadow: none;
}

#cardParagraphRange {
    background-color: var(--dc-superficie);
    border: 1px solid var(--dc-borde);
    border-radius: var(--dc-radio);
    box-shadow: var(--dc-sombra);
}

    #cardParagraphRange > .card-body {
        padding: 22px 24px 4px 24px;
    }

.LabelDropdown {
    color: var(--dc-texto-suave);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.selectors {
    margin-bottom: 20px;
}

/* Casillas */
.miCheckbox label {
    color: var(--dc-texto);
}

    /* Casilla centrada en vertical respecto a la línea (el contenedor .custom-control es el posicionado). */
    /* El "- 0.25rem" descuenta la mitad del margin-bottom (.5rem) que Bootstrap pone a los label,
       que forma parte de la altura del contenedor pero no de la línea de texto. */
    .miCheckbox label::before,
    .miCheckbox label::after {
        top: calc(50% - 0.25rem);
        transform: translateY(-50%);
    }

.miCheckbox input:checked ~ label::before,
.miCheckbox input:active ~ label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
    background-color: var(--dc-azul) !important;
    border-color: var(--dc-azul);
}

/* Deslizadores */
.custom-range::-webkit-slider-thumb {
    background: var(--dc-azul);
}

.custom-range::-moz-range-thumb {
    background: var(--dc-azul);
}

.custom-range::-webkit-slider-runnable-track {
    background-color: var(--dc-borde);
}

.custom-range::-moz-range-track {
    background-color: var(--dc-borde);
}

.custom-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(11, 61, 110, 0.2);
}

#rangeHelp, #rangeHelp1, #rangeHelpSearch {
    color: var(--dc-texto-suave) !important;
    font-size: 0.8rem;
}

/* --- Desplegables (bootstrap-select) --- */
.btn-light,
.btn.dropdown-toggle.btn-light,
.btn.dropdown-toggle.btn-light.bs-placeholder {
    color: var(--dc-texto);
    background-color: var(--dc-superficie);
    border: 1px solid #c9d1da !important;
    border-radius: var(--dc-radio) !important;
}

    .btn.dropdown-toggle.btn-light.bs-placeholder {
        color: #8a949f;
    }

        /* Al pasar el ratón el botón se oscurece ligeramente */
        .btn.dropdown-toggle.btn-light:hover,
        .btn.dropdown-toggle.btn-light.bs-placeholder:hover,
        .bootstrap-select.show > .btn.dropdown-toggle.btn-light {
            color: var(--dc-azul-oscuro);
            background-color: #e8edf3 !important;
            border-color: #9fb0c3 !important;
        }

        .btn.dropdown-toggle.btn-light:focus,
        .btn.dropdown-toggle.btn-light.bs-placeholder:focus {
            color: var(--dc-texto);
            border-color: var(--dc-azul) !important;
            box-shadow: 0 0 0 3px rgba(11, 61, 110, 0.15);
        }

.dropdown-menu {
    border: 1px solid var(--dc-borde);
    border-radius: var(--dc-radio);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    padding: 6px 0;
}

.dropdown-item {
    color: var(--dc-texto) !important;
    font-size: 0.95rem;
}

/* Opciones largas (p. ej. orador con su cargo) en varias líneas en vez de cortarse.
   El menú toma el ancho de su contenido hasta el máximo (40vw), y solo entonces parte las líneas. */
.bootstrap-select .dropdown-menu {
    width: max-content;
}

    .bootstrap-select .dropdown-menu .dropdown-item {
        white-space: normal;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: var(--dc-azul) !important;
        background-color: var(--dc-azul-suave) !important;
    }

        .dropdown-item:hover > .check-mark,
        .dropdown-item.selected .check-mark,
        .dropdown-item.selected:hover .check-mark {
            color: var(--dc-azul) !important;
        }

    .dropdown-item.selected,
    .dropdown-item.active {
        color: var(--dc-azul) !important;
        background-color: var(--dc-azul-suave) !important;
        font-weight: 600;
    }

.bs-searchbox .form-control {
    height: 36px;
}

.actions-btn.btn-light:hover {
    color: #fff;
    background-color: var(--dc-azul);
}

/* Tooltips y popovers */
.tooltip > .tooltip-inner {
    background-color: var(--dc-azul-oscuro);
    font-weight: 400;
    letter-spacing: 0;
    font-size: 0.82rem;
    padding: 6px 10px;
    border-radius: 4px;
}

.bs-tooltip-top .arrow::before { border-top-color: var(--dc-azul-oscuro); }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--dc-azul-oscuro); }
.bs-tooltip-left .arrow::before { border-left-color: var(--dc-azul-oscuro); }
.bs-tooltip-right .arrow::before { border-right-color: var(--dc-azul-oscuro); }

.popover {
    border-color: var(--dc-borde);
    border-radius: var(--dc-radio);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    font-family: var(--dc-fuente);
}

/* Popover de metadatos del párrafo: cabecera azul con filete dorado (como la barra
   superior) y una fila por metadato con su icono, etiqueta y valor. */
.popoverMetadatos {
    min-width: 260px;
    max-width: 320px;
    border: 0;
    overflow: visible;
    box-shadow:
        0 0 0 1px rgba(11, 61, 110, 0.08),
        0 4px 10px rgba(11, 61, 110, 0.12),
        0 14px 34px rgba(11, 61, 110, 0.22);
}

    .popoverMetadatos .popover-header {
        padding: 10px 16px;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        background: linear-gradient(100deg, var(--dc-azul-oscuro) 0%, var(--dc-azul) 100%);
        border-bottom: 2px solid var(--dc-dorado);
        border-radius: var(--dc-radio) var(--dc-radio) 0 0;
    }

        .popoverMetadatos .popover-header i {
            margin-right: 6px;
            color: #f0c46c;
        }

    .popoverMetadatos .popover-body {
        padding: 6px 16px 10px 16px;
    }

    /* Flecha con el color de la cabecera cuando el popover se abre por debajo del icono */
    .popoverMetadatos.bs-popover-bottom > .arrow::after {
        border-bottom-color: var(--dc-azul);
    }

    .popoverMetadatos.bs-popover-bottom .popover-header::before {
        display: none;
    }

.metaFila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--dc-borde);
}

    .metaFila:last-child {
        border-bottom: 0;
    }

.metaIcono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
    color: var(--dc-azul);
    background: linear-gradient(145deg, #ffffff 0%, #e6eef7 100%);
    border: 1px solid #d3dfec;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(11, 61, 110, 0.12), 0 2px 6px rgba(11, 61, 110, 0.10);
}

.metaTexto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.metaEtiqueta {
    color: var(--dc-texto-suave);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.metaValor {
    color: var(--dc-texto);
    font-size: 0.92rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* --- Resultados --- */
#result {
    margin-top: 28px;
}

.tiempo {
    color: var(--dc-texto-suave);
    font-size: 0.85rem;
}

.resultStyle {
    background-color: var(--dc-superficie) !important;
    box-shadow: var(--dc-sombra);
}

.resultCard {
    background-color: transparent;
}

    .resultCard .card-header,
    .resultCard .card-body {
        background-color: transparent;
    }

    .resultCard .sectionTitle {
        border-left: 3px solid var(--dc-dorado);
    }

        .resultCard .sectionTitle h4,
        .resultCard .sectionTitle h5 {
            color: var(--dc-azul);
            font-family: var(--dc-fuente-titulos);
            font-weight: 400;
        }

        /* Términos buscados en el título (el servidor les pone color rojo en línea) */
        .resultCard .sectionTitle h5 span[style] {
            color: var(--dc-dorado-oscuro) !important;
        }

.filtros {
    color: var(--dc-texto-suave) !important;
    font-size: 0.9rem;
}

/* Cada frase encontrada */
.resultAccordionCard {
    background-color: transparent;
}

    .resultAccordionCard .card-header {
        background-color: var(--dc-superficie);
        border: 1px solid var(--dc-borde);
        border-left: 3px solid var(--dc-azul);
        border-radius: var(--dc-radio);
        margin-top: 10px;
        margin-bottom: 0;
        padding: 10px 16px;
        transition: background-color .15s ease, border-color .15s ease;
    }

        /* !important para sobrescribir también los colores que pone accordion-view.js en línea */
        .resultAccordionCard .card-header:hover,
        .resultAccordionCard .card-header:focus,
        .resultAccordionCard .card-header:active {
            background-color: var(--dc-azul-suave) !important;
            box-shadow: none !important;
        }

        .resultAccordionCard .card-header[aria-expanded="true"] {
            background-color: #ffe4a7 !important;
            border-left-color: var(--dc-dorado);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            box-shadow: none !important;
        }

        .resultAccordionCard .card-header .row {
            background-color: transparent !important;
            box-shadow: none !important;
        }

    .resultAccordionCard .accordionFrase {
        color: var(--dc-texto);
        line-height: 1.6;
    }

    .resultAccordionCard .infoFrase {
        color: var(--dc-texto-suave);
        font-variant: normal;
        font-size: 0.8rem;
        letter-spacing: 0.01em;
    }

    /* Contexto (párrafo) desplegado */
    .resultAccordionCard div[id^=collapse] {
        border: 1px solid var(--dc-borde);
        border-top: 0;
        border-radius: 0 0 var(--dc-radio) var(--dc-radio);
        box-shadow: none;
        margin-top: 0;
        margin-bottom: 4px;
        background-color: var(--dc-superficie);
    }

        .resultAccordionCard div[id^=collapse] .card-body {
            border-left: 3px solid var(--dc-dorado);
            border-bottom-left-radius: var(--dc-radio);
            padding: 0;
        }

    .resultAccordionCard .card-body p {
        background-color: transparent;
        border-right: 0;
        color: var(--dc-texto);
        line-height: 1.7;
        padding: 14px 20px;
    }

/* Párrafo con fondo dorado suave (continúa la cabecera desplegada) y separado por un filete
   de la columna blanca de iconos. align-self ocupa toda la altura aunque la fila centre. */
.divParagraph {
    align-self: stretch;
    background-color: var(--dc-dorado-suave);
    border-right: 1px solid #efd9a8;
    border-bottom-left-radius: 3px;  /* sigue la esquina redondeada del contexto */
    color: var(--dc-texto);
    padding-left: 0;
}

.underlinedText {
    border-bottom: 2px solid var(--dc-dorado);
}

/* Iconos de acción: botón redondo con el azul del botón Buscar, degradado claro y
   sombra suave; al pasar el ratón se rellena de azul y se eleva ligeramente. */
#btnFormOptions > i,
#toggleAccordion,
.resultCard .sectionTitle i,
.btnArrow > i,
.paragraphQuestionBtn i,
.paragraphPdfBtn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;              /* en columnas estrechas con d-flex no se deforma el círculo */
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
    vertical-align: middle;
    color: var(--dc-azul);
    background-color: #eef4fa;   /* color liso: un degradado no se anima y dejaría ver el blanco a mitad */
    border: 1px solid #d3dfec;
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(11, 61, 110, 0.12),
        0 3px 8px rgba(11, 61, 110, 0.14);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    #btnFormOptions:hover > i,
    #toggleAccordion:hover,
    .resultCard .sectionTitle i:hover,
    .btnArrow:hover > i,
    .paragraphQuestionBtn:hover i,
    .paragraphPdfBtn:hover i {
        color: #fff;
        background-color: var(--dc-azul);
        border-color: var(--dc-azul);
        box-shadow:
            0 2px 4px rgba(11, 61, 110, 0.20),
            0 6px 14px rgba(11, 61, 110, 0.28);
        transform: translateY(-1px);
    }

/* Fila de "Mostrar ejemplos" y botón de opciones: separada del buscador y con el botón
   centrado en vertical respecto al texto (sin la posición absoluta del estilo antiguo,
   que hacía que el círculo subiera hasta el botón Buscar). */
.formCard .card-body > .row {
    align-items: center;
    margin-top: 14px !important;   /* sobrescribe el mt-2 de Bootstrap */
}

#btnFormOptions {
    display: flex;
    justify-content: flex-end;
}

    #btnFormOptions > .fas {
        position: static;
        font-size: 1.05rem;
    }

    /* Con las opciones abiertas el botón queda relleno, como al pasar el ratón */
    #btnFormOptions[aria-expanded="true"] > i {
        color: #fff;
        background-color: var(--dc-azul);
        border-color: var(--dc-azul);
    }

/* Copiar y descargar, juntos y separados del botón de expandir */
.resultCard .sectionTitle a {
    margin-left: 8px;
}

/* Iconos de cada párrafo (información y PDF original), algo más pequeños */
.paragraphQuestionBtn i,
.paragraphPdfBtn i {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.paragraphOptionsBtn {
    flex-shrink: 0;
    padding-top: 8px;
    width: 52px;
    background-color: var(--dc-superficie);
}

    .paragraphOptionsBtn .col-12 {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .paragraphOptionsBtn .btn {
        padding: 3px 0;
    }

/* Botón flotante para volver arriba: círculo azul con sombra */
.btnGoUpPage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #fff;
    background-color: var(--dc-azul);
    border-radius: 50%;
    box-shadow:
        0 2px 4px rgba(11, 61, 110, 0.20),
        0 8px 20px rgba(11, 61, 110, 0.30);
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .2s ease, visibility .2s ease;
    /* Oculto hasta que se baja por la página (button-go-up-page.js añade .visible) */
    opacity: 0;
    visibility: hidden;
}

    .btnGoUpPage.visible {
        opacity: 1;
        visibility: visible;
    }

    .btnGoUpPage i {
        font-size: 1.1rem;
    }

    .btnGoUpPage:hover {
        color: #fff;
        background-color: var(--dc-azul-oscuro);
        box-shadow:
            0 3px 6px rgba(11, 61, 110, 0.24),
            0 12px 26px rgba(11, 61, 110, 0.34);
        transform: translateY(-2px);
    }

/* Paginación */
#paginationDiv {
    margin-top: 24px;
    margin-bottom: 24px;
}

    /* Botones redondos como los de despliegue: azul claro, rellenos de azul al pasar el ratón */
    #paginationDiv .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        margin: 0 4px;
        color: var(--dc-azul);
        background-color: #eef4fa;
        border: 1px solid #d3dfec;
        border-radius: 50% !important;   /* también el primero y el último, que Bootstrap redondea aparte */
        box-shadow:
            0 1px 2px rgba(11, 61, 110, 0.12),
            0 3px 8px rgba(11, 61, 110, 0.14);
        transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

        #paginationDiv .page-link i {
            color: inherit;
            font-size: 0.85rem;
        }

        #paginationDiv .page-link:hover,
        #paginationDiv .page-link:focus {
            color: #fff;
            background-color: var(--dc-azul);
            border-color: var(--dc-azul);
            box-shadow:
                0 2px 4px rgba(11, 61, 110, 0.20),
                0 6px 14px rgba(11, 61, 110, 0.28);
            transform: translateY(-1px);
        }

    #paginationDiv span {
        color: var(--dc-texto-suave);
        font-size: 0.95rem;
    }

/* Avisos */
.alert-warning {
    color: #6b4a0b;
    background-color: var(--dc-dorado-suave);
    border-color: #efd9a8;
    border-radius: var(--dc-radio);
}

/* --- Pie de página --- */
footer {
    color: var(--dc-texto-suave);
    border-top: 1px solid var(--dc-borde);
    margin-top: 64px;
    padding-top: 24px;
    font-size: 0.82rem;
    line-height: 1.6;
}

    footer a {
        color: var(--dc-azul) !important;
    }

/* Pie con el logo IATEXT de CADIEM La Palma y el texto del copyright a su lado */
footer.pie-iatext {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 15px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 60px;   /* el botón flotante de volver arriba no tapa el texto del pie */
}

.pie-iatext-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

    .pie-iatext-logo img {
        display: block;
        height: clamp(48px, 7vw, 80px);
        max-width: 350px;
        width: auto;
        object-fit: contain;
        transition: transform .15s ease;
    }

    .pie-iatext-logo:hover img {
        transform: translateY(-1px);
    }

/* Logos del pie (CLARIAH-ES + IATEXT). Tamaños de CLARIAH-ES como en CADIEM La Palma:
   es muy apaisado (≈6,8:1) y con la misma altura que IATEXT parecería mayor. */
.pie-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 72px;
}

    .pie-logo-clariah img {
        height: clamp(22px, 3.5vw, 36px);
        max-width: 180px;
    }

footer.pie-iatext .texto-pie {
    height: auto;
    min-width: 0;
    padding-top: 0;
    padding-left: 24px;
    border-left: 1px solid var(--dc-borde);
    text-align: left;
}

    footer.pie-iatext .texto-pie p {
        margin-bottom: 0;
    }

/* En pantallas estrechas el texto pasa debajo del logo */
@media (max-width: 768px) {
    footer.pie-iatext {
        flex-direction: column;
        gap: 12px;
    }

    .pie-iatext-logo img {
        height: 44px;
        max-width: 100%;
    }

    .pie-logos {
        gap: 16px 40px;
    }

    .pie-logo-clariah img {
        height: 20px;
    }

    footer.pie-iatext .texto-pie {
        padding-left: 0;
        border-left: none;
        text-align: center;
    }
}

/* --- Aviso de cookies --- */
#cookieConsent {
    border: 1px solid var(--dc-borde);
    border-radius: var(--dc-radio);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    font-size: 0.9rem;
}

/* --- Botones genéricos y modales --- */
.btn-primary {
    background-color: var(--dc-azul);
    border-color: var(--dc-azul);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--dc-azul-oscuro);
        border-color: var(--dc-azul-oscuro);
    }

.modal-content {
    border: 1px solid var(--dc-borde);
    border-radius: var(--dc-radio);
}

/* --- Pantallas pequeñas --- */
@media (max-width: 588px) {
    .formCard .card-body,
    #cardParagraphRange > .card-body {
        padding: 16px 14px 4px 14px;
    }

    #inputText {
        border-radius: var(--dc-radio);
    }

    .resultAccordionCard .card-body p {
        padding: 12px 14px;
    }

    /* Panel de ejemplos: con el 95% de ancho más el margen izquierdo se salía por la derecha */
    #collapseOptionsEjemplos {
        width: calc(100vw - 60px);
    }

    /* Resultados: sin sangría lateral y la frase ocupa todo el hueco hasta la flecha */
    .resultCard > .card-body {
        padding-left: 0;
    }

    .resultAccordionCard .card-header .col-10 {
        flex: 1 1 0;
        max-width: none;
    }

    /* Texto justificado con guionado para evitar huecos grandes entre palabras */
    .resultAccordionCard .accordionFrase,
    .resultAccordionCard .card-body p {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* --- Bloque de presentación: logo + texto explicativo, encima del buscador --- */
.bloqueIntro {
    display: flex;
    align-items: stretch;
    margin-top: 28px;
    padding: 28px 32px;
    background-color: var(--dc-superficie);
    border: 1px solid var(--dc-borde);
    border-radius: var(--dc-radio);
    box-shadow: var(--dc-sombra);
}

.logoIntro {
    flex: 0 0 auto;
    display: flex;               /* logo centrado en vertical; separador a toda la altura */
    align-items: center;
    padding-right: 32px;
    margin-right: 32px;
    border-right: 1px solid var(--dc-borde);
}

/* disecan.png 1536x1024 con margen transparente: con 200px de alto el logo visible
   mide ~240x166px; los márgenes negativos compensan el margen transparente. */
/* Logo visible ~274x191px */
.imagenIntro {
    display: block;
    height: 230px;
    width: auto;
    margin: -23px -33px -16px -38px;
}

.textoIntro {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--dc-texto);
    font-size: 0.95rem;
    line-height: 1.65;
}

    .textoIntro p {
        margin-bottom: 0.7rem;
        /* Texto justificado; el guionado (según lang="es") evita huecos grandes entre palabras en pantallas estrechas */
        text-align: justify;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

        /* El título no se justifica ni se parte con guiones */
        .textoIntro p.tituloIntro {
            text-align: left;
            -webkit-hyphens: manual;
            hyphens: manual;
        }

        .textoIntro p:last-child {
            margin-bottom: 0;
        }

    /* Enlaces del texto subrayados para distinguirlos del texto normal */
    .textoIntro a {
        color: var(--dc-azul);
        font-weight: 500;
        text-decoration: underline;
        text-decoration-color: var(--dc-dorado);
        text-underline-offset: 3px;
    }

        .textoIntro a:hover {
            color: var(--dc-azul-oscuro);
            text-decoration-thickness: 2px;
        }

    .textoIntro .tituloIntro {
        color: var(--dc-azul);
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1.35;
        margin-bottom: 0.9rem;
    }

        .textoIntro .tituloIntro b {
            font-weight: 600;
        }

        /* Filete dorado corto bajo el título, eco del arco del logotipo */
        .textoIntro .tituloIntro::after {
            content: "";
            display: block;
            width: 56px;
            height: 3px;
            margin-top: 10px;
            border-radius: 2px;
            background-color: var(--dc-dorado);
        }

/* Buscador justo debajo del bloque de presentación */
.bloqueIntro + .formCard {
    margin-top: 18px;
}

/* Tablet: logo algo más pequeño */
@media (max-width: 992px) {
    .imagenIntro {
        height: 150px;
        margin: -15px -22px -11px -25px;
    }

    .logoIntro {
        padding-right: 24px;
        margin-right: 24px;
    }
}

/* Móvil: logo encima del texto, centrado */
@media (max-width: 768px) {
    .bloqueIntro {
        flex-direction: column;
        padding: 22px 18px;
    }

    .logoIntro {
        padding: 0 0 18px 0;
        margin: 0 0 18px 0;
        border-right: 0;
        border-bottom: 1px solid var(--dc-borde);
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .imagenIntro {
        height: 140px;
        margin: -14px -20px -10px -23px;
    }
}

/* --- Portada con el logo a la izquierda y el buscador al lado; texto debajo --- */
.filaBuscador {
    display: flex;
    align-items: flex-start;
    margin-top: 32px;
}

.logoBuscador {
    flex: 0 0 auto;
    padding-right: 36px;
    padding-top: 4px;
}

/* disecan.png 1536x1024 con margen transparente: con 230px de alto el logo visible
   mide ~274x191px; los márgenes negativos compensan el margen transparente. */
.imagenLogoBuscador {
    display: block;
    height: 230px;
    width: auto;
    margin: -23px -33px -16px -38px;
}

.columnaBuscador {
    flex: 1 1 auto;
    min-width: 0;
}

    .columnaBuscador .formCard {
        margin-top: 0;
    }

    .columnaBuscador #collapseOptions {
        margin-top: 16px;
    }

/* Sombreado en tonos azules alrededor de los cuadros del buscador */
.columnaBuscador .formCard,
.columnaBuscador #cardParagraphRange {
    border-color: #cfdcea;
    box-shadow:
        0 0 0 1px rgba(11, 61, 110, 0.04),
        0 2px 6px rgba(11, 61, 110, 0.10),
        0 8px 28px rgba(18, 80, 127, 0.18);
}

    /* Al escribir en el buscador, el halo azul se intensifica ligeramente */
    .columnaBuscador .formCard:focus-within {
        box-shadow:
            0 0 0 1px rgba(11, 61, 110, 0.08),
            0 2px 8px rgba(11, 61, 110, 0.14),
            0 10px 34px rgba(18, 80, 127, 0.26);
    }

/* La columna del buscador es más estrecha que la ventana (las columnas de Bootstrap se
   calculan con el ancho de la ventana): se reajustan para que no se corten los textos. */
@media (min-width: 992px) {
    /* "Buscar con orden" (col-lg-3) y los deslizadores (col-lg-9): 1/3 y 2/3 */
    .columnaBuscador #cardParagraphRange .col-lg-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .columnaBuscador #cardParagraphRange .col-lg-9 {
        flex: 0 0 66.667%;
        max-width: 66.667%;
    }
}

@media (min-width: 1200px) {
    /* Filtros (col-xl, 5 en una fila): 3 por fila */
    .columnaBuscador .selectors.col-xl {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

/* Texto explicativo debajo del buscador: dos columnas en escritorio para que
   las líneas no sean demasiado largas */
.bloqueTextoIntro {
    margin-top: 32px;
    padding: 28px 32px;
    background-color: var(--dc-superficie);
    border: 1px solid var(--dc-borde);
    border-radius: var(--dc-radio);
}

@media (min-width: 993px) {
    .bloqueTextoIntro .textoIntro {
        column-count: 2;
        column-gap: 48px;
    }

        .bloqueTextoIntro .textoIntro .tituloIntro {
            column-span: all;
        }

        .bloqueTextoIntro .textoIntro p {
            break-inside: avoid;
        }
}

/* Tablet: logo más pequeño, todavía al lado del buscador */
@media (max-width: 992px) {
    .logoBuscador {
        padding-right: 24px;
    }

    .imagenLogoBuscador {
        height: 150px;           /* logo visible ~178x125px */
        margin: -15px -22px -11px -25px;
    }
}

/* Móvil: logo centrado encima del buscador */
@media (max-width: 768px) {
    .filaBuscador {
        flex-direction: column;
        align-items: stretch;
        margin-top: 20px;
    }

    .logoBuscador {
        display: flex;
        justify-content: center;
        padding: 0 0 18px 0;
    }

    .imagenLogoBuscador {
        height: 130px;           /* logo visible ~155x108px */
        margin: -13px -19px -9px -21px;
    }

    .bloqueTextoIntro {
        padding: 22px 18px;
    }
}

/* ==========================================================================
   FIN DEL TEMA INSTITUCIONAL
   ========================================================================== */