/* ═══════════════════════════════════════
   ▓ PATRÓN · Cajón de ajustes — gemelo vanilla ▓
   v1.0 · 2026-08-24. Ficha: `design-system/PATRON_CAJON_AJUSTES.md`
   Kit: `catalogo-cd/components/CajonAjustes.jsx`
   Handoff: `plans/design_handoff_cajones/`

   ⛔ ESTA HOJA ES SÓLO LO QUE ES **PROPIO** DE AJUSTES. El marco, la banda de grupo, la
   fila, el despliegue, la regla de sección 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».

   ⛔ EL DETALLE SE EDITA SIN CAMBIAR DE PANTALLA, y está CALCADO del centro de ayuda:
   mismo chevrón que gira, misma rejilla del despliegue, mismo cuerpo con su relleno y
   sus rótulos. Donde el artículo pone prosa, el ajuste pone campos. *No hay una segunda
   mecánica que aprender.*

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. `patrones/cajon-lateral/` y los componentes `Avatar`, `Input`, `Toggle`,
        `Segmented`, `Button`, `Banner`.
     4. `componentes/pie-cambios/` — el par Descartar/Guardar que aparece al ensuciar
        es esa PIEZA, no CSS de este patrón. Sin su hoja, el pie no aparece nunca: no
        se ve un defecto de estilo, se ve un formulario que no se puede guardar.
   ═══════════════════════════════════════ */

/* ── LA PILA DE CAMPOS DE UNA SECCIÓN ────────────────────────────────────── */
.exds-caj-campos { display: grid; row-gap: var(--space-3-5, 14px); }

/* La nota del rótulo — «informativo» en los ajustes que sólo se leen. Va SIN
   versalitas y en el gris más claro: es una aclaración del rótulo, no otro rótulo.
   ⛔ Y no es cosmética: un cajón donde todo parece editable MIENTE sobre lo que
   puedes cambiar. */
.exds-caj-nota {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg4, #B8BDC7);
}
.exds-caj-pista {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.45;
  color: var(--fg3, #5C6B7A);
  text-wrap: pretty;
}

/* ── LA IDENTIDAD — avatar + nombre + correo ─────────────────────────────── */
.exds-caj-identidad {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3-5, 14px);
  align-items: center;
}
.exds-caj-ident-n {
  display: block;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.35;
  color: var(--fg1, #0F1419);
}
.exds-caj-ident-c {
  display: block;
  margin: var(--space-0-5, 2px) 0 var(--space-2-5, 10px);
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.35;
  color: var(--fg3, #5C6B7A);
}

/* ── UN INTERRUPTOR CON SU EXPLICACIÓN ───────────────────────────────────── */
.exds-caj-sw {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4, 16px);
  align-items: start;
}
.exds-caj-sw-t {
  display: block;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: var(--fw-medium, 500);
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.35;
  color: var(--fg1, #0F1419);
}
.exds-caj-sw-d {
  display: block;
  margin-top: var(--space-1, 4px);
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.45;
  color: var(--fg3, #5C6B7A);
  text-wrap: pretty;
}

/* ── LA MATRIZ CAMPANA / CORREO ──────────────────────────────────────────────
   ⚠ Es lo ÚNICO de este cajón que resuelve un problema que sólo tiene esta
   pantalla, y por eso NO se promueve al catálogo: vive aquí y se queda aquí. */
.exds-caj-mtz {
  display: grid;
  grid-template-columns: 1fr 44px 44px;
  column-gap: var(--space-2, 8px);
  row-gap: var(--space-3, 12px);
  align-items: center;
}
.exds-caj-mtz-h {
  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(--fg4, #B8BDC7);
  text-align: center;
}
.exds-caj-mtz-t {
  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.35;
  color: var(--fg1, #0F1419);
}
.exds-caj-mtz-c { display: flex; justify-content: center; }

/* ── UN RENGLÓN DE ACTIVIDAD — qué pasó y cuándo ─────────────────────────── */
.exds-caj-act {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4, 16px);
  row-gap: var(--space-2-5, 10px);
  align-items: baseline;
}
.exds-caj-act-t {
  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.4;
  color: var(--fg2, #4B5563);
  text-wrap: pretty;
}
.exds-caj-act-h {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.5;
  color: var(--fg3, #5C6B7A);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════════════════════
   EL PIE QUE APARECE AL ENSUCIARSE — SE COSECHÓ AL CATÁLOGO EL 2026-08-23

   ⛔ AQUÍ YA NO HAY CSS DEL PIE, Y NO ES UNA OMISIÓN: es la pieza
   COMPONENTE_PIE_CAMBIOS.md, que este cajón MONTA. Un patrón consume piezas del
   canon, no las reimplementa (GOBIERNO.md §1-ter-bis, Ricardo 2026-08-23).

   Se cosechó porque el problema no era de ajustes: «Descartar / Guardar dentro de una
   fila desplegable, sin barra flotante» le pasa a cualquier formulario que se edite
   dentro de una fila. Ricardo aprobó promoverlo el 2026-08-24.

   LO QUE ESTE PATRÓN APORTA: los dos atributos de estado en el detalle —data-sucio y
   data-ok— y nada más. Las cuatro reglas (dónde vive, que no está siempre, que cerrar
   no descarta, que un campo tocado no se descuenta) viajaron con la pieza y viven en
   su ficha.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── EL BOTÓN QUE DICE «GUARDADO» — SE ABSORBIÓ EN EL BOTÓN EL 2026-08-23 ────
   ⛔ AQUÍ YA NO ESTÁ, Y NO ES UNA OMISIÓN. No era otro botón: era el botón HACIENDO
   ALGO, así que entró como PROPIEDAD suya — `COMPONENTE_BOTON.md` § El relevo de
   etiqueta, clase `.exds-btn-swap`, atributo `data-hecho` en el botón.
   DECISION-FUENTE: Ricardo, 2026-08-24 — «absorber en Button como propiedad».

   Lo que este cajón pone es cuándo se releva, no cómo se ve. */

/* ⛔ NO HAY GUARDA DE MOVIMIENTO REDUCIDO EN ESTA HOJA, Y ES CORRECTO: tras las dos
   cosechas del 2026-08-23, lo que queda aquí no se mueve. Las guardas viven con las
   piezas que sí se mueven — el pie de cambios, el botón y el marco del cajón lateral.
   *Una guarda que no protege nada envejece peor que su ausencia: el día que alguien
   añada una transición aquí, la verá escrita y creerá que ya está cubierta.* */