/* ═══════════════════════════════════════
   ▓ PATRÓN · Cajón de detalle — gemelo vanilla ▓
   v1.0 · 2026-08-24. Ficha: `design-system/PATRON_CAJON_DETALLE.md`
   Kit: `catalogo-cd/components/CajonDetalle.jsx`

   Lo que va DENTRO del cajón cuando muestra el detalle de una fila de una lista.
   `cajon-lateral` es el MARCO —el panel, su ancho, su cabecera, su movimiento—;
   esto es el ORDEN de su contenido.

     ① cabecera de resumen  — las 2 a 4 cifras que contestan «¿qué necesito saber ya?»
     ② secciones plegadas   — el Acordeón del catálogo, modo FAQ CON MARCO
     ③ acciones             — en el PIE DEL MARCO (`.exds-cajon-foot`), no aquí

   ⛔ ESTA HOJA CASI NO TIENE NADA, y eso es la señal de que el patrón está bien
   hecho: su aportación es el ORDEN y los UMBRALES, no un píxel nuevo. Todo lo
   que se ve son piezas del catálogo montadas — `Desglose`, `FilaMonto`,
   `Acordeon`, `Button`. *Si acaba necesitando una pieza nueva, es señal de que
   se está pasando de patrón a componente y hay que pararse.*

   CUÁNDO SE USA — el umbral sale de la medición, no del gusto:
     ≤ 8 campos → NADA de esto. Una columna plana sigue siendo la respuesta más simple.
     9 – 20     → cabecera de resumen OPCIONAL; secciones plegadas SÍ.
     > 20       → las dos zonas, obligatorias.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`) y la utilidad `.t-title-sm`.
     2. `box-sizing: border-box`.
     3. Las hojas de las piezas que monta: `patrones/cajon-lateral/`,
        `patrones/acordeon-faq/`, `componentes/desglose/`.
   ═══════════════════════════════════════ */

/* ── EL CUERPO DEL CAJÓN DE DETALLE ──────────────────────────────────────────
   Ocupa el hueco que le deja el marco y se desplaza por dentro. Las ACCIONES no
   están aquí: van en el pie del marco, fuera de lo que se desplaza — un botón
   que hay que ir a buscar bajando 200 elementos no es una acción disponible. */
.exds-cjd {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* ── ① LA CABECERA DE RESUMEN ────────────────────────────────────────────────
   Las 2 a 4 cifras que contestan «¿qué necesito saber ya?». No es un resumen de
   todo: es el subconjunto por el que se abrió el cajón.
   ⛔ MÁXIMO 4. Con cinco deja de ser cabecera y vuelve a ser lista — y entonces
   no resuelve nada, sólo mueve el problema 60px hacia arriba.
   Va SEPARADA por un hairline, que es lo que la convierte en una zona y no en
   los primeros renglones de la lista. */
.exds-cjd-resumen {
  flex-shrink: 0;
  padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
}

/* ── ② LAS SECCIONES PLEGADAS ────────────────────────────────────────────────
   Es el Acordeón del catálogo en modo FAQ y CON MARCO. El marco no es adorno:
   «permite separar claramente cada sección entre sí. Si no hubiera bordes, se
   vería muy plano» (Ricardo, 2026-08-20).
   Al llegar NO hay ninguna abierta, salvo la sección que motivó la apertura del
   cajón: se abre por donde preguntaste. */
/* ⛔ SÓLO EL RELLENO DE ARRIBA BAJA A CERO. LOS LATERALES SE QUEDAN (corregido 2026-09-01,
   el mismo día, y es una REGRESIÓN MÍA de horas antes).

   EL DEFECTO REAL, el que Ricardo reportó activando el hover: 16px de blanco entre la banda
   de grupo y la primera fila. Eso era el `padding-top`, y eso es lo único que sobraba.

   ⛔ LO QUE NO EXISTÍA: un «escalón lateral de 20px». Lo medí en una sonda que yo mismo
   monté, y esa sonda envolvía todo en un contenedor con `padding: 0 20px` que EN PRODUCCIÓN
   NO EXISTE — `.exds-cjd` no lleva relleno a propósito, «el relleno pasa a ser de cada zona»
   (patrones/cajon-detalle). Con ese relleno inventado, el `margin-inline: -20px` del acordeón
   compacto parecía quedarse corto; sin él, cancela EXACTAMENTE los 20 de esta clase.
   Al quitarlos, el acordeón pasó a tirar 20px FUERA del cajón: las secciones se corrieron a
   la izquierda de la banda y perdieron su margen. Ricardo lo vio en pantalla.

   *Una sonda que no reproduce el anidamiento real no mide de menos: mide OTRA COSA, y lo
   dice con la misma seguridad. Aquí arreglé un defecto que no existía y rompí lo que sí
   funcionaba — el peor de los dos errores posibles al medir.*

   El relleno de abajo (40) se queda: es aire al final del cajón, no una costura. */
.exds-cjd-secciones {
  padding: 0 var(--space-5, 20px) var(--space-10, 40px);
}