/* Default style (to review) */ 
body.exe-export { 
 padding: 1em 0; 
} 
body.exe-web-site { 
 padding: 0; 
} 
.exe-content a { 
 color: #d76b4a; 
} 
.exe-content a:hover, 
.exe-content a:focus { 
 color: #993d28; 
} 
#node-content-container.exe-content #node-content { 
 padding-top: 20px; 
 padding-bottom: 20px; 
 max-width: 1280px; 
 margin: 0 auto; 
 display: block; 
} 
.js .exe-export .exe-content { 
 min-height: 100vh; 
} 
.js .in-iframe .exe-content { 
 min-height: 0; 
} 
.exe-content .package-title {
  background-color: #c8102e !important;   /* rojo institucional JCYL */
  color: #ffffff !important;              /* texto blanco */
  font-size: 1.2rem;                      /* más pequeño que antes */
  font-weight: 600;                       
  padding: 12px 20px;                     /* un poco más compacto */
  
  display: block;
  width: 100%;
  margin: 0 0 20px 0;
  box-sizing: border-box;
  border-radius: 0;
}
.exe-content .page-title { 
 color: #333333 !important; /* Gris oscuro institucional */
 font-size: 1.7rem; 
 text-align: left; 
} 
.exe-single-page .package-header h1 { 
 color: #333; 
 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; 
} 
.exe-content .box { 
 margin: 20px 0; 
 border: none; 
 background-color: transparent; 
} 
.exe-web-site .exe-content .box { 
 margin: 40px 0; 
} 
.exe-content .box-head { 
 border-bottom: 0; 
} 
#node-content-container.exe-content .box { 
 border: 1px dotted #ddd; 
} 
#node-content-container.exe-content .box.hidden-idevices { 
 border-style: solid; 
} 
.exe-content .box header { 
 min-height: 60px; 
} 
.exe-content .box-title { 
 color: #054d4d; 
 font-size: 1.5rem; 
} 
.exe-content .box-head .exe-icon { 
 float: left; 
} 
.exe-web-site .page-content, 
#exe-client-search, 
.exe-web-site main > header, 
.exe-web-site #siteFooterContent, 
.exe-export .exe-content { 
 max-width: 1280px; 
 padding: 0 20px; 
 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: 4.5em; 
} 
/* siteNav */ 
#siteNav { 
 float: left; 
 background: #f6f6f6; 
 _border-right: 1px solid #f0f0f0; 
 width: 300px; 
 padding-top: 66px; 
 padding-left: 8px; 
} 
.exe-web-site .exe-content { 
 box-shadow: 
 inset 300px 0 0 0 #f6f6f6, 
 inset 301px 0 0 0 #f0f0f0; 
} 
#siteFooter { 
 margin-bottom: 2em; 
 color: #555; 
 font-size: 0.95em; 
} 
#siteNav .other-section { 
 display: none; 
} 
#sidebar-nav.fixed { 
 position: fixed; 
} 
body.siteNav-off #siteNav { 
 display: none; 
} 
body.siteNav-off .exe-content { 
 box-shadow: none; 
} 
.exe-web-site main.page { 
 padding-top: 4.5em; 
 padding-left: 320px; 
 padding-right: 20px; 
 /* min-height: calc(100vh - 300px); */ 
} 
.exe-web-site #siteFooter { 
 padding: 20px 20px 20px 320px; 
} 
body.siteNav-off main.page, 
body.siteNav-off #siteFooter { 
 padding-left: 20px; 
} 
#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: #000; 
 display: block; 
 padding: 8px 15px; 
 border-radius: 8px; 
 max-width: 280px; 
 transition: background-color 0.5s ease; 
} 
#siteNav a.active { 
 background: #fff; 
 color: #d76b4a; 
} 
#siteNav a.highlighted-link { 
 color: #d76b4a; 
 background: #ededed; 
} 
#siteNav a.highlighted-link:hover, 
#siteNav a.highlighted-link:focus { 
 background: #fff; 
} 
#siteNav a:hover { 
 background: #f2f2f2; 
 text-decoration: none; 
} 
#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; 
} 
/* pagination */ 
.nav-buttons .nav-button, 
button.toggler { 
 position: fixed; 
 top: 10px; 
 left: 15px; 
 display: block; 
 width: 40px; 
 height: 40px; 
 background: #629292 url(img/icons.png) no-repeat 0 0; 
 background-size: auto 40px; 
 border-radius: 50%; 
 z-index: 999; 
 border: 0; 
 transition: background-color 0.5s 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: 280px; 
} 
button#searchBarTogger { 
 left: 330px; 
} 
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: #066d6d; 
 border-color: #066d6d; 
} 
.nav-buttons .nav-button span, 
.box-toggle span, 
#exe-client-search-reset span, 
#packageLicense .license-label { 
 position: absolute; 
 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
 clip: rect(1px, 1px, 1px, 1px); 
} 
.package-subtitle { 
 font-size: .95em; 
 color: #666; 
 position: relative; 
 top: -.15em; 
} 
.nav-buttons .nav-button-right { 
 left: auto; 
 right: 15px; 
} 
/* Box toggler */ 
.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; 
} 
#node-content-container.exe-content .box-head .exe-icon { 
 width: 60px; 
 height: 60px; 
 font-size: 40px; 
} 
#node-content-container.exe-content .box-head .exe-icon img { 
 height: 40px; 
} 
.exe-export .box-icon img { 
 display: block; 
 float: left; 
 margin-right: 10px; 
} 
.exe-export .box-icon img { 
 width: 40px; 
 height: auto; 
} 
.exe-export .box-title { 
 padding-top: 5px; 
} 
.exe-export .box.minimized .box-head { 
 border-bottom: 1px solid #ddd; 
} 
.exe-export .box.no-header.minimized .box-head { 
 border-color: #fff; 
} 
.exe-export .box .box-content { 
 background: transparent; 
 border: 1px solid #ddd; 
 padding: 20px; 
 border-radius: 8px; 
 overflow: auto; 
} 
.exe-export .box.no-header .box-content { 
 background: none; 
 border: none; 
 padding: 20px 0; 
} 
/* Search bar */ 
#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: #629292 url(img/icons.png) no-repeat -41px -1px; 
 background-size: auto 40px; 
 width: 38px; 
 height: 38px; 
 border: none; 
 border-radius: 4px; 
} 
#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: 4px; 
} 
#exe-client-search-reset:hover, 
#exe-client-search-reset:focus { 
 opacity: 1; 
} 
#exe-client-search-submit:hover, 
#exe-client-search-submit:focus { 
 background-color: #066d6d; 
} 
#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; 
} 
/* Licenses */ 
#packageLicense { 
 text-align: left; 
 font-size: 0.9em; 
 color: #555; 
 line-height: 1em; 
 margin: 2.5em 0 2em 0; 
 border: 1px solid transparent; 
 border-radius: 2px; 
} 
#packageLicense p { 
 margin: 0; 
} 
#packageLicense a { 
 color: #666; 
 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: #d76b4a; 
} 
#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; 
} 
#packageLicensea.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; 
} 
/* iDevice buttons */ 
.exe-content .iDevice_buttons input, 
.exe-content .iDevice_buttons button { 
 background: #fff; 
 color: #555; 
 border: 1px solid #ccc; 
 padding: 4px 10px; 
 border-radius: 4px; 
 transition: 0.5s 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 #dbdbdb; 
 color: #000; 
 border-color: #bbb; 
} 
/* Page counter */ 
.page-counter { 
 display: inline; 
 float: right; 
 margin: 0 0 0.5em 20px; 
 font-size: 0.9em; 
 color: #777; 
 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: #777; 
 padding: 0 8px; 
 border-radius: 4px; 
 text-align: left; 
} 
/* Teacher mode */ 
#teacher-mode-toggler-wrapper { 
 float: right; 
 margin: 0 0 0 1em; 
} 
#teacher-mode-toggler.form-check-input:checked { 
 background-color: #078e8e; 
 border-color: #078e8e; 
 font-size: 0.9em; 
 margin-right: 0.6em; 
} 
label[for="teacher-mode-toggler"] { 
 font-size: 0.9em; 
 color: #777; 
 position: relative; 
 top: -0.2em; 
} 
/* Bootstrap buttons */ 
.exe-content .btn-primary { 
 background-color: #066d6d; 
 border-color: #066d6d; 
} 
.exe-content .btn-primary:hover, 
.exe-content .btn-primary:focus { 
 background-color: #078e8e; 
 border-color: #078e8e; 
} 
/* Responsive design */ 
@media (max-width: 767.98px) { 
 #siteNav { 
 width: 251px; 
 } 
 .exe-web-site .exe-content { 
 box-shadow: 
 inset 251px 0 0 0 #f6f6f6, 
 inset 252px 0 0 0 #f0f0f0; 
 } 
 #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 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); /* IE6, IE7 */ 
 clip: rect(1px, 1px, 1px, 1px); 
 } 
} 
@media print { 
 /* Node in new page: section.package-node{page-break-after:always} */ 
 html body.exe-export { 
 background: #fff; 
 } 
 .exe-content { 
 color: #000; 
 padding: 0; 
 } 
 @page { 
 margin: 1.5cm; 
 } 
 /* Uncomment this to print URL after links: 
 a{font-weight:bolder;text-decoration:none!important} 
 a[href^=http]:after{content:" <" attr(href) "> "} 
 */ 
 #packageLicense.cc { 
 background: none; 
 padding-left: 0; 
 } 
 .exe-export .box-toggle { 
 display: none; 
 } 
 /* Website */ 
 .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; 
 } 
} 
@media print { 
 .page > header { 
 position: static; /* avoid overlapping in print */ 
 height: auto; 
 background-size: contain; 
 } 
} 
/* =========================================================
   REPARACIÓN FINAL: BAJAR CONTENIDO Y BARRA ROJA
   ========================================================= */

