/* styles.css — versión optimizada: mantenemos solo lo que Tailwind no trae */
/* Fuente */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }

/* Animaciones personalizadas (Tailwind CDN no trae estas por defecto) */
@keyframes fade-in { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
.animate-fade-in { animation: fade-in .5s ease-out both; }

@keyframes pop-in { 0%{transform:scale(.95);opacity:0} 100%{transform:scale(1);opacity:1} }
.animate-pop-in { animation: pop-in .2s ease-out both; }

@keyframes slide-in { 0%{transform:translate(-50%,-10px);opacity:0} 100%{transform:translate(-50%,0);opacity:1} }
.animate-slide-in { animation: slide-in .25s ease-out both; }

/* Spinner de carga */
.loading-spinner{
  width:24px;height:24px;border:3px solid rgba(14,165,233,.2);
  border-radius:9999px;border-top-color:#0ea5e9;animation:spin 1s ease-in-out infinite
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Impresión */
@media print {
  .no-print { display: none !important; }
  body * { visibility: visible; }
  .print-section { position: absolute; left: 0; top: 0; width: 100%; }
}

#notification-root {
  position: fixed;
  top: 0.75rem; /* 12px */
  right: 0.75rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none; /* no bloquea clics */
}

#notification-root > div {
  pointer-events: auto;
  max-width: 280px;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}