/* =====================================================================
   IMF BASE · ÚNICA HOJA DE ESTILO DE LA SKILL intranet-imf-diseno-2
   ---------------------------------------------------------------------
   Esta es la fuente de verdad de color, tamaño, espacio, forma y
   movimiento. Todas las pantallas la usan; ninguna trae su propia hoja.

   Reglas (detalle en reference/hoja-unica.md):
   1. Una sola hoja. Un módulo nuevo NO crea un .css: usa estas clases y
      tokens. Si falta algo, se agrega AQUÍ, para todos.
   2. Ningún color, tamaño de letra, radio, sombra ni duración fuera de
      los tokens de este archivo (nada de hex ni px sueltos en módulos).
   3. Claro por defecto; oscuro con la clase `.dark` en <html>.
   4. Valores copiados de DESIGN.md y de src/index.css (Intranet IMF).
      Si cambia un valor, cambia aquí y en DESIGN.md en el mismo cambio.

   Contenido
   1. Tokens de color (claro y oscuro)
   2. Tokens de tipografía, espacio, forma, sombra y movimiento
   3. Base (html, body, foco, scroll, selección)
   4. Tipografía semántica
   5. Componentes base (botón, tarjeta, campo, insignia de estado, diálogo)
   6. Movimiento (N0–N3) y Reducir movimiento
   7. Puente opcional a Tailwind v4

   COPIA DE PROYECTO · SIGMA (IMF S.A.)
   Copia de base/imf-base.css de la skill. Agregados de SIGMA, todos con tokens:
   · Tema oscuro también con [data-theme-mode="dark"] (atributo de la plantilla Xintra).
   · Tokens --imf-input-border, --imf-fs-marca, --imf-escena-ciclo, --imf-dur-giro.
   · 6c: «Detener animación» deja la pose estática; pestaña oculta = pausa.
   · 6d: Login de SIGMA (panel de marca, escena «Lista de control», formulario).
   · 6e: menú lateral sobre la estructura de la plantilla (.app-sidebar.imf-menu).
   Se carga ANTES de styles.css de la plantilla: lo global de la plantilla manda en
   body y fuentes; el menú usa selectores con más peso para imponer el patrón IMF.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS DE COLOR
   --------------------------------------------------------------------- */
:root {
  /* Marca: dos voces. Azul para acción y navegación; verde para activo y firma. */
  --imf-primary: #084D90;
  --imf-primary-hover: #063E75;
  --imf-primary-dark: #0B2F5B;
  --imf-primary-deep: #081F3A;
  --imf-primary-soft: #EAF2FA;

  --imf-green: #0F8F2F;
  --imf-green-hover: #0C7627;
  --imf-green-alt: #4DA92C;
  --imf-green-soft: #EAF6ED;
  --imf-green-text: #0C7A29;      /* el verde cuando es TEXTO */

  /* Superficies */
  --imf-background: #F4F7FB;
  --imf-background-alt: #EDF3F8;
  --imf-surface: #FFFFFF;
  --imf-surface-raised: #FFFFFF;
  --imf-surface-soft: #F3F7FC;
  --imf-card-hover: rgba(8, 77, 144, 0.035);
  --imf-border: #D9E3EE;
  --imf-input-border: #8796A8;    /* borde de campo: ≥ 3:1 sobre la superficie (SIGMA) */
  --imf-topbar: #FFFFFF;
  --imf-input: var(--imf-surface-soft);

  /* Texto (todos ≥ 4,5:1 sobre las superficies claras) */
  --imf-text: #17324D;
  --imf-text-secondary: #435D75;
  --imf-text-muted: #566B82;
  --imf-placeholder: #5E7389;
  --imf-icon: #66809A;
  --imf-link: var(--imf-primary);
  --imf-on-primary: #FFFFFF;      /* texto sobre fondo --imf-primary */
  --imf-on-danger: #FFFFFF;       /* texto sobre fondo --imf-error */

  /* Estado semántico (color puro, para iconos y bordes) */
  --imf-info: #1686C9;
  --imf-success: #168A45;
  --imf-warning: #D58A12;
  --imf-error: #C83D4B;
  --imf-danger: var(--imf-error);

  /* Estado en insignias: fondo, texto y borde juntos (AA) */
  --imf-ok-bg: #F0F8F2;     --imf-ok-fg: #145A2A;     --imf-ok-bd: #A9D6B5;
  --imf-warn-bg: #FFF8EA;   --imf-warn-fg: #714100;   --imf-warn-bd: #E8C77B;
  --imf-bad-bg: #FFF1F1;    --imf-bad-fg: #8F1D1D;    --imf-bad-bd: #E0A3A3;
  --imf-info-bg: #EFF6FC;   --imf-info-fg: #124F7C;   --imf-info-bd: #B9D3E8;
  --imf-neutral-bg: #F3F5F7; --imf-neutral-fg: #3F4B56; --imf-neutral-bd: #CBD3DA;

  /* Selección y superposiciones */
  --imf-active-bg: rgba(8, 77, 144, 0.08);
  --imf-active-text: var(--imf-primary);
  --imf-active-border: rgba(8, 77, 144, 0.35);
  --imf-modal-overlay: rgba(8, 20, 32, 0.55);
  --imf-tooltip-bg: #081F3A;
  --imf-tooltip-text: #FFFFFF;
  --imf-badge-bg: #EEF2F7;
  --imf-badge-text: #435D75;

  /* Navegación lateral: bloque azul de marca, igual en ambos temas */
  --imf-sidebar-from: #081F3A;
  --imf-sidebar-via: #0B2F5B;
  --imf-sidebar-to: #084D90;
  --imf-sidebar-border: rgba(255, 255, 255, 0.10);
  --imf-sidebar-text: #FFFFFF;
  --imf-sidebar-text-muted: rgba(255, 255, 255, 0.62);
  --imf-sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --imf-sidebar-active-bg: linear-gradient(135deg, rgba(77, 169, 44, 0.24) 0%, rgba(77, 169, 44, 0.09) 100%);
  --imf-sidebar-active-ring: rgba(77, 169, 44, 0.38);
  --imf-sidebar-active-text: #FFFFFF;
  --imf-sidebar-active-icon: #6FE06B;
  --imf-sidebar-group-label: rgba(255, 255, 255, 0.45);
  --imf-sidebar-scroll-thumb: rgba(255, 255, 255, 0.28);

  /* Monitor (Wallboard): fondo propio y cinco canales de datos. Son canales de datos,
     no acentos de marca; se usan siempre con texto o icono. */
  --imf-monitor-bg: #EDF6FD;
  --imf-monitor-surface: #FFFFFF;
  --imf-monitor-text: #102D54;
  --imf-monitor-muted: #526E91;
  --imf-monitor-border: #D7E6F5;
  --imf-canal-azul: #0860D5;
  --imf-canal-naranja: #AF4E08;
  --imf-canal-purpura: #8424CF;
  --imf-canal-verde: #007E5C;
  --imf-canal-rojo: #C6263E;

  /* Documentos imprimibles: valores fijos, iguales en cualquier tema */
  --print-bg: #FFFFFF;
  --print-surface: #FFFFFF;
  --print-text: #17324D;
  --print-text-secondary: #435D75;
  --print-border: #D9E3EE;
  --print-primary: #084D90;
  --print-danger: #C83D4B;
  --print-success: #168A45;
}

