/*
 * Animaciones de la réplica.
 *
 * NO existen en la plataforma de Diego: se agregaron el 2026-10-02. Viven en
 * este archivo aparte, que el Worker añade al final del <head> de cada página
 * (src/index.ts). Las plantillas y styles.css de Diego no se tocan, y la
 * paridad de pantallas compara el HTML sin esa línea.
 *
 * Criterios: cortas (140–320 ms), con curvas de desaceleración como las de iOS y
 * Material, y sólo sobre opacidad y transform, que el navegador anima sin
 * recalcular la página. Todo vive dentro de prefers-reduced-motion:
 * no-preference: quien pidió a su sistema menos movimiento no ve ninguna.
 */

:root {
  --rep-entrar: cubic-bezier(.22, 1, .36, 1);
  --rep-salir: cubic-bezier(.4, 0, 1, 1);
  --rep-estandar: cubic-bezier(.2, 0, 0, 1);
  --rep-sombra: 0 10px 24px rgba(26, 44, 68, .10), 0 2px 6px rgba(26, 44, 68, .06);
}

/* La barra de progreso existe siempre (la crea animaciones.js), pero sólo se
   mueve con movimiento permitido. */
#rep-progreso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;
  height: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, var(--blue, #0580b7) 0%, #2aa6dc 70%, #8fd8f5 100%);
  box-shadow: 0 0 12px rgba(5, 128, 183, .55), 0 1px 4px rgba(5, 128, 183, .35);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------------------------------------------------------------------
     1. Entre páginas: el contenido sale y el nuevo entra; la barra lateral
     queda quieta, como en una aplicación. View Transitions entre documentos
     (Chrome, Edge, Safari 18); el resto cae al punto 2. */

  @view-transition { navigation: auto; }

  .sidebar { view-transition-name: rep-barra-lateral; }
  ::view-transition-group(rep-barra-lateral),
  ::view-transition-old(rep-barra-lateral),
  ::view-transition-new(rep-barra-lateral) { animation: none; }

  ::view-transition-old(root) { animation: 140ms var(--rep-salir) both rep-salir; }
  ::view-transition-new(root) { animation: 260ms var(--rep-entrar) both rep-entrar; }

  @keyframes rep-salir { to { opacity: 0; transform: translateY(-4px); } }
  @keyframes rep-entrar { from { opacity: 0; transform: translateY(8px); } }
  @keyframes rep-aparecer { from { opacity: 0; transform: translateY(8px); } }
  @keyframes rep-bajar { from { opacity: 0; transform: translateY(-10px); } }
  @keyframes rep-acercar { from { opacity: 0; transform: translateY(6px) scale(.985); } }

  /* 2. Sin View Transitions, el contenido entra igual al cargar. */
  @supports not (view-transition-name: none) {
    .main-content { animation: 260ms var(--rep-entrar) backwards rep-entrar; }
  }

  /* ---------------------------------------------------------------------
     3. Tarjetas y paneles en cascada, como un feed. Con relleno «backwards»:
     terminada la entrada la animación suelta el transform y el hover funciona. */

  :is(.module-card, .summary-card, .metric-card, .funnel-card, .my-work-card,
      .proposal-list-card, .proposal-item-card, .candidate-review-card,
      .radar-result-card, .matrix-criterion-card, .context-card, .decision-item,
      .entity-card, .warning-card, .provenance-card) {
    animation: 320ms var(--rep-entrar) backwards rep-aparecer;
  }
  :is(.detail-panel, .data-panel, .form-panel, .proposal-section, .alert-banner) {
    animation: 300ms var(--rep-entrar) backwards rep-aparecer;
  }
  :is(.module-card, .summary-card, .metric-card, .funnel-card, .my-work-card,
      .proposal-list-card, .proposal-item-card, .candidate-review-card,
      .radar-result-card, .matrix-criterion-card, .context-card, .decision-item,
      .entity-card, .detail-panel, .data-panel, .form-panel, .proposal-section) {
    &:nth-child(2) { animation-delay: 35ms; }
    &:nth-child(3) { animation-delay: 70ms; }
    &:nth-child(4) { animation-delay: 105ms; }
    &:nth-child(5) { animation-delay: 140ms; }
    &:nth-child(6) { animation-delay: 170ms; }
    &:nth-child(7) { animation-delay: 195ms; }
    &:nth-child(n + 8) { animation-delay: 215ms; }
  }

  /* Las tarjetas que llevan a algún lado se levantan al pasar el cursor. */
  :is(.module-card, .summary-card, .metric-card, .funnel-card, .my-work-card,
      .proposal-list-card, .candidate-review-card, .radar-result-card, .entity-card) {
    transition: transform 180ms var(--rep-estandar), box-shadow 180ms var(--rep-estandar), border-color 180ms var(--rep-estandar);
  }
  :is(.module-card, .summary-card, .metric-card, .funnel-card, .my-work-card,
      .proposal-list-card, .candidate-review-card, .radar-result-card, .entity-card):is(a, :has(a)):hover {
    transform: translateY(-2px);
    box-shadow: var(--rep-sombra);
  }

  /* ---------------------------------------------------------------------
     4. Botones, enlaces, menú y campos: respuesta inmediata al toque. */

  :is(.primary-button, .secondary-button, button, .nav-link, .text-link, .nav-icon) {
    transition: background-color 150ms var(--rep-estandar), color 150ms var(--rep-estandar),
                border-color 150ms var(--rep-estandar), box-shadow 150ms var(--rep-estandar),
                transform 120ms var(--rep-estandar), opacity 150ms var(--rep-estandar);
  }
  :is(.primary-button, .secondary-button, button):active:not(:disabled) { transform: scale(.97); }
  .primary-button:hover { box-shadow: 0 6px 14px rgba(5, 128, 183, .22); }
  .nav-link:active { transform: scale(.985); }

  :is(input, select, textarea, .form-control, .form-select, .filter-select, .filter-input) {
    transition: border-color 150ms var(--rep-estandar), box-shadow 150ms var(--rep-estandar), background-color 150ms var(--rep-estandar);
  }

  tbody tr { transition: background-color 120ms var(--rep-estandar); }

  /* El botón que envió el formulario, mientras llega la página siguiente. */
  .rep-enviando { opacity: .72; cursor: progress; }

  /* ---------------------------------------------------------------------
     5. Mensajes, desplegables y la página de ingreso. */

  .messages > * { animation: 300ms var(--rep-entrar) backwards rep-bajar; }
  .messages > :nth-child(2) { animation-delay: 60ms; }
  .messages > :nth-child(n + 3) { animation-delay: 110ms; }

  details[open] > :not(summary) { animation: 220ms var(--rep-entrar) backwards rep-aparecer; }

  .login-shell { animation: 420ms var(--rep-entrar) backwards rep-acercar; }
  .login-form-panel > * { animation: 360ms var(--rep-entrar) backwards rep-aparecer; }
  .login-form-panel > :nth-child(2) { animation-delay: 60ms; }
  .login-form-panel > :nth-child(3) { animation-delay: 110ms; }
  .login-form-panel > :nth-child(n + 4) { animation-delay: 150ms; }

  /* ---------------------------------------------------------------------
     6. Barra de progreso arriba al navegar: avanza rápido al principio y se
     frena cerca del final mientras llega la respuesta. */

  #rep-progreso.activa {
    opacity: 1;
    animation: 2400ms cubic-bezier(.1, .7, .3, 1) forwards rep-progreso;
  }
  @keyframes rep-progreso {
    0% { transform: scaleX(0); }
    60% { transform: scaleX(.7); }
    100% { transform: scaleX(.9); }
  }

  /* ---------------------------------------------------------------------
     7. Segundo juego (2026-10-02): encabezados, columnas, filas, etiquetas,
     números y la onda al tocar. */

  /* El encabezado de cada pantalla: ruta, título y descripción en cascada. */
  .topbar > :first-child > * { animation: 340ms var(--rep-entrar) backwards rep-aparecer; }
  .topbar > :first-child > :nth-child(2) { animation-delay: 45ms; }
  .topbar > :first-child > :nth-child(n + 3) { animation-delay: 90ms; }
  .topbar-actions > * { animation: 320ms var(--rep-entrar) 120ms backwards rep-deslizar; }

  @keyframes rep-deslizar { from { opacity: 0; transform: translateX(14px); } }
  @keyframes rep-asomar { from { opacity: 0; transform: scale(.86); } }
  @keyframes rep-crecer { from { transform: scaleX(0); } }

  /* Las columnas del funnel entran de derecha a izquierda, una tras otra. */
  .funnel-column { animation: 380ms var(--rep-entrar) backwards rep-deslizar; }
  .funnel-column:nth-child(2) { animation-delay: 50ms; }
  .funnel-column:nth-child(3) { animation-delay: 100ms; }
  .funnel-column:nth-child(4) { animation-delay: 150ms; }
  .funnel-column:nth-child(5) { animation-delay: 200ms; }
  .funnel-column:nth-child(n + 6) { animation-delay: 240ms; }

  /* Las primeras filas de cada tabla, en cascada corta. */
  tbody tr:nth-child(-n + 14) { animation: 260ms var(--rep-entrar) backwards rep-aparecer; }
  tbody tr:nth-child(2) { animation-delay: 18ms; }
  tbody tr:nth-child(3) { animation-delay: 36ms; }
  tbody tr:nth-child(4) { animation-delay: 54ms; }
  tbody tr:nth-child(5) { animation-delay: 72ms; }
  tbody tr:nth-child(6) { animation-delay: 90ms; }
  tbody tr:nth-child(7) { animation-delay: 108ms; }
  tbody tr:nth-child(n + 8):nth-child(-n + 14) { animation-delay: 126ms; }

  /* Etiquetas de estado y contadores: aparecen con un pequeño «pop». */
  :is(.status-chip, .stage-chip, .funnel-chip, .funnel-probability-chip, .funnel-vehicle-chip,
      .severity-chip, .source-chip, .mandatory-chip, .admissibility-chip, .dashboard-scope-chip,
      .panel-count, .work-count, .blocker-count, .funnel-column-count) {
    animation: 240ms var(--rep-entrar) 140ms backwards rep-asomar;
  }

  /* La franja de color de cada métrica se dibuja de izquierda a derecha. */
  .metric-accent { transform-origin: left center; animation: 520ms var(--rep-entrar) 160ms backwards rep-crecer; }

  /* La onda al tocar un botón, como en Material (la crea animaciones.js). */
  .rep-con-onda { position: relative; overflow: hidden; }
  .rep-onda {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: .22;
    transform: scale(0);
    animation: 520ms var(--rep-estandar) forwards rep-onda;
  }
  @keyframes rep-onda { to { transform: scale(1); opacity: 0; } }
}