/* sitio.css — reglas propias del sitio IPCGE. El sistema de diseno vive en modernist.css y no se toca. Orden: fuente, comunes, cambios V de color, especificas por pagina, piezas nuevas (menu movil, saltar al contenido), escalon de tablet. */ /* ---- Fuente autoalojada (cambio V5; reemplaza el @import de Google Fonts) ---- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/archivo-400.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/archivo-600.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fuentes/archivo-800.woff2') format('woff2'); } /* ---- Comunes: identicas en las 12 paginas del prototipo ---- */ :root[data-theme="dark"] { --color-bg: var(--color-neutral-900); --color-surface: var(--color-neutral-800); --color-text: var(--color-neutral-100); --color-divider: color-mix(in srgb, var(--color-neutral-100) 35%, transparent); } /* ══════════════════════════════════════════════════════════════════════════ TOKEN SEMANTICO — "acento a tamano de lectura, sobre el suelo actual" ══════════════════════════════════════════════════════════════════════════ El prototipo escribe `color: var(--color-accent-700)` EN LINEA, 30 veces repartidas en las 12 paginas (kickers de seccion, subtitulo del hero). Ese paso es el correcto en suelo claro y da 1,96:1 en suelo oscuro: ilegible. Poner el paso correcto en un token en lugar de repetir la decision 30 veces es lo que el sistema haria: --color-accent-700 sigue siendo lo que dice su nombre, un escalon de la rampa, y ESTE token dice para que sirve. Es la misma regla de V8 y V14 —el paso del acento sigue al suelo— expresada una sola vez. En suelo claro resuelve al mismo accent-700 de siempre: el render no cambia ni un pixel. El cambio se ve solo en oscuro, donde hoy no se lee. EN OSCURO SE ELIGIO accent-400, no accent-300. Los tres pasos candidatos, medidos sobre el hero en tema oscuro: accent-300 9,28:1 pasa, pero se ve rosa palido: se aleja del rojo accent-400 6,71:1 pasa con margen y es lo mas cercano al rojo de marca accent-500 4,46:1 NO pasa, por 0,04 accent-400 es tambien el paso que el readme del sistema nombra para suelo oscuro ("accent-400 on a dark one"), asi que no es una eleccion propia. El paso "fuerte" es para los estados de hover: mas contraste en los dos suelos, oscureciendo en claro y aclarando en oscuro. ══════════════════════════════════════════════════════════════════════════ */ :root { --ipcge-acento-texto: var(--color-accent-700); --ipcge-acento-texto-fuerte: var(--color-accent-800); } :root[data-theme="dark"] { --ipcge-acento-texto: var(--color-accent-400); --ipcge-acento-texto-fuerte: var(--color-accent-300); } /* ══════════════════════════════════════════════════════════════════════════ CAMBIO V15 — Un piso para el texto atenuado ══════════════════════════════════════════════════════════════════════════ El prototipo atenua texto pequeno con --color-text a tres niveles distintos: 45 % (9 elementos: la numeracion 01-09 de investigacion), 55 % (5: las fechas de actualidad y de las paginas legales) y 60 % (5: apoyos de 11 y 13 px). Medido, ninguno de los tres llega a 4,5:1 en 11-13 px: 45 % 2,71:1 en claro 3,87:1 en oscuro 55 % 3,52:1 5,02:1 60 % 3,95:1 5,4:1 65 % 4,94:1 OK 6,37:1 OK <- el piso El minimo exacto es 63 % (4,56:1); se usa 65 % porque es el nivel que el diseno YA emplea para el parrafo del pie y el que V12 eligio, asi que no agrega un valor nuevo al sistema. Consecuencia asumida: los tres niveles colapsan en uno, asi que se pierde jerarquia entre "tenue", "mas tenue" y "muy tenue". No hay alternativa: por debajo de 63 % nada cumple. Quedan dos escalones legibles —este 65 % y el 78 % del cuerpo de texto— mas el texto a fuerza plena. ══════════════════════════════════════════════════════════════════════════ */ :root { --ipcge-texto-tenue: color-mix(in srgb, var(--color-text) 65%, transparent); } /* El encabezado de tabla usa el 60 % desde modernist.css, no desde un style en linea, asi que la sustitucion del conversor no lo alcanza: da 4,24:1 a 11 px. Se corrige aca, como el resto de lo que vive en el archivo del sistema. */ .table th { color: var(--ipcge-texto-tenue); } /* ══════════════════════════════════════════════════════════════════════════ CAMBIO V16 — Donde el acento corre como CAMPO, tambien sigue al suelo ══════════════════════════════════════════════════════════════════════════ Sobre --color-accent (luminancia 0,20) NINGUN color de la paleta llega a 4,5:1 para texto de tamano de lectura. Medido: texto --color-bg 3,76:1 texto --color-neutral-100 3,85:1 texto --color-text 3,95:1 texto blanco puro 4,20:1 <- ni el blanco alcanza texto negro puro 5,00:1 OK, pero esta fuera de los tokens y sobre el rojo de marca se ve mal Sobre --color-accent-700 el color del suelo da 6,41:1. Es la unica salida aritmetica, no una preferencia: el acento base no puede llevar texto chico. Ademas unifica el rojo del sitio. Tras V14 habia DOS: accent-700 en los botones y el acento base en la banda. Ahora hay uno. Alcance: la banda del "poster statement" (4 paginas) y el :hover de las filas de investigacion, que tambien pinta acento con texto del suelo (3,76:1 en sus 4 elementos). Los cuadritos de 10 px de instituto y el borde de .tag-outline se quedan en el acento base: son elementos graficos y para eso 1.4.11 pide 3:1, que cumplen. ══════════════════════════════════════════════════════════════════════════ */ /* El texto sobre la banda tambien necesita su token: los dos elementos chicos que viven ahi —el kicker de instituto y el enlace de proyectos— traen `color:var(--color-bg)` EN LINEA, y un atributo style le gana a cualquier regla. En tema oscuro --color-bg es oscuro, asi que sobre el rojo profundo quedaban en 1,96:1: peor que antes de V16. El token resuelve al color del suelo en claro y al neutro claro en oscuro. */ :root { --ipcge-banda-texto: var(--color-bg); } :root[data-theme="dark"] { --ipcge-banda-texto: var(--color-neutral-100); } .ipcge-banda { background: var(--color-accent-700); color: var(--ipcge-banda-texto); } /* El .btn-ghost de la banda: sin esto, la regla de V8 lo pintaria de acento sobre acento (1:1). Es el mismo cuidado que V10 con el boton del menu. */ .ipcge-banda .btn-ghost { color: var(--ipcge-banda-texto); } .ipcge-nav-links::-webkit-scrollbar { display: none; } .ipcge-nav-links a { white-space: nowrap; } @media (max-width: 720px) { .ipcge-footer-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 480px) { .ipcge-footer-grid { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════════════════════════════════ CAMBIO V8 — El paso del acento sigue al suelo ══════════════════════════════════════════════════════════════════════════ El prototipo usaba `a { color: var(--color-accent) }`, que sobre el fondo da 3,76:1 en claro y 3,35:1 en oscuro: por debajo del 4,5:1 que WCAG 1.4.3 exige para texto de lectura. El readme del sistema lo dice: la pareja acento-suelo sirve para iconos y texto grande, no para parrafos. OJO: --color-accent-700 es la respuesta SOLO en suelo claro (6,41:1). En suelo oscuro cae a 1,96:1, peor que lo que reemplaza. Por eso estas reglas NO nombran un escalon: usan el token semantico --ipcge-acento-texto, definido arriba, que ya resuelve al paso correcto en cada suelo. Asi hay UNA decision en lugar de una por regla y por tema, y estas cinco reglas dejan de estar duplicadas. .btn-ghost, .card-kicker y .nav a[aria-current] viven en modernist.css: se sobrescriben ACA, nunca editando el archivo del sistema. ══════════════════════════════════════════════════════════════════════════ */ /* Se excluyen los elementos que traen su PROPIO relleno y por lo tanto definen su propia etiqueta: los botones y el enlace de saltar al contenido. Dos cosas medidas, no supuestas: · Sin :not(.btn), `a:hover` (0,1,1) le gana a `.btn-primary` (0,1,0) y la etiqueta del boton del hero se pintaba del mismo accent-800 que su relleno: 1:1, el mismo defecto que V10 arregla en el menu. El reposo no lo sufria, porque `a` solo es (0,0,1) y cualquier clase le gana. · Cuidado con el :not(): SUBE la especificidad a (0,1,1). Al agregarlo, esta regla empezo a ganarle a `.ipcge-saltar` (0,1,0) y dejo ese enlace en 1:1. Por eso va excluido tambien, en lugar de subirle la especificidad a el: asi la intencion queda escrita y no depende del orden de las reglas. */ a:not(.btn):not(.ipcge-saltar) { color: var(--ipcge-acento-texto); } a:not(.btn):not(.ipcge-saltar):hover { color: var(--ipcge-acento-texto-fuerte); } /* ⚠️ CUARTA VEZ QUE MUERDE LA TRAMPA DEL :not(), y la segunda por mano propia. La regla de arriba quedo en (0,2,1) por los dos :not(), y con eso le gana a `.nav a { color: inherit }` de modernist.css, que es (0,1,1). Resultado medido en el sitio PUBLICADO: 6 de los 7 enlaces del menu pasaron a acento cuando deben ser tinta. El acento marca SOLO la pagina actual. No lo atrapo nada: el barrido de contraste solo informa lo que FALLA y accent-700 sobre la superficie da 5,91:1, que pasa; y la prueba de fidelidad compara texto, no color. De ahi scripts/comparar-enlaces.mjs. Se restituye la intencion de forma explicita, como manda la regla de la casa: excluir en el selector en vez de confiar en el orden. (0,3,1) gana sin ambiguedad. */ .nav .ipcge-nav-links a:not([aria-current]) { color: inherit; } .card-kicker { color: var(--ipcge-acento-texto); } .btn-ghost { color: var(--ipcge-acento-texto); } .nav a:hover, .nav a[aria-current="page"] { color: var(--ipcge-acento-texto); } /* V15, pieza 2: .tag-outline usa el acento base para su texto de 11 px, y eso da 3,76:1 en claro y 3,35:1 en oscuro. Son 7 etiquetas, en actualidad y en proyectos. El BORDE se queda en el acento a proposito: es un elemento grafico, y para eso el 3:1 de 1.4.11 alcanza. Solo cambia el texto. */ .tag-outline { color: var(--ipcge-acento-texto); } /* V15, pieza 3: el .seg-opt marcado usa relleno de acento con la etiqueta en color del suelo: 3,76:1 a 13 px. Es el mismo par que V14 corrigio en los botones, asi que se resuelve igual, con el paso profundo del acento. */ .seg-opt:has(input:checked) { background: var(--color-accent-700); color: var(--color-bg); } :root[data-theme="dark"] .seg-opt:has(input:checked) { color: var(--color-neutral-100); } /* ══════════════════════════════════════════════════════════════════════════ CAMBIO V10 — La etiqueta del boton primario se lee como el suelo ══════════════════════════════════════════════════════════════════════════ `.nav a { color: inherit }` (especificidad 0,1,1) le ganaba a `.btn-primary { color: var(--color-bg) }` (0,1,0), asi que el boton "Contacto" del menu quedaba en tinta sobre rojo: 3,95:1 en claro, 3,85:1 en oscuro. Y con aria-current o con el puntero encima, `.nav a[aria-current]` y `.nav a:hover` lo pintaban de acento SOBRE acento: 1:1, un rectangulo rojo sin texto en /contacto/. Tres estados, el mismo defecto. Se cubren los tres con selectores mas especificos (0,3,1) para que no dependa del orden de los archivos. ⚠️ Estas reglas declaran SOLO `color`, nunca `background`. Cuando llegue V14 con el relleno, mezclar las dos cosas aca haria que estos selectores (0,4,1) le ganaran a `.btn-primary:hover` (0,1,0) tambien para el fondo, y el boton del menu se quedaria sin realimentacion al pasar el puntero. Medido: paso. ══════════════════════════════════════════════════════════════════════════ */ .nav a.btn-primary, .nav a.btn-primary:hover, .nav a.btn-primary[aria-current="page"] { color: var(--color-bg); } :root[data-theme="dark"] .nav a.btn-primary, :root[data-theme="dark"] .nav a.btn-primary:hover, :root[data-theme="dark"] .nav a.btn-primary[aria-current="page"] { color: var(--color-neutral-100); } /* ══════════════════════════════════════════════════════════════════════════ CAMBIO V14 — El relleno del boton primario tambien sigue al suelo ══════════════════════════════════════════════════════════════════════════ V10 arreglo la cascada y el contraste SEGUIA fallando: 3,76:1 en claro y 3,35:1 en oscuro. El motivo es que la pareja del sistema —etiqueta en color del suelo sobre relleno de acento base— vale 3,76:1, y la etiqueta mide 14 px, asi que exige 4,5:1. No hay arreglo posible desde la cascada: hay que cambiar el relleno. Afecta a TODOS los botones primarios del sitio (los del hero, el del menu y el de enviar el formulario). Es el cambio mas visible del proyecto: toca el color de accion en las 12 paginas. Julio eligio esta opcion sobre arreglar solo el boton del menu, para no dejarlo de un rojo distinto al de los botones del hero en la misma pantalla. EN TEMA OSCURO hay un detalle que no se puede pasar por alto: ahi `--color-bg` es oscuro, asi que `.btn-primary { color: var(--color-bg) }` pinta la etiqueta de OSCURO. Sobre un relleno rojo profundo seria ilegible. Por eso en oscuro la etiqueta pasa a --color-neutral-100 y el relleno se queda en accent-700: el boton sigue leyendose como un boton rojo en los dos temas, en vez de volverse rosa palido. La direccion del hover es "mas contraste", no "mas claro": el readme del sistema dice accent-400 en suelo oscuro, pero eso vale cuando el acento es el TEXTO. Aca el acento es el relleno detras de una etiqueta clara, asi que oscurecer es lo que aumenta el contraste. Los seis estados estan medidos. ══════════════════════════════════════════════════════════════════════════ */ /* Relleno: identico en los dos temas, para que el boton siga leyendose como un boton rojo y no como uno rosa palido en oscuro. */ .btn-primary { background: var(--color-accent-700); } .btn-primary:hover { background: var(--color-accent-800); } .btn-primary:active { background: var(--color-accent-900); } /* Etiqueta: en claro el color del suelo; en oscuro el suelo ES oscuro, asi que hay que forzar el paso claro del neutro o la etiqueta seria ilegible. */ .btn-primary { color: var(--color-bg); } :root[data-theme="dark"] .btn-primary { color: var(--color-neutral-100); } /* ---- Especificas por pagina: calificadas para no pisarse entre si ---- .ipcge-4col se comporta distinto en instituto (1fr) que en servicios y transparencia (1fr 1fr). Sin calificar, la ultima regla ganaria para todas. */ /* El plan decia que este margen "existia solo en index". FALSO, medido: esta en index Y en instituto. Se detecto porque la pagina construida salia 24 px mas baja que el prototipo, con todas las secciones, el nav y el pie identicos al pixel. La prueba de fidelidad compara texto, no geometria, asi que no lo veia: para eso esta scripts/comparar-geometria.mjs. */ /* Tercera aparicion del margen (2026-07-31): el prototipo de la pagina nueva tambien lo traia en linea. El plan original decia "solo en index"; eran tres. ⚠️ V34 (2026-08-02) SACA A ciencias-geoespaciales DE ESTA REGLA. Ahi el margen dejaba 24 px de fondo entre la banda roja del cierre —que es a sangre— y la linea del pie, una franja flotando. Medido, era la unica pagina inconsistente: de las TRES que terminan en banda, `proyectos` y `servicios` ya daban hueco 0 porque sus prototipos no traen ese margen. La diferencia venia del material de origen, no de una decision de diseno. La portada e `instituto` LO CONSERVAN: ahi lo ultimo es contenido normal sobre el fondo de la pagina y esos 24 px son el respiro antes del pie. El margen solo estorba cuando lo que termina es una banda a sangre. */ .pag-inicio footer, .pag-instituto footer { margin-top: 24px; } @media (max-width: 720px) { .pag-inicio .ipcge-cards { grid-template-columns: 1fr !important; } .pag-inicio .ipcge-split { grid-template-columns: 1fr !important; } .pag-instituto .ipcge-3col, .pag-instituto .ipcge-4col { grid-template-columns: 1fr !important; } .pag-instituto .ipcge-feature { grid-template-columns: 1fr !important; } .pag-proyectos .ipcge-vtol-feat { grid-template-columns: 1fr !important; } .pag-investigacion .ipcge-2col { grid-template-columns: 1fr !important; } .pag-investigacion .ipcge-feature { grid-template-columns: 1fr !important; } .pag-formacion .ipcge-3col { grid-template-columns: 1fr !important; } /* Se quitaron .pag-servicios .ipcge-2col y .ipcge-4col: eran reglas MUERTAS. El prototipo de servicios las declaraba en su