/* * Estilos propios del sitio, mínimos e intencionados. * Sustituye a now-ui-kit.css + my-style.css + personalize.css (theme de 2017 sobre Bootstrap 4, retirado). * Solo contiene lo que Bootstrap 5 no cubre de forma nativa. * * Fase B, Tarea 6 (design U6): reescrito para usar tokens --ce-* en vez de * literales de color. Alcance de esta reescritura: colores (fondo, borde, * texto) y font-weight cuando hay un token exacto (700 -> --ce-font-weight-bold). * NO se ha tocado el espaciado/padding/margin/font-size/border-radius en * píxeles o rem: ninguno de esos valores concretos (10px, .95rem, .82rem, * 10px de radio...) tiene un token equivalente en la escala de Celosía * (--ce-space-*, --ce-font-size-*, --ce-size-radius-*), y forzar el valor * más cercano de la escala movería el layout de forma no verificada en el * checkpoint visual (riesgo de regresión, ver sdd/celosia-phase-b/design * §8 R1: "presupuestar un pase de seguimiento explícito, no reclamar * cobertura completa en un solo pase"). El antiguo bloque @media * (prefers-color-scheme: dark) de 14 literales hardcodeados se retiró en * la Tarea 7 (design U7) sin sustituto directo — ver la nota al final de * este fichero, justo donde vivía ese bloque. */ /* Red de seguridad de desbordamiento horizontal (sdd/directo-a-responsive, AD-4). NO sustituye a los arreglos de raiz: aterriza DESPUES de ellos, a proposito, para que .novedades-paginacion y .organigrama-contacto queden demostrados como arreglados y no simplemente tapados. A partir de aqui, la verificacion de desbordamiento se afirma a NIVEL DE ELEMENTO (scrollWidth <= clientWidth del componente sospechoso), nunca a nivel de documento: esta regla enmascara la senal de documento. */ html { overflow-x: hidden; } body { /* `hidden` como suelo; `clip` gana donde exista. Con ya en hidden no hay propagacion al viewport, asi que un `hidden` en lo convierte en contenedor de scroll (overflow-y visible pasa a auto) — el fallo clasico que desactiva position:sticky. `clip` recorta sin crear ese contenedor. Hoy el proyecto no tiene ningun sticky (auditado, ver design §4.4), pero este par deja el guard a prueba de sticky futuros por 1 linea. */ overflow-x: hidden; overflow-x: clip; } /* Barra superior grande (teléfono/email/redes) que solo se ve en escritorio */ .navbar-lg { padding-top: 10px; padding-bottom: 10px; background-color: var(--ce-color-semantic-surface); } /* Cabecera de página interior: solo el título, sin fondo propio -- el fondo vive en .site-page-header, que envuelve este bloque junto con la miga de pan (ver ese bloque, más abajo, para el porqué del degradado de marca). */ .my-header { padding: 0; text-align: left; } .my-header > .container { width: 100%; padding-top: 40px; padding-bottom: 40px; } /* h1, no h2: es el único título de página de todo el sitio (revisión de encabezados -- antes era h2 y no había ningún h1 en ninguna página). */ .my-header > .container > h1 { margin: 0; font-weight: var(--ce-font-weight-bold); /* Texto en blanco: .my-header solo se pinta dentro de .site-page-header, cuyo fondo es el degradado fijo de marca (oscuro por construcción, ver ese bloque) -- el color de marca sobre color de marca no se lee. */ color: var(--ce-color-neutral-0); } /* Secciones de la home: fondo a todo el ancho, alternado por widgets/index.php. El espaciado entre secciones vive aquí (padding, no margin) para que el fondo alterno cubra todo el hueco sin colapsar contra el margin de los widgets. */ .home-section { padding: 64px 0; } /* .home-section-first envuelve solo hero-noticias (.ce-hero--marca): con padding-bottom heredado de .home-section, el fondo de marca se quedaba 64px más alto que el propio .ce-hero, dejando una franja de color de marca colgando por debajo del hero antes de "Directo a" -- se anula por completo, no solo el padding-top. */ .home-section-first { padding: 0; } /* Fondo "tinte" alterno de la home (Fase C, W6 correction): antes un style="" por petición con tint_color($config['color_primario']) inline (public/index.php). El valor está DERIVADO DEL PREAJUSTE DE MARCA, no de un dato arbitrario por fila de BD, así que su token vive en celosia_brand_css() junto a los diez pasos de la escala (lib/celosia_css.php) y se sirve por los mismos 7 ficheros preset-*.css pre-compilados que ya entrega inc_menu.php — no una regla nueva por petición. */ .home-section-tinted { background-color: var(--ce-color-brand-tint); } /* El fondo de marca de hero-noticias YA NO vive aquí (ni en .home-section-first, que ya no lleva .home-section-tinted en el marcado -- public/index.php). Vivió aquí brevemente (dos commits atrás): la sección y .ce-hero--marca calculaban el mismo degradado sobre DOS anchos distintos (sección completa vs. .ce-hero dentro del .container, ~24px más estrecho por su gutter), y esa diferencia se veía como una costura justo donde empezaba la caja. Ahora el propio widget (.widget-hero-noticias-wrapper, más abajo) es el elemento a sangre completa Y es el mismo ancho que .ce-hero --sin .container de por medio--, así que solo hay un degradado real, no dos que intentan coincidir. */ /* Botón circular de solo icono (compartir, etc.) — Bootstrap 5 no trae esta variante */ .btn-icon.btn-round { border-radius: 50%; width: 2.375rem; height: 2.375rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* Ficha de etapa educativa (estudiar/*, centro/agenda/; Fase D, sdd/celosia-componentes W4): dialecto de reemplazo del antiguo bloque .etapa-* (definido aquí mismo hasta W4.5, cuando el último adoptante —centro/agenda/index.php— migró y el bloque .etapa-* se retiró por completo; tasks #349 W4.1-4.5). El contenedor de tarjeta de resumen pasa a .ce-card sin modificador (celosia-componentes.css le basta). El acordeón de detalle co-clasea .ce-card con .ficha-detalle porque necesita comportamiento propio (summary, marcador, chevron, separador al abrir) fuera del contrato de .ce-card — mismo patrón que .ce-card + .agenda-card-acento en W5. El resto de clases (-intro/-subtitulo/-grid/-resumen-titulo/-resumen-texto/-imagen) es solo tipografía/layout sin equivalente en celosia-componentes.css. Adoptantes: estudiar/bachillerato (W4.1, pilote), estudiar/educacion- secundaria-obligatoria (W4.2), estudiar/educacion-permanente/{espa, btopa} (W4.3), estudiar/{formacion-profesional,curso-especializacion} (W4.4), centro/agenda (W4.5, solo -detalle/-detalle-icono/-detalle- chevron/-detalle-cuerpo: la tarjeta de evento ya usaba .ce-card desde W5). */ .ficha-intro { font-size: 1.05rem; color: var(--ce-color-semantic-text-secondary); max-width: 760px; margin-bottom: 32px; } .ficha-subtitulo { font-size: var(--ce-font-size-lg); font-weight: var(--ce-font-weight-bold); margin: var(--ce-space-7) 0 var(--ce-space-4); } .ficha-subtitulo:first-child { margin-top: 0; } .ficha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-bottom: 8px; } .ficha-resumen-titulo { font-weight: var(--ce-font-weight-bold); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ce-color-semantic-text-secondary); margin-bottom: 8px; } .ficha-resumen-texto { font-size: .92rem; color: var(--ce-color-semantic-text-primary); margin: 0; } .ficha-detalle { margin-bottom: 12px; } .ficha-detalle summary { font-weight: var(--ce-font-weight-bold); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; } .ficha-detalle summary::-webkit-details-marker, .ficha-detalle summary::marker { display: none; content: ''; } .ficha-detalle-chevron { margin-left: auto; font-size: .8rem; color: var(--ce-color-semantic-text-secondary); transition: transform .2s ease; } .ficha-detalle[open] .ficha-detalle-chevron { transform: rotate(90deg); } .ficha-detalle[open] summary { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ce-color-semantic-border-subtle); } .ficha-detalle-cuerpo { font-size: .95rem; color: var(--ce-color-semantic-text-primary); } .ficha-detalle-cuerpo > *:last-child { margin-bottom: 0; } .ficha-detalle-icono { color: var(--ce-color-semantic-text-secondary); width: 18px; text-align: center; flex-shrink: 0; } /* Etiqueta de tipo de programa, encima de .ficha-intro (rediseño de contenido, adoptantes: los 6 index.php de detalle bajo estudiar/). Se probó primero como cabecera a sangre con foto + velo + título propio (mismo lenguaje que .estudiar-card--foto), pero duplicaba el título de la página -- .site-page-header (inc_menu.php) ya lo pinta en su propio

. Retirada esa cabecera (petición expresa tras verla en producción) y también la miniatura de foto que había antes (.ficha-imagen, retirada por completo -- petición expresa): estos 6 detalles ya no muestran ninguna imagen, solo la pastilla de tipo + el texto, con .ficha-grid a la anchura completa del contenido. / .ficha-tipo-tag { margin-bottom: var(--ce-space-2); } / Datos rápidos (evolución de .ficha-grid/-resumen-titulo/-resumen-texto de arriba, mismas clases): añade un icono delante de cada etiqueta para que se lea como panel de datos de un vistazo, no como una lista de definiciones. / .ficha-resumen-titulo { display: flex; align-items: center; gap: var(--ce-space-2); } .ficha-resumen-icono { color: var(--ce-color-brand-600); font-size: .85rem; } / Secciones prioritarias (Requisitos de acceso / Salidas profesionales, las dos que de verdad deciden si a alguien le interesa el programa): se sacan del acordeón y se muestran siempre abiertas, justo debajo de los datos rápidos -- el resto de secciones scrapeadas (Plan de formación, Tus estudios en Europa...) se quedan en el acordeón de siempre, ahora bajo "Más detalles" en vez de "Toda la información" porque ya no lo es todo. / .ficha-prioritaria { margin-bottom: var(--ce-space-5); } .ficha-prioritaria-titulo { display: flex; align-items: center; gap: var(--ce-space-2); font-size: var(--ce-font-size-lg); font-weight: var(--ce-font-weight-bold); margin: 0 0 var(--ce-space-3); } .ficha-prioritaria-titulo i { color: var(--ce-color-brand-600); width: 20px; text-align: center; } / Cierre con llamada a la acción real: solo aparece si el destino existe de verdad (cita previa activa, mismo criterio Y que widgets/widget-custom.php y lib/buscador_sitio.php -- nunca se ofrece un servicio apagado), si no cae a un enlace de vuelta al listado general, nunca vacío. / .ficha-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ce-space-3); margin-top: var(--ce-space-7); padding: var(--ce-space-5); background-color: var(--ce-color-semantic-surface-sunken); border-radius: var(--ce-size-radius-container); } .ficha-cta p { margin: 0; font-weight: var(--ce-font-weight-bold); color: var(--ce-color-semantic-text-primary); } / ============================================================ Cabecera del sitio + offcanvas de menú completo (antes bloque "B2" inline en inc_menu.php,