/* ============================================================
   Strigard — Guides / Academy.
   Load AFTER auth.css: every colour, radius and font here comes from the
   tokens it defines, so this section cannot drift from the rest of the site.
   ============================================================ */

/* ---------- layout: sidebar + content ---------- */
.guides-layout {
  max-width: 1320px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr; gap: 0;
}

.guides-main { min-width: 0; padding: 36px 0 72px; }

/* ---------- sidebar ---------- */
.guides-sidebar {
  border-bottom: 1px solid var(--border);
  padding: 0 0 8px;
  /* El <aside> se sirve VACÍO y lo rellena guides-shell.js. Por debajo de
     1000px va encima del artículo, así que sin esto mide 9px al pintar y salta
     a ~58px cuando entra el botón, empujando toda la guía hacia abajo. Eso es
     CLS en todas las guías y en móvil.

     El 58 sale de sumar el botón colapsado —28px de padding más 20,5 de línea
     (0.8rem por el line-height 1.6 de auth.css)— y los 8 de padding y 1 de
     borde de aquí. Si cambia el padding o el tamaño de letra de
     .guides-sidebar-toggle, hay que recalcularlo. */
  min-height: 58px;
}
.guides-sidebar-inner { padding: 8px 0 4px; }

/* Collapsed by default on narrow screens; the toggle flips this. */
.guides-sidebar-inner[hidden] { display: none; }

.guides-sidebar-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 2px;
  background: none; border: none;
  color: var(--text-secondary); font-family: var(--font);
  font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
}
.guides-sidebar-toggle:hover { color: var(--text-primary); }
.guides-sidebar-toggle .chev {
  width: 16px; height: 16px; flex: 0 0 auto;
  transition: transform .2s ease;
}
.guides-sidebar-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.guides-group + .guides-group { margin-top: 22px; }
/* El título iba en --text-tertiary, más apagado que las propias guías de
   debajo, y encima del mismo color que los "Coming soon": la jerarquía estaba
   al revés y por eso no se distinguía. Sube a --text-primary, por encima de
   ambos. Inter es variable (100-900), así que el 800 es un peso real y no una
   negrita sintética del navegador. */
.guides-group-title {
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-primary);
  margin: 0 0 8px; padding: 0 10px;
}

.guides-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 0.9rem;
  border-left: 2px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.guides-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.guides-link.is-active {
  color: var(--text-primary);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
/* A category with nothing published yet: visible, so the reader can see what
   is coming, but clearly not a link. */
.guides-link.is-empty { color: var(--text-tertiary); cursor: default; }
.guides-link.is-empty:hover { background: none; color: var(--text-tertiary); }
.guides-link .count {
  font-size: 0.72rem; color: var(--text-tertiary);
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 100px; padding: 1px 7px; flex: 0 0 auto;
}

/* ---------- page head ---------- */
.guides-head { margin-bottom: 38px; }
.guides-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.guides-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px 1px var(--accent);
}
.guides-head h1 {
  font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 12px;
  background: linear-gradient(180deg, #fff 0%, #c4c7cd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.guides-head p {
  color: var(--text-secondary); font-size: 1.02rem;
  max-width: 62ch; margin: 0;
}

/* ---------- cards ---------- */
.guides-section + .guides-section { margin-top: 52px; }
.guides-section-title {
  font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin: 0 0 18px;
}

.guides-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }

.guide-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 190px; padding: 22px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.guide-card::after {
  /* soft accent wash in the corner, same trick the pricing card uses */
  content: ''; position: absolute; inset: -40% -40% auto auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.guide-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
  transform: translateY(-2px);
}
.guide-card:hover::after { opacity: 1; }
.guide-card > * { position: relative; z-index: 1; }

.guide-card-media {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.guide-card-media svg { width: 22px; height: 22px; color: var(--accent); }
.guide-card-thumb {
  width: 100%; height: 128px; margin-bottom: 16px;
  object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-elevated);
}

.guide-card h3 {
  font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 7px;
}
.guide-card p {
  color: var(--text-secondary); font-size: 0.92rem;
  line-height: 1.6; margin: 0 0 16px;
}

