/* ============================================================
   TecNM — Design System
   Manual de Identidad Gráfica TecNM 2025 (Pantone 294 C #1B396A,
   Cool Gray 10 #807E82, tipografía Noto Sans).
   Referencia visual: proyecto Stitch "TecNM Management Dashboard"
   (Institutional Minimalism — Linear/Notion-inspired).
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --tecnm-blue:        #1B396A;   /* Pantone 294C — primary action */
  --tecnm-blue-dark:   #152D56;   /* hover dark */
  --tecnm-blue-deep:   #002351;   /* headings on light */
  --tecnm-blue-soft:   #2A4678;   /* gradients / secondary tone */
  --tecnm-blue-tint:   #ACC7FF;   /* highlights on dark */
  --tecnm-gold:        #C8A951;   /* accent (uso puntual) */
  --tecnm-gray:        #807E82;   /* Pantone Cool Gray 10C */

  /* ── Surfaces ──────────────────────────────────────────── */
  --bg-page:           #FAF9FE;   /* cool white background */
  --bg-card:           #FFFFFF;
  --bg-soft:           #F8FAFC;   /* slate-50 hovers / zebra */
  --bg-zebra:          #F1F5F9;   /* slate-100 dividers / pill tracks */
  --bg-dark:           #1B396A;   /* sidebar */

  /* ── Borders ───────────────────────────────────────────── */
  --border:            #E2E8F0;   /* slate-200 — main border */
  --border-soft:       #F1F5F9;   /* slate-100 — internal dividers */
  --border-strong:     #CBD5E1;   /* slate-300 — focus / hover accent */

  /* ── Text ──────────────────────────────────────────────── */
  --ink:               #0F172A;   /* slate-900 — fuerte */
  --ink-2:             #1E293B;   /* slate-800 — títulos secundarios */
  --ink-soft:          #475569;   /* slate-600 — body */
  --ink-muted:         #64748B;   /* slate-500 — secundario */
  --ink-ghost:         #94A3B8;   /* slate-400 — labels / placeholders */

  /* ── Semánticos ────────────────────────────────────────── */
  --success-bg:        #DCFCE7;
  --success-bg-soft:   #F0FDF4;
  --success-fg:        #15803D;
  --success-dot:       #16A34A;

  --warning-bg:        #FEF3C7;
  --warning-bg-soft:   #FFFBEB;
  --warning-fg:        #92400E;
  --warning-dot:       #F59E0B;

  --danger-bg:         #FEE2E2;
  --danger-bg-soft:    #FEF2F2;
  --danger-fg:         #991B1B;
  --danger-dot:        #DC2626;

  --info-bg:           #DBEAFE;
  --info-bg-soft:      #EFF6FF;
  --info-fg:           #1D4ED8;
  --info-dot:          #3B82F6;

  /* ── Spacing (base 4) ──────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Radii ─────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* ── Elevation (sutil, ínstitucional) ──────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --ring-focus: 0 0 0 3px rgba(27, 57, 106, .18);

  /* ── Motion ────────────────────────────────────────────── */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;

  /* ── Type scale ────────────────────────────────────────── */
  --fs-h1:    32px;
  --fs-h2:    24px;
  --fs-h3:    20px;
  --fs-h4:    16px;
  --fs-body:  14px;
  --fs-sm:    13px;
  --fs-xs:    12px;
  --fs-2xs:   11px;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
}


/* ============================================================
   ── Modo oscuro (Minimalismo Institucional — Estilo Linear) ──
   ============================================================ */
