/* Escenas de Clientes. Calcan src/index.css (.clients-list, .client-row,
   .client-dups, .identity-popover, .invoice-picker-*) con la escala del
   marco (--t-*). */

/* ── Altas y bajas ────────────────────────────────────────────────────── */
.cl-collapsing { overflow: hidden; transition: height var(--spring-moderate), opacity var(--spring-moderate), margin var(--spring-moderate), padding var(--spring-moderate); }
.cl-collapsing.cl-gone { height: 0 !important; opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.stage[data-instant] .cl-collapsing { transition: none; }
.cl-hidden { display: none; }

/* ── Cabecera: buscador y + ───────────────────────────────────────────── */
.cl-toolbar { display: flex; align-items: center; gap: 8px; }
.cl-search { width: 180px; }
.cl-plus { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--control-fill); color: var(--green); cursor: pointer; transition: background-color var(--spring-fast), color var(--spring-fast); }
.cl-plus svg { width: 13px; height: 13px; }
.cl-plus:is(:hover, [data-hover]) { background: var(--control-fill-hover); color: var(--text); }

/* ── Fichas repetidas (DuplicateReview) ───────────────────────────────── */
.cl-dups-wrap { padding-bottom: 12px; }
.cl-dups { background: var(--surface); border-radius: var(--radius-lg); overflow: clip; }
.cl-dups-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: none; background: none; color: var(--text); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; transition: background-color var(--spring-fast); }
.cl-dups-head:is(:hover, [data-hover]) { background: var(--surface-hover); }
.cl-dups-title { flex: 1; min-width: 0; }
.cl-dups-toggle { font-size: var(--t-xs); color: var(--text-muted); }
.cl-dups-list { display: flex; flex-direction: column; }
.cl-dup { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 16px; }
.cl-dup-text { margin: 0; font-size: var(--t-xs); line-height: 1.4; color: var(--text-muted); }
.cl-dup-names { display: flex; flex-wrap: wrap; gap: 6px; }
/* La ficha que se queda es la opción elegida: su borde, en verde */
.cl-dup-name { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: none; color: var(--text); font: inherit; font-size: var(--t-sm); cursor: pointer; transition: background-color var(--spring-fast), border-color var(--spring-fast); }
.cl-dup-name:is(:hover, [data-hover]) { background: var(--surface-hover); }
.cl-dup-name.is-kept { border-color: color-mix(in srgb, var(--green) 70%, transparent); }
.cl-dup-count { font-size: var(--t-xs); color: var(--text-muted); }
.cl-dup-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-btn { padding: 4px 12px; border: none; border-radius: var(--radius-pill); background: var(--control-fill); color: var(--text-muted); font: inherit; font-size: var(--t-xs); font-weight: 500; cursor: pointer; transition: background-color var(--spring-fast), color var(--spring-fast); }
.cl-btn:is(:hover, [data-hover]) { background: var(--control-fill-hover); color: var(--text); }
.cl-btn:active { transform: scale(0.97); }

