/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ ALTA DE CONTACTOS · lo que el patrón declara que NO trae ▓
   `admin/js/backoffice/contacto-alta.js` monta piezas ENTERAS del catálogo (Input, FieldRow,
   OptionList, el patrón `lista-coincidencias`, el Skeleton «lista»): esta hoja sólo es el
   pegamento del ANFITRIÓN — el sitio donde viven esas piezas dentro del cuerpo del cajón.
   Ni un valor propio fuera de tokens del canon.

   ⛔ 2026-09-21 · «NUEVO CONTACTO» PASA DE MODAL A CAJÓN LATERAL (Ricardo, «actualmente
   nuevo contacto abre un modal, no debe ser así, debe abrir cajon lateral»; el canon ya lo
   pedía, `COMPONENTE_MODAL.md`: «si el contenido no bloquea… es un drawer, no un modal»).
   El anfitrión YA NO ES `.exds-modal-body` (28px, `admin/css/modal.css`): es el cajón único
   de la topbar (`#topbarDrawer .tbd`, `topbar-drawer.js`), con su relleno de fábrica
   `.tbd-pad` (`admin/css/backoffice.css`, 20px = token `--space-5`). Cada número que este
   archivo tomaba prestado del modal (28px, en tres sitios) se reancla al del cajón — ver
   cada regla abajo. El pie (Guardar/Cancelar) pasó de `.exds-modal-foot` a Z5 del cajón
   (`.exds-cajon-pie` + `.exds-cajon-pie-btns`, `cajon-lateral.css`), sin regla propia aquí:
   es la MISMA pieza que ya usa `conciliacion-cajon.js`, no una copia.

   ⛔ HOMOLOGACIÓN 2026-09-11 (`design-system/homologacion/contactos.md` ·
   `## DELTA 2026-09-11 · db1465a`) — cuatro sustituciones, todas contra el catálogo VIGENTE:
     1. El rótulo «Tipo de contacto» pasó de `.t-eyebrow` a `.exds-fr-lab`/`.exds-fr-l` (el
        mismo idioma de los otros seis campos).
     2. El rótulo «Explica por qué, para continuar» pasó de `.exds-fr-h` suelto a la fila
        FieldRow completa.
     3. «Buscando contactos parecidos…» pasó de texto plano a Skeleton (`.exds-skel-row`).
     4. La lista de candidatos pasó de `.bo-cmdk-item` (con un hairline añadido desde fuera)
        al patrón `lista-coincidencias` (`.exds-lc-*`) — el hairline SE RETIRA, no se traslada:
        la pieza canónica no lleva separador entre filas (sólo fondo en la activa).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* El subtítulo de estado («Ya existen 2 contactos parecidos.», el aviso de error de
   consulta…) — vivía como `.exds-modal-sub` dentro de la cabecera del modal retirado. El
   marco del cajón (`topbar-drawer.js`) sólo tiene UN rótulo de título (`.tbd-title`) y no
   una zona de subtítulo propia, así que el aviso de estado vive dentro del cuerpo, arriba
   del contenido dinámico — misma tipografía que traía `.exds-modal-sub` (`modal.css`). */
.calt-sub {
  margin: 0 0 var(--space-3, 12px);
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-body, 14px);
  line-height: 1.5;
  color: var(--fg2, #4B5563);
}
.calt-sub[hidden] { display: none; }

/* La lista de contactos parecidos — scroll propio si son muchos, sin que el cajón crezca
   sin límite. `.exds-lc-item` ya trae su propia geometría (icono/avatar + título + meta +
   pastilla); esto sólo acota el contenedor y repone el relleno lateral del anfitrión (20px,
   `.tbd-pad`) que el margen negativo cancela — NINGÚN hairline entre filas: eso ya no es de
   este anfitrión. */
.calt-candidatos { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; margin: 0 -20px; }
.calt-candidatos .exds-lc-item { padding-left: 20px; padding-right: 20px; }

/* ⛔ N2 · homologación 2026-09-11, defecto hallado por auditoría de ojos frescos: el
   relleno de fábrica de FieldRow (`--fr-bleed: 18px`) NO coincide con el relleno real del
   anfitrión, así que el hairline de las FieldRows quedaba corrido respecto al borde — mientras
   `.calt-candidatos` (arriba) y el OptionList (abajo) ya se medían al valor correcto. Se
   reancla al valor REAL del anfitrión, nunca a uno inventado aquí.
   ⛔ RE-ANCLADO 2026-09-21 (cajón lateral, no modal): el anfitrión era `.exds-modal-body`
   (`padding: 16px 28px`, `admin/css/modal.css:161` — 28px, un literal FUERA de escala: la
   escala salta de `--space-6` 24px a `--space-8` 32px) y hoy es `.tbd-pad`
   (`admin/css/backoffice.css`: `padding: var(--space-5) var(--space-5) var(--space-10)` —
   20px horizontal, y ÉSE sí es un token). Si ese padding cambia, este valor tiene que
   seguirlo — sigue al anfitrión REAL, nunca a uno recordado de memoria. */
[data-calt-body] .exds-frs { --fr-bleed: 20px; }

