/* Clientes comparte marco y escala con Inicio / Anualidades. Un único scroll. */
.canvas.cl-canvas { padding:0; overflow-y:auto; scrollbar-gutter:stable; }
#asApp[data-pro-page="clientes"] { transition:none; }
.cl-wrap { position:relative; width:100%; max-width:880px; margin-inline:auto; padding:28px 0 64px; color:var(--ink); font-size:14px; line-height:1.5; flex-shrink:0; container:clientes / inline-size; }
.cl-wrap *, .cl-picker *, .cl-form-content * { box-sizing:border-box; }
.cl-wrap :is(h1,h2,h3,p),.cl-picker p,.cl-form-content p { margin:0; }
.cl-wrap button,.cl-picker button,.cl-form-content button { appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer; box-shadow:none; }
.cl-wrap button:disabled,.cl-picker button:disabled,.cl-form-content button:disabled { opacity:.55; cursor:default; }
.cl-wrap :is(button,input,textarea):focus-visible,.cl-picker :is(button,input):focus-visible,.cl-form-content :is(button,input,textarea):focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.cl-wrap svg,.cl-picker svg,.cl-form-dialog svg { width:16px; height:16px; flex-shrink:0; stroke-width:2; }
.cl-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.cl-head h1,.cl-identity h1 { font-size:26px; line-height:1.2; font-weight:700; letter-spacing:-.03em; overflow-wrap:anywhere; }
.cl-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 12px; border:1px solid var(--line); border-radius:var(--r-pill); font-size:13px !important; line-height:20px; font-weight:500 !important; color:var(--mut); background:var(--card); text-decoration:none; }
.cl-btn:hover { color:var(--ink); background:var(--pro-row-hover,var(--bg)); }
.cl-btn--primary { background:var(--brand); color:white; border-color:var(--brand); }
.cl-btn--primary:hover { background:var(--brand); color:white; }
.cl-link { border:0; background:transparent; color:var(--mut); border-radius:8px; padding:8px 4px; min-height:36px; display:inline-flex; align-items:center; gap:6px; font-size:13px !important; font-weight:500; text-decoration:none; }
.cl-link:hover { color:var(--brand); }
.cl-ai { color:var(--brand); }
.cl-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.cl-search { display:flex; align-items:center; gap:8px; width:320px; max-width:100%; min-height:36px; padding:0 12px; background:var(--card); color:var(--mut); border:1px solid var(--line); border-radius:12px; }
.cl-search input { width:100%; min-width:0; min-height:34px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:13px; }
.cl-search input:focus-visible { outline:0; }
.cl-search-status { color:var(--mut); font-size:12px; white-space:nowrap; }
.cl-search-status:empty { display:none; }
.cl-index-status { padding-top:12px; }
.cl-search:focus-within { outline:2px solid var(--brand); outline-offset:3px; }
.cl-segments { display:flex; flex-wrap:wrap; gap:0; width:fit-content; padding:2px; border-radius:var(--r-pill); background:var(--pro-segment-surface); }
.cl-segments button { min-height:30px; border:0; border-radius:var(--r-pill); padding:4px 12px; color:var(--mut); background:transparent; font-size:13px; font-weight:500; }
.cl-segments button[aria-pressed="true"] { color:var(--ink); background:var(--card); box-shadow:inset 0 0 0 1px var(--line); }
.cl-card { background:var(--card); border:1px solid var(--line); border-radius:var(--pro-card-radius); overflow:hidden; }
.cl-card+.cl-card { margin-top:20px; }
.cl-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 20px 12px; }
.cl-wrap h2 { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; line-height:1.4; }
.cl-wrap h2 svg { color:var(--mut); width:18px; height:18px; }
.cl-muted,.cl-meta { color:var(--mut); }
.cl-meta { font-size:12px; line-height:18px; }
.cl-status { color:var(--mut); font-size:13px; margin-bottom:12px !important; }
.cl-status:empty { display:none; }
.cl-empty { padding:24px 20px; color:var(--mut); }
.cl-empty strong { display:block; color:var(--ink); font-size:16px; font-weight:600; margin-bottom:8px; }
.cl-empty .cl-btn { margin-top:16px; }
.cl-list { list-style:none; padding:0; margin:0; }
.cl-table-head,.cl-person { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 28px; gap:20px; }
.cl-table-head { padding:12px 20px; background:var(--pro-group-surface,var(--bg)); font-size:12px; color:var(--mut); }
.cl-person { width:100%; text-align:left; border:0; padding:16px 20px; min-height:88px; color:var(--ink); background:var(--card); align-items:center; }
.cl-list > li+li { border-top:1px solid var(--line); }
.cl-person:hover,.cl-row:hover { background:var(--pro-row-hover,var(--bg)); }
.cl-person > span { min-width:0; }
.cl-person strong,.cl-row strong { display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.cl-person small { display:block; color:var(--mut); font-size:12px; line-height:18px; margin-top:4px; overflow-wrap:anywhere; }
.cl-next { font-size:13px; }
.cl-overdue { color:var(--qv-danger,#dc2626) !important; }
.cl-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 0; color:var(--mut); font-size:12px; }
.cl-page-summary,.cl-page-size { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.cl-page-size { gap:8px; }
.cl-page-controls { display:flex; gap:8px; }
.cl-legacy { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:16px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; font-size:13px; color:var(--mut); }
.cl-return-nav { position:absolute; top:var(--pro-page-start-space); left:0; }
.cl-back { justify-content:center; width:40px; height:40px; padding:0; }
.cl-back span { display:none; }
.cl-detail:not(.cl-wide-return) .cl-client-heading .cl-avatar { visibility:hidden; }
.cl-return-nav--shell { position:fixed; top:calc(var(--topbar-h) + var(--pro-page-start-space)); z-index:2; color:var(--mut); }
.cl-return-nav--shell .cl-back { appearance:none; font-family:Inter,sans-serif; width:auto; min-height:40px; padding-inline:4px; cursor:pointer; }
.cl-return-nav--shell .cl-back span { display:inline; }
.cl-return-nav--shell svg { width:16px; height:16px; stroke-width:2; }
.cl-return-nav--shell .cl-back:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.cl-origin { grid-column:1/-1; justify-self:start; margin-top:12px; }
.cl-identity { --cl-identity-offset:52px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 8px; margin-bottom:12px; }
.cl-contact { display:flex; min-width:0; min-height:36px; margin-top:4px; flex-wrap:wrap; align-items:center; gap:4px 12px; color:var(--mut); font-size:13px; overflow-wrap:anywhere; }
.cl-contact-meta { flex-basis:100%; }
.cl-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; }
.cl-detail-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 16px; min-height:44px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.cl-menu-message { flex-shrink:0; margin-inline-start:auto; white-space:nowrap; }
.cl-client-actions { grid-column:2; grid-row:1; align-self:start; gap:8px; margin:2px 0 0; }
.cl-client-actions > button { white-space:nowrap; }
.cl-tabs { display:flex; flex:0 1 auto; max-width:100%; min-width:0; overflow-x:auto; scrollbar-width:thin; align-self:stretch; justify-content:flex-start; gap:24px; }
.cl-reminder-toolbar { justify-content:space-between; }
.cl-tabs button { position:relative; min-height:44px; padding:8px 0; border:0; color:var(--mut); background:transparent; font-size:13px; font-weight:500; white-space:nowrap; }
.cl-tabs button[aria-current="page"] { color:var(--ink); font-weight:500; }
.cl-tabs button[aria-current="page"]:after { content:''; position:absolute; height:2px; inset:auto 0 0; background:var(--brand); border-radius:2px; }
.cl-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; padding:12px 20px; min-height:72px; border-top:1px solid var(--line); }
.cl-row-main { flex:1; min-width:160px; overflow-wrap:anywhere; }
.cl-row-main p { margin-top:4px; }
.cl-row-main .cl-link { padding:0; color:var(--ink); font-size:14px !important; font-weight:600; text-align:left; }
.cl-row-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.cl-section-footer { padding:8px 20px 12px; border-top:1px solid var(--line); }
.cl-summary-note { padding:0 20px 16px; white-space:pre-wrap; overflow-wrap:anywhere; }
.cl-history-group { margin:20px 0 12px !important; font-size:13px !important; color:var(--mut); text-transform:capitalize; }
.cl-history-item { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:12px; padding:16px 20px; align-items:start; }
.cl-history-item+li { border-top:1px solid var(--line); }
.cl-history-item > svg { color:var(--mut); margin-top:3px; }
.cl-history-item strong { font-size:14px; font-weight:500; }
.cl-history-item p { color:var(--mut); margin-top:4px; font-size:13px; overflow-wrap:anywhere; white-space:pre-wrap; }
.cl-history-item time { color:var(--mut); font-size:12px; white-space:nowrap; }
.cl-form { margin:0; padding:0; }
.cl-form fieldset { margin:0; padding:0; border:0; min-width:0; }
.cl-form-dialog > .am-head { margin-bottom:20px; }
.cl-form-dialog > .am-head .am-badge,.cl-form-dialog > .am-cta { display:none; }
.cl-form-dialog .am-title { font-weight:600; }
.cl-field { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; font-size:13px; font-weight:500; }
.cl-field input,.cl-field textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:7px 12px; background:var(--card); color:var(--ink); font:inherit; font-weight:400; font-size:14px; min-height:36px; }
.cl-field input[type="checkbox"] { width:18px; min-height:18px; accent-color:var(--brand); vertical-align:middle; }
.cl-field textarea { min-height:140px; resize:none; }
.cl-field > span small { color:var(--mut); font-weight:400; }
.cl-form .cl-actions { border-top:1px solid var(--line); padding-top:20px; }
.cl-form:is([data-cl-form="note"],[data-cl-form="reminder"]) .cl-form-actions { border-top:0; }
/* Elegir cliente es un selector: comparte la cabecera y el cierre QuVi,
   sin el badge informativo ni una confirmación redundante. */
