/* La ayuda (docs/AYUDA.md §3): bienvenida, temas, búsqueda y el selector del estilo de las capturas.
   Sólo variables del diseño de Ágora: claro y oscuro salen solos. */

/* ---------- Todo enlace de la ayuda, por omisión (2026-10-11) ----------
   La regla general del diseño compartido pinta cada enlace de azul Egeo subrayado. Nombrar lista por lista dejaba
   fuera la que se olvidara («Empieza aquí» se quedó azul), así que aquí va la base para todo enlace de la página que
   no sea un botón ni tenga ya su forma propia: bronce con un filete fino, como el pie. Las listas con su estilo
   —catálogo, relacionados, índice, sugerencias, migas, resultados, muestras— quedan fuera del todo, para que este
   filete no se les cuele. */
:where(main) a:not(.btn, .ayuda-muestra, .ayuda-copiar, .ayuda-categoria a, .ayuda-relacionados a, .ayuda-indice a,
                    .ayuda-sugerencias a, .ayuda-migas a, .ayuda-resultados a) {
  color: var(--bronce-osc); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bronce) 45%, transparent);
  transition: border-color .2s ease, color .2s ease;
}
:where(main) a:not(.btn, .ayuda-muestra, .ayuda-copiar, .ayuda-categoria a, .ayuda-relacionados a, .ayuda-indice a,
                    .ayuda-sugerencias a, .ayuda-migas a, .ayuda-resultados a):is(:hover, :focus-visible) {
  color: var(--tinta); border-bottom-color: var(--bronce);
}
.ayuda-recorrido li::marker { color: var(--bronce); font-family: var(--f-titular); }

/* ---------- Bienvenida y buscador ---------- */
.ayuda-portada { padding-bottom: clamp(32px, 5vw, 56px); text-align: center; }
.ayuda-portada .antetitulo { justify-content: center; }
.ayuda-portada.compacta { padding: 32px 0 8px; text-align: left; }
.ayuda-portada h1 { margin-bottom: .2em; }
.ayuda-buscador {
  position: relative; display: flex; gap: 10px; align-items: center;
  margin: 28px auto 0; max-width: 680px;
  background: var(--marfil); border: 1px solid var(--borde); border-radius: 999px;
  padding: 6px 6px 6px 48px; box-shadow: var(--sombra);
}
.ayuda-buscador:focus-within { border-color: var(--bronce); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 30%, transparent), var(--sombra); }
.ayuda-buscador > i { position: absolute; left: 18px; font-size: 22px; color: var(--bronce-osc); }
.ayuda-buscador input { flex: 1; min-width: 0; border: 0; background: transparent; font: 1.05rem var(--f-ui); color: var(--tinta); padding: 10px 0; outline: none; }
.ayuda-buscador .btn { border-radius: 999px; }
/* El foco ya lo marca el buscador entero (focus-within): un segundo recuadro dentro sobra */
.ayuda-buscador input:focus-visible { outline: none; box-shadow: none; }
.ayuda-portada.compacta .ayuda-buscador { margin-top: 12px; }

/* Los resultados mientras se escribe */
.ayuda-sugerencias {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 6px; list-style: none; text-align: left;
  max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--marfil); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.ayuda-sugerencias li a { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--radio-s); text-decoration: none; color: var(--tinta); }
.ayuda-sugerencias li a span { font-size: .8rem; color: var(--tinta-3); }
.ayuda-sugerencias li[aria-selected="true"] a, .ayuda-sugerencias li a:hover { background: color-mix(in srgb, var(--oro-claro) 22%, transparent); }
.ayuda-sugerencias li.todos { border-top: 1px solid var(--borde-suave); margin-top: 4px; padding-top: 4px; }
.ayuda-sugerencias li.todos a strong { font-weight: 500; font-size: .9rem; color: var(--bronce-osc); }
.ayuda-sugerencias li.quizas a { flex-direction: column-reverse; }
.ayuda-sugerencia { margin: 0 0 14px; font-size: 1.05rem; }
.ayuda-sugerencia a { font-weight: 600; }
/* La definición del glosario cuando lo buscado es una de sus palabras */
.ayuda-definicion { margin: 14px 0 6px; padding: 14px 16px; border: 1px solid var(--borde-suave); border-left: 3px solid var(--oro-claro); border-radius: var(--radio-s); background: color-mix(in srgb, var(--oro-claro) 8%, transparent); }
.ayuda-definicion p { margin: 0; }
.ayuda-definicion .ayuda-definicion-enlaces { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; }
.ayuda-sugerencias li.definicion { border-bottom: 1px solid var(--borde-suave); margin-bottom: 4px; padding-bottom: 4px; }

.ayuda-caminos .tarjeta { display: flex; flex-direction: column; gap: 10px; }
.ayuda-caminos .tarjeta .btn { align-self: flex-start; margin-top: auto; }
.ayuda-recorrido { margin: 0; padding-left: 1.3em; }
.ayuda-recorrido li { margin: .25em 0; }

.ayuda-catalogo { margin-top: 24px; }
#catalogo, .ayuda-categoria { scroll-margin-top: 90px; }
.ayuda-categoria { position: relative; padding: 20px 20px 16px; border: 1px solid var(--borde-suave); border-radius: var(--radio); background: var(--marfil); }
.ayuda-categoria .num-romano { position: absolute; top: 14px; right: 18px; font-family: var(--f-titular); font-size: 1.6rem; color: var(--oro-claro); }
.ayuda-categoria h3 { margin: 0 2.2em .2em 0; font-size: 1.15rem; }
.ayuda-categoria ul { margin: 10px 0 0; padding: 0; list-style: none; }
.ayuda-categoria li { padding: 6px 0; border-top: 1px dashed var(--borde-suave); }
.ayuda-categoria.vacia { opacity: .62; }
.ayuda-preparacion { margin: 10px 0 0; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }

/* ---------- Página de tema ---------- */
.ayuda-tema { padding-top: 32px; }
.ayuda-rejilla { display: grid; gap: 40px; max-width: 980px; }
.ayuda-rejilla.con-indice { grid-template-columns: minmax(0, 1fr) 220px; max-width: 1160px; }
.ayuda-articulo { min-width: 0; max-width: 760px; }
.ayuda-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--tinta-3); margin-bottom: 14px; }
.ayuda-migas i { font-size: .8em; }
.ayuda-resumen { margin-top: .3em; }
.ayuda-articulo > .aviso { margin: 14px 0; }
.ayuda-indice { position: sticky; top: 96px; align-self: start; font-size: .9rem; border-left: 2px solid var(--borde-suave); padding-left: 16px; }
.ayuda-indice h2 { margin: 0; font: 700 .72rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.ayuda-indice ol { list-style: none; margin: 8px 0 0; padding: 0; }
.ayuda-indice li { margin: .45em 0; }
.ayuda-indice a { color: var(--tinta-2); text-decoration: none; }
.ayuda-indice a:hover, .ayuda-indice a.actual { color: var(--bronce-osc); }
@media (max-width: 900px) {
  .ayuda-rejilla.con-indice { grid-template-columns: 1fr; }
  /* En el teléfono, primero el tema: el índice de una página corta no hace falta */
  .ayuda-indice { display: none; }
}

.ayuda-contenido { margin-top: 24px; line-height: 1.7; }
.ayuda-contenido h2 { margin-top: 1.8em; scroll-margin-top: 96px; position: relative; }
.ayuda-contenido h3 { margin-top: 1.4em; scroll-margin-top: 96px; }
.ayuda-contenido ol, .ayuda-contenido ul { padding-left: 1.4em; }
.ayuda-contenido li { margin: .35em 0; }
.ayuda-copiar {
  margin-left: 8px; padding: 2px 6px; border: 0; background: none; color: var(--tinta-3);
  font-size: .8em; cursor: pointer; opacity: 0; transition: opacity .15s; vertical-align: middle;
}
.ayuda-contenido h2:hover .ayuda-copiar, .ayuda-copiar:focus-visible { opacity: 1; }
.ayuda-copiar.hecho { color: var(--olivo); opacity: 1; }
@media (hover: none) { .ayuda-copiar { opacity: .7; } }

/* El nombre de un botón o menú de la app, tal como se ve en ella */
.ayuda-ui { font-weight: 600; color: var(--tinta); background: color-mix(in srgb, var(--oro-claro) 18%, transparent); padding: 0 .18em; border-radius: 3px; white-space: nowrap; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; text-align: center;
  font: 600 .82em var(--f-ui); color: var(--tinta); background: var(--marfil);
  border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 5px;
}
.ayuda-atajo-mac { display: none; }
html.es-mac .ayuda-atajo-windows { display: none; }
html.es-mac .ayuda-atajo-mac { display: inline; }
.ayuda-atajo-mac kbd { margin-right: 2px; }

/* Las marcas numeradas: en el texto, sobre la captura y en la lista que las explica */
.ayuda-marca, .ayuda-marca-sobre b, .ayuda-marcas li::before {
  display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%;
  font: 700 .78rem var(--f-ui); color: #fff; background: var(--terracota);
  box-shadow: 0 0 0 2px var(--marfil);
}
.ayuda-marca { vertical-align: .1em; margin: 0 .15em; }

.ayuda-captura { margin: 24px 0; }
/* A su tamaño de verdad: una captura pequeña no se estira hasta el ancho de la columna (se vería borrosa) */
.ayuda-lamina { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; border-radius: var(--radio-s); overflow: hidden; border: 1px solid var(--borde); box-shadow: var(--sombra-alta); background: var(--papiro-2); }
.ayuda-lamina img { display: block; width: auto; max-width: 100%; height: auto; cursor: zoom-in; }
.ayuda-sobre { position: absolute; inset: 0; pointer-events: none; }
.ayuda-marca-sobre { position: absolute; border: 2px solid var(--terracota); border-radius: 6px; box-shadow: 0 0 0 9999px transparent; }
.ayuda-marca-sobre b { position: absolute; top: -.8em; left: -.8em; }
.ayuda-marcas ol { list-style: none; counter-reset: marca; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.ayuda-marcas li { counter-increment: marca; display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: .95rem; }
.ayuda-marcas li::before { content: counter(marca); flex: none; }
.ayuda-captura.pendiente::before {
  content: attr(data-pendiente); display: grid; place-items: center; min-height: 180px;
  border: 1px dashed var(--borde); border-radius: var(--radio-s); background: var(--papiro-2);
  color: var(--tinta-3); font-size: .9rem; letter-spacing: .06em;
}
.ayuda-captura.pendiente img { display: none; }

/* La captura ampliada */
.ayuda-ampliada { max-width: min(96vw, 1500px); max-height: 94vh; padding: 0; border: 0; border-radius: var(--radio); background: var(--marfil); box-shadow: var(--sombra-alta); }
.ayuda-ampliada::backdrop { background: rgb(20 16 10 / 72%); }
.ayuda-ampliada img { display: block; max-width: 100%; max-height: 94vh; height: auto; }
.ayuda-ampliada button { position: absolute; top: 8px; right: 8px; }

/* Recuadros y «Nuevo en» */
.ayuda-nota, .ayuda-cuidado { margin: 20px 0; padding: 14px 18px; border-radius: var(--radio-s); border: 1px solid; }
.ayuda-nota { border-color: color-mix(in srgb, var(--egeo) 35%, transparent); background: color-mix(in srgb, var(--egeo) 7%, var(--marfil)); }
.ayuda-cuidado { border-color: color-mix(in srgb, var(--terracota) 40%, transparent); background: color-mix(in srgb, var(--terracota) 7%, var(--marfil)); }
.ayuda-recuadro-titulo { margin: 0 0 4px; font: 700 .78rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.ayuda-nota > :last-child, .ayuda-cuidado > :last-child { margin-bottom: 0; }
.ayuda-desde { position: relative; margin: 18px 0; padding-left: 16px; border-left: 3px solid var(--oro-claro); }
.ayuda-desde-marca { display: inline-block; margin-bottom: 4px; font: 600 .72rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--bronce-osc); }
.ayuda-desde.posterior { border-left-style: dashed; border-left-color: var(--terracota); }
.ayuda-desde.posterior .ayuda-desde-marca { color: var(--terracota); }

.ayuda-relacionados h2 { font-size: 1.1rem; }
.ayuda-relacionados { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--borde-suave); }
.ayuda-relacionados ul { padding-left: 1.2em; }
.ayuda-version-tema { margin-top: 36px; font-size: .8rem; color: var(--tinta-3); }

/* ¿Te sirvió? */
.ayuda-opinion { margin-top: 32px; padding: 14px 18px; border: 1px solid var(--borde-suave); border-radius: var(--radio); background: var(--marfil); }
.ayuda-opinion form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.ayuda-opinion form span { margin-right: 6px; font-weight: 500; }
.ayuda-gracias { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--tinta-2); }
.ayuda-gracias i { color: var(--terracota); }

/* ---------- Resultados ---------- */
.ayuda-resultados { list-style: none; padding: 0; margin: 20px 0 0; }
.ayuda-resultados li { padding: 16px 0; border-bottom: 1px solid var(--borde-suave); }
.ayuda-resultados a { font-size: 1.15rem; font-weight: 600; margin-right: 10px; }
.ayuda-resultados p { margin: 4px 0 0; color: var(--tinta-2); }

/* ---------- Selector del estilo de las capturas ---------- */
.ayuda-estilos-cabeza h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ayuda-muestras { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ayuda-muestra {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; height: 100%;
  border: 1px solid var(--borde-suave); border-radius: var(--radio-s); background: var(--marfil);
  color: var(--tinta-2); text-decoration: none; font-size: .82rem; line-height: 1.25;
}
.ayuda-muestra:hover { border-color: var(--bronce); color: var(--tinta); }
.ayuda-muestra[aria-current="true"] { border-color: var(--bronce); box-shadow: 0 0 0 2px var(--oro-claro); color: var(--tinta); font-weight: 600; }
.ayuda-muestra .colores { display: grid; grid-template-columns: 3fr 2fr 4fr; height: 34px; border-radius: 4px; overflow: hidden; border: 1px solid var(--borde-suave); }
.ayuda-muestra .colores i:nth-child(1) { background: var(--m-editor); }
.ayuda-muestra .colores i:nth-child(2) { background: var(--m-panel); }
.ayuda-muestra .colores i:nth-child(3) { background: var(--m-papel); }

/* En un tema: una franja compacta bajo el resumen, fija bajo la cabecera al bajar por la página */
.ayuda-estilos-barra {
  position: sticky; top: calc(var(--alto-cab) + 6px); z-index: 20; margin: 0 0 24px;
  padding: 8px 10px; border: 1px solid var(--borde-suave); border-radius: var(--radio);
  background: color-mix(in srgb, var(--papiro) 97%, transparent); backdrop-filter: blur(10px); box-shadow: var(--sombra);
}
.ayuda-estilos-barra .ayuda-estilos { display: flex; align-items: center; gap: 12px; }
.ayuda-estilos-barra .ayuda-estilos-cabeza h2 { font-size: .85rem; margin: 0; white-space: nowrap; color: var(--tinta-2); }
.ayuda-estilos-barra .ayuda-estilos-cabeza p { display: none; }
.ayuda-estilos-barra .ayuda-muestras {
  display: flex; gap: 6px; margin: 0; overflow-x: auto; scrollbar-width: thin; padding: 2px;
}
.ayuda-estilos-barra .ayuda-muestra { flex-direction: row; align-items: center; gap: 6px; padding: 4px 8px; white-space: nowrap; font-size: .78rem; }
.ayuda-estilos-barra .ayuda-muestra .colores { width: 26px; height: 16px; flex: none; }
@media (max-width: 720px) {
  .ayuda-estilos-barra .ayuda-estilos { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* ---------- Pie con la versión, discreto ---------- */
.ayuda-pie { padding: 18px 0; font-size: .8rem; color: var(--tinta-3); text-align: center; border-top: 1px solid var(--borde-suave); }

/* ---- Los enlaces de la ayuda, con la voz de la casa (Rafael, 2026-10-11) -------------------------------------
   La regla general del diseño compartido pinta todo enlace de azul Egeo subrayado; en el catálogo y en «Relacionados»
   eso se veía como texto suelto de otra página. Aquí: tinta, un rombo de oro delante —el de la cartela— y un filete de
   bronce que se dibuja al pasar, como la navegación del sitio. En el texto, bronce con un filete fino, como el pie. */
.ayuda-categoria li a,
.ayuda-relacionados li a {
  position: relative; display: inline-block; padding-left: 16px;
  color: var(--tinta); text-decoration: none; transition: color .2s ease;
}
.ayuda-categoria li a::before,
.ayuda-relacionados li a::before {
  content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px;
  background: var(--oro); transform: rotate(45deg); opacity: .75; transition: opacity .2s ease, transform .2s ease;
}
.ayuda-categoria li a::after,
.ayuda-relacionados li a::after {
  content: ""; position: absolute; left: 16px; right: 0; bottom: -2px; height: 1px;
  background: var(--bronce); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.ayuda-categoria li a:hover, .ayuda-categoria li a:focus-visible,
.ayuda-relacionados li a:hover, .ayuda-relacionados li a:focus-visible { color: var(--bronce-osc); }
.ayuda-categoria li a:hover::before, .ayuda-categoria li a:focus-visible::before,
.ayuda-relacionados li a:hover::before, .ayuda-relacionados li a:focus-visible::before { opacity: 1; transform: rotate(45deg) scale(1.2); }
.ayuda-categoria li a:hover::after, .ayuda-categoria li a:focus-visible::after,
.ayuda-relacionados li a:hover::after, .ayuda-relacionados li a:focus-visible::after { transform: scaleX(1); }
/* «Empieza aquí», igual que el catálogo: tinta y el filete al pasar; el número hace de rombo. El enlace va en línea,
   no en bloque: un título que ocupa dos renglones deja el número en el primero, y el filete corre bajo cada renglón. */
.ayuda-caminos .ayuda-recorrido li a {
  color: var(--tinta); text-decoration: none; border-bottom: 0;
  background: linear-gradient(var(--bronce), var(--bronce)) no-repeat 0 100% / 0 1px;
  transition: color .2s ease, background-size .25s ease;
}
.ayuda-caminos .ayuda-recorrido li a:is(:hover, :focus-visible) { color: var(--bronce-osc); background-size: 100% 1px; }
.ayuda-relacionados ul { padding-left: 0; list-style: none; }
.ayuda-relacionados li { padding: 6px 0; }

.ayuda-contenido a, .ayuda-resumen a, .ayuda-tema .aviso a, .ayuda-portada a:not(.btn) {
  color: var(--bronce-osc); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bronce) 45%, transparent); transition: border-color .2s ease, color .2s ease;
}
.ayuda-contenido a:hover, .ayuda-resumen a:hover, .ayuda-tema .aviso a:hover, .ayuda-portada a:not(.btn):hover {
  color: var(--tinta); border-bottom-color: var(--bronce);
}
.ayuda-migas a { color: var(--tinta-3); text-decoration: none; transition: color .2s ease; }
.ayuda-migas a:hover { color: var(--bronce-osc); }
.ayuda-resultados a { color: var(--tinta); text-decoration: none; }
.ayuda-resultados a:hover { color: var(--bronce-osc); }

@media print {
  .ayuda-estilos-seccion, .ayuda-estilos-barra, .ayuda-indice, .ayuda-copiar, .cabecera, .pie { display: none !important; }
}

/* La otra ayuda, bajo el buscador: la de escribir lleva a la de leer y al revés */
.ayuda-otra { margin: 14px 0 0; font-size: .95rem; }
.ayuda-otra a { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); text-decoration: none; border-bottom: 1px solid var(--borde); padding-bottom: 2px; }
.ayuda-otra a:hover { color: var(--tinta); border-bottom-color: var(--bronce); }
.ayuda-otra i { color: var(--bronce-osc); font-size: 1.1em; }