/* CSS propio de help.html, el Centro de ayuda (sitio «origen»). Lo edita solo quien porta esa página:
docs/sitio-2026/09-origen.md, «Receta para portar una página».
Portado de prototipo/css/ayuda.css. Componentes compartidos sin
tocar: .faq (metro.css + metro.js), .seccion/.tramo/.parada-riel (el riel), form.pasos-form, .campo,
.control y .campo--trampa (paginas.css + paginas.js). Lo que el prototipo no tenía y el sitio real sí:
el widget de Turnstile, su estado y el estado del envío real (src/scripts/origen/help.js).
Movimiento: solo var(--ease); todo estado oculto cuelga de .movimiento-listo.
1. Apertura: titular, bajada y acciones; los canales en un tablero de andén navy
2. Preguntas frecuentes 3. Información adicional 4. Formulario de ticket */
/* ================= 1 · Apertura ================= */
.ayuda-apertura { padding-block: clamp(40px, 5vw, 80px) clamp(56px, 6vw, 96px); }
.ayuda-apertura__titulo { font: 700 clamp(2.6rem, 1.3rem + 4.2vw, 5.4rem)/1 var(--f-display); font-stretch: 104%; letter-spacing: -0.03em; text-wrap: balance; }
.ayuda-apertura__lado { margin-top: 22px; }
.ayuda-apertura__bajada { max-width: 34rem; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); line-height: 1.6; color: var(--tinta-2); }
.ayuda-apertura__acciones { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 26px; }
@media (min-width: 1000px) {
.ayuda-apertura__franja { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.ayuda-apertura__titulo { grid-column: 1 / span 6; }
.ayuda-apertura__lado { grid-column: 7 / span 6; margin-top: 0; }
}
/* Los canales: un tablero de andén (mobiliario navy en los dos temas). El período de atención va en
el ámbar de andén, como el período del tablero de datos de la home. */
.canales {
display: grid; margin-top: clamp(40px, 4.6vw, 72px); border-radius: 16px; overflow: hidden;
background: var(--tablero); color: var(--tablero-tinta); box-shadow: var(--sombra-alta);
}
html[data-theme="dark"] .canales { box-shadow: var(--sombra-alta), 0 0 0 1px var(--tablero-borde); }
.canal { display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(22px, 2.6vw, 38px); }
.canal + .canal { border-top: 1px solid var(--tablero-borde); }
.canal__nombre { font: 650 0.78rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tablero-tinta-2); }
.canal__dato {
justify-self: start; max-width: 100%; overflow-wrap: anywhere;
font: 700 clamp(1.3rem, 1.05rem + 0.9vw, 1.95rem)/1.2 var(--f-display); font-stretch: 102%; letter-spacing: -0.01em; color: #ffffff;
}
a.canal__dato { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: rgba(255, 255, 255, 0.34); transition: text-decoration-color 0.2s var(--ease); }
a.canal__dato:hover { text-decoration-color: #ffffff; }
.canal__nota { font-size: 0.95rem; line-height: 1.5; color: var(--tablero-tinta-2); }
.canal__periodo { font: 650 0.86rem/1.2 var(--f-display); font-stretch: 104%; letter-spacing: 0.04em; color: var(--ambar); }
.canal--horario .canal__dato { font-variant-numeric: tabular-nums; }
.canales :focus-visible { outline-color: #5fd4bf; }
@media (min-width: 900px) {
.canales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.canal + .canal { border-top: 0; border-left: 1px solid var(--tablero-borde); }
}
/* ================= 2 · Preguntas frecuentes ================= */
.ayuda-faq .faq__panel a { color: var(--tinta); }
@media (min-width: 1100px) {
.ayuda-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.ayuda-faq__cabeza { grid-column: 1 / span 4; margin-bottom: 0; }
.ayuda-faq__lista { grid-column: 6 / span 7; max-width: none; }
}
/* ================= 3 · Información adicional ================= */
.documentos { display: grid; gap: 16px; }
.documento-salida {
position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(22px, 2.4vw, 32px);
border: 1px solid var(--borde-fuerte); border-radius: 12px; background: var(--superficie);
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.documento-salida:hover { border-color: var(--tinta); transform: translateY(-2px); }
.documento-salida:has(a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.documento-salida__titulo { font: 700 clamp(1.18rem, 1.06rem + 0.4vw, 1.4rem)/1.25 var(--f-display); font-stretch: 104%; }
.documento-salida__titulo a { color: inherit; text-decoration: none; }
.documento-salida__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.documento-salida__titulo a:focus-visible { outline: none; }
.documento-salida__texto { color: var(--tinta-2); line-height: 1.55; }
.documento-salida__ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 650 0.92rem/1.2 var(--f-display); font-stretch: 104%; color: var(--tinta); }
.documento-salida__ver .icono { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.documento-salida:hover .documento-salida__ver .icono, .documento-salida:focus-within .documento-salida__ver .icono { transform: translate(3px, -3px); }
@media (min-width: 720px) { .documentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
.ayuda-info__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.ayuda-info__cabeza { grid-column: 1 / span 5; margin-bottom: 0; }
.documentos { grid-column: 6 / span 7; }
}
/* ================= 4 · Formulario de ticket ================= */
.ayuda-form {
padding: clamp(22px, 3vw, 44px); border: 1px solid var(--borde); border-radius: 16px;
background: var(--superficie); box-shadow: var(--sombra);
}
.ayuda-form__legal { font-size: 0.9rem; line-height: 1.5; color: var(--tinta-3); }
.ayuda-form__legal a { color: var(--tinta-2); }
@media (min-width: 1000px) {
.ayuda-ticket__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.ayuda-ticket__cabeza { grid-column: 1 / span 4; margin-bottom: 0; }
.ayuda-form { grid-column: 6 / span 7; }
}
/* Turnstile (Cloudflare) dibuja su propio iframe de 300 × 65; no se estira ni se recorta */
.ayuda-form__verificacion-caja { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.ayuda-form__verificacion-caja .cf-turnstile { max-width: 100%; overflow-x: auto; }
.ayuda-form__verificacion { font: 600 0.9rem/1.45 var(--f-texto); color: var(--tinta-2); }
/* El resultado del envío (role="status"; el texto lo escribe help.js con t()). Vacío no ocupa alto pero
sigue en el árbol de accesibilidad, para que el lector de pantalla lo anuncie al llenarse. */
.ayuda-form__estado { flex: 1 1 100%; font: 600 0.98rem/1.5 var(--f-texto); color: var(--tinta); }
.ayuda-form__estado:not(:empty) { padding: 14px 16px 14px 46px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie-2); position: relative; }
/* La marca es una estación (sin texto): llena si salió, con anillo de error si no */
.ayuda-form__estado:not(:empty)::before {
content: ""; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%;
box-shadow: inset 0 0 0 4px var(--tinta); background: var(--estacion-relleno);
}
.ayuda-form__estado.is-exito:not(:empty)::before { background: var(--tinta); }
.ayuda-form__estado.is-error:not(:empty) { border-color: var(--error); }
.ayuda-form__estado.is-error:not(:empty)::before { box-shadow: inset 0 0 0 4px var(--error); }
.ayuda-form__verificacion.is-error { color: var(--error); }
.ayuda-form__verificacion.is-exito { color: var(--tinta); }
@media (max-width: 719px) {
.ayuda-apertura__acciones .boton { flex: 1 1 100%; }
.ayuda-form .pasos-form__acciones .boton { flex: 1 1 100%; }
}