/* OdontoCloud — movimiento.css · spec §2.2 · destino public/assets/
   Va DESPUÉS de app.css. Solo tokens; nada rebota; nada dura más de 240 ms
   salvo el brillo. Decisiones: movimiento-notas.md
   --brillo vive en tokens.css junto a --rapido/--normal/--curva. */

/* Presión: retroalimentación — la interfaz oyó, al instante */
.btn { transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva) }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97) }
:is(.barra-inferior, .barra-inf, .nav-lista, .pestanas) :is(a, button) { transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--rapido) var(--curva) }
:is(.barra-inferior, .barra-inf, .nav-lista, .pestanas) :is(a, button):active { transform: scale(.98) }

/* Foco: aparece en su sitio, nunca se desplaza (cientos de veces al día) */
:where(a, button, input, select, textarea, summary, [tabindex]) { outline: 3px solid transparent; outline-offset: 2px; transition: outline-color var(--rapido) var(--curva) }

/* Página: evita el salto — cada navegación es una carga PHP completa */
.contenido > .interior { animation: oc-pagina var(--normal) var(--curva) backwards }
@keyframes oc-pagina { from { opacity: 0; transform: translateY(6px) } }

/* Hoja: consistencia espacial — sube desde la barra inferior y baja por donde
   sube. @starting-style + allow-discrete, sin JS; sin soporte, salto seco */
dialog.hoja { visibility: visible; transform: translateY(100%); transition: transform var(--normal) var(--curva), overlay var(--normal), display var(--normal); transition-behavior: allow-discrete }
dialog.hoja[open] { transform: translateY(0) }
@starting-style { dialog.hoja[open] { transform: translateY(100%) } }
dialog.hoja::backdrop { background: color-mix(in srgb, var(--teal-900) 50%, transparent); opacity: 0; transition: opacity var(--normal) var(--curva), overlay var(--normal), display var(--normal); transition-behavior: allow-discrete }
dialog.hoja[open]::backdrop { opacity: 1 }
@starting-style { dialog.hoja[open]::backdrop { opacity: 0 } }

/* Modal: estado — centrado, y sale más rápido que entra: ya se decidió */
dialog.modal { animation: none; opacity: 0; transform: scale(.96); transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva), overlay var(--rapido), display var(--rapido); transition-behavior: allow-discrete }
dialog.modal[open] { opacity: 1; transform: scale(1); transition-duration: var(--normal) }
@starting-style { dialog.modal[open] { opacity: 0; transform: scale(.96) } }
dialog.modal::backdrop { opacity: 0; transition: opacity var(--rapido) var(--curva), overlay var(--rapido), display var(--rapido); transition-behavior: allow-discrete }
dialog.modal[open]::backdrop { opacity: 1; transition-duration: var(--normal) }
@starting-style { dialog.modal[open]::backdrop { opacity: 0 } }

/* Toast: entra y sale por el mismo borde (abajo en teléfono, derecha en
   escritorio). Transiciones: llegan varios seguidos. .saliendo a los 5 s -- */
.toast { animation: none; opacity: 1; transform: translateY(0); transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva) }
@starting-style { .toast { opacity: 0; transform: translateY(12px) } }
.toast.saliendo { opacity: 0; transform: translateY(12px); transition-duration: var(--rapido) }

/* Alerta: evita el salto. La altura NO se anima: reflow caro, sin ganancia */
.alerta { transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva) }
.alerta.saliendo { opacity: 0; transform: scale(.98) }

/* Barra inferior: estado — marca coral sobre la sección en curso */
.barra-inferior a, .barra-inf a, .barra-inferior button, .barra-inf button { position: relative }
.barra-inferior [aria-current="page"]::after, .barra-inf [aria-current="page"]::after { content: ""; position: absolute; top: 0; left: 50%; width: 24px; height: 3px; margin-left: -12px; border-radius: var(--r-pill); background: var(--coral-500); animation: oc-indicador var(--normal) var(--curva) backwards }
@keyframes oc-indicador { from { transform: scaleX(.3); opacity: 0 } }

/* Esqueleto: la única animación larga; dice "sigo trabajando" */
.esqueleto { animation: oc-brillo var(--brillo) ease-in-out infinite }
@keyframes oc-brillo { to { background-position: 0 0 } }

@media (min-width: 900px) {
  /* Pestañas: el subrayado crece hacia sus extremos (móvil = chips) */
  .pestanas a, .pestanas button { position: relative }
  .pestanas .on, .pestanas .on:hover { border-bottom-color: transparent }
  .pestanas .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: var(--r-pill); background: var(--coral-500); animation: oc-subraya var(--normal) var(--curva) backwards }
  @starting-style { .toast { opacity: 0; transform: translateX(16px) } }
  .toast.saliendo { transform: translateX(16px) }
}
@keyframes oc-subraya { from { transform: scaleX(.35); opacity: 0 } }

/* Filas: solo con ratón fino (en táctil el hover se queda pegado) */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .fila-enlace { transition: background-color var(--rapido) var(--curva) }
}

/* MOVIMIENTO REDUCIDO: se conserva el cambio de estado, se quita el desplazar.
   app.css ya recorta duraciones; aquí se anulan transform y se para el brillo */
@media (prefers-reduced-motion: reduce) {
  .btn:active, :is(.barra-inferior, .barra-inf, .nav-lista, .pestanas) :is(a, button):active { transform: none }
  .contenido > .interior { animation: none }
  dialog.hoja { opacity: 0; transform: none }
  dialog.hoja[open] { opacity: 1; transform: none }
  @starting-style { dialog.hoja[open] { opacity: 0; transform: none } }
  dialog.modal, dialog.modal[open] { transform: none }
  @starting-style { dialog.modal[open] { transform: none } }
  .toast, .toast.saliendo { transform: none }
  @starting-style { .toast { opacity: 0; transform: none } }
  .alerta.saliendo { transform: none }
  .pestanas .on::after, .barra-inferior [aria-current="page"]::after, .barra-inf [aria-current="page"]::after { animation: none }
  .esqueleto { animation: none; background: var(--gris-100) }
}