/* SGA FAUM — generated from tokens.json */
:root, [data-theme="claro"] {
  --azul: #298bc0; /* Azul institucional. Rellenos de identidad, iconos grandes, gráficas, bordes activos e indicadores. 3.78:1 sobre blanco: NO se usa para texto menor a 24 px ni como fondo de texto blanco pequeño. */
  --azul-oscuro: #1f6f9b; /* Botón primario, enlaces, texto de énfasis y pestaña activa. 5.52:1 sobre `superficie`, 4.92:1 sobre `fondo`, 4.95:1 sobre `azul-tenue`. Texto blanco encima: 5.52:1. */
  --azul-profundo: #185a7e; /* Hover y estado presionado del botón primario; banda de identidad del acceso. Blanco encima: 7.49:1. */
  --azul-tenue: #eaf4fa; /* Fondo de elementos seleccionados, chip de contexto, fila de «Hoy» y botón secundario suave. Texto encima en `azul-oscuro` o `texto`. */
  --azul-logo: #00457c; /* Tinta del logotipo FAUM a color. Solo para el logotipo azul sobre blanco; no se usa en la interfaz. */
  --gris-institucional: #293241; /* Menú lateral, encabezado de escritorio y fondo del logotipo blanco. Blanco encima: 12.91:1. */
  --gris-institucional-2: #343f52; /* Elemento activo o en hover dentro de `gris-institucional`; separadores del menú lateral. */
  --fondo: #f0f2f5; /* Fondo general de la aplicación, detrás de las tarjetas. */
  --superficie: #ffffff; /* Tarjetas, paneles, campos, barra superior móvil y navegación inferior. */
  --texto: #111827; /* Texto principal sobre `superficie` (17.7:1) y `fondo` (15.8:1). */
  --texto-secundario: #6b7280; /* Texto de apoyo sobre `superficie` (4.83:1). Sobre `fondo` usa `texto-secundario-fondo`. */
  --texto-secundario-fondo: #5b6472; /* Texto de apoyo directamente sobre `fondo` (5.33:1), donde #6B7280 queda en 4.31:1. */
  --texto-sobre-oscuro: #ffffff; /* Texto e iconos sobre `gris-institucional`, `azul-oscuro` y `azul-profundo`. */
  --texto-sobre-oscuro-2: #b8c1cf; /* Texto secundario y títulos de sección sobre `gris-institucional` (7.11:1). */
  --borde: #e5e7eb; /* Divisores y contorno de tarjetas (decorativo; la tarjeta se distingue también por su fondo blanco sobre `fondo`). */
  --borde-control: #8a94a3; /* Contorno de campos, casillas y botones secundarios: 3.07:1 sobre `superficie`, cumple el mínimo 3:1 para controles. */
  --exito: #198754; /* Relleno e icono de «Asistencia registrada» / confirmaciones. Texto sobre blanco 4.53:1; sobre `exito-tenue` usa `exito-texto`. */
  --exito-texto: #146c43; /* Texto de éxito sobre `exito-tenue` (5.75:1). */
  --exito-tenue: #e8f5ee; /* Fondo de insignias y avisos de éxito. */
  --advertencia: #d97706; /* Iconos, barras y bordes de advertencia (retardo, pendiente). 3.19:1: nunca como color de texto pequeño. */
  --advertencia-texto: #b45309; /* Texto de advertencia sobre `superficie` (5.02:1) y `advertencia-tenue` (4.58:1). */
  --advertencia-tenue: #fef3e2; /* Fondo de insignias y avisos de advertencia. */
  --error: #dc3545; /* Iconos, bordes de campo inválido y barras de falta. Texto sobre blanco 4.53:1 solo a 14 px o más. */
  --error-texto: #b42332; /* Mensajes de error de campo y texto de insignia «Falta» (6.51:1 sobre blanco, 5.65:1 sobre `error-tenue`). */
  --error-tenue: #fcebed; /* Fondo de avisos de error e insignia «Falta». */
  --foco: #1f6f9b; /* Anillo de foco sólido de 2 px con separación de 2 px en `superficie`; 5.5:1 sobre blanco, 4.9:1 sobre `fondo`. */
  --foco-sobre-oscuro: #8cc8e8; /* Anillo de foco sobre `gris-institucional` y `azul-profundo` (7.09:1). */
  --velo: rgba(17,24,39,0.48); /* Capa detrás del menú lateral y los paneles inferiores. */
  --sombra-1: 0 1px 2px rgba(17,24,39,0.06), 0 1px 3px rgba(17,24,39,0.08); /* Tarjetas en reposo. */
  --sombra-2: 0 6px 16px rgba(17,24,39,0.12); /* Menús desplegables, notificaciones flotantes. */
  --sombra-panel: 0 -8px 24px rgba(17,24,39,0.16); /* Paneles inferiores y barra de acción fija. */
}
:root {
  --space-1: 4px; /* Separación entre icono y texto. */
  --space-2: 8px; /* Separación mínima entre acciones táctiles contiguas. */
  --space-3: 12px; /* Padding de tarjetas compactas y chips. */
  --space-4: 16px; /* Margen lateral de pantalla en móvil y padding de tarjeta. */
  --space-5: 20px; /* Separación entre bloques de formulario. */
  --space-6: 24px; /* Margen lateral en tablet; padding de tarjeta en escritorio. */
  --space-8: 32px; /* Margen lateral en escritorio y separación entre secciones. */
  --space-12: 48px; /* Aire del panel de identidad en el acceso de escritorio. */
  --radius-sm: 6px; /* Insignias y chips pequeños. */
  --radius-md: 10px; /* Botones, campos y elementos de lista. */
  --radius-lg: 12px; /* Tarjetas y paneles. */
  --radius-xl: 20px; /* Borde superior de paneles inferiores (bottom sheets). */
  --radius-pill: 999px; /* Chips de filtro, chip de contexto e indicador de «Hoy». */
  --tactil-min: 44px; /* Área táctil mínima de cualquier control (44 × 44 px). */
  --boton-alto: 48px; /* Altura del botón primario en móvil. */
  --barra-superior: 56px; /* Altura de la barra superior móvil (sin contar el área segura). */
  --nav-inferior: 64px; /* Altura de la navegación inferior del profesor (más el área segura inferior). */
  --menu-lateral: 272px; /* Ancho del menú lateral en escritorio y del cajón móvil (máx. 86vw). */
  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-t-display: 700 28px/34px var(--font-sans); /* Saludo del inicio en escritorio y cifras destacadas. */
  --text-t-titulo: 700 22px/28px var(--font-sans); /* Título de pantalla en móvil y de página en escritorio. */
  --text-t-seccion: 600 17px/24px var(--font-sans); /* Encabezado de tarjeta y de sección. */
  --text-t-subtitulo: 600 15px/22px var(--font-sans); /* Nombre de materia en tarjeta, elemento de lista. */
  --text-t-cuerpo: 400 15px/22px var(--font-sans); /* Texto corrido y contenido de tarjetas. */
  --text-t-campo: 400 16px/24px var(--font-sans); /* Texto dentro de campos: mínimo 16 px para que el móvil no haga zoom. */
  --text-t-etiqueta: 600 14px/20px var(--font-sans); /* Etiquetas persistentes de campos y botones. */
  --text-t-apoyo: 400 13px/18px var(--font-sans); /* Metadatos, ayudas de campo y pies. */
  --text-t-mini: 600 12px/16px var(--font-sans); /* Títulos de grupo del menú e insignias. Nunca por debajo de 12 px. */
  --text-t-cifra: 700 28px/32px var(--font-sans); /* Indicadores del dashboard (cifras tabulares). */
}
.t-display {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.t-titulo {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
.t-seccion {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.t-subtitulo {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
}
.t-cuerpo {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.t-campo {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.t-etiqueta {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.t-apoyo {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.t-mini {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.t-cifra {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}