/* ═══════════════════════════════════════ ▓ PATRÓN · Cajón de ayuda — gemelo vanilla ▓ v1.0 · 2026-08-24. Ficha: `design-system/PATRON_CENTRO_AYUDA.md` Kit: `catalogo-cd/components/CajonAyuda.jsx` Handoff: `plans/design_handoff_cajones/` ⛔ ESTA HOJA ES SÓLO LO QUE ES **PROPIO** DEL CENTRO DE AYUDA. El marco, la pila de dos niveles, la flecha de volver, la banda de grupo, la fila, el despliegue y los tres grises viven en `patrones/cajon-lateral/` y NO se repiten aquí. DECISION-FUENTE: Ricardo, 2026-08-24 — «se cosecha UNA VEZ la concha; cada cajón es después una composición». DOS NIVELES EN UN MISMO CAJÓN, y el porqué es de tamaño: el RESUMEN de la fila contesta la pregunta en cuatro líneas sin sacarte de la lista; el ARTÍCULO COMPLETO trae la regla de negocio, cuatro estados y su «qué hacer» — eso ya no es el detalle de una fila, es un DOCUMENTO, y metido en el acordeón haría que la lista midiera cuatro pantallas de alto. REQUISITOS DEL ANFITRIÓN: 1. Los tokens del canon (`colors_and_type.css`). 2. `box-sizing: border-box`. 3. `patrones/cajon-lateral/` (hoja y conducta) y los componentes `Search` y `Badge`. ═══════════════════════════════════════ */ /* ── LA ZONA DEL BUSCADOR ──────────────────────────────────────────────────── Fuera de lo que se desplaza: buscar es lo primero que se hace en una ayuda, y un buscador que se va con el scroll obliga a subir para volver a preguntar. */ .exds-cay-busca { flex-shrink: 0; padding: 0 var(--space-5, 20px) var(--space-5, 20px); } /* ── EL ACORDEÓN DE LA PORTADA — el PRIMER nivel de la pila (A1, 2026-08-30) ───────────── Composición: monta `Acordeon` en modo FAQ + `data-densidad="compacta"` (`patrones/acordeon-faq/`, ya enlazado como `acordeon-faq.css`/`acordeon-faq.js` — el mismo lenguaje que Ajustes y Notificaciones). Lo propio de Ayuda es SÓLO lo que va DENTRO del resumen desplegado: el párrafo, la mini-tabla clave/valor y el botón «Ver el artículo». El marco, la fila, el filete a sangre y la apertura son del patrón. El compacto de fábrica trae `padding-top:10 / padding-bottom:16` en el contenido — pensado para los campos de Ajustes. El handoff de Ayuda mide 14/20/20/20 con rowGap 12 (`.exds-cj-det` del prototipo), así que se sobre-escribe aquí, con más especificidad (`.exds-cay-acc`), sin tocar el patrón compartido. */ .exds-cay-acc.exds-acc[data-densidad="compacta"] .exds-acc-content { padding-top: var(--space-3-5, 14px); padding-bottom: var(--space-5, 20px); } .exds-cay-det { display: grid; row-gap: var(--space-3, 12px); } .exds-cay-det-texto { font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif); font-weight: 400; font-size: var(--fs-body-sm, 13px); line-height: 1.55; color: var(--fg2, #4B5563); text-wrap: pretty; } /* La mini-tabla clave/valor — opcional: sólo se pinta si el artículo trae `campos[]`. Hoy NINGÚN artículo de `ARTS` lo trae (es dato de contenido, no de diseño — no se inventó aquí; ver reporte). El soporte de render queda listo para cuando se puebla. */ .exds-cay-campos { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4, 16px); row-gap: var(--space-1-5, 6px); } .exds-cay-campo-k { font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif); font-weight: 400; font-size: var(--fs-caption, 12px); line-height: 1.4; color: var(--fg3, #5C6B7A); white-space: nowrap; } .exds-cay-campo-v { font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif); font-weight: 500; font-size: var(--fs-caption, 12px); line-height: 1.4; color: var(--fg1, #0F1419); font-variant-numeric: tabular-nums; } /* ── EL ARTÍCULO — el segundo nivel de la pila ───────────────────────────── */ .exds-cay-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5, 20px); display: grid; row-gap: var(--space-5, 20px); align-content: start; } /* El nombre del grupo que encabeza un artículo se queda en --fg3 y SIN regla: es rótulo de PROCEDENCIA, no sección — no abre nada. Es la excepción declarada a la regla de que un rótulo de sección va en tinta. */ .exds-cay-procedencia { font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif); font-weight: 600; font-size: var(--fs-eyebrow, 11px); letter-spacing: var(--tracking-eyebrow, 0.12em); text-transform: uppercase; color: var(--fg3, #5C6B7A); } .exds-cay-intro { font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif); font-weight: 400; font-size: var(--fs-body-sm, 13px); line-height: 1.6; color: var(--fg2, #4B5563); text-wrap: pretty; } /* ── LOS ESTADOS DEL ARTÍCULO — uno tras otro, separados por un pelo ───────── ⛔ NO VAN EN TARJETAS. En 420px una caja dentro de otra caja se come 32px de ancho útil y no aclara nada. */ .exds-cay-estados { display: grid; row-gap: 0; } /* Pad-top 20 / pad-bottom 0 / gap 10 — homologado al handoff 2026-08-30 (era 16/16/8: el aire vivía repartido arriba Y abajo; el handoff lo pone TODO arriba del filete, y el último estado no necesita cola porque cierra contra el borde del cuerpo). */ .exds-cay-estado { display: grid; row-gap: var(--space-2-5, 10px); padding: var(--space-5, 20px) 0 0; border-top: 1px solid var(--color-border-subtle, #E5E7EB); } /* ── LOS RELACIONADOS, AL PIE ──────────────────────────────────────────────── Reemplazan el artículo EN SU SITIO con el mismo desvanecido de la lista — no apilan una tercera pantalla. Van a sangre: el margen negativo los saca del relleno del cuerpo para que su línea recorra el cajón entero, como las de la lista. */ .exds-cay-rel { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-3, 12px); /* ⛔ `width: auto` NO BASTA (medido con Playwright, 2026-08-30): un `