/*
Theme Name: ESFM Clara Parada de Pinto
Theme URI: https://esfm-cpp.edu.bo
Author: Capibara Tech
Author URI: https://esfm-cpp.edu.bo
Description: Tema institucional para la Escuela Superior de Formación de Maestros "Clara Parada de Pinto" (Trinidad, Beni, Bolivia). Compatible con Elementor (versión gratuita), accesible, seguro y optimizado para portales de educación pública.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: esfm-cpp
Tags: education, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments, accessibility-ready
Este tema, junto con su código PHP, estructuras y funciones, se distribuye
bajo los términos de la GNU General Public License v2 (o posterior), tal
como los propios archivos de WordPress. Este hoja de estilos (style.css)
contiene el CSS del tema y también puede ser distribuida bajo las mismas
condiciones. Para más detalles: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* =========================================================================
1. DESIGN TOKENS (variables CSS)
========================================================================= */
:root {
/* Color institucional */
--color-primary: #0b2341;
--color-primary-dark: #07182d;
--color-primary-soft: #145da0;
--color-accent: #c58a00;
--color-accent-light: #f59e0b;
--color-accent-dark: #a06f00;
--color-surface: #f8f9ff;
--color-surface-canvas: #f0f3f8;
--color-surface-card: #ffffff;
--color-surface-subtle: #eff4ff;
--color-text: #0b1c30;
--color-text-muted: #43474d;
--color-text-inverse: #ffffff;
--color-border: #cbd5e1;
--color-border-subtle: #e2e8f0;
--color-civic-red: #ba1a1a;
--color-civic-green: #15803d;
--color-civic-amber: #d97706;
--font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-script: 'Great Vibes', cursive;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(11, 35, 65, 0.06);
--shadow-md: 0 4px 12px -2px rgba(11, 35, 65, 0.08), 0 2px 4px -1px rgba(11, 35, 65, 0.04);
--shadow-lg: 0 20px 25px -5px rgba(11, 35, 65, 0.12), 0 8px 10px -6px rgba(11, 35, 65, 0.06);
--container-max: 1440px;
--gutter: 1.5rem;
--gutter-sm: 1rem;
--header-focus-ring: 0 0 0 3px rgba(197, 138, 0, 0.45);
}
/* Paleta alternativa "Azul y verde", basada en los colores reales extraídos
del escudo institucional (predominan un azul real #0000a0 y un verde
#009000; el dorado del esquema por defecto no aparece en el logo). Se
activa agregando la clase .palette-logo al desde Apariencia >
Personalizar > Datos Institucionales ESFM > Paleta de colores (ver
inc/customizer.php). Solo redefine los mismos tokens que :root ya declara
arriba -- como el resto de este archivo siempre lee var(--color-primary),
var(--color-accent), etc., el cambio de paleta se propaga a todo el sitio
sin tocar ninguna otra regla. */
body.palette-logo {
--color-primary: #0a1f5c;
--color-primary-dark: #061340;
--color-primary-soft: #1d4ed8;
--color-accent: #0f8a3c;
--color-accent-light: #4ade80;
--color-accent-dark: #0b6b2e;
--header-focus-ring: 0 0 0 3px rgba(15, 138, 60, 0.45);
}
/* Fuente alternativa "Sans-serif regular": usa la fuente nativa del sistema
operativo del visitante en vez de cargar Montserrat. Se activa desde
Apariencia > Personalizar > Datos Institucionales ESFM > Tipografía (ver
inc/customizer.php). Solo redefine --font-display, que ya usa todo el
archivo, así que se propaga sin tocar ninguna otra regla. */
body.font-sans-regular {
--font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* =========================================================================
2. RESET Y BASE
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--color-surface-canvas);
color: var(--color-text-muted);
font-family: var(--font-display);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; color: var(--color-primary); }
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-sm);
}
@media (min-width: 1024px) {
.container { padding-inline: var(--gutter); }
}
/* Accesibilidad: enlace "saltar al contenido" */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
padding: 0.75rem 1.25rem;
background: var(--color-primary);
color: #fff;
border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
left: 0;
}
.screen-reader-text {
border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
width: 1px; word-wrap: normal !important;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* =========================================================================
3. HEADER SUPERIOR (Institucional)
========================================================================= */
.site-topbar {
background: var(--color-surface-card);
border-bottom: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-sm);
}
.site-topbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 0.75rem;
}
.site-topbar__brand {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
}
.site-topbar__logo img { height: 44px; width: auto; object-fit: contain; }
.site-topbar__logo--esfm img { height: 48px; width: 48px; }
.site-topbar__divider {
width: 1px; height: 2.25rem; background: var(--color-border-subtle);
display: none;
}
.site-topbar__identity .eyebrow {
display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--color-accent-dark);
}
.site-topbar__identity h1 {
font-size: 0.95rem; font-weight: 900; text-transform: uppercase;
color: var(--color-primary); line-height: 1.3; margin: 0;
}
.site-topbar__identity p {
margin: 0; font-size: 0.65rem; color: var(--color-text-muted); font-weight: 500;
}
.site-topbar__tools {
display: flex; align-items: center; gap: 1rem;
}
.site-search {
display: flex; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.site-search input[type="search"] {
width: 14rem; font-size: 0.75rem; padding: 0.4rem 0.75rem;
border: 1px solid var(--color-border); border-right: 0;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.site-search input[type="search"]:focus { outline: none; border-color: var(--color-primary); }
.site-search button {
background: var(--color-primary); color: #fff; border: 0;
padding-inline: 0.9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.site-search button:hover { background: var(--color-primary-dark); }
.site-social { display: flex; align-items: center; gap: 0.4rem; padding-left: 0.75rem; border-left: 1px solid var(--color-border-subtle); }
.site-social a {
width: 1.75rem; height: 1.75rem; border-radius: 50%; color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
transition: opacity 0.2s;
}
.site-social a:hover { opacity: 0.85; }
.site-social .is-facebook { background: #1877F2; }
.site-social .is-instagram { background: linear-gradient(45deg,#fd5949,#d6249f); }
.site-social .is-youtube { background: #FF0000; }
.site-social .is-whatsapp { background: #25D366; }
@media (min-width: 768px) {
.site-topbar__inner { flex-wrap: nowrap; }
.site-topbar__brand { justify-content: flex-start; }
.site-topbar__divider { display: block; }
.site-topbar__identity { text-align: left; }
}
/* =========================================================================
4. NAVEGACIÓN PRINCIPAL
========================================================================= */
.site-nav {
background: var(--color-primary);
color: #fff;
border-bottom: 2px solid var(--color-accent);
position: sticky;
top: 0;
z-index: 50;
box-shadow: var(--shadow-md);
}
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; }
.primary-menu {
display: none;
align-items: center;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* Antes 1024px: con 7 ítems + el botón "Aula Virtual" (agregado luego), el
menú necesita ~1058px de ancho propio (medido con .primary-menu sin
envolver), y sumando el padding lateral del contenedor eso ya no cabía
entre 1024px y ~1105px de viewport -- el botón quedaba cortado fuera de la
pantalla en laptops comunes. Se sube el punto de quiebre a 1200px, con
margen, para que ese rango use el menú hamburguesa (que ya soporta todos
los ítems) en vez del menú horizontal, que en ese rango no entra completo.
Los 3 puntos de quiebre de la navegación (aquí, el botón CTA y el botón
hamburguesa más abajo) deben mantenerse sincronizados. */
@media (min-width: 1200px) {
.primary-menu { display: flex; }
}
.primary-menu > li { position: relative; flex-shrink: 0; }
.primary-menu > li > a,
.primary-menu > li > button.submenu-toggle {
display: flex; align-items: center; gap: 0.4rem;
padding: 0.9rem 0.7rem; color: #e2e8f0; background: transparent; border: 0;
font: inherit; text-transform: inherit; letter-spacing: inherit;
transition: background 0.2s, color 0.2s;
}
.primary-menu > li > a:hover,
.primary-menu > li > a:focus,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a,
.primary-menu button.submenu-toggle:hover,
.primary-menu button.submenu-toggle:focus {
color: var(--color-accent-light);
background: rgba(255,255,255,0.06);
}
.primary-menu > li.current-menu-item > a {
background: var(--color-primary-dark);
border-bottom: 2px solid var(--color-accent-light);
}
.submenu-toggle .chevron { font-size: 0.55rem; transition: transform 0.2s; }
.menu-item-has-children.is-open .chevron,
.menu-item-has-children:hover .chevron { transform: rotate(180deg); }
.sub-menu li {
/* Contexto de posicionamiento para un sub-submenú (p. ej. Institución >
Presentación Institucional > Misión y Visión): sin esto, ese tercer
nivel se posiciona relativo al .sub-menu exterior (el único ancestro
posicionado más cercano) en vez de relativo a su propio , y
aparece desplazado en vez de justo debajo de su propio enlace. */
position: relative;
}
.sub-menu {
position: absolute; left: 0; top: 100%; width: 15rem;
background: var(--color-primary);
border-top: 2px solid var(--color-accent);
box-shadow: var(--shadow-lg);
border-radius: 0 0 var(--radius-md) var(--radius-md);
padding-block: 0.5rem;
display: none;
z-index: 60;
text-transform: none;
text-align: left;
}
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children.is-open > .sub-menu {
display: block;
}
/* Un submenú de TERCER nivel (p. ej. Área Académica > Oferta Académica >
cada especialidad) se abre hacia la derecha en vez de hacia abajo, como
un panel adicional al costado -- el patrón habitual para menús desplegables
anidados, y evita que se apile verticalmente debajo de un menú que ya es
en sí mismo un desplegable. */
.sub-menu .sub-menu {
top: 0;
left: 100%;
border-top: none;
border-left: 2px solid var(--color-accent);
border-radius: var(--radius-md);
}
.sub-menu a {
display: block; padding: 0.55rem 1rem; font-size: 0.72rem; color: #cbd5e1;
border-left: 3px solid transparent; transition: background 0.15s, border-color 0.15s;
}
.sub-menu a:hover, .sub-menu a:focus {
color: #fff; background: var(--color-primary-dark); border-left-color: var(--color-accent);
}
.primary-menu > li > a.site-nav__cta {
display: none;
align-items: center;
padding: 0.35rem 1rem;
margin-left: 0.5rem;
border-radius: var(--radius-full);
background: var(--color-accent-light);
color: #1e293b;
font-weight: 800;
font-size: 0.7rem;
gap: 0.4rem;
text-transform: uppercase;
}
@media (min-width: 1200px) { .primary-menu > li > a.site-nav__cta { display: inline-flex; } }
.site-nav__cta .ping {
width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #dc2626;
animation: esfm-ping 1.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes esfm-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
/* Mobile menu toggle */
.menu-toggle {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; color: #fff; font-size: 1.25rem;
padding: 0.75rem 1rem;
}
@media (min-width: 1200px) { .menu-toggle { display: none; } }
.primary-menu.is-mobile-open {
display: flex;
flex-direction: column;
position: absolute;
top: 100%; left: 0; right: 0;
background: var(--color-primary-dark);
max-height: 70vh;
overflow-y: auto;
align-items: stretch;
}
.primary-menu.is-mobile-open .sub-menu { position: static; width: 100%; box-shadow: none; }
/* .site-nav__cta es display:none por defecto y solo se muestra en línea a
1200px+ (ver arriba) -- sin esta regla, el botón "Aula Virtual" quedaba
invisible también dentro del menú móvil ya desplegado, no solo oculto por
el ancho de pantalla: su se veía en la lista pero el enlace adentro no
se dibujaba. */
.primary-menu.is-mobile-open .site-nav__cta {
display: inline-flex;
justify-content: center;
margin: 0.75rem 1rem;
}
/* =========================================================================
5. HERO / CARRUSEL INSTITUCIONAL
========================================================================= */
.hero-carousel {
position: relative;
width: 100%;
background: #0f172a;
overflow: hidden;
min-height: 420px;
}
/* En pantallas angostas el mismo texto ocupa más líneas (menos ancho
disponible por línea), así que el panel necesita más alto que en
escritorio para mostrar completos el título, subtítulo, párrafo y los DOS
botones del grupo CTA -- con la altura fija pensada para escritorio, el
segundo botón quedaba cortado en un celular. .hero-slide__panel define su
propio alto más abajo; aquí solo se ajusta el contenedor para que tenga
espacio de sobra para contenerlo. */
@media (max-width: 599px) {
.hero-carousel { min-height: 480px; }
}
.hero-slide {
position: absolute; inset: 0; opacity: 0; pointer-events: none;
transition: opacity 0.7s ease;
display: flex; align-items: center;
}
/* La diapositiva activa se queda en position:absolute igual que las demás
(nunca pasa a relative): si tomara parte del flujo del documento, el alto
de .hero-carousel pasaría a depender del texto propio de cada diapositiva
(título/subtítulo/párrafo), y con textos de distinto largo cada una
dibujaría un contenedor de alto distinto -- haciendo que la MISMA imagen
de fondo (object-fit: cover al 100% del contenedor) se vea recortada o
escalada de forma diferente según qué diapositiva esté activa. Con todas
las diapositivas siempre en absolute, el alto de .hero-carousel lo fija
únicamente su min-height, igual para todas. */
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide__bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); }
.hero-slide__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,24,45,0.65) 0%, rgba(11,35,65,0.45) 55%, rgba(0,0,0,0.2) 100%); }
.hero-slide__body {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem;
padding-block: 2.5rem;
flex-wrap: wrap;
}
/* Este elemento usa a la vez .container (que centra con margin-inline:auto,
pensado para secciones normales de contenido) y .hero-slide__body. Para el
hero se quiere el panel pegado al borde izquierdo de la pantalla, no
centrado dentro de un contenedor angosto con espacio vacío a los lados -- se
anula el auto-centrado solo para esta combinación, sin tocar la regla
.container de la que depende el resto del sitio. */
.hero-slide__body.container { margin-inline: 0; }
.hero-slide__panel {
color: #fff;
width: 100%;
max-width: 46rem;
/* Alto fijo (no auto, según el contenido) para que las diapositivas con
texto corto y las de texto largo dibujen el mismo tamaño de caja -- antes
el panel se redimensionaba según su propio contenido y "saltaba" de
tamaño al cambiar de diapositiva. Sigue siendo display:block (no flex) a
propósito: un contenedor flex rompe el cálculo de alto de
-webkit-line-clamp en sus hijos directos (ver .hero-slide__panel h2/p más
abajo) -- con flex, un título de 1 sola línea medía ~66px en vez de los
~152px reales de 3 líneas, y el navegador terminaba superponiendo el
título sobre el subtítulo. overflow:hidden es una defensa ante un texto
que aun así exceda el alto (evita que rompa el layout), no una solución
-- el contenido debe seguir cargándose pensando en que debe caber en esta
caja. */
height: 320px;
overflow: hidden;
padding: 1.75rem;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, rgba(8,28,54,0.85), rgba(11,35,65,0.55));
backdrop-filter: blur(2px);
}
@media (max-width: 599px) {
.hero-slide__panel { height: 380px; }
}
.hero-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.15rem 0.75rem; border-radius: var(--radius-full);
background: rgba(245,158,11,0.18); border: 1px solid rgba(245,158,11,0.4);
color: var(--color-accent-light); font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem;
}
.hero-slide__panel h2 {
color: #fff; font-size: 1.6rem; text-transform: uppercase; line-height: 1.15;
text-shadow: 0 2px 6px rgba(0,0,0,0.35);
/* Recorta con puntos suspensivos en vez de desbordar: el panel tiene alto
fijo (ver .hero-slide__panel arriba) y sin este límite, un título
inusualmente largo llenaba todo el espacio disponible y el
overflow:hidden del panel cortaba silenciosamente el subtítulo, el
párrafo y los botones que venían después, sin ningún indicio visual de
que faltaba contenido. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero-slide__panel h3 {
color: var(--color-accent-light); font-size: 0.9rem; text-transform: uppercase;
margin-top: 0.35rem; font-weight: 800;
}
.hero-slide__panel p {
color: #e2e8f0; font-size: 0.72rem; margin-top: 0.6rem; max-width: 34rem;
/* Mismo motivo que en h2: un párrafo demasiado largo no debe poder empujar
el grupo de botones fuera del alto fijo del panel sin avisar. Recortado a
2 líneas (antes 3): con el alto fijo de 320px del panel, 3 líneas de
párrafo sumadas al título y al grupo de botones no dejaban espacio
suficiente para mostrar los botones sin que overflow:hidden los cortara. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Tamaño único para todas las pantallas (antes 1.75rem/1.1rem en móvil y
1.6rem/0.9rem en escritorio, ver git history): con el alto fijo de 320px
del panel aplicándose por igual a cualquier ancho, el tamaño MAYOR
quedaba reservado justo para el móvil, que además envuelve el texto en
más líneas por ser más angosto -- la combinación cortaba los botones del
grupo .hero-cta-group en pantallas de celular. Un solo tamaño, igual de
compacto en cualquier ancho, evita ese caso. */
.hero-cta-group { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.65rem 1.25rem; border-radius: var(--radius-sm);
font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn-accent { background: var(--color-accent-light); color: #1e293b; box-shadow: var(--shadow-md); }
.btn-accent:hover { background: var(--color-accent-dark); color: #fff; }
.btn-outline-inverse { background: rgba(11,35,65,0.7); color: #fff; border-color: #cbd5e1; }
.btn-outline-inverse:hover { background: var(--color-primary); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.hero-slide__aside { width: 20rem; flex-shrink: 0; display: none; }
@media (min-width: 1024px) { .hero-slide__aside { display: block; } }
.hero-card {
background: rgba(11,35,65,0.95); border: 1px solid rgba(6,182,212,0.3);
border-radius: var(--radius-lg); padding: 1.1rem; color: #fff; box-shadow: var(--shadow-lg);
}
.hero-nav-btn {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
width: 2.75rem; height: 2.75rem; border-radius: 50%;
background: rgba(11,35,65,0.85); color: #fff; border: 1px solid rgba(255,255,255,0.2);
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, transform 0.2s;
}
.hero-nav-btn:hover { background: var(--color-accent-light); color: #0f172a; transform: translateY(-50%) scale(1.08); }
.hero-nav-btn--prev { left: 0.75rem; }
.hero-nav-btn--next { right: 0.75rem; }
.hero-indicators {
position: absolute; bottom: 1rem; left: 0; right: 0; z-index: 30;
display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.hero-counter {
background: rgba(7,24,45,0.8); color: #fff; font-size: 0.68rem; font-weight: 700;
padding: 0.15rem 0.65rem; border-radius: var(--radius-full); font-variant-numeric: tabular-nums;
}
.hero-dots { display: flex; align-items: center; gap: 0.5rem; background: rgba(7,24,45,0.6); padding: 0.4rem 0.75rem; border-radius: var(--radius-full); }
.hero-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: rgba(255,255,255,0.5); border: 0; transition: all 0.25s; }
.hero-dot.is-active { width: 1.5rem; background: var(--color-accent-light); }
/* =========================================================================
6. CONTENIDO PRINCIPAL DEL PORTAL
========================================================================= */
.portal-grid {
display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem;
}
@media (min-width: 1024px) {
.portal-grid { grid-template-columns: repeat(12, 1fr); }
.portal-grid .col-span-6 { grid-column: span 6; }
.portal-grid .col-span-9 { grid-column: span 9; }
.portal-grid .col-span-3 { grid-column: span 3; }
}
.panel {
background: var(--color-surface-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 1.25rem;
display: flex; flex-direction: column;
/* Sin esto, un elemento de grilla (.portal-grid) no se encoge por debajo
del tamaño mínimo de su contenido interno por defecto -- el panel de
"Noticias Institucionales", con el slider horizontal de tarjetas
(pensado para desbordar y desplazarse DENTRO de sí mismo, ver
.news-slider), terminaba forzando su propio ancho al ancho total de
esas tarjetas (~620px) en vez de encogerse a lo disponible en móvil.
Como en una sola columna todos los paneles comparten el mismo carril de
la grilla, ese ancho se contagiaba también a "Accesos Rápidos" y
"Comunicados Importantes", que no tenían ningún problema propio. */
min-width: 0;
}
.panel__header {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border-subtle);
}
.panel__title { display: flex; align-items: center; gap: 0.5rem; }
.panel__title .bar { width: 0.35rem; height: 1.25rem; border-radius: var(--radius-sm); background: var(--color-primary); }
.panel__title .bar--accent { background: var(--color-accent); }
.panel__title .bar--blue { background: #2563eb; }
.panel__title h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; }
.panel__more { font-size: 0.72rem; font-weight: 700; color: var(--color-primary); }
.panel__more:hover { color: var(--color-accent-dark); text-decoration: underline; }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.news-grid--archive { margin-block: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .news-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-grid--archive { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; background: #fff; transition: box-shadow 0.2s; }
.news-card:hover { box-shadow: var(--shadow-md); }
.news-card__media { position: relative; height: 8rem; background: var(--color-border-subtle); overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__date {
position: absolute; bottom: 0.5rem; left: 0.5rem; background: var(--color-primary); color: #fff;
text-align: center; border-radius: var(--radius-sm); padding: 0.15rem 0.5rem; line-height: 1.1;
}
.news-card__date strong { display: block; font-size: 0.85rem; color: var(--color-accent-light); }
.news-card__date span { display: block; font-size: 0.55rem; text-transform: uppercase; font-weight: 700; }
.news-card__body { padding: 0.75rem; position: relative; }
.news-card__body h3 { font-size: 0.78rem; line-height: 1.3; color: #0f172a; margin-bottom: 0.4rem; }
.news-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.news-card__body p { font-size: 0.7rem; color: var(--color-text-muted); }
.news-card__media--pdf { display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 2.25rem; }
.news-card__media--persona { display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 2.25rem; }
.news-card__media--persona img { object-fit: cover; }
.news-card__pdf-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.news-card__pdf-list a { font-size: 0.7rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.news-card__pdf-list a:hover, .news-card__pdf-list a:focus { text-decoration: underline; }
.news-card__pdf-primary-link { margin: 0.4rem 0 0; }
.news-card__pdf-primary-link a { font-size: 0.7rem; font-weight: 700; color: var(--color-primary); text-decoration: underline; }
/* Slider de "Noticias Institucionales" en la portada -- deliberadamente
separado de .news-grid/.news-grid--archive (que siguen usándose tal cual
en el listado completo de /noticias-y-actividades/ y en archive.php): con
scroll horizontal nativo + scroll-snap no hace falta reimplementar la
lógica de "diapositiva activa" del hero-carousel -- el navegador ya
resuelve el desplazamiento, el snap y el gesto táctil en móvil. */
.news-slider-wrap { position: relative; }
.news-slider {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-block: 0.15rem 0.5rem;
-webkit-overflow-scrolling: touch;
/* Se reemplaza la barra de desplazamiento nativa por los puntos de
.news-slider-dots (ver más abajo): el desplazamiento en sí lo sigue
resolviendo el scroll horizontal nativo, esto solo oculta su indicador
visual por defecto. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.news-slider::-webkit-scrollbar { display: none; }
.news-slider .news-card {
flex: 0 0 100%;
scroll-snap-align: start;
}
@media (min-width: 640px) {
.news-slider .news-card { flex: 0 0 calc(50% - 0.5rem); }
}
@media (min-width: 1024px) {
.news-slider .news-card { flex: 0 0 calc(33.333% - 0.667rem); }
}
.news-slider-btn {
position: absolute; top: 35%; transform: translateY(-50%);
width: 2rem; height: 2rem; border-radius: 50%;
background: #fff; border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-sm);
display: flex; align-items: center; justify-content: center;
z-index: 5; color: var(--color-primary); font-size: 0.75rem;
transition: background 0.15s, color 0.15s;
}
.news-slider-btn:hover { background: var(--color-primary); color: #fff; }
.news-slider-btn--prev { left: -0.5rem; }
.news-slider-btn--next { right: -0.5rem; }
/* El JS oculta el botón en el extremo correspondiente con el atributo
[hidden] cuando ya no hay más hacia dónde deslizar. La regla base de
arriba ya fija su propio "display: flex", que sin esto gana por
especificidad/orden sobre el "display: none" que el navegador aplica por
defecto a [hidden] -- el mismo problema ya visto antes en
.hero-slide[hidden] (ver ese comentario en este archivo). */
.news-slider-btn[hidden] { display: none; }
/* En pantallas angostas el panel no tiene margen a los costados para que
los botones (posicionados con left/right negativos, ver arriba) queden
"afuera" de la tarjeta como en escritorio: terminan superpuestos sobre su
contenido (la imagen/fecha), tapándolo. Se ocultan en ese rango -- el
deslizamiento táctil nativo (scroll-snap, ver .news-slider) y los puntos
de abajo ya cubren la navegación sin ellos. */
@media (max-width: 640px) {
.news-slider-btn { display: none; }
}
.news-slider-dots { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.25rem; }
.news-slider-dot { width: 0.45rem; height: 0.45rem; border-radius: var(--radius-full); background: var(--color-border); border: 0; padding: 0; transition: all 0.25s; }
.news-slider-dot.is-active { width: 1.25rem; background: var(--color-primary); }
.quick-list { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; flex: 1; }
.quick-list a { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem; border-radius: var(--radius-md); color: #334155; transition: background 0.15s, color 0.15s; }
.quick-list a:hover { background: var(--color-surface-subtle); color: var(--color-primary); }
.quick-list .icon-badge {
width: 1.6rem; height: 1.6rem; border-radius: var(--radius-sm); display: flex; align-items: center;
justify-content: center; flex-shrink: 0; font-size: 0.75rem;
}
.icon-badge.is-emerald { background: #d1fae5; color: #059669; }
.icon-badge.is-teal { background: #ccfbf1; color: #0d9488; }
.icon-badge.is-amber { background: #fef3c7; color: #b45309; }
.icon-badge.is-rose { background: #ffe4e6; color: #be123c; }
.icon-badge.is-purple { background: #ede9fe; color: #7c3aed; }
.icon-badge.is-sky { background: #e0f2fe; color: #0284c7; }
.announce-list { display: flex; flex-direction: column; gap: 1rem; }
/* Escapado a [data-purpose="important-announcements"] (el panel de la
portada) a propósito: .announce-list también se reutiliza tal cual en
archive-esfm_comunicado.php (el listado completo de /comunicados/), que
debe seguir mostrando todos los comunicados en su flujo normal, sin
recortarlos a una caja con scroll -- esa limitación de alto solo tiene
sentido en el panel chico de la portada. Si hay más comunicados de los
que caben ahí, el panel se desplaza verticalmente en vez de recortarlos
en silencio -- misma idea que el slider de noticias (más contenido del
que se ve de entrada, accesible desplazando), adaptada a una lista
vertical en vez de tarjetas horizontales. A diferencia del slider de
noticias, aquí la barra de desplazamiento se deja visible a propósito (en
vez de puntos): es la señal más directa de que hay más para leer abajo. */
[data-purpose="important-announcements"] .announce-list {
max-height: 15.5rem;
overflow-y: auto;
padding-right: 0.5rem;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
[data-purpose="important-announcements"] .announce-list::-webkit-scrollbar { width: 6px; }
[data-purpose="important-announcements"] .announce-list::-webkit-scrollbar-track { background: transparent; }
[data-purpose="important-announcements"] .announce-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
[data-purpose="important-announcements"] .announce-list::-webkit-scrollbar-thumb:hover { background: var(--color-primary-soft); }
.announce-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.announce-date {
flex-shrink: 0; width: 3rem; text-align: center; padding-block: 0.35rem;
background: var(--color-surface-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
}
.announce-date strong { display: block; font-size: 0.85rem; color: var(--color-primary); line-height: 1; }
.announce-date span { display: block; font-size: 0.55rem; font-weight: 700; color: var(--color-accent-dark); text-transform: uppercase; }
.announce-item p { font-size: 0.75rem; font-weight: 600; color: #334155; }
.announce-item p a { color: var(--color-primary-soft); }
.announce-item p a:hover { text-decoration: underline; }
.announce-item p a .fa-file-pdf { margin-left: 0.15rem; color: var(--color-civic-red); }
.panel__footer-link { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border-subtle); text-align: center; }
/* =========================================================================
7. PLATAFORMAS COMPLEMENTARIAS (marquee)
========================================================================= */
.platforms-panel { margin-top: 0; }
.panel__title--standalone { margin-bottom: 1.25rem; }
.panel__title--standalone h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.marquee-wrap { position: relative; overflow: hidden; }
.marquee-wrap::before, .marquee-wrap::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 3rem; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.marquee-track {
display: flex; align-items: stretch; gap: 1rem; width: max-content;
animation: esfm-marquee 35s linear infinite;
}
.marquee-track:hover, .marquee-track:focus-within { animation-play-state: paused; }
@keyframes esfm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
width: 13rem; height: 7rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: #fff; padding: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.marquee-item:hover, .marquee-item:focus-visible { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.marquee-item img { max-height: 100%; width: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; overflow-x: auto; }
.hero-slide { transition: none; }
}
/* =========================================================================
8. FOOTER
========================================================================= */
.site-footer {
background: var(--color-primary); color: #e2e8f0;
border-top: 4px solid var(--color-accent-light);
padding-block: 1.25rem; font-size: 0.75rem;
}
.site-footer__inner {
display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center;
}
@media (min-width: 768px) {
.site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; }
.footer-meta__item { display: flex; align-items: center; gap: 0.5rem; }
.footer-meta__item .icon { color: var(--color-accent-light); }
.footer-meta__item a:hover { text-decoration: underline; }
.footer-slogan { font-family: var(--font-script); font-size: 1.5rem; color: var(--color-accent-light); }
.ubicacion-mapa { margin-block: 1.5rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.ubicacion-mapa iframe { display: block; }
.ubicacion-cta { margin-bottom: 2rem; }
.contacto-grid {
display: grid; grid-template-columns: 1fr; gap: 2rem;
padding: 1.5rem; margin-bottom: 1rem;
background: var(--color-surface-subtle); border-radius: var(--radius-lg);
}
@media (min-width: 900px) {
.contacto-grid { grid-template-columns: 1fr 1.4fr; }
}
.contacto-info h2 { margin-top: 0; }
.contacto-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.contacto-info-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; }
.contacto-info-list .icon { color: var(--color-primary); margin-top: 0.15rem; flex: 0 0 auto; }
.contacto-info-list a { color: var(--color-primary); }
.contacto-info-list a:hover { text-decoration: underline; }
.footer-copyright {
margin-top: 1rem; padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.15);
text-align: center; font-size: 0.7rem; color: rgba(226,232,240,0.75);
}
/* =========================================================================
9. CONTENIDO GENÉRICO (páginas Elementor / entradas / búsqueda)
========================================================================= */
.site-main { min-height: 40vh; }
.page-header-band {
background: var(--color-primary); color: #fff; padding-block: 2rem;
border-bottom: 3px solid var(--color-accent);
}
.page-header-band h1 { color: #fff; font-size: 1.75rem; text-transform: uppercase; }
.entry-content,
.comments-area {
/* comments-area comparte este ancho para que el panel de comentarios
quede exactamente igual de ancho que el panel de la noticia -- antes
.comments-area no tenía max-width/centrado propio y se estiraba al
ancho completo de la columna (col-span-9), más ancha que los 860px del
artículo. */
max-width: 860px;
margin-inline: auto;
}
.entry-content { padding-block: 2.5rem; }
.comments-area { margin-top: 1.5rem; }
.entry-content img { border-radius: var(--radius-md); }
.entry-content a { color: var(--color-primary-soft); text-decoration: underline; }
.entry-content h2, .entry-content h3 { margin-top: 1.5em; }
.entry-meta { margin-bottom: 1rem; font-size: 0.8rem; color: var(--color-text-muted); display: flex; gap: 1.25rem; }
.entry-tags { margin-top: 2rem; font-size: 0.8rem; }
/* Botones "Compartir" de una entrada individual (Noticias) -- distintos de
.site-social (esos enlazan a las redes DE la institución; estos
comparten ESTE contenido puntual). */
.share-buttons { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; flex-wrap: wrap; }
.share-buttons a {
width: 2rem; height: 2rem; border-radius: 50%; color: #fff; text-decoration: none;
display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
transition: opacity 0.2s, transform 0.2s;
}
.share-buttons a:hover, .share-buttons a:focus { color: #fff; text-decoration: none; }
.share-buttons a:hover { opacity: 0.85; transform: translateY(-1px); }
.share-buttons .is-whatsapp { background: #25D366; }
.share-buttons .is-facebook { background: #1877F2; }
.share-buttons .is-x { background: #000000; }
.share-buttons .is-email { background: var(--color-text-muted); }
.panel--spaced { margin-block: 2rem; }
.panel--centered { text-align: center; align-items: center; }
.panel--centered .site-search { justify-content: center; margin-inline: auto; }
.not-found-back { margin-top: 1.5rem; }
.status-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.6rem; border-radius: var(--radius-full); font-size: 0.65rem; font-weight: 700; border: 1px solid; }
.status-chip--ok { background: #ecfdf5; color: var(--color-civic-green); border-color: var(--color-civic-green); }
.status-chip--pending { background: #fffbeb; color: var(--color-civic-amber); border-color: var(--color-civic-amber); }
.status-chip--closed { background: #fef2f2; color: var(--color-civic-red); border-color: var(--color-civic-red); }
.pagination { display: flex; gap: 0.5rem; justify-content: center; padding-block: 2rem; }
.pagination a, .pagination span {
padding: 0.4rem 0.8rem; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); font-size: 0.8rem;
}
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border);
border-radius: var(--radius-sm); font-family: inherit;
}
.comment-form textarea { min-height: 8rem; }
.comment-form input[type="submit"] { -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; }
/* Bloques nativos de WP dentro de páginas sin Elementor */
.alignwide { max-width: 1180px; margin-inline: auto; }
.alignfull { max-width: none; margin-inline: 0; }
/* Elementor: evitar doble contenedor cuando la página usa Canvas/Full Width */
.elementor-page .entry-content { max-width: none; padding: 0; }
/* =========================================================================
9. PÁGINA "CONVOCATORIAS" (page-convocatorias.php)
Árbol de 3 niveles en el panel lateral (Gestión/año > convocatoria como
carpeta > archivos), cada nivel desplegable; el área principal solo
contiene el visor de PDF, sin ningún listado duplicado sobre su
encabezado -- ver page-convocatorias.php para la lógica de expandir/
colapsar y de cargar un archivo en el visor.
========================================================================= */
.convocatorias-empty { padding-block: 3rem; text-align: center; color: var(--color-text-muted); }
.convocatorias-layout { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 2rem; align-items: flex-start; }
@media (min-width: 768px) {
.convocatorias-layout { flex-direction: row; }
}
.convocatorias-sidebar {
flex: 0 0 100%;
background: var(--color-surface-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 1.25rem;
}
@media (min-width: 768px) {
.convocatorias-sidebar { flex: 0 0 20rem; position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
}
.convocatorias-sidebar h2 {
font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em;
margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-subtle);
}
.convocatorias-count {
flex: 0 0 auto; font-size: 0.65rem; background: rgba(0,0,0,0.08); color: var(--color-text-muted);
padding: 0.05rem 0.45rem; border-radius: var(--radius-full); white-space: nowrap;
}
.convocatorias-chevron { flex: 0 0 auto; font-size: 0.65rem; color: var(--color-text-muted); transition: transform 0.2s; }
[aria-expanded="true"] > .convocatorias-chevron { transform: rotate(90deg); }
.convocatorias-tree { display: flex; flex-direction: column; gap: 0.15rem; }
/* Nivel 1: Gestión (año) */
.convocatorias-year-toggle {
display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
padding: 0.55rem 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--color-primary);
text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer;
border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s;
}
.convocatorias-year-toggle:hover { background: var(--color-surface-subtle); color: var(--color-primary-soft); }
.convocatorias-year-children { padding-left: 1rem; border-left: 2px solid var(--color-border-subtle); margin: 0.15rem 0 0.6rem 0.65rem; }
/* Nivel 2: convocatoria (carpeta) */
.convocatorias-folder-toggle {
display: flex; align-items: flex-start; gap: 0.55rem; width: 100%; text-align: left;
padding: 0.5rem; font-size: 0.8rem; color: var(--color-text); cursor: pointer;
border-radius: var(--radius-sm); transition: background 0.15s;
}
.convocatorias-folder-toggle:hover { background: var(--color-surface-subtle); }
.convocatorias-folder-toggle--empty { cursor: default; color: var(--color-text-muted); }
.convocatorias-folder-toggle--empty:hover { background: transparent; }
.convocatorias-folder-toggle .fa-folder { color: var(--color-accent-dark); flex: 0 0 auto; margin-top: 0.2rem; font-size: 0.95rem; }
.convocatorias-folder-label { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.convocatorias-item__title { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.convocatorias-item__date { font-size: 0.68rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.convocatorias-file-children {
padding-left: 0.9rem; border-left: 2px solid var(--color-border-subtle); margin: 0.15rem 0 0.35rem 0.75rem;
display: flex; flex-direction: column; gap: 0.15rem;
}
.convocatorias-file-children[hidden] { display: none; }
/* Nivel 3: archivo (PDF) -- el nombre de archivo puede ser largo (la
convocatoria en sí, anexos, formularios suelen tener nombres
descriptivos): se ajusta en varias líneas dentro de la caja en vez de
cortarse en el borde. El ícono se alinea arriba (no al centro) para que
no quede descentrado cuando el nombre ocupa más de una línea. */
.convocatorias-file-toggle {
display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; text-align: left;
padding: 0.45rem 0.5rem; font-size: 0.73rem; color: var(--color-text-muted); cursor: pointer;
border-radius: var(--radius-sm); border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.convocatorias-file-toggle:hover { background: var(--color-surface-subtle); color: var(--color-text); border-color: var(--color-border-subtle); }
.convocatorias-file-toggle.is-active { background: var(--color-primary); color: #fff; font-weight: 600; }
.convocatorias-file-toggle .fa-file-pdf { color: var(--color-civic-red); flex: 0 0 auto; margin-top: 0.15rem; }
.convocatorias-file-toggle.is-active .fa-file-pdf { color: #fff; }
.convocatorias-file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }
/* Área principal: solo el visor, sin listado encima */
.convocatorias-main { flex: 1 1 auto; min-width: 0; width: 100%; }
.convocatorias-viewer-wrap {
border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
#convocatorias-viewer { width: 100%; height: 75vh; min-height: 480px; display: block; border: 0; }
/* ===========================================================================
* Plantilla reutilizable "Galería de Fotos y Videos" (page-galeria.php)
* ========================================================================= */
.galeria-empty { padding-block: 3rem; text-align: center; color: var(--color-text-muted); }
.galeria-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
.galeria-filtro {
padding: 0.4rem 1rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);
background: var(--color-surface-subtle); border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-full); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.galeria-filtro:hover { border-color: var(--color-primary-soft); color: var(--color-primary); }
.galeria-filtro.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.galeria-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem;
margin-bottom: 2.5rem;
}
.galeria-item {
display: flex; flex-direction: column; text-align: left; background: var(--color-surface-card);
border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden;
box-shadow: var(--shadow-sm); cursor: pointer; padding: 0; transition: box-shadow 0.2s, transform 0.2s;
}
.galeria-item:hover, .galeria-item:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.galeria-item[hidden] { display: none; }
.galeria-item__media {
position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-subtle);
}
.galeria-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.galeria-item:hover .galeria-item__media img { transform: scale(1.06); }
.galeria-item__sinimagen {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
color: var(--color-text-muted); font-size: 2rem;
}
.galeria-play-badge {
position: absolute; inset: 0; margin: auto; width: 3rem; height: 3rem; display: flex;
align-items: center; justify-content: center; background: rgba(11, 35, 65, 0.7); color: #fff;
border-radius: var(--radius-full); font-size: 1rem; pointer-events: none;
}
.galeria-item__titulo {
padding: 0.65rem 0.85rem; font-size: 0.85rem; font-weight: 600; color: var(--color-text);
line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.galeria-lightbox {
position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.galeria-lightbox[hidden] { display: none; }
.galeria-lightbox__backdrop { position: absolute; inset: 0; background: rgba(7, 24, 45, 0.85); cursor: pointer; }
.galeria-lightbox__panel {
position: relative; z-index: 1; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
max-width: min(900px, 100%); max-height: 90vh; overflow-y: auto; padding: 1rem;
}
.galeria-lightbox__cerrar {
position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 2.2rem; height: 2.2rem;
display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff;
border: 0; border-radius: var(--radius-full); cursor: pointer; font-size: 1rem;
}
.galeria-lightbox__cerrar:hover { background: var(--color-primary-dark); }
.galeria-lightbox__contenido img {
/* max-height (no solo width:100%) para que una foto vertical/alta quepa
entera dentro de la ventana sin que .galeria-lightbox__panel necesite
su propia barra de desplazamiento -- el cálculo resta el padding del
panel (1rem arriba y abajo) y el espacio del título debajo. */
display: block; width: auto; height: auto;
max-width: 100%; max-height: calc(90vh - 6rem);
margin-inline: auto; border-radius: var(--radius-md); object-fit: contain;
}
.galeria-lightbox__contenido video { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.galeria-video-embed-wrap { position: relative; padding-top: 56.25%; height: 0; }
.galeria-video-embed-wrap iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md);
}
.galeria-lightbox__titulo { margin-top: 0.75rem; font-weight: 600; color: var(--color-primary); text-align: center; }
@media (max-width: 480px) {
.galeria-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.galeria-lightbox { padding: 0.75rem; }
}
.docentes-grupo { margin-bottom: 2rem; }
.docentes-grupo__titulo {
color: var(--color-primary); border-bottom: 2px solid var(--color-accent-light);
padding-bottom: 0.4rem; margin-bottom: 1.25rem;
}
.docentes-grid {
/* auto-fit (no auto-fill) colapsa las columnas vacías a 0: con auto-fill,
el navegador reserva igual varias columnas vacías hasta llenar el
ancho del contenedor, y esas columnas vacías (invisibles) hacían que
justify-content: center no tuviera ningún efecto visible cuando un
grupo tiene pocos docentes (ej. 1 o 2). */
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 170px)); gap: 1.25rem;
justify-content: center;
}
.docente-card { text-align: center; scroll-margin-top: 5rem; }
.docente-card__foto {
/* Tamaño fijo (no un porcentaje del ancho de la tarjeta) para que todas
las fotos se vean exactamente del mismo tamaño sin importar el ancho
que termine ocupando cada tarjeta -- en una fila flex (organigrama de
Autoridades) una tarjeta se angosta o ensancha según su propio texto
(nombre/cargo), así que un ancho en % hacía que las fotos de una misma
fila no coincidieran entre sí. Coincide con el tamaño real que genera
WordPress (ver 'esfm-persona' en inc/setup.php) para que la imagen no
se escale ni se vea borrosa. max-width evita que se desborde en una
pantalla angosta.
*/
width: 170px; height: 170px; max-width: 100%; margin-inline: auto;
border-radius: 50%; overflow: hidden;
background: var(--color-surface-subtle); border: 3px solid var(--color-accent-light);
display: flex; align-items: center; justify-content: center;
}
.docente-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.docente-card__sinfoto { font-size: 2.5rem; color: var(--color-border-subtle); }
.docente-card__nombre { margin-top: 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--color-primary); }
.docente-card__cargo { margin-top: 0.15rem; font-size: 0.72rem; color: var(--color-text-muted); }
.autoridades-organigrama { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.autoridades-nivel {
display: flex; justify-content: center; flex-wrap: wrap; gap: 2.5rem; width: 100%;
}
@media (max-width: 480px) {
.docentes-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 170px)); gap: 0.85rem; }
}