.cl-picker-dialog > .am-head .am-badge { display:none; }
.cl-picker-dialog .am-title { font-weight:600; }
.cl-picker-dialog .cl-picker { padding:0; }
.cl-picker { padding:16px 0; color:var(--ink); }
.cl-picker .cl-search { width:100%; }
.cl-picker-list { list-style:none; padding:0; margin:16px 0 0; max-height:340px; overflow-y:auto; overscroll-behavior-y:contain; }
.cl-picker-list button { width:100%; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:12px; gap:4px; border:0; border-bottom:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); font-size:14px; }
.cl-picker-list button:hover { background:var(--bg); }
.cl-picker-list small { color:var(--mut); font-size:12px; overflow-wrap:anywhere; }
.cl-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@container clientes (max-width:650px) {
  .cl-table-head { display:none; }
  .cl-person { grid-template-columns:minmax(0,1fr) 24px; gap:12px; }
  .cl-person > span:nth-child(2) { display:none; }
  .cl-person > span:nth-child(3) { grid-column:1; grid-row:2; }
  .cl-person > svg { grid-column:2; grid-row:1 / 3; }
  .cl-tabs { gap:20px; }
  .cl-history-item { grid-template-columns:20px minmax(0,1fr); }
  .cl-history-item time { grid-column:2; }
}
@media (max-width:860px),(pointer:coarse) {
  .cl-wrap .cl-btn,.cl-wrap .cl-link,.cl-picker .cl-btn,.cl-form-content .cl-btn,.cl-form-content .cl-link,.cl-segments button { min-height:44px; }
  .cl-search { min-height:44px; }
  .cl-search input { min-height:42px; font-size:16px; }
  .cl-field input,.cl-field textarea { font-size:16px; min-height:44px; }
  .cl-field input[type="checkbox"] { min-height:18px; }
  .cl-contact { min-height:44px; }
}