[data-theme="dark"] {
  /* ── Brand Adaptations ──────────────────────────────────── */
  /* En modo oscuro, el azul oscuro institucional pasa a ser un color de soporte o fondo, 
     y usamos el tinte claro para las acciones principales para asegurar contraste */
  --tecnm-blue:       #ACC7FF;   /* Usamos el tint original para que brille como primario */
  --tecnm-blue-dark:  #C2D7FF;   /* Hover ligeramente más claro */
  --tecnm-blue-deep:  #FFFFFF;   /* Headings puros */
  --tecnm-blue-soft:  #1B396A;   /* El azul institucional se vuelve un fondo secundario */
  --tecnm-blue-tint:  #152D56;   /* Fondos de botones secundarios */
  --tecnm-gold:       #D8BF76;   /* Oro ligeramente desaturado para no chillar */
  --tecnm-gray:       #94A3B8;   /* Slate adaptado */

  /* ── Surfaces (Estilo Linear/Notion Dark) ────────────────── */
  --bg-page:          #0B0F19;   /* Slate ultra profundo, excelente contraste con el azul */
  --bg-card:          #131B2E;   /* Un paso más claro para las tarjetas */
  --bg-soft:          #1E293B;   /* Slate-800 para hovers */
  --bg-zebra:         #1E2942;   /* Cebra con un sutil tinte azul */
  --bg-dark:          #0F172A;   /* Fondos colapsados */

  /* ── Borders (Sutiles y profesionales) ──────────────────── */
  /* Usamos bordes basados en opacidad o grises azulados muy oscuros */
  --border:            rgba(255, 255, 255, 0.08); /* Sutil, emula a Linear */
  --border-soft:       rgba(255, 255, 255, 0.04);
  --border-strong:     rgba(255, 255, 255, 0.16); /* Para estados de focus */

  /* ── Text (Jerarquía de opacidades) ─────────────────────── */
  --ink:               #F8FAFC;   /* slate-50 (Blanco suave, descansa la vista) */
  --ink-2:             #E2E8F0;   /* slate-200 */
  --ink-soft:          #94A3B8;   /* slate-400 */
  --ink-muted:         #64748B;   /* slate-500 */
  --ink-ghost:         #475569;   /* slate-600 */

  /* ── Semánticos (Versión Dark: Fondo oscuro + Texto vibrante) ── */
  --success-bg:        rgba(22, 163, 74, 0.15);
  --success-bg-soft:   rgba(22, 163, 74, 0.08);
  --success-fg:        #4ADE80;
  --success-dot:       #22C55E;

  --warning-bg:        rgba(217, 119, 6, 0.15);
  --warning-bg-soft:   rgba(217, 119, 6, 0.08);
  --warning-fg:        #FBBF24;
  --warning-dot:       #F59E0B;

  --danger-bg:         rgba(220, 38, 38, 0.15);
  --danger-bg-soft:    rgba(220, 38, 38, 0.08);
  --danger-fg:         #FCA5A5;
  --danger-dot:        #EF4444;

  --info-bg:           rgba(37, 99, 235, 0.15);
  --info-bg-soft:      rgba(37, 99, 235, 0.08);
  --info-fg:           #93C5FD;
  --info-dot:          #3B82F6;

  /* ── Componentes específicos: Sidebar ───────────────────── */
  /* Al mantener tu sidebar con el azul #1B396A original, estos tonos 
     garantizan que los elementos interactivos internos se vean limpios */
  --sidebar-bg:        #1B396A;   
  --sidebar-hover:     rgba(255, 255, 255, 0.08);  
  --sidebar-active:    rgba(255, 255, 255, 0.12);  

  /* ── Elevation & Focus (Ajustados para oscuridad) ───────── */
  --shadow-xs:         0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm:         0 2px 4px rgba(0, 0, 0, .4);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, .5);
  --shadow-lg:         0 12px 32px rgba(0, 0, 0, .6);
  --ring-focus:        0 0 0 3px rgba(172, 199, 255, 0.25);
}

/* ============================================================
   ── Adaptación de la Sidebar al Modo Oscuro ──
   ============================================================ */

/* 1. Contenedor principal de la Sidebar */
[data-theme="dark"] .sidebar, 
[data-theme="dark"] aside, 
[data-theme="dark"] .bg-dark {
    background-color: var(--bg-card) !important; 
    border-right: 1px solid var(--border) !important;
}

/* 2. Enlaces y opciones de navegación (Estado base) */
[data-theme="dark"] .sidebar a, 
[data-theme="dark"] .sidebar .nav-link,
[data-theme="dark"] .sidebar .nav-item {
    color: var(--ink-soft) !important;
}

/* 3. Comportamiento al pasar el mouse (Hover) */
[data-theme="dark"] .sidebar a:hover, 
[data-theme="dark"] .sidebar .nav-link:hover,
[data-theme="dark"] .sidebar .nav-item:hover {
    background-color: var(--bg-soft) !important;
    color: var(--ink) !important; 
}

/* 4. Elemento de navegación actualmente activo (Página actual) */
[data-theme="dark"] .sidebar a.active, 
[data-theme="dark"] .sidebar .nav-link.active,
[data-theme="dark"] .sidebar .nav-item.active,
[data-theme="dark"] .sidebar [class*="active"] {
    background-color: var(--bg-zebra) !important;
    color: var(--ink) !important;
}

/* ============================================================
   ── Overrides Estructurales del Contenido General ──
   ============================================================ */

/* Asegura el fondo de la aplicación y el color base del texto */
[data-theme="dark"] body {
    background-color: var(--bg-page) !important;
    color: var(--ink) !important;
}

/* Captura contenedores del dashboard para evitar zonas blancas */
[data-theme="dark"] .main-content,
[data-theme="dark"] #wrapper,
[data-theme="dark"] main,
[data-theme="dark"] .container-fluid {
    background-color: var(--bg-page) !important;
}

/* Títulos principales en alto contraste */
[data-theme="dark"] .t-h1, 
[data-theme="dark"] .page-header__title,
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3,
[data-theme="dark"] .main-header h2 {
    color: var(--ink) !important;
}

/* Párrafos y textos descriptivos secundarios */
[data-theme="dark"] .t-body,
[data-theme="dark"] p,
[data-theme="dark"] .main-header .subtitle {
    color: var(--ink-soft) !important;
}

/* ============================================================
   ── Parches: Componentes Especiales ──
   ============================================================ */

