/* ========================================================================
   CID 2026-27 — Estilo eXeLearning
   Biblioteca Universitaria · Universidad de Alicante
   Paleta: #135d87 · #deb13c · #2a2a2a · #6b7280 · #e5e7eb · #f5f6f7 · #fff
   ======================================================================== */

/* ========================================================================
   1. RESET Y BASE
   ======================================================================== */

body.exe-export { padding: 1em 0; }
body.exe-web-site { padding: 0; }

.exe-content {
    color: #2a2a2a;
    background-color: #ffffff;
}

.js .exe-export .exe-content { min-height: 100vh; }
.js .in-iframe .exe-content { min-height: 0; }

/* ========================================================================
   2. ENLACES
   ======================================================================== */

.exe-content a { color: #135d87; }
.exe-content a:hover,
.exe-content a:focus { color: #0e4568; }

/* ========================================================================
   3. TIPOGRAFÍA — FUENTES
   Encode Sans: texto general · Roboto: títulos y encabezados
   ======================================================================== */

@font-face {
    font-family: 'Encode Sans';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/encode-sans-v23-latin-300.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Encode Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/encode-sans-v23-latin-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Encode Sans';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/encode-sans-v23-latin-600.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v51-latin-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/roboto-v51-latin-600.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/roboto-v51-latin-700.woff2') format('woff2');
    font-display: swap;
}

body,
.exe-content,
.exe-content p,
.exe-content li,
.exe-content td,
.exe-content th,
#siteNav a,
.exe-content .iDevice_buttons input,
.exe-content .iDevice_buttons button {
    font-family: 'Encode Sans', Arial, sans-serif;
}

.exe-content .page-title,
.exe-content h2,
.exe-content h3,
.exe-content h4,
.exe-content h5,
.exe-content .box-title,
.exe-content .package-title {
    font-family: 'Roboto', Arial, sans-serif;
}

/* ========================================================================
   4. PACKAGE TITLE
   ======================================================================== */

.exe-content .package-title {
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: .4em;
    line-height: 1.2em;
}

.exe-single-page .package-header .package-title {
    color: #2a2a2a;
    font-size: 1.25rem;
    font-weight: 300;
    text-align: left;
    margin-bottom: 2em;
}

.exe-single-page .package-node { margin-bottom: 3.5em; }
.exe-single-page .package-subtitle { top: -2.1em; }
.exe-single-page main.page > section { min-height: 4em; }

/* ========================================================================
   5. TÍTULO DE PÁGINA (.page-title)
   ======================================================================== */

.exe-content .page-title {
    background: transparent;
    border: none;
    border-bottom: 1px solid #dcdcdc;
    margin: 0 0 1.6em 0;
    padding: 0 0 0.6em 0;
    color: #135d87;
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: -0.01em;
    text-align: left;
    text-transform: none;
    text-shadow: none;
    display: block;
    line-height: 1.25;
    min-height: 0;
    position: relative;
}

.exe-content .page-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 3.2em;
    height: 10px;
    background: #deb13c;
    display: block;
}

/* ========================================================================
   6. ENCABEZADOS H2–H5
   ======================================================================== */

.exe-content h2 {
    font-size: 1.6em;
    font-weight: 600;
    color: #135d87;
    margin: 1.8em 0 0.7em 0;
    padding: 0 0 0.55em 0;
    line-height: 1.3;
    letter-spacing: -0.005em;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    display: block;
    text-transform: uppercase !important;
}

.exe-content h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 2.88em;
    height: 6px;
    background: #deb13c;
    display: block;
}

.exe-content h3 {
    font-size: 1.4em;
    font-weight: 600;
    color: #5b6776;
    margin: 1.5em 0 0.6em 0;
    padding: 0 0 0.45em 0;
    line-height: 1.35;
    border-bottom: 1px solid #dcdcdc;
    display: block;
    text-transform: uppercase !important;
}

/* El H3 conserva el subrayado fino pero NO lleva barra de acento mostaza:
   ese acento queda reservado al H2, para marcar la jerarquía entre ambos. */

