/* ─────────────────────────────────────────────────────────────
 * Empleum — CSS custom complementario a Tailwind.
 *
 * Tailwind se carga via Play CDN en index.php (config inline) y
 * cubre el 95% de los estilos. Este archivo agrega las utilities
 * que necesitan ser CSS puro (no se pueden hacer con clases
 * Tailwind inline).
 * ───────────────────────────────────────────────────────────── */

/* Smooth scroll global */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
}

::selection {
  background-color: hsl(88 65% 42%);
  color: hsl(0 0% 100%);
}

/* ─── Reduced motion: apaga animaciones y transiciones ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Utility: container-tight ─── */
/* Ancho responsive con padding escalable. Funciona como el "max-w-screen-2xl"
   pero con padding más grande en pantallas grandes. */
.container-tight {
  margin-inline: auto;
  width: 100%;
  max-width: 1800px;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  .container-tight { padding-inline: 2.5rem; }
}
@media (min-width: 1024px) {
  .container-tight { padding-inline: 4rem; }
}

/* ─── Utility: dot-grid background ─── */
.bg-dot-grid {
  background-image: radial-gradient(
    circle at 1px 1px,
    hsl(0 0% 0% / 0.06) 1px,
    transparent 0
  );
  background-size: 24px 24px;
}

/* ─── Utility: tabular numerals ─── */
.nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ─── Utility: subtle thin scrollbar ─── */
/* Aplica al panel de detalle sticky cuando el contenido excede viewport. */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: hsl(0 0% 4% / 0.18) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: hsl(0 0% 4% / 0.18);
  border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0 0% 4% / 0.35);
}

/* ─── Text balance helper (no todos los navegadores soportan text-wrap: balance) ─── */
.text-balance {
  text-wrap: balance;
}