/* 1. Mapeo para Ranking y Validar Cards */
[data-theme="dark"] .ranking-card,
[data-theme="dark"] .validar-card,
[data-theme="dark"] .import-grid .card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--ink) !important;
}

/* Títulos internos de estas tarjetas */
[data-theme="dark"] .ranking-title,
[data-theme="dark"] .validar-titulo,
[data-theme="dark"] .card-header {
    color: var(--ink) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

/* 2. Navegación por Pestañas (Tabs de Validación) */
[data-theme="dark"] .tab-nav {
    background-color: var(--bg-dark) !important;
    border: 1px solid var(--border) !important;
    padding: 4px;
    border-radius: 8px;
}

[data-theme="dark"] .tab-btn {
    background: transparent !important;
    color: var(--ink-muted) !important;
    border: none !important;
}

[data-theme="dark"] .tab-btn:hover {
    color: var(--ink) !important;
    background-color: var(--bg-soft) !important;
}

/* Pestaña activa (La seleccionada) */
[data-theme="dark"] .tab-btn.active {
    background-color: var(--bg-zebra) !important;
    color: var(--ink) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Formularios, Labels e Inputs dentro de las tarjetas */
[data-theme="dark"] .form-group label,
[data-theme="dark"] label {
    color: var(--ink-soft) !important;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input:not([type="submit"]):not([type="button"]) {
    background-color: var(--bg-dark) !important;
    color: var(--ink) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="dark"] input:focus {
    border-color: var(--tecnm-blue-dark) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* ============================================================
   ── Demolición de Estilos en Línea e Inputs Especiales ──
   ============================================================ */

/* 1. Capturar contenedores con fondos fijos in-line (#fff) */
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #fff"],
html[data-theme="dark"] div[style*="background-color:#ffffff"] {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}

/* 2. Capturar textos descriptivos in-line (#64748b y #475569) */
html[data-theme="dark"] div[style*="color:#64748b"],
html[data-theme="dark"] div[style*="color: #64748b"],
html[data-theme="dark"] label[style*="color: #475569"],
html[data-theme="dark"] label[style*="color:#475569"],
html[data-theme="dark"] .vincular-container label {
    color: var(--ink-soft) !important;
}

/* 3. Asegurar la estructura de .import-grid y .vincular-container */
html[data-theme="dark"] .import-grid .card,
html[data-theme="dark"] .vincular-container .search-section {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--ink) !important;
}

/* 4. Asegurar encabezados de tarjetas de carga */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-header h3 {
    color: var(--ink) !important;
    border-bottom-color: var(--border-soft) !important;
}

html[data-theme="dark"] .card-header p {
    color: var(--ink-muted) !important;
}

/* Envoltorio del input de búsqueda en vinculación */
html[data-theme="dark"] .search-input-wrapper input {
    background-color: var(--bg-dark) !important;
    color: var(--ink) !important;
    border: 1px solid var(--border) !important;
}

/* ============================================================
   ── Corrección de Historial de Inasistencias (Ranking) ──
   ============================================================ */

/* 1. Botones de Filtro de Tiempo (Píldoras de arriba) */
html[data-theme="dark"] .ranking-card + div button,
html[data-theme="dark"] button[class*="active"], 
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] div[style*="background:#fff"] button,
html[data-theme="dark"] div[style*="background: #fff"] button {
    background-color: var(--bg-card) !important;
    color: var(--ink-soft) !important;
    border-color: var(--border) !important;
}

/* Forzar el botón que está seleccionado activamente */
html[data-theme="dark"] button:has(span), 
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] button[style*="background"] {
    /* Si tienes una clase específica para el botón activo (como el azul oscuro), la mapeamos aquí */
}

/* 2. Tarjetas de Estadísticas Rápidas (Los recuadros de los números grandes 2 y 1) */
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #fff"],
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] div:has(> h1):has(> p) {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--ink) !important;
}

/* 3. Encabezado e hilos de la Tabla de Ranking */
html[data-theme="dark"] .errores-table thead,
html[data-theme="dark"] table thead,
html[data-theme="dark"] tr[style*="background"] {
    background-color: var(--bg-zebra) !important;
}