.exe-content h4 {
    font-size: 1.05em;
    font-weight: 600;
    color: #2a2a2a;
    margin: 1.2em 0 0.4em 0;
    text-transform: uppercase !important;
}

.exe-content h5 {
    font-size: 1em;
    font-weight: 600;
    color: #6b7280;
    margin: 1em 0 0.3em 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========================================================================
   7. PÁRRAFOS Y TEXTO
   ======================================================================== */

.exe-content p {
    color: #2a2a2a;
    line-height: 1.9;
    margin: 0.9em 0;
}

.exe-content strong { color: #2a2a2a; font-weight: 600; }

.package-subtitle {
    font-size: .95em;
    color: #6b7280;
    position: relative;
    top: -.15em;
}

/* ========================================================================
   8. LAYOUT GENERAL
   ======================================================================== */

#node-content-container.exe-content #node-content {
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 1280px;
    margin: 0 auto;
    display: block;
}

.exe-web-site .page-content,
#exe-client-search,
.exe-web-site main > header,
.exe-web-site #siteFooterContent,
.exe-export .exe-content {
    max-width: 1100px;
    padding: 0 24px;
    margin: 0 auto;
}

.exe-web-site .exe-content { max-width: none; padding: 0; }
.exe-export main { padding-top: 1.5em; }
.exe-web-site main { padding-top: 5em; }

/* ========================================================================
   9. WEB SITE — LAYOUT CON MENÚ LATERAL
   ======================================================================== */

.exe-web-site .exe-content {
    max-width: 1280px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 0;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        inset 280px 0 0 0 #f5f6f7,
        inset 281px 0 0 0 #e5e7eb;
}

body.siteNav-off.exe-web-site .exe-content,
body.siteNav-off .exe-web-site .exe-content {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.exe-web-site main.page {
    padding-top: 2em;
    padding-left: 255px;
    padding-right: 10px;
    padding-bottom: 2em;
}

.exe-web-site #siteFooter {
    padding: 20px 40px 20px 320px;
}

body.siteNav-off main.page,
body.siteNav-off #siteFooter {
    padding-left: 40px;
}

/* ========================================================================
   10. MENÚ LATERAL (#siteNav)
   ======================================================================== */

#siteNav {
    float: left;
    background: #f5f6f7;
    width: 280px;
    padding-top: 66px;
    padding-left: 8px;
    font-size:0.8rem;
}

html.js .in-iframe.exe-web-site::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 281px;
    height: 100%;
    background: #f5f6f7;
    box-shadow: inset -1px 0 0 0 #e5e7eb;
    pointer-events: none;
    z-index: -1;
}

body.siteNav-off::after { display: none; }
#siteNav .other-section { display: none; }
#sidebar-nav.fixed { position: fixed; }
body.siteNav-off #siteNav { display: none; }
body.siteNav-off .exe-content { box-shadow: none; }

#siteNav ul { margin: 0; padding: 0; list-style: none; }
#siteNav ul ul { margin-top: 5px; }
#siteNav li { margin: 0 0 5px 0; padding: 0; list-style: none; }

#siteNav a {
    color: #2a2a2a;
    display: block;
    padding: 8px 15px;
    border-radius: 0;
    max-width: 260px;
    transition: background-color 0.3s ease;
}

#siteNav a.active {
    background: #ffffff;
    color: #135d87;
    border-left: 3px solid #deb13c;
    font-weight: 600;
}

#siteNav a.highlighted-link {
    color: #135d87;
    background: #e5e7eb;
}

#siteNav a.highlighted-link:hover,
#siteNav a.highlighted-link:focus { background: #ffffff; }

#siteNav a:hover {
    background: #eaecef;
    text-decoration: none;
    color: #135d87;
}

#siteNav ul ul a { padding-left: 35px; font-size: 0.95em; }
#siteNav ul ul ul a { padding-left: 55px; font-size: 0.9em; }
#siteNav ul ul ul ul a { padding-left: 75px; }

/* ========================================================================
   11. BOTONES DE NAVEGACIÓN Y PAGINACIÓN
   ======================================================================== */

