/* ============================================================
IPUC-COMPONENTES.CSS
Universidad Piloto de Colombia — Hoja de estilos combinada
Une en un solo archivo:
1. ipuc-icon-grid-roles.css (grid de íconos: Sectores / Roles)
2. ipuc-plan-de-estudios.css (widget de plan de estudios)
3. ipuc-tag-pill.css (chips de texto suelto)
Pensado para cargarse UNA SOLA VEZ, de forma global (vía
wp_enqueue_style), ya que estos componentes se reutilizan en
varias páginas de programas académicos, no solo en una.
CAMBIO RESPECTO A LOS ORIGINALES:
Las variables de color (--ipuc-orange-*, --ipuc-comp-*, etc.)
se movieron de .ipuc-plan a :root, para que CUALQUIER
componente de la página (incluido el icon-grid, que suele
vivir fuera de .ipuc-plan) herede el mismo color de facultad
sin depender del valor de respaldo del var().
Para adaptar el color de facultad a otro programa, solo hay
que cambiar los valores de la sección 0 (variables raíz).
============================================================ */
/* ============================================================
IMPORT DE FUENTE — debe ir siempre antes de cualquier otra
regla del archivo (lo exige la especificación CSS; un @import
ubicado después de otra regla es ignorado por el navegador).
Requiere "Plus Jakarta Sans" de Google Fonts. Si el sitio ya
la carga globalmente, borra esta línea para evitar una
petición HTTP duplicada.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ============================================================
SCROLL SUAVE
Hace que los enlaces con ancla (ej. href="#plan-de-estudios")
se desplacen con animación en vez de saltar de golpe. Afecta
a toda la página (es una propiedad global de ), no solo
a nuestros componentes.
============================================================ */
html{ scroll-behavior:smooth; }
/* ============================================================
0. VARIABLES RAÍZ (color de facultad + neutros + tipografía)
Antes vivían dentro de .ipuc-plan; ahora son globales.
Cambiar estos valores para adaptar TODOS los componentes
(icon-grid, plan de estudios, tag-pill) a otra facultad/programa.
============================================================ */
:root{
/* Color de facultad */
--ipuc-orange-300:#E8994A;
--ipuc-orange-400:#CF6A12;
--ipuc-orange-500:#B85100;
--ipuc-orange-600:#8F3F00;
--ipuc-orange-tint:#FBEADC;
--ipuc-active-accent:var(--ipuc-orange-500);
--ipuc-active-tint:var(--ipuc-orange-tint);
/* Neutros de texto y fondo */
--ipuc-ink:#161311;
--ipuc-ink-soft:#6b6560;
--ipuc-paper-alt:#F1EAE3;
--ipuc-dark:#181512;
--ipuc-line:#E6DDD3;
/* Tipografía y easing */
--ipuc-font:'Plus Jakarta Sans', sans-serif;
--ipuc-ease:cubic-bezier(.22,.68,0,1);
/* Colores de componente curricular — tomados del color de
relleno real de cada celda de curso en el Excel del plan */
--ipuc-comp-disciplinar:#C00000;
--ipuc-comp-disciplinar-tint:#F8E9E9;
--ipuc-comp-interdisciplinar:#A39B8E;
--ipuc-comp-interdisciplinar-tint:#F1EDE6;
--ipuc-comp-investigacion:#6B6560;
--ipuc-comp-investigacion-tint:#EAE7E3;
--ipuc-comp-certificacion:#5A9BD0;
--ipuc-comp-certificacion-tint:#E7F0F8;
}
/* ============================================================
1. ICON-GRID / ICON-ITEM
Componente reutilizable de tarjetas con ícono + texto
(secciones "Sectores" y "Roles").
USO EN HTML:
Desarrollador de software
...
Pensado para fondo oscuro (tarjetas #221D18) — si el bloque
destino tiene fondo claro, ajusta background/color abajo.
============================================================ */
.icon-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.icon-item{
display:flex;
align-items:center;
gap:10px;
background:#221D18;
border:1px solid #332C23;
border-radius:10px;
padding:12px;
transition:border-color .2s ease, transform .2s ease;
}
.icon-item:hover{
border-color:var(--ipuc-orange-500);
transform:translateY(-2px);
}
.icon-item svg{
color:#cf6a12;
flex-shrink:0;
}
.icon-item span{
font-size:.78rem;
color:#E5DCD1;
line-height:1.25;
}
@media (max-width:900px){
.icon-grid{ grid-template-columns:1fr; }
}
/* ============================================================
2. TAG PILLS
Chips de texto suelto (ej. "Pregrado virtual",
"Ciencias de la Computación", "IA Generativa", etc.)
USO EN HTML:
IA GenerativaIngeniería de Software
============================================================ */
.ipuc-tag-pill{
display:inline-flex; align-items:center; gap:8px;
font-size:11px; letter-spacing:.06em; color:#ffffffbd;
border:1px solid #ffd37a3b; padding:3px 10px;
border-radius:10px; margin-bottom:13px;
}
.ipuc-tag-pill--accent{
color:#d97101;
background:#fff4e4cc;
}
/* ============================================================
2.1 PERFIL ASPIRANTE / EGRESADO (tarjeta lateral + tabs)
Bloque de dos columnas: a la izquierda una tarjeta destacada
(ej. "Microsoft Azure"), a la derecha tabs "Aspirantes" /
"Egresado" que alternan el texto del panel de abajo.
Va siempre junto con su