html[data-theme="dark"] table th {
    background-color: var(--bg-zebra) !important;
    color: var(--ink-muted) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* 4. Visibilidad de Textos Críticos (Nombres de alumnos e info secundaria) */
html[data-theme="dark"] table td,
html[data-theme="dark"] table td *,
html[data-theme="dark"] .ranking-card td {
    color: var(--ink-soft) !important;
}

/* Resaltar el nombre principal del alumno para que no se pierda */
html[data-theme="dark"] table td strong,
html[data-theme="dark"] table td span[style*="color"] {
    color: var(--ink) !important;
}

/* ============================================================
   TIPOGRAFÍA
   Noto Sans declarado en base.html. Estas clases consolidan
   los niveles del manual TecNM + Stitch reference.
   ============================================================ */
.t-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--tecnm-blue-deep);
}
.t-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--tecnm-blue);
}
.t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--ink-2);
}
.t-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--ink-2);
}
.t-body    { font-size: var(--fs-body); line-height: 1.5; color: var(--ink-soft); }
.t-body-lg { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.t-label   { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--tecnm-blue); }
.t-caption { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-muted); line-height: 1.4; }
.t-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}
.muted { color: var(--ink-muted); }
.ghost { color: var(--ink-ghost); }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.page-header__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--tecnm-blue-deep);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}
.page-header__subtitle {
  font-size: var(--fs-body);
  color: var(--ink-muted);
  margin: 4px 0 0;
}
.page-header__actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card--pad     { padding: var(--sp-6); }
.card--pad-lg  { padding: var(--sp-8); }
.card__header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--tecnm-blue);
  margin: 0;
}
.card__body   { padding: var(--sp-6); }
.card__footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* ============================================================
   STAT CARD — dos variantes
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.stat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.stat-card__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stat-card__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}
.stat-card__value {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--tecnm-blue-deep);
  line-height: 1;
}
.stat-card__hint {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--success-bg-soft);
  color: var(--success-fg);
}

