estilo-marca-sase

Para que el archivo estilo-marca-sase.md sea el mapa perfecto para Antigravity y garantice que el diseño de la fotografía se traduzca en una herramienta institucional seria (y no en un juguete visual), debemos actualizarlo integrando la transparencia como un valor de claridad administrativa.Aquí tienes la versión 2026 "Liquid Glass" lista para copiar y pegar en la raíz de tu proyecto:🎨 Identidad Oficial SASE (Update 2026: Liquid Glass Edition)MANDATO ABSOLUTO: SASE no es una red social. Es la infraestructura crítica de una escuela. El diseño de "vidrio" simboliza transparencia y enfoque en medio del ruido administrativo.1. El Slogan (LA PROMESA)CONECTAMOS CONTIGO(Sin variantes, sin explicaciones. Solo la promesa de respaldo operativo).2. Estilo Visual: "Liquid Glass Institucional"Evolucionamos del diseño plano a una interfaz de profundidad controlada.Fondo General (The Canvas): * No usar blanco puro ni negro total. Usar bg-slate-950.Mesh Gradient: Nubes de color institucionales (Lavanda/Cian) al 10% de opacidad, animadas a velocidad ultra lenta (60s loop) para dar vida al sistema sin distraer.Contenedores (Glass-SASE):Material: backdrop-blur-[24px] con un tinte bg-white/5 (Modo Claro) o bg-slate-900/40 (Modo Oscuro).Bordes de Identidad: Todas las tarjetas DEBEN conservar el border-t-4 con el color del Rol correspondiente.Efecto de Borde: 1px sólido border-white/10 en los laterales para definir la silueta del "cristal".Tipografía (Legibilidad Matemática):Encabezados: INTER BLACK (900), uppercase, tracking-tighter.Datos de Alumnos: Fuente Mono o Sans con alto contraste. Prohibido usar fuentes "Light" sobre vidrio.3. Matriz de Colores por Rol (Semántica de Estado)El color en el borde superior de la GlassCard dicta la prioridad de la acción.Rol / FunciónColor TailwindPropósito del CristalDocenteblue-500Gestión de flujo y aprendizaje.Prefecturaorange-500Alerta táctica y presencia física.Orientaciónemerald-500Bienestar y diagnóstico emocional.Trabajo Socialpurple-500Contexto externo y legalidad.Direcciónslate-400Visión macro y reportes ejecutivos.Riesgo Críticored-600Intervención inmediata (Semáforo).4. Componentes UI Autorizados (Design Tokens para Antigravity)✅ Permitido (DO)Micro-interacciones: hover:scale-[1.01] con un aumento de brillo (brightness-110).Sombras: shadow-[0_8px_32px_0_rgba(0,0,0,0.3)].Gráficas: Líneas de spline suaves (Liquid Charts) con degradados que nacen del color del rol.Iconos: Lucide React con un drop-shadow sutil del color del rol.❌ Prohibido (DON'T)Efecto Espejo: Nada de reflejos que dificulten leer calificaciones o asistencias.Transparencia 0: El contenido siempre debe ser legible; si el fondo distrae, aumenta el backdrop-blur.Esquinas Redondas Excesivas: Mantener un rounded-xl (12px-16px). Nada de botones circulares tipo "pill" que parezcan redes sociales.5. Tono de Voz y AuditoríaCada pantalla generada por Antigravity debe responder a: ¿Esto ayuda a un profesor de 1° o 2° grado bajo presión?Error: "¡Ups! No encontramos al alumno".SASE: "Registro no localizado. Verifique el CURP o contacte a Control Escolar".