/* buclea · base
 * ---------------------------------------------------------------------------
 * Reset corto, tipografía, foco visible, salto al contenido, movimiento
 * reducido e impresión. Nada de esto debe repetirse en ningún módulo.
 * Base tomada de modulos/digitalitzacio-4eso/styles.css, que era la mejor
 * de las tres, y pasada a los tokens de marca.
 */
@layer ui.base {
  *, *::before, *::after { box-sizing: border-box; }

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

  body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fons);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Jerarquía de docs/marca/identidad.md §04. El interlineado apretado de los
   * títulos es lo que hace que Lexend no parezca blanda. */
  h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
  h1 { font-size: 28px; }
  h2 { font-size: 21px; }
  h3 { font-size: 17px; }
  h4 { font-size: 15px; }
  p { margin: 0 0 var(--esp-3); }
  p:last-child { margin-bottom: 0; }

  a { color: var(--verd); text-underline-offset: 2px; }
  a:hover { color: var(--profund); }

  small { font-size: 12.5px; }

  code, kbd, samp, pre {
    font-family: var(--mono);
    font-size: .92em;
  }
  code {
    background: var(--paper);
    border: 1px solid var(--linia);
    border-radius: 6px;
    padding: .05em .4em;
  }
  pre { overflow-x: auto; }
  pre code { background: none; border: 0; padding: 0; }

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

  table { border-collapse: collapse; }

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

  /* --- foco ---------------------------------------------------------------
   * Visible siempre que venga del teclado, y con dos anillos para que se vea
   * tanto sobre papel como sobre el degradado. */
  :focus-visible {
    outline: 2px solid var(--verd);
    outline-offset: 2px;
    border-radius: var(--radi-petit);
  }
  :focus:not(:focus-visible) { outline: none; }

  /* --- salto al contenido -------------------------------------------------- */
  .ui-salta {
    position: absolute;
    left: var(--esp-3);
    top: -3rem;
    z-index: 100;
    background: var(--blanc);
    color: var(--profund);
    border: 2px solid var(--verd);
    border-radius: var(--radi-petit);
    padding: var(--esp-2) var(--esp-4);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--mov);
  }
  .ui-salta:focus { top: var(--esp-3); }

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

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

  /* --- impresión -------------------------------------------------------------
   * Las guías docentes y los informes del alumnado se imprimen de verdad.
   * Fuera degradados (beben tinta), fuera sombras, fuera cromo. */
  @media print {
    body { background: #fff; font-size: 11pt; }
    .ui-barra, .ui-peu, .ui-no-imprimir { display: none !important; }
    .ui-targeta { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
    .ui-btn { display: none; }
    a { color: inherit; text-decoration: underline; }
    a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
    h1, h2, h3 { break-after: avoid; }
    table, figure { break-inside: avoid; }
  }
}