/* Variante featured: icono circular a la derecha */
.stat-card--featured {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6);
}
.stat-card__icon-circle {
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: var(--info-bg-soft);
  color: var(--tecnm-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   FILTER BAR + TAB PILLS
   ============================================================ */
.filter-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.filter-bar__group {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.filter-bar__actions { display: flex; gap: var(--sp-2); }

.tab-pills {
  display: inline-flex;
  background: var(--bg-zebra);
  padding: 4px;
  border-radius: var(--r-md);
  gap: 2px;
}
.tab-pill {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.tab-pill:hover { color: var(--tecnm-blue); }
.tab-pill.is-active {
  background: var(--bg-card);
  color: var(--tecnm-blue);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.field--icon .input,
.field--icon .select { padding-left: 38px; }
.field__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-ghost);
  pointer-events: none;
  display: inline-flex;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-ghost); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--tecnm-blue);
  box-shadow: var(--ring-focus);
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Estilo "soft" (lo usa Stitch en topbar/search) */
.input--soft {
  background: var(--bg-zebra);
  border-color: transparent;
}
.input--soft:focus { background: var(--bg-card); border-color: var(--tecnm-blue); }

/* ============================================================
   BOTONES
   (Estos estilos coexisten con los .btn de base.html. Cuando
    los templates carguen tecnm.css y eliminen su CSS inline,
    estos quedan como única fuente de verdad.)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--tecnm-blue);
  color: #fff;
  border-color: var(--tecnm-blue);
  box-shadow: 0 1px 2px rgba(27, 57, 106, .35);
}
.btn-primary:hover { background: var(--tecnm-blue-dark); border-color: var(--tecnm-blue-dark); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--ink-soft);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-soft);
  color: var(--tecnm-blue);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-soft); color: var(--tecnm-blue); }

.btn-danger {
  background: var(--danger-dot);
  color: #fff;
  border-color: var(--danger-dot);
}
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }

.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }

.btn-icon {
  /* Self-sufficient: works as <a>, <button>, or <span> sin requerir .btn */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-muted);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-icon:hover {
  background: var(--bg-soft);
  color: var(--tecnm-blue);
  border-color: var(--border-strong);
}
/* Hover destructivo sin fondo tintado por defecto */
.btn-icon--danger:hover {
  background: var(--danger-bg);
  border-color: #FCA5A5;
  color: var(--danger-dot);
}
/* Variantes tintadas siempre (para acciones contextuales en listas) */
.btn-icon--success    { background: var(--success-bg-soft); border-color: #BBF7D0; color: var(--success-fg); }
.btn-icon--success:hover    { background: var(--success-bg); }
.btn-icon--warning    { background: var(--warning-bg-soft); border-color: #FDE68A; color: var(--warning-fg); }
.btn-icon--warning:hover    { background: var(--warning-bg); }
.btn-icon--info       { background: var(--info-bg-soft);    border-color: #BFDBFE; color: var(--info-fg); }
.btn-icon--info:hover       { background: var(--info-bg); }
.btn-icon--danger-on  { background: var(--danger-bg-soft);  border-color: #FECACA; color: var(--danger-dot); }
.btn-icon--danger-on:hover  { background: var(--danger-bg); }
/* Gold: acción "diseño/edición avanzada" (manual TecNM color secundario) */
.btn-icon--gold       { background: var(--tecnm-gold);     border-color: var(--tecnm-gold); color: #fff; }
.btn-icon--gold:hover { background: #B89542;               border-color: #B89542; }

/* Sobre fondos oscuros (hero banners, sidebar) */
.btn-on-dark {
  background: #fff;
  color: var(--tecnm-blue);
  border-color: #fff;
}
.btn-on-dark:hover { background: rgba(255, 255, 255, .92); }
.btn-ghost-on-dark {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
}
.btn-ghost-on-dark:hover { background: rgba(255, 255, 255, .2); }

/* ============================================================
   BADGE / CHIP
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
  flex-shrink: 0;
}
.badge--no-dot::before { display: none; }

.badge--success { background: var(--success-bg);  color: var(--success-fg); }
.badge--warning { background: var(--warning-bg);  color: var(--warning-fg); }
.badge--danger  { background: var(--danger-bg);   color: var(--danger-fg);  }
.badge--info    { background: var(--info-bg);     color: var(--info-fg);    }
.badge--neutral { background: var(--bg-zebra);    color: var(--ink-muted);  }
.badge--brand   { background: rgba(27, 57, 106, .10); color: var(--tecnm-blue); }

/* Type chip — esquinas suaves, baja saturación */
.chip-type {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--bg-zebra);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}

/* ============================================================
   TABLA
   ============================================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table thead tr {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.table th {
  padding: 14px 20px;
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--ink-soft);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--bg-soft); }
.table--zebra tbody tr:nth-child(even) td { background: rgba(248, 250, 252, .6); }

/* Wrapper opcional: habilita scroll horizontal cuando la tabla
   no cabe en su contenedor. En móvil la tabla recibe min-width
   y padding más compacto para activar el scroll cuando el
   viewport es estrecho. */
.table-wrap { overflow-x: auto; }
@media (max-width: 768px) {
  .table { min-width: 760px; }
  .table th,
  .table td { padding: 10px 12px; }
}

/* Modificador opt-in: en móvil la tabla deja de ser tabla y cada fila
   se vuelve una tarjeta apilada (sin scroll horizontal). Requisitos:
   - cada <td> lleva data-label con el nombre de su columna;
   - la celda de acciones lleva class="td-acciones" (omite etiqueta);
   - la fila de estado vacío lleva class="td-vacio" en su <td>. */
@media (max-width: 768px) {
  .table-cards { min-width: 0; }
  .table-cards thead { display: none; }
  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-card);
    padding: 2px 14px;
    margin-bottom: var(--sp-3);
  }
  .table-cards tr:last-child { margin-bottom: 0; }
  .table-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    text-align: right;
    padding: 9px 0;
    border: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .table-cards td:last-child { border-bottom: none; }
  .table-cards td::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
  }
  .table-cards td.td-acciones { justify-content: flex-end; }
  .table-cards td.td-acciones::before { content: none; }
  .table-cards td.td-vacio { justify-content: center; text-align: center; }
  .table-cards td.td-vacio::before { content: none; }
}

/* Avatar/initials chip en celda */
.cell-avatar       { display: flex; align-items: center; gap: 12px; }
.cell-avatar__chip {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  background: var(--info-bg-soft);
  color: var(--tecnm-blue);
}
.cell-avatar__chip--amber  { background: var(--warning-bg-soft); color: var(--warning-fg); }
.cell-avatar__chip--purple { background: #FAF5FF; color: #7E22CE; }
.cell-avatar__chip--rose   { background: #FFF1F2; color: #BE123C; }
.cell-avatar__chip--green  { background: var(--success-bg-soft); color: var(--success-fg); }
.cell-avatar__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); }
.cell-avatar__meta { font-size: var(--fs-2xs); color: var(--ink-muted); margin-top: 2px; }

/* ============================================================
   LIST CARD (eventos / capacitaciones)
   ============================================================ */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-5);
}
.list-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.list-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.list-card__banner {
  position: relative;
  width: 100%;
  height: 160px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-ghost);
  font-size: var(--fs-sm);
  overflow: hidden;
}
.list-card__banner-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}
.list-card__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-card__body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.list-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.list-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--ink-2);
  line-height: 1.3;
  margin: 0;
}
.list-card__desc {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-card__meta { display: flex; flex-direction: column; gap: var(--sp-2); }
.list-card__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.list-card__meta-row svg { color: var(--ink-ghost); flex-shrink: 0; }
.list-card__footer {
  padding: 12px var(--sp-5);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.list-card__actions { display: flex; gap: 6px; align-items: center; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress {
  height: 6px;
  background: var(--bg-zebra);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--tecnm-blue);
  transition: width 1s ease;
}
.progress__fill--success { background: var(--success-dot); }
.progress__fill--warning { background: var(--warning-dot); }
.progress__fill--danger  { background: var(--danger-dot); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: var(--sp-6);
  align-items: center;
  flex-wrap: wrap;
}
.pagination a,
.pagination span,
.pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast);
}
.pagination a:hover {
  background: var(--bg-soft);
  color: var(--tecnm-blue);
  border-color: var(--border-strong);
}
.pagination .current,
.pagination [aria-current="page"] {
  background: var(--tecnm-blue);
  color: #fff;
  border-color: var(--tecnm-blue);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
  color: var(--ink-muted);
}
.empty-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-3);
  color: var(--ink-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--ink-2);
  margin-bottom: 6px;
}
.empty-state p { font-size: var(--fs-body); margin: 0; }

/* ============================================================
   HERO BANNER (contextual)
   ============================================================ */
