/** * theme.css — Estilos de componentes propios del tema MINVU Biobío. * * Capa 4 (última) de la arquitectura CSS de cuatro capas (Arquitectura * v1.0, Sección de Sistema CSS). Contiene únicamente lo que Bootstrap no * resuelve de forma nativa. Ningún selector de este archivo reimplementa * utilidades que ya existen en Bootstrap (grid, flex, spacing): se * construye sobre clases de Bootstrap en el HTML y aquí solo se ajusta lo * que el Design System institucional exige y difiere del default. * * Alcance de este Sprint 1: header sticky, navegación principal/móvil, * footer y utilidades base (.badge-unico, .font-slab-destacado). Las * reglas de tarjetas, alertas de salida/acción primaria y otros * componentes de contenido (Sprints 3-5) se dejan como mapa de ruta * comentado al final de este archivo, no como código activo. * * @package MinvuBiobio */ /* ========================================================================== Accesibilidad base — clase no-js / js (ver inc/enqueue.php) ========================================================================== */ /** * Por defecto, el lleva la clase 'no-js' (declarada en header.php). * El toggle de menú móvil depende de JavaScript para funcionar; si JS está * deshabilitado, se mantiene visible la navegación completa sin colapsar * en lugar de ocultarla detrás de un botón que nunca respondería. */ .no-js .minvu-nav__toggle { display: none; } /* ========================================================================== Skip link — accesibilidad de navegación por teclado ========================================================================== */ /** * Enlace "Saltar al contenido principal", visualmente oculto hasta que * recibe foco de teclado. Requisito de accesibilidad WCAG 2.1 AA para que * un usuario de teclado no tenga que tabular por toda la navegación en * cada carga de página. */ .minvu-skip-link { position: absolute; top: -100px; left: var( --space-2 ); z-index: 1100; padding: var( --space-2 ) var( --space-3 ); background-color: var( --color-primario ); color: var( --color-blanco ); font-weight: var( --font-weight-medium ); border-radius: 0.25rem; transition: top 0.15s ease-in-out; } .minvu-skip-link:focus { top: var( --space-2 ); color: var( --color-blanco ); } /* ========================================================================== Header institucional ========================================================================== */ /** * Header sticky de altura fija, fondo blanco con borde inferior de 1px en * color acento — nunca sombra, conforme a la ausencia de elevaciones * decorativas del Framework Digital de Gobierno de Chile. */ .minvu-header { position: sticky; top: 0; z-index: 1030; /* Por debajo del z-index de Offcanvas de Bootstrap (1045) */ background-color: var( --color-blanco ); border-bottom: var( --header-border-width ) solid var( --color-acento ); height: var( --header-height-mobile ); } @media ( min-width: 768px ) { .minvu-header { height: var( --header-height-desktop ); } } .minvu-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .minvu-header__logo img { max-height: calc( var( --header-height-mobile ) - var( --space-2 ) ); } @media ( min-width: 768px ) { .minvu-header__logo img { max-height: calc( var( --header-height-desktop ) - var( --space-3 ) ); } } /* ========================================================================== Navegación principal (desktop) ========================================================================== */ /** * Seis ítems máximo, sin desplegables de segundo nivel (Arquitectura v1.0, * Sección de Navegación). Se construye sobre .navbar-nav de Bootstrap; este * bloque solo ajusta tipografía y el estado de enlace activo. */ .minvu-nav__principal .nav-link { font-family: var( --font-base ); font-weight: var( --font-weight-medium ); font-size: var( --text-base ); color: var( --color-terciario ); padding: var( --space-2 ) var( --space-2 ); } .minvu-nav__principal .nav-link:hover, .minvu-nav__principal .nav-link:focus { color: var( --color-primario ); } .minvu-nav__principal .nav-link.active, .minvu-nav__principal .nav-link[aria-current="page"] { color: var( --color-primario ); font-weight: var( --font-weight-bold ); } /* ========================================================================== Botón de búsqueda en header (expansión, Sprint 6 implementa search.js) ========================================================================== */ /** * En este sprint solo se entrega el marcado y estilo base del ícono de * búsqueda en el header. El comportamiento de expansión a campo completo * en desktop se implementa en Sprint 6 (search.js); por eso el botón ya * existe visualmente pero aún no es funcional más allá de enlazar a la * URL de resultados de búsqueda nativa de WordPress (?s=). */ .minvu-header__search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: none; background: transparent; color: var( --color-terciario ); } .minvu-header__search-toggle:hover, .minvu-header__search-toggle:focus { color: var( --color-primario ); } /* ========================================================================== Menú móvil (Offcanvas de Bootstrap) ========================================================================== */ /** * El comportamiento de apertura/cierre lo resuelve Offcanvas de Bootstrap * (data-bs-toggle="offcanvas") sin JavaScript propio adicional más allá de * lo que nav.js necesita para el header sticky. Aquí solo se ajustan * tamaños de contacto táctil (mínimo 44px) y tipografía. */ .minvu-offcanvas-nav .nav-link { min-height: 44px; display: flex; align-items: center; font-size: var( --text-lg ); color: var( --color-terciario ); border-bottom: 1px solid var( --color-neutral ); } .minvu-offcanvas-nav .nav-link:hover, .minvu-offcanvas-nav .nav-link:focus { color: var( --color-primario ); background-color: var( --color-neutral ); } /* ========================================================================== Footer institucional ========================================================================== */ /** * Estructura de cuatro columnas, fondo color terciario con texto blanco: * único punto del sistema donde se invierte la relación de contraste * (Arquitectura v1.0, Sección de Sistema Visual). */ .minvu-footer { background-color: var( --color-terciario ); color: var( --color-blanco ); padding-top: var( --space-8 ); padding-bottom: var( --space-6 ); } .minvu-footer a { color: var( --color-blanco ); } .minvu-footer a:hover, .minvu-footer a:focus { color: var( --color-acento ); } .minvu-footer__heading { font-size: var( --text-sm ); font-weight: var( --font-weight-bold ); text-transform: uppercase; letter-spacing: 0.04em; color: var( --color-blanco ); margin-bottom: var( --space-2 ); } .minvu-footer__bottom { margin-top: var( --space-6 ); padding-top: var( --space-3 ); border-top: 1px solid rgba( 255, 255, 255, 0.15 ); font-size: var( --text-xs ); color: var( --color-acento ); } /* ========================================================================== Utilidades propias (Arquitectura v1.0, Sección 4.3) ========================================================================== */ /** * Fuerza un solo badge por encabezado de contenido (regla de jerarquía * de badges, Fase 4 / Sección 2.2 de la auditoría). Esta clase se aplicará * a partir del Sprint 3-4 sobre los badges de estado/categoría; se declara * ya en este sprint porque es una utilidad transversal de bajo nivel, no * un componente de contenido específico. */ .badge-unico { display: inline-block; margin-bottom: var( --space-1 ); } /** * Uso restringido a un solo componente del sistema: el titular de la * noticia destacada en el Nivel 1 de Home (Sprint 3). Se declara aquí * para que la utilidad exista desde la fundación del tema. */ .font-slab-destacado { font-family: var( --font-slab ); font-weight: var( --font-weight-bold ); } /* ========================================================================== Home — Nivel 0: Búsqueda destacada ========================================================================== */ .minvu-home-busqueda { padding-top: var( --space-6 ); padding-bottom: var( --space-4 ); } .minvu-home-busqueda__label { display: block; text-align: center; font-size: var( --text-lg ); color: var( --color-terciario ); margin-bottom: var( --space-3 ); } /* ========================================================================== Home — Nivel 1: Noticias destacadas ========================================================================== */ .minvu-home-noticias-destacadas { padding-bottom: var( --space-6 ); } /* ========================================================================== Home — Nivel 2: Exploración unificada ========================================================================== */ .minvu-home-exploracion { padding-bottom: var( --space-6 ); } .minvu-home-exploracion__titulo { font-size: var( --text-2xl ); margin-bottom: var( --space-4 ); } /* ========================================================================== Home — Nivel 3: Bloques secundarios (fondo de sección alterna) ========================================================================== */ .minvu-home-secundarios { background-color: var( --color-neutral ); padding-top: var( --space-6 ); padding-bottom: var( --space-6 ); } .minvu-home-secundarios__titulo { font-size: var( --text-xl ); color: var( --color-terciario ); margin-bottom: var( --space-3 ); } .minvu-home-secundarios__autoridades { color: var( --color-gris-oscuro ); } /* ========================================================================== Tarjeta de noticia (card-noticia.php) ========================================================================== */ .minvu-card-noticia { background-color: var( --color-blanco ); } .minvu-card-noticia__link { color: inherit; } .minvu-card-noticia__media img { width: 100%; height: auto; display: block; } .minvu-card-noticia__body { padding: var( --space-3 ) 0; } .minvu-card-noticia__titulo { font-size: var( --text-xl ); margin: var( --space-1 ) 0; } /* Variante secundaria: título más pequeño que la destacada, conforme al mockup de Fase 4 (la destacada usa --text-3xl vía .font-slab-destacado aplicado en el propio H3; aquí solo se ajusta el tamaño de la secundaria, que no lleva esa clase). */ .minvu-card-noticia--secundaria .minvu-card-noticia__titulo { font-size: var( --text-lg ); } .minvu-card-noticia--destacada .minvu-card-noticia__titulo { font-size: var( --text-3xl ); } .minvu-card-noticia__resumen { color: var( --color-gris-oscuro ); font-size: var( --text-base ); /* Truncamiento a dos líneas (Fase 4, Sección 4.5): line-clamp es ampliamente soportado en navegadores actuales (Chrome, Edge, Safari, Firefox 68+); no se usa una librería de JS solo para este efecto. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .minvu-card-noticia__meta { font-size: var( --text-xs ); color: var( --color-gris-medio ); margin-bottom: 0; } /* ========================================================================== Badge de área temática (un solo badge por tarjeta de noticia) ========================================================================== */ .minvu-badge-area-tematica { background-color: rgba( 0, 111, 179, 0.1 ); /* --color-primario al 10% */ color: var( --color-terciario ); font-weight: var( --font-weight-medium ); font-size: var( --text-xs ); } /* ========================================================================== Tarjeta de programa (card-programa.php) ========================================================================== */ .minvu-card-programa { background-color: var( --color-blanco ); border-top: 3px solid var( --color-primario ); } .minvu-card-programa__link { color: inherit; } .minvu-card-programa__media img { width: 100%; height: auto; display: block; } .minvu-card-programa__body { padding: var( --space-3 ); } .minvu-card-programa__titulo { font-size: var( --text-xl ); margin: var( --space-1 ) 0; } .minvu-card-programa__descripcion { color: var( --color-gris-oscuro ); font-size: var( --text-sm ); margin-bottom: 0; } /** * Badge de estado de programa: color primario al 10% con texto terciario * para todos los estados (Arquitectura v1.0, Fase 4 Sección 4.6: "Badge de * estado... usando color primario en 10% de fondo con texto en color * terciario"). No se usan colores de "éxito" o "advertencia" ad hoc por * estado, conforme a la regla de paleta exclusivamente oficial. */ .minvu-badge-estado-programa { background-color: rgba( 0, 111, 179, 0.1 ); color: var( --color-terciario ); font-weight: var( --font-weight-medium ); font-size: var( --text-xs ); } /* ========================================================================== Tarjeta de Territorio (card-territorio.php) ========================================================================== */ .minvu-card-territorio { background-color: var( --color-blanco ); } .minvu-card-territorio__link { color: inherit; } .minvu-card-territorio__body { padding: var( --space-3 ); text-align: center; } .minvu-card-territorio__icono { display: inline-flex; color: var( --color-terciario ); margin-bottom: var( --space-2 ); } .minvu-card-territorio__titulo { font-size: var( --text-xl ); margin: 0 0 var( --space-1 ) 0; } .minvu-card-territorio__descripcion { color: var( --color-gris-oscuro ); font-size: var( --text-sm ); margin-bottom: 0; } /** * Borde superior distintivo de la tarjeta de Territorio, en color * terciario en lugar del color primario que usa card-programa — la * diferenciación visual exigida por la Arquitectura v1.0 (Fase 4, Sección * 2.1) sin introducir un color fuera de la paleta oficial. El ícono de pin * (ver card-territorio.php) es el diferenciador principal; el color es * un refuerzo secundario, nunca el único medio de distinción. */ .borde-superior-territorio { border-top: 3px solid var( --color-terciario ); } /* ========================================================================== Breadcrumbs (template-parts/nav/breadcrumbs.php) ========================================================================== */ /** * Arquitectura v1.0, Sección 4.11: "Texto secundario con separador * chevron. El último elemento (página actual) se muestra en color * terciario sin enlace; el resto en color primario con enlace activo." */ .minvu-breadcrumbs__list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 var( --space-3 ) 0; font-size: var( --text-sm ); } .minvu-breadcrumbs__item { display: inline-flex; align-items: center; } .minvu-breadcrumbs__item a { color: var( --color-primario ); text-decoration: none; } .minvu-breadcrumbs__item a:hover, .minvu-breadcrumbs__item a:focus { text-decoration: underline; } /* El ítem actual (sin enlace, marcado con aria-current) usa color terciario, conforme a la regla de Fase 4. */ .minvu-breadcrumbs__item span[aria-current="page"] { color: var( --color-terciario ); } .minvu-breadcrumbs__separador { margin: 0 var( --space-1 ); color: var( --color-gris-medio ); } /* ========================================================================== Alerta de acción primaria (template-parts/alerts/alert-accion-primaria.php) ========================================================================== */ /** * Arquitectura v1.0, Sección 6.3: "fondo --color-secundario (10%), borde * sólido." Única aplicación del color secundario como fondo SÓLIDO del * botón en todo el sistema (Fase 4, Sección 3.1) — el fondo del * contenedor usa el color al 10%, nunca al 100%. */ .minvu-alerta-accion-primaria { background-color: rgba( 254, 101, 101, 0.1 ); /* --color-secundario al 10% */ border: 1px solid var( --color-secundario ); border-radius: 0.25rem; padding: var( --space-3 ); margin: var( --space-4 ) 0; } .minvu-alerta-accion-primaria__mensaje { color: var( --color-terciario ); margin-bottom: var( --space-2 ); } /** * El botón SÍ usa el color secundario como fondo sólido — la única * excepción permitida en todo el sistema a la regla de "nunca decorativo" * (Fase 4, Sección 3.1), reservada exclusivamente a esta alerta. */ .minvu-btn-accion-primaria { background-color: var( --color-secundario ); color: var( --color-blanco ); border: none; font-weight: var( --font-weight-medium ); } .minvu-btn-accion-primaria:hover, .minvu-btn-accion-primaria:focus { background-color: var( --color-terciario ); color: var( --color-blanco ); } /* ========================================================================== Single de Programa ========================================================================== */ .minvu-single-programa__header { margin-bottom: var( --space-3 ); } .minvu-single-programa__titulo { font-size: var( --text-3xl ); margin: var( --space-1 ) 0 0 0; } .minvu-single-programa__contenido { font-size: var( --text-base ); color: var( --color-gris-oscuro ); margin-bottom: var( --space-6 ); } .minvu-single-programa__proyectos { margin-bottom: var( --space-6 ); } /* ========================================================================== Tarjeta de proyecto destacado (card-proyecto.php) — sin enlace propio ========================================================================== */ .minvu-card-proyecto { background-color: var( --color-blanco ); border: 1px solid var( --color-acento ); } .minvu-card-proyecto__media img { width: 100%; height: auto; display: block; } .minvu-card-proyecto__body { padding: var( --space-2 ) var( --space-3 ); } .minvu-card-proyecto__titulo { font-size: var( --text-base ); color: var( --color-terciario ); margin: 0; } /* ========================================================================== Single de Biblioteca ========================================================================== */ .minvu-single-biblioteca__header { margin-bottom: var( --space-3 ); } .minvu-single-biblioteca__titulo { font-size: var( --text-2xl ); margin: var( --space-1 ) 0; } .minvu-single-biblioteca__meta { font-size: var( --text-sm ); color: var( --color-gris-medio ); } .minvu-single-biblioteca__contenido { font-size: var( --text-base ); color: var( --color-gris-oscuro ); margin-bottom: var( --space-4 ); } /* ========================================================================== Tarjeta de documento (card-biblioteca.php) ========================================================================== */ .minvu-card-biblioteca { background-color: var( --color-blanco ); border: 1px solid var( --color-acento ); } .minvu-card-biblioteca__link { color: inherit; } .minvu-card-biblioteca__body { padding: var( --space-3 ); gap: var( --space-2 ); } .minvu-card-biblioteca__icono { flex-shrink: 0; color: var( --color-primario ); } .minvu-card-biblioteca__titulo { font-size: var( --text-lg ); margin: var( --space-1 ) 0; } .minvu-card-biblioteca__meta { font-size: var( --text-xs ); color: var( --color-gris-medio ); display: flex; align-items: center; gap: var( --space-1 ); margin-bottom: 0; } /** * Badge de área documental: mismo tratamiento que el badge de área * temática de Noticias (color primario al 10%, texto terciario), conforme * a la regla de "un solo badge por encabezado" reutilizada en todo el * sistema, sin introducir un segundo tratamiento de color distinto solo * por pertenecer a un CPT diferente. */ .minvu-badge-area-documental { background-color: rgba( 0, 111, 179, 0.1 ); color: var( --color-terciario ); font-weight: var( --font-weight-medium ); font-size: var( --text-xs ); } /* ========================================================================== Contenido relacionado (template-parts/content-related/*.php) ========================================================================== */ .minvu-related-noticias, .minvu-related-documentos, .minvu-related-programa { margin-top: var( --space-6 ); padding-top: var( --space-4 ); border-top: 1px solid var( --color-neutral ); } .minvu-related-noticias__titulo, .minvu-related-documentos__titulo, .minvu-related-programa__titulo { font-size: var( --text-xl ); color: var( --color-terciario ); margin-bottom: var( --space-3 ); } /* ========================================================================== Títulos de archive (archive-programa.php, archive-biblioteca.php) ========================================================================== */ .minvu-archive-programa__titulo, .minvu-archive-biblioteca__titulo, .minvu-archive-cuenta-publica__titulo { font-size: var( --text-3xl ); color: var( --color-terciario ); margin-bottom: var( --space-4 ); } /* ========================================================================== Aviso editorial (visible solo a usuarios con permiso de edición) ========================================================================== */ /** * Usado cuando el contenido no cumple una regla editorial de convención * (ej. más de un término de area_documental asignado a un documento, * cierre de Sprint 4). Deliberadamente distinto de .minvu-alerta-*: no es * una alerta de cara al público, es una nota interna que solo ve quien * puede editar el post (condicionado con current_user_can() en PHP, no * solo oculto por CSS). */ .minvu-aviso-editorial { background-color: var( --color-neutral ); border-left: 3px solid var( --color-gris-medio ); color: var( --color-gris-oscuro ); font-size: var( --text-sm ); padding: var( --space-2 ) var( --space-3 ); margin-bottom: var( --space-2 ); } /* ========================================================================== Alerta de salida (template-parts/alerts/alert-salida.php) ========================================================================== */ /** * Arquitectura v1.0, Sección 6.3: "--color-acento + ícono de enlace * externo." NUNCA usa el color secundario — esa es la confusión exacta * que la auditoría de Fase 4 (Sección 2.3) señaló como riesgo a evitar. */ .minvu-alerta-salida { display: flex; gap: var( --space-3 ); align-items: flex-start; background-color: rgba( 168, 183, 199, 0.1 ); /* --color-acento al 10% */ border: 1px solid var( --color-acento ); border-radius: 0.25rem; padding: var( --space-3 ); margin: var( --space-4 ) 0; } .minvu-alerta-salida__media img { width: 100%; max-width: 160px; height: auto; display: block; border-radius: 0.25rem; } .minvu-alerta-salida__cuerpo { flex: 1; } .minvu-alerta-salida__mensaje { color: var( --color-terciario ); margin-bottom: var( --space-2 ); display: flex; align-items: center; gap: var( --space-1 ); } .minvu-alerta-salida__icono { color: var( --color-gris-medio ); flex-shrink: 0; } /** * El botón de la alerta de salida usa borde de color acento, NUNCA fondo * sólido del color secundario (esa apariencia está reservada * exclusivamente a alert-accion-primaria.php). */ .minvu-btn-salida { background-color: var( --color-blanco ); color: var( --color-primario ); border: 1px solid var( --color-primario ); font-weight: var( --font-weight-medium ); } .minvu-btn-salida:hover, .minvu-btn-salida:focus { background-color: var( --color-primario ); color: var( --color-blanco ); } /* ========================================================================== Selector Provincia → Comuna (template-parts/filters/filter-territorio.php) ========================================================================== */ .minvu-filter-territorio { margin-bottom: var( --space-4 ); padding: var( --space-3 ); background-color: var( --color-neutral ); border-radius: 0.25rem; } /* ========================================================================== Hub de Territorio (page-territorio.php) y vista de término (taxonomy-territorio.php) ========================================================================== */ .minvu-page-territorio__titulo, .minvu-taxonomy-territorio__titulo { font-size: var( --text-3xl ); color: var( --color-terciario ); margin-bottom: var( --space-3 ); } .minvu-page-territorio__subtitulo { font-size: var( --text-lg ); color: var( --color-terciario ); margin: var( --space-4 ) 0 var( --space-3 ) 0; } .minvu-taxonomy-territorio__columna-titulo { font-size: var( --text-lg ); color: var( --color-terciario ); margin-bottom: var( --space-3 ); } /** * Enlace "ver todos" (Fase 4, Sección 2.4): aparece únicamente cuando una * columna excede el límite de 4 ítems visibles, conforme a la mitigación * de crecimiento no acotado. */ .minvu-page-territorio__ver-todos { display: inline-block; color: var( --color-primario ); font-weight: var( --font-weight-medium ); font-size: var( --text-sm ); margin-top: var( --space-1 ); } .minvu-page-territorio__ver-todos:hover, .minvu-page-territorio__ver-todos:focus { color: var( --color-terciario ); text-decoration: underline; } /** * Aviso cuando el slug de provincia/comuna en la URL no corresponde a * ningún término existente (cierre de Sprint 5, punto 1 de verificación). * Deliberadamente distinto de .minvu-alerta-salida y .minvu-alerta- * accion-primaria: no es ninguna de las dos familias de alerta del * Design System (Fase 4, Sección 3.1), es un mensaje de estado de * navegación, visible para cualquier visitante (no condicionado a * permisos de edición, a diferencia de .minvu-aviso-editorial). */ .minvu-aviso-territorio-no-encontrado { background-color: rgba( 220, 53, 69, 0.08 ); border-left: 3px solid var( --color-error ); color: var( --color-terciario ); font-size: var( --text-sm ); padding: var( --space-2 ) var( --space-3 ); margin-bottom: var( --space-3 ); } /* ========================================================================== Buscador global (search.php) ========================================================================== */ .minvu-search__titulo { font-size: var( --text-3xl ); color: var( --color-terciario ); margin-bottom: var( --space-3 ); } .minvu-search__titulo span { color: var( --color-primario ); } .minvu-search__filtro { background-color: var( --color-neutral ); padding: var( --space-3 ); border-radius: 0.25rem; margin-bottom: var( --space-4 ); } .minvu-search__total { font-size: var( --text-sm ); color: var( --color-gris-medio ); margin-bottom: var( --space-3 ); } .minvu-search__sin-resultados { color: var( --color-gris-oscuro ); padding: var( --space-4 ); background-color: var( --color-neutral ); border-radius: 0.25rem; } .minvu-search__paginacion { margin-top: var( --space-4 ); } /* ========================================================================== Tarjeta genérica de resultado de búsqueda (card-resultado-busqueda.php) ========================================================================== */ .minvu-card-resultado-busqueda { background-color: var( --color-blanco ); border: 1px solid var( --color-acento ); border-radius: 0.25rem; padding: var( --space-3 ); height: 100%; } .minvu-card-resultado-busqueda__link { color: inherit; } .minvu-card-resultado-busqueda__titulo { font-size: var( --text-lg ); margin: var( --space-1 ) 0; } .minvu-card-resultado-busqueda__extracto { font-size: var( --text-sm ); color: var( --color-gris-oscuro ); margin-bottom: 0; } /** * Badge de tipo de contenido: mismo tratamiento de color primario al 10% * ya usado para todos los demás badges del sistema (área temática, * estado de programa, área documental) — un solo lenguaje visual de * badge en todo el tema, sin variantes de color por tipo de contenido. */ .minvu-badge-tipo-contenido { background-color: rgba( 0, 111, 179, 0.1 ); color: var( --color-terciario ); font-weight: var( --font-weight-medium ); font-size: var( --text-xs ); } /* ========================================================================== Cuentas Públicas: vigente (archive-cuenta_publica.php) ========================================================================== */ .minvu-cuenta-publica-vigente { margin-bottom: var( --space-8 ); } .minvu-cuenta-publica-vigente__titulo { font-size: var( --text-2xl ); margin: var( --space-2 ) 0 var( --space-3 ) 0; } .minvu-cuenta-publica-vigente__contenido { color: var( --color-gris-oscuro ); margin-bottom: var( --space-4 ); } .minvu-cuenta-publica-vigente__audiovisual { margin-bottom: var( --space-4 ); } .minvu-cuenta-publica-vigente__audiovisual iframe { max-width: 100%; } /** * Badge de "Cuenta Pública vigente": único badge del sistema que usa el * color primario al 100% en lugar del 10%, porque comunica un estado de * vigencia institucional con un peso visual distinto al resto de los * badges informativos (área temática, estado de programa) — sigue sin * usar el color secundario, que permanece exclusivo de las alertas de * acción primaria. */ .minvu-badge-cuenta-vigente { background-color: var( --color-primario ); color: var( --color-blanco ); font-weight: var( --font-weight-bold ); font-size: var( --text-sm ); } /* ========================================================================== Cuentas Públicas: historial colapsado (accordion.js) ========================================================================== */ .minvu-cuenta-publica-historial { margin-top: var( --space-6 ); padding-top: var( --space-4 ); border-top: 1px solid var( --color-neutral ); } .minvu-cuenta-publica-historial__titulo { font-size: var( --text-xl ); color: var( --color-terciario ); margin-bottom: var( --space-3 ); } /** * El acordeón usa los componentes nativos .accordion/.accordion-item de * Bootstrap 5.3 sin reescritura estructural — solo se ajusta el color del * botón de trigger para que coincida con el Design System institucional * en lugar del azul genérico de Bootstrap. */ .minvu-cuenta-publica-historial .accordion-button:not(.collapsed) { background-color: rgba( 0, 111, 179, 0.1 ); color: var( --color-terciario ); } .minvu-cuenta-publica-historial .accordion-button:focus { border-color: var( --color-primario ); box-shadow: 0 0 0 0.2rem rgba( 0, 111, 179, 0.25 ); } /* ========================================================================== Single de Cuenta Pública (single-cuenta_publica.php) ========================================================================== */ .minvu-single-cuenta-publica__titulo { font-size: var( --text-2xl ); margin: var( --space-1 ) 0; } .minvu-single-cuenta-publica__contenido { color: var( --color-gris-oscuro ); margin-bottom: var( --space-4 ); } .minvu-badge-cuenta-anio { background-color: rgba( 0, 111, 179, 0.1 ); color: var( --color-terciario ); font-weight: var( --font-weight-medium ); font-size: var( --text-xs ); } .minvu-single-cuenta-publica__volver { margin-top: var( --space-4 ); } .minvu-single-cuenta-publica__volver a { color: var( --color-primario ); font-weight: var( --font-weight-medium ); } /* ========================================================================== Neutralización de conflictos Bootstrap ↔ Gutenberg ========================================================================== Arquitectura v1.0, Sección 9.6 (decisión aplicada en el cierre de Sprint 6): wp-block-styles ya está declarado en inc/setup.php. Estas reglas neutralizan los conflictos de especificidad CSS más comunes y documentados entre wp-block-library y Bootstrap 5.3 dentro del contenido de the_content() — tablas y botones insertados desde el editor de bloques en la descripción de un Programa o el contexto de un documento de Biblioteca. LIMITACIÓN HONESTA: estas reglas se basan en conflictos de especificidad conocidos y documentados públicamente entre ambos sistemas de CSS, no en una verificación visual realizada contra un WordPress en ejecución con contenido de prueba real (que la recomendación original de la Sección 9.6 pedía y que este entorno de desarrollo no permite hacer). Queda como tarea de QA visual antes del lanzamiento a producción. ========================================================================== */ /** * Tablas de Gutenberg (wp-block-table): Bootstrap no aplica estilo de * tabla a menos que se use la clase .table; el bloque de tabla de * Gutenberg no incluye esa clase por defecto. Se aplican aquí bordes y * espaciado consistentes con el resto del Design System sin requerir que * el equipo de comunicaciones añada manualmente clases de Bootstrap * dentro del editor de bloques. */ .minvu-single-programa__contenido table, .minvu-single-biblioteca__contenido table, .minvu-cuenta-publica-vigente__contenido table, .minvu-single-cuenta-publica__contenido table { width: 100%; margin-bottom: var( --space-3 ); border-collapse: collapse; } .minvu-single-programa__contenido table th, .minvu-single-programa__contenido table td, .minvu-single-biblioteca__contenido table th, .minvu-single-biblioteca__contenido table td, .minvu-cuenta-publica-vigente__contenido table th, .minvu-cuenta-publica-vigente__contenido table td, .minvu-single-cuenta-publica__contenido table th, .minvu-single-cuenta-publica__contenido table td { padding: var( --space-2 ); border: 1px solid var( --color-acento ); text-align: left; } /** * Botones de Gutenberg (wp-block-button): el bloque de botón de * Gutenberg genera su propia clase .wp-block-button__link con estilos * inline que compiten en especificidad con .btn de Bootstrap. Se * reasigna el color de fondo al primario institucional en lugar de dejar * que prevalezca el color por defecto de Gutenberg (un morado/azul * genérico del editor que no pertenece a la paleta oficial). */ .minvu-single-programa__contenido .wp-block-button__link, .minvu-single-biblioteca__contenido .wp-block-button__link, .minvu-cuenta-publica-vigente__contenido .wp-block-button__link, .minvu-single-cuenta-publica__contenido .wp-block-button__link { background-color: var( --color-primario ); color: var( --color-blanco ); border-radius: 0.25rem; } .minvu-single-programa__contenido .wp-block-button__link:hover, .minvu-single-biblioteca__contenido .wp-block-button__link:hover, .minvu-cuenta-publica-vigente__contenido .wp-block-button__link:hover, .minvu-single-cuenta-publica__contenido .wp-block-button__link:hover { background-color: var( --color-terciario ); } /** * Listas de Gutenberg: ya heredan estilo razonable de Bootstrap * (list-style dentro de .container); no se identificó un conflicto de * especificidad real que requiera neutralización adicional aquí. Se * documenta su ausencia explícitamente para que quede claro que no se * omitió por descuido, sino porque no hay nada que corregir. */ /* ========================================================================== Banners (extensión post-v1.0): full-width debajo del header ========================================================================== */ /** * Banner único y global, ancho completo de página, sin contenedor * .container (a diferencia de prácticamente todo el resto del tema) — * deliberado: el pedido explícito fue "del ancho de la página", no * acotado al grid de Bootstrap. */ .minvu-banner-header { position: relative; width: 100%; overflow: hidden; } .minvu-banner-header__link { position: relative; } .minvu-banner-header__imagen { width: 100%; height: auto; display: block; } /** * El botón, cuando existe texto_boton, se superpone sobre la imagen en * la esquina inferior derecha — usa el mismo tratamiento de color que * alert-accion-primaria.php (única excepción permitida al color * secundario como fondo sólido), ya que un banner de llamado a subsidio * es, por naturaleza, una acción primaria. */ .minvu-banner-header__boton { position: absolute; bottom: var( --space-3 ); right: var( --space-3 ); } @media ( max-width: 576px ) { .minvu-banner-header__boton { position: static; display: block; margin: var( --space-2 ) auto 0 auto; width: fit-content; } } /* ========================================================================== Banners (extensión post-v1.0): carrusel de 3 columnas sobre el footer ========================================================================== */ .minvu-banners-footer { padding-top: var( --space-6 ); padding-bottom: var( --space-6 ); background-color: var( --color-blanco ); } .minvu-banner-item { background-color: var( --color-neutral ); border-radius: 0.25rem; overflow: hidden; } .minvu-banner-item__link { position: relative; color: inherit; } .minvu-banner-item img { width: 100%; height: auto; display: block; } .minvu-banner-item__boton { position: absolute; bottom: var( --space-2 ); right: var( --space-2 ); font-size: var( --text-sm ); } /** * Controles del carrusel (solo se renderizan cuando hay más de 3 * banners, ver banners-footer-carousel.php): se ajusta el color de los * íconos nativos de Bootstrap a color terciario para mantener contraste * sobre fondo blanco, ya que el default de Bootstrap asume fondos * oscuros tipo "hero image". */ .minvu-banners-footer .carousel-control-prev-icon, .minvu-banners-footer .carousel-control-next-icon { background-color: var( --color-terciario ); border-radius: 50%; padding: var( --space-3 ); } .minvu-banners-footer .carousel-indicators [data-bs-target] { background-color: var( --color-acento ); } .minvu-banners-footer .carousel-indicators .active { background-color: var( --color-primario ); } /* ========================================================================== Mapa de ruta — Mejoras futuras evaluables (NO bloqueantes) ========================================================================== - search.js: expansión del buscador del header en desktop, filtrado dinámico de Comuna según Provincia sin recargar la página. - Verificación visual real de conflictos Gutenberg/Bootstrap contra un WordPress en ejecución con contenido de prueba, antes de producción. - Hash de integrity SRI del bundle JS de Bootstrap (Sprint 1, pendiente de completar con la versión exacta de despliegue). - URL real del Visor Territorial (Sprint 5, placeholder vía filtro). ========================================================================== */