/* ==========================================================================
   Retícula — reseteo y suelo de calidad.

   Ni un color, ni un tamaño, ni una tipografía con opinión.
   Todo eso lo aporta el plugin en la capa "tokens".
   ========================================================================== */

@layer reset {

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

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

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd,
  ul, ol { margin: 0; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

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

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

  button { background: none; border: 0; padding: 0; cursor: pointer; }

  a { color: inherit; }

  table { border-collapse: collapse; }

  /* Acordeones nativos: base neutra para <details>. */
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
}

@layer base {

  :root {
    /* Valores de reserva por si el plugin no está. El plugin los sobrescribe. */
    --ret-fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ret-texto: #1a1a1a;
    --ret-fondo: #ffffff;
    --ret-tenue: #5a5a5a;
    --ret-linea: #e2e2e2;
    --ret-foco: #2563eb;
    --ret-medida: 68ch;
    --ret-ancho: 1200px;
    --ret-margen-lateral: clamp(20px, 5vw, 48px);
  }

  html { scroll-behavior: smooth; }

  /* Contención: nada desborda el ancho de la ventana.
     clip y no hidden, porque hidden crearía un contenedor de scroll y
     rompería position: sticky en toda la página. */
  body {
    overflow-x: clip;
    max-inline-size: 100vw;
  }

  :where(img, video, iframe, canvas, svg, table, pre) { max-inline-size: 100%; }

  :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption, blockquote) {
    overflow-wrap: break-word;
  }

  body {
    font-family: var(--ret-fuente-base);
    color: var(--ret-texto);
    background: var(--ret-fondo);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .ret-principal { flex: 1; }

  /* --- Accesibilidad: suelo no negociable ------------------------------ */

  :focus-visible {
    outline: 2px solid var(--ret-foco);
    outline-offset: 3px;
    border-radius: 2px;
  }

  :target { scroll-margin-block-start: 6rem; }

  .ret-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 20px;
    background: var(--ret-fondo);
    color: var(--ret-texto);
    border: 2px solid var(--ret-foco);
  }
  .ret-saltar:focus { left: 8px; top: 8px; }

  .ret-oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @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;
      scroll-behavior: auto !important;
    }
  }

  /* --- Reserva sin plugin ----------------------------------------------
     Solo se aplica con la clase .ret--sin-plugin en el body.
     Objetivo: legible y navegable, no bonito.                            */

  .ret--sin-plugin .ret-cabecera__interior,
  .ret--sin-plugin .ret-principal > *,
  .ret--sin-plugin .ret-pie__interior {
    max-width: var(--ret-ancho);
    margin-inline: auto;
    padding-inline: var(--ret-margen-lateral);
  }

  .ret--sin-plugin .ret-cabecera { border-block-end: 1px solid var(--ret-linea); }
  .ret--sin-plugin .ret-cabecera__interior,
  .ret--sin-plugin .ret-pie__interior {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-block: 24px;
  }
  .ret--sin-plugin .ret-pie__interior { border-block-start: 1px solid var(--ret-linea); }
  .ret--sin-plugin .ret-cabecera__nav,
  .ret--sin-plugin .ret-pie__nav { margin-inline-start: auto; }
  .ret--sin-plugin .ret-cabecera__nombre { text-decoration: none; font-weight: 600; font-size: 1.1rem; }

  .ret--sin-plugin .ret-menu { display: flex; gap: 24px; flex-wrap: wrap; }
  .ret--sin-plugin .ret-menu a { text-decoration: none; }
  .ret--sin-plugin .ret-menu a:hover { text-decoration: underline; }

  .ret--sin-plugin .ret-articulo,
  .ret--sin-plugin .ret-listado__cabecera,
  .ret--sin-plugin .ret-aviso { padding-block: 48px 0; }

  .ret--sin-plugin .ret-articulo__titulo,
  .ret--sin-plugin .ret-listado__titulo,
  .ret--sin-plugin .ret-aviso h1 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 22ch;
  }

  .ret--sin-plugin .ret-articulo__meta { color: var(--ret-tenue); font-size: 0.875rem; margin-block-start: 10px; }
  .ret--sin-plugin .ret-articulo__imagen { margin-block: 32px; }
  .ret--sin-plugin .ret-articulo__cuerpo { max-width: var(--ret-medida); margin-block-start: 28px; }
  .ret--sin-plugin .ret-articulo__cuerpo > * + * { margin-block-start: 1.2em; }

  .ret--sin-plugin .ret-listado {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 36px;
    padding-block: 40px;
  }
  .ret--sin-plugin .ret-tarjeta__titulo { font-size: 1.2rem; font-weight: 600; margin-block-start: 12px; }
  .ret--sin-plugin .ret-tarjeta__titulo a { text-decoration: none; }
  .ret--sin-plugin .ret-tarjeta__extracto { color: var(--ret-tenue); font-size: 0.95rem; margin-block-start: 8px; }

  .ret--sin-plugin .ret-paginacion { padding-block-end: 48px; }
  .ret--sin-plugin .ret-paginacion .nav-links { display: flex; gap: 14px; flex-wrap: wrap; }

  .ret--sin-plugin .ret-aviso p { margin-block-start: 14px; max-width: var(--ret-medida); }
  .ret--sin-plugin .ret-aviso form { margin-block-start: 24px; }
}