/* ============================================================ AppsHub UAI — Tokens ============================================================ Sólo variables. Ni un selector de componente. El orden de carga es el sistema: tokens → reset → layout → components → utilities → style. Cada capa puede pisar a la anterior y no al revés. NUNCA escribir un color, un espaciado o un radio a mano en una regla. Es lo único que hace que el modo oscuro sea una capa de variables y no una auditoría de cada archivo. ============================================================ */ :root { color-scheme: light; /* ── Tipografía ────────────────────────────────────────── La pila del sistema, sin descargar nada. Segoe UI es la tipografía nativa de Teams, así que dentro de la pestaña el hub se integra con lo que lo rodea; en Mac y Linux `system-ui` resuelve a lo que corresponda ahí. El parentesco con PAVE lo dan la densidad, el espaciado y la forma de los componentes, no la familia. El costo de traer Inter serían 125 KB en la primera carga y una dependencia externa que, si falla, cambia la tipografía de toda la página sin ningún error visible. */ --font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif; --font-mono: 'Cascadia Code', 'Consolas', ui-monospace, monospace; /* Escala de 11 a 24: es una interfaz densa, para trabajo. */ --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ── Primario — violeta institucional ──────────────────── Construido alrededor de #593597, que es el `accentColor` declarado en el manifest: dentro de Teams la aplicación se integra con el chrome que la rodea, y cambiarlo a otro tono obligaría además a republicar el paquete. Reemplaza al azul de PAVE. Ninguna regla cambia por esto: todas leen la variable. */ --color-primary-50: #f6f3fb; --color-primary-100: #ece5f8; --color-primary-200: #dbcdf2; --color-primary-300: #c0aae7; --color-primary-400: #9f7fd6; --color-primary-500: #8259c4; --color-primary-600: #6d43ae; --color-primary-700: #593597; --color-primary-800: #46296f; --color-primary-900: #331e52; /* ── Neutros ─────────────────────────────────────────── */ --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* ── Superficies y texto ─────────────────────────────── */ --bg: #f3f3f5; --surface-card: #ffffff; --surface-sunken: #fafafa; --border-default: #e4e4e7; --border-strong: #d1d5db; --text-primary: #242424; --text-secondary: #3f3f46; --text-muted: #5f5f63; --text-inverse: #ffffff; /* ── Acento ────────────────────────────────────────────── Tres variables, no una. Los componentes leen estas y las secciones las redefinen para cambiar de tono sin una sola regla nueva: el ícono, el contador, el hover, el foco y «Abrir» acompañan solos. --accent texto y bordes sobre la superficie --accent-bg fondo suave (ícono, contador, insignias) --accent-fg texto sobre ese fondo suave */ --accent: var(--color-primary-700); --accent-bg: var(--color-primary-100); --accent-fg: var(--color-primary-800); /* Los dos realces, que son cosas distintas y se confundían. `--realce` pinta bordes y contornos, donde el ámbar puro de Power BI se ve bien. `--acento-texto` pinta texto e íconos, donde ese mismo amarillo es ilegible y hay que usar su versión oscura. Existen porque el patrón anterior —`var(--bi, var(--accent))`— no podía funcionar: `--bi` está definida acá, o sea siempre, así que el respaldo nunca se alcanzaba y TODO el hub se dibujaba en ámbar. En el hub estático ese fallback sí andaba, porque allá `--bi` vivía dentro de la sección de reportes. Se portó la línea y se perdió lo que la hacía cierta. **Cada acento las vuelve a declarar**, y no alcanza con dejarlas acá: una custom property cuyo valor es `var(...)` se computa DONDE SE DECLARA, no donde se usa. Puestas sólo en `:root`, los hijos heredan el violeta base ya resuelto y redefinir `--accent` más abajo no las cambia — con lo cual esenciales y adicionales se realzaban con el color del ecosistema. */ --realce: var(--accent); --acento-texto: var(--accent); /* ── Acento por sección ────────────────────────────────── La misma familia en tres intensidades, en el orden de la jerarquía real de la página. El ecosistema no tiene entrada acá: usa el acento base, que es la línea de referencia. Los esenciales van **más saturados** que la base, no un escalón más de la misma escala. Con `primary-600` sobre una base de `primary-700`, el fondo del ícono quedaba a una distancia de 1,4 sobre 255 del de ecosistema — el mismo color con otro nombre. Y la relación se daba vuelta entre temas: en claro los esenciales salían más claros que la base y en oscuro más oscuros, así que la jerarquía que el color intentaba comunicar decía cosas distintas según el tema de cada persona. Los valores están medidos, no elegidos a ojo: contraste sobre 7:1 en los dos temas —AA pide 4,5— y distancia suficiente del acento base para que se vean como dos violetas y no como un error de renderizado. */ --esencial-accent: #6b2fbe; --esencial-bg: #ddcdf6; --esencial-fg: #472a86; --adicional-accent: #62667a; --adicional-bg: #eceef4; --adicional-fg: #4c5060; /* ── Notas dentro de la tarjeta ────────────────────────── Los tonos salen por descarte: en este hub el ámbar significa Power BI, así que «acceso restringido» toma el naranja —cálido, conserva el sentido de precaución— y «en desarrollo» el verde azulado, en las antípodas, porque las dos pueden aparecer en tarjetas vecinas. */ --nota-acceso-bg: #fde5d2; --nota-acceso-fg: #8a3900; --nota-dev-bg: #dff1ee; --nota-dev-fg: #115e59; /* ── Franja de avisos ──────────────────────────────────── Rojo, verde y azul: los tres que quedan libres una vez que el ámbar, el naranja y el verde azulado ya significan otra cosa en esta misma página. */ --aviso-mant-bg: #fde8e8; --aviso-mant-fg: #a01b1b; --aviso-nov-bg: #e3f4e8; --aviso-nov-fg: #1d6b37; --aviso-info-bg: #e5eff8; --aviso-info-fg: #1c527e; /* Insignia de alta reciente. El mismo verde que el aviso de novedad: las dos dicen lo mismo en distinto lugar. */ --nuevo-bg: var(--aviso-nov-bg); --nuevo-fg: var(--aviso-nov-fg); /* ── Power BI ──────────────────────────────────────────── La única sección con otro tono, porque es contenido de otra naturaleza y no un escalón más de la misma jerarquía. El amarillo va sólo de fondo: como texto es ilegible. */ --bi: #f2c811; --bi-ink: #4a3b00; --bi-soft: #fdf3cf; --bi-fg: #6b5500; /* ── Modalidad de cursada ──────────────────────────────── Los tres colores de la grilla de horarios, heredados del sistema viejo: celeste lo presencial y salmón lo virtual sincrónico. Se conservan a propósito — quien ya sabe leer esa grilla la reconoce de un vistazo, y cambiar el código de colores obliga a todo el mundo a reaprender algo que ya sabía. Lo que sí cambia es el contraste: los del sistema viejo son fondos saturados con texto negro y varios no llegan a 4.5:1. Acá el fondo es suave y el texto lleva su tono. */ --clase-presencial-bg: #dbeefb; --clase-presencial-fg: #14496e; --clase-presencial-borde: #7cb6dd; --clase-sincronica-bg: #fde4dc; --clase-sincronica-fg: #8a3520; --clase-sincronica-borde: #e5a08a; --clase-asincronica-bg: #e7e6f6; --clase-asincronica-fg: #423a7a; --clase-asincronica-borde: #a9a3dd; /* Mixta: la asignatura ALTERNA por calendario — unas fechas en el aula, otras virtuales. Tuvo este color, se quitó creyendo que era la misma cosa que lo presencial, y un muestreo contra el sistema público lo trajo de vuelta: pintarla celeste decía «siempre presencial», que es justo lo que no es. Verde azulado porque es el único tono libre entre el celeste del aula y el salmón de lo virtual — y tiene que distinguirse de los dos. */ --clase-mixta-bg: #d9f0ea; --clase-mixta-fg: #10554a; --clase-mixta-borde: #6fbfae; /* ── Tipos de actividad de la agenda ───────────────────── Cinco categorías, y el color es lo único que las separa de un vistazo en una columna angosta: «Inicio del 2º cuatrimestre» y «Inicio Cursadas hospitalarias» tienen la misma forma y no la misma importancia. Deliberadamente distintos de los de modalidad de arriba: las dos escalas conviven en la misma pantalla cuando alguien tiene la grilla abierta, y dos celestes que significan cosas distintas es peor que no pintar nada. */ --agenda-ciclo-bg: #ece9fb; --agenda-ciclo-fg: #46329c; --agenda-examen-bg: #fde8e8; --agenda-examen-fg: #9b2c2c; --agenda-inscripcion-bg: #dcf5e6; --agenda-inscripcion-fg: #1a6340; --agenda-receso-bg: #ebedf0; --agenda-receso-fg: #4c5560; --agenda-cursada-bg: #ddeefa; --agenda-cursada-fg: #17567d; /* Feriado: naranja, el único tono cálido que quedaba libre en esta escala. Comparte familia con la nota de «acceso restringido» y no molesta: nunca aparecen en la misma zona de la pantalla. */ --agenda-feriado-bg: #fcecd7; --agenda-feriado-fg: #8a4500; /* ── Escala de carga del calendario de horarios ────────── Los cuatro escalones de las barritas por turno. **Tokens propios y no la escala primaria a secas**, que es lo que había y estaba roto: `--color-primary-600` y `-800` viven en `:root` y no se redefinen por tema, así que en oscuro quedaban violetas oscuros sobre fondo oscuro. Medido: carga-4 daba **1.33:1** contra el fondo del cuadradito — invisible— y la escala se **invertía**, o sea que el día más cargado era el que menos se veía. Por eso en claro van de claro a oscuro y en oscuro al revés, de oscuro a claro: lo que comunica «más» es el contraste contra el fondo, no el tono. Los doce valores están medidos y `scripts/verificar_contraste.py` los vuelve a medir. */ --carga-1: var(--color-primary-400); --carga-2: var(--color-primary-500); --carga-3: var(--color-primary-700); --carga-4: var(--color-primary-900); /* ── Espaciado, base 4px ─────────────────────────────── */ --space-px: 1px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── Radios ──────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ── Sombras ─────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); --shadow-md: 0 2px 6px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04); /* ── Transiciones ────────────────────────────────────── */ --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1); --transition-base: 200ms cubic-bezier(.4, 0, .2, 1); /* ── Estructura ──────────────────────────────────────── */ /* El único tope de ancho del contenido. Vale para el hub, para la pestaña de Teams y para las ocho pantallas de gestión: la gestión tenía el suyo en 960 y como se va y se vuelve con el engranaje varias veces por sesión, el borde del contenido saltaba 80px en cada viaje. */ --ancho-contenido: 1120px; /* Y el de los buscadores, por lo mismo: había tres valores —440 en el hub, 420 en Módulos/Reportes/Avisos y lo que sobrara en Personas— porque cada uno se dimensionó solo, mirando su propia pantalla. */ --ancho-buscador: 440px; /* El panel del selector de tema. Como token porque lo usan su ancho mínimo y el tope que lo acota cuando el encabezado envuelve. */ --ancho-panel-tema: 208px; /* Alto común de los controles del encabezado: el avatar, el engranaje de gestión y el botón de salir. Como token y no repetido en cada regla porque el defecto que arregla es justamente que se habían separado —el avatar en 34, el engranaje en 40 y «Salir» sacando su altura del padding, 28— y quedaban tres alturas distintas en una fila de tres elementos. */ --alto-control: 34px; --z-toast: 50; --z-popover: 40; } /* ══ Modo oscuro ══════════════════════════════════════════════ No es un agregado: Teams tiene tema oscuro nativo y notifica sus cambios al SDK, así que una pestaña clara dentro de un Teams oscuro se ve fuera de lugar. Todo lo que hay acá es una redefinición de variables. Ninguna regla de componente sabe que existe. */ [data-theme="dark"] { color-scheme: dark; --bg: #1b1b1d; --surface-card: #2b2b2e; --surface-sunken: #242427; --border-default: #3a3a3e; --border-strong: #4a4a50; --text-primary: #ffffff; --text-secondary: #d4d4d8; --text-muted: #adadb2; /* Más claro que el 700 del tema claro: sobre #2b2b2e el violeta institucional queda en 1.9:1, ilegible. */ --accent: var(--color-primary-300); --accent-bg: #3d2f57; --accent-fg: #d5c4f0; --esencial-accent: #cbb0ff; --esencial-bg: #4c3b7a; --esencial-fg: #dccdff; --adicional-accent: #9ba1b8; --adicional-bg: #3c3f4c; --adicional-fg: #c3c8d8; --nota-acceso-bg: #41301f; --nota-acceso-fg: #f3b380; --nota-dev-bg: #1e3b38; --nota-dev-fg: #6fd8c6; /* Modalidad de cursada, en oscuro. */ --clase-presencial-bg: #1c3a4f; --clase-presencial-fg: #a8d4f0; --clase-presencial-borde: #37698f; --clase-sincronica-bg: #4a2519; --clase-sincronica-fg: #f2b49c; --clase-sincronica-borde: #8c4a32; --clase-asincronica-bg: #2e2a52; --clase-asincronica-fg: #c3bdf0; --clase-asincronica-borde: #5b5299; --clase-mixta-bg: #12403a; --clase-mixta-fg: #8fd8c8; --clase-mixta-borde: #2f7c6c; /* Tipos de actividad de la agenda, en oscuro. */ --agenda-ciclo-bg: #2e2a52; --agenda-ciclo-fg: #bfb5f5; --agenda-examen-bg: #4a2020; --agenda-examen-fg: #f5b0b0; --agenda-inscripcion-bg: #12402c; --agenda-inscripcion-fg: #86dcb1; --agenda-receso-bg: #34383d; --agenda-receso-fg: #b9c1cb; --agenda-cursada-bg: #1c3a4f; --agenda-cursada-fg: #a8d4f0; --agenda-feriado-bg: #46301c; --agenda-feriado-fg: #f3b880; /* Escala de carga, en oscuro: al revés que en claro —más carga es más claro— y **fuera de la escala primaria**, a propósito. Los pasos altos de esa escala pierden saturación al aclarar y el día más cargado se leía apagado, como una barra deshabilitada. Estos cuatro son el violeta más saturado que alcanza cada contraste (3.2 / 4.7 / 6.7 / 9.8 sobre el fondo del cuadradito): el brillo sube sin lavarse. */ --carga-1: #9538ff; --carga-2: #b06bff; --carga-3: #c694ff; --carga-4: #dec2ff; --aviso-mant-bg: #402224; --aviso-mant-fg: #f5a3a3; --aviso-nov-bg: #1f3a28; --aviso-nov-fg: #8ddba6; --aviso-info-bg: #23394f; --aviso-info-fg: #9ec8ec; --bi-soft: #3b3420; --bi-fg: #f0d367; --shadow-md: 0 2px 8px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35); } /* Alto contraste de Teams. El color deja de jerarquizar: todo es amarillo sobre negro, y desviarse de eso rompe el modo. */ [data-theme="contrast"] { color-scheme: dark; --bg: #000000; --surface-card: #000000; --surface-sunken: #000000; --border-default: #ffffff; --border-strong: #ffffff; --text-primary: #ffffff; --text-secondary: #ffffff; --text-muted: #ffffff; --accent: #ffff01; --accent-bg: #000000; --accent-fg: #ffff01; /* La distinción entre secciones se anula a propósito: acá el color no jerarquiza, y desviarse del amarillo sobre negro rompe el modo. */ --esencial-accent: #ffff01; --esencial-bg: #000000; --esencial-fg: #ffff01; --adicional-accent: #ffff01; --adicional-bg: #000000; --adicional-fg: #ffff01; --nota-acceso-bg: #000000; --nota-acceso-fg: #ffff01; --nota-dev-bg: #000000; --nota-dev-fg: #ffffff; /* Modalidad de cursada, en oscuro. */ --clase-presencial-bg: #1c3a4f; --clase-presencial-fg: #a8d4f0; --clase-presencial-borde: #37698f; --clase-sincronica-bg: #4a2519; --clase-sincronica-fg: #f2b49c; --clase-sincronica-borde: #8c4a32; --clase-asincronica-bg: #2e2a52; --clase-asincronica-fg: #c3bdf0; --clase-asincronica-borde: #5b5299; --clase-mixta-bg: #12403a; --clase-mixta-fg: #8fd8c8; --clase-mixta-borde: #2f7c6c; /* Tipos de actividad de la agenda, en alto contraste. El color deja de distinguir y lo hace el ícono: acá todo es amarillo sobre negro, que es el punto del tema. */ --agenda-ciclo-bg: #000000; --agenda-ciclo-fg: #ffff01; --agenda-examen-bg: #000000; --agenda-examen-fg: #ffff01; --agenda-inscripcion-bg: #000000; --agenda-inscripcion-fg: #ffff01; --agenda-receso-bg: #000000; --agenda-receso-fg: #ffffff; --agenda-cursada-bg: #000000; --agenda-cursada-fg: #ffffff; --agenda-feriado-bg: #000000; --agenda-feriado-fg: #ffff01; /* Escala de carga, en alto contraste: el violeta deja de distinguir y lo hace la luminancia, en grises hasta el amarillo del tema. */ --carga-1: #7a7a7a; --carga-2: #a8a8a8; --carga-3: #d6d6d6; --carga-4: #ffff01; --aviso-mant-bg: #000000; --aviso-mant-fg: #ffffff; --aviso-nov-bg: #000000; --aviso-nov-fg: #ffffff; --aviso-info-bg: #000000; --aviso-info-fg: #ffffff; --nuevo-bg: #000000; --nuevo-fg: #ffffff; --bi: #ffff01; --bi-ink: #000000; --bi-soft: #000000; --bi-fg: #ffff01; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* Preferencia del sistema, para la puerta web — dentro de Teams el tema llega por el SDK y se escribe en `data-theme`. El `:not()` es lo que hace que una elección explícita gane: sin él, alguien que eligió claro en un sistema oscuro vería el hub oscuro igual. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="contrast"]) { color-scheme: dark; --bg: #1b1b1d; --surface-card: #2b2b2e; --surface-sunken: #242427; --border-default: #3a3a3e; --border-strong: #4a4a50; --text-primary: #ffffff; --text-secondary: #d4d4d8; --text-muted: #adadb2; --accent: var(--color-primary-300); --accent-bg: #3d2f57; --accent-fg: #d5c4f0; --esencial-accent: #cbb0ff; --esencial-bg: #4c3b7a; --esencial-fg: #dccdff; --adicional-accent: #9ba1b8; --adicional-bg: #3c3f4c; --adicional-fg: #c3c8d8; --nota-acceso-bg: #41301f; --nota-acceso-fg: #f3b380; --nota-dev-bg: #1e3b38; --nota-dev-fg: #6fd8c6; --aviso-mant-bg: #402224; --aviso-mant-fg: #f5a3a3; --aviso-nov-bg: #1f3a28; --aviso-nov-fg: #8ddba6; --aviso-info-bg: #23394f; --aviso-info-fg: #9ec8ec; --bi-soft: #3b3420; --bi-fg: #f0d367; /* ── Lo que el tema elegido y el Automático tienen que decir igual ── Estos tokens también viven en [data-theme="dark"]. Hay un test que exige que los dos bloques declaren lo mismo: tres funciones seguidas se agregaron sólo allá y este bloque quedó mudo — en «Automático» la agenda salía en pastel claro y la escala de carga directamente no se veía. */ --clase-presencial-bg: #1c3a4f; --clase-presencial-fg: #a8d4f0; --clase-presencial-borde: #37698f; --clase-sincronica-bg: #4a2519; --clase-sincronica-fg: #f2b49c; --clase-sincronica-borde: #8c4a32; --clase-asincronica-bg: #2e2a52; --clase-asincronica-fg: #c3bdf0; --clase-asincronica-borde: #5b5299; --clase-mixta-bg: #12403a; --clase-mixta-fg: #8fd8c8; --clase-mixta-borde: #2f7c6c; --agenda-ciclo-bg: #2e2a52; --agenda-ciclo-fg: #bfb5f5; --agenda-examen-bg: #4a2020; --agenda-examen-fg: #f5b0b0; --agenda-inscripcion-bg: #12402c; --agenda-inscripcion-fg: #86dcb1; --agenda-receso-bg: #34383d; --agenda-receso-fg: #b9c1cb; --agenda-cursada-bg: #1c3a4f; --agenda-cursada-fg: #a8d4f0; --agenda-feriado-bg: #46301c; --agenda-feriado-fg: #f3b880; --carga-1: #9538ff; --carga-2: #b06bff; --carga-3: #c694ff; --carga-4: #dec2ff; --shadow-md: 0 2px 8px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35); } }