/* CurricuLabs — Tokens de diseño Fuente única de verdad de color, tipografía, espaciado, radios y sombras. Ningún componente debe declarar un color/tamaño "a mano": siempre var(--...). Ver IDENTIDAD_VISUAL_CURRICULABS.md para la justificación de cada decisión. */ :root { /* ---------- Marca ---------- */ --color-brand-primary: #1E3A34; /* Tinta — verde-teal profundo, institucional */ --color-brand-primary-hover: #162B27; --color-brand-primary-active: #0F1F1C; --color-brand-secondary: #3F7A6E; /* Musgo — teal medio, secundario/enlaces */ --color-brand-secondary-hover: #326156; --color-brand-secondary-active: #274B43; --color-accent: #D98A3D; /* Ámbar — calidez, CTA secundario, "labs" */ --color-accent-hover: #C1782F; --color-accent-active: #A9682A; /* ---------- Fondos y superficies ---------- */ --color-bg: #F4F6F4; /* fondo general de la página */ --color-surface: #FFFFFF; /* tarjetas, formularios */ --color-surface-secondary: #EEF2F0; /* cabeceras de tabla, filas alternas, hover suave */ --color-surface-sunken: #E7ECE9; /* zonas hundidas: pie de modal, inputs deshabilitados */ /* ---------- Texto ---------- */ --color-text: #1B2422; /* texto principal */ --color-text-secondary: #56655F; /* texto de apoyo, ayudas, subtítulos */ --color-text-muted: #74857D; /* texto terciario, placeholders — oscurecido en el refinamiento (antes #8B968F, contraste insuficiente) */ --color-text-on-brand: #F6FAF8; /* texto sobre fondos de marca oscuros */ --color-text-on-brand-secondary: rgba(246, 250, 248, 0.78); /* eyebrows y ayudas sobre el header oscuro */ --color-text-link: #2A6E5F; --color-on-accent-text: #241505; /* texto sobre fondos ámbar (botón acento, celda de horario seleccionada) */ /* ---------- Superficies traslúcidas sobre fondo de marca (header) ---------- */ --color-on-brand-wash-weak: rgba(246, 250, 248, 0.12); --color-on-brand-wash: rgba(246, 250, 248, 0.20); --color-on-brand-wash-strong: rgba(246, 250, 248, 0.28); --color-overlay: rgba(15, 27, 23, 0.6); /* fondo oscurecido detrás del modal */ --color-accent-wash: rgba(217, 138, 61, 0.16); /* fondo del badge de rol */ --color-accent-wash-strong: rgba(217, 138, 61, 0.18); /* hover de celdas de horario no seleccionadas */ /* ---------- Bordes y foco ---------- */ --color-border: #DCE3DF; --color-border-strong: #A9BCB2; /* oscurecido en la ronda de refinamiento: el valor anterior (#C3CEC8) rendía bordes de input casi invisibles */ --color-focus: #1E8F7C; /* anillo de foco: teal saturado, visible en fondo claro y oscuro */ --shadow-focus-ring: 0 0 0 3px rgba(30, 143, 124, 0.18); --shadow-error-ring: 0 0 0 3px rgba(179, 38, 30, 0.16); /* ---------- Estados semánticos ---------- */ --color-success: #2E7D4F; --color-success-bg: #E7F4EC; --color-success-text: #1E5636; --color-warning: #A96A12; --color-warning-bg: #FBF0DD; --color-warning-text: #7A4B0C; --color-error: #B3261E; --color-error-bg: #FBEAE9; --color-error-text: #7F1B15; --color-info: #2563A6; --color-info-bg: #E9F1FA; --color-info-text: #1A4573; /* ---------- Tokens de rol (fallback institucional) ---------- Ver IDENTIDAD_VISUAL_CURRICULABS.md, "Sistema cromático por roles". Estos son los valores por DEFECTO: se usan cuando no tiene [data-theme-role], o cuando su valor no coincide con ningún rol conocido (fallback seguro para rol ausente/desconocido). El rol "supervisor" reutiliza este mismo fallback a propósito: en el legacy no tiene panel propio, solo accede a paneles de otros roles. Solo estos 5 tokens cambian por rol — todo lo demás (fondos, tarjetas, formularios, estados semánticos, botón ámbar de horarios, tipografías, radios, sombras) es universal y no se toca. */ --role-header: var(--color-brand-primary); --role-header-hover: var(--color-brand-primary-hover); --role-header-active: var(--color-brand-primary-active); --role-badge-bg: #E4EEEB; --role-badge-text: #24483E; } /* Cada bloque reasigna únicamente los 5 tokens de rol de arriba — nunca colores universales (fondo general, tarjetas, estados semánticos, ámbar de horarios). Claves normalizadas por normalizeRoleKey() en mi-perfil.js a partir de la clave oficial exacta de legacy/index.html::ACCESO_POR_ROL. */ /* profesor — legacy: Panel Profesores/Tutorías/Configurar Grupos, bg-teal-600 */ [data-theme-role="profesor"] { --role-header: #2F6B52; --role-header-hover: #26573F; --role-header-active: #1C4530; --role-badge-bg: #E4F1EA; --role-badge-text: #1E4A34; } /* preceptor — legacy: panel preceptores setup, bg-lime-600. Reasignado a Azul Índigo institucional en la reconstrucción del nuevo Panel Preceptores (ver RECONSTRUCCION_PANEL_PRECEPTORES.md): identidad propia, deliberadamente distinta del verde de "profesor" y de cualquier variante turquesa/teal usada en Tutorías (PAT). Escala Tailwind Indigo 700/800/900 (nunca 600 en --role-header-hover: todos los demás bloques de rol de este archivo oscurecen en hover/active, nunca aclaran — se mantiene esa misma dirección acá por consistencia con el resto del sistema). */ [data-theme-role="preceptor"] { --role-header: #4338CA; /* Indigo 700 */ --role-header-hover: #3730A3; /* Indigo 800 */ --role-header-active: #312E81; /* Indigo 900 */ --role-badge-bg: #E4E3FA; --role-badge-text: #362F78; } /* jefe de preceptores — sin panel exclusivo en legacy (preceptores + base de datos + secretaría); variante más profunda de "preceptor" a propósito, para agrupar visualmente ambos roles sin confundirlos. */ [data-theme-role="jefe-de-preceptores"] { --role-header: #114B52; --role-header-hover: #0D3B41; --role-header-active: #092A2F; --role-badge-bg: #DCEBEC; --role-badge-text: #0D3B41; } /* Administracion — legacy: Panel Secretaría, bg-indigo-600 (clave tal cual está en legacy/index.html, sin tilde, con mayúscula inicial; normalizada por JS a "administracion") */ [data-theme-role="administracion"] { --role-header: #425378; --role-header-hover: #354363; --role-header-active: #29334E; --role-badge-bg: #E4E8F2; --role-badge-text: #2B3A5C; } /* director — legacy: Panel Conducción, bg-amber-600. Traducido a un bronce institucional profundo, deliberadamente distinto del ámbar de marca (--color-accent) para no confundir un header de rol con el botón de horarios. */ [data-theme-role="director"] { --role-header: #8A5A22; --role-header-hover: #714A1B; --role-header-active: #593A15; --role-badge-bg: #F4E7D3; --role-badge-text: #6B4718; } /* vicedirector — mismo acceso que director en legacy; variante hermana (terracota en vez de bronce) para que ambos se reconozcan como "familia de conducción" sin ser idénticos. */ [data-theme-role="vicedirector"] { --role-header: #9C5B3C; --role-header-hover: #814A30; --role-header-active: #663A25; --role-badge-bg: #F5E3D8; --role-badge-text: #7A4529; } /* supervisor — sin color propio en legacy (accede a casi todo salvo panel-maestro); usa el fallback institucional de arriba tal cual, sin bloque propio, porque no hay ninguna señal cromática real que traducir. */ /* equipo pedagogico — legacy: Seguimiento Docente (bg-blue-600, compartido con director) + Tutorías (bg-teal-600, compartido con profesor); sin señal exclusiva, se le asignó un azul institucional propio para diferenciarlo de ambos. */ [data-theme-role="equipo-pedagogico"] { --role-header: #3E5C99; --role-header-hover: #334B7E; --role-header-active: #283A63; --role-badge-bg: #E4E9F5; --role-badge-text: #2C4373; } /* administrador maestro — legacy: panel-maestro exclusivo, bg-indigo-700. Violeta profundo, deliberadamente distinto del azul-índigo de "Administracion" para que no se confundan pese a compartir familia. */ [data-theme-role="administrador-maestro"] { --role-header: #5B3A75; --role-header-hover: #4A2F60; --role-header-active: #3A254B; --role-badge-bg: #EBE2F0; --role-badge-text: #4A2F60; } :root { /* ---------- Tipografía ---------- */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-data: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace; --text-xs: 0.75rem; /* 12px — metadatos, ayudas */ --text-sm: 0.875rem; /* 14px — texto de interfaz por defecto */ --text-base: 1rem; /* 16px — cuerpo de formularios */ --text-md: 1.125rem; /* 18px — subtítulos de tarjeta */ --text-lg: 1.375rem; /* 22px — títulos de sección */ --text-xl: 1.75rem; /* 28px — título de marca en header */ --text-2xl: 2.25rem; /* 36px — hero / títulos grandes */ --leading-tight: 1.2; --leading-normal: 1.5; /* ---------- Espaciado (escala base 4px) ---------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ---------- Radios ---------- */ --radius-sm: 0.25rem; /* 4px — chips, celdas de horario */ --radius-md: 0.5rem; /* 8px — inputs, botones */ --radius-lg: 0.75rem; /* 12px — tarjetas, modales */ --radius-full: 999px; /* solo para badges/chips redondos puntuales */ /* ---------- Sombras (uso deliberadamente escaso) ---------- */ --shadow-sm: 0 1px 2px rgba(15, 31, 28, 0.06); --shadow-card: 0 1px 3px rgba(15, 31, 28, 0.08), 0 1px 2px rgba(15, 31, 28, 0.04); --shadow-modal: 0 12px 32px rgba(15, 31, 28, 0.22); /* ---------- Movimiento ---------- */ --duration-fast: 120ms; --duration-base: 180ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Layout ---------- */ /* Borde exterior del shell de la aplicación (header y fondo de .app-main). Debe ser siempre >= --width-content-wide para que ningún panel "amplio" quede recortado por el contenedor exterior. */ --container-max: 96rem; /* 1536px */ --header-height: 4rem; /* alto de referencia del header compacto (usado como min-height) */ /* Anchos de contenido semánticos — por tipo de pantalla, no por panel. Ver IDENTIDAD_VISUAL_CURRICULABS.md, "Sistema de anchos de contenido". */ --width-content-narrow: 46rem; /* 736px — perfiles, login, registro, formularios simples (Mi Perfil) */ --width-content-medium: 64rem; /* 1024px — paneles administrativos comunes (tabs + tablas moderadas) */ --width-content-wide: 90rem; /* 1440px — horarios, planillas, grillas grandes, Base de Datos */ }