.hero-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tecnm-blue) 0%, var(--tecnm-blue-soft) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--sp-8);
}
.hero-banner__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-3);
  color: #fff;
}
.hero-banner__text {
  font-size: var(--fs-body);
  line-height: 1.6;
  opacity: .85;
  margin: 0 0 var(--sp-5);
  max-width: 540px;
}
.hero-banner__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.hero-banner__decor {
  position: absolute;
  right: -40px;
  bottom: -40px;
  font-size: 220px;
  opacity: .08;
  pointer-events: none;
  line-height: 1;
}

/* ============================================================
   PROFILE CARD (panel lateral del dashboard)
   ============================================================ */
.profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.profile-card__head {
  text-align: center;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
.profile-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--r-pill);
  margin: 0 auto var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tecnm-blue);
  color: #fff;
  font-size: 24px;
  font-weight: var(--fw-extrabold);
  overflow: hidden;
}
.profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card__name  { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-2); }
.profile-card__email { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; }
.profile-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.profile-card__row:last-child { border-bottom: none; }
.profile-card__key { color: var(--ink-muted); font-weight: var(--fw-semibold); }
.profile-card__val { color: var(--ink-2);     font-weight: var(--fw-semibold); }

/* ============================================================
   SHORTCUT CARDS (accesos rápidos del dashboard)
   ============================================================ */
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.shortcut-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.shortcut-card:hover {
  border-color: var(--tecnm-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.shortcut-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--info-bg-soft);
  color: var(--tecnm-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shortcut-card__name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink-2); }
.shortcut-card__desc { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.5; }

/* ============================================================
   FEED (Actividad reciente / mis-firmas / etc.)
   ============================================================ */
.feed { display: flex; flex-direction: column; }
.feed__row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-fast);
}
.feed__row:last-child { border-bottom: none; }
.feed__row:hover { background: var(--bg-soft); }
.feed__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--info-bg-soft);
  color: var(--tecnm-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feed__icon--success { background: var(--success-bg-soft); color: var(--success-fg); }
.feed__icon--warning { background: var(--warning-bg-soft); color: var(--warning-fg); }
.feed__icon--neutral { background: var(--bg-zebra);       color: var(--ink-muted);  }
.feed__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); }
.feed__desc  { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; line-height: 1.5; }
.feed__time  { font-size: var(--fs-2xs); color: var(--ink-ghost); margin-top: 4px; }

/* ============================================================
   ICON UTILITY
   Reemplaza el style="display:inline-block;vertical-align:middle;
   width:1.1em;height:1.1em;flex-shrink:0" repetido en 30+ lugares.
   ============================================================ */
.icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* ============================================================
   UTILIDADES MÍNIMAS (sin volverse Tailwind)
   ============================================================ */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row         { display: flex; align-items: center; gap: var(--sp-3); }
.col         { display: flex; flex-direction: column; gap: var(--sp-3); }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }

/* ============================================================
   MAIN-HEADER (slot de acciones)
   Convierte el .main-header de base.html en flex con dos
   columnas: título a la izquierda, acciones a la derecha.
   ============================================================ */
.main-header__title { min-width: 0; flex: 1; }
.main-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .main-header__actions { width: 100%; }
}

/* ============================================================
   FORM LAYOUT
   Para forms con la estructura tradicional Django:
     .form-card > form > .form-group > label + {{ form.field }}
   Los widgets renderizan <input>/<select>/<textarea> sin clase;
   aquí se les da el mismo look que .input por descendencia.

   Para forms grandes con grupos lógicos:
     .form-card > form > .form-section > .form-section__header + .form-group(s)
   ============================================================ */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  max-width: 720px;
}
.form-group { margin-bottom: var(--sp-6); }   /* 24px (de 20) */
.form-group:last-child { margin-bottom: 0; }
.form-group label {
  display: block;
  font-size: var(--fs-xs);                     /* 12px (de 13) */
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);                     /* gris medio (de --ink-2) */
  margin-bottom: 8px;                          /* 8px (de 6) */
  text-transform: uppercase;                   /* NUEVO: uppercase */
  letter-spacing: .05em;                       /* NUEVO */
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="time"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="search"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;                               /* 12px (de 9px 12px) */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-body);                   /* 14px (de 13) */
  color: var(--ink);
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--tecnm-blue);
  box-shadow: var(--ring-focus);
}
.form-group input[type="file"] {
  padding: 8px 12px;
  cursor: pointer;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-group textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}
.form-group .errorlist {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--danger-dot);
  text-transform: none;
  letter-spacing: 0;
}
.form-hint {
  font-size: var(--fs-xs);
  color: var(--ink-ghost);
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
}
.thumb-fondo {
  width: 80px;
  height: 56px;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  margin-top: 6px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);                            /* 24px (de 16) */
  margin-bottom: var(--sp-6);
}
.form-row:last-child { margin-bottom: 0; }
.form-row .form-group { margin-bottom: 0; }    /* el row maneja gap */

