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

  /* Hueco de la barra reservado: la página no se mueve cuando un diálogo la quita */
  html {
    scrollbar-gutter: stable both-edges;
  }

  /* El fondo no se desplaza bajo un diálogo modal */
  html:has(dialog[open]) {
    overflow: hidden;
  }

  body {
    margin: 0;
    background: var(--comp-fondo);
    color: var(--comp-texto);
    font-family: var(--fuente-texto);
    font-size: var(--texto-normal);
    font-weight: var(--peso-normal);
    line-height: var(--interlineado-texto);
  }

  h1, h2, p, ol, dl, dd, fieldset {
    margin: 0;
  }

  h1, h2 {
    text-wrap: balance;
  }

  p, li {
    text-wrap: pretty;
  }

  fieldset {
    min-inline-size: 0; /* por defecto no encoge por debajo de su contenido */
    padding: 0;
    border: 0;
  }

  legend {
    padding: 0;
  }

  button, select, input {
    font: inherit;
    color: inherit;
  }

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

  :focus-visible {
    outline: var(--anillo) solid var(--comp-cobalto);
    outline-offset: 2px;
  }

  .salto {
    position: absolute;
    inset-block-start: var(--espacio-3);
    inset-inline-start: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    background: var(--comp-cobalto);
    color: var(--comp-sobre-cobalto);
    border-radius: var(--radio-azulejo);
  }
}

@layer utilidades {
  [hidden] {
    display: none;
  }

  .solo-lector,
  .salto:not(:focus) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}