/* Movimiento compartido: entradas y salidas de menús, modales, paneles y vistas; respeta prefers-reduced-motion vía styles.css */
/* ===== Movimiento: entradas y salidas de menú móvil, formulario, panel de detalle, menús y vistas ===== */
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes velo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes velo-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes hoja-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes hoja-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes menu-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.velo { animation: velo-in .22s ease-out both; }
.velo > .modal { animation: modal-in .34s cubic-bezier(.2,.8,.2,1) both; }
.velo.saliendo { animation: velo-out .18s ease-in both; pointer-events: none; }
.velo.saliendo > .modal { animation: modal-out .18s ease-in both; }
@media (max-width: 560px) {   /* en teléfono el formulario es una hoja que sube desde abajo */
  .velo > .modal { animation-name: hoja-in; animation-duration: .38s; }
  .velo.saliendo > .modal { animation-name: hoja-out; animation-duration: .24s; }
}
.menu-flotante { animation: menu-in .16s ease-out both; transform-origin: top right; }
.menu-flotante.saliendo { animation: menu-out .13s ease-in both; pointer-events: none; }
/* panel de detalle: se desliza desde la derecha (escritorio) o desde abajo (teléfono) en vez de aparecer */
.detalle { transition: transform .36s cubic-bezier(.2,.8,.2,1), opacity .24s ease, visibility 0s linear 0s; }
.detalle.oculto { display: flex !important; visibility: hidden; opacity: 0; transform: translateX(40px); pointer-events: none; transition: transform .26s ease-in, opacity .2s ease-in, visibility 0s linear .26s; }
.detalle-velo { transition: opacity .26s ease, visibility 0s linear 0s; }
.detalle-velo.oculto { display: block !important; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; }
@media (max-width: 760px) { .detalle.oculto { transform: translateY(100%); opacity: 1; } }
/* cambio de vista y grupos que se despliegan */
.vista-entra { animation: aparecer .26s ease-out both; }
.grupo[open] > :not(summary), details.relacionar-det[open] > .cuerpo, details[open] > #historial { animation: aparecer .24s ease-out both; }
/* calendario: el contenido entra desde el lado hacia el que navegas; el día elegido «salta» */
@keyframes cal-izq { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cal-der { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.55); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.35); } 60% { box-shadow: 0 0 0 7px rgba(200,16,46,0); } }
#calendario.cal-izq > * { animation: cal-izq .32s cubic-bezier(.2,.8,.2,1) both; }
#calendario.cal-der > * { animation: cal-der .32s cubic-bezier(.2,.8,.2,1) both; }
#calendario.cal-sube > * { animation: aparecer .3s cubic-bezier(.2,.8,.2,1) both; }
#calendario.cal-izq .dia-cab, #calendario.cal-der .dia-cab, #calendario.cal-izq .horario, #calendario.cal-der .horario, #calendario.cal-izq .todo-dia, #calendario.cal-der .todo-dia { animation-delay: .04s; }
#calendario.cal-izq .tira-semana button.sel .dd, #calendario.cal-der .tira-semana button.sel .dd, #calendario.cal-sube .tira-semana button.sel .dd, #calendario.cal-pop .cal-num.sel .dd, #calendario.cal-pop .mes-dia.sel { animation: pop .34s cubic-bezier(.2,.8,.2,1) both; }
#calendario.cal-izq .cal-num, #calendario.cal-der .cal-num, #calendario.cal-sube .cal-num { animation-delay: calc(var(--i, 0) * 9ms); }
.ahora::before { animation: pulso 2.4s ease-out infinite; }
/* menú del teléfono: se despliega en vez de saltar */
@media (max-width: 900px) {
  .lateral .nav { display: flex; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); padding-top: 0; padding-bottom: 0; margin-top: 0; border-top-color: transparent; transition: max-height .36s cubic-bezier(.2,.8,.2,1), opacity .24s ease, transform .36s cubic-bezier(.2,.8,.2,1), padding .36s, margin .36s, border-color .36s; }
  .lateral.abierto .nav { max-height: 80vh; opacity: 1; transform: none; padding: 8px 0 4px; margin-top: 4px; border-top-color: var(--linea); }
  .lateral .nav a { transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1), background .18s, box-shadow .18s; opacity: 0; transform: translateY(-4px); }
  .lateral.abierto .nav a { opacity: 1; transform: none; }
  .lateral.abierto .nav a:nth-child(2) { transition-delay: .02s; } .lateral.abierto .nav a:nth-child(3) { transition-delay: .04s; } .lateral.abierto .nav a:nth-child(4) { transition-delay: .06s; } .lateral.abierto .nav a:nth-child(5) { transition-delay: .08s; } .lateral.abierto .nav a:nth-child(6) { transition-delay: .10s; } .lateral.abierto .nav a:nth-child(7) { transition-delay: .12s; } .lateral.abierto .nav a:nth-child(n+8) { transition-delay: .14s; }
  .menu-movil span { display: inline-block; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .lateral.abierto .menu-movil span { transform: rotate(90deg); }
}