/* estilos/movimiento-ui.css — movimiento transversal de la interfaz, corto y sobrio.
   Cuatro piezas, todas de entrada o de respuesta (nunca decorativas ni repetidas):
     1. La ventana (modal) aparece con un fundido breve y un asomo desde abajo.
     2. Al cambiar de pestaña, el panel nuevo entra con un fundido (las pestañas esconden y
        muestran paneles con display: aparecía de golpe).
     3. Un botón al presionarlo se hunde un poco: confirma que el toque llegó.
   Son animaciones de UNA vuelta: con «reducir movimiento» se acortan a .01ms y terminan en su estado
   final. Lo hace el bloque global de styles-extra.css y, además, el bloque del final de esta hoja,
   con los mismos selectores (el analizador no reconoce el global).
   Duraciones de 150–220 ms: más largas se sienten como espera en una app de trabajo diario. */

@keyframes mxFundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes mxVentanaEntra {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 1 · Ventana */
.modal-overlay.open { animation: mxFundido .16s ease; }
.modal-overlay.open .modal { animation: mxVentanaEntra .2s cubic-bezier(.2, .8, .2, 1); }

/* 2 · Paneles de las pestañas Detalle / Historial (de Mecánico, Supervisor, Jefe de Centro y Gestión) */
[id^="panelDetalle"], [id^="panelHistorial"] { animation: mxFundido .18s ease; }

/* 3 · Presionar */
.btn:active:not(:disabled) { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.open,
  .modal-overlay.open .modal,
  [id^="panelDetalle"], [id^="panelHistorial"] {
    animation-duration: .01ms; animation-delay: 0s; animation-iteration-count: 1;
  }
}