/* ayuda.repos.mx — la base de conocimiento pública de Repos.
 *
 * Estructura importada del proyecto de Claude Design "Base de conocimiento
 * Repos" (canvas `Base de conocimiento Repos.dc.html`): la maquetación, las
 * tarjetas de categoría y el buscador son los de ese diseño y siguen igual.
 *
 * DEROGADA la nota que este encabezado traía —"es un sistema propio y no se
 * unifica con broadsheet"—. Decisión del dueño del producto (2026-09-10):
 * **la identidad va encima de todo; la consistencia manda**. Aquí vivían los
 * últimos colores del sistema viejo (`#1f6feb`, `#14213d`, `#23262b`,
 * `#e2e5ea`), los mismos que el paso 01 retiró del producto.
 *
 * Como en `broadsheet.css`, los nombres `--a-*` se conservan a propósito para
 * no tocar ninguna clase ni ninguna vista: lo que se rebasó son los valores,
 * que ahora salen de `repos-tokens.css`.
 */

.ayuda {
  /* Mismos nombres, valores del sistema. Antes: el azul y el navy por
     omisión de la plantilla de Bootstrap con la que arrancó el proyecto. */
  --a-fondo: var(--repos-bg);
  --a-superficie: var(--repos-surface);
  --a-texto: var(--repos-fg);
  --a-tenue: var(--repos-fg-muted);
  --a-borde: var(--repos-border);
  /* La barra oscura del encabezado es la superficie oscura del sistema. */
  --a-navy: var(--repos-header-bg);
  --a-azul: var(--repos-accent);
  --a-azul-suave: var(--repos-cian-100);
  --a-azul-borde: var(--repos-cian-300);
  --a-aviso-fondo: var(--repos-warning-bg);
  --a-aviso-borde: var(--repos-warning-border);
  --a-aviso-texto: var(--repos-warning-fg);
  --a-mono: var(--repos-font-mono);

  color-scheme: light;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--a-fondo);
  color: var(--a-texto);
  font-family: var(--repos-font);
  -webkit-font-smoothing: antialiased;
}

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

.ayuda a { color: var(--a-azul); text-decoration: none; }
.ayuda a:hover { color: var(--a-navy); text-decoration: underline; }

/* ---------- encabezado ---------- */

.a-encabezado {
  background: var(--a-navy);
  color: var(--a-fondo);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  flex-wrap: wrap;
}

.ayuda .a-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--a-fondo);
}
.ayuda .a-marca:hover { color: var(--a-fondo); text-decoration: none; }
.ayuda .a-marca .a-insignia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--a-azul);
  color: var(--repos-accent-fg);
  font-size: 15px;
}
.ayuda .a-marca .a-separador { opacity: 0.55; font-weight: 500; }
/* El logotipo va en blanco: la barra del encabezado es la superficie oscura
   del sistema, y ahí el de color compite con su propio fondo. */
.ayuda .a-logo { height: 20px; width: auto; display: block; }
.ayuda .a-marca .a-seccion { font-weight: 500; opacity: 0.85; }

.a-buscador { flex: 1; min-width: 220px; max-width: 520px; display: flex; }
.a-buscador input {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--a-fondo);
  padding: 0 12px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}
.a-buscador input::placeholder { color: rgba(244, 245, 247, 0.55); }
.a-buscador input:focus { border-color: var(--a-azul); background: rgba(255, 255, 255, 0.14); }

.a-idiomas { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ayuda .a-idioma {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--a-fondo);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}
.ayuda .a-idioma:hover { color: var(--a-fondo); text-decoration: none; background: rgba(255, 255, 255, 0.1); }
.ayuda .a-idioma[aria-current="true"] { background: var(--a-azul); border-color: var(--a-azul); }

/* ---------- portada ---------- */

.a-principal { flex: 1; }

.a-portada {
  background: var(--a-superficie);
  border-bottom: 1px solid var(--a-borde);
  padding: 48px 20px 40px;
}
.a-ancho { max-width: 940px; margin: 0 auto; }

.a-dominio {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-tenue);
  margin-bottom: 10px;
}
.a-portada h1 {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-wrap: pretty;
}
.a-entradilla {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--a-tenue);
  max-width: 56ch;
  text-wrap: pretty;
}

