/* ══════════════════════════════════════════════════════════════════════════
   NexoCBD — complementos de la aplicación PHP.

   La identidad visual y los componentes editoriales vienen de `components.css`,
   portado del build original. Este archivo sólo añade lo que la aplicación
   necesita y el original no tenía como CSS reutilizable: el comportamiento
   plegable del menú y las listas de glosario, fuentes y resultados que aquí se
   generan desde la base de datos.

   Regla: si algo ya existe en `components.css`, NO se redefine aquí.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Menú en móvil ───────────────────────────────────────────────────────────
   El plegado lo resuelve `components.css`, portado del original: bajo 62rem
   oculta `.header__nav` y lo muestra con el atributo `data-open`, que pone el
   JavaScript. Aquí sólo se oculta el botón en escritorio, donde no hace falta.
   El botón nace `hidden` en el HTML: sin JavaScript el menú queda desplegado. */
@media (min-width: 62rem) {
  .header__toggle { display: none; }
}

/* ── Cabecera de páginas que no son guía ─────────────────────────────────── */
.page-head { padding-block: var(--sp-6, 2rem) var(--sp-3, 1rem); }
.page-head h1 { margin-bottom: 0.5rem; }

.page-head__lede {
  font-size: var(--step-1);
  color: var(--text-soft);
  max-width: 62ch;
}

/* ── Rejilla de tarjetas ─────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
  margin-block: 1.5rem;
}

@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Glosario ────────────────────────────────────────────────────────────── */
.glossary { display: grid; gap: 1rem; margin-block: 1.5rem; }

.term {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
  scroll-margin-top: 5rem;
}

.term h3 { font-size: var(--step-0); margin: 0 0 0.3rem; }
.term dd { margin: 0 0 0.4rem; }
.term__nuance { font-size: var(--step--1); color: var(--text-soft); }

/* ── Buscador ────────────────────────────────────────────────────────────── */
.search-form {
  display: flex;
  gap: 0.5rem;
  margin-block: 1.2rem;
  flex-wrap: wrap;
}

.search-form input {
  flex: 1 1 16rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  font: inherit;
  background: var(--surface-raised);
  color: var(--text);
}

.results { display: grid; gap: 1rem; margin-block: 1.5rem; }

/* ── Aviso de contenido pendiente en páginas que no son guía ─────────────── */
.pending-note {
  border: 1px solid var(--saffron);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--saffron) 12%, var(--surface));
  padding: 1rem 1.1rem;
  border-radius: var(--r-md, 0.5rem);
  margin-block: 1.5rem;
}

.pending-note h2 { font-size: var(--step-0); margin: 0 0 0.35rem; }
.pending-note p { margin: 0; font-size: var(--step--1); color: var(--text-soft); }

/* ── Aviso de previsualización ───────────────────────────────────────────── */
.aviso-previsualizacion {
  max-width: var(--medida-ancha, 72rem);
  margin: 1rem auto 0;
  padding: 0.75rem 1rem;
  border: 1px dashed #8A5620;
  border-radius: 0.5rem;
  background: #FCF2DF;
  color: #7A5A16;
  font-size: var(--step--1);
}

/* ── Respeto por la reducción de movimiento ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Home editorial: ritmo y equilibrio en escritorio ─────────────────── */
@media (min-width: 64.01rem) {
  .routes__head {
    grid-template-columns: minmax(0, .9fr) minmax(30rem, 1.1fr);
    padding: clamp(2rem, 3vw, 3.25rem) clamp(2rem, 4vw, 4rem);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: linear-gradient(120deg, rgb(255 255 255 / .72), rgb(226 235 218 / .42));
    box-shadow: 0 22px 60px -52px rgb(16 37 50 / .8);
  }
  .routes__map { inline-size: min(100%, 35rem); justify-self: center; opacity: 1; }

  .evidence__text {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    grid-template-rows: auto auto 1fr;
    gap: 0 clamp(2rem, 5vw, 5rem);
    padding: clamp(2rem, 4vw, 3.75rem);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--surface-raised), rgb(226 235 218 / .5));
  }
  .evidence__text > .kicker, .evidence__text > h2, .evidence__text > p { grid-column: 1; }
  .evidence__links {
    grid-column: 2; grid-row: 1 / 4; align-self: stretch;
    display: grid; gap: .65rem; margin: 0;
  }
  .evidence__links a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--r-md);
    background: rgb(255 255 255 / .72); text-decoration: none;
  }
  .evidence__links a:hover { border-color: var(--nexo-forest); transform: translateX(3px); }

  .observatory > .section-head {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .7fr);
    gap: .25rem clamp(2rem, 5vw, 5rem); align-items: end;
    padding-block: 0 var(--sp-6); border-bottom: 1px solid var(--rule);
  }
  .observatory > .section-head .kicker,
  .observatory > .section-head h2 { grid-column: 1; }
  .observatory > .section-head p {
    grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 1.1rem 1.2rem;
    border-inline-start: 3px solid var(--nexo-forest); background: var(--surface-raised);
  }

  .nl--media:not(:has(.nl__form)) {
    grid-template-columns: minmax(15rem, .65fr) minmax(0, 1.35fr);
    gap: clamp(2rem, 6vw, 6rem);
  }
  .nl--media:not(:has(.nl__form)) .nl__intro {
    min-height: 100%; display: grid; align-content: center;
    padding-inline: clamp(1rem, 3vw, 3rem); border-inline-start: 1px solid rgb(255 255 255 / .14);
  }
  .nl--media:not(:has(.nl__form)) .nl__desc { max-width: 52ch; font-size: var(--step-0); }
}

@media (min-width: 90rem) {
  .routes__head { grid-template-columns: minmax(0, .82fr) minmax(38rem, 1.18fr); }
  .routes__map { inline-size: min(100%, 42rem); }
}