/* ── Section: agrupador con icono + título + divider ── */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);                            /* 24px entre elementos internos */
  margin-bottom: var(--sp-10);                 /* 40px entre sections */
}
.form-section:last-of-type { margin-bottom: 0; }
.form-section__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.form-section__icon {
  color: var(--tecnm-blue);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.form-section__title {
  font-size: var(--fs-h3);                     /* 20px */
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0;
}

/* ── Form actions ────────────────────────────────────── */
.form-actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-8);                     /* 32px (de 24) */
  padding-top: var(--sp-8);                    /* 32px (de 20) */
  border-top: 1px solid var(--border);
  justify-content: space-between;              /* DEFAULT: cancelar izq / guardar der */
  align-items: center;
  flex-wrap: wrap;
}
.form-actions--end { justify-content: flex-end; }   /* modificador opcional: ambos der */

/* ── Field upload (drag-and-drop visual) ─────────────── */
.field-upload {
  padding: var(--sp-6);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.field-upload:hover {
  border-color: var(--tecnm-blue);
  background: var(--info-bg-soft);
}
.field-upload__icon {
  color: var(--ink-muted);
  margin-bottom: 8px;
  transition: color var(--t-fast);
}
.field-upload:hover .field-upload__icon { color: var(--tecnm-blue); }
.field-upload__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.field-upload__hint {
  font-size: var(--fs-xs);
  color: var(--ink-ghost);
  margin-top: 4px;
}
.field-upload input[type="file"] { display: none; }

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .form-actions {
    flex-direction: column-reverse;            /* botón primario arriba en mobile */
    align-items: stretch;
  }
  .form-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   APP-TOPBAR (desktop sticky bar above main-content)
   Convive con la .topbar móvil de base.html: ésta solo aparece
   en desktop (>768px); la móvil sigue activa abajo de eso.
   ============================================================ */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 64px;
  padding: 0 var(--sp-8);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

/* Buscador global */
.app-topbar__search {
  position: relative;
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
}
.app-topbar__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-ghost);
  pointer-events: none;
}
.app-topbar__search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  background: var(--bg-zebra);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-family: inherit;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.app-topbar__search input::placeholder { color: var(--ink-ghost); }
.app-topbar__search input:focus {
  outline: none;
  background: var(--bg-card);
  border-color: var(--tecnm-blue);
  box-shadow: var(--ring-focus);
}
.app-topbar__search input:disabled {
  cursor: not-allowed;
  opacity: .8;
}

/* Buscador global — dropdown de resultados */
.busqueda-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}
.busqueda-dropdown[hidden] { display: none; }

.busqueda-dropdown__group + .busqueda-dropdown__group {
  border-top: 1px solid var(--border-soft);
}
.busqueda-dropdown__group-header {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-zebra);
}

.busqueda-dropdown__item {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  border-top: 1px solid var(--border-soft);
  transition: background var(--t-fast);
}
.busqueda-dropdown__item:first-child { border-top: 0; }
.busqueda-dropdown__item:hover,
.busqueda-dropdown__item:focus {
  background: var(--bg-soft);
  outline: none;
}
.busqueda-dropdown__item-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  margin-bottom: 2px;
}
.busqueda-dropdown__item-meta {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.4;
}

.busqueda-dropdown__state {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* Lado derecho */
.app-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Campana de notificaciones */
.app-topbar__bell {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.app-topbar__bell:hover { background: var(--bg-soft); color: var(--tecnm-blue); }
.app-topbar__bell--muted { color: var(--ink-ghost); cursor: default; }
.app-topbar__bell--muted:hover { background: transparent; color: var(--ink-ghost); }
.app-topbar__bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--danger-dot);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-card);
}

/* ── Panel dropdown de notificaciones ─────────────────── */
.app-topbar__bell-wrap { position: relative; }
.app-topbar__bell-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  display: none;
  overflow: hidden;
}
.app-topbar__bell-panel.is-open { display: block; }
.bell-panel__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bell-panel__title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bell-panel__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-2);
}
.bell-panel__count {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--danger-dot);
  background: var(--danger-bg);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  line-height: 1.4;
}
.bell-panel__actions { display: flex; gap: 4px; flex-shrink: 0; }
.bell-action-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.bell-action-btn:hover { background: var(--bg-soft); color: var(--tecnm-blue); border-color: var(--border-strong); }
.bell-action-btn--danger:hover { background: var(--danger-bg); color: var(--danger-dot); border-color: #FCA5A5; }

.bell-panel__list {
  max-height: 480px;
  overflow-y: auto;
}
.bell-item {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-fast);
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--bg-soft); }
.bell-item--unread { background: rgba(27, 57, 106, .04); }
.bell-item--unread:hover { background: rgba(27, 57, 106, .08); }
.bell-item__link {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  padding-right: 8px;
  text-decoration: none;
  min-width: 0;
}
.bell-item__delete {
  flex-shrink: 0;
  width: 28px;
  margin: 8px 8px 8px 0;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--ink-ghost);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bell-item:hover .bell-item__delete { opacity: 1; }
