/*
 * theme.css — Fase 1: esqueleto de la plantilla nativa.
 *
 * Esto NO es todavía el CSS completo de la Fase 2 (portar theme.css/
 * bootstrap.css/custom.css originales). Es una base mínima con la paleta
 * y tipografía reales confirmadas en el rastreo de las 48 páginas, para
 * que el esqueleto de la Fase 1 ya tenga un aspecto orientativo.
 */

:root {
    --tpl-primary: #e86b1c;   /* naranja/terracota — acento principal, 84 apariciones en el sitio */
    --tpl-secondary: #464747; /* gris oscuro — texto secundario, barras tipo "Últimas noticias" */
    --tpl-bg-light: #f8f9fb;  /* fondo de sección clara */

    --tpl-font-body: 'Lato', sans-serif;
    --tpl-font-heading: 'Raleway', sans-serif;
    --tpl-font-serif: 'EB Garamond', serif;
}

body {
    font-family: var(--tpl-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tpl-font-heading);
}

/* --- Cabecera --- */

/* Franja superior gris: Acceso Docentes / Buscador + redes sociales */
.tpl-toolbar {
    background-color: var(--tpl-secondary);
    font-size: 0.8rem;
    line-height: 1.2;
}

.tpl-toolbar .container,
.tpl-toolbar .container-fluid,
.tpl-toolbar .container-xl,
.tpl-toolbar .container-lg {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.tpl-toolbar a {
    color: #ffffff;
    text-decoration: none;
}

.tpl-toolbar .nav-item + .nav-item {
    margin-left: 1rem;
}

/* Reset de listas dentro del bloque de iconos sociales (toolbar-r):
   venían de un <ul> de UIkit sin resetear, con viñetas y márgenes por
   defecto del navegador — eso era lo que inflaba la altura de la barra. */
.tpl-toolbar-l,
.tpl-toolbar-r {
    display: flex;
    align-items: center;
}

.tpl-toolbar-r ul {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Iconos sociales: las clases uk-icon-* de UIkit no existen en Bootstrap,
   así que los enlaces quedaban vacíos. Sustituidos por iconos SVG inline
   hasta que se decida una solución definitiva (ver documentación técnica). */
.tpl-toolbar-r .uk-icon-facebook,
.tpl-toolbar-r .uk-icon-instagram,
.tpl-toolbar-r .uk-icon-envelope {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.tpl-toolbar-r .uk-icon-facebook {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.21 10.44 22v-7.03H7.9v-2.91h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.88h2.78l-.44 2.91h-2.34V22C18.34 21.21 22 17.08 22 12.06Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.21 10.44 22v-7.03H7.9v-2.91h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.88h2.78l-.44 2.91h-2.34V22C18.34 21.21 22 17.08 22 12.06Z'/%3E%3C/svg%3E");
}

.tpl-toolbar-r .uk-icon-instagram {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.72 0 3.06.01 4.12.06 1.06.05 1.79.22 2.43.47.66.26 1.21.6 1.76 1.15.5.5.9 1.1 1.15 1.76.25.64.42 1.37.47 2.43.05 1.06.06 1.4.06 4.12s-.01 3.06-.06 4.12c-.05 1.06-.22 1.79-.47 2.43a4.9 4.9 0 0 1-1.15 1.76 4.9 4.9 0 0 1-1.76 1.15c-.64.25-1.37.42-2.43.47-1.06.05-1.4.06-4.12.06s-3.06-.01-4.12-.06c-1.06-.05-1.79-.22-2.43-.47a4.9 4.9 0 0 1-1.76-1.15 4.9 4.9 0 0 1-1.15-1.76c-.25-.64-.42-1.37-.47-2.43C2.01 15.06 2 14.72 2 12s.01-3.06.06-4.12c.05-1.06.22-1.79.47-2.43.26-.66.6-1.21 1.15-1.76A4.9 4.9 0 0 1 5.44 2.53c.64-.25 1.37-.42 2.43-.47C8.94 2.01 9.28 2 12 2Zm0 1.8c-2.67 0-2.99.01-4.04.06-.87.04-1.34.18-1.65.3-.42.16-.71.35-1.02.66-.31.31-.5.6-.66 1.02-.12.31-.26.78-.3 1.65-.05 1.05-.06 1.37-.06 4.04s.01 2.99.06 4.04c.04.87.18 1.34.3 1.65.16.42.35.71.66 1.02.31.31.6.5 1.02.66.31.12.78.26 1.65.3 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c.87-.04 1.34-.18 1.65-.3.42-.16.71-.35 1.02-.66.31-.31.5-.6.66-1.02.12-.31.26-.78.3-1.65.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.04-.87-.18-1.34-.3-1.65a2.7 2.7 0 0 0-.66-1.02 2.7 2.7 0 0 0-1.02-.66c-.31-.12-.78-.26-1.65-.3C14.99 3.81 14.67 3.8 12 3.8Zm0 3.05a5.15 5.15 0 1 1 0 10.3 5.15 5.15 0 0 1 0-10.3Zm0 1.8a3.35 3.35 0 1 0 0 6.7 3.35 3.35 0 0 0 0-6.7Zm5.35-1.99a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.72 0 3.06.01 4.12.06 1.06.05 1.79.22 2.43.47.66.26 1.21.6 1.76 1.15.5.5.9 1.1 1.15 1.76.25.64.42 1.37.47 2.43.05 1.06.06 1.4.06 4.12s-.01 3.06-.06 4.12c-.05 1.06-.22 1.79-.47 2.43a4.9 4.9 0 0 1-1.15 1.76 4.9 4.9 0 0 1-1.76 1.15c-.64.25-1.37.42-2.43.47-1.06.05-1.4.06-4.12.06s-3.06-.01-4.12-.06c-1.06-.05-1.79-.22-2.43-.47a4.9 4.9 0 0 1-1.76-1.15 4.9 4.9 0 0 1-1.15-1.76c-.25-.64-.42-1.37-.47-2.43C2.01 15.06 2 14.72 2 12s.01-3.06.06-4.12c.05-1.06.22-1.79.47-2.43.26-.66.6-1.21 1.15-1.76A4.9 4.9 0 0 1 5.44 2.53c.64-.25 1.37-.42 2.43-.47C8.94 2.01 9.28 2 12 2Zm0 1.8c-2.67 0-2.99.01-4.04.06-.87.04-1.34.18-1.65.3-.42.16-.71.35-1.02.66-.31.31-.5.6-.66 1.02-.12.31-.26.78-.3 1.65-.05 1.05-.06 1.37-.06 4.04s.01 2.99.06 4.04c.04.87.18 1.34.3 1.65.16.42.35.71.66 1.02.31.31.6.5 1.02.66.31.12.78.26 1.65.3 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c.87-.04 1.34-.18 1.65-.3.42-.16.71-.35 1.02-.66.31-.31.5-.6.66-1.02.12-.31.26-.78.3-1.65.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.04-.87-.18-1.34-.3-1.65a2.7 2.7 0 0 0-.66-1.02 2.7 2.7 0 0 0-1.02-.66c-.31-.12-.78-.26-1.65-.3C14.99 3.81 14.67 3.8 12 3.8Zm0 3.05a5.15 5.15 0 1 1 0 10.3 5.15 5.15 0 0 1 0-10.3Zm0 1.8a3.35 3.35 0 1 0 0 6.7 3.35 3.35 0 0 0 0-6.7Zm5.35-1.99a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0Z'/%3E%3C/svg%3E");
}

.tpl-toolbar-r .uk-icon-envelope {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18.5v-13Zm2.2.5 7.3 5.47a.8.8 0 0 0 .96 0L19.8 6H4.2ZM4 7.8v10.2h16V7.8l-7.55 5.66a2.4 2.4 0 0 1-2.9 0L4 7.8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18.5v-13Zm2.2.5 7.3 5.47a.8.8 0 0 0 .96 0L19.8 6H4.2ZM4 7.8v10.2h16V7.8l-7.55 5.66a2.4 2.4 0 0 1-2.9 0L4 7.8Z'/%3E%3C/svg%3E");
}

.tpl-toolbar-r .uk-icon-facebook:hover,
.tpl-toolbar-r .uk-icon-instagram:hover,
.tpl-toolbar-r .uk-icon-envelope:hover {
    background-color: var(--tpl-primary);
}

.tpl-header {
    background-color: #ffffff;
    padding: 1rem 0;
}

/* El módulo del logo envuelve la imagen en un <p> (lo mete el editor de
   texto de Joomla) y el navegador le pone un margen inferior por defecto,
   dejando aire "invisible" debajo del logo que lo descuadraba respecto a
   los iconos de al lado (esos sí bien centrados). */
.tpl-logo p,
.tpl-logo-small p {
    margin: 0;
}

/* Empuja los 4 iconos de cabecera hasta el margen derecho real de la
   página (mismo margen que el resto del contenido). Sin esto, el
   <div class="tpl-search"> vacío que va después cuenta como un tercer
   elemento flex y "justify-content-between" reparte el hueco entre los
   tres, dejando los iconos más centrados de lo debido en vez de pegados
   al borde derecho. */
.tpl-headerbar-icons {
    margin-left: auto;
}

/* Texto de los 4 iconos de cabecera: mismo gris que la barra de "Acceso
   docentes/Buscador" y la de "Últimas noticias" (--tpl-secondary), y
   naranja corporativo (--tpl-primary) al pasar el ratón. */
.tpl-headerbar-icons a {
    color: var(--tpl-secondary);
    text-decoration: none;
}

.tpl-headerbar-icons small {
    font-size: 0.7rem;
}

.tpl-headerbar-icons a:hover {
    color: var(--tpl-primary);
}

/* Efecto hover genérico para iconos de cabecera (clases .tpl-icon-hover /
   .tpl-icon-hover-stack / .tpl-icon-hover-base / .tpl-icon-hover-alt),
   igual que en el sitio 3.1 original: al pasar el ratón, la imagen normal
   se desvanece y aparece la imagen "hover" encima. No depende del título
   ni de cuántos iconos haya — para añadir uno nuevo en el futuro basta
   con repetir el bloque HTML con estas clases (ver documentación técnica,
   sección 8), sin tocar este CSS. */
.tpl-icon-hover-stack {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.tpl-icon-hover-base,
.tpl-icon-hover-alt {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    transition: opacity 0.2s ease;
}

.tpl-icon-hover-alt {
    opacity: 0;
}

.tpl-icon-hover:hover .tpl-icon-hover-base {
    opacity: 0;
}

.tpl-icon-hover:hover .tpl-icon-hover-alt {
    opacity: 1;
}

/* Franja de menú principal, ancho completo, debajo de la cabecera */
.tpl-menu {
    background-color: var(--tpl-primary);
}

.tpl-menu a {
    color: #ffffff;
}

.tpl-menu .nav {
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
}

.tpl-menu .nav-item {
    position: relative;
    flex-shrink: 0;
}

.tpl-menu .nav-item > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 1.25rem 0.45rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.tpl-menu .nav-item > a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.tpl-menu .nav-item.active > a,
.tpl-menu .nav-item.current > a {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--tpl-primary);
}

/* Submenús desplegables (mod_menu nativo de Joomla: <ul class="mod-menu__sub">
   dentro de un <li class="parent">, con un <button class="mod-menu__toggle-sub">
   pensado para clic/teclado). En el menú de escritorio lo hacemos con hover:
   el botón se oculta (no hace falta clicar) y el submenú aparece al pasar el
   ratón por encima del elemento padre. */
.tpl-menu .mod-menu__toggle-sub {
    display: none;
}

.tpl-menu .mod-menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 240px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background-color: #ffffff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0 0 0.375rem 0.375rem;
}

.tpl-menu .nav-item.parent:hover > .mod-menu__sub {
    display: block;
}

.tpl-menu .mod-menu__sub .nav-item > a {
    display: block;
    height: auto;
    padding: 0.5rem 1.25rem;
    color: var(--tpl-secondary);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: normal;
}

.tpl-menu .mod-menu__sub .nav-item > a:hover {
    background-color: var(--tpl-bg-light);
    color: var(--tpl-primary);
}

/* Submenús de segundo nivel (si los hay): se despliegan hacia la derecha
   del padre, no hacia abajo, para no amontonarse verticalmente sin fin. */
.tpl-menu .mod-menu__sub .mod-menu__sub {
    top: 0;
    left: 100%;
}

/* --- Bloques tipo "panel" (barras grises con título, ej. "Últimas noticias") --- */
.tpl-panel-header {
    background-color: var(--tpl-secondary);
    color: #ffffff;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.15rem;
    text-align: center;
}

/* --- Menú lateral (sidebar-a), ver módulo mod_menu con estilo "Panel" ---
   El gris claro ya no va en el fondo del <aside>, sino dentro de la
   tarjeta, en el cuerpo donde están los elementos del menú (mismo gris
   que el fondo del carrusel de la home, --tpl-bg-light). */
.tpl-sidebar {
    padding: 0 1rem 1rem;
}

.tpl-sidebar .card-header {
    background-color: var(--tpl-secondary);
    color: #ffffff;
    /* border transparente del mismo grosor que al pasar el ratón, para que
       el header no cambie de tamaño/salte al aparecer el borde. */
    border: 2px solid transparent;
}

.tpl-sidebar .card-header .card-title {
    text-transform: uppercase;
}

/* Título del sidebar convertido en enlace (cuando coincide con un elemento
   del Main Menu, ver html/layouts/chromes/card.php) — mismo aspecto que el
   texto plano de antes, sin el azul/subrayado por defecto de un enlace. */
.tpl-sidebar-title-link {
    color: inherit;
    text-decoration: none;
}

/* Al pasar el ratón sobre la caja del título: borde del mismo gris oscuro
   que tenía el fondo, fondo gris claro, texto gris oscuro. */
.tpl-sidebar .card-header:has(.tpl-sidebar-title-link:hover) {
    background-color: var(--tpl-bg-light);
    border-color: var(--tpl-secondary);
}

.tpl-sidebar .card-header:has(.tpl-sidebar-title-link:hover) .tpl-sidebar-title-link {
    color: var(--tpl-primary);
}

.tpl-sidebar .card-body {
    background-color: var(--tpl-bg-light);
    padding: 0;
}

/* La clase .nav de Bootstrap pone display:flex (fila) por defecto en el
   <ul> del módulo de menú; en el sidebar lo queremos en columna, como
   una lista vertical normal. */
.tpl-sidebar .card-body ul.nav {
    display: block;
}

.tpl-sidebar .card-body .nav-item > a {
    display: block;
    padding: 0.3rem 1rem;
    color: var(--tpl-secondary);
    text-decoration: none;
}

.tpl-sidebar .card-body .nav-item > a:hover {
    color: var(--tpl-primary);
}

/* Elementos del menú lateral con hijos: Joomla pinta el botón de
   desplegar (.mod-menu__toggle-sub) como HERMANO del enlace, no dentro
   de él — por defecto cae a su propia línea porque el enlace de arriba
   es display:block. Con flexbox en el <li>, enlace y botón comparten
   fila (botón a la derecha) y el submenú (<ul>) pasa a su propia línea
   completa al expandirse, gracias al ancho 100% forzado. */
.tpl-sidebar .card-body .nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.tpl-sidebar .card-body .nav-item > a {
    /* flex-basis: 0 (en vez de "auto") reparte el ancho disponible DESPUÉS
       de reservar sitio al botón, en vez de partir del ancho natural del
       texto — con "auto" el navegador a veces prioriza el ancho del texto
       y empuja el botón entero a la línea de abajo en vez de partir el
       texto en dos líneas (visto con "Electricidad y Electrónica"), un
       comportamiento inconsistente según la longitud exacta del texto.
       Combinado con min-width:0 (mismo patrón que la rejilla de Noticias:
       un elemento flex no se encoge por debajo de su contenido sin esto). */
    flex: 1 1 0;
    min-width: 0;
}

.tpl-sidebar .card-body .nav-item > .mod-menu__toggle-sub {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--tpl-secondary);
    padding: 0.3rem 0.75rem;
}

.tpl-sidebar .card-body .nav-item > .mod-menu__sub {
    flex: 1 1 100%;
    margin-top: 0.1rem;
}

/* Tabulación para los enlaces de un submenú desplegado, para que se
   distingan visualmente de su elemento padre inmediato. Con solo una
   regla "plana" (sin el segundo selector de abajo), un elemento a 2
   niveles de profundidad (p. ej. "Empresas colaboradoras" dentro de
   "Electricidad y Electrónica", que a su vez está dentro de "Ciclos
   formativos") recibía el MISMO desplazamiento que su propio padre, así
   que no se distinguían entre sí aunque ambos estuvieran desplazados
   respecto al nivel superior — de ahí la doble regla, para que se
   acumule según la profundidad real. */
.tpl-sidebar .card-body .mod-menu__sub .nav-item > a {
    padding-left: 2rem;
    /* Un poco más grande que el "small" de Bootstrap que trae de fábrica
       el submenú (0.875rem), pero por debajo del tamaño del padre (1rem). */
    font-size: 0.9375rem;
}

.tpl-sidebar .card-body .mod-menu__sub .mod-menu__sub .nav-item > a {
    padding-left: 4rem;
}

/* --- Acordeón de documentos (Bootstrap 5) dentro de artículos, p.ej.
   "Documentos del Centro" — sustituye a los widgets de Widgetkit del
   sitio 3.1 (no disponible en Joomla 6.1). Colores corporativos en vez
   del azul por defecto de Bootstrap. */
.tpl-docs-accordion .accordion-button {
    color: var(--tpl-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.tpl-docs-accordion .accordion-button:not(.collapsed) {
    color: var(--tpl-primary);
    background-color: var(--tpl-bg-light);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.tpl-docs-accordion .accordion-button:focus {
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 0.25rem rgba(232, 107, 28, 0.25);
}

/* Separación entre el menú naranja y el contenido, igual en todas las
   páginas (antes solo estaba puesta en la fila de la home) — se pone
   aquí porque .tpl-breadcrumbs es lo primero que hay después del menú
   en cualquier página, incluida la home. */
.tpl-breadcrumbs {
    margin-top: 2rem;
}

/* --- Título de artículo/página (equivalente a .uk-article-title del tema
   3.1 original): línea naranja corporativa debajo del título, ausente en
   la plantilla nueva porque .page-header no tenía ningún estilo propio. */
.tpl-main-content .page-header h1 {
    font-size: 1.75rem;
    line-height: 1.35;
    font-weight: 700;
    text-transform: uppercase;
    color: #464747;
    border-bottom: 2px solid var(--tpl-primary);
    padding-bottom: 0.625rem;
    margin-bottom: 1rem;
}

/* Imágenes dentro del cuerpo de un artículo (p. ej. "Excelencia"): sin
   esto, una imagen subida a su tamaño real (visto un caso de 5839px de
   ancho) se sale del ancho del contenedor en vez de ajustarse a la
   pantalla — no había ninguna regla responsive para imágenes de artículo. */
.com-content-article__body img {
    max-width: 100%;
    height: auto;
}

/* Imagen completa de un artículo individual (<figure class="item-image">,
   hermano justo antes de .com-content-article__body, no anidado dentro):
   centrada, a su tamaño natural (con tope de 100% del ancho disponible
   para que nunca se salga del contenedor), texto debajo. Se descartó la
   idea de que el texto la rodeara flotándola. */
.com-content-article > .item-image {
    text-align: center;
}

.com-content-article > .item-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* Título general de una página de categoría en formato blog (p. ej.
   "Electricidad y Electrónica", "Noticias") — mismo formato que el título
   de artículo/página de arriba, para que ambos se vean consistentes.
   Selector con `>` a propósito: solo el título de la categoría en sí,
   nunca el de cada tarjeta dentro de la rejilla (ver
   .com-content-category-blog__item .page-header h2 más abajo). El título es
   hijo DIRECTO de .com-content-category-blog, sin envolver en .page-header
   — confirmado inspeccionando el DOM real en producción. Joomla renderiza
   este título como <h1> o <h2> según si el elemento de menú tiene activado
   "Mostrar el título de la página" (si está desactivado, como en Noticias,
   Joomla sube este título a <h1> para que la página tenga siempre un solo
   <h1>) — de ahí que el selector cubra ambos casos. */
.com-content-category-blog > h1,
.com-content-category-blog > h2 {
    font-size: 1.75rem;
    line-height: 1.35;
    font-weight: 700;
    text-transform: uppercase;
    color: #464747;
    border-bottom: 2px solid var(--tpl-primary);
    padding-bottom: 0.625rem;
    margin-bottom: 1rem;
}

/* Ocultar el extracto de texto recortado a 3 líneas SOLO en "Departamentos"
   (categoría real id=24, "Información general Departamentos") — sus
   artículos migrados no tienen definido ningún punto de corte "Leer más",
   así que para Joomla todo el cuerpo cuenta como "texto de introducción" y
   el ajuste "Ocultar texto de introducción" del menú no tiene efecto. Se
   soluciona aquí por CSS en vez de depender de ese ajuste nativo, sin
   afectar a Noticias ni a Ciclos Formativos (que sí deben seguir mostrando
   el extracto). La clase `id-24` la añade `index.php` con el ID real de
   la categoría/artículo de la petición — ver body class ahí. */
body.id-24 .com-content-category-blog__item .item-content > *:not(.page-header):not(.tags):not(.article-info):not(.readmore) {
    display: none;
}

/* Enlaces dentro del texto de artículos (incluido el contenido de cada
   pestaña del acordeón de documentos, que se inserta dentro del propio
   artículo): sin subrayado, naranja corporativo — se excluyen los que son
   botones (`.btn`, p. ej. "Leer más") para no pisar su estilo propio. */
.tpl-main-content a:not(.btn) {
    color: var(--tpl-primary);
    text-decoration: none;
}

.tpl-main-content a:not(.btn):hover {
    text-decoration: underline;
}

/* --- Vista nativa "Categoría en formato blog" de com_content (p. ej. el
   elemento de menú "Noticias"). Joomla genera la clase masonry-N según la
   "Cantidad de columnas" configurada en el menú, pero NO trae ningún CSS
   propio para esa clase — cada plantilla tiene que definirlo. A petición
   del usuario, filas alineadas de verdad (rejilla estricta), no columnas
   fluidas tipo masonry — todas las imágenes a proporción 4:3 para que
   todos los artículos midan lo mismo y las filas cuadren. --- */
.com-content-category-blog__items[class*="masonry-"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-left: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .com-content-category-blog__items.masonry-2 { grid-template-columns: repeat(2, 1fr); }
    .com-content-category-blog__items.masonry-3 { grid-template-columns: repeat(3, 1fr); }
    .com-content-category-blog__items.masonry-4 { grid-template-columns: repeat(4, 1fr); }
    .com-content-category-blog__items.masonry-5 { grid-template-columns: repeat(5, 1fr); }
    .com-content-category-blog__items.masonry-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Gotcha de grid/flexbox ya visto con los logos del footer (sección 6 del
   documento técnico): los elementos de una rejilla tienen min-width:auto
   por defecto, que se resuelve como el tamaño intrínseco de su contenido
   — una sola foto más grande que las demás bastaba para forzar esa
   columna entera a su ancho natural (hasta 1364px) y descuadrar el resto.
   min-width:0 permite encoger por debajo de eso para que las 3 columnas
   midan siempre lo mismo. */
.com-content-category-blog__item {
    min-width: 0;
}

.com-content-category-blog__item .item-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Mismo radio que el resto de cards del sitio (p. ej. el panel de
       noticias de la home), para un aspecto uniforme. */
    border-radius: 0.375rem;
}

.com-content-category-blog__item .page-header h2 {
    text-transform: uppercase;
    font-size: 1.1rem;
    line-height: 1.4;
}

/* Botones de las etiquetas ("Excelencia", categoría, etc.): gris claro
   corporativo en vez del azul/celeste por defecto de Bootstrap
   (.btn-info), con el gris oscuro corporativo como texto para que se lea
   bien sobre un fondo tan claro. */
.com-content-category-blog__item .tags .btn-info {
    background-color: var(--tpl-bg-light);
    border-color: var(--tpl-bg-light);
    color: var(--tpl-secondary);
}

.com-content-category-blog__item .tags .btn-info:hover {
    background-color: var(--tpl-primary);
    border-color: var(--tpl-primary);
    color: #ffffff;
}

/* --- Caja de búsqueda de "Noticias" (módulo nativo "Búsqueda inteligente",
   mod_finder). Reordenada por JS (ver theme.js) para que quede debajo del
   título y encima del listado, en vez de encima del título — aquí solo el
   estilo visual: filtro de categoría a la derecha del botón, en vez de en
   una fila aparte debajo, y el botón en gris oscuro corporativo. --- */
.mod-finder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Columna creada por JS agrupando la etiqueta "Buscar" y su caja, para que
   quede simétrica con la columna de "Buscar por Categoría" (que ya viene
   agrupada de fábrica) y ambas etiquetas/cajas se alineen a la misma altura. */
.mod-finder__search-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 480px;
}

.mod-finder__search-col > label.finder {
    margin-bottom: 0.4rem;
}

.mod-finder .mod-finder__advanced {
    flex: 0 1 auto;
}

.mod-finder .filter-branch .control-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
}

.mod-finder .advancedSelect {
    min-width: 320px;
}

.mod-finder .btn-primary {
    background-color: var(--tpl-secondary);
    border-color: var(--tpl-secondary);
}

.mod-finder .btn-primary:hover {
    background-color: var(--tpl-primary);
    border-color: var(--tpl-primary);
}

/* Orden visual fijo del listado, independiente del orden real en el HTML
   (que varía según qué opciones de Joomla estén activas: a veces las
   etiquetas o los metadatos de autor/fecha se generan ANTES del texto) —
   título, texto (3 líneas), etiquetas, metadatos, botón, en ese orden. */
.com-content-category-blog__item .item-content {
    display: flex;
    flex-direction: column;
}

.com-content-category-blog__item .item-content > .page-header {
    order: 1;
}

.com-content-category-blog__item .item-content > .tags {
    order: 3;
}

.com-content-category-blog__item .item-content > .article-info {
    order: 4;
    font-size: 0.8rem;
}

.com-content-category-blog__item .item-content > .readmore {
    order: 5;
}

/* Debajo del título, solo las 3 primeras líneas del texto del artículo:
   se recorta el primer bloque de contenido (párrafo, lista, lo que sea)
   y se oculta cualquier bloque posterior — el texto de introducción no
   siempre son solo <p>, algunos artículos meten listas <ol>/<ul> u otros
   elementos, así que se trata cualquier tipo de bloque por igual, no solo
   párrafos. El truco: por defecto TODO bloque de contenido se recorta a 3
   líneas; cualquier bloque que tenga OTRO bloque de contenido antes (osea,
   el 2º en adelante) se oculta del todo — así solo queda visible el primero. */
.com-content-category-blog__item .item-content > *:not(.page-header):not(.tags):not(.article-info):not(.readmore) {
    order: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.com-content-category-blog__item .item-content > *:not(.page-header):not(.tags):not(.article-info):not(.readmore) ~ *:not(.page-header):not(.tags):not(.article-info):not(.readmore) {
    display: none;
}

/* --- Tarjetas de contacto ("Contacta con nosotros"): sustituyen a los
   widgets de Widgetkit (com_widgetkit, no disponible en Joomla 6.1) que
   mostraban dirección/teléfono/email + mapa de cada sede. Contenido
   estático directamente en el artículo (no hay artículos separados por
   sede, a diferencia de "Documentos del Centro"). --- */
.tpl-contact-block + .tpl-contact-block {
    margin-top: 2rem;
}

.tpl-contact-card {
    background-color: var(--tpl-bg-light);
    border-radius: 0.375rem;
    padding: 1.5rem;
    height: 100%;
}

.tpl-contact-card h3 {
    color: var(--tpl-secondary);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.tpl-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tpl-contact-row:last-child {
    margin-bottom: 0;
}

.tpl-contact-row img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

.tpl-contact-row p {
    margin: 0;
}

.tpl-contact-map iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 0.375rem;
}

/* --- Fila de la home: carrusel de noticias + tarjeta destacada --- */
.tpl-home-featured {
    margin-bottom: 1.5rem;
}

/* Separador vertical fino entre el carrusel y la tarjeta, solo en pantallas
   donde van lado a lado (col-lg-4 en adelante). Mismo padding extra a
   ambos lados de la línea para que quede centrada en el hueco, no pegada
   a un lado. */
@media (min-width: 992px) {
    /* Ancho del carrusel/tarjeta, ajustado a mano en varias pasadas
       (Bootstrap solo ofrece columnas enteras de 12, no basta). */
    .tpl-home-featured-carousel-col {
        width: 62.5%;
        padding-right: 1.15rem;
    }

    .tpl-home-featured-card-col {
        width: 37.5%;
        border-left: 1px solid #dee2e6;
        padding-left: 1.15rem;
    }
}

/* --- Carrusel de noticias de la home (mod_articles_news override) --- */
/* Esquinas redondeadas en todo el panel (título + cuerpo), a juego con las
   de la tarjeta destacada de al lado (.tpl-featured-card, 0.375rem por
   defecto de Bootstrap) — overflow:hidden recorta los fondos de las dos
   franjas internas a la forma redondeada. */
.tpl-news-panel {
    border-radius: 0.375rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tpl-news-panel-body {
    background-color: var(--tpl-bg-light);
    padding: 1rem;
    flex: 1 1 auto;
}

.tpl-news-card .card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.tpl-news-carousel .card-title {
    text-transform: uppercase;
    font-size: 0.75rem;
}

.tpl-news-carousel .card-title a {
    color: var(--tpl-secondary);
    text-decoration: none;
}

.tpl-news-carousel .card-title a:hover {
    color: var(--tpl-primary);
}

.tpl-news-card-meta {
    margin: 0.25rem 0 0;
    font-size: 0.7rem;
    color: #6c757d;
}

.tpl-news-card-category {
    text-transform: uppercase;
    font-weight: 500;
}

.tpl-news-card-category + .tpl-news-card-date::before {
    content: "·";
    margin: 0 0.35rem;
}

/* --- Tarjeta de artículo destacado (mod_cifp_featured) --- */
.tpl-featured-card {
    position: relative;
    background-color: var(--tpl-primary);
    color: #ffffff;
    border: none;
    transition: background-color 0.2s ease;
}

.tpl-featured-card:hover {
    background-color: var(--tpl-bg-light);
}

/* Marco naranja: la imagen queda más pequeña, con el propio fondo naranja
   de la tarjeta visible a los lados a modo de marco. Sin margen arriba ni
   abajo — el título va justo encima (ver tmpl/default.php) y el botón
   justo debajo, con el padding normal del card-body. */
.tpl-featured-card-media {
    padding: 0 2.75rem;
}

/* Recorte del zoom pegado exactamente al borde de la imagen (sin el
   padding del marco) — así el zoom en hover no invade el margen por
   ningún lado, ni arriba/abajo ni a los lados. */
.tpl-featured-card-media-clip {
    overflow: hidden;
    border-radius: 0.375rem;
}

.tpl-featured-card-media .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Zoom suave de la imagen al pasar el ratón por la tarjeta — el marco
   (padding de .tpl-featured-card-media) no se toca, solo la imagen
   escala visualmente dentro de su propio espacio. */
.tpl-featured-card:hover .tpl-featured-card-media .card-img-top {
    transform: scale(1.08);
}

/* El título ya no va dentro del card-body (ahora está antes de la
   imagen, ver tmpl/default.php), así que necesita su propio padding:
   arriba para separarlo del borde de la tarjeta, a los lados el mismo
   2.75rem que el marco de la imagen, sin nada abajo para que quede
   pegado a la imagen. */
.tpl-featured-card .card-title {
    color: #ffffff;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    line-height: 1.6;
    text-transform: uppercase;
    padding: 1.5rem 2.75rem 0;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.tpl-featured-card:hover .card-title {
    color: var(--tpl-primary);
}

.tpl-featured-card .btn-outline-light {
    border-width: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tpl-featured-card:hover .btn-outline-light {
    color: var(--tpl-primary);
    border-color: var(--tpl-primary);
}

/* --- Footer ---
   Un único módulo (posición footer, ID 174, publicado en todas las
   páginas) con todo el contenido. Estructura esperada en el módulo (ver
   sección 8 de la documentación técnica para el HTML exacto):
   <div class="tpl-footer-flex">
       <div class="tpl-footer-main">
           <p> copyright
           <p class="tpl-footer-email-row"> email + logo GSuite
           <p class="tpl-footer-logos-row">
               <span class="tpl-footer-logos-group"> logos institucionales
       </div>
       <img class="tpl-footer-placa" ...> Placa_Bilingue, a la derecha de
       TODO el bloque (copyright + email + logos), no solo de la fila de
       logos — por eso va fuera de .tpl-footer-main, como hermana suya. */
.tpl-footer {
    background-color: var(--tpl-bg-light);
    padding: 2rem 0;
    font-size: 0.85rem;
    color: #6c757d;
}

.tpl-footer p {
    margin-bottom: 0.5rem;
}

.tpl-footer a {
    color: var(--tpl-secondary);
}

.tpl-footer a:hover {
    color: var(--tpl-primary);
}

/* Bloque general: el texto (copyright/email/logos) a la izquierda, la
   Placa_Bilingue a la derecha, con la altura de la tarjeta abarcando
   todo el bloque de texto (align-items: center la centra respecto a esa
   altura completa, no solo respecto a la fila de logos). */
.tpl-footer-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.tpl-footer-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Fila del email: el correo a la izquierda, el logo de GSuite a la
   derecha, en la misma línea. */
.tpl-footer-email-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tpl-footer-gsuite {
    height: auto;
    min-width: 0;
    flex: 0 1 auto;
}

/* Fila de logos institucionales — ya no comparte fila con la
   Placa_Bilingue (ver .tpl-footer-flex arriba), así que dispone de todo
   el ancho de .tpl-footer-main para ella sola y sale más grande. */
.tpl-footer-logos-row {
    margin-top: 1rem;
}

/* Grupo de logos institucionales: genérico para cualquier cantidad de
   imágenes, no atado a que haya exactamente 2 — si caben a su tamaño
   natural se quedan tal cual; si no caben, se encogen todas
   proporcionalmente a su propio tamaño (flex-shrink con flex-basis:
   auto) hasta ocupar exactamente el ancho disponible. */
.tpl-footer-logos-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.tpl-footer-logos-group img {
    height: auto;
    min-width: 0;
    flex: 0 1 auto;
}

/* Placa_Bilingue: fondo blanco, sombra suave y esquinas redondeadas, a
   modo de tarjeta flotante como en el original. flex-shrink: 0 para que
   nunca sea ella la que se encoja al faltar espacio — se encoge antes el
   bloque de texto de la izquierda. */
.tpl-footer-placa {
    flex: 0 0 auto;
    max-width: 100%;
    height: auto;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
    padding: 0.5rem;
}

/* Grupo de enlaces grandes de texto (sin imagen) con la identidad
   corporativa — gris con borde por defecto, naranja al pasar el ratón,
   mismo patrón que el resto de botones del sitio. Genérico: usado en la
   página de aterrizaje "Oferta Formativa" (Ciclos Formativos / Oferta
   Integrada) y en "Información general" de Residencias (Fuensanta /
   Albaladejito), reutilizable en cualquier otro artículo similar. */
.tpl-link-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.tpl-link-buttons a {
    flex: 1 1 250px;
    display: block;
    text-align: center;
    padding: 2rem 1.5rem;
    background-color: var(--tpl-bg-light);
    border: 2px solid var(--tpl-secondary);
    border-radius: 0.375rem;
    color: var(--tpl-secondary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.15rem;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tpl-link-buttons a:hover {
    background-color: var(--tpl-primary);
    border-color: var(--tpl-primary);
    color: #ffffff;
}