/* El bloque de tipo de persona — la etiqueta usa el MISMO idioma que el resto del
   formulario (`.exds-fr-lab`/`.exds-fr-l` de FieldRow), aunque el CONTROL (OptionList) no
   vive dentro de `.exds-fr-ctl`.
   ⛔ N3 · corregido 2026-09-11 (auditoría de ojos frescos): el argumento manda es el ANCHO:
   `COMPONENTE_OPTIONLIST.md` exige que el estilo «filas» pueda leer su texto en una sola
   línea, y la columna de control de FieldRow (`--fr-ctl-w`, 236px de fábrica) es demasiado
   angosta para eso — MEDIDO: ahí dentro, «Persona física con actividad empresarial» se
   parte en 2 renglones (63px) mientras las otras dos opciones quedan en 1 (48-49px), el
   mismo OptionList con alturas de fila desiguales.
   GATE-ALLOW: OptionList de «Tipo de contacto» vive fuera de `.exds-fr-ctl`, sólo comparte
   el rótulo con FieldRow · en la columna de 236px la opción más larga se parte en 2
   renglones (63px) contra 48-49px de las otras — meterlo ahí deformaría la pieza para
   calzar en FieldRow. */
.calt-tipo { margin-bottom: var(--space-2, 8px); }
.calt-tipo .exds-fr-lab { display: block; margin-bottom: var(--space-1, 4px); }

/* ⛔ v0.6 · 2026-09-28 — SE RECUPERA EL SANGRADO POR VARIABLES. El cajón lateral (`.tbd`,
   `.tbd-pad` 20px) ENMARCA la lista, así que va a ras (`data-a-ras` en el JS) con el
   relleno real del anfitrión — no el recuadro que pedía v0.4 «sin importar el anfitrión»
   (corregido por v0.6 el mismo día). `--ol-sangrado-b:0px` porque no hay nada debajo del
   OptionList dentro de `.calt-tipo`: el propio marco del cajón cierra la caja.
   Ver `design-system/COMPONENTE_OPTIONLIST.md` v0.6 §Anatomía › Contenedor. */
.calt-tipo .exds-ol { --ol-sangrado-x: 20px; --ol-sangrado-b: 0px; }

/* El motivo que exige A1/A3 — ahora es la fila FieldRow COMPLETA (`.exds-frs > .exds-fr-row`),
   envuelta en su propio `.exds-frs` de una sola fila: esta hoja sólo pone el margen que la
   separa del aviso de arriba y del bloque siguiente. Ya no hay rótulo suelto que estilar
   (antes era `.exds-fr-h` a mano) — el label/control los da la pieza. */
.calt-motivo { margin-bottom: var(--space-3, 12px); }

/* «Buscando contactos parecidos…» — el esqueleto CANÓNICO (`.exds-skel-row`, `estados.css`),
   variante «lista»: se conoce la forma (avatar + dos líneas + pastilla), así que no es un
   texto ni un spinner. Sin propiedades propias a propósito: el relleno lateral lo da el
   anfitrión (`.tbd-pad`, 20px) y cada fila trae su propio ritmo vertical (`--space-2-5 0`). */

/* ⛔ TELÉFONOS Y CORREOS ADICIONALES (2026-09-17) — Opción A de
   `plans/decisiones/_decision_medios_adicionales_2026-09-17.html`.
   `DECISION-FUENTE: Ricardo, 2026-09-17 — «puede tener varios telefonos, correos, etc., pero
   siempre 1 principal»` · sobre el botón «Agregar»: «A. solo le agregaria un + al boton
   agregar asi como lo hace el catalogo» (el `+` de `ListaRepetible.jsx`, `IconoMas` —
   `Icono name="plus" size={16} sw={1.5}`, verbatim de Lucide, nunca dibujado a mano aparte).

   ⛔ POR QUÉ NO ES `FieldRow`: el control de esta fila (título + acciones + input) no cabe
   en la columna fija de `.exds-fr-ctl` (`--fr-ctl-w`, 236px) — mismo argumento que ya usa
   `.calt-tipo` un poco más arriba en este archivo para el OptionList de «Tipo de contacto».
   Se reusa el rótulo de FieldRow (`.exds-fr-lab`/`.exds-fr-l`) para el PRINCIPAL, y el resto
   es de esta hoja — la ficha aprobada dice «se construye con piezas que YA EXISTEN» (FieldRow,
   Input, Button, IconButton); lo que no existe es sólo el LAYOUT que las agrupa, y eso no se
   cosecha con una pantalla usándolo (`GOBIERNO.md` §0-ter: un uso no es un patrón todavía). */
.calt-medios {
  margin-bottom: var(--space-3, 12px);
  border-top: 1px solid var(--color-border-subtle);
}
/* ⛔ EL HAIRLINE VA EN CADA BLOQUE VISIBLE, NUNCA EN SU ENVOLTURA (corregido al medir en
   navegador): `[data-calt-medios-lista]` es un contenedor que puede estar VACÍO (cero
   adicionales, el caso más común) — si el borde/relleno se le pone a él en vez de a sus
   hijos, un contenedor vacío sigue dibujando una fila fantasma (borde + 26px de aire con
   nada dentro). Cada pieza real pone su PROPIO `border-top`; el primer bloque
   (`.calt-medio-principal`) no lo necesita porque ya lo da `.calt-medios`. */
.calt-medio-principal, .calt-medio-fila { display: flex; flex-direction: column; gap: 6px; padding: 13px 0; }
.calt-medio-agregar { padding: 13px 0; }
.calt-medio-fila, .calt-medio-agregar { border-top: 1px solid var(--color-border-subtle); }
.calt-medio-fila-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Rótulo del adicional en tono bajo — informativo, no es un campo obligatorio nuevo. */
.calt-medio-fila-titulo { font: 400 var(--fs-eyebrow, 11px) var(--font-sans); color: var(--fg3); }
.calt-medio-fila-acciones { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.calt-medio-agregar .exds-btn { width: 100%; }
.calt-medio-agregar .exds-btn svg { width: 16px; height: 16px; flex-shrink: 0; }