.nav-buttons .nav-button,
button.toggler {
    position: fixed;
    top: 10px;
    left: 15px;
    display: block;
    width: 40px;
    height: 40px;
    background: #deb13c url(img/icons.png) no-repeat 0 0;
    background-size: auto 40px;
    border-radius: 50%;
    z-index: 999;
    border: 0;
    transition: background-color 0.3s ease;
}

.nav-buttons span.nav-button { cursor: not-allowed; background-color: #b7b7b7; }
.nav-buttons .nav-button-left { background-position: -80px 0; }
.nav-buttons .nav-button-right { background-position: -120px 0; }
button#searchBarTogger { background-position: -40px 0; display: none; }
.exe-search-on #searchBarTogger { display: inline; }
button#siteNavToggler { left: 260px; }
button#searchBarTogger { left: 310px; }
body.siteNav-off button#siteNavToggler { left: 65px; }
body.siteNav-off button#searchBarTogger { left: 115px; }

.nav-buttons a:hover,
.nav-buttons a:focus,
button.toggler:hover,
button.toggler:focus {
    background-color: #0e4568;
    border-color: #0e4568;
}

.nav-buttons .nav-button span,
.box-toggle span,
#exe-client-search-reset span,
#packageLicense .license-label {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

.nav-buttons .nav-button-right { left: auto; right: 15px; }

/* ========================================================================
   12. CAJAS (BOX / IDEVICE)
   ======================================================================== */

.exe-content .box { margin: 20px 0; border: none; background-color: #fff; }
.exe-web-site .exe-content .box { margin: 40px 0; }
.exe-content .box-head { border-bottom: 0; gap: 10px; }

#node-content-container .box-content {
    background: #ffffff;
    border: none;
    padding: 10px;
    border-radius: 0;
}

article.box.idevice-element-in-content[mode="export"] .idevice_node { background: none; }
#node-content-container.exe-content .box.hidden-idevices { border-style: solid; }
.exe-content .box header { min-height: 45px; }
.exe-content .box-title { color: #135d87; font-size: 1.5rem; }
.exe-content .box-head .exe-icon { float: left; }
#node-content-container.exe-content .box-head .exe-icon { width: 60px; height: 60px; font-size: 40px; box-shadow: none;}
#node-content-container.exe-content .box-head .exe-icon img { height: 40px; }

.exe-export .box { position: relative; }

.exe-export .box-toggle {
    width: 40px;
    height: 40px;
    background: url(img/icons.png) no-repeat -200px 0;
    background-size: auto 40px;
    border-radius: 50%;
    border: 0;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.6;
}

.exe-export .box-head:hover .box-toggle,
.exe-export .box-toggle:focus { opacity: 1; }
.exe-export .no-header .box-toggle { top: -10px; }
.exe-export .minimized .box-toggle { background-position: -160px 0; }
.exe-export .box-icon img { display: block; float: left; margin-right: 10px; width: 40px; height: auto; }
.exe-export .box-title { padding-top: 8px; padding-left: 5px;}
.exe-export .box.minimized .box-head { border-bottom: 1px solid #e5e7eb; }
.exe-export .box.no-header.minimized .box-head { border-color: #fff; }

.exe-export .box .box-content {
    background: #ffffff;
    border: none;
    padding: 20px;
    border-radius: 0;
    overflow: auto;
}

.exe-export .box.no-header .box-content { background: none; border: none; padding: 20px 0; }

/* ========================================================================
   13. BARRA DE BÚSQUEDA
   ======================================================================== */

#exe-client-search { display: none; margin-bottom: 30px; }
#exe-client-search-text { max-width: 80%; max-width: calc(100% - 90px); display: inline; }

#exe-client-search-submit {
    text-indent: -999em;
    background: #135d87 url(img/icons.png) no-repeat -41px -1px;
    background-size: auto 40px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 0;
}

#exe-client-search-reset.visible {
    background: url(img/icons.png) no-repeat -242px -1px;
    background-size: auto 40px;
    width: 38px;
    height: 38px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
    left: -5px;
    opacity: 0.6;
    border-radius: 0;
}

#exe-client-search-reset:hover,
#exe-client-search-reset:focus { opacity: 1; }
#exe-client-search-submit:hover,
#exe-client-search-submit:focus { background-color: #0e4568; }

#exe-client-search-results-list ul,
#exe-client-search-results-list li { margin: 2em 0; padding: 0; list-style: none; }
#exe-client-search-results-list li { margin: 0 0 1em 0; }
#exe-client-search-results-list p { margin-top: 2em; }

/* ========================================================================
   14. LICENCIAS Y PIE
   ======================================================================== */

#siteFooter { margin-bottom: 2em; color: #6b7280; font-size: 0.95em; background-color: #f5f6f7; }

#packageLicense {
    text-align: left;
    font-size: 0.9em;
    color: #6b7280;
    line-height: 1em;
    margin: 2.5em 0 2em 0;
    border: 1px solid transparent;
    border-radius: 0;
}

#packageLicense p { margin: 0; }

#packageLicense a {
    color: #6b7280;
    text-transform: capitalize;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    line-height: 15px;
}

