/* /assets/css/custom.css */
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }

.preview-box {
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 20px 20px;
}

.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: spin 1s linear infinite;
    display: inline-block;
}

.valid-input { border-color: #10b981 !important; background-color: #f0fdf4 !important; }
.invalid-input { border-color: #ef4444 !important; background-color: #fef2f2 !important; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ... el resto de tu código anterior ... */

/* ESTILOS DEL TOAST (Notificaciones) */
#toast {
    position: fixed;
    top: 1.5rem;       /* Separación del techo */
    left: 50%;         /* Mover al centro horizontal */
    transform: translateX(-50%); /* Corregir el propio ancho para centrar exacto */
    z-index: 9999;     /* Asegurar que flota sobre todo */
    min-width: 320px;  /* Tamaño mínimo para que se lea bien */
    max-width: 90%;    /* Para que no se salga en móviles */
    
    /* Animación de entrada suave */
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Estado Oculto (para la animación JS) */
#toast.hidden {
    opacity: 0;
    transform: translate(-50%, -20px); /* Que suba un poco al desaparecer */
    visibility: hidden;
}

/* Variantes de color (Para asegurar que se ven bien) */
.toast-error { background-color: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.toast-success { background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.toast-info { background-color: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }