/* RawPace · la ayuda (wiki), T-wiki-web-0. Va después de site.css y solo en /es/ayuda/ y /help/: usa sus fuentes,
   sus colores (los dos temas) y su .wrap. Sin scripts propios. */

.wiki .wrap { padding-top: 28px; padding-bottom: 64px; }

/* Migas */
.wiki-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 15px; color: var(--tx3); }
.wiki-crumbs li { display: flex; align-items: center; min-width: 0; }
.wiki-crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--line); }
.wiki-crumbs a { color: var(--tx3); text-decoration: none; }
.wiki-crumbs a:hover { color: var(--tx); text-decoration: underline; }
.wiki-crumbs [aria-current="page"] { color: var(--tx); overflow-wrap: anywhere; }

/* Página: en móvil, una columna (migas, texto y, al final, el índice de páginas) */
.wiki-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.wiki-body { min-width: 0; max-width: 760px; }
.wiki-body h1, .wiki-index h1 { font-size: 40px; line-height: 1.05; overflow-wrap: break-word; hyphens: auto; }
.wiki-body section { margin-top: 36px; }
.wiki-body h2 { font-size: 27px; line-height: 1.15; }
.wiki-body p, .wiki-body ul, .wiki-body ol, .wiki-body table { margin-top: 14px; color: var(--tx2); }
.wiki-body ul, .wiki-body ol { padding-left: 22px; }
.wiki-body li + li { margin-top: 6px; }
.wiki-body strong { color: var(--tx); font-weight: 600; }
.wiki-body .lead, .wiki-lead { font-size: 19px; color: var(--tx2); margin-top: 16px; }
/* Tablas (vibraciones, gestos…): se desplazan dentro de su caja, nunca la página. */
.wiki-table { overflow-x: auto; margin-top: 14px; }
.wiki-table table { border-collapse: collapse; width: 100%; font-size: 16px; margin: 0; }
.wiki-table th, .wiki-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.wiki-table th { color: var(--tx); font-weight: 600; }

/* Hueco de texto que falta (BORRADOR): se ve, para que no se publique con él. */
.wiki-pending { border: 1px dashed var(--betaLine); background: var(--betaBg); border-radius: 12px; padding: 10px 14px; color: var(--tx3); font-size: 15px; }
.wiki-pending.wiki-lead { font-size: 15px; }

/* «Llega en la 0.3» (T-wiki-web-3, E-179): lo que aún no está en la versión de Play. Una etiqueta, no un aviso.
   Se quitan todas de golpe con scripts/web/quitar_etiquetas_03.py cuando la 0.3 llegue a Play. */
.wiki-version { display: inline-block; vertical-align: 1px; margin-left: 5px; padding: 0 8px; border: 1px solid var(--betaLine); border-radius: 999px; background: var(--betaBg); color: var(--accSoft); font-size: 13px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.wiki-body h1 + .wiki-version, .wiki-body h2 + .wiki-version { margin: 10px 0 0; }

/* Capturas: el reloj recortado en redondo (las PNG son cuadradas, sin máscara); el móvil tal cual. */
.wiki-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 24px 18px; margin-top: 20px; max-width: 700px; }
.wiki-shot { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.wiki-shot a { display: block; width: 100%; border-radius: inherit; }
.wiki-shot img { display: block; width: 100%; height: auto; background: var(--watch); }
.wiki-shot--watch a, .wiki-shot--watch img { border-radius: 50%; }
.wiki-shot--watch { padding: 6px; }
.wiki-shot--watch img { aspect-ratio: 1; box-shadow: 0 0 0 6px var(--ring), 0 14px 32px var(--shadow); }
.wiki-shot--phone a, .wiki-shot--phone img { border-radius: 14px; }
.wiki-shot--phone img { aspect-ratio: 1080 / 1920; box-shadow: 0 0 0 4px var(--ring), 0 14px 32px var(--shadow); }
.wiki-shot figcaption { font-size: 14px; line-height: 1.35; color: var(--tx3); text-align: center; }
.wiki-shot a:focus-visible { outline-offset: 4px; }
/* Hueco de una captura que falta (como .watch-pending de la portada). */
.wiki-shot-pending { width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14%; border: 2px dashed var(--line); background: var(--surf); color: var(--tx3); font-size: 13px; line-height: 1.35; }
.wiki-shot--watch .wiki-shot-pending { aspect-ratio: 1; border-radius: 50%; }
.wiki-shot--phone .wiki-shot-pending { aspect-ratio: 1080 / 1920; border-radius: 14px; padding: 10%; }

/* Ver también, y anterior / siguiente */
.wiki-policy { font-weight: 600; }
.wiki-related { margin-top: 44px; padding: 20px 22px; background: var(--surf); border: 1px solid var(--line); border-radius: 18px; }
.wiki-related h2 { font-size: 22px; }
.wiki-related ul { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.wiki-related li + li { margin-top: 0; }
.wiki-pager { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wiki-pager a { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; color: var(--tx); text-decoration: none; font-weight: 600; overflow-wrap: break-word; }
.wiki-pager a:hover { border-color: var(--accSoft); }
.wiki-pager span { font-size: 14px; font-weight: 400; color: var(--tx3); }
.wiki-next { text-align: right; }

/* Índice de páginas (al final en móvil, a la izquierda en escritorio) */
.wiki-side { border-top: 1px solid var(--line2); padding-top: 24px; font-size: 16px; }
.wiki-side-title { font-size: 24px; }
.wiki-side-title a { color: var(--tx); text-decoration: none; }
.wiki-side h3 { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--tx3); margin: 20px 0 6px; }
.wiki-side ul { list-style: none; margin: 0; padding: 0; }
.wiki-side li a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: 8px; color: var(--tx2); text-decoration: none; line-height: 1.3; }
.wiki-side li a:hover { color: var(--tx); background: var(--chip); }
.wiki-side a[aria-current="page"] { color: var(--tx); background: var(--chip); font-weight: 600; box-shadow: inset 3px 0 0 var(--acc); }

/* Portada de la ayuda: los grupos en tarjetas */
.wiki-index .wiki-lead, .wiki-index > .wiki-pending { max-width: 760px; }
.wiki-index h1 { margin-top: 20px; }
.wiki-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.wiki-group { background: var(--surf); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.wiki-group h2 { font-size: 26px; line-height: 1.1; }
.wiki-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wiki-group a { color: var(--accSoft); font-weight: 600; }

@media (min-width: 760px) {
  .wiki-body h1, .wiki-index h1 { font-size: 48px; }
  .wiki-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiki-next:only-child { grid-column: 2; }
  .wiki-shots { grid-template-columns: repeat(auto-fill, minmax(170px, 210px)); gap: 28px 24px; }
  .wiki-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1100px) {
  .wiki .wrap { padding-top: 40px; padding-bottom: 96px; }
  .wiki-layout { grid-template-columns: 260px minmax(0, 1fr); column-gap: 56px; row-gap: 20px; }
  .wiki-crumbs { grid-column: 2; }
  .wiki-body { grid-column: 2; grid-row: 2; }
  .wiki-side { grid-column: 1; grid-row: 1 / span 2; border-top: 0; padding-top: 0; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; }
  .wiki-body h1, .wiki-index h1 { font-size: 56px; }
  .wiki-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}