[data-theme-mode="dark"],
.dark {
  --imf-background: #071522;
  --imf-background-alt: #0B1E30;
  --imf-surface: #102536;
  --imf-surface-raised: #173247;
  --imf-surface-soft: #1B3A50;
  --imf-card-hover: rgba(94, 166, 232, 0.06);
  --imf-border: rgba(220, 235, 247, 0.16);
  --imf-input-border: #5B7891;
  --imf-topbar: #0C2032;
  --imf-input: #16324A;

  --imf-primary: #5EA6E8;
  --imf-primary-hover: #74B4EF;
  --imf-primary-dark: #86BEF2;
  --imf-primary-deep: #0B1E30;
  --imf-primary-soft: rgba(94, 166, 232, 0.15);

  --imf-green: #75CC65;
  --imf-green-hover: #86D778;
  --imf-green-alt: #75CC65;
  --imf-green-soft: rgba(117, 204, 101, 0.15);
  --imf-green-text: #75CC65;

  --imf-text: #F4F8FB;
  --imf-text-secondary: #C6D4DF;
  --imf-text-muted: #9FB2C2;
  --imf-placeholder: #92A9BD;
  --imf-icon: #9FB2C2;
  --imf-on-primary: #081F3A;      /* en oscuro el azul es claro: el texto va oscuro */

  --imf-info: #5EA6E8;
  --imf-success: #75CC65;
  --imf-warning: #E0A028;
  --imf-error: #E66B78;

  --imf-ok-bg: rgba(22, 138, 69, 0.20);   --imf-ok-fg: #75CC65;  --imf-ok-bd: rgba(117, 204, 101, 0.35);
  --imf-warn-bg: rgba(213, 138, 18, 0.20); --imf-warn-fg: #F5B842; --imf-warn-bd: rgba(245, 184, 66, 0.35);
  --imf-bad-bg: rgba(200, 61, 75, 0.20);  --imf-bad-fg: #F87171;  --imf-bad-bd: rgba(248, 113, 113, 0.35);
  --imf-info-bg: rgba(14, 134, 201, 0.20); --imf-info-fg: #6BB5FA; --imf-info-bd: rgba(107, 181, 250, 0.35);
  --imf-neutral-bg: rgba(148, 163, 184, 0.15); --imf-neutral-fg: #CBD5E1; --imf-neutral-bd: rgba(203, 213, 225, 0.25);

  --imf-active-bg: rgba(94, 166, 232, 0.14);
  --imf-active-border: rgba(94, 166, 232, 0.40);
  --imf-modal-overlay: rgba(2, 8, 14, 0.70);
  --imf-tooltip-bg: #0B2439;
  --imf-badge-bg: rgba(198, 212, 223, 0.10);
  --imf-badge-text: #C6D4DF;

  --imf-sidebar-from: #061A2E;
  --imf-sidebar-via: #0C3157;
  --imf-sidebar-to: #164B82;
  --imf-sidebar-border: rgba(94, 166, 232, 0.16);
  --imf-sidebar-item-hover: rgba(255, 255, 255, 0.07);
  --imf-sidebar-active-ring: rgba(117, 204, 101, 0.42);

  --imf-monitor-bg: #031326;
  --imf-monitor-surface: #081C33;
  --imf-monitor-text: #EEF5FF;
  --imf-monitor-muted: #A7C2E6;
  --imf-monitor-border: #1A3C61;
  --imf-canal-azul: #36BAFF;
  --imf-canal-naranja: #FFAF54;
  --imf-canal-purpura: #C793FF;
  --imf-canal-verde: #16E0AE;
  --imf-canal-rojo: #FF7385;
}

/* ---------------------------------------------------------------------
   2. TOKENS DE TIPOGRAFÍA, ESPACIO, FORMA, SOMBRA Y MOVIMIENTO
   --------------------------------------------------------------------- */
:root {
  /* Familias */
  --imf-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --imf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Escala de tamaños. Es la ÚNICA: no existen 12,5 / 13,5 / 14,5 px.
     El piso de la interfaz es 12 px. */
  --imf-fs-label: 12px;                          /* etiquetas, insignias, cabeceras de tabla */
  --imf-fs-mono: 13px;                           /* folios, códigos, series */
  --imf-fs-body: 14px;                           /* texto de formularios y tablas */
  --imf-fs-lead: 16px;                           /* texto de apoyo destacado */
  --imf-fs-title: 18px;                          /* título de tarjeta o sección */
  --imf-fs-heading: clamp(24px, 2.3vw, 38px);    /* título de pantalla */
  --imf-fs-display: clamp(32px, 3vw, 48px);      /* cifras KPI y Wallboard */
  --imf-fs-marca: clamp(56px, 6.4vw, 104px);     /* wordmark del producto en el panel de marca del Login (SIGMA) */

  --imf-lh-body: 1.5;
  --imf-lh-title: 1.3;
  --imf-lh-heading: 1.1;
  --imf-lh-display: 1.2;

  --imf-fw-regular: 400;
  --imf-fw-medium: 500;
  --imf-fw-bold: 700;
  --imf-fw-black: 850;

  /* Espacio: ritmo de 4 px */
  --imf-space-1: 4px;
  --imf-space-2: 8px;
  --imf-space-3: 12px;
  --imf-space-4: 16px;
  --imf-space-5: 20px;
  --imf-space-6: 24px;
  --imf-space-8: 32px;
  --imf-space-10: 40px;

  /* Altura de controles táctiles */
  --imf-control-h: 44px;          /* formularios y acciones primarias */
  --imf-control-h-dense: 34px;    /* zonas densas (Wallboard, filtros) */

  /* Forma */
  --imf-radius-md: 6px;
  --imf-radius-lg: 8px;           /* botones e inputs */
  --imf-radius-xl: 12px;          /* tarjetas */
  --imf-radius-2xl: 16px;         /* diálogos y contenedores grandes */
  --imf-radius-full: 9999px;

  /* Elevación: casi plana en reposo; sube con el estado */
  --imf-shadow-xs: 0 1px 2px 0 rgba(17, 47, 81, 0.05);
  --imf-shadow-sm: 0 1px 3px 0 rgba(17, 47, 81, 0.07), 0 1px 2px -1px rgba(17, 47, 81, 0.05);
  --imf-shadow-card: 0 2px 10px -2px rgba(17, 47, 81, 0.09), 0 1px 3px -1px rgba(17, 47, 81, 0.05);
  --imf-shadow-lift: 0 16px 32px -12px rgba(17, 47, 81, 0.20), 0 4px 12px -4px rgba(17, 47, 81, 0.08);
  --imf-shadow-pop: 0 20px 40px -8px rgba(17, 47, 81, 0.22), 0 8px 16px -4px rgba(17, 47, 81, 0.10);

  /* Movimiento: una curva y una escala de duraciones (ver reference/movimiento.md) */
  --imf-ease-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --imf-ease-color: ease-out;
  --imf-dur-presionar: 90ms;      /* N0 */
  --imf-dur-feedback: 160ms;      /* N0 */
  --imf-dur-superficie: 220ms;    /* N1 */
  --imf-dur-orientacion: 420ms;   /* N2 */
  --imf-dur-entrada: 560ms;       /* N2 */
  --imf-dur-dato: 900ms;          /* N3 */
  --imf-dur-giro: 800ms;          /* indicador de carga (sigue girando con Reducir movimiento) */
  --imf-escena-ciclo: 9s;         /* N4 · historia de la escena del Login de SIGMA */
}

/* ---------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------- */
html {
  font-family: var(--imf-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scrollbar-width: thin;
  scrollbar-color: var(--imf-primary) transparent;
}
body {
  margin: 0;
  background-color: var(--imf-background);
  color: var(--imf-text);
  font-size: var(--imf-fs-body);
  line-height: var(--imf-lh-body);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Foco visible, el mismo en todas las pantallas. Nunca se quita sin reemplazo. */
:focus-visible {
  outline: 2px solid var(--imf-primary);
  outline-offset: 2px;
}
::selection {
  background: var(--imf-primary);
  color: var(--imf-on-primary);
}

/* Barra de scroll: píldora con degradado azul a verde */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--imf-primary) 0%, var(--imf-green) 100%);
  border-radius: var(--imf-radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--imf-primary-hover) 0%, var(--imf-green-hover) 100%);
  background-clip: content-box;
}

/* Barra de acento de marca (login, encabezado del Inicio): solo azul a verde */
.imf-accent-bar {
  background: linear-gradient(90deg, var(--imf-primary) 0%, var(--imf-green-alt) 100%);
}

/* ---------------------------------------------------------------------
   4. TIPOGRAFÍA SEMÁNTICA
   Un módulo elige un rol; no elige un tamaño.
   --------------------------------------------------------------------- */
