/* =========================================================================
   BASE — reset, tipografía, accesibilidad
   Consume solo tokens --kbl-*. Cero valores de color escritos a mano.
   ========================================================================= */

@layer base, layout, componentes, secciones;

@layer base {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background-color: var(--kbl-fondo);
    color: var(--kbl-tinta);
    font-family: var(--kbl-fuente);
    font-weight: var(--kbl-peso-texto);
    font-size: var(--kbl-t-16);
    line-height: var(--kbl-lh-16);
    /* Sin esto, una URL o una palabra larga desborda a 320 px */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }

  /* La regla svg{display:block} de más abajo le gana a la del navegador para
     [hidden]. Sin esto, ocultar un icono con el atributo hidden no hace nada. */
  [hidden] { display: none !important; }

  h1, h2, h3, h4 { margin: 0; }

  p, ul, ol, dl { margin: 0; }

  p { text-wrap: pretty; }

  ul, ol { padding-inline-start: var(--kbl-e-5); }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

  img, svg, video { max-width: 100%; height: auto; display: block; }

  button { font: inherit; color: inherit; }

  /* --- Foco -------------------------------------------------------------
     Un solo anillo para todo el sitio, en la tinta del tema. Nunca se apaga:
     si un componente necesita otra forma, cambia el offset, no el anillo. */
  :focus-visible {
    outline: 3px solid var(--kbl-foco);
    outline-offset: 2px;
  }

  :focus:not(:focus-visible) { outline: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  ::selection {
    background-color: var(--kbl-tinta);
    color: var(--kbl-fondo);
  }

  /* Texto solo para lectores de pantalla */
  .visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Salto al contenido: primer tabulable de la página */
  .salto-contenido {
    position: absolute;
    inset-inline-start: var(--kbl-e-4);
    inset-block-start: calc(-1 * var(--kbl-e-8));
    z-index: 100;
    padding: var(--kbl-e-3) var(--kbl-e-4);
    background-color: var(--kbl-superficie);
    color: var(--kbl-tinta);
    border: var(--kbl-borde) solid var(--kbl-linea-fuerte);
    border-radius: var(--kbl-radio);
    text-decoration: none;
    font-weight: var(--kbl-peso-medio);
    transition: inset-block-start var(--kbl-dur-corte) var(--kbl-ease-corte);
  }

  .salto-contenido:focus-visible { inset-block-start: var(--kbl-e-4); }
}