/* ─────────────────────────────────────────────────────────────────────────────
   FLMM Design System · Grafito · capa base
   Fuente de verdad: flmm-hub/design-system/base.css

   NO EDITAR ESTE ARCHIVO EN LOS PRODUCTOS. Se edita en el hub y se copia.

   CSS plano, sin `@apply`: así lo consumen igual Tailwind 4 y Landing
   Optimizer, que no usa Tailwind.
   ──────────────────────────────────────────────────────────────────────────── */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-public-sans), 'Public Sans', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Los títulos van en Archivo con tracking negativo: es la firma tipográfica
     de la marca y lo que hace reconocible una pantalla FLMM. */
  h1,
  h2,
  h3,
  h4,
  .font-display {
    font-family: var(--font-archivo), 'Archivo', var(--font-public-sans), sans-serif;
    letter-spacing: -0.02em;
  }

  /* Foco visible propio. Los elementos nativos se quedaban con el anillo del
     navegador, que sobre fondo oscuro casi no se ve. */
  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::selection {
    background: var(--brand-soft);
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--muted-foreground) 35%, transparent);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
  }
}

/* Fuera de la capa: son utilidades, no estilos base, y tienen que poder
   ganarle a los estilos de componente. */

/* Sin esto un 1 y un 8 ocupan distinto y las cifras bailan al actualizarse. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

@keyframes flmm-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.skeleton {
  background: var(--muted);
  border-radius: calc(var(--radius) - 2px);
  animation: flmm-skeleton-pulse 1.6s ease-in-out infinite;
}

@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;
  }
}