/* El nombre completo ya es el título de contenido. En móvil se reserva la barra para navegación y cuenta, como Perfil. */
@media (max-width:600px) {
  #asApp[data-pro-page="clientes"] .tb-section { display:none; }
  #asApp[data-pro-page="clientes"] .topbar { grid-template-columns:minmax(0,1fr) auto; }
}
@media (max-width:520px) {
  #asApp[data-pro-page="clientes"] .tb-brand { display:none; }
  #asApp[data-pro-page="clientes"] .tb-left { gap:4px; margin-inline-start:8px; }
}

/* Edición breve visible; opciones avanzadas permanecen secundarias. */
.cl-identity-tools { grid-column:3; grid-row:1; align-self:start; display:flex; align-items:center; margin-top:2px; }
/* Confirmación de identidad: filas y controles del modal común, una sola zona de scroll. */
.cl-review-context { font-size:14px; line-height:1.5; margin-bottom:20px !important; }
.cl-review-tools { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:12px; }
.cl-review-row { margin:0; display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; }
.cl-review-row input:disabled { opacity:.5; cursor:default; }
.cl-review-row span { min-width:0; overflow-wrap:anywhere; }
.cl-review-row strong { display:block; font-size:14px; font-weight:600; line-height:20px; }
.cl-review-row small { display:block; color:var(--mut); font-size:12px; line-height:18px; }

