/* «Personas» — la lista de contactos de la cuenta (F9/F10, docs/contrato-contactos.md §4).
   Componentes: static/js/components/contactos-cuenta.js y contacto-sheet.js.
   -----------------------------------------------------------------------------------------------
   Vive DENTRO de «Más información» de la ficha. Desde F12 (2026-09-14) es la ÚNICA lista de
   personas: los tres bloques fijos (Compras/Marketing/Administración) se retiraron y sus datos
   son filas de `client_contacts` con su rol.

   ⚠️ NINGÚN color nuevo: todo sale de `tokens.css` (mismo criterio que cuentas.css/cheques.css).
   El chip «Decide» es `UI.chip(..., 'green', true)`, o sea el chip del sistema — acá no se
   redefine ni su fondo ni su texto. */

/* ---- Encabezado: el `.subhd` de siempre + la acción a la derecha ------------------------------ */
.ct-hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.ct-add:disabled { opacity: .5; cursor: default; }

/* ---- Una fila = una persona ------------------------------------------------------------------ */
.ct-list { display: flex; flex-direction: column; }
.ct-row {
  display: flex; align-items: flex-start; gap: 10px;
  /* Padding HORIZONTAL `--sp-4`, el mismo del resto de «Más información» — F12 (2026-09-14):
     sin él las filas arrancaban pegadas al borde mientras los bloques fijos de al lado llevaban
     `--sp-4`, y Fernando lo vio como "aparece desalineado". Esos bloques ya no existen; la medida
     se queda porque es la del contenedor, no la de los vecinos. */
  padding: var(--sp-2) var(--sp-4); min-height: 52px;
  border-top: .5px solid var(--hairline);
}
.ct-row:first-child { border-top: 0; }
/* `min-width: 0` explícito: sin él un email largo estira el flex y empuja el lápiz fuera de la
   caja (la lección del 30/8 con las columnas del embudo — el min-content de un ítem flex es su
   contenido, no cero). */
.ct-main { flex: 1; min-width: 0; }

.ct-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 600 var(--fs-body)/1.35 var(--font); color: var(--text-1);
}
.ct-role { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-3); margin-top: 1px; }
.ct-nota { font: 400 var(--fs-caption)/1.45 var(--font); color: var(--text-2); margin-top: 3px; }

/* Teléfono y email en un renglón que ENVUELVE: cortar un email con ellipsis lo vuelve inservible
   (§4.1 nº12 — un texto cortado se ve prolijo y no dice nada). */
.ct-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px;
  font: 400 var(--fs-caption)/1.4 var(--font);
}
/* El VALOR se lee, la ACCIÓN vive en su botón (mockup aprobado del 14/9): un teléfono y un email
   en texto plano se copian y se verifican de un vistazo, y no compiten con los botones de al lado
   por el mismo gesto (§4.1 nº6 — un dato, un lugar, también dentro de una fila). */
.ct-val { color: var(--text-2); word-break: break-word; }
/* El hueco se muestra, no se esconde (§4.1 nº7) — y con el color de "falta", nunca con el de un
   dato cargado. */
.ct-empty { color: var(--text-3); }

.ct-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Un solo tamaño de botón para las cuatro acciones (WhatsApp · Email · tilde · lápiz): el mockup
   las trata igual y una fila con cajas de tamaños distintos se lee como un error de layout. */
.ct-btn {
  position: relative;
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  text-decoration: none;
}
.ct-btn:hover { background: var(--surface-2); color: var(--text-1); }
/* WhatsApp con el verde del sistema (`--green-*`, ya medido en los dos temas): es el canal real de
   la venta B2B y el botón que más se toca de la fila. */
.ct-btn-wa {
  background: var(--green-soft); border-color: var(--green-border); color: var(--green-text);
}
.ct-btn-wa:hover { background: var(--green-soft); color: var(--green-text); filter: brightness(.97); }

/* El tilde de verificación es `COMPONENTS.verifyCheck` (18px redondo, con su propio blanco táctil
   de 44px en `pointer: coarse`): se lo centra en una caja del mismo tamaño que los otros botones
   para que la fila no quede dentada. `margin-left` del wrapper `.vc` a 0 — acá el aire lo pone el
   `gap` de `.ct-acts`, no el control. */