.guide-card-meta {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; font-size: 0.78rem; color: var(--text-tertiary);
}
.guide-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 100px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-secondary); font-weight: 500;
}
.guide-tag.is-soon {
  color: var(--gold); border-color: rgba(227, 179, 74, 0.28);
  background: rgba(227, 179, 74, 0.08);
}
.guide-card-arrow {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-tertiary); font-weight: 600;
  transition: color .2s ease, transform .2s ease;
}
.guide-card:hover .guide-card-arrow { color: var(--accent); transform: translateX(2px); }
.guide-card-arrow svg { width: 14px; height: 14px; }

.guide-card.is-soon { opacity: 0.82; }

/* ---------- individual guide page ---------- */
.guide-article { max-width: 780px; }
.guide-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: 18px;
}
.guide-breadcrumb a { color: var(--text-secondary); }
.guide-breadcrumb a:hover { color: var(--text-primary); }
.guide-breadcrumb .sep { opacity: 0.45; }

.guide-article h1 {
  font-size: clamp(1.8rem, 4.4vw, 2.6rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 14px;
  color: var(--text-primary);
}
.guide-lead {
  color: var(--text-secondary); font-size: 1.05rem;
  line-height: 1.7; margin: 0 0 8px;
}
.guide-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 34px; padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

/* Content blocks. Reuses .prose from legal.css for text, and adds the
   pieces a guide needs that a legal document does not. */
.guide-section { margin: 0 0 44px; }
.guide-section h2 {
  font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin: 0 0 14px; scroll-margin-top: 84px;
}
.guide-section h3 {
  font-size: 1.05rem; font-weight: 650;
  color: var(--text-primary); margin: 26px 0 10px;
}
.guide-section p { color: var(--text-secondary); line-height: 1.75; margin: 0 0 15px; }
.guide-section ul, .guide-section ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-secondary); }
.guide-section li { margin-bottom: 8px; line-height: 1.7; }
.guide-section li::marker { color: var(--text-tertiary); }
.guide-section strong { color: var(--text-primary); font-weight: 600; }
.guide-section a { color: var(--accent); }
.guide-section a:hover { text-decoration: underline; }

/* 16:9 video slot. Keeps its shape before anything is embedded, so the page
   does not jump when the iframe arrives. */
.guide-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin: 0 0 16px;
}
.guide-video iframe, .guide-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.guide-video-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-tertiary); font-size: 0.9rem;
}
.guide-video-empty svg { width: 34px; height: 34px; opacity: 0.5; }

.guide-figure { margin: 0 0 18px; }
.guide-figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-secondary);
}
.guide-figure figcaption {
  margin-top: 9px; font-size: 0.85rem; color: var(--text-tertiary); text-align: center;
}

/* Placeholder for a slot with no content yet. */
.guide-placeholder {
  padding: 26px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius); background: rgba(255,255,255,0.015);
  color: var(--text-tertiary); font-size: 0.92rem; line-height: 1.6;
}

.guide-callout {
  display: flex; gap: 13px; padding: 16px 18px; margin: 0 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-secondary);
  color: var(--text-secondary); font-size: 0.93rem; line-height: 1.65;
}
.guide-callout strong { color: var(--text-primary); }

/* Texto literal de la interfaz del bot: nombres de fichero, líneas de estado.
   Mismo tratamiento que .prose code en legal.css, pero las guías no cargan esa
   hoja, así que se repite aquí en vez de arrastrar todo legal.css. */
.guide-article code {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; font-size: 0.9em;
  color: var(--text-primary);
}
/* Variante para una línea suelta que se lee como un bloque. */
.guide-article code.guide-code {
  display: inline-block; padding: 9px 14px; font-size: 0.88rem;
}

/* previous / next */
.guide-nav {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--border);
}
.guide-nav a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 15px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-secondary);
  transition: border-color .2s ease, background .2s ease;
}
.guide-nav a:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.guide-nav .label {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-tertiary); font-weight: 600;
}
.guide-nav .title { color: var(--text-primary); font-weight: 600; font-size: 0.95rem; }
.guide-nav .next { text-align: right; }

/* ---------- empty state ---------- */
.guides-empty {
  padding: 46px 26px; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  color: var(--text-tertiary);
}

/* ============================================================
   Responsive. Mobile first above; the sidebar only becomes a real
   column once there is room for it.
   ============================================================ */
