/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ CONTACTOS · lo ÚNICO que el patrón declara que NO trae ▓
   2026-08-18 · monta `design-system/patrones/pantalla-lista/`.

   ⛔ AQUÍ NO SE DIBUJA NI UN CONTROL. La barra, la tabla, el pie, los cinco estados, el
   menú, las secciones de filtro, los chips y las pastillas vienen ENTEROS de las hojas
   copiadas del catálogo (`pantalla-lista.css`, `menu.css`, `seccion-filtros.css`,
   `chip-filtro.css`, `pastilla-filtro.css`, `field-row.css`). Lo que queda para esta
   hoja es lo que el README del patrón declara como del anfitrión: **el sitio donde vive
   la lista dentro de la vista** y **el cuerpo del cajón de detalle**.

   ⛔ Y NI UN VALOR PROPIO: todo sale de tokens del canon. Si falta un token la pieza se
   ve mal, y eso es correcto — no se inventa aquí el sistema de la app anfitriona.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── EL SITIO DE LA LISTA DENTRO DE LA VISTA ───────────────────────────────────
   El mismo aire que el resto del backoffice le da a su contenido. El ANCHO no se toca
   aquí: es `--exds-pl-ancho`, y vive en el marcado, en un solo sitio (regla dura 1 del
   patrón). Poner un segundo mando de ancho es exactamente el defecto que el patrón
   existe para impedir. */
.cont-lienzo { padding: var(--space-6) var(--space-8); }

/* ── EL CUERPO DEL CAJÓN · la ficha del contacto ───────────────────────────────
   Va en el MARCO ÚNICO de Exante (`#topbarDrawer` / `window.TBD`), como Facturación:
   no se construye ningún cajón, se REGISTRA un módulo. `COMPONENTE_DRAWER_TOPBAR.md`:
   *«es EL ÚNICO drawer de Exante… y para CUALQUIER panel lateral»*. */
.cont-cajon { padding: var(--space-4) var(--space-5) var(--space-10); }

/* El bloque destacado de la cabecera. ⛔ EL NOMBRE NO SE REPITE AQUÍ: ya es el título del
   encabezado del cajón, que mide 64 fijo y no admite contenido rico
   (`COMPONENTE_DRAWER_TOPBAR.md`). Lo que baja al cuerpo es la FORMA del avatar, el tipo
   y el folio. *Un dato escrito dos veces a diez píxeles de distancia no refuerza: hace
   dudar de si son el mismo dato.* */
.cont-cajon-cab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.cont-cajon-cab .exds-pl-av { width: 46px; height: 46px; font-size: var(--fs-body); }
.cont-cajon-id { min-width: 0; }
.cont-cajon-tipo { font: var(--fw-semibold) var(--fs-h3) var(--font-sans); color: var(--fg1); }
.cont-cajon-folio {
  margin-top: 2px;
  font: var(--fw-regular) var(--fs-body-sm) var(--font-mono);
  color: var(--fg3);
}

/* Las relaciones, con la MISMA etiqueta de contorno que la fila de la tabla
   (`.exds-pl-tag`): dos dibujos para el mismo dato en dos sitios de la misma pantalla se
   leen como dos datos distintos. */
.cont-cajon-rels {
  display: flex;
  gap: var(--space-1-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* El aviso de purga usa la pieza del CATÁLOGO, `.exds-banner` variante `tint` (2026-08-25),
   no un párrafo suelto con clase propia. ⛔ ANTES ERA `.af-callout`, el aviso de andar por
   casa del backoffice: se cambió el día que Facturación adoptó el gemelo y `banner.css`
   entró en `index.html`, para no quedarse como la última excepción de la app. Lo único que
   esta hoja aporta es el aire de abajo — el sitio del aviso dentro del cajón es del
   anfitrión; su dibujo, de la pieza. */
.cont-cajon-aviso { margin-bottom: var(--space-4); }

/* ⛔ LAS DOS PERILLAS DE `FieldRows`, Y SON SUYAS: la pieza las expone a propósito, así que
   ponerles valor NO es sobrescribirla — es montarla.
     · `--fr-bleed`  el relleno lateral del anfitrión. Sin él la sangría sale descuadrada
       (requisito 3 de `field-row.css`) y la línea no cruza el panel entero.
     · `--fr-ctl-w`  el ancho de la columna de valores. 236 es el valor de fábrica y está
       pensado para un formulario ancho; en un cajón de 420 px deja la etiqueta en ~128 y
       «Ejecutivo asignado» parte en tres líneas. 210 le devuelve el aire a la etiqueta y
       el domicilio sigue partiendo solo (`overflow-wrap: anywhere` es de la pieza). */
.cont-cajon .exds-frs { --fr-bleed: var(--space-5); --fr-ctl-w: 210px; }