.imf-t-display {
  font-size: var(--imf-fs-display);
  font-weight: var(--imf-fw-black);
  line-height: var(--imf-lh-display);
  font-variant-numeric: tabular-nums;
}
.imf-t-heading {
  font-size: var(--imf-fs-heading);
  font-weight: var(--imf-fw-black);
  line-height: var(--imf-lh-heading);
  letter-spacing: -0.035em;
}
.imf-t-title {
  font-size: var(--imf-fs-title);
  font-weight: var(--imf-fw-bold);
  line-height: var(--imf-lh-title);
}
.imf-t-lead {
  font-size: var(--imf-fs-lead);
  line-height: var(--imf-lh-body);
}
.imf-t-body {
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-regular);
  line-height: var(--imf-lh-body);
}
.imf-t-label {
  font-size: var(--imf-fs-label);
  font-weight: var(--imf-fw-bold);
  letter-spacing: 0.02em;
  line-height: var(--imf-lh-title);
}
.imf-t-mono {
  font-family: var(--imf-font-mono);
  font-size: var(--imf-fs-mono);
  font-weight: var(--imf-fw-medium);
}
.imf-t-muted { color: var(--imf-text-muted); }
.imf-t-secondary { color: var(--imf-text-secondary); }
.imf-t-verde { color: var(--imf-green-text); }   /* verde como texto: nunca --imf-green */

/* Lectura larga: 65–75 caracteres por línea */
.imf-lectura { max-width: 72ch; }

/* ---------------------------------------------------------------------
   5. COMPONENTES BASE (medidas de DESIGN.md)
   --------------------------------------------------------------------- */
/* Botón */
.imf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--imf-space-2);
  min-height: var(--imf-control-h);
  padding: var(--imf-space-2) var(--imf-space-5);
  border: 1px solid transparent;
  border-radius: var(--imf-radius-lg);
  font-family: inherit;
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-bold);
  cursor: pointer;
  transition-property: color, background-color, border-color, box-shadow, scale;
  transition-duration: var(--imf-dur-feedback);
  transition-timing-function: var(--imf-ease-color);
}
.imf-btn:active:not(:disabled) { scale: 0.96; transition-duration: 80ms; }
.imf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.imf-btn--denso { min-height: var(--imf-control-h-dense); padding-inline: var(--imf-space-3); font-size: var(--imf-fs-label); }
.imf-btn--primario { background: var(--imf-primary); color: var(--imf-on-primary); }
.imf-btn--primario:hover:not(:disabled) { background: var(--imf-primary-dark); }
.imf-btn--secundario { background: var(--imf-surface); color: var(--imf-text); border-color: var(--imf-border); }
.imf-btn--secundario:hover:not(:disabled) { border-color: var(--imf-primary); color: var(--imf-primary); }
.imf-btn--peligro { background: var(--imf-error); color: var(--imf-on-danger); }

/* Tarjeta */
.imf-card {
  background: var(--imf-surface);
  color: var(--imf-text);
  border: 1px solid var(--imf-border);
  border-radius: var(--imf-radius-xl);
  padding: var(--imf-space-5);
  box-shadow: var(--imf-shadow-card);
}

/* Campo */
.imf-input {
  width: 100%;
  min-height: var(--imf-control-h);
  padding: 10px var(--imf-space-3);
  background: var(--imf-input);
  color: var(--imf-text);
  border: 1px solid var(--imf-border);
  border-radius: var(--imf-radius-lg);
  font-family: inherit;
  font-size: var(--imf-fs-body);
  transition: border-color var(--imf-dur-feedback) var(--imf-ease-color), box-shadow var(--imf-dur-feedback) var(--imf-ease-color);
}
.imf-input::placeholder { color: var(--imf-placeholder); opacity: 1; }
.imf-input:focus {
  border-color: var(--imf-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--imf-primary) 22%, transparent);
}
.imf-input[aria-invalid="true"] { border-color: var(--imf-error); }

/* Insignia de estado. Siempre lleva texto o icono además de color. */
.imf-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--imf-space-1);
  padding: 2px var(--imf-space-2);
  border: 1px solid var(--imf-neutral-bd);
  border-radius: var(--imf-radius-md);
  background: var(--imf-neutral-bg);
  color: var(--imf-neutral-fg);
  font-size: var(--imf-fs-label);
  font-weight: var(--imf-fw-bold);
  line-height: var(--imf-lh-title);
}
.imf-estado--ok,
.badge-status-success, .badge-status-approved, .badge-status-active {
  background: var(--imf-ok-bg); color: var(--imf-ok-fg); border-color: var(--imf-ok-bd);
}
.imf-estado--aviso,
.badge-status-warning, .badge-status-reviewed {
  background: var(--imf-warn-bg); color: var(--imf-warn-fg); border-color: var(--imf-warn-bd);
}
.imf-estado--peligro,
.badge-status-danger, .badge-status-suspended, .badge-status-rejected {
  background: var(--imf-bad-bg); color: var(--imf-bad-fg); border-color: var(--imf-bad-bd);
}
.imf-estado--info,
.badge-status-info, .badge-status-pending, .badge-status-historical {
  background: var(--imf-info-bg); color: var(--imf-info-fg); border-color: var(--imf-info-bd);
}
.imf-estado--neutro,
.badge-status-neutral, .badge-status-inactive {
  background: var(--imf-neutral-bg); color: var(--imf-neutral-fg); border-color: var(--imf-neutral-bd);
}

/* Diálogo: telón + panel. role="dialog", aria-modal="true" y aria-labelledby son obligatorios. */
.imf-telon { position: fixed; inset: 0; background: var(--imf-modal-overlay); }
.imf-dialogo {
  background: var(--imf-surface);
  color: var(--imf-text);
  border: 1px solid var(--imf-border);
  border-radius: var(--imf-radius-2xl);
  padding: var(--imf-space-6);
  box-shadow: var(--imf-shadow-pop);
}

/* ---------------------------------------------------------------------
   6. MOVIMIENTO
   N0 feedback · N1 superficie · N2 orientación · N3 datos
   --------------------------------------------------------------------- */