.ct-verify {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ct-verify .vc { margin-left: 0; }

.ct-vacio {
  margin: 0; padding: var(--sp-2) var(--sp-4);
  font: 400 var(--fs-caption)/1.45 var(--font); color: var(--text-3);
}

/* Blanco táctil de 44px sin agrandar la caja real (el patrón del proyecto: un pseudo-elemento,
   nunca padding — agrandar la caja descoloca la fila). */
@media (pointer: coarse) {
  /* -7px y no -6px: medido a 375 con barrido de `elementFromPoint`, con -6 el hairline de la fila se
     come un píxel y quedan 43 (misma lección que la barra de pestañas, 13/9). */
  .ct-btn::after { content: ''; position: absolute; inset: -7px -7px; border-radius: 12px; }
  /* «+ Agregar contacto» mide 27px de alto: sin esto el blanco táctil real era 27,5 (medido). */
  .ct-add { position: relative; }
  .ct-add::after { content: ''; position: absolute; inset: -9px -4px; }
}

/* ---- La hoja de alta/edición ------------------------------------------------------------------
   El esqueleto (`.sheet`, `.sheet-hd`, `.sheet-body`, `.opt-row`/`.opt`, `.flabel`) es el del
   sistema (app.css): acá solo lo propio de esta hoja. */
.ct-in {
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-app); color: var(--text-1);
  font: 400 var(--fs-body)/1.4 var(--font);
}
.ct-in:focus { outline: 2px solid var(--blue-solid); outline-offset: 1px; }
.ct-nota-ta { width: 100%; }
.ct-sin-roles { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--red-text); }

.ct-tick {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer;
  font: 400 var(--fs-body)/1.35 var(--font); color: var(--text-1);
}
.ct-tick input { width: 20px; height: 20px; flex-shrink: 0; }

.ct-del {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: .5px solid var(--hairline);
}
.ct-del-txt { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-2); }

/* Toggle «Contacto principal» (F12, contrato §7.6). El control es `UI.switchControl` (`.switch`
   de app.css, con su blanco táctil de 44px); acá solo la fila que lo acompaña: el texto a la
   izquierda y el riel a la derecha, separados del resto del formulario por un hairline — es una
   decisión de OTRO orden que los campos de arriba (cambia a quién le escribe el sistema), no un
   campo más de la ficha de la persona. */
.ct-tog {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: .5px solid var(--hairline);
}
.ct-tog-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-tog-txt strong { font: 600 var(--fs-body)/1.35 var(--font); color: var(--text-1); }
/* `--text-2` y no `--text-3`: es una instrucción que cambia a quién le escribe el sistema, o sea
   texto INFORMATIVO. Medido con la fórmula WCAG sobre el fondo REAL de la hoja (`--bg-app`, que es
   el que pinta `.sheet` en app.css — no `--surface`) en los dos temas: `--text-2` da claro 7,09:1
   y oscuro 7,99:1. `--text-3` daría 4,54 y 4,81 — pasa raspando acá y NO pasa sobre `--surface`
   (4,35 en oscuro), así que no se usa para texto que informa (lección del 8/9: el ratio que
   tokens.css documenta es el del tema CLARO). */
.ct-tog-txt span { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-2); }

/* Nota al pie de «Personas»: qué significa «principal», que es lo único que la lista no puede
   decir sola (el chip azul no explica a qué da derecho).
   ⚠️ Se llamaba `.ct-fixed-note` y se renombró el 2026-09-14 (F12): "fixed" era por las tres
   personas FIJAS, que ya no existen — un nombre que describe algo retirado manda a buscar código
   que no está. Padding horizontal `--sp-4`, el mismo de las filas: sin él la nota arrancaba
   pegada al borde mientras la lista de arriba no. */
.ct-note {
  margin: var(--sp-2) 0 0; padding: 0 var(--sp-4);
  /* `--text-2` sobre `--surface`, medido: claro 7,91:1 · oscuro 6,88:1 (AA los dos). La nota
     INFORMA qué significa el chip azul, no decora — y `--text-3` sobre `--surface` da 4,35 en
     oscuro, por debajo de AA. */
  font: 400 var(--fs-caption)/1.45 var(--font); color: var(--text-2);
}
.ct-note strong { font-weight: 600; color: var(--text-2); }

/* ---- F11: la persona en el historial y el selector de destinatario --------------------------- */
/* «a **Nelson Graells** · Dueño» en la meta de un email del timeline (contrato §6.2). Hereda el
   tamaño de `.tl-meta`: solo el `strong` del nombre lo separa del resto de la línea. */
.tl-persona strong { font-weight: 600; color: var(--text-2); }

/* Hoja «¿A quién le escribimos?» — el esqueleto es el del sistema (`.sheet*`). */
.pp-sheet .sheet-body { display: flex; flex-direction: column; gap: var(--sp-1); }
.pp-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 56px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text-1); text-align: left; cursor: pointer;
}
.pp-row:hover { background: var(--surface-2); }
.pp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 600 var(--fs-body)/1.35 var(--font);
}
/* El valor NO se corta: un teléfono o un email truncado se ve prolijo y no se puede verificar
   (§4.1 nº12), y acá es justo el dato con el que la persona decide. */
.pp-val { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-3); word-break: break-word; }
.pp-rol { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-3); flex-shrink: 0; }