/* | CSS propio de SysEdu — base y tokens. | | Se carga después de las librerías de public/plugins/ (ver components/plugins/styles.blade.php), | así que puede sobrescribir Bootstrap sin pelear con la especificidad. | | Este archivo SÍ se versiona en git; public/plugins/ NO (se regenera con composer plugins). | | Aquí van solo los tokens y lo transversal. El estilo de cada zona vive en su | propio archivo (auth.css, etc.) y se carga desde el layout que corresponda. */ :root { /* Marca. Un futuro color por institución se resuelve sobrescribiendo --se-accent / --se-accent-2 en el desde el tenant. */ --se-accent: #4f6ef7; --se-accent-2: #22d3ee; --se-accent-3: #7c5cff; /* Fondo institucional (azul profundo). */ --se-navy-900: #060f24; --se-navy-800: #0b1834; --se-navy-700: #12275c; /* Texto sobre fondo oscuro. */ --se-text: #f8fafc; --se-text-soft: #cbd5e1; --se-text-muted: #94a3b8; /* Superficies claras: el área de trabajo del sistema, a diferencia del login, es clara. */ --se-surface: #ffffff; --se-surface-2: #f4f6fb; --se-surface-3: #e9edf7; --se-border: #dfe4ee; --se-border-soft: #eef1f7; /* Texto sobre fondo claro. */ --se-ink: #16203a; --se-ink-soft: #4a5670; --se-ink-muted: #7b869e; /* Estados. Los -strong son las variantes legibles sobre fondo claro; los tonos de arriba están calibrados para el fondo oscuro del login. */ --se-danger: #fb7185; --se-success: #34d399; --se-warning: #fbbf24; --se-danger-strong: #d92d4e; --se-success-strong: #0f8a5f; --se-warning-strong: #b57611; /* Vidrio (glassmorfismo). */ --se-glass-bg: rgba(255, 255, 255, 0.09); --se-glass-bg-strong: rgba(255, 255, 255, 0.14); --se-glass-border: rgba(255, 255, 255, 0.18); --se-glass-blur: 20px; /* Formas y sombras. */ --se-radius-sm: 0.5rem; --se-radius: 0.75rem; --se-radius-lg: 1.5rem; --se-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --se-shadow: 0 6px 20px -8px rgba(16, 24, 40, 0.22); --se-shadow-lg: 0 30px 70px -25px rgba(2, 6, 23, 0.75); --se-ring: 0 0 0 0.25rem rgba(79, 110, 247, 0.3); /* Tipografía: pila del sistema, sin descargas externas. */ --se-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* | ------------------------------------------------------------------ tema | | Capa semántica --se-ui-*: los únicos tokens que CAMBIAN con el tema. | | Los --se-* de arriba son fijos y no se tocan: auth.css depende de sus | valores concretos (el login es siempre oscuro, con su propia identidad). | Todo lo que deba responder a claro/oscuro usa --se-ui-*, nunca --se-*. | | En claro, la mayoría apunta a los --se-* de siempre: el tema claro es el | aspecto de referencia. En oscuro llevan valores propios. | | Bootstrap 5.3 voltea solo sus componentes con data-bs-theme="dark" | (.table, .form-control, .dropdown-menu, .modal, .card, .alert); esta capa | cubre únicamente el chrome propio del sistema. */ :root { color-scheme: light; /* Superficies y texto. */ --se-ui-bg: var(--se-surface-2); --se-ui-surface: var(--se-surface); --se-ui-surface-2: var(--se-surface-2); --se-ui-surface-3: var(--se-surface-3); --se-ui-border: var(--se-border); --se-ui-border-soft: var(--se-border-soft); --se-ui-text: var(--se-ink); --se-ui-text-soft: var(--se-ink-soft); --se-ui-text-muted: var(--se-ink-muted); /* Marca y foco. */ --se-ui-accent: var(--se-accent); --se-ui-accent-soft: rgba(79, 110, 247, 0.1); --se-ui-accent-contrast: #ffffff; --se-ui-ring: 0 0 0 0.2rem rgba(79, 110, 247, 0.25); /* Chrome: heredados del menú lateral, hoy sin uso. */ --se-ui-sidebar-bg: var(--se-surface); --se-ui-sidebar-border: var(--se-border); --se-ui-sidebar-text: var(--se-ink-soft); --se-ui-sidebar-text-soft: var(--se-ink-muted); --se-ui-sidebar-hover-bg: var(--se-surface-2); --se-ui-sidebar-active-bg: var(--se-ui-accent-soft); --se-ui-sidebar-active-text: var(--se-accent); --se-ui-sidebar-section: var(--se-ink-muted); /* Chrome: barra superior. */ --se-ui-topbar-bg: var(--se-surface); --se-ui-topbar-border: var(--se-border); /* Chrome: barra de pestañas. */ --se-ui-tabbar-bg: var(--se-surface); --se-ui-tabbar-border: var(--se-border); --se-ui-tab-bg: transparent; --se-ui-tab-text: var(--se-ink-muted); --se-ui-tab-bg-active: var(--se-surface-2); --se-ui-tab-text-active: var(--se-ink); --se-ui-tab-border: var(--se-border); /* Estados, legibles sobre el fondo del tema. */ --se-ui-danger: var(--se-danger-strong); --se-ui-success: var(--se-success-strong); --se-ui-warning: var(--se-warning-strong); --se-ui-info: var(--se-accent); /* Relieve. */ --se-ui-shadow-sm: var(--se-shadow-sm); --se-ui-shadow: var(--se-shadow); --se-ui-shadow-lg: 0 24px 48px -24px rgba(16, 24, 40, 0.35); } [data-bs-theme="dark"] { color-scheme: dark; --se-ui-bg: #0b1017; --se-ui-surface: #121821; --se-ui-surface-2: #1a212c; --se-ui-surface-3: #232c39; --se-ui-border: #2a3340; --se-ui-border-soft: #212a35; --se-ui-text: #e8ecf3; --se-ui-text-soft: #a7b1c0; --se-ui-text-muted: #7c8797; /* El acento se aclara: el azul de marca no contrasta sobre fondo oscuro. */ --se-ui-accent: #7f97ff; --se-ui-accent-soft: rgba(127, 151, 255, 0.16); --se-ui-accent-contrast: #0b1017; --se-ui-ring: 0 0 0 0.2rem rgba(127, 151, 255, 0.3); --se-ui-sidebar-bg: #0e141c; --se-ui-sidebar-border: #1e2631; --se-ui-sidebar-text: #a7b1c0; --se-ui-sidebar-text-soft: #7c8797; --se-ui-sidebar-hover-bg: rgba(255, 255, 255, 0.05); --se-ui-sidebar-active-bg: var(--se-ui-accent-soft); --se-ui-sidebar-active-text: #a9bcff; --se-ui-sidebar-section: #6b7686; --se-ui-topbar-bg: #0e141c; --se-ui-topbar-border: #1e2631; --se-ui-tabbar-bg: #0e141c; --se-ui-tabbar-border: #1e2631; --se-ui-tab-bg: transparent; --se-ui-tab-text: #7c8797; --se-ui-tab-bg-active: #1a212c; --se-ui-tab-text-active: #e8ecf3; --se-ui-tab-border: #2a3340; --se-ui-danger: #f87f92; --se-ui-success: #4ade9f; --se-ui-warning: #fbbf24; --se-ui-info: #7f97ff; --se-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --se-ui-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6); --se-ui-shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.8); } body { font-family: var(--se-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* | ----------------------------------------------------------- transversal | | Lo que aparece en los DOS documentos del workspace (el shell de afuera y la | pantalla de cada pestaña) vive acá, para no duplicarlo en workspace.css y | app-shell.css. */ .app-alert { border: 1px solid transparent; border-radius: var(--se-radius); } /* Los