.a-atajos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.a-atajos-rotulo { font-size: 12px; color: var(--a-tenue); font-weight: 600; }
.ayuda .a-pastilla {
  border: 1px solid var(--a-borde);
  background: var(--a-fondo);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--a-texto);
}
.ayuda .a-pastilla:hover { color: var(--a-texto); text-decoration: none; border-color: var(--a-azul); }
.ayuda .a-pastilla[aria-current="true"] {
  border-color: var(--a-azul);
  background: var(--a-azul-suave);
  color: var(--a-azul);
}

.a-seccion-lista { max-width: 940px; margin: 0 auto; padding: 28px 20px 56px; }
.a-encabezado-lista {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.a-rotulo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--a-tenue);
}
.a-conteo { font-size: 12px; color: var(--a-tenue); }

.a-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 12px;
}

.ayuda .a-tarjeta-categoria {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--a-superficie);
  border: 1px solid var(--a-borde);
  border-top: 4px solid var(--a-azul);
  border-radius: 12px;
  padding: 16px;
  color: var(--a-texto);
}
.ayuda .a-tarjeta-categoria:hover { text-decoration: none; color: var(--a-texto); border-color: var(--a-azul); border-top-color: var(--a-azul); }
.a-tarjeta-categoria.a-vacia { border-top-color: var(--a-borde); }
.a-tarjeta-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.a-numero {
  font-size: 11px;
  font-weight: 700;
  color: var(--a-tenue);
  border: 1px solid var(--a-borde);
  border-radius: 6px;
  padding: 2px 7px;
}
.a-tarjeta-desc { font-size: 13px; line-height: 1.45; color: var(--a-tenue); text-wrap: pretty; }
.a-pendiente {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--a-aviso-texto);
  background: var(--a-aviso-fondo);
  border: 1px solid var(--a-aviso-borde);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ---------- artículo ---------- */

.a-articulo {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 32px;
  align-items: start;
}
.a-articulo > article { min-width: 0; }

.a-migas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--a-tenue);
  margin-bottom: 12px;
}
.ayuda .a-migas .a-actual { color: var(--a-texto); font-weight: 600; }

.a-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.a-etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--a-tenue);
  border: 1px solid var(--a-borde);
  border-radius: 6px;
  padding: 3px 8px;
}
.a-etiqueta.a-destacada {
  color: var(--a-azul);
  background: var(--a-azul-suave);
  border-color: var(--a-azul-borde);
}

.a-articulo h1 {
  margin: 0 0 8px;
  font-size: 29px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.a-articulo .a-entrada {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--a-tenue);
  max-width: 62ch;
  text-wrap: pretty;
}

.a-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--a-aviso-fondo);
  border: 1px solid var(--a-aviso-borde);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--a-aviso-texto);
}

.a-cuerpo section { margin-bottom: 30px; scroll-margin-top: 20px; }
.a-cuerpo h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.01em; }
.a-cuerpo p { margin: 0 0 12px; font-size: 15px; line-height: 1.62; max-width: 64ch; text-wrap: pretty; }
.a-cuerpo ul {
  margin: 0 0 12px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 64ch;
}
.a-cuerpo li { font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }

.a-acciones { border-top: 1px solid var(--a-borde); padding-top: 22px; }
.a-acciones > p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--a-tenue); max-width: 60ch; }
.a-acciones .a-rejilla { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; }