#packageLicense a:hover,
#packageLicense a:focus { text-decoration: none; color: #135d87; }

#packageLicense.propietary { position: absolute; overflow: hidden; clip: rect(0,0,0,0); height: 0; }
#packageLicense.cc { padding: 0 20px 0 90px; background: url(img/licenses.gif) no-repeat 0 0; }
#packageLicense.cc-by-sa    { background-position: 0 -100px; }
#packageLicense.cc-by-nd    { background-position: 0 -200px; }
#packageLicense.cc-by-nc    { background-position: 0 -300px; }
#packageLicense.cc-by-nc-sa { background-position: 0 -400px; }
#packageLicense.cc-by-nc-nd { background-position: 0 -500px; }
#packageLicense.cc-0        { background-position: 0 -600px; }

/* ========================================================================
   15. BOTONES IDEVICE Y BOOTSTRAP
   ======================================================================== */

.exe-content .iDevice_buttons input,
.exe-content .iDevice_buttons button {
    background: #fff;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
    border-radius: 0;
    transition: 0.3s ease;
}

.exe-content .iDevice_buttons input:hover,
.exe-content .iDevice_buttons input:focus,
.exe-content .iDevice_buttons button:hover,
.exe-content .iDevice_buttons button:focus {
    box-shadow: 2px 2px 4px rgba(0,0,0,0.08);
    color: #2a2a2a;
    border-color: #135d87;
}

.exe-content .btn-primary { background-color: #135d87; border-color: #135d87; }
.exe-content .btn-primary:hover,
.exe-content .btn-primary:focus { background-color: #0e4568; border-color: #0e4568; }

/* ========================================================================
   16. CONTADOR DE PÁGINA
   ======================================================================== */

.page-counter {
    display: inline;
    float: right;
    margin: 0 0 0.5em 20px;
    font-size: 0.9em;
    color: #6b7280;
    font-weight: 300;
}

.page-counter .page-counter-sep { margin: 0 0.1em; }

.exe-web-site .page-counter {
    position: fixed;
    top: 18px;
    right: 70px;
    margin: 0;
    font-size: 0.9em;
    color: #6b7280;
    padding: 0 8px;
    border-radius: 0;
    text-align: left;
}

/* ========================================================================
   17. MODO PROFESOR
   ======================================================================== */

#teacher-mode-toggler-wrapper { float: right; margin: 0 0 0 1em; }

#teacher-mode-toggler.form-check-input:checked {
    background-color: #135d87;
    border-color: #135d87;
    font-size: 0.9em;
    margin-right: 0.6em;
}

label[for="teacher-mode-toggler"] {
    font-size: 0.9em;
    color: #6b7280;
    position: relative;
    top: -0.2em;
}

/* ========================================================================
   18. CAJAS SEMÁNTICAS — sombreado ligero
   ======================================================================== */

.bua_ejemplo,
.bua_definicion,
.bua_importante {
    display: block;
    margin: 1.8em 60px;
    padding: 16px 22px 14px 22px;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 0px 5px 5px 0px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14);
    position: relative;
}