@keyframes imf-aparecer {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes imf-brillo {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@keyframes imf-crecer {
  from { transform: scaleX(0); }
}
@keyframes imf-rebote-entrada {
  0%   { opacity: 0; transform: translateY(8px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}

/* N0 · Botón que se hunde al presionar (para elementos que no son .imf-btn) */
.imf-presionar {
  transition-property: color, background-color, border-color, box-shadow, scale;
  transition-duration: var(--imf-dur-feedback);
  transition-timing-function: var(--imf-ease-color);
}
.imf-presionar:active:not(:disabled) { scale: 0.96; transition-duration: 80ms; }

/* N1 · Tarjeta interactiva: sube 3 px; icono y flecha reaccionan */
.imf-levitar {
  transition: translate var(--imf-dur-superficie) var(--imf-ease-salida),
              box-shadow var(--imf-dur-superficie) var(--imf-ease-color),
              border-color var(--imf-dur-superficie) var(--imf-ease-color);
}
.imf-levitar:hover {
  translate: 0 -3px;
  box-shadow: var(--imf-shadow-lift);
  border-color: color-mix(in srgb, var(--imf-primary) 35%, var(--imf-border));
}
.imf-levitar:active { translate: 0 -1px; transition-duration: var(--imf-dur-presionar); }
.imf-levitar .imf-icono-vivo {
  transition: scale 260ms var(--imf-ease-salida), rotate 260ms var(--imf-ease-salida);
}
.imf-levitar:hover .imf-icono-vivo { scale: 1.1; rotate: -6deg; }
.imf-levitar .imf-flecha { transition: translate 200ms var(--imf-ease-salida); }
.imf-levitar:hover .imf-flecha { translate: 3px 0; }
.imf-levitar:hover .imf-flecha-diagonal { translate: 2px -2px; }

/* N1 · Celda de calendario */
.imf-dia {
  transition: translate 180ms var(--imf-ease-salida),
              box-shadow 180ms var(--imf-ease-color),
              border-color 180ms var(--imf-ease-color),
              background-color 180ms var(--imf-ease-color);
}
.imf-dia:hover:not(:disabled) { translate: 0 -2px; box-shadow: var(--imf-shadow-card); }

/* N2 · Secciones del módulo en cascada (hijos del módulo). Retraso: 40 ms + 55 ms por sección. */
.imf-pagina > :only-child > *,
.imf-pagina > :not(:only-child) {
  animation: imf-aparecer var(--imf-dur-entrada) var(--imf-ease-salida) backwards;
}
.imf-pagina > :only-child > :nth-child(1), .imf-pagina > :not(:only-child):nth-child(1) { animation-delay: 40ms; }
.imf-pagina > :only-child > :nth-child(2), .imf-pagina > :not(:only-child):nth-child(2) { animation-delay: 95ms; }
.imf-pagina > :only-child > :nth-child(3), .imf-pagina > :not(:only-child):nth-child(3) { animation-delay: 150ms; }
.imf-pagina > :only-child > :nth-child(4), .imf-pagina > :not(:only-child):nth-child(4) { animation-delay: 205ms; }
.imf-pagina > :only-child > :nth-child(5), .imf-pagina > :not(:only-child):nth-child(5) { animation-delay: 260ms; }
.imf-pagina > :only-child > :nth-child(6), .imf-pagina > :not(:only-child):nth-child(6) { animation-delay: 315ms; }
.imf-pagina > :only-child > :nth-child(n+7), .imf-pagina > :not(:only-child):nth-child(n+7) { animation-delay: 360ms; }
/* Elementos fijos (diálogos, avisos) nunca se animan con la página. */
.imf-pagina > :only-child > .fixed,
.imf-pagina > .fixed { animation: none; }

/* N2 · Elementos de una cuadrícula o lista en cascada; cada uno declara --imf-i (0, 1, 2…) */
.imf-cascada > * {
  animation: imf-aparecer 520ms var(--imf-ease-salida) backwards;
  animation-delay: calc(160ms + var(--imf-i, 0) * 60ms);
}

/* N3 · Silueta de carga con brillo */
.imf-esqueleto {
  background-color: var(--imf-surface-soft);
  background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--imf-surface) 85%, transparent) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: imf-brillo 1.4s ease-in-out infinite;
}
.dark .imf-esqueleto {
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
}

/* N3 · Barra de progreso: crece desde la izquierda y se desliza al cambiar */
.imf-barra-progreso {
  transform-origin: left center;
  animation: imf-crecer var(--imf-dur-dato) var(--imf-ease-salida) 300ms backwards;
  transition: width 500ms var(--imf-ease-salida);
}

/* N3 · Icono del estado vacío: rebote suave, una sola vez */
.imf-vacio-icono {
  animation: imf-rebote-entrada 700ms var(--imf-ease-salida) 260ms backwards;
}

/* ---------------------------------------------------------------------
   6b. MENÚ LATERAL (estructura y scroll) — ver reference/menu-lateral.md
   Un solo scroll: el <nav>. Marca, espacio, usuario y pie quedan fijos.
   --------------------------------------------------------------------- */
.imf-menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;                 /* móvil: la barra del navegador no tapa el pie */
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--imf-sidebar-from) 0%, var(--imf-sidebar-via) 55%, var(--imf-sidebar-to) 100%);
  border-right: 1px solid var(--imf-sidebar-border);
  color: var(--imf-sidebar-text);
}
.imf-menu__fijo { flex: none; border-bottom: 1px solid var(--imf-sidebar-border); }
.imf-menu__pie  { flex: none; border-top: 1px solid var(--imf-sidebar-border); }
.imf-menu__nav {
  flex: 1 1 auto;
  min-height: 0;                  /* sin esto un hijo flex no puede hacer scroll */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;   /* el scroll del menú no arrastra la página */
  scrollbar-gutter: stable;       /* los ítems no saltan al aparecer la barra */
  scrollbar-width: thin;
  scrollbar-color: var(--imf-sidebar-scroll-thumb) transparent;
  scroll-padding-block: var(--imf-space-4);
  padding-block: var(--imf-space-4);
  /* Desvanece 16 px arriba y abajo: sugiere que hay más ítems */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--imf-space-4), black calc(100% - var(--imf-space-4)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black var(--imf-space-4), black calc(100% - var(--imf-space-4)), transparent 100%);
}
.imf-menu__nav::-webkit-scrollbar { width: 6px; }
.imf-menu__nav::-webkit-scrollbar-thumb {
  background: var(--imf-sidebar-scroll-thumb);
  border: 0;
  background-clip: border-box;
}
.imf-menu__nav::-webkit-scrollbar-thumb:hover { background: var(--imf-sidebar-text-muted); }
/* Pantallas bajas: el bloque de usuario cede espacio; el pie y la navegación no. */
@media (max-height: 640px) {
  .imf-menu__opcional { display: none; }
}
/* Selección: relleno verde con anillo interior fino (el fondo que viaja con layoutId) */
.imf-sidebar-item-active {
  background: var(--imf-sidebar-active-bg);
  box-shadow: inset 0 0 0 1px var(--imf-sidebar-active-ring);
}

/* ---------------------------------------------------------------------
   6c. ESCENA DEL LOGIN (N4) — primitivas; la composición se propone con
   reference/escena-login.md. Cada escena usa solo estas clases + SVG inline.
   Contenido visible por defecto: con `backwards`, si la animación falla, el trazo queda dibujado.
   --------------------------------------------------------------------- */
.imf-login-marca {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--imf-sidebar-from) 0%, var(--imf-sidebar-via) 58%, var(--imf-sidebar-to) 100%);
  color: var(--imf-sidebar-text);
}
.imf-escena {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Los bordes se desvanecen: nunca queda un plano con opacidad visible en el borde */
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 55%, transparent 100%);
}
/* Capa de color en deriva (sin blur): dos focos, azul y verde de marca */
.imf-escena-aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 36% at 28% 30%, color-mix(in srgb, var(--imf-primary) 55%, transparent), transparent 70%),
    radial-gradient(34% 30% at 74% 68%, color-mix(in srgb, var(--imf-green) 26%, transparent), transparent 70%);
  animation: imf-derivar 42s ease-in-out infinite;
}
/* Trazo que se dibuja. El SVG declara pathLength="1" en cada path. */
.imf-escena-trazo {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: imf-trazo var(--imf-trazo-dur, 2.4s) var(--imf-ease-salida) var(--imf-trazo-ret, 0s) backwards;
}
/* Flotación lenta; --imf-flotar fija la amplitud y --imf-fase desfasa cada icono */
.imf-escena-flotar {
  animation: imf-flotar var(--imf-flotar-dur, 14s) ease-in-out calc(var(--imf-fase, 0) * -3s) infinite;
}
/* Órbita: el contenedor gira despacio y el icono contragira para quedar derecho */
.imf-escena-orbita { animation: imf-orbitar var(--imf-orbita-dur, 90s) linear infinite; }
.imf-escena-orbita > .imf-escena-contragiro { animation: imf-orbitar var(--imf-orbita-dur, 90s) linear infinite reverse; }
/* Anillo de pulso (radar): un anillo que se expande y desaparece */
.imf-escena-pulso {
  transform-box: fill-box;
  transform-origin: center;
  animation: imf-pulso-anillo 6s var(--imf-ease-salida) calc(var(--imf-fase, 0) * -2s) infinite;
}
/* Validación: marca de verificación que aparece con resorte corto, una vez por ciclo */
.imf-escena-validar {
  transform-box: fill-box;
  transform-origin: center;
  animation: imf-validar 700ms var(--imf-ease-salida) calc(var(--imf-fase, 0) * 1s + 1.2s) backwards;
}
/* Barrido de escáner: franja suave que cruza el elemento */
.imf-escena-barrido { animation: imf-barrer 9s ease-in-out infinite; }
/* Control del usuario: «Detener animación» pone data-escena="pausada" en la raíz.
   SIGMA: en vez de congelar a mitad de ciclo, la escena vuelve a su pose estática (igual que
   con Reducir movimiento), para que nunca quede una marca a medio aparecer. */