/* La identidad personal y el índice alfabético usan la misma escala de personas de Mi equipo. */
.cl-person-identity { display:flex; align-items:center; gap:12px; }
.cl-person-text { min-width:0; }
.cl-avatar { display:inline-flex; }
.cl-avatar.cl-avatar--large { width:40px; height:40px; font-size:13px; }
.cl-directory-group + .cl-directory-group { margin-top:24px; }
.cl-group-head { align-items:center; padding:0 20px 8px; background:transparent; }
.cl-group-head .cl-letter-heading { font-size:16px; line-height:24px; font-weight:600; color:var(--ink); }
@container clientes (max-width:650px) {
  .cl-group-head { display:flex; padding-inline:20px; }
  .cl-group-head > span { display:none; }
}
.cl-client-heading { grid-column:1; grid-row:1; display:flex; align-items:flex-start; gap:12px; min-width:0; margin-inline-end:16px; }
.cl-client-heading-text { min-width:0; }
.cl-client-heading h1 { display:flex; align-items:center; min-height:40px; }
.cl-contact .cl-link { min-width:0; max-width:100%; text-align:left; padding-inline:0; }
.cl-contact .cl-link span { min-width:0; overflow-wrap:anywhere; }
.cl-more { width:36px; padding:0; flex-shrink:0; }
.cl-quote-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px 20px; width:100%; text-align:left; border:0; padding:16px 20px; color:var(--ink); background:var(--card); }
.cl-quote-row:hover { background:var(--pro-row-hover); }
.cl-quote-main { min-width:0; overflow-wrap:anywhere; }
.cl-quote-main strong { display:block; font-size:14px; font-weight:600; }
.cl-quote-main .cl-meta { display:block; margin-top:4px; }
.cl-quote-open { display:inline-flex; align-items:center; gap:6px; color:var(--mut); font-size:13px; font-weight:500; }
.cl-quote-row:hover .cl-quote-open { color:var(--brand); }
.cl-conversation { padding:8px 20px 20px; font-size:14px; overflow-wrap:anywhere; }
.cl-conversation strong { font-weight:500; }
.cl-conversation p+p { margin-top:8px; white-space:pre-wrap; }
.cl-form-client { font-size:13px; color:var(--mut); margin-bottom:20px!important; }
.cl-form-row { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; }
.cl-form-row .cl-field { margin-bottom:0; min-width:0; }
.cl-field input,.cl-field textarea { appearance:none; -webkit-appearance:none; }
.cl-field .ac-date { width:100%; }
.cl-field .ac-date input { min-width:0; flex:1; width:100%; }
.cl-field .ac-calendar { width:var(--pro-work-control-height,36px); height:var(--pro-work-control-height,36px); min-height:var(--pro-work-control-height,36px); }
.cl-field .ac-calendar svg { width:16px; height:16px; }
.cl-date-shortcuts { display:flex; flex-wrap:wrap; gap:16px; margin:8px 0 20px; }
.cl-form-actions { justify-content:flex-end; }
.cl-consent { align-items:center; font-size:13px; gap:12px; }
.cl-btn--danger { background:var(--qv-danger,#dc2626); border-color:var(--qv-danger,#dc2626); color:#fff; }
.cl-btn--danger:hover { background:var(--qv-danger,#dc2626); color:#fff; }
@container clientes (max-width:650px) {
  .cl-identity { grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; }
  .cl-client-heading { margin-inline-end:0; }
  .cl-client-actions { grid-column:1/-1; grid-row:2; margin-top:0; }
  .cl-identity-tools { grid-column:2; grid-row:1; }
  .cl-quote-row { grid-template-columns:minmax(0,1fr) auto; }
  .cl-quote-main { grid-column:1/-1; }
}
@media(max-width:520px) {
  .cl-form-row { grid-template-columns:1fr; }
  .cl-form-row .cl-field+.cl-field { margin-top:4px; }
  .cl-more { width:44px; }
}

.cl-form [role="alert"] { color:var(--qv-danger,#dc2626); }

.cl-wrap :is(.cl-person,.cl-quote-row):focus-visible { outline-offset:-3px; }

/* Índice exterior a la tarjeta: salta en el orden A–Z, sin recortar la cartera. */
.cl-directory-layout { display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:start; gap:12px; }
#clDirectoryResults { min-width:0; }
.cl-alphabet { position:sticky; top:16px; display:flex; flex-direction:column; align-items:stretch; gap:0; max-height:calc(100dvh - var(--topbar-h) - 32px); overflow-y:auto; scrollbar-width:thin; padding:3px; }
.cl-alphabet--enter .cl-letter { animation:cl-alphabet-appear 0s linear calc(var(--cl-letter-order,0) * 22ms) both; }
@keyframes cl-alphabet-appear { from { opacity:0; } to { opacity:1; } }
.cl-alphabet--enter:focus-within .cl-letter { animation:none; }
@media(prefers-reduced-motion:reduce) { .cl-alphabet--enter .cl-letter { animation:none; } }
.cl-alphabet .cl-letter { position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; min-height:24px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--mut); font-size:13px; line-height:20px; font-weight:500; }
.cl-alphabet .cl-letter:hover { color:var(--ink); background:var(--pro-segment-surface); }
.cl-alphabet .cl-letter[aria-current] { color:var(--brand); background:var(--pro-title-icon-surface); font-weight:600; }
.cl-alphabet .cl-letter:first-child { margin-bottom:8px; }
.cl-alphabet .cl-letter:focus-visible { outline-offset:-2px; }
@media(min-width:1100px) {
  .cl-directory-layout { width:calc(100% + 44px); }
}
@media(max-width:760px) {
  .cl-identity { --cl-identity-offset:46px; }
  .cl-client-heading { gap:10px; }
  .cl-avatar.cl-avatar--large,.cl-back { width:36px; height:36px; }
  .cl-client-heading h1 { min-height:36px; }
}
@media(max-width:860px),(pointer:coarse) {
  .cl-directory-layout { grid-template-columns:minmax(0,1fr) 36px; }
  .cl-alphabet .cl-letter { min-height:44px; }
  .cl-return-nav { top:calc(var(--pro-page-start-space) - 4px); }
}

/* Acciones del directorio: exportación sólo bajo demanda. */
.cl-head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cl-export-status { display:flex; align-items:center; gap:12px; margin-bottom:16px; color:var(--mut); font-size:12px; }
@media (max-width:480px) {
  .cl-head-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .cl-head-actions .cl-btn { padding-inline:8px; white-space:nowrap; }
}

/* Carteras pequeñas: misma lista, sin reservar el riel alfabético exterior. */
.cl-directory-layout.cl-directory-layout--compact { width:100%; grid-template-columns:minmax(0,1fr); }
.cl-directory-layout--compact .cl-letter-heading { color:var(--mut); font-size:12px; line-height:18px; font-weight:500; }