/* 1. Limpieza de duplicados anteriores */
header::after, .page header::after, main::after, 
.exe-web-site header::after, #node-content-container::before,
.page-content::before {
    content: none !important;
    display: none !important;
}

/* 2. Bajamos la barra roja y todo el contenido central */
body.exe-web-site main.page {
    /* Aumentamos a 180px para dar espacio de sobra al logo */
    padding-top: 180px !important; 
}

/* 3. Bajamos los iDevices/Menú de la izquierda */
#siteNav {
    /* Alineamos el inicio del menú con la nueva altura del contenido */
    padding-top: 160px !important;
}

/* 4. Posicionamos el LOGO por encima de la barra roja */
.exe-web-site main::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    
    /* Ubicación en el hueco superior izquierdo de la zona central */
    top: 20px !important;    
    left: 340px !important;  
    
    width: 180px !important;
    height: 100px !important;
    
    background: url('img/LOGOJUNTAEDU.jpeg') no-repeat left center/contain !important;
    z-index: 10000 !important;
    visibility: visible !important;
}

/* 5. Ajuste de botones circulares para que no floten en medio */
.nav-buttons .nav-button, 
button.toggler, 
#siteNavToggler, 
#searchBarTogger {
    /* Los subimos un poco para que queden en la línea superior del logo */
    top: 30px !important; 
    background-color: #c8102e !important;
    background-image: url('img/icons.png') !important;
    z-index: 10001 !important;
}