.bell-item__delete:hover { background: var(--danger-bg); color: var(--danger-dot); }
.bell-item__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tecnm-blue);
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.bell-item__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--info-bg-soft);
  color: var(--tecnm-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bell-item__icon--firma                { background: var(--warning-bg-soft); color: var(--warning-fg); }
.bell-item__icon--inscripcion          { background: var(--info-bg-soft);    color: var(--tecnm-blue); }
.bell-item__icon--inscripcion_aceptada { background: var(--success-bg-soft); color: var(--success-fg); }
.bell-item__icon--constancia           { background: var(--success-bg-soft); color: var(--success-fg); }
.bell-item__body { min-width: 0; flex: 1; }
.bell-item__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  line-height: 1.3;
}
.bell-item__desc {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bell-item__time {
  font-size: 10px;
  color: var(--ink-ghost);
  margin-top: 4px;
}
.bell-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-muted);
}
.bell-empty__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--success-bg-soft);
  color: var(--success-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.bell-empty p { font-size: var(--fs-sm); margin: 0; }
.bell-panel__footer {
  display: block;
  padding: 12px 16px;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--tecnm-blue);
  text-decoration: none;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  transition: background var(--t-fast);
}
.bell-panel__footer:hover { background: var(--info-bg-soft); }

@media (max-width: 480px) {
  .app-topbar__bell-panel {
    position: fixed;
    top: 64px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* Separador vertical */
.app-topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

/* Chip de usuario */
.app-topbar__user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 4px 10px 4px var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--t-fast);
}
.app-topbar__user:hover { background: var(--bg-soft); }
.app-topbar__user-text { text-align: right; line-height: 1.2; max-width: 180px; }
.app-topbar__user-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topbar__user-role {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topbar__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--tecnm-blue);
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.app-topbar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-topbar__chevron { color: var(--ink-ghost); flex-shrink: 0; }

.app-topbar__login {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--tecnm-blue);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.app-topbar__login:hover { background: var(--bg-soft); }

/* En móvil la topbar de escritorio se oculta; queda la móvil de base.html */
@media (max-width: 768px) {
  .app-topbar { display: none; }
}
@media (max-width: 1024px) {
  .app-topbar { padding: 0 var(--sp-5); }
  .app-topbar__user-text { display: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .page-header  { flex-direction: column; align-items: flex-start; }
  .filter-bar   { flex-direction: column; align-items: stretch; }
  .filter-bar__group { width: 100%; }
  .list-grid    { grid-template-columns: 1fr; }
  .stat-grid    { grid-template-columns: repeat(2, 1fr); }
  .shortcut-grid { grid-template-columns: repeat(2, 1fr); }
  .pagination   { gap: 6px; }
  .hero-banner  { padding: var(--sp-6); }
  .hero-banner__decor { font-size: 160px; right: -30px; bottom: -30px; }
}
@media (max-width: 480px) {
  .stat-grid     { grid-template-columns: 1fr; }
  .shortcut-grid { grid-template-columns: 1fr; }
}

/* Callout / banner informativo (variante info) */
.info-callout {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--info-bg-soft);
  border: 1px solid #BFDBFE;
  border-left: 3px solid var(--info-dot);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.info-callout__icon {
  flex-shrink: 0;
  color: var(--info-fg);
  margin-top: 2px;
}
.info-callout__body { flex: 1; min-width: 0; }
.info-callout__title {
  font-weight: var(--fw-semibold);
  color: var(--info-fg);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
}
.info-callout__body p { margin-bottom: var(--sp-2); }
.info-callout__body p:last-child { margin-bottom: 0; }
.info-callout__body strong { font-weight: var(--fw-semibold); color: var(--ink); }

/* Input oculto pero presente en el DOM (no usar display:none que algunos browsers omiten) */
.hidden-input { position: absolute; left: -9999px; }

/* Radio cards — selección visual de opciones mutuamente excluyentes */
.radio-card-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 640px) {
  .radio-card-group { grid-template-columns: 1fr; }
}

.radio-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.radio-card:hover {
  background: var(--bg-soft);
  border-color: var(--border-strong);
}
.radio-card:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-color: var(--tecnm-blue);
}
.radio-card.is-selected {
  border-color: var(--tecnm-blue);
  background: var(--info-bg-soft);
}

.radio-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.radio-card.is-selected .radio-card__icon {
  background: var(--tecnm-blue);
  color: #fff;
}

.radio-card__body { flex: 1; min-width: 0; }
.radio-card__title {
  font-weight: var(--fw-semibold);
  color: var(--ink);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-1);
}
.radio-card__desc {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ============================================================
   ── Animaciones y Microinteracciones ──
   ============================================================ */

/* Efecto de elevación en tarjetas (Eventos, Reportes, etc.) */
.card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

/* En modo oscuro suavizamos la sombra para que no se vea tosca */
[data-theme="dark"] .card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Transición para los iconos del botón de cambio de tema */
#icon-sun, #icon-moon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Clase temporal que inyectaremos con JS para activar el giro */
.rotate-effect {
    transform: rotate(360deg);
}