.bua_ejemplo    { border-left: 8px solid #135d87; }
.bua_definicion { border-left: none; font-style: italic; font-size: 1em; color: #2a2a2a; line-height: 1.7; }
.bua_importante { border-left: 8px solid #deb13c; background-color:rgba(222,177,60,0.3);}

.bua_ejemplo::before,
.bua_definicion::before,
.bua_importante::before {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    background: transparent;
    padding: 0;
    position: static;
    box-shadow: none;
    border-radius: 0;
}

.bua_ejemplo::before    { content: "Ejemplo";    color: #135d87; }
.bua_definicion::before { content: "Definición"; color: #6b7280; }
.bua_importante::before { content: "Importante"; color: #deb13c; }

/* ========================================================================
   19. TABLAS — minimalistas, líneas finas, sin esquinas redondeadas
   ======================================================================== */

.bua_tabla_horizontal,
.bua_tabla_vertical {
    margin: 1.8em auto;
    border-collapse: collapse;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    overflow: visible;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14);
    width: 80%;
}

.bua_tabla_horizontal th, .bua_tabla_horizontal td,
.bua_tabla_vertical   th, .bua_tabla_vertical   td {
    padding: 10px 14px;
    vertical-align: top;
    text-align: left;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    color: #2a2a2a;
}

.bua_tabla_horizontal tbody tr:last-child td,
.bua_tabla_horizontal tbody tr:last-child th,
.bua_tabla_horizontal > tr:last-child td,
.bua_tabla_horizontal > tr:last-child th,
.bua_tabla_vertical   tr:last-child td,
.bua_tabla_vertical   tr:last-child th { border-bottom: none; }

/* Cabecera de tabla horizontal: SIEMPRE una sola fila, haya o no <thead>.
   - Con <thead> (lo añade Word si marcas "fila de cabecera", o eXe al editar):
     se pinta la fila del thead.
   - Sin <thead>: se pinta la primera fila del <tbody>.
   El "tbody:first-child" es la clave: cuando SÍ hay <thead>, el <tbody> deja
   de ser el primer hijo y su primera fila ya NO se pinta como cabecera
   (eso evita el bug del "encabezado repetido"). */
.bua_tabla_horizontal thead th,
.bua_tabla_horizontal thead td,
.bua_tabla_horizontal > tbody:first-child > tr:first-child > th,
.bua_tabla_horizontal > tbody:first-child > tr:first-child > td,
.bua_tabla_horizontal > tr:first-child > th,
.bua_tabla_horizontal > tr:first-child > td {
    background: #f5f6f7;
    color: #135d87;
    font-weight: 600;
    border-bottom: 3px solid #deb13c;
}

/* Hover solo en filas de datos (nunca en la cabecera) */
.bua_tabla_horizontal thead ~ tbody tr:hover td,
.bua_tabla_horizontal > tbody:first-child > tr:not(:first-child):hover td { background: #fafbfc; }

.bua_tabla_vertical tr td:first-child,
.bua_tabla_vertical tr th:first-child {
    background: #f5f6f7;
    color: #135d87;
    font-weight: 600;
    border-right: 3px solid #deb13c;
}

.bua_tabla_vertical tr:hover td:not(:first-child) { background: #fafbfc; }

/* ========================================================================
   20. ETIQUETA LATERAL "CURSO CID 2026-27"
   ======================================================================== */

@media screen and (min-width: 1320px) {
    .exe-web-site .exe-content::before {
        content: 'CURSO CID 2026-27';
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #ffffff;
        background: #135d87;
        padding: 24px 8px;
        writing-mode: vertical-lr;
        white-space: nowrap;
        font-size: 1.8rem;
        font-weight: 600;
        letter-spacing: 3px;
        border-radius: 0;
        border-left: 4px solid #deb13c;
        box-shadow: 0 0 8px rgba(0,0,0,0.08);
        z-index: 1000;
        text-transform: uppercase;
    }
}

/* ========================================================================
   21. RESPONSIVE
   ======================================================================== */

@media (max-width: 767.98px) {
    #siteNav { width: 251px; }

    .exe-web-site .exe-content {
        box-shadow:
            inset 251px 0 0 0 #f5f6f7,
            inset 252px 0 0 0 #e5e7eb;
    }

    html.js .in-iframe.exe-web-site::after { width: 252px; }
    #siteNav a { max-width: 235px; }
    button#siteNavToggler { left: 232px; }
    button#searchBarTogger { left: 282px; }

    .exe-web-site main.page,
    .exe-web-site #siteFooter { padding-left: 270px; }
}

@media (max-width: 575.98px) {
    #siteNav {
        width: 100%;
        float: none;
        padding: 68px 10px 20px 10px;
        min-height: 0 !important;
        height: auto !important;
    }

    .exe-web-site .exe-content { box-shadow: none; }
    body.exe-web-site::after { display: none; }
    body.exe-web-site main.page { padding-top: 2.5em; padding-left: 0; }
    body.exe-web-site #siteFooter { padding-left: 0; }
    .exe-web-site.siteNav-off main.page { padding-top: 5.5em; }
    .nav-buttons .nav-button, button.toggler { position: absolute; }
    #siteNav a { max-width: 100%; }
    #sidebar-nav.fixed { position: relative; }
    button#siteNavToggler { left: 65px; }
    button#searchBarTogger { left: 115px; }

    .exe-web-site .page-counter { background: none; position: absolute; }
    .exe-web-site .page-counter .page-counter-label {
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
    }
}

/* ========================================================================
   22. IMPRESIÓN
   ======================================================================== */

@media print {
    html body.exe-export { background: #fff; }
    .exe-content { color: #000; padding: 0; }
    @page { margin: 1.5cm; }
    #packageLicense.cc { background: none; padding-left: 0; }
    .exe-export .box-toggle { display: none; }
    .exe-web-site #siteNav,
    .exe-web-site .nav-buttons,
    .exe-web-site button.toggler { display: none; }
    .exe-web-site #siteFooter,
    .exe-web-site main.page { padding-left: 0; padding-right: 0; }
    .exe-web-site main.page { padding-top: 1em; }
}

/* click-overrides:start */

/* ========================================================================
   23. FX
   ======================================================================== */

/* --- Acordeones --- */
.exe-content .fx-accordion-title,
.exe-content .fx-accordion-title:hover,
.exe-content .fx-accordion-title:focus,
.exe-content .fx-accordion-title:active {
    background-color: rgb(222, 177, 60) !important;
}

/* --- Pestañas --- */
.exe-tabs h2 {min-height:1.8em;}

/* click-overrides:end */

/* ========================================================================
   iDevices sin título: ocultar cabecera (solo en exportación)
   ======================================================================== */

.exe-export article.no-header > header.box-head,
.exe-web-site article.no-header > header.box-head {
    display: none;
}

/* ========================================================================
   iDevices con título: cabecera azul + borde perimetral
   ======================================================================== */

.exe-export article.box:not(.no-header),
.exe-web-site article.box:not(.no-header) {
    border: 1px solid #135d87;
}

.exe-export article.box:not(.no-header) > header.box-head,
.exe-web-site article.box:not(.no-header) > header.box-head {
    background-color: #135d87;
}

.exe-export article.box:not(.no-header) > header.box-head .box-title,
.exe-web-site article.box:not(.no-header) > header.box-head .box-title {
    color: #ffffff;
}

/* ========================================================================
   Logos institucionales en el pie de página
   ======================================================================== */

#siteFooterContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em 0;
}

#siteFooter-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

#siteFooter-logos img {
    height: 36px;
    width: auto;
    opacity: 1;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    transition: none;
}

#siteFooter-logos .logo-bua  { height: 40px; }
#siteFooter-logos .logo-cid  { height: 32px; }
#siteFooter-logos .logo-ua   { height: 28px; }

/* quick-overrides:start */
/* logo-editor:path=img/icons.png;enabled=0;size=130;position=top-right;mx=20;my=14 */
/* content-width-editor:mode=percent;px=1500;pct=90;center=1;outer=#eef1f4 */
/* bg-editor:path=;enabled=0;repeat=no-repeat;soft=35 */
/* header-image-editor:path=img/custom-header.png;enabled=1;hide=0;height=400;fit=cover;pos=right center;repeat=no-repeat */
/* footer-image-editor:path=;enabled=0;height=90;fit=contain;pos=center center;repeat=no-repeat */
/* no-header-editor:compact=0 */
/* nav-icons-editor:prev=;next=;menu= */
body.exe-web-site,
body.exe-ims,
body.exe-scorm,
body.exe-single-page {
  background-color: #f5f6f7;
  line-height: 1.75;
}

#node-content-container.exe-content #node-content,
.exe-web-site .page-content,
.exe-ims .page-content,
.exe-scorm .page-content,
.exe-single-page .page-content,
.exe-web-site main>header,
.exe-ims main>header,
.exe-scorm main>header,
.exe-single-page main>header,
.exe-web-site #siteFooterContent,
.exe-ims #siteFooterContent,
.exe-scorm #siteFooterContent,
.exe-single-page #siteFooterContent,
.exe-export .exe-content {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.exe-content {
  line-height: 1.75;
}

.exe-content .page-title {
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-top: 1.8em;
  margin-bottom: 0.65rem;
}

#siteNav a:hover,
#siteNav a:focus {
  color: #deb13c;
}

.exe-export #header,
.exe-web-site .exe-content .package-header,
.exe-ims .exe-content .package-header,
.exe-scorm .exe-content .package-header,
.exe-single-page .exe-content .package-header {
  background-image: url("img/custom-header.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  height: 400px !important;
  min-height: 400px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
}

/* Franja oscura semitransparente — selectores reales del HTML exportado */
.exe-export #header,
.exe-web-site .exe-content .package-header,
.exe-ims .exe-content .package-header,
.exe-scorm .exe-content .package-header,
.exe-single-page .exe-content .package-header {
  position: relative !important;
  overflow: visible !important;
}

.exe-export #header::before,
.exe-web-site .exe-content .package-header::before,
.exe-ims .exe-content .package-header::before,
.exe-scorm .exe-content .package-header::before,
.exe-single-page .exe-content .package-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(19, 93, 135, 0.75) 5%,
    rgba(19, 93, 135, 0.35) 60%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 1;
}

/* Título del proyecto anclado sobre la franja */
.exe-export #headerContent,
.exe-export .exe-content .package-title {
  font-family: 'Roboto', sans-serif !important;
  position: absolute !important;
  bottom: 38px !important;
  left: 32px !important;
  right: 32px !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-size: clamp(1.5rem, 3vw, 3.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45) !important;
}

/* Subtítulo del proyecto */
.exe-export .exe-content .package-subtitle {
  position: absolute !important;
  bottom: 16px !important;
  left: 34px !important;
  right: 32px !important;
  z-index: 2 !important;
  color: rgba(222,177,60,0.9) !important;
  font-size: clamp(0.72rem, 1.2vw, 0.88rem) !important;
  font-family: 'Encode Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  top: auto !important;
}


/* ======================================================================== 
                            COSITAS
========================================================================  */

/* sobre las imagenes */

.figcaption {text-align: center;}
.figcaption.header {text-transform: uppercase;}
.exe-content img {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 5px;
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}


.bua_pie {
    font-family: 'Encode Sans', Arial, sans-serif;
    font-size: 0.85em;
    font-style: italic;
    color: #6b7280;
    text-align: center;
    line-height: 1.4;
    margin-top: 0.5em;
    margin-bottom: 1.8em;
}

/* Los iconos de los iDevices/cajas no se centran ni llevan sombra */

.exe-content .exe-icon img,
.exe-content .box-icon img {
  display: inline;
  margin: 0;
  max-width: none;
  box-shadow: none;
  border-radius: 0;
}

/* VIDEOS INCRUSTADOS */

.bua_video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Relación 16:9 */
  height: 0;
  overflow: hidden;
  margin: 1em 0;
}

.bua_video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* esto es una prueba de edición */