/* =====================================================================
   ITAX PERÚ — Sistema de Planillas
   styles.css — Estilos custom (animaciones + detalles que Tailwind
   no cubre). La mayor parte del estilo se aplica con clases Tailwind.
   ===================================================================== */

/* Montos siempre con cifras tabulares por defecto */
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Scrollbar sutil (tono azul corporativo) ---------- */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #C2D2E2; border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: #9DB4CC; }

/* ---------- Animaciones: Toast ---------- */
@keyframes itx-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes itx-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}
.itx-toast-in  { animation: itx-toast-in 150ms ease-out both; }
.itx-toast-out { animation: itx-toast-out 160ms ease-in both; }

/* ---------- Animaciones: Modal ---------- */
@keyframes itx-overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes itx-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes itx-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.itx-overlay-in  { animation: itx-overlay-in 150ms ease-out both; }
.itx-overlay-out { animation: itx-overlay-out 140ms ease-in both; }
.itx-modal-in    { animation: itx-modal-in 180ms cubic-bezier(.16,1,.3,1) both; }

/* ---------- Dropdown (header) ---------- */
@keyframes itx-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.itx-dropdown-in { animation: itx-dropdown-in 120ms ease-out both; }

/* ---------- Skeleton (loading states) ---------- */
@keyframes itx-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #F5F5F4 25%, #ECEBEA 37%, #F5F5F4 63%);
  background-size: 200% 100%;
  animation: itx-shimmer 1.4s ease-in-out infinite;
  border-radius: 0.375rem;
}

/* ---------- Chevron rotación (grupos sidebar) ---------- */
.itx-chevron { transition: transform 150ms ease; }
.itx-group-collapsed .itx-chevron { transform: rotate(-90deg); }
.itx-group-collapsed .itx-submenu { display: none; }

/* ---------- Transición base de hovers ---------- */
.itx-trans { transition: all 150ms ease; }