/* 6. Ajuste para dispositivos móviles */
@media (max-width: 767.98px) {
    .exe-web-site main::before {
        left: 20px !important;
        top: 10px !important;
        width: 140px !important;
    }
    body.exe-web-site main.page {
        padding-top: 140px !important;
    }
    #siteNav {
        padding-top: 120px !important;
    }
}
/* =========================================================
   CAMBIO DE COLORES: SUBTÍTULOS Y BORDE DE CONTENIDO
   ========================================================= */

/* 1. Color gris para subtítulos de subapartados (h2, h3) */
.exe-content h2, 
.exe-content h3, 
.exe-content .iDevice_title {
    color: #777777 !important; /* Gris medio */
    font-weight: 600;
}

/* 2. Cambiar el borde gris del contenido central por ROJO */
#node-content-container.exe-content .box {
    border: 1px solid #c8102e !important; /* Rojo institucional JCYL */
}

/* 3. Asegurar que los títulos de los bloques (iDevices) también sean grises si es necesario */
.exe-content .box-title {
    color: #333333 !important; /* Gris oscuro para coherencia */
}
/* =========================================================
   CUADRO DE CONTENIDO: ROJO INTERMEDIO (VISIBLE Y SUAVE)
   ========================================================= */

/* 1. ELIMINAR FLECHAS Y BOTONES DE OCULTAR */
.box-toggle, 
.exe-export .box-toggle, 
button.toggler.box-toggle,
.iDevice_buttons, 
.toggle-iDevice,
.exe-content .box-head .exe-icon-toggle {
    display: none !important;
}