[data-escena="pausada"] .imf-escena *,
[data-escena="pausada"] .imf-escena { animation: none !important; }
/* Pestaña oculta (visibilitychange): se congela donde va, sin saltos al volver */
[data-escena-oculta] .imf-escena *,
[data-escena-oculta] .imf-escena { animation-play-state: paused !important; }
/* Escáner vertical: franja que baja por la ilustración y desaparece; reposo = invisible */
.imf-escena-escaneo {
  opacity: 0;
  animation: imf-escanear var(--imf-escena-ciclo) linear infinite;
}
/* Validación que se repite en cada ciclo; --imf-validar-ret la sincroniza con el escáner.
   Sin animación queda visible (pose estática: todo validado). */
.imf-escena-validar--ciclo {
  transform-box: fill-box;
  transform-origin: center;
  animation: imf-validar-ciclo var(--imf-escena-ciclo) var(--imf-ease-salida) var(--imf-validar-ret, 0s) infinite backwards;
}

@keyframes imf-trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes imf-flotar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(var(--imf-flotar, 10px) * -1); }
}
@keyframes imf-orbitar { to { rotate: 360deg; } }
@keyframes imf-pulso-anillo {
  0%   { scale: 0.6; opacity: 0.45; }
  100% { scale: 1.7; opacity: 0; }
}
@keyframes imf-validar {
  from { opacity: 0; scale: 0.6; }
  to   { opacity: 1; scale: 1; }
}
@keyframes imf-barrer {
  0%, 100% { translate: -130% 0; }
  50%      { translate: 130% 0; }
}
@keyframes imf-derivar {
  0%, 100% { translate: 0 0; scale: 1; }
  50%      { translate: 3% -2%; scale: 1.08; }
}
@keyframes imf-escanear {
  0%       { translate: 0 0; opacity: 0; }
  6%, 54%  { opacity: 1; }
  62%, 100% { translate: 0 var(--imf-escaneo-recorrido, 0); opacity: 0; }
}
@keyframes imf-validar-ciclo {
  0%        { opacity: 0; scale: 0.6; }
  5%, 70%   { opacity: 1; scale: 1; }
  78%, 100% { opacity: 0; scale: 1; }
}
@keyframes imf-girar { to { rotate: 360deg; } }

/* ---------------------------------------------------------------------
   6d. LOGIN DE SIGMA — panel de marca + formulario (escena «Lista de control»)
   El panel solo lleva logo, wordmark, escena y pie. El formulario no se mueve.
   Menos de 1024 px: el panel es una franja superior estática (logo + wordmark).
   --------------------------------------------------------------------- */
.login {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Panel de marca */
.login-panel {
  order: -1;
  display: flex;
  align-items: center;
  gap: var(--imf-space-4);
  padding: var(--imf-space-5) var(--imf-space-6);
}
.login-marca { display: flex; align-items: center; flex: none; }
.login-marca svg { display: block; height: var(--imf-space-10); width: auto; }
.login-wordmark {
  margin: 0;
  padding-left: var(--imf-space-4);
  border-left: 1px solid var(--imf-sidebar-border);
  font-size: var(--imf-fs-display);
  font-weight: var(--imf-fw-black);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--imf-sidebar-text);
}
/* Franja móvil: sin escena, sin pie y sin control de animación */
.login-escena,
.login-panel-espacio,
.login-panel-pie { display: none; }

@media (min-width: 1024px) {
  .login { flex-direction: row; }
  .login-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 50%;
    padding: var(--imf-space-10);
  }
  .login-escena { display: block; }
  .login-panel-espacio { display: block; flex: 1; min-height: var(--imf-space-6); }
  .login-panel-pie { display: flex; }
  .login-marca { align-self: flex-start; }
  .login-wordmark {
    margin-top: var(--imf-space-8);
    padding-left: 0;
    border-left: 0;
    font-size: var(--imf-fs-marca);
    letter-spacing: -0.045em;
    line-height: 0.9;
  }
  /* Acento: una línea verde corta bajo el nombre (el único verde fijo del panel) */
  .login-wordmark::after {
    content: "";
    display: block;
    width: var(--imf-space-10);
    height: var(--imf-space-1);
    margin-top: var(--imf-space-4);
    border-radius: var(--imf-radius-full);
    background: var(--imf-sidebar-active-icon);
  }
}
@media (min-width: 1280px) { .login-panel { width: 52%; } }
@media (min-width: 1280px) and (min-height: 900px) {
  .login-panel { padding: calc(var(--imf-space-10) + var(--imf-space-4)); }
}

