Estilo Marca Sase

La estética debe evocar orden, limpieza y profesionalismo administrativo.

• Fondo Base: bg-slate-50 (Blanco hueso/papel, nunca negro ni azul oscuro gamer).
• Contenedores:
  • Tarjetas blancas (bg-white) con sombras suaves (shadow-sm).
  • Bordes Superiores de Color (border-t-4) para indicar función/estado.
  • Diseño cuadrado o con radio mínimo (rounded-sm o rounded-md), evitando curvas excesivas tipo iOS.
• Tipografía:
  • Títulos: Fuente Sans (Inter/Roboto) en Negritas/Black, Mayúsculas para encabezados (uppercase font-black).
  • Color Texto: text-slate-800 (Gris plomo, nunca negro puro #000).
  • Subtextos: text-slate-500 o text-slate-400.

3. Paleta de Colores por Rol (Semántica Estricta)

El color no es decorativo, es funcional. Indica quién está operando o de qué trata la tarjeta.

4. Narrativa Visual (El Parallax SASE)

La Landing Page no es un anuncio, es una historia de resolución.

1. FASE 1: El Caos (Problema)

   • Visual: Imágenes difusas de fondo (pasillos, escritorios llenos de papeles).
   • Elementos: Globos de texto flotando, desordenados.
   • Contenido: Frases reales de dolor ("¿Quién tiene la bitácora?", "No me avisaron", "Se perdió el reporte").
   • Sensación: Agobio, ruido, desconexión.

2. FASE 2: El Orden (Transición)

   • Visual: Los elementos flotantes se alinean. Las imágenes difusas se aclaran o desaparecen hacia un fondo limpio.
   • Acción: El sistema "toma el control" suavemente.

3. FASE 3: La Conexión (Resolución)

   • Visual: Pantalla limpia, logo SASE centrado.
   • Texto: CONECTAMOS CONTIGO (Solo eso. Limpio).
   • Sensación: Alivio, respaldo, claridad.

5. Componentes UI Autorizados (Checklist)

✅ Permitido (DO)

• Botones sólidos con texto en mayúsculas (font-bold uppercase).
• Iconos Material Symbols (Google Fonts) simples.
• Modales limpios con bordes de color superior.
• Listas de datos densas pero legibles (Tablas estilo Excel limpio).

❌ Prohibido (DON'T)

• Degradados neón o "Cyberpunk".
• Efectos de vidrio excesivos (Glassmorphism saturado).
• Ilustraciones 3D tipo "Startup" (monigotes azules).
• Animaciones de rebote excesivas.

6. Tono de Voz

• Directo: "Registrar Asistencia", no "¡Vamos a pasar lista!".
• Profesional: "Incidencia Reportada", no "Ups, algo salió mal".
• Empático pero Serio: Entendemos la presión escolar, no la trivializamos.

Regla de Oro para el Desarrollador (Antigravity):

"Si el diseño no hace que un docente, prefecto o director se sienta acompañado en un momento real de presión, entonces no es SASE."