/* 2. LIMPIAR BORDES DE CABECERAS (Para que el título flote arriba) */
#node-content-container.exe-content .box,
.exe-content .box-head {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. APLICAR BORDE ROJO MÁS CLARO Y SUAVE AL DESARROLLO */
.exe-content .box-content,
#node-content-container.exe-content .box-content {
    /* Color rojo muy claro (estilo pastel) */
    border: 1.5px solid #eec2c6 !important; 
    border-radius: 10px !important;
    background-color: #ffffff !important;
    padding: 25px !important;
    display: block !important;
    margin-top: 10px !important; 
    margin-bottom: 40px !important;
    /* Opcional: un toque de sombra muy suave para dar profundidad */
    box-shadow: 0 2px 5px rgba(200, 16, 46, 0.05) !important;
}

/* 4. TÍTULOS (Texto limpio y sin marcos) */
.exe-content .box-title {
    color: #333333 !important;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    padding: 10px 0 !important;
}

/* 5. JERARQUÍA DE GRISES: APARTADOS Y SUBAPARTADOS */

/* Apartado (Nivel superior: Gris muy oscuro) */
.exe-content h2 {
    color: #333333 !important; 
    font-weight: 700 !important;
}

/* Subapartado y Títulos de iDevice (Nivel inferior: Gris intermedio) */
.exe-content h3, 
.exe-content .iDevice_title,
.exe-content .box-title {
    color: #555555 !important; /* Un gris con más fuerza que el anterior, pero menos que el h2 */
    font-weight: 600 !important;
}
/* =========================================================
   ICONOS: CÍRCULO DINÁMICO (INVISIBLE SI ESTÁ VACÍO)
   ========================================================= */

/* 1. Contenedor: Siempre presente para poder clicar, pero invisible si está vacío */
.exe-content .box-head .exe-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    
    /* Por defecto: Totalmente transparente */
    background-color: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 50% !important;
    transition: all 0.2s ease;
}

/* 2. Cuando hay una imagen dentro, activamos el estilo visual */
.exe-content .box-head .exe-icon:has(img) {
    background-color: #ffffff !important;   /* Fondo blanco */
    border-color: #c8102e !important;       /* Borde rojo institucional */
}

/* 3. Centrado y color del icono */
.exe-content .box-head .exe-icon img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    height: 24px !important;
    width: auto !important;
    margin: 0 !important;
    /* Filtro Rojo Institucional */
    filter: invert(13%) sepia(95%) saturate(5415%) hue-rotate(346deg) brightness(85%) contrast(105%) !important;
}

/* 4. Ayuda visual SOLO en el editor: un borde gris muy tenue para saber dónde clicar */
.exe-content .box-head .exe-icon:not(:has(img)) {
    border: 1px dashed rgba(0,0,0,0.1) !important; /* Casi invisible, pero permite clicar */
}

/* 5. Alineación del título */
.exe-content .box-head {
    display: flex !important;
    align-items: center !important;
}
/* =========================================================
   ELIMINAR TEXTO VERDE Y CAMBIAR A GRIS INSTITUCIONAL
   ========================================================= */

/* 1. Forzar gris en títulos, cursivas y negritas que suelen aparecer verdes */
.exe-content h2, 
.exe-content h3, 
.exe-content .iDevice_title, 
.exe-content .box-title,
.exe-content em, 
.exe-content strong,
.exe-content em strong,
.exe-content strong em {
    color: #555555 !important; /* Gris oscuro corporativo */
}

/* 2. Captura y elimina el verde manual si se puso con el editor (span style) */
.exe-content span[style*="color: #008000"], 
.exe-content span[style*="color:rgb(0, 128, 0)"],
.exe-content p[style*="color: #008000"],
.exe-content h2[style*="color: #008000"],
.exe-content em[style*="color: #008000"] {
    color: #555555 !important;
}

/* 3. Asegurar que el botón hamburguesa sea visible y rojo */
button#siteNavToggler {
    display: block !important;
    visibility: visible !important;
    background-color: #c8102e !important;
    z-index: 9999 !important;
}