/* Escena: la ilustración ocupa la zona entre el wordmark y el pie */
.login-escena-svg {
  position: absolute;
  inset: 30% 6% 11% 6%;
  width: 88%;
  height: 59%;
  overflow: visible;
  color: var(--imf-sidebar-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-escena-lejos { opacity: 0.3; --imf-flotar: 10px; --imf-flotar-dur: 20s; }
.login-escena-flota { --imf-flotar: 6px; --imf-flotar-dur: 16s; }
.login-escena-hoja { fill: color-mix(in srgb, var(--imf-sidebar-text) 6%, transparent); stroke-opacity: 0.85; }
.login-escena-pinza { fill: var(--imf-sidebar-via); stroke-opacity: 0.85; }
.login-escena-texto { stroke-opacity: 0.32; stroke-width: 6; }
.login-escena-separador { stroke-opacity: 0.14; }
.login-escena-ficha { fill: color-mix(in srgb, var(--imf-sidebar-text) 8%, transparent); stroke-opacity: 0.35; }
.login-escena-icono { stroke-opacity: 0.92; }
.login-escena-casilla { stroke-opacity: 0.55; }
.login-escena-check { color: var(--imf-sidebar-active-icon); stroke-width: 3; }
.login-escena-escaneo { --imf-escaneo-recorrido: 430px; }
.login-escena-escaneo rect { fill: url(#sigma-escaneo); stroke: none; }
.login-escena-escaneo line { color: var(--imf-sidebar-active-icon); stroke-opacity: 0.55; }
.login-escena-luz { stop-color: var(--imf-sidebar-text); }

/* Pie del panel y control «Detener animación» */
.login-panel-pie {
  align-items: center;
  justify-content: space-between;
  gap: var(--imf-space-4);
  padding-top: var(--imf-space-4);
  border-top: 1px solid var(--imf-sidebar-border);
  font-size: var(--imf-fs-label);
  color: var(--imf-sidebar-text-muted);
}
.login-movimiento {
  display: inline-flex;
  align-items: center;
  gap: var(--imf-space-2);
  min-height: var(--imf-control-h-dense);
  padding: 0 var(--imf-space-3);
  border: 1px solid var(--imf-sidebar-border);
  border-radius: var(--imf-radius-lg);
  background: transparent;
  font: inherit;
  font-weight: var(--imf-fw-medium);
  color: var(--imf-sidebar-text-muted);
  cursor: pointer;
  transition: color var(--imf-dur-feedback) var(--imf-ease-color), background-color var(--imf-dur-feedback) var(--imf-ease-color);
}
.login-movimiento:hover { color: var(--imf-sidebar-text); background: var(--imf-sidebar-item-hover); }
.login-movimiento:focus-visible { outline: 2px solid var(--imf-sidebar-active-icon); outline-offset: 2px; }
.login-movimiento .icono-reanudar,
.login-movimiento[aria-pressed="true"] .icono-detener { display: none; }
.login-movimiento[aria-pressed="true"] .icono-reanudar { display: block; }

/* Formulario (derecha). Sin transform ni movimiento propio. */
.login-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--imf-space-10) var(--imf-space-6);
  background: var(--imf-surface);
  color: var(--imf-text);
}
@media (min-width: 576px) { .login-main { padding: calc(var(--imf-space-6) * 2); } }
@media (min-width: 768px) { .login-main { padding: calc(var(--imf-space-6) * 2) calc(var(--imf-space-8) * 2); } }
.login-contenido { width: 100%; max-width: 28rem; }
.login-contenido > * + * { margin-top: var(--imf-space-8); }
.login-cabecera { text-align: center; }
@media (min-width: 576px) { .login-cabecera { text-align: left; } }
.login-titulo {
  margin: 0;
  font-size: var(--imf-fs-heading);
  font-weight: var(--imf-fw-black);
  line-height: var(--imf-lh-heading);
  letter-spacing: -0.02em;
  color: var(--imf-text);
}
.login-bajada {
  margin: var(--imf-space-2) 0 0;
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-medium);
  color: var(--imf-text-secondary);
}
.login-form > * + * { margin-top: var(--imf-space-5); }
.login-alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--imf-space-3);
  padding: var(--imf-space-4);
  border: 1px solid var(--imf-bad-bd);
  border-radius: var(--imf-radius-xl);
  background: var(--imf-bad-bg);
  color: var(--imf-bad-fg);
  font-size: var(--imf-fs-label);
  line-height: 1.6;
}
.login-alerta:focus { outline: none; }
.login-alerta:focus-visible { outline: 2px solid var(--imf-error); outline-offset: 2px; }
.login-alerta svg { flex-shrink: 0; margin-top: 2px; }
.login-alerta p { margin: 0; }
.login-alerta-titulo { font-weight: var(--imf-fw-bold); }
.login-alerta-detalle { font-weight: var(--imf-fw-medium); margin-top: var(--imf-space-1) !important; }
.login-campo label {
  display: block;
  margin-bottom: var(--imf-space-2);
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-bold);
  color: var(--imf-text);
}
.login-input-wrap { position: relative; }
.login-input-icono {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  padding-left: var(--imf-space-4);
  color: var(--imf-primary);
  pointer-events: none;
}
.imf-login-input {
  display: block;
  width: 100%;
  height: calc(var(--imf-control-h) + var(--imf-space-1));
  padding: 0 var(--imf-space-4) 0 calc(var(--imf-space-6) * 2);
  border: 1px solid var(--imf-input-border);
  border-radius: var(--imf-radius-xl);
  background: var(--imf-background);
  color: var(--imf-text);
  font: inherit;
  font-size: var(--imf-fs-body);
  font-weight: 600;
  transition: border-color var(--imf-dur-feedback) var(--imf-ease-color), box-shadow var(--imf-dur-feedback) var(--imf-ease-color);
}
.imf-login-input--con-boton { padding-right: calc(var(--imf-space-6) * 2); }
.imf-login-input::placeholder { color: var(--imf-placeholder); opacity: 1; font-weight: var(--imf-fw-medium); }
.imf-login-input:focus {
  outline: none;
  border-color: var(--imf-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--imf-primary) 22%, transparent), var(--imf-shadow-xs);
}
.imf-login-input.input-validation-error { border-color: var(--imf-error); }
.imf-login-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--imf-background) inset;
  -webkit-text-fill-color: var(--imf-text);
  caret-color: var(--imf-text);
}
.login-error-campo {
  display: block;
  margin-top: var(--imf-space-2);
  font-size: var(--imf-fs-label);
  font-weight: 600;
  color: var(--imf-error);
}
.login-error-campo:empty { display: none; }
.toggle-eye {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--imf-space-6) * 2);
  border: 0;
  border-radius: 0 var(--imf-radius-xl) var(--imf-radius-xl) 0;
  background: transparent;
  color: var(--imf-text-muted);
  cursor: pointer;
  transition: color var(--imf-dur-feedback) var(--imf-ease-color);
}
.toggle-eye:hover { color: var(--imf-primary); }
.toggle-eye:focus-visible { outline: 2px solid var(--imf-primary); outline-offset: -2px; }
.toggle-eye .icono-ocultar,
.toggle-eye[aria-pressed="true"] .icono-ver { display: none; }
.toggle-eye[aria-pressed="true"] .icono-ocultar { display: block; }
.login-recordar { display: flex; align-items: center; gap: var(--imf-space-2); }
.login-recordar .form-check-input {
  margin: 0;
  width: var(--imf-fs-title);
  height: var(--imf-fs-title);
  border-color: var(--imf-input-border);
  background-color: var(--imf-background);
}
.login-recordar .form-check-input:checked { background-color: var(--imf-primary); border-color: var(--imf-primary); }
.login-recordar .form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--imf-primary) 22%, transparent); border-color: var(--imf-primary); }
.login-recordar label { font-size: var(--imf-fs-body); font-weight: 600; color: var(--imf-text-secondary); }
.imf-login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--imf-space-2);
  width: 100%;
  height: calc(var(--imf-control-h) + var(--imf-space-1));
  padding: 0 var(--imf-space-6);
  border: 0;
  border-radius: var(--imf-radius-xl);
  background: var(--imf-primary);
  color: var(--imf-on-primary);
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-black);
  box-shadow: var(--imf-shadow-sm);
  cursor: pointer;
  transition: background-color var(--imf-dur-feedback) var(--imf-ease-color),
              box-shadow var(--imf-dur-feedback) var(--imf-ease-color),
              scale var(--imf-dur-presionar) var(--imf-ease-salida);
}
.imf-login-submit:hover:not(:disabled) { background: var(--imf-primary-dark); box-shadow: var(--imf-shadow-lift); }
.imf-login-submit:active:not(:disabled) { scale: 0.985; }
.imf-login-submit:focus-visible { outline: 2px solid var(--imf-primary); outline-offset: 3px; }
.imf-login-submit:disabled { opacity: 0.5; cursor: progress; }
.imf-login-arrow { transition: translate var(--imf-dur-superficie) var(--imf-ease-salida); }
.imf-login-submit:hover .imf-login-arrow,
.imf-login-submit:focus-visible .imf-login-arrow { translate: 3px 0; }
.imf-girar {
  width: var(--imf-space-4);
  height: var(--imf-space-4);
  border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
  border-top-color: currentColor;
  border-radius: var(--imf-radius-full);
  animation: imf-girar var(--imf-dur-giro) linear infinite;
}
.login-ayuda {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--imf-space-4);
  border-top: 1px solid var(--imf-border);
  text-align: center;
}
.login-ayuda p { margin: 0; font-size: var(--imf-fs-label); font-weight: var(--imf-fw-bold); color: var(--imf-text); }
.login-ayuda a {
  display: inline-flex;
  align-items: center;
  gap: var(--imf-space-2);
  min-height: var(--imf-control-h);
  padding: 0 var(--imf-space-3);
  border-radius: var(--imf-radius-lg);
  font-size: var(--imf-fs-label);
  font-weight: var(--imf-fw-bold);
  color: var(--imf-primary);
  text-decoration: none;
  transition: color var(--imf-dur-feedback) var(--imf-ease-color), background-color var(--imf-dur-feedback) var(--imf-ease-color);
}
@media (min-width: 576px) { .login-ayuda a { min-height: var(--imf-space-8); } }
.login-ayuda a:hover { color: var(--imf-primary-dark); background: var(--imf-background); }
.login-pie-movil { text-align: center; font-size: var(--imf-fs-label); line-height: 1.6; color: var(--imf-text-secondary); }
@media (min-width: 1024px) { .login-pie-movil { display: none; } }
/* N2 · entrada del formulario: solo opacidad (el formulario no se desplaza) */
@keyframes imf-fundido { from { opacity: 0; } }
.login-anim-form { animation: imf-fundido var(--imf-dur-orientacion) var(--imf-ease-salida) backwards; }

/* ---------------------------------------------------------------------
   6e. MENÚ LATERAL DE SIGMA sobre la plantilla (Xintra): .app-sidebar.imf-menu
   Mismas zonas y reglas de 6b. Los selectores llevan html[data-nav-layout] para
   pesar más que styles.css, que se carga después; el ancho y los estados
   (cajón móvil, colapsado) los sigue resolviendo la plantilla.
   --------------------------------------------------------------------- */
