/* views/ayuda.css · layout propio de la vista; todos los selectores bajo .v-ayuda (SPEC 3) y, para Más (también de
   views/ayuda.js, 4.14), bajo .v-mas. Ayuda es una columna de lectura de 782 px (.lectura). Solo tokens. */

/* ---------- Ayuda ---------- */
.v-ayuda .lectura { padding-bottom: var(--sp-8); }
.v-ayuda__sec { scroll-margin-top: calc(var(--toolbar-h) + var(--sp-4)); }
.v-ayuda__sec > .t-h2:focus { outline: none; }
.v-ayuda__sec > .t-h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-xs); }
.v-ayuda__sec > p { margin: 0 0 var(--sp-3); max-width: 68ch; }
.v-ayuda__sec > p:last-child { margin-bottom: 0; }

.v-ayuda__indice { margin: 0 0 var(--sp-2); padding: var(--sp-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.v-ayuda__indice ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.v-ayuda__indice a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-small); font-weight: 500; color: var(--accent); text-decoration: none; }
.v-ayuda__indice a:hover { text-decoration: underline; text-underline-offset: 3px; }
.v-ayuda__indice a[aria-current="true"] { color: var(--text-strong); font-weight: 600; }

/* Tabla de equivalencias (5.12.4) */
.v-ayuda__tablawrap { margin-top: var(--sp-2); }
.v-ayuda__tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-small); }
.v-ayuda__tabla th, .v-ayuda__tabla td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.v-ayuda__tabla thead th { font: 600 var(--fs-eyebrow)/1.2 var(--font-caps); font-stretch: 125%; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-2); border-bottom-color: var(--line-strong); }
.v-ayuda__tabla tbody th { width: 76px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.v-ayuda__tabla td:nth-child(2) { width: 24%; color: var(--text-strong); }
.v-ayuda__tabla td { overflow-wrap: anywhere; }

/* Colores */
.v-ayuda__colores { list-style: none; margin: 0 0 var(--sp-3); padding: 0; border-top: 1px solid var(--line); }
.v-ayuda__color { display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.v-ayuda__muestra { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.v-ayuda__swatch { width: 22px; height: 22px; border-radius: var(--r-sm); flex: none; }
.v-ayuda__swatch--naranja { background: var(--primary); }
.v-ayuda__swatch--indigo { background: var(--sel); box-shadow: inset 0 0 0 1px var(--line); }
.v-ayuda__sw-t { font-weight: 600; color: var(--text-strong); }

/* Pasos */
/* la letra de la columna de VENTAS, con la misma etiqueta que Trabajos */
.v-ayuda__letra { display: inline-flex; align-items: center; height: 18px; margin-inline-start: 6px; padding: 0 5px; box-sizing: border-box; vertical-align: 2px;
  border: 1px solid var(--line-strong); border-radius: 2px; background: var(--surface-2); color: var(--text-2); font: 600 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-ayuda__pasos + .t-small { margin-top: var(--sp-3); }
.v-ayuda__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.v-ayuda__paso { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.v-ayuda__paso p { margin: 0; }
.v-ayuda__paso p + p { margin-top: 2px; }
.v-ayuda__pn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--seg-done); color: var(--on-sel); font-size: var(--fs-caption); font-weight: 600; }
.v-ayuda__pt { font-weight: 600; color: var(--text-strong); }

/* Lo que dice el Excel */
.v-ayuda__celdas { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v-ayuda__celda { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.v-ayuda__cv { grid-row: 1 / span 2; font: 400 var(--fs-h2)/1 var(--font-display); color: var(--text-strong); }
.v-ayuda__celda .t-caption { grid-column: 2; }

/* Recorrido */
.v-ayuda__recorrido { margin: 0 0 var(--sp-4); padding-inline-start: 1.4em; display: grid; gap: 6px; }
/* v17: la Planilla en una lista corta */
.v-ayuda__lista { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; color: var(--text); }
.v-ayuda__acc { display: flex; flex-wrap: wrap; gap: 8px; }

/* Glosario */
.v-ayuda__glosario { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.v-ayuda__g { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.v-ayuda__g dt { font-weight: 600; color: var(--text-strong); font-size: var(--fs-small); }
.v-ayuda__g dd { margin: 0; }

@media (max-width: 599.98px) {
  .v-ayuda__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .v-ayuda__tabla, .v-ayuda__tabla tbody, .v-ayuda__tabla tr, .v-ayuda__tabla th, .v-ayuda__tabla td { display: block; width: auto; }
  .v-ayuda__tabla tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .v-ayuda__tabla th, .v-ayuda__tabla td { padding: 2px 0; border: 0; }
  .v-ayuda__tabla td:nth-child(2) { width: auto; }
  .v-ayuda__tabla td:empty { display: none; }
  .v-ayuda__tabla td[data-et]::before { content: attr(data-et) " · "; color: var(--text-3); }
  .v-ayuda__color { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .v-ayuda__celdas { grid-template-columns: minmax(0, 1fr); }
  .v-ayuda__g { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Más (solo compacto; también se puede abrir en escritorio) ---------- */
.v-mas { max-width: var(--read-max); padding-bottom: var(--sp-6); }
.v-mas__sec .grupo { margin-top: var(--sp-6); margin-bottom: 0; }
.v-mas__sec .lista { border-top: 0; }
.v-mas__extra { flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-mas__datos { margin: var(--sp-3) 0 0; }
.v-mas--hoja { display: grid; gap: 4px; }
.v-mas__opcion { padding: 4px 0; font-size: var(--fs-body); }

/* Upgrade 20/10/26: encabezados en tipografía normal (H07: nunca menos de 14 px) */
.v-ayuda__tabla thead th { font: 500 var(--fs-small)/1.3 var(--font-ui); font-stretch: normal; letter-spacing: 0; text-transform: none; color: var(--text-2); }

/* Auditoría UX 20/10/26 (H44): el bloque del Excel, al final y solo para administradores; la fecha de los datos al pie */
.v-ayuda__admin { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--rule); }
.v-ayuda__admin-t { margin: 0; }
.v-ayuda__admin-l { margin: var(--sp-1) 0 0; }
.v-ayuda__pie { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.v-ayuda__pie p { margin: 0; }
.v-ayuda__indice a { min-height: 44px; }
/* Más: el primer grupo (el principal del riel) no lleva título, como en la barra lateral */
.v-mas__sec--sin { margin-top: var(--sp-4); }
.v-mas__sec--sin .lista { border-top: 0; }