/* kelco-design 0.9.1 — base.css. Generado por scripts/build.js desde src/: no editar. */
/* ── Base de marca Kelco ──────────────────────────────────────────────────
   Import obligatorio en todo consumidor, después de tokens (theme.css o
   tokens.css). Va en @layer base: las reglas propias del sitio, sin capa o en
   capas posteriores, le ganan; los !important de reduced-motion, al estar en
   capa, le ganan a los !important sin capa del sitio.

   Lo que depende de la estructura de un sitio (scroll-padding de la nav,
   [data-reveal], estado sin JS) queda en ese sitio.                         */

@layer base {
  body {
    background: var(--color-ivory);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background: var(--color-petrol);
    color: var(--color-ivory);
  }

  /* El anillo por defecto del navegador varía entre motores y sobre tinta
     casi no se ve. Este es el mismo en todos los sitios. */
  :focus-visible {
    outline: 2px solid var(--color-bronze);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Los titulares de Kelco van siempre en minúscula. */
  h1,
  h2 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-heading);
    text-transform: lowercase;
  }

  /* Con un kelco-dialog abierto como modal, la página de atrás no se
     desplaza: ni con la rueda o el dedo sobre la cabecera o el pie, ni sobre
     un cuerpo que no se desplaza o que llegó a su tope (overscroll-behavior
     no corta el encadenamiento desde algo que no se desplaza). Es del
     diálogo, pero va acá y no en components.css porque su sujeto es la
     página y allá cada selector arranca en una clase kelco-.

     El overflow va en body y no en html: con html en visible, el de body
     pasa a la ventana y body no se vuelve una caja que se desplaza. En html,
     un body con overflow-x: hidden (un sitio lo pone para cortar lo que
     sobresale de costado) dejaría de pasarlo y pasaría a ser esa caja, y una
     barra sticky de la página saltaría fuera de la vista mientras el diálogo
     está abierto.

     scrollbar-gutter: stable guarda el lugar de la barra que overflow:
     hidden saca, así la página no se corre de costado al abrir ni al cerrar
     donde la barra ocupa lugar. Va en html: la ventana lo toma de ahí, no de
     body. Donde la barra se superpone (macOS, iOS, Android) no hay nada que
     guardar. En una página que no se desplaza y con barras que ocupan lugar,
     el hueco aparece al abrir. */
  html:has(.kelco-dialog[open]:modal) {
    scrollbar-gutter: stable;
  }

  html:has(.kelco-dialog[open]:modal) body {
    overflow: hidden;
  }
}

/* ── Animaciones de entrada ───────────────────────────────────────────────
   Con prefijo kelco-: un @keyframes con el mismo nombre en un sitio o una
   librería pisaría al de marca en silencio (gana el último).                */

@keyframes kelco-mask-up {
  from {
    transform: translateY(112%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes kelco-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes kelco-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(64px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Como fade-in-up, con un recorrido corto: para una pieza que aparece sobre
   la página, como el diálogo. */
@keyframes kelco-fade-in-up-sm {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kelco-float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ── Animaciones de respuesta ─────────────────────────────────────────────
   Para un control que confirma lo que se hizo (kelco-copy-field al copiar).
   Sin from (kelco-pop tampoco tiene to): arrancan en el estilo del elemento
   y, sin fill-mode, al terminar queda ése. Con prefers-reduced-motion se ve
   el estado final, sin movimiento.                                          */

/* Un apretón: el elemento se achica y vuelve a su tamaño. */
@keyframes kelco-pop {
  30% {
    transform: scale(0.86);
  }
}

/* Un anillo que sale del borde del elemento y se desvanece. Arranca en la
   sombra del elemento: el componente pone ahí el color del anillo con
   extensión 0 (box-shadow: 0 0 0 0 <color>), que no se ve. */
@keyframes kelco-ring {
  to {
    box-shadow: 0 0 0 12px transparent;
  }
}

/* ── prefers-reduced-motion ───────────────────────────────────────────────
   La parte que vale para cualquier sitio: se apaga todo el movimiento. Las
   excepciones ligadas a la estructura de una página ([data-reveal] y
   similares) las agrega cada sitio.                                         */

@layer base {
  @media (prefers-reduced-motion: reduce) {
    /* !important: el sitio pone smooth fuera de esta capa. */
    html {
      scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    /* El fondo de un diálogo modal: * no lo alcanza. Va en una regla aparte
       porque un navegador que no conoce ::backdrop descartaría la lista
       entera, y con ella la regla de arriba. */
    ::backdrop {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}