html[data-nav-layout] .app-sidebar.imf-menu {
  container: imf-menu / inline-size;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, var(--imf-sidebar-from) 0%, var(--imf-sidebar-via) 55%, var(--imf-sidebar-to) 100%);
  border-inline-end: 1px solid var(--imf-sidebar-border);
  font-family: var(--imf-font-sans);
}
html[data-nav-layout] .app-sidebar.imf-menu::before { content: none; }

/* Marca (64 px) */
html[data-nav-layout] .imf-menu .main-sidebar-header {
  position: static;
  flex: none;
  width: auto;
  height: calc(var(--imf-space-8) * 2);
  justify-content: flex-start;
  gap: var(--imf-space-3);
  padding: 0 var(--imf-space-5);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--imf-sidebar-border);
}
html[data-nav-layout] .imf-menu .main-sidebar-header .header-logo {
  display: flex;
  align-items: center;
  gap: var(--imf-space-3);
  min-width: 0;
  color: var(--imf-sidebar-text);
  text-decoration: none;
}
html[data-nav-layout] .imf-menu .main-sidebar-header .header-logo img,
.imf-menu__logo {
  display: block;
  flex: none;
  height: var(--imf-space-8);
  width: auto;
}
.imf-menu__nombre { display: flex; flex-direction: column; min-width: 0; line-height: var(--imf-lh-title); }
.imf-menu__nombre strong {
  font-size: var(--imf-fs-lead);
  font-weight: var(--imf-fw-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--imf-sidebar-text);
}
.imf-menu__nombre span {
  font-size: var(--imf-fs-label);
  font-weight: var(--imf-fw-bold);
  color: var(--imf-sidebar-active-icon);
  white-space: nowrap;
}

/* Usuario */
.imf-menu__usuario {
  display: flex;
  align-items: center;
  gap: var(--imf-space-3);
  padding: var(--imf-space-4) var(--imf-space-5);
  min-width: 0;
}
.imf-menu__avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--imf-space-8) + var(--imf-space-1));
  height: calc(var(--imf-space-8) + var(--imf-space-1));
  border-radius: var(--imf-radius-full);
  background: var(--imf-sidebar-item-hover);
  box-shadow: 0 0 0 2px var(--imf-sidebar-active-ring);
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-black);
  color: var(--imf-sidebar-text);
  text-transform: uppercase;
}
.imf-menu__avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: var(--imf-radius-full);
  background: var(--imf-sidebar-active-icon);
  box-shadow: 0 0 0 2px var(--imf-sidebar-from);
}
.imf-menu__persona { display: flex; flex-direction: column; gap: var(--imf-space-1); min-width: 0; }
.imf-menu__persona-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-bold);
  color: var(--imf-sidebar-text);
}
.imf-menu__rol {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--imf-space-2);
  border-radius: var(--imf-radius-md);
  background: color-mix(in srgb, var(--imf-sidebar-active-icon) 16%, transparent);
  font-size: var(--imf-fs-label);
  font-weight: var(--imf-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--imf-sidebar-active-icon);
}

/* Navegación: único scroll (anula el alto de 100vh + margen de la plantilla) */
html[data-nav-layout] .imf-menu .main-sidebar.imf-menu__nav {
  margin: 0;
  height: auto;
  padding: var(--imf-space-4) var(--imf-space-3);
  overflow-x: hidden;
  overflow-y: auto;
}
html[data-nav-layout] .imf-menu .main-menu-container,
html[data-nav-layout] .imf-menu .main-menu { margin: 0; padding: 0; }
html[data-nav-layout] .imf-menu .slide { padding: 0; margin: 0 0 2px; }
html[data-nav-layout] .imf-menu .slide__category,
.imf-menu__grupo {
  padding: var(--imf-space-5) var(--imf-space-3) var(--imf-space-2);
  font-size: var(--imf-fs-label);
  font-weight: var(--imf-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--imf-sidebar-group-label);
  opacity: 1;
}
html[data-nav-layout] .imf-menu .slide__category { padding-top: 0; }
.imf-menu__grupo { display: block; padding: var(--imf-space-3) 0 var(--imf-space-1) var(--imf-space-3); }
.imf-menu__grupo:empty { display: none; }

/* Ítems */
html[data-nav-layout] .imf-menu .side-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--imf-space-3);
  min-height: 42px;
  padding: 0 var(--imf-space-3) 0 14px;
  border: 0;
  border-radius: var(--imf-radius-xl);
  background: transparent;
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-medium);
  color: var(--imf-sidebar-text-muted);
  transition: color var(--imf-dur-feedback) var(--imf-ease-color), background-color var(--imf-dur-feedback) var(--imf-ease-color);
}
html[data-nav-layout] .imf-menu .side-menu__item:hover {
  background: var(--imf-sidebar-item-hover);
  color: var(--imf-sidebar-text);
}
/* Foco por teclado: anillo verde con box-shadow, porque styles.css anula el outline de
   todo a/button con !important */
html[data-nav-layout] .imf-menu .side-menu__item:focus-visible,
html[data-nav-layout] .imf-menu .imf-menu__accion:focus-visible,
html[data-nav-layout] .imf-menu .header-logo:focus-visible {
  box-shadow: inset 0 0 0 2px var(--imf-sidebar-active-icon);
}
html[data-nav-layout] .imf-menu .side-menu__label,
html[data-nav-layout] .imf-menu .side-menu__angle {
  font-size: inherit;
  line-height: var(--imf-lh-title);
  color: inherit;
}
html[data-nav-layout] .imf-menu .side-menu__label { flex: 1; min-width: 0; white-space: normal; }
html[data-nav-layout] .imf-menu .side-menu__icon {
  flex: none;
  width: var(--imf-fs-title);
  margin: 0;
  font-size: var(--imf-fs-title);
  line-height: 1;
  color: inherit;
}
html[data-nav-layout] .imf-menu .side-menu__angle { margin: 0; color: var(--imf-sidebar-group-label); }
html[data-nav-layout] .imf-menu .side-menu__item::before { content: none; }
/* Grupo que contiene la página actual: texto blanco e icono verde, sin relleno */
html[data-nav-layout] .imf-menu .slide.has-sub > .side-menu__item.active {
  background: transparent;
  color: var(--imf-sidebar-text);
  font-weight: var(--imf-fw-bold);
}
html[data-nav-layout] .imf-menu .slide.has-sub > .side-menu__item.active .side-menu__icon { color: var(--imf-sidebar-active-icon); }
/* Subítems: sangría con un punto tenue; el activo lleva relleno verde, anillo y punto verde */
html[data-nav-layout] .imf-menu .slide-menu { padding: var(--imf-space-1) 0 var(--imf-space-2); }
html[data-nav-layout] .imf-menu .slide-menu li { padding: 0; }
html[data-nav-layout] .imf-menu .slide-menu .side-menu__item {
  min-height: 38px;
  margin-left: var(--imf-space-6);
  padding-left: var(--imf-space-5);
  background: transparent !important;
}
html[data-nav-layout] .imf-menu .slide-menu .side-menu__item::before {
  content: "";
  position: absolute;
  left: var(--imf-space-2);
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--imf-radius-full);
  background: var(--imf-sidebar-group-label);
  font-family: inherit !important;
}
html[data-nav-layout] .imf-menu .slide-menu .side-menu__item:hover { background: var(--imf-sidebar-item-hover) !important; }
html[data-nav-layout] .imf-menu .slide-menu .side-menu__item.active {
  background: var(--imf-sidebar-active-bg) !important;
  box-shadow: inset 0 0 0 1px var(--imf-sidebar-active-ring);
  color: var(--imf-sidebar-active-text);
  font-weight: var(--imf-fw-bold);
}
html[data-nav-layout] .imf-menu .slide-menu .side-menu__item.active:focus-visible {
  box-shadow: inset 0 0 0 2px var(--imf-sidebar-active-icon);
}
html[data-nav-layout] .imf-menu .slide-menu .side-menu__item.active::before {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  left: 7px;
  background: var(--imf-sidebar-active-icon);
}