.a-tarjeta-accion {
  background: var(--a-superficie);
  border: 1px solid var(--a-borde);
  border-radius: 12px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.a-tarjeta-accion .a-titulo-accion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.a-tarjeta-accion .a-pasos { font-size: 11px; color: var(--a-tenue); font-weight: 500; flex: none; }
.a-tarjeta-accion .a-resumen { font-size: 12.5px; line-height: 1.45; color: var(--a-tenue); text-wrap: pretty; }
.a-tarjeta-accion .a-url {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.a-tarjeta-accion code {
  font-family: var(--a-mono);
  font-size: 11px;
  color: var(--a-azul);
  background: var(--a-azul-suave);
  border-radius: 6px;
  padding: 3px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-copiar {
  border: 1px solid var(--a-borde);
  background: var(--a-fondo);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--a-tenue);
  cursor: pointer;
  flex: none;
  font-family: inherit;
}
.a-copiar:hover { border-color: var(--a-azul); color: var(--a-azul); }

/* ---------- voto «¿Te sirvió este artículo?» (E16-10) ---------- */

/* Sólo se pinta con `Ayuda:VotosActivos` encendida; apagada, la vista ni
   siquiera emite el bloque. Colores y forma, de `repos-tokens.css` vía los
   `--a-*` de arriba: aquí no se inventa ninguno. */

.a-voto {
  border-top: 1px solid var(--a-borde);
  margin-top: 22px;
  padding-top: 22px;
}
.a-voto > p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--a-tenue);
}
.a-voto-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.a-voto-boton {
  border: 1px solid var(--a-borde);
  background: var(--a-superficie);
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--a-texto);
  cursor: pointer;
  font-family: inherit;
}
.a-voto-boton:hover { border-color: var(--a-azul); color: var(--a-azul); }
.a-voto-boton:disabled { opacity: 0.55; cursor: default; }
.a-voto-boton:disabled:hover { border-color: var(--a-borde); color: var(--a-texto); }

.a-voto-detalle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  max-width: 60ch;
}
.a-voto-detalle label { font-size: 13px; font-weight: 700; color: var(--a-texto); }
.a-voto-detalle textarea {
  width: 100%;
  border: 1px solid var(--a-borde);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--a-texto);
  background: var(--a-superficie);
  resize: vertical;
}
.a-voto-detalle textarea:focus { outline: 2px solid var(--a-azul); outline-offset: 1px; }
.a-voto-enviar { background: var(--a-azul-suave); border-color: var(--a-azul-borde); }

.a-voto-resultado { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--a-tenue); }
.a-voto-error { color: var(--repos-danger); }

/* ---------- barra lateral ---------- */

.a-lateral {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.a-lateral-rotulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--a-tenue);
  margin-bottom: 8px;
}
.a-indice { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--a-borde); }
.a-indice a {
  font-size: 13px;
  line-height: 1.4;
  color: var(--a-tenue);
  padding: 5px 0 5px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
}
.a-indice a:hover { color: var(--a-azul); border-left-color: var(--a-azul); text-decoration: none; }

.a-caja {
  background: var(--a-superficie);
  border: 1px solid var(--a-borde);
  border-radius: 12px;
  padding: 13px 14px;
}
.a-caja p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--a-tenue); }
.a-caja code {
  display: block;
  font-family: var(--a-mono);
  font-size: 11px;
  color: var(--a-texto);
  background: var(--a-fondo);
  border: 1px solid var(--a-borde);
  border-radius: 8px;
  padding: 7px 8px;
  word-break: break-all;
}
.a-caja .a-enlaces { display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.4; }

/* ---------- búsqueda ---------- */

.a-busqueda { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 24px 20px 64px; }
.a-busqueda h1 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.01em; }
.a-busqueda .a-conteo { display: block; margin-bottom: 16px; }
.a-filtros { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.a-resultados { display: flex; flex-direction: column; gap: 10px; }

.ayuda .a-resultado {
  background: var(--a-superficie);
  border: 1px solid var(--a-borde);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--a-texto);
}
.ayuda .a-resultado:hover { text-decoration: none; color: var(--a-texto); border-color: var(--a-azul); }
.ayuda .a-resultado .a-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ayuda .a-resultado .a-titulo-resultado { font-size: 15.5px; font-weight: 700; color: var(--a-azul); line-height: 1.3; }
.ayuda .a-resultado .a-fragmento { font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.ayuda .a-resultado .a-ruta { font-size: 12px; color: var(--a-tenue); }
.a-vacio { font-size: 14px; color: var(--a-tenue); }

/* ---------- pie ---------- */

.a-pie {
  border-top: 1px solid var(--a-borde);
  background: var(--a-superficie);
  padding: 18px 20px;
  font-size: 12px;
  color: var(--a-tenue);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}
.a-pie .a-dominio-pie { font-family: var(--a-mono); }

/* ---------- responsivo ---------- */

@media (max-width: 860px) {
  .a-articulo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .a-lateral { position: static; order: 2; }
  .a-portada { padding: 32px 20px 28px; }
  .a-portada h1 { font-size: 26px; }
}