/* Tokens de color propios de este archivo — no dependen de la paleta
   "dorado" de Tailwind (que hoy no está definida en tailwind.config.js),
   son solo los colores que se usan acá abajo, centralizados en un lugar
   en vez de repetidos como hex sueltos. */
:root {
    --toast-success-bg: #f0fdf4;
    --toast-success-border: #bbf7d0;
    --toast-success-text: #15803d;
    --toast-error-bg: #fef2f2;
    --toast-error-border: #fecaca;
    --toast-error-text: #b91c1c;
    --drawer-handle-color: #d9c9a3;
}

/* ===== Toasts (estilo Sonner) ===== */
.toast-viewport {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    pointer-events: none;
}
@media (min-width: 640px) {
    .toast-viewport { left: auto; align-items: flex-end; }
}

.toast {
    pointer-events: auto;
    width: 100%;
    max-width: 24rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem 0.75rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    position: relative;
    cursor: pointer;
}
.toast--success { background: var(--toast-success-bg); border-color: var(--toast-success-border); color: var(--toast-success-text); }
.toast--error   { background: var(--toast-error-bg); border-color: var(--toast-error-border); color: var(--toast-error-text); }

.toast-close {
    position: absolute; top: .5rem; right: .6rem;
    color: #9ca3af; background: none; border: 0; cursor: pointer;
    line-height: 1; font-size: 1rem;
}
.toast-close:hover { color: #6b7280; }

/* Entrada ~220ms ease-out (curva "sin rebote, rápida al final") — salida
   ~150ms ease-in, más corta: lo que desaparece debe sentirse más rápido
   que lo que aparece. */
.toast-enter-active { transition: transform 220ms cubic-bezier(.16,1,.3,1), opacity 220ms ease-out; }
.toast-leave-active  { transition: transform 150ms cubic-bezier(.4,0,1,1), opacity 150ms ease-in; }
.toast-enter-start, .toast-leave-end   { opacity: 0; transform: translateY(8px) scale(.98); }
.toast-enter-end,   .toast-leave-start { opacity: 1; transform: translateY(0) scale(1); }
@media (min-width: 640px) {
    .toast-enter-start, .toast-leave-end   { transform: translateY(0) translateX(8px) scale(.98); }
    .toast-enter-end,   .toast-leave-start { transform: translateY(0) translateX(0) scale(1); }
}

/* ===== Drawer (estilo Vaul) ===== */
/* overscroll-behavior: contain corta la "cadena" de scroll hacia la página
   de atrás — sin esto, al llegar al límite del overlay (que no tiene
   contenido para scrollear) el navegador seguía el gesto hacia la página
   detrás del modal, dando la sensación de que "se mueve" el fondo. */
.drawer-overlay { overscroll-behavior: contain; }

/* Animación por clase (.drawer-visible), no por x-transition de Alpine — se
   probó con x-transition anidado dentro de <template x-if> y no disparaba de
   forma confiable. Este mecanismo es más simple: arranca en el estado
   "cerrado" (definido acá abajo), y JS le agrega .drawer-visible un par de
   frames después de montarse (ver x-init en modal-drawer.blade.php, patrón
   de doble requestAnimationFrame para garantizar que el navegador pinte el
   estado inicial antes de animar al final). El :style del arrastre vive en
   este MISMO elemento (no en un hijo aparte) para que toda la tarjeta —
   fondo, texto, botón de cerrar — se mueva junta; separarlos en un hijo
   causaba que el botón "X" (position:absolute) se desacoplara visualmente,
   porque un transform en un ancestro crea un nuevo contexto de posición
   para sus descendientes absolutos.
   Solo anima la apertura — al cerrar (X, arrastre, o "Cancelar" de cada
   formulario) el modal desaparece al instante, sin animación de salida. */
.drawer-panel {
    transition: transform 250ms cubic-bezier(.16,1,.3,1), opacity 200ms ease-out;
    border-radius: 0.25rem; /* mismo valor que la clase "rounded" de Tailwind hoy */
    opacity: 0;
    transform: translateY(100%);
}
.drawer-panel.drawer-visible { opacity: 1; transform: translateY(0); }

.drawer-handle { display: none; }

@media (max-width: 639px) {
    .drawer-panel { border-radius: 1rem 1rem 0 0; max-height: 92dvh; overflow-y: auto; }
    .drawer-handle {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 9999px;
        background: var(--drawer-handle-color);
        margin: 0 auto 12px auto;
    }
}

@media (min-width: 640px) {
    /* max-height + overflow-y: auto también en desktop — sin esto, un modal
       más alto que la pantalla (ej. Pedido, con muchos campos) quedaba
       centrado con align-items:center y la parte de arriba se recortaba sin
       forma de llegar a ella con scroll (bug conocido del centrado flex con
       contenido más alto que el contenedor). Con el límite acá, el panel
       mismo scrollea internamente y siempre se puede llegar al principio. */
    .drawer-panel { transform: scale(.96); max-height: 85vh; overflow-y: auto; }
    .drawer-panel.drawer-visible { transform: scale(1); }
}