/* ── La lista ─────────────────────────────────────────────────────────── */
.cl-list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); overflow: clip; }
.cl-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: none; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--spring-fast); }
.cl-row:is(:hover, [data-hover]) { background: var(--surface-hover); }
.cl-avatar { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.04em; }
.cl-row-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cl-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-base); font-weight: 600; }
.cl-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--text-subtle); }
.cl-row-end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cl-row-value { font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-chevron { display: inline-flex; flex-shrink: 0; margin-right: -4px; color: var(--text-subtle); }

/* En el iPhone: el nombre entero en la primera línea y la cifra baja a la
   segunda, junto a lo de debajo */
.phone .cl-toolbar { margin-bottom: 12px; }
.phone .cl-search { flex: 1; width: auto; height: 36px; font-size: var(--t-sm); }
.phone .cl-plus { width: 36px; height: 36px; }
.phone .cl-plus svg { width: 15px; height: 15px; }
.phone .cl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "avatar name name chevron" "avatar sub end chevron"; column-gap: 12px; row-gap: 2px; }
.phone .cl-row-main { display: contents; }
.phone .cl-avatar { grid-area: avatar; align-self: center; }
.phone .cl-row-name { grid-area: name; white-space: normal; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.phone .cl-row-sub { grid-area: sub; align-self: center; white-space: normal; }
.phone .cl-sub-part { white-space: nowrap; }
/* Un correo es una sola palabra: es lo único que puede acabar en «…» */
.phone .cl-sub-mail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone .cl-row-end { grid-area: end; }
.phone .cl-chevron { grid-area: chevron; align-self: center; }

/* ── La factura y su campo Cliente ────────────────────────────────────── */
/* El editor es una lista agrupada de iOS (FormRows): cada grupo una
   tarjeta sobre el fondo, cada dato una fila con el rótulo a la izquierda y
   el valor a la derecha, sin caja, y un filete fino que no llega al borde. */
.cl-form { display: flex; flex-direction: column; gap: 12px; }
.cl-group { display: flex; flex-direction: column; padding: 0 14px; border-radius: var(--radius-lg); background: var(--surface); }
.cl-frow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; font-size: var(--t-base); }
.phone .cl-frow { min-height: 44px; }
.cl-frow + .cl-frow { box-shadow: inset 0 0.5px 0 var(--border); }
.cl-flabel { flex: none; color: var(--text); }
.cl-fvalue { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-fvalue--muted { color: var(--text-muted); }
.cl-fvalue--pill { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--control-fill); }
.cl-fchev { display: inline-flex; color: var(--text-subtle); }
.cl-pick-wrap { position: relative; display: flex; justify-content: flex-end; min-width: 0; }
/* El valor en línea (.notion-inline-value): sin caja, gris al pasar */
.cl-inline { display: inline-flex; align-items: center; height: 26px; padding: 0 6px; margin-right: -6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; font: inherit; font-size: var(--t-base); line-height: 1; color: var(--text); text-align: right; cursor: pointer; transition: background-color var(--spring-fast); }
.cl-inline:is(:hover, [data-hover]) { background: var(--surface-hover); }
.cl-inline.empty { color: var(--text-muted); }
.cl-chip { display: flex; align-items: center; gap: 2px; margin-right: -4px; transition: opacity var(--spring-moderate), transform var(--spring-moderate); }
.cl-chip .cl-inline { padding: 2px 4px; margin-right: 0; background: none; font-weight: 500; }
.cl-chip.cl-pop-in { opacity: 0; transform: scale(0.96); }
.cl-unlink { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-subtle); cursor: pointer; transition: background-color var(--spring-fast), color var(--spring-fast); }
.cl-unlink:is(:hover, [data-hover]) { background: var(--surface-hover); color: var(--red); }

/* El desplegable (PickerPopover): buscar arriba y la lista debajo, con el
   material de lo que flota */
.cl-pick-pop {
  position: absolute; z-index: 20; width: 300px; padding: 4px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--float-ring), var(--sat-shadow);
  opacity: 0; transform: scale(0.97) translateY(-4px); transform-origin: top right; pointer-events: none;
  transition: opacity var(--spring-moderate-exit), transform var(--spring-moderate-exit);
}
.cl-pick-pop.open { opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--spring-moderate), transform var(--spring-moderate); }
.cl-pick-input { width: 100%; margin: 0 0 4px; padding: 6px 12px; border: none; border-radius: var(--radius); outline: none; background: var(--control-fill); font: inherit; font-size: var(--t-base); color: var(--text); transition: box-shadow var(--spring-fast); }
.cl-pick-input:focus { box-shadow: var(--focus-ring); }
.cl-pick-input::placeholder { color: var(--text-subtle); }
.cl-pick-list { position: relative; display: flex; flex-direction: column; gap: 1px; }
.cl-pick-list .fluid-highlight { border-radius: var(--radius); }
.cl-pick-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: none; border-radius: var(--radius); background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.cl-pick-row[disabled] { cursor: default; }
.cl-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-base); }
.cl-pick-empty { padding: 6px 12px; font-size: var(--t-sm); color: var(--text-subtle); }

/* En el iPhone, el desplegable a lo ancho de la pantalla */
.cl-phone-form .cl-pick-pop { width: auto; left: 12px !important; right: 12px !important; }