/* Lo que Tailwind por CDN no cubre: animaciones y los estados de htmx. */

/* Avisos: entran desde arriba y se desvanecen al irse (static/js/app.js). */
.toast { animation: toast-in 0.2s ease-out; }
.toast-out { opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* El pop-up de un movimiento frenado. Entra en tres tiempos para que se note:
   el fondo se oscurece, la caja sube con un rebote, la mano saluda y lo que
   falta aparece de a un renglón. Al cerrarlo se encoge y se va
   (static/js/app.js le pone .alert-out). */
.alert { animation: alert-fade 0.2s ease-out; }
.alert-panel { animation: alert-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.alert-icon { animation: alert-wave 0.7s ease-in-out 0.3s; transform-origin: 50% 90%; }
.alert-reason { animation: alert-reason 0.3s ease-out backwards; }
.alert-reason:nth-child(1) { animation-delay: 0.2s; }
.alert-reason:nth-child(2) { animation-delay: 0.28s; }
.alert-reason:nth-child(3) { animation-delay: 0.36s; }
.alert-reason:nth-child(4) { animation-delay: 0.44s; }
.alert-reason:nth-child(n+5) { animation-delay: 0.52s; }
.alert-out { animation: alert-fade-out 0.18s ease-in forwards; }
.alert-out .alert-panel { animation: alert-pop-out 0.18s ease-in forwards; }
@keyframes alert-fade { from { opacity: 0; } }
@keyframes alert-fade-out { to { opacity: 0; } }
@keyframes alert-pop { from { opacity: 0; transform: translateY(1.5rem) scale(0.9); } }
@keyframes alert-pop-out { to { opacity: 0; transform: scale(0.94); } }
@keyframes alert-wave {
    20% { transform: rotate(-16deg); }
    45% { transform: rotate(12deg); }
    70% { transform: rotate(-8deg); }
    100% { transform: rotate(0); }
}
@keyframes alert-reason { from { opacity: 0; transform: translateX(-0.5rem); } }

/* Panel lateral: se desliza desde la derecha. */
.drawer-panel { animation: drawer-in 0.2s ease-out; }
@keyframes drawer-in { from { transform: translateX(2rem); opacity: 0; } }

/* Mientras el panel espera su contenido. */
#drawer:empty::after { content: "Loading\2026"; display: block; padding: 1rem 0; font-size: 0.875rem; color: #4a4a4a; }

/* Mientras htmx espera la respuesta: lo que se tocó se atenúa. */
[data-card].htmx-request, form.htmx-request, #drawer.htmx-request { opacity: 0.6; transition: opacity 0.15s; }

/* El asistente tarda unos segundos en contestar: el botón lo dice mientras tanto. */
.assistant-wait { display: none; }
form.htmx-request .assistant-send { display: none; }
form.htmx-request .assistant-wait { display: inline; }

@media (prefers-reduced-motion: reduce) {
    .toast, .drawer-panel, .alert, .alert-panel, .alert-icon, .alert-reason, .alert-out, .alert-out .alert-panel { animation: none; }
}