/* Pie: siempre visible */
.imf-menu__pie { display: flex; flex-direction: column; gap: 2px; padding: var(--imf-space-3); }
.imf-menu__pie form { margin: 0; }
.imf-menu__accion {
  display: flex;
  align-items: center;
  gap: var(--imf-space-3);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--imf-space-3) 0 14px;
  border: 0;
  border-radius: var(--imf-radius-xl);
  background: transparent;
  font: inherit;
  font-size: var(--imf-fs-body);
  font-weight: var(--imf-fw-medium);
  color: var(--imf-sidebar-text-muted);
  text-align: left;
  cursor: pointer;
  transition: color var(--imf-dur-feedback) var(--imf-ease-color), background-color var(--imf-dur-feedback) var(--imf-ease-color);
}
.imf-menu__accion i { flex: none; width: var(--imf-fs-title); font-size: var(--imf-fs-title); line-height: 1; }
.imf-menu__accion:hover { background: var(--imf-sidebar-item-hover); color: var(--imf-sidebar-text); }
.imf-menu__accion--ocultar i { color: var(--imf-sidebar-active-icon); transition: rotate var(--imf-dur-superficie) var(--imf-ease-salida); }
.imf-menu__accion--ocultar.is-plegado i { rotate: 180deg; }
.imf-menu__accion--salir { color: color-mix(in srgb, var(--imf-error) 45%, var(--imf-sidebar-text)); }
.imf-menu__accion--salir:hover { background: color-mix(in srgb, var(--imf-error) 18%, transparent); color: var(--imf-sidebar-text); }
.imf-menu__version {
  padding: var(--imf-space-1) 14px 0;
  font-size: var(--imf-fs-label);
  color: var(--imf-sidebar-text);
  opacity: 0.5;
}
/* Pantallas bajas: el usuario cede espacio (6b), con el peso suficiente para ganar a display:flex */
@media (max-height: 640px) {
  .imf-menu__usuario.imf-menu__opcional { display: none; }
}
/* Móvil: destinos de 44 px */
@media (max-width: 991.98px) {
  html[data-nav-layout] .imf-menu .side-menu__item,
  .imf-menu__accion { min-height: var(--imf-control-h); }
}
/* Colapsado (la plantilla lo deja en ~5rem): solo iconos, sin scroll que recorte los
   menús flotantes; cada ítem conserva su nombre accesible (aria-label). */
@container imf-menu (max-width: 120px) {
  .imf-menu__nombre,
  .imf-menu__persona,
  .imf-menu__grupo,
  .imf-menu__version,
  .imf-menu .slide__category,
  .imf-menu .side-menu__angle,
  .imf-menu__accion span { display: none !important; }
  .imf-menu .main-sidebar-header,
  .imf-menu__usuario { justify-content: center; padding-inline: 0 !important; }
  .imf-menu .main-sidebar.imf-menu__nav {
    overflow: visible !important;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .imf-menu .side-menu__item,
  .imf-menu__accion { justify-content: center; padding: 0 !important; }
}

/* Reducir movimiento. Se quitan desplazamientos, escalas y bucles decorativos; se conserva la
   retroalimentación de estado (color, fondo, borde, opacidad, sombra) y los indicadores de
   carga siguen girando para no parecer congelados. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-property: color, background-color, border-color, outline-color, opacity, box-shadow !important;
    transition-duration: 120ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .animate-spin,
  .imf-girar {
    animation-duration: 1.2s !important;
    animation-iteration-count: infinite !important;
  }
  .imf-pagina > :only-child > *,
  .imf-pagina > :not(:only-child),
  .imf-cascada > *,
  .imf-vacio-icono,
  .imf-esqueleto,
  .imf-barra-progreso { animation: none !important; }
  .imf-barra-progreso { transition: none; }
  /* La escena queda en su pose estática (iconos y trazos dibujados, sin anillos de pulso) */
  .imf-escena *,
  .imf-escena-aurora { animation: none !important; }
  .imf-escena-pulso { opacity: 0 !important; }
  .imf-menu__nav { scroll-behavior: auto; }
  /* Login de SIGMA: sin entrada ni control de animación (la escena ya está quieta) */
  .login-anim-form { animation: none !important; }
  .login-movimiento { display: none; }
  .imf-login-submit:hover .imf-login-arrow,
  .imf-login-submit:focus-visible .imf-login-arrow,
  .imf-login-submit:active:not(:disabled) { translate: none; scale: none; }
  .imf-levitar:hover,
  .imf-levitar:active,
  .imf-dia:hover:not(:disabled),
  .imf-levitar:hover .imf-icono-vivo,
  .imf-levitar:hover .imf-flecha,
  .imf-levitar:hover .imf-flecha-diagonal,
  .imf-presionar:active:not(:disabled),
  .imf-btn:active:not(:disabled) {
    translate: none;
    scale: none;
    rotate: none;
  }
}

/* Aumentar contraste: bordes de campo y texto secundario más firmes */
@media (prefers-contrast: more) {
  .imf-input,
  .imf-login-input { border-color: var(--imf-text-secondary); }
  .login-panel-pie { color: var(--imf-sidebar-text); }
  .imf-t-muted { color: var(--imf-text-secondary); }
}

/* ---------------------------------------------------------------------
   7. PUENTE OPCIONAL A TAILWIND v4
   Expone los tokens como utilidades (bg-imf-primary, text-imf-text…).
   En una plataforma sin Tailwind, el navegador ignora este bloque.
   Requiere además en la hoja de entrada: @custom-variant dark (&:where(.dark, .dark *));
   --------------------------------------------------------------------- */
@theme {
  --font-sans: var(--imf-font-sans);
  --font-mono: var(--imf-font-mono);

  --color-imf-primary: var(--imf-primary);
  --color-imf-primary-hover: var(--imf-primary-hover);
  --color-imf-primary-dark: var(--imf-primary-dark);
  --color-imf-primary-deep: var(--imf-primary-deep);
  --color-imf-primary-soft: var(--imf-primary-soft);
  --color-imf-green: var(--imf-green);
  --color-imf-green-hover: var(--imf-green-hover);
  --color-imf-green-alt: var(--imf-green-alt);
  --color-imf-green-soft: var(--imf-green-soft);
  --color-imf-green-text: var(--imf-green-text);
  --color-imf-background: var(--imf-background);
  --color-imf-background-alt: var(--imf-background-alt);
  --color-imf-surface: var(--imf-surface);
  --color-imf-surface-raised: var(--imf-surface-raised);
  --color-imf-surface-soft: var(--imf-surface-soft);
  --color-imf-card-hover: var(--imf-card-hover);
  --color-imf-border: var(--imf-border);
  --color-imf-text: var(--imf-text);
  --color-imf-text-secondary: var(--imf-text-secondary);
  --color-imf-text-muted: var(--imf-text-muted);
  --color-imf-icon: var(--imf-icon);
  --color-imf-link: var(--imf-link);
  --color-imf-info: var(--imf-info);
  --color-imf-success: var(--imf-success);
  --color-imf-warning: var(--imf-warning);
  --color-imf-error: var(--imf-error);
  --color-imf-danger: var(--imf-danger);
  --color-imf-topbar: var(--imf-topbar);
  --color-imf-input: var(--imf-input);
  --color-imf-placeholder: var(--imf-placeholder);
  --color-imf-badge-bg: var(--imf-badge-bg);
  --color-imf-badge-text: var(--imf-badge-text);
  --color-imf-active-bg: var(--imf-active-bg);
  --color-imf-active-text: var(--imf-active-text);
  --color-imf-active-border: var(--imf-active-border);
  --color-imf-modal-overlay: var(--imf-modal-overlay);
  --color-imf-tooltip-bg: var(--imf-tooltip-bg);
  --color-imf-tooltip-text: var(--imf-tooltip-text);

  --shadow-imf-xs: var(--imf-shadow-xs);
  --shadow-imf-sm: var(--imf-shadow-sm);
  --shadow-imf-card: var(--imf-shadow-card);
  --shadow-imf-lift: var(--imf-shadow-lift);
  --shadow-imf-pop: var(--imf-shadow-pop);
}