/*? =====================================================================
TEMA DE MARCA — IESDE
Plugin de tema; requiere la capa de roles (en style.css) cargada antes.
Fuente de verdad: iesde-sistema-de-diseno-2.html ("Fundamentos
actualizados · v2"), que sustituye a iesde-sistema-de-diseno.html (v1) y
a iesde-sistema-de-diseno.md. Cuando discrepan, manda el HTML de v2.
Los valores marcados "derivado" NO vienen del sistema: se infirieron aquí.
---------------------------------------------------------------------
QUÉ CAMBIÓ EN v2 (sep 2026)
---------------------------------------------------------------------
· SE RETIRA EL DORADO. #c89e4a no aparece ni una vez en v2: se van
--iesde-gold*, --iesde-shadow-floating y la variante de botón
.__iesde-gold (el "botón flotante"). La paleta ampliada queda en
cuatro grises.
· Radio principal 20px (antes 14px en card) para cards, paneles y
superficies de contenido.
· Dos familias de color nuevas: VERDES DE INTERACCIÓN (el turquesa
identifica, estos accionan) y ocho GRADIENTES de marca, siempre
azul → turquesa.
· Fundamentos que v1 no traía: sombras en tres niveles + elevación de
las cards del home, escala de espaciado, rejilla de 12 columnas con
breakpoints reales y motion (≤250ms).
· Patrones de página nuevos: footer del home, acordeón de oferta
académica, plan de estudios y característica destacada. Van en la
capa 4 como clases de marca (__iesde-*), no como componentes.
· Se define el error (#b3261e) y el anillo de foco pasa a ser
obligatorio en todo control interactivo.
---------------------------------------------------------------------
ALCANCE — se activa en CUALQUIER elemento, no solo en
---------------------------------------------------------------------
Todos los selectores son `[data-brand="iesde"] …`, así que la marca vale
para el subárbol donde se ponga el atributo. Eso permite mezclar marcas
en una misma página:
…
… … isla IESDE
…
Dos consecuencias que hay que tener presentes:
· los overlays que el runtime mueve a (modales, dropdowns,
tooltips) SALEN del subárbol y vuelven a la marca del ancestro;
· el modo oscuro se resuelve abajo con tres selectores para que
funcione tanto si `data-theme` está en el mismo elemento como en un
ancestro o un descendiente.
===================================================================== */
/*? Fuentes del sistema IESDE. Mismo mecanismo que usa el core del uikit
para Fira Sans (@import de Google Fonts al inicio de style.css). */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Manuale:ital,wght@0,300;0,500&display=swap");
/*? =====================================================================
1. TOKENS
===================================================================== */
[data-brand="iesde"] {
/*? --- Primitivos IESDE (paleta cruda del sistema) --------------------- */
--iesde-navy: #0b2b40;
--iesde-navy-deep: #0c2a3f; /* navy de barra: navbar y pie */
--iesde-navy-active: #1d335b;
--iesde-turquoise: #22a798; /* acento de marca */
--iesde-turquoise-deep: #186d63; /* turquesa accionable */
--iesde-blue: #174480;
--iesde-blue-light: #386db4;
--iesde-gray-dark: #464442;
--iesde-gray-medium: #6e6b68;
--iesde-gray-light: #edece3;
--iesde-gray-light-2: #c4beb9;
--iesde-border-card: #ececec; /* borde de card — NO el de campos */
--iesde-tab-inactive-bg: #e1e1e1;
--iesde-font-editorial: "Manuale", Georgia, serif;
/*? --- Verdes de interacción (v2) --------------------------------------
Familia verde del home. NO sustituye al turquesa de marca: el
turquesa identifica, estos accionan. */
--iesde-green-active: #2a736f; /* tarjeta abierta */
--iesde-green-inactive: #3e7b76; /* tarjeta cerrada */
--iesde-green-cta: #1e8a6e; /* CTA sólido */
--iesde-green-ring: #35c2b0; /* aro del retrato */
--iesde-green-eyebrow: #7fd8cd; /* antetítulo sobre fondo oscuro */
--iesde-green-chip: #f1f7f6; /* chip claro */
/*? --- Neutros de los patrones de página (v2) ---------------------------
Grises que v2 usa en los bloques de la capa 4 y que NO coinciden con
los roles del core: la prosa de panel es un punto más cálida que
--ui-text-muted, y las pastillas numéricas tienen fondo propio. */
--iesde-prose: #5a5e63; /* cuerpo de card y de panel */
--iesde-text-meta: #8a9096; /* fecha, dato secundario */
--iesde-text-faint: #b8babc; /* texto tenue: campo deshabilitado */
--iesde-border-tile: #eceff2; /* borde de ficha de temario */
--iesde-border-chip: #cfd5d8; /* contorno del chip "volver" */
--iesde-zebra: #f4f7f9; /* fondo alterno de ficha */
--iesde-num-turquoise: #eaf6f4; /* pastilla numérica turquesa */
--iesde-num-blue: #eaf0f8; /* pastilla numérica azul */
--iesde-dots-bg: #edeff2; /* barra de puntos del carrusel */
--iesde-placeholder: #7f96a8; /* hueco de foto del collage */
/*? --- Estados por variante de botón (el core no tiene roles) ---------- */
--iesde-primary-hover: #021622;
--iesde-primary-disabled: #6e9db9;
--iesde-secondary-hover: #0e463f;
--iesde-secondary-disabled: #8fb3af;
--iesde-dark-hover: #1c1b1a;
--iesde-dark-disabled: #dfdbd7;
--iesde-cta-hover: var(--iesde-turquoise-deep);
--iesde-cta-disabled: #8fb3af;
/*? --- Radios ---------------------------------------------------------
⚠ El core NO tiene roles --ui-radius-*: se aplican componente a
componente en la capa 3.
v2 fija 20px como radio PRINCIPAL (cards, paneles y superficies de
contenido); el resto son excepciones por rol. */
--iesde-radius-main: 20px;
--iesde-radius-pill: 30px;
--iesde-radius-card: var(--iesde-radius-main);
--iesde-radius-accordion: 13px; /* tarjeta de oferta académica */
--iesde-radius-tab: 10px;
--iesde-radius-md: 12px;
--iesde-radius-sm: 10px; /* campo de formulario */
--iesde-radius-xs: 8px; /* fila anidada */
--iesde-radius-hairline: 4px;
/*? --- Escala de espaciado (v2) ----------------------------------------
Base 4. La escala salta 5 y 7 a propósito: no existen en el sistema. */
--iesde-space-1: 4px;
--iesde-space-2: 8px;
--iesde-space-3: 12px;
--iesde-space-4: 16px;
--iesde-space-6: 24px;
--iesde-space-8: 32px;
--iesde-space-12: 48px;
--iesde-space-16: 64px;
--iesde-space-18: 72px;
/*? --- Motion (v2) -----------------------------------------------------
Nada pasa de 250ms y ninguna curva sobrepasa su destino. */
--iesde-transition-fast: 150ms; /* color: hover, borde */
--iesde-transition-medium: 200ms; /* transformaciones cortas */
--iesde-transition-accordion: 250ms ease;
--iesde-ease-lift: cubic-bezier(.22, .61, .36, 1);
/*? --- Rejilla (v2) ----------------------------------------------------
Mobile first: 4 → 8 → 12 columnas. Los breakpoints viven en la
capa 5; aquí solo la métrica del contenedor. */
--iesde-container: 1180px;
--iesde-gutter: 24px;
--iesde-page-margin: 56px;
/*? --- Escala tipográfica ----------------------------------------------
⚠ El core solo tiene roles de FAMILIA: la escala vive como token de
marca y la consume la capa 2. */
--iesde-text-h1-hero: 700 56px/1.1 "Sora", system-ui, sans-serif;
--iesde-text-h1-section: 600 48px/1.1 "Sora", system-ui, sans-serif;
--iesde-text-h2-entry-semibold: 600 32px/1.25 "Sora", system-ui, sans-serif;
--iesde-text-h3-entry-light: 300 32px/1.25 "Sora", system-ui, sans-serif;
--iesde-text-h4-subtitle: 600 24px/1.3 "Sora", system-ui, sans-serif;
--iesde-text-editorial-h1-banner: 300 60px/1.05 "Manuale", Georgia, serif;
--iesde-text-editorial-h2-section: 500 50px/1.05 "Manuale", Georgia, serif;
--iesde-text-editorial-h3-subtitle: 500 32px/1.2 "Manuale", Georgia, serif;
--iesde-text-p1-large: 400 20px/1.5 "Sora", system-ui, sans-serif;
--iesde-text-p1-bold: 600 18px/1.5 "Sora", system-ui, sans-serif;
--iesde-text-p2-body: 400 16px/1.5 "Sora", system-ui, sans-serif;
--iesde-text-p3-medium: 400 14px/1.5 "Sora", system-ui, sans-serif;
--iesde-text-p4-small: 400 12px/1.5 "Sora", system-ui, sans-serif;
/*? --- Sombras ----------------------------------------------------------
v2 fija TRES niveles y nada más: plano (solo borde), card y
destacado. El contraste de color hace el trabajo jerárquico. */
--iesde-shadow-card: 0 1px 3px rgba(0, 0, 0, .04); /* nivel 1 */
--iesde-shadow-card-strong: 0 8px 24px rgba(11, 43, 64, .1);/* nivel 2 */
/*? --- Elevación de las cards del home (v2) ----------------------------
Sombra propia, más profunda y siempre en tono navy. El hover no
cambia el color: sube la pieza y profundiza la sombra. */
--iesde-shadow-home: 0 6px 20px rgba(11, 43, 64, .1);
--iesde-shadow-home-hover: 0 20px 42px rgba(11, 43, 64, .22);
--iesde-shadow-panel: 0 10px 30px rgba(11, 43, 64, .1);
--iesde-shadow-testimonial: 0 22px 46px rgba(4, 20, 32, .28);
--iesde-shadow-offer-active: 0 10px 26px rgba(11, 43, 64, .16);
--iesde-lift-home: -6px; /* translateY del hover de card */
/*? --- Gradientes de marca (v2) -----------------------------------------
Regla del sistema: SIEMPRE azul → turquesa, nunca al revés. */
--iesde-gradient-empresario: linear-gradient(105deg, #2e5fa8 0%, #1b4a85 52%, #0b2b40 100%);
--iesde-gradient-directivo: linear-gradient(105deg, #12554f 0%, #1b7f63 55%, #2fa678 100%);
--iesde-gradient-medida: linear-gradient(105deg, #22a798 0%, #1c6f92 55%, #174480 100%);
--iesde-gradient-band: linear-gradient(34deg, #1d4a88 0%, #2a5b9e 46%, #2e7f9d 76%, #23a795 100%);
--iesde-gradient-testimonial: linear-gradient(#0c2a3f 0%, #155b62 46%, #35c2a2 100%);
--iesde-gradient-testimonial-2: linear-gradient(#2c4657 0%, #3f7b80 46%, #5fc5ae 100%);
--iesde-gradient-knowhower: linear-gradient(#0f5a54 0%, #1b8c79 62%, #25a98c 100%);
--iesde-gradient-section: linear-gradient(#e5e9ef 0%, #e1e7ef 42%, #d5deeb 100%);
--iesde-veil-video: linear-gradient(rgba(11, 35, 70, .42) 0%, rgba(12, 38, 76, .62) 35%, rgba(14, 45, 88, .78) 85%);
/*? --- Acción ---------------------------------------------------------
El primario de IESDE es el NAVY. El turquesa de marca (#22a798) da
2.98:1 con blanco: no sirve como superficie de acción, vive en
--ui-accent. */
--ui-primary: var(--iesde-navy);
--ui-primary-hover: var(--iesde-primary-hover);
--ui-primary-border: var(--iesde-primary-hover);
--ui-on-primary: #ffffff;
--ui-secondary: var(--iesde-turquoise-deep);
--ui-secondary-hover: var(--iesde-secondary-hover);
--ui-secondary-border: var(--iesde-secondary-hover);
--ui-on-secondary: #ffffff;
--ui-tertiary: #ffffff;
--ui-tertiary-hover: #f5f5f5;
--ui-tertiary-border: #dbdbdb;
--ui-on-tertiary: #000000;
--ui-accent: var(--iesde-turquoise);
/*? El texto sobre el acento institucional daba 2.98:1. Se cambia el TEXTO, no el
color de la marca: la identidad es intocable, su par legible no. */
--ui-on-accent: #14161d; /* 6.06:1 */
/*? --- Superficies ----------------------------------------------------- */
--ui-surface: #ffffff;
--ui-surface-2: #fafafa;
--ui-surface-2-border: #eeeeee;
--ui-surface-3: #f5f5f5;
--ui-surface-hover: #f5f5f5;
/*? --- Texto -----------------------------------------------------------
IESDE invierte el criterio de UPAEP: cuerpo casi-negro, encabezados
navy (en UPAEP el cuerpo es navy y el fuerte, negro). */
--ui-text: #1d1d1f;
--ui-text-strong: var(--iesde-navy);
--ui-text-muted: #52565a;
--ui-text-on-surface: var(--iesde-gray-dark);
/*? --- Bordes ------------------------------------------------------------ */
/*? U-07 · LIMITE de control (1.4.11, 3:1). Los separadores decorativos no
usan este rol y quedan como estaban. */
--ui-border: #8d8d8d; /* 1.27 -> 3.04:1 */
--ui-border-subtle: #eeeeee;
--ui-divider: #eeeeee;
/*? --- Foco, sombra ------------------------------------------------------
v2 hace el anillo de foco OBLIGATORIO en todo control interactivo:
3px de turquesa al 15%. */
--ui-focus-ring: rgba(34, 167, 152, .15);
--ui-control-ring: rgba(34, 167, 152, .15);
--ui-shadow: var(--iesde-shadow-card);
/*? --- Neutros y contadores ----------------------------------------------- */
--ui-neutral: var(--iesde-gray-dark);
--ui-on-neutral: #ffffff;
--ui-counter: var(--iesde-navy);
--ui-on-counter: #ffffff;
/*? --- Enlaces -------------------------------------------------------------- */
--ui-link: var(--iesde-blue-light);
--ui-link-hover: var(--iesde-blue);
/*? --- Tipografía ------------------------------------------------------------ */
--ui-font-base: "Sora", system-ui, sans-serif;
--ui-font-heading: "Sora", system-ui, sans-serif;
/*? --- Semánticos ------------------------------------------------------------
v2 SÍ define el error (matriz de estados del campo): #b3261e con
anillo propio al 12%, y marca el acierto con el turquesa accionable.
⚠ PENDIENTE: warning e info siguen sin especificar y se heredan
de UPAEP. */
--iesde-error: #b3261e;
--iesde-error-ring: rgba(179, 38, 30, .12);
--ui-danger: var(--iesde-error);
--ui-danger-border: var(--iesde-error);
--ui-danger-hover: var(--iesde-error);
--ui-danger-subtle: var(--iesde-error-ring);
--ui-success: var(--iesde-turquoise-deep);
--ui-success-border: var(--iesde-turquoise-deep);
--ui-success-hover: var(--iesde-secondary-hover);
}
/*? ---------------------------------------------------------------------
MODO OSCURO — derivado, el sistema IESDE no lo especifica.
Tres selectores para que funcione con el atributo en el mismo elemento,
en un ancestro o en un descendiente (ver nota de ALCANCE arriba).
Paleta tintada de navy para que el oscuro siga sabiendo a IESDE en vez
de ser un gris neutro.
--------------------------------------------------------------------- */
[data-brand="iesde"][data-theme="dark"],
[data-theme="dark"] [data-brand="iesde"],
[data-brand="iesde"] [data-theme="dark"]:not(:where([data-brand])) {
/* Superficies: azules muy oscuros, no grises. */
--ui-surface: #0f2029;
--ui-surface-2: #081419;
--ui-surface-2-border: #24404d;
--ui-surface-3: #16303c;
--ui-surface-hover: #16303c;
--ui-surface-inverse: #061015;
/* Texto: 14:1 sobre la superficie base. */
--ui-text: #e6eef2;
--ui-text-strong: #ffffff;
--ui-text-muted: #9db2bd;
--ui-text-on-surface: #c6d5dd;
--ui-border: #5c7a89; /* U-07 oscuro · 1.54 -> 3.02:1 */
--ui-border-subtle: #24404d;
--ui-divider: #1c3543;
/* El navy primario desaparece sobre fondo oscuro: la acción principal
pasa al turquesa aclarado con texto navy encima (#4FA99C / #0b2b40 =
5.22:1). */
--ui-primary: #4fa99c;
--ui-primary-hover: #6fbdb1;
--ui-primary-border: #6fbdb1;
--ui-on-primary: #06212b;
--ui-secondary: #2e8b7f;
--ui-secondary-hover: #3aa294;
--ui-secondary-border: #3aa294;
--ui-on-secondary: #ffffff;
--ui-tertiary: #16303c;
--ui-tertiary-hover: #1e3d4b;
--ui-tertiary-border: #2f4d5c;
--ui-on-tertiary: #e6eef2;
/* Acento más brillante: sobre fondo oscuro el #22a798 se apaga. */
--ui-accent: #35c4b3;
--ui-on-accent: #06212b;
--ui-neutral: #24404d;
--ui-on-neutral: #ffffff;
--ui-counter: #4fa99c;
--ui-on-counter: #06212b;
--ui-link: #7fb4e8;
--ui-link-hover: #a6ccf1;
--ui-focus-ring: rgba(79, 169, 156, .35);
--ui-control-ring: rgba(79, 169, 156, .35);
--ui-shadow: 0 2px 10px rgba(0, 0, 0, .55);
/* Primitivos que también cambian en oscuro. */
--iesde-navy: #0f2029;
--iesde-navy-deep: #0b1a22;
--iesde-border-card: #24404d;
--iesde-tab-inactive-bg: #1c3543;
--iesde-primary-hover: #6fbdb1;
--iesde-primary-disabled: #2b4b58;
--iesde-secondary-disabled: #2a4f4a;
--iesde-dark-disabled: #2a3f49;
--iesde-cta-disabled: #2a4f4a;
--iesde-gray-light: #24404d;
/* Los verdes de interacción se aclaran: sobre fondo oscuro el
#2a736f y el #3e7b76 se confunden con la superficie. */
--iesde-green-active: #2e8b7f;
--iesde-green-inactive: #1f4f4c;
--iesde-green-cta: #2aa384;
--iesde-green-chip: #16303c;
/* Las sombras dejan de ser navy translúcido —invisible sobre oscuro— y
pasan a negro con más opacidad. */
--iesde-shadow-card: 0 2px 10px rgba(0, 0, 0, .55);
--iesde-shadow-card-strong: 0 8px 24px rgba(0, 0, 0, .55);
--iesde-shadow-home: 0 6px 20px rgba(0, 0, 0, .5);
--iesde-shadow-home-hover: 0 20px 42px rgba(0, 0, 0, .65);
--iesde-shadow-panel: 0 10px 30px rgba(0, 0, 0, .5);
--iesde-shadow-testimonial: 0 22px 46px rgba(0, 0, 0, .68);
--iesde-shadow-offer-active: 0 10px 26px rgba(0, 0, 0, .55);
/* El gradiente de sección es el único que no sobrevive: sus grises
azulados son claros por definición. */
--iesde-gradient-section: linear-gradient(#0f2029 0%, #122732 42%, #16303c 100%);
--iesde-error: #f2837a;
--iesde-error-ring: rgba(242, 131, 122, .18);
/*? U-04 · En oscuro el rojo de error se aclara para verse sobre el fondo; con
texto blanco encima daba 2.53:1. El relleno claro pide texto oscuro. */
--ui-on-danger: #14161d; /* 7.14:1 */
/* Neutros de los patrones: los claros no sirven de nada en oscuro. */
--iesde-prose: #c6d5dd;
--iesde-text-meta: #9db2bd;
--iesde-text-faint: #6e8a97;
--iesde-border-tile: #24404d;
--iesde-border-chip: #2f4d5c;
--iesde-zebra: #122732;
--iesde-num-turquoise: #16303c;
--iesde-num-blue: #16303c;
--iesde-dots-bg: #16303c;
--iesde-placeholder: #24404d;
}
/*? =====================================================================
2. TIPOGRAFÍA
Se aplica a las ETIQUETAS reales (h1—h4, p) dentro del alcance de la
marca. Los modificadores cubren los estilos que no tienen etiqueta
propia; van en inglés, como el resto del uikit.
h1 H1 secciones 600 · 48
h1.__hero H1 hero 700 · 56
h2 H2 entrada 600 · 32
h2.__light H3 entrada light 300 · 32
h3 H4 subtítulo 600 · 24
h4 (derivado) 600 · 20
p P2 cuerpo 400 · 16
p.__lead P1 grande 400 · 20
p.__bold P1 bold 600 · 18
p.__small P3 medio 400 · 14
p.__caption P4 pequeño 400 · 12
.__editorial cambia a Manuale (h1/h2/h3)
===================================================================== */
[data-brand="iesde"] {
font-family: var(--ui-font-base);
color: var(--ui-text);
}
:where([data-brand="iesde"]) h1 {
color: var(--ui-text-strong);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h1 {
font: var(--iesde-text-h1-section);
letter-spacing: -.5px;
margin: 0 0 .5rem;
}
:where([data-brand="iesde"]) h1.__hero {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h1.__hero {
font: var(--iesde-text-h1-hero);
}
:where([data-brand="iesde"]) h2 {
color: var(--ui-text-strong);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h2 {
font: var(--iesde-text-h2-entry-semibold);
letter-spacing: -.5px;
margin: 0 0 .5rem;
}
:where([data-brand="iesde"]) h2.__light {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h2.__light {
font: var(--iesde-text-h3-entry-light);
}
:where([data-brand="iesde"]) h3 {
color: var(--ui-text-strong);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h3 {
font: var(--iesde-text-h4-subtitle);
margin: 2rem 0 1rem;
}
/* El sistema no define un quinto nivel: este es derivado. */
:where([data-brand="iesde"]) h4 {
color: var(--ui-text-strong);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h4 {
font: 600 20px/1.35 "Sora", system-ui, sans-serif;
margin: 1.5rem 0 .75rem;
}
:where([data-brand="iesde"]) p {
color: var(--ui-text);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) p {
font: var(--iesde-text-p2-body);
margin: 0 0 1rem;
}
:where([data-brand="iesde"]) p.__lead {
color: var(--ui-text-muted);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) p.__lead {
font: var(--iesde-text-p1-large);
}
:where([data-brand="iesde"]) p.__bold {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) p.__bold {
font: var(--iesde-text-p1-bold);
}
:where([data-brand="iesde"]) p.__small {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) p.__small {
font: var(--iesde-text-p3-medium);
}
:where([data-brand="iesde"]) p.__caption {
color: var(--ui-text-muted);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) p.__caption {
font: var(--iesde-text-p4-small);
}
/* Variante editorial en Manuale. Manuale se carga solo en 300 y 500 y sin
eje itálico: no hay editorial en negrita ni en cursiva real. */
:where([data-brand="iesde"]) h1.__editorial {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h1.__editorial {
font: var(--iesde-text-editorial-h1-banner);
}
:where([data-brand="iesde"]) h2.__editorial {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h2.__editorial {
font: var(--iesde-text-editorial-h2-section);
}
:where([data-brand="iesde"]) h3.__editorial {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *):where([data-brand="iesde"]) h3.__editorial {
font: var(--iesde-text-editorial-h3-subtitle);
}
[data-brand="iesde"] .__editorial {
font-family: var(--iesde-font-editorial);
}
/* Puente con las clases tipográficas propias del uikit, para que un bloque
escrito con ellas también hable IESDE. */
[data-brand="iesde"] .upaep__title {
color: var(--ui-text-strong);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__title {
font: var(--iesde-text-h2-entry-semibold);
}
[data-brand="iesde"] .upaep__subtitle {
color: var(--ui-text-strong);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__subtitle {
font: var(--iesde-text-h4-subtitle);
}
[data-brand="iesde"] .upaep__subtitle-2 {
color: var(--ui-text-strong);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__subtitle-2 {
font: var(--iesde-text-p1-bold);
}
[data-brand="iesde"] .upaep__text {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__text {
font: var(--iesde-text-p2-body);
}
[data-brand="iesde"] .upaep__subtext {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__subtext {
font: var(--iesde-text-p3-medium);
}
[data-brand="iesde"] .upaep__caption {
color: var(--ui-text-muted);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__caption {
font: var(--iesde-text-p4-small);
}
/* Antetítulo de sección. ⚠ Va por las VARIABLES del componente, no por
`color`/`font` a pelo: esta regla pesa (0,2,0) y el componente pinta su
color con (0,1,0), así que un `color:` aquí gana a cualquier ajuste
posterior hecho por token —y deja muertas las variables para todos los
que revistan un overline más abajo—. Solo van como propiedad las tres
cosas que el componente NO expone: familia, interlínea y versalitas. */
[data-brand="iesde"] .upaep__overline {
--upaep-overline-color: var(--iesde-turquoise-deep);
font-family: var(--ui-font-base);
text-transform: uppercase;
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__overline {
--upaep-overline-fw: var(--upaep-fw-semibold);
--upaep-overline-fz: 12px;
line-height: 1.4;
letter-spacing: 2px;
}
/*? =====================================================================
3. COMPONENTES
Reviste componentes EXISTENTES del uikit a través de sus propias
variables. No define componentes nuevos; cuando la marca pide una
variante que el uikit no tiene, se añade como MODIFICADOR.
===================================================================== */
/*? ------ Botón ------
Pastilla de 30px, 15px/500, padding 10px 24px. Los colores llegan por
los roles; aquí van forma y los deshabilitados, que el sistema define
con color propio por variante (no con opacidad). */
/* ⚠ La FORMA (pastilla, alto, ancho mínimo) va SOLO en las variantes
públicas, nunca en la clase base `.upaep__btn`.
Motivo: el runtime construye los botones internos de muchos componentes
con esa misma clase base —`upaep__btn __selectpicker is-close`,
`upaep__btn __dropzone`, `upaep__btn __back`, el +/− del Numberpicker…—.
Vestir la base les mete 140px de ancho mínimo y pastilla de 30px, y los
deforma. Regla general de esta capa: revestir variantes, no bases.
⚠ La lista se amplía con cuidado: hay variantes de COLOR que también son
internas. `__success` y `__blue` parecen hermanas de `__primary`, pero el
runtime las construye siempre junto a `__signature`
(`upaep__btn __signature __rounded __success __save`), así que vestirlas
deforma los botones del componente Signature. Comprobado en script.js. */
[data-brand="iesde"] .upaep__btn.__primary,
[data-brand="iesde"] .upaep__btn.__secondary,
[data-brand="iesde"] .upaep__btn.__tertiary,
[data-brand="iesde"] .upaep__btn.__dark,
[data-brand="iesde"] .upaep__btn.__iesde-cta,
[data-brand="iesde"] .upaep__btn.__underline,
[data-brand="iesde"] .upaep__btn.__light {
--upaep-btn-opacity-disabled: 1;
white-space: nowrap;
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__primary,
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__secondary,
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__tertiary,
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__dark,
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__iesde-cta,
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__underline,
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__light {
--upaep-btn-border-radius: var(--iesde-radius-pill);
--upaep-btn-hover-border-radius: var(--iesde-radius-pill);
--upaep-btn-padding: 10px 24px;
--upaep-btn-margin: 0;
--upaep-btn-fz: 15px;
--upaep-btn-fw: var(--upaep-fw-medium);
--upaep-btn-cont-fz: 15px;
min-width: 140px;
gap: 10px;
}
[data-brand="iesde"] .upaep__btn.__primary svg,
[data-brand="iesde"] .upaep__btn.__secondary svg,
[data-brand="iesde"] .upaep__btn.__tertiary svg,
[data-brand="iesde"] .upaep__btn.__dark svg,
[data-brand="iesde"] .upaep__btn.__iesde-cta svg,
[data-brand="iesde"] .upaep__btn.__underline svg,
[data-brand="iesde"] .upaep__btn.__light svg {
flex: 0 0 auto;
}
[data-brand="iesde"] .upaep__btn.__primary {
--upaep-btn-disabled-bg: var(--iesde-primary-disabled);
--upaep-btn-disabled-border-color: var(--iesde-primary-disabled);
--upaep-btn-disabled-color: #ffffff;
--upaep-btn-disabled-cont-color: #ffffff;
}
[data-brand="iesde"] .upaep__btn.__secondary {
--upaep-btn-disabled-bg: var(--iesde-secondary-disabled);
--upaep-btn-disabled-border-color: var(--iesde-secondary-disabled);
--upaep-btn-disabled-color: #ffffff;
--upaep-btn-disabled-cont-color: #ffffff;
}
[data-brand="iesde"] .upaep__btn.__dark {
--upaep-btn-bg: var(--iesde-gray-dark);
--upaep-btn-border-color: var(--iesde-gray-dark);
--upaep-btn-color: #ffffff;
--upaep-btn-cont-color: #ffffff;
--upaep-btn-hover-bg: var(--iesde-dark-hover);
--upaep-btn-hover-border-color: var(--iesde-dark-hover);
--upaep-btn-hover-color: #ffffff;
--upaep-btn-disabled-bg: var(--iesde-dark-disabled);
--upaep-btn-disabled-border-color: var(--iesde-dark-disabled);
--upaep-btn-disabled-color: #ffffff;
}
/* CTA verde sólido (v2). Modificador de .upaep__btn: el uikit no tiene una
variante verde, y esta no es el secundario —el secundario es el turquesa
accionable #186d63, y aquí ese tono es el HOVER—.
Es el único botón del sistema que se mueve al pasar el ratón: la matriz de
estados de v2 lo define como "#186d63 + translateY(-2px)". El
desplazamiento va aquí y no en una variable del core porque el componente
no expone transform. */
[data-brand="iesde"] .upaep__btn.__iesde-cta {
--upaep-btn-bg: var(--iesde-green-cta);
--upaep-btn-border-color: var(--iesde-green-cta);
--upaep-btn-color: #ffffff;
--upaep-btn-cont-color: #ffffff;
--upaep-btn-hover-bg: var(--iesde-cta-hover);
--upaep-btn-hover-border-color: var(--iesde-cta-hover);
--upaep-btn-hover-color: #ffffff;
--upaep-btn-disabled-bg: var(--iesde-cta-disabled);
--upaep-btn-disabled-border-color: var(--iesde-cta-disabled);
--upaep-btn-disabled-color: #ffffff;
transition: background var(--iesde-transition-fast) ease-out,
transform var(--iesde-transition-fast) ease-out;
}
[data-brand="iesde"] .upaep__btn.__iesde-cta:hover:not(:disabled) {
transform: translateY(-2px);
}
/* v2: "los estados deshabilitados no cambian de tamaño ni pierden el icono:
solo bajan de contraste y cambian el cursor". */
[data-brand="iesde"] .upaep__btn.__iesde-cta:disabled {
transform: none;
}
/* Texto con subrayado de acento: el uikit ya lo pinta con --ui-accent. */
[data-brand="iesde"] .upaep__btn.__underline {
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__underline {
--upaep-btn-border-radius: 0;
--upaep-btn-hover-border-radius: 0;
--upaep-btn-padding: 6px 2px;
min-width: auto;
}
/* Enlace de texto azul. */
[data-brand="iesde"] .upaep__btn.__light {
--upaep-btn-bg: transparent;
--upaep-btn-border-color: transparent;
--upaep-btn-color: var(--ui-link);
--upaep-btn-cont-color: var(--ui-link);
--upaep-btn-hover-bg: transparent;
--upaep-btn-hover-border-color: transparent;
--upaep-btn-hover-color: var(--ui-link-hover);
}
/*? geometria del sistema institucional — solo en el lienzo (U-32) */
:is([data-brand-canvas], [data-brand-canvas] *)[data-brand="iesde"] .upaep__btn.__light {
--upaep-btn-padding: 10px 0;
min-width: auto;
}
/*? ------ Navbar ------
Tres cosas del componente que condicionan el revestido:
· el FONDO y la ALTURA viven en .upaep__navbar-content, no en el