@media (min-width: 640px) {
  .guides-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-nav { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .guides-layout {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 46px;
    align-items: start;
  }
  .guides-sidebar {
    position: sticky; top: var(--nav-h, 64px);
    max-height: calc(100vh - var(--nav-h, 64px));
    overflow-y: auto;
    padding: 32px 0 40px;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding-right: 18px;
    /* Aquí es una columna aparte: lo que crezca no empuja al artículo, así que
       la altura mínima que se reserva en móvil no pinta nada. */
    min-height: 0;
  }
  .guides-sidebar-toggle { display: none; }
  /* On desktop the sidebar is always open, whatever the toggle last set. */
  .guides-sidebar-inner[hidden] { display: block; }
  .guides-main { padding: 40px 0 96px; }
  .guides-grid { gap: 20px; }
}

@media (min-width: 1240px) {
  .guides-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card, .guide-card::after, .guide-card-arrow,
  .guides-sidebar-toggle .chev { transition: none; }
  .guide-card:hover { transform: none; }
}

/* ============================================================
   Reproductor propio de las guías (guides-video.js)
   El <video> nace con controls por si el script no llega a ejecutarse; JS se
   lo quita y monta esto encima.
   ============================================================ */
.guide-video[data-player] { background: #000; cursor: pointer; }
.guide-video[data-player]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-video[data-player] video { object-fit: contain; background: #000; }

/* La capa no intercepta el clic: así pulsar sobre el vídeo sigue siendo
   play/pausa y sólo los controles reciben sus propios eventos. */
.gv { position: absolute; inset: 0; pointer-events: none; }
.gv > * { pointer-events: auto; }

.gv-big {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(124, 106, 247, 0.92); color: #fff;
  border: none; cursor: pointer;
  box-shadow: 0 14px 44px -12px rgba(0, 0, 0, 0.9);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
/* El triángulo pesa a la izquierda; los 3px lo centran ópticamente. */
.gv-big svg { width: 30px; height: 30px; margin-left: 3px; }
.gv-big:hover { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.guide-video.is-playing .gv-big {
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}

/* Fachada de YouTube (guides-video.js, segundo bloque). Es un enlace normal al
   vídeo con la miniatura propia; al pulsar, el JS lo cambia por el iframe. Reusa
   .gv-big para que el botón sea el mismo que el del reproductor propio. */
.guide-video[data-youtube] { background: #000; }
.gv-yt { position: absolute; inset: 0; display: block; cursor: pointer; }
.gv-yt img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.gv-yt:hover .gv-big, .gv-yt:focus-visible .gv-big {
  background: var(--accent); transform: translate(-50%, -50%) scale(1.06);
}
.gv-yt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Aviso de que al pulsar se carga desde YouTube: pulsar es la decisión de
   hablar con Google, así que se dice antes, no después. */
.gv-yt-note {
  position: absolute; right: 10px; bottom: 10px;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.72); color: #e6e6e6;
  font-size: 0.74rem; line-height: 1.4;
}

.gv-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
}

.gv-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: #fff;
  border-radius: 8px; cursor: pointer;
  transition: background .15s ease;
}
.gv-btn:hover { background: rgba(255,255,255,0.14); }
.gv-btn svg { width: 18px; height: 18px; }

/* tabular-nums: sin ello el ancho baila a cada segundo y arrastra la barra. */
.gv-time {
  flex: 0 0 auto;
  font-size: 0.78rem; color: #d6d8dd;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.gv-seek {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; min-width: 60px;
  height: 4px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(to right,
    var(--accent) var(--p, 0%), rgba(255,255,255,0.22) var(--p, 0%));
}
.gv-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border: none; border-radius: 50%; background: #fff;
}
.gv-seek::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: #fff; }
.gv-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* A pantalla completa el marco 16/9 estorba: hay que llenar la pantalla. */
.guide-video.is-full, .guide-video:fullscreen {
  aspect-ratio: auto; width: 100%; height: 100%;
  border: none; border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gv-big { transition: none; }
}

/* Pasos numerados de una guía. El número en morado los separa del texto
   corrido sin necesidad de más adornos. */
.guide-steps li { margin-bottom: 10px; }
.guide-steps li::marker { color: var(--accent); font-weight: 700; }
/* Los nombres de campos de la app (Origin X, Range, Search) van en <strong>:
   sobre texto secundario tienen que destacar para poder buscarlos en pantalla. */
.guide-section strong { color: var(--text-primary); font-weight: 600; }