/* Conversaciones canon (estilo WhatsApp Web): lista | chat | ficha opcional, a 100 % del alto y ancho de la ventana, sin scroll de página
   (solo la lista y los mensajes se desplazan por dentro).
   Todo valor sale de canon-tokens.css y los componentes de canon-components.css (ui-row, ui-avatar, ui-status, ui-tag, ui-chip, ui-search,
   ui-btn, ui-iconbtn, ui-panehead, ui-composer, ui-bubble, ui-author, ui-kv). Aquí solo queda la composición propia de esta pantalla (prefijo cv-).
   Marca por negocio: brand-tokens.js entrega --biz-*; el canon solo permite redefinir --brand, --brand-strong, --brand-soft y --on-brand. */

/* ===== Marca del negocio (día y noche) ===== */
.cv[data-brand="custom"] { --brand: var(--biz-brand); --brand-strong: var(--biz-brand-strong); --brand-soft: var(--biz-brand-soft); --on-brand: var(--biz-on-brand); --focus: var(--brand-strong); }
:root[data-theme="dark"] .cv[data-brand="custom"] { --brand: var(--biz-brand-dk); --brand-strong: var(--biz-brand-strong-dk); --brand-soft: var(--biz-brand-soft-dk); --on-brand: var(--biz-on-brand-dk); --focus: var(--brand); --text-heading: var(--brand); }

/* ===== Marco de la vista: el menú se pliega a un riel de iconos y el espacio de trabajo no tiene márgenes ===== */
:root:has(.app-shell.is-inbox), :root:has(.app-shell.is-inbox) body { overflow: hidden; height: 100%; }
.app-shell.is-inbox { height: 100dvh; min-height: 0; overflow: hidden; }
.app-shell.is-inbox .workspace { display: flex; width: 100%; max-width: none; height: 100dvh; min-height: 0; flex-direction: column; padding: 0; overflow: hidden; }
.app-shell.is-inbox .workspace > .alert { margin: 0; border-radius: 0; padding: var(--sp-2) var(--sp-4); }
.app-shell.is-inbox .workspace > .cv { flex: 1 1 0; min-height: 0; }

/* ===== Estructura ===== */
.cv {
  --cv-list: clamp(320px, 25vw, 400px); --cv-ficha: clamp(300px, 19vw, 360px);
  display: grid; grid-template-columns: var(--cv-list) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden;
  background: var(--canvas); color: var(--text-primary); font-size: var(--fs-body); line-height: var(--lh-body);
}
.cv.ficha-on { grid-template-columns: var(--cv-list) minmax(0, 1fr) var(--cv-ficha); }
/* Con el árbol de filtros a la izquierda (desplegado o como tira) se suma una primera columna. */
.cv { position: relative; --cv-tree: clamp(212px, 17vw, 248px); --cv-strip: calc(var(--ctl-lg) + var(--sp-4)); }
.cv.tree-docked { grid-template-columns: var(--cv-tree) var(--cv-list) minmax(0, 1fr); }
.cv.tree-docked.ficha-on { grid-template-columns: var(--cv-tree) var(--cv-list) minmax(0, 1fr) var(--cv-ficha); }
.cv.tree-strip { grid-template-columns: var(--cv-strip) var(--cv-list) minmax(0, 1fr); }
.cv.tree-strip.ficha-on { grid-template-columns: var(--cv-strip) var(--cv-list) minmax(0, 1fr) var(--cv-ficha); }
.cv *, .cv *::before, .cv *::after { box-sizing: border-box; }
:where(.cv) :is(button, input, textarea, select) { font: inherit; color: inherit; }
:where(.cv) button { cursor: pointer; }
:where(.cv) button:disabled { cursor: default; }
.cv :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cv .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cv svg.icon { flex: none; }
.cv-desk-only { display: initial; }
.cv-mob-only { display: none !important; }
.cv [hidden] { display: none !important; }
.cv .ui-search input:focus-visible, .cv .ui-composer-box textarea:focus-visible { outline: 0; }
/* Campos de texto: el anillo va pegado al borde (offset 0), si no se ve como doble marco. */
.cv :is(.ui-input, .ui-select, .ui-textarea):focus-visible { outline-offset: -1px; }

/* Textos sueltos */
.cv-note { margin: var(--sp-1) 0; color: var(--text-muted); font-size: var(--fs-meta); }
.cv-note.is-error { color: var(--danger-ink); }
.cv-unverified { display: flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-medium); color: var(--warning-ink, var(--text)); }

/* ===== Lista ===== */
.cv-list { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border-right: var(--border-w) solid var(--border-default); background: var(--surface-1); }
.cv-list-top { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-soft); }
.cv-title { position: relative; display: flex; min-height: var(--ctl-md); align-items: center; gap: var(--sp-1); }
.cv-title h1 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-filters-btn { flex: 0 1 auto; max-width: 190px; min-width: 0; }
.cv-filters-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-filters-btn[aria-pressed="false"] { border-style: dashed; }
.cv-search { --ctl-h: var(--ctl-lg); background: var(--surface-2); }
.cv-search kbd, .cv-list-foot kbd { padding: 0 var(--sp-1); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-micro); color: var(--text-muted); }
.cv-sos { display: flex; width: 100%; flex: none; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: var(--border-w) solid var(--border-soft); background: var(--danger-soft); color: var(--danger-ink); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-align: left; }
.cv-sos-go { margin-left: auto; text-decoration: underline; }
/* Resumen de lo elegido (estado + bandeja + etiqueta): una pieza por eje, cada una con su × para quitarla. Son botones de 8 px, no cápsulas. */
.cv-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-soft); background: var(--surface-1); }
.cv-summary-lead { color: var(--text-muted); font-size: var(--fs-meta); }
.cv-summary-chip { display: inline-flex; min-width: 0; max-width: 100%; min-height: var(--ctl-md); align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-value); font-size: var(--fs-meta); font-weight: var(--fw-medium); cursor: pointer; }
.cv-summary-chip:hover { background: var(--surface-hover); }
.cv-summary-chip > span:not(.cv-tag-slot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-summary-x { display: inline-flex; flex: none; color: var(--text-muted); }
.cv-summary-clear { margin-left: auto; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--brand-strong); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-decoration: underline; cursor: pointer; }
.cv-summary-clear:hover { background: var(--surface-hover); }
@media (max-width: 767px) { .cv-summary-chip, .cv-summary-clear { min-height: var(--ctl-lg); } }
/* Lista = tarjetas separadas, como SpeedGas (.lite-attention-list: gap 7, relleno 7/10, tarjeta con borde, radio 8, relleno 12/11). */
.cv-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-2); background: var(--surface-2); }
.cv-rows ul { display: grid; gap: calc(var(--sp-1) * 1.5); margin: 0; padding: 0; list-style: none; }
.cv-row { align-items: center; padding: var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); }
.cv-row:hover { border-color: var(--border-strong); }
.cv-row[aria-current="true"], .cv-row.active { border-color: var(--border-default); }
.cv-row .ui-row-main { gap: var(--sp-1); }
/* Densidad de tarjeta = SpeedGas: nombre 13/700, hora 12/700, vista previa 12, cápsula 10/600, canal 12/600. */
.cv-name { flex: 1; min-width: 0; font-size: var(--fs-body); }
.cv-time { flex: none; color: var(--text-muted); font-weight: var(--fw-regular); }
.cv-row .cv-who-tag, .cv-row .cv-preview { font-size: var(--fs-meta); }
.cv-row .ui-status { font-size: var(--fs-meta); }
.cv-row .ui-row-line:last-child > .t-meta { font-weight: var(--fw-medium); }
.cv-row .ui-count { background: var(--unread-bg); color: var(--unread-on); box-shadow: 0 0 0 var(--border-w) var(--rail-line); }
.cv-row.unread .cv-time { color: var(--unread-time); font-weight: var(--fw-regular); }
.cv-row.unread .cv-preview { color: var(--text-strong); }
.cv-preview { flex: 1; min-width: 0; }
.cv-preview svg { margin: -2px var(--sp-1) 0 0; vertical-align: middle; }
.cv-who-tag { flex: none; font-weight: var(--fw-medium); }
/* Mensaje que no salió: ícono rojo delante de la vista previa (no es cápsula ni botón: solo marca). */
.cv-failed { display: inline-flex; flex: none; align-items: center; color: var(--danger-ink); }
.cv-row[data-failed="true"] .cv-preview { color: var(--danger-ink); }
.cv-more-rows { margin: var(--sp-2) 0; }
.cv-empty { flex: 1; align-content: center; }
.cv-empty h2 { margin: 0; }
.cv-empty p { max-width: 36ch; margin: 0; }
.cv-list-foot { display: flex; flex: none; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-top: var(--border-w) solid var(--border-soft); color: var(--text-muted); font-size: var(--fs-meta); }
.cv-alert { margin: var(--sp-2) var(--sp-3) 0; }
.cv-resend-alert { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.cv-skel-rows { display: grid; gap: 1px; }
.cv-skel-rows span, .cv-skel span { display: block; height: calc(var(--row-h) + var(--sp-2)); background: linear-gradient(90deg, var(--surface-2), var(--surface-hover), var(--surface-2)); background-size: 220% 100%; animation: skeleton 1.4s linear infinite; }
.cv-skel-rows span { margin: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
.cv-list > .label-manager { margin: var(--sp-2) var(--sp-3) 0; }

/* Línea divisoria regulable entre la lista y el chat (como WhatsApp Web). */
.cv-resizer { position: absolute; z-index: 4; top: 0; right: -4px; width: var(--sp-2); height: 100%; cursor: col-resize; touch-action: none; }
.cv-resizer::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: transparent; transition: background var(--dur-fast); }
.cv-resizer:hover::after, .cv-resizer:focus-visible::after, body.cv-resizing .cv-resizer::after { background: var(--brand); }
.cv-resizer:focus-visible { outline: none; }
.cv-tree-resizer { right: 0; width: var(--sp-1); }
.cv-tree-resizer::after { left: 1px; }
body.cv-resizing { cursor: col-resize; user-select: none; }

/* ===== Árbol de filtros: desplegado, tira fina y panel deslizable (inbox-tree-view.js) ===== */
.cv-tree { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border-right: var(--border-w) solid var(--border-default); background: var(--surface-1); }
.cv-tree-head { display: flex; flex: none; align-items: center; gap: var(--sp-2); min-height: var(--head-h); padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-soft); }
.cv-tree-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--text-strong); font-size: var(--fs-title); font-weight: var(--fw-medium); }
.cv-tree-reset { flex: none; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--brand-strong); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-decoration: underline; }
.cv-tree-reset:hover { background: var(--surface-hover); }
.cv-tree-pin.active { border-color: color-mix(in srgb, var(--brand) 46%, transparent); background: var(--surface-selected); color: var(--brand-strong); }
.cv-tree-scroll { display: grid; flex: 1 1 0; min-height: 0; align-content: start; gap: var(--sp-2); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2); }
.cv-tree-scroll > .cv-branch + .cv-branch { padding-top: var(--sp-2); border-top: var(--border-w) solid var(--border-soft); }
.cv-branch { display: grid; gap: 2px; min-width: 0; }
.cv-branch-head { display: flex; width: 100%; min-height: var(--ctl-md); align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md); background: none; color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-align: left; }
.cv-branch-head:hover { background: var(--surface-hover); color: var(--text-strong); }
.cv-chev { display: grid; flex: none; place-items: center; transition: transform var(--dur-fast) var(--ease); }
.cv-branch.is-open > .cv-branch-head > .cv-chev { transform: rotate(90deg); }
.cv-branch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-branch-sel { min-width: 0; margin-left: auto; overflow: hidden; color: var(--brand-strong); text-overflow: ellipsis; white-space: nowrap; }
.cv-branch-head > .cv-count { margin-left: auto; }
.cv-branch-head > .cv-branch-unread { flex: none; white-space: nowrap; font-size: calc((var(--fs-micro) + var(--fs-meta)) / 2); /* 11 px */ margin-left: auto; font-weight: var(--fw-regular); color: var(--text-muted); }
.cv-branch-head > .cv-branch-unread + .cv-count { margin-left: var(--sp-2); }
.cv-branch-head > .cv-branch-sel + .cv-count { margin-left: var(--sp-2); }
.cv-branch-body { display: grid; gap: 2px; min-width: 0; }
.cv-branch.is-nested > .cv-branch-head { color: var(--text-strong); }
.cv-branch.is-nested > .cv-branch-body { padding-left: var(--sp-4); }
.cv-tree-item { position: relative; display: flex; width: 100%; min-width: 0; min-height: var(--ctl-md); align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border: var(--border-w) solid transparent; border-radius: var(--r-md); background: none; color: var(--text-value); font-size: var(--fs-meta); line-height: 1.25; text-align: left; }
.cv-tree-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.cv-branch-head.active { position: relative; background: var(--surface-selected); color: var(--text-strong); }
.cv-branch-head.active::before { content: ""; position: absolute; top: var(--sp-1); bottom: var(--sp-1); left: 0; width: 3px; border-radius: var(--r-full); background: var(--brand); }
/* Selección dentro de un canal: solo fondo suave del color de su marca, sin barra lateral (Instagram rosado, Messenger azul…). */
.cv-branch.is-tinted > .cv-branch-head.active, .cv-branch.is-tinted .cv-tree-item.active { background: color-mix(in srgb, var(--ch-color, var(--brand)) 14%, var(--surface-1)); }
.cv-branch.is-tinted > .cv-branch-head.active::before, .cv-branch.is-tinted .cv-tree-item.active::before { content: none; }
.cv-tree-item.active { background: var(--surface-selected); color: var(--text-strong); font-weight: var(--fw-medium); }
.cv-tree-item.active::before, .cv-strip-item.active::before { content: ""; position: absolute; top: var(--sp-1); bottom: var(--sp-1); left: 0; width: 3px; border-radius: var(--r-full); background: var(--brand); }
.cv-tree-ico { display: grid; flex: none; width: var(--icon-md); height: var(--icon-md); place-items: center; }
.cv-tree-ico > svg { max-width: 100%; max-height: 100%; }
.cv-tree-text { display: grid; flex: 1 1 0; min-width: 0; justify-items: start; gap: 2px; }
.cv-tree-name { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.cv-tree .cv-count { font-size: var(--fs-meta); }
.cv-tree-item.is-out .cv-tree-name { color: var(--text-muted); }
.cv-tree-item.is-danger .cv-tree-ico, .cv-tree-item.is-danger .cv-count, .cv-strip-item.is-danger { color: var(--danger-ink); }
.cv-tree-item .cv-count { flex: none; margin-left: auto; }
.cv-tree-item.active .cv-count { color: var(--text-strong); }
.cv-tree-note { margin: var(--sp-1) var(--sp-2); color: var(--text-muted); font-size: var(--fs-meta); }
.cv-tree-manage { display: flex; min-height: var(--ctl-md); align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md); background: none; color: var(--brand-strong); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-align: left; }
.cv-tree-manage:hover { background: var(--surface-hover); }
.cv-tree .ch-badge { flex: none; }

/* Tira plegada: iconos con su contador debajo. Un clic en el fondo la despliega. */
.cv-strip { display: flex; min-width: 0; min-height: 0; flex-direction: column; align-items: center; gap: var(--sp-2); overflow-x: hidden; overflow-y: auto; padding: var(--sp-2) var(--sp-1); border-right: var(--border-w) solid var(--border-default); background: var(--surface-1); cursor: pointer; scrollbar-width: none; }
.cv-strip::-webkit-scrollbar { display: none; }
.cv-strip-open { flex: none; }
.cv-strip-list { display: grid; flex: none; width: 100%; gap: 2px; padding-top: var(--sp-2); border-top: var(--border-w) solid var(--border-soft); cursor: default; }
.cv-strip-item { position: relative; display: grid; width: 100%; min-height: var(--ctl-lg); place-items: center; align-content: center; gap: 2px; padding: var(--sp-1) 0; border: 0; border-radius: var(--r-md); background: none; color: var(--text-muted); cursor: pointer; }
.cv-strip-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.cv-strip-item.active { background: var(--surface-selected); color: var(--text-strong); }
.cv-strip-item.is-out > :first-child { opacity: .55; }
.cv-strip-count { font-size: calc((var(--fs-micro) + var(--fs-meta)) / 2); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; line-height: 1; }
.cv-strip .cv-tag-slot { width: var(--icon-md); height: var(--icon-md); }

/* Panel deslizable: teléfono, o escritorio angosto con la ficha abierta (cubre la lista, no aprieta el chat). */
.cv-drawer { position: absolute; z-index: 20; inset: 0; visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--dur-base); }
.cv-drawer.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.cv-drawer-scrim { position: absolute; inset: 0; padding: 0; border: 0; background: var(--overlay); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.cv-drawer.is-open .cv-drawer-scrim { opacity: 1; }
.cv-drawer .cv-tree { position: absolute; top: 0; bottom: 0; left: 0; width: min(86%, 300px); border-right: 0; box-shadow: var(--shadow-3); transform: translateX(-100%); transition: transform var(--dur-base) var(--ease); }
.cv-drawer.is-open .cv-tree { transform: none; }

/* ===== Menús emergentes: ⋮ y respuestas rápidas ===== */
.cv-menu { position: absolute; z-index: 10; top: calc(var(--ctl-md) + var(--sp-1)); right: 0; width: 300px; max-width: calc(100vw - 24px); max-height: 70vh; padding: var(--sp-1); overflow: auto; border: var(--border-w) solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--shadow-2); }
.cv-menu h3 { margin: var(--sp-2) var(--sp-2) var(--sp-1); color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-medium); }
.cv-menu button, .cv-menu a { display: flex; width: 100%; min-height: var(--ctl-lg); align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-strong); font-size: var(--fs-body); text-align: left; text-decoration: none; }
.cv-menu button:hover, .cv-menu a:hover { background: var(--surface-hover); }
.cv-menu button[aria-checked="true"] { background: var(--surface-selected); font-weight: var(--fw-medium); }
.cv-menu button.is-out .ch-badge { opacity: .55; }
.cv-menu button.is-danger { color: var(--danger-ink); }
.cv-menu-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-count { margin-left: auto; color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.cv-ico { display: grid; flex: none; width: var(--icon-lg); height: var(--icon-lg); place-items: center; border-radius: var(--r-full); background: var(--ch-web); color: var(--on-media); }
.cv-mark { padding: 1px var(--sp-1); border-radius: var(--r-sm); background: var(--warning-soft); color: var(--warning-ink); font-size: var(--fs-micro); font-weight: var(--fw-medium); white-space: nowrap; }
.cv-dot { flex: none; width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-full); background: var(--neutral-solid); }
.cv-dot.c-accent, .cv-dot.c-success { background: var(--success-solid); } .cv-dot.c-warning { background: var(--warning-solid); } .cv-dot.c-coral { background: var(--coral-solid); } .cv-dot.c-danger { background: var(--danger-solid); } /* coral ≠ ámbar: «Reclamo» y «Presupuesto» ya no comparten color */
.cv-tag-slot { display: grid; flex: none; width: var(--icon-lg); height: var(--icon-lg); place-items: center; }
.cv-tag-slot .cv-dot { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3px var(--border-strong); }
.cv-hint { margin: var(--sp-1) var(--sp-2) var(--sp-2); color: var(--text-muted); font-size: var(--fs-meta); }
.cv-kind { color: var(--text-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.cv-menu .ch-badge { flex: none; }
.cv-more { position: relative; }
.cv-more-menu { right: 0; width: 230px; }

/* ===== Chat ===== */
.cv-chat { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: var(--chat-wall); container-type: inline-size; container-name: chat; }
.cv-head { flex: none; gap: var(--sp-3); }
.cv-avatar-btn { position: relative; flex: none; padding: 0; border: 0; border-radius: var(--r-full); background: none; cursor: pointer; }
.cv-head-ch { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--text-muted); }
.cv-head-ch + .cv-who, .cv-avatar-btn:has(> .cv-head-ch) + .cv-who { padding-left: 0; margin-left: calc(-1 * var(--sp-1)); }
.cv-who { display: grid; flex: 1 1 auto; min-width: 120px; gap: 1px; padding: var(--sp-1) var(--sp-2); }
.cv-name-btn { justify-self: start; max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; font-size: var(--fs-body); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cv-name-btn:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.cv-who > strong { overflow: hidden; font-size: var(--fs-body); text-overflow: ellipsis; white-space: nowrap; }
.cv-who small { display: flex; min-width: 0; align-items: center; gap: var(--sp-2); overflow: hidden; color: var(--text-muted); font-size: var(--fs-meta); white-space: nowrap; user-select: text; }
.cv-chn { color: var(--ch-color); font-weight: var(--fw-medium); }
.cv-sepdot { width: var(--sp-1); height: var(--sp-1); flex: none; border-radius: var(--r-full); background: var(--text-muted); }
.cv-ibx, .cv-num-text { overflow: hidden; text-overflow: ellipsis; }
.cv-num-text { font-variant-numeric: tabular-nums; user-select: text; }
.cv-num-text.is-none { color: var(--text-muted); }
.cv-who small .cv-num-text { flex: 0 0 auto; }
.cv-who small .cv-ibx { flex: 0 1 auto; min-width: 4ch; }
.cv-who small.is-empty { display: none; }
.cv-stx { display: none; align-items: center; gap: var(--sp-1); }
.cv-ctl { display: flex; flex: none; min-width: 0; align-items: center; gap: var(--sp-2); }
.cv-hold { display: flex; min-height: var(--ctl-lg); align-items: center; gap: var(--sp-3); }
.cv-short { display: none; }
.cv-back { display: none; }
.cv-only-mobile { display: none !important; }
.cv-labelbar { display: flex; align-items: flex-start; gap: var(--sp-2); flex: none; min-height: 0; padding: 0 var(--sp-3) var(--sp-2); border-bottom: var(--border-w) solid var(--border-soft); background: var(--surface-1); }
.cv-labelbar .label-picker { flex: 1; min-width: 0; padding: var(--sp-2) 0 0; gap: var(--sp-2); }
.cv-labelbar-close { flex: none; margin-top: var(--sp-1); margin-left: auto; }
.cv-labelbar .label-menu > .label-menu-btn::-webkit-details-marker { display: none; }
.cv-handoff { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: var(--border-w) solid var(--border-soft); background: var(--danger-soft); color: var(--danger-ink); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.cv-handoff > span { display: inline-flex; align-items: center; gap: var(--sp-2); margin-right: auto; }
/* Atendida: la misma franja pasa a verde con «La atiendes tú desde las…». */
.cv-handoff.is-mine { background: var(--success-soft); color: var(--success-ink); }
@container chat (max-width: 920px) {
  .cv-full { display: none; }
  .cv-short { display: inline; }
}
@container chat (max-width: 720px) {
  .cv-num-text, .cv-num-dot { display: none; }
}
/* Chat angosto en pantalla de escritorio (p. ej. a 1366 px con el árbol de filtros y la ficha abiertos): mostrar la ficha y «Más acciones»
   quedan junto al nombre y «quién atiende» pasa a su propia fila (con sus botones, que se acomodan si no caben). Nada queda tapado. */
@media (min-width: 768px) {
  @container chat (max-width: 860px) {
    .cv-head { height: auto; min-height: var(--head-h); flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); padding-block: var(--sp-1); }
    .cv-who { flex: 1 1 0; min-width: 0; }
    .cv-ctl { display: contents; }
    .cv-ficha-btn, .cv-more { order: 2; }
    .cv-hold { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding-bottom: var(--sp-1); }
  }
}

/* Mensajes */
.cv-msgs { display: flex; flex: 1 1 0; min-height: 0; flex-direction: column; gap: 3px; padding: var(--sp-3) var(--sp-3) var(--sp-2); overflow-y: auto; overscroll-behavior: contain; }
.cv-day { align-self: center; margin: var(--sp-3) 0 var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--shadow-1); }
.cv-sys { display: flex; max-width: min(80%, 560px); align-items: center; gap: var(--sp-2); align-self: center; margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--warning-soft); color: var(--warning-ink); font-size: var(--fs-body); text-align: center; }
.cv-sys.ok, .cv-sys.bot { background: var(--brand-soft); color: var(--brand-strong); }
.cv-line { display: flex; align-items: flex-end; gap: var(--sp-2); width: 100%; }
.cv-line.out { flex-direction: row-reverse; }
.cv-line.gap, .ui-bubble.gap { margin-top: var(--sp-2); }
.cv-line.cont { margin-top: -1px; }
.cv-line .ui-bubble { margin: 0; }
.ui-bubble.is-sticker { background: none; box-shadow: none; }
.ui-bubble.is-failed { outline: var(--border-w) solid var(--danger-ink); }
.ui-bubble.pending { opacity: .85; }
.cv-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-text blockquote, .cv-tpl-prev blockquote { margin: var(--sp-1) 0; padding-left: var(--sp-2); border-left: 3px solid var(--border-strong); color: var(--text-value); }
.cv-text ul, .cv-text ol, .cv-tpl-prev ul, .cv-tpl-prev ol { margin: var(--sp-1) 0; padding-left: var(--sp-4); }
.cv-text pre, .cv-tpl-prev pre { margin: var(--sp-1) 0; padding: var(--sp-2); border-radius: var(--r-md); background: var(--surface-2); overflow-x: auto; }
.cv-text code, .cv-tpl-prev code { font-family: ui-monospace, Consolas, monospace; }
.cv-text .cv-link { overflow-wrap: anywhere; }
.cv-tick { display: inline-grid; color: var(--bubble-meta); }
.cv-tick.is-read { color: var(--tick-read); } .cv-tick.is-failed { color: var(--danger-ink); }
.cv-sign { font-weight: var(--fw-medium); }
.cv-via { display: inline-flex; align-items: center; gap: var(--sp-1); color: color-mix(in srgb, currentColor 75%, transparent); }
.cv-via .ch-badge { width: auto !important; height: auto !important; color: inherit; }
.cv-via .ch-badge svg { width: var(--icon-sm); height: var(--icon-sm); filter: none; }
.cv-delivery { display: block; margin-top: 2px; color: var(--danger-ink); font-size: var(--fs-meta); }
.cv-resend { margin-top: var(--sp-1); padding-inline: 0; min-height: 0; gap: var(--sp-1); }
.cv-pending-kind { display: block; margin-bottom: 2px; color: var(--bubble-meta); font-weight: var(--fw-medium); }
.cv-sending { font-weight: var(--fw-medium); }
.cv-older { align-self: center; margin: var(--sp-1) 0 var(--sp-2); color: var(--brand-strong); }
@container chat (max-width: 520px) { .ui-author { width: var(--ctl-md); height: var(--ctl-md); } }

/* Adjuntos dentro de la burbuja (el tamaño de la foto, el vídeo y el mapa es el del propio archivo: lint-ok) */
.cv-photo { position: relative; width: 280px; max-width: 100%; margin: 2px 0 var(--sp-1); overflow: hidden; border-radius: var(--r-md); }
.cv-photo a, .cv-photo .cv-photo-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cv-photo .cv-photo-open[hidden] { display: none; }
.cv-photo img { display: block; width: 100%; min-height: 90px; max-height: 320px; object-fit: cover; } /* lint-ok: tamaño del archivo adjunto */
.cv-photo.is-sticker { width: 150px; }
.cv-photo.is-sticker img { object-fit: contain; }
.cv-placeholder { display: grid; width: 240px; aspect-ratio: 8 / 5; place-items: center; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); color: var(--text-muted); }
.cv-photo .cv-placeholder { width: 100%; }
.cv-photo.is-sticker .cv-placeholder { aspect-ratio: 5 / 4; border-radius: var(--r-lg); }
.cv-video { margin: 2px 0 var(--sp-1); }
.cv-video video { display: block; width: min(100%, 320px); max-height: 320px; border-radius: var(--r-md); background: var(--media-bg); } /* lint-ok: tamaño del archivo adjunto */
.cv-play-large { display: grid; width: 240px; aspect-ratio: 8 / 5; place-content: center; justify-items: center; gap: var(--sp-1); border: 0; border-radius: var(--r-md); background: var(--media-bg); color: var(--media-ink); font-weight: var(--fw-medium); }
.cv-audio { display: flex; min-width: 250px; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; }
.cv-audio audio { width: min(100%, 300px); height: var(--ctl-lg); }
.cv-play { display: grid; width: var(--ctl-lg); height: var(--ctl-lg); flex: none; place-items: center; border: 0; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); }
.cv-wave { display: flex; height: var(--sp-6); flex: 1; align-items: center; gap: 2px; }
.cv-wave i { display: block; width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--bubble-meta) 65%, transparent); } /* lint-ok: barras de la onda de audio */
.cv-audio small { color: var(--bubble-meta); font-size: var(--fs-meta); }
.cv-trans { margin-top: var(--sp-1); padding: var(--sp-2); border-radius: var(--r-sm); background: color-mix(in srgb, currentColor 8%, transparent); font-size: var(--fs-body); }
.cv-trans b { display: block; }
.cv-doc { display: flex; min-width: 230px; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 2px 0 var(--sp-1); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: color-mix(in srgb, currentColor 6%, transparent); }
.cv-doc-icon { display: grid; width: var(--avatar-md); height: var(--avatar-md); flex: none; place-items: center; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-strong); }
.cv-doc-copy { display: grid; min-width: 0; flex: 1; }
.cv-doc-copy strong { overflow: hidden; font-size: var(--fs-body); text-overflow: ellipsis; white-space: nowrap; }
.cv-doc-copy small { color: var(--bubble-meta); font-size: var(--fs-meta); }
.cv-loc { width: 260px; max-width: 100%; margin: 2px 0 var(--sp-1); overflow: hidden; border-radius: var(--r-md); background: var(--surface-1); color: var(--text-primary); }
.cv-map { display: grid; aspect-ratio: 26 / 11; place-items: center; color: var(--map-pin-ink); background: linear-gradient(90deg, transparent 47%, var(--map-road) 47%, var(--map-road) 53%, transparent 53%), linear-gradient(0deg, transparent 40%, var(--map-road) 40%, var(--map-road) 46%, transparent 46%), linear-gradient(30deg, var(--map-a), var(--map-b)); }
.cv-map svg { width: var(--sp-6); height: var(--sp-6); fill: var(--map-pin); stroke: var(--map-pin-ink); }
.cv-loc-copy { display: grid; gap: 1px; padding: var(--sp-2); font-size: var(--fs-body); color: var(--text-strong); }
.cv-loc-copy small { color: var(--text-muted); font-size: var(--fs-meta); }
.cv-skel { display: grid; gap: var(--sp-3); }
.cv-skel span { height: var(--row-h-compact); border-radius: var(--r-md); }
.cv-skel span.in { width: 46%; justify-self: start; } .cv-skel span.out { width: 38%; justify-self: end; }
.cv-empty-chat { align-self: center; margin: auto; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-1); }
.cv-readonly { flex: none; margin: 0; padding: var(--sp-3) var(--sp-4); border-top: var(--border-w) solid var(--border-default); background: var(--surface-2); }
/* Panel derecho sin conversación: columna completa, centrado y con ilustración. */
.cv-chat.cv-nochat { display: grid; place-items: center; }
.cv-chat.cv-nochat .ui-chatwall { background: none; }
.cv-empty-chat-full { width: 100%; max-width: 420px; padding: var(--sp-8) var(--sp-6); }
.cv-empty-art { margin-bottom: var(--sp-2); }
.cv-empty-art .a1, .cv-empty-art .a2 { fill: var(--surface-1); stroke: var(--border-strong); stroke-width: 1.5; }
.cv-empty-art .a2 { fill: var(--brand-soft); stroke: var(--brand); }
.cv-empty-art .a3 { stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; opacity: .55; }

/* Compositor: lo demás es canon (ui-composer). Aquí van el envío con plantilla, avisos y la lista de respuestas rápidas. */
.cv-composer { position: relative; flex: none; }
.cv-via { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cv-via strong { color: var(--text-strong); font-weight: var(--fw-medium); }
.cv-warn { display: inline-flex; align-items: flex-start; gap: var(--sp-1); color: var(--warning-ink); }
.cv-composer .alert { margin: 0 0 var(--sp-2); }
.cv-attached { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2) var(--sp-1); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); }
.cv-attached span { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-attached .ui-iconbtn { margin-left: auto; --ctl-h: var(--ctl-sm); }
.cv-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2) var(--sp-1); padding: var(--sp-2) var(--sp-3); }
.cv-confirm > span { display: inline-flex; flex: 1; min-width: 180px; align-items: center; gap: var(--sp-2); }
/* Los botones van pegados a la derecha, en la misma fila que el texto y, si bajan, también a la derecha (nunca sueltos a la izquierda con un hueco). */
.cv-confirm > .ui-btn:first-of-type { margin-left: auto; }
.cv-pop { position: absolute; z-index: 8; bottom: calc(100% - var(--sp-1)); left: var(--sp-3); width: min(440px, calc(100% - 24px)); max-height: min(calc(var(--row-h) * 7), 60vh); padding: var(--sp-1); overflow-y: auto; border: var(--border-w) solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--shadow-2); }
.cv-pop h3 { margin: var(--sp-2) var(--sp-2) var(--sp-1); color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-medium); }
.cv-pop button { display: grid; width: 100%; grid-template-columns: 110px 1fr; gap: var(--sp-3); padding: var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; font-size: var(--fs-body); text-align: left; }
.cv-pop button:hover, .cv-pop button.hl { background: var(--surface-selected); }
.cv-pop code { overflow: hidden; color: var(--brand-strong); font: inherit; font-weight: var(--fw-medium); text-overflow: ellipsis; white-space: nowrap; }
.cv-pop button span { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.cv-pop-foot { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-2) 2px; border-top: var(--border-w) solid var(--border-soft); color: var(--text-muted); font-size: var(--fs-meta); }
.cv-pop-empty { margin: var(--sp-2); }
/* Caja de plantilla (como SpeedGas, meta-closed-window): cabecera de UNA fila (reloj, título y texto corto a la izquierda; «Enviar plantilla» arriba a la derecha, a la
   altura del título), campos en una fila que se reparte, vista previa compacta y costo/anuncio en una sola línea. Sin hueco vertical sobrante. */
.cv-tpl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.cv-tpl > * { grid-column: 1 / -1; }
.cv-tpl > .cv-tpl-head { grid-column: 1; grid-row: 1; }
.cv-tpl > .cv-tpl-actions { grid-column: 2; grid-row: 1; }
.cv-tpl.is-blocked > .cv-tpl-actions { grid-column: 1 / -1; grid-row: auto; }
.cv-tpl-head { display: flex; align-items: flex-start; gap: var(--sp-1); min-width: 0; color: var(--warning-ink); font-size: var(--fs-meta); line-height: var(--lh-snug); }
.cv-tpl-head > svg { margin-top: 1px; flex: none; }
.cv-tpl-head p { margin: 0; min-width: 0; }
.cv-tpl-head strong { font-weight: var(--fw-bold); }
.cv-tpl-head .cv-tpl-more { color: var(--text-muted); }
.cv-tpl-dot { display: none; }
.cv-tpl-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-1) var(--sp-2); }
/* Botones en la fila de los campos, al final (en pantallas angostas bajan solos). */
.cv-tpl-fields > .cv-tpl-actions { flex: none; margin-left: auto; }
/* La ✕ de cerrar va pequeña y roja en la esquina de la sección (el costo se indica con el ícono de «Enviar»). */
.cv-tpl { position: relative; }
/* En la esquina de la sección gris (el compositor tiene 4 px arriba y 8 px a la derecha de relleno; la ✕ queda a 4 px de ambos bordes). */
.cv-tpl-close { position: absolute; top: -1px; right: -16px; display: inline-flex; padding: 2px; border: 0; border-radius: var(--r-sm); background: none; color: var(--danger-solid); cursor: pointer; }
.cv-tpl-close svg { stroke-width: 2.6; }
.cv-tpl-coins { display: inline-flex; margin-left: 2px; padding-left: var(--sp-2); border-left: var(--border-w) solid color-mix(in srgb, var(--on-avatar) 40%, transparent); color: var(--coin); }
.cv-tpl-close:hover { background: var(--danger-soft); }
.cv-tpl-fields label { display: grid; min-width: 150px; flex: 1; gap: 0; margin: 0; color: var(--text-muted); font-size: var(--fs-meta); line-height: var(--lh-snug); }
.cv-tpl-fields :is(select, input) { height: var(--ctl-md); min-width: 0; padding: 0 var(--pad-x-sm); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-primary); font-size: var(--fs-meta); font-weight: var(--fw-regular); }
/* Vista previa: burbuja como la del chat (mensaje del equipo), a todo lo ancho bajo los campos, con su título a la izquierda; los datos sin llenar resaltados. */
.cv-tpl-prevwrap { display: grid; gap: 2px; }
.cv-tpl .cv-tpl-prev { max-height: calc(var(--ctl-md) * 3); overflow-y: auto; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-md); background: var(--bubble-staff); color: var(--bubble-ink); font-size: var(--fs-meta); line-height: var(--lh-snug); white-space: pre-wrap; }
.cv-tpl-missing { padding: 0 3px; border-radius: var(--r-sm); background: var(--warning-soft); color: var(--warning-ink); font-weight: var(--fw-soft); }
.cv-tpl-prev { padding: var(--sp-2) var(--sp-3); border: var(--border-w) dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-1); font-size: var(--fs-body); white-space: pre-wrap; }
/* Botones de la caja: del tamaño de los de la cabecera del chat (Reactivar, Atender ahora): alto md, esquinas del canon. */
.cv-tpl-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.cv-tpl-actions .ui-btn { --ctl-h: var(--ctl-md); padding-inline: var(--pad-x-md); gap: var(--sp-1); font-size: var(--fs-body); }
/* Sin plantillas aprobadas: la razón y, a la derecha, el enlace a la pestaña exacta de la bandeja (botón del canon, no cápsula). */
.cv-tpl-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.cv-tpl-empty p { flex: 1 1 280px; margin: 0; color: var(--text-primary); font-size: var(--fs-body); }
.cv-tpl-empty .ui-btn { flex: none; text-decoration: none; }
/* Costo (o aviso del anuncio) y «al enviar, el asistente se pausa»: UNA línea breve bajo los campos. */
.cv-tpl-foot { margin: 0; color: var(--text-muted); font-size: var(--fs-meta); line-height: var(--lh-snug); }
.cv-tpl-foot > span { display: inline; }
.cv-tpl-foot > span > svg { display: inline-block; margin-right: var(--sp-1); vertical-align: text-bottom; }
.cv-tpl-foot strong { font-weight: var(--fw-medium); }
.cv-tpl-foot .is-free, .cv-tpl-foot .is-free strong { color: var(--success-ink); }
.cv-tpl-foot .is-paid strong { color: var(--warning-ink); }
.cv-warn .cv-link, .cv-pop-empty .cv-link, .alert .cv-link { color: var(--info-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Celular: una columna (plantilla y datos en dos columnas), el botón al final, junto al pulgar; el bloque no se come la pantalla. */
@media (max-width: 767px) {
  .cv-tpl-more { display: none; } .cv-tpl-dot { display: inline; }
  .cv-tpl:not(.is-blocked) { grid-template-columns: minmax(0, 1fr); padding: var(--sp-2); }
  .cv-tpl:not(.is-blocked) > .cv-tpl-actions { grid-column: 1; grid-row: auto; }
  .cv-tpl-actions .ui-btn { flex: 1; justify-content: center; }
  .cv-tpl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-tpl-fields > label { min-width: 0; }
  .cv-tpl-fields > label:first-child { grid-column: 1 / -1; }
}
/* ===== Ficha (pieza opcional) ===== */
.cv-ficha { min-width: 0; min-height: 0; overflow-y: auto; border-left: var(--border-w) solid var(--border-default); background: var(--surface-1); }
.cv-fh { position: sticky; z-index: 1; top: 0; padding-inline: var(--sp-4) var(--sp-2); }
.cv-fh h2 { flex: 1; margin: 0; }
.cv-sec { padding: var(--sp-4); border-bottom: var(--border-w) solid var(--border-soft); }
.cv-sec h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.cv-contact { display: flex; align-items: center; gap: var(--sp-3); }
.cv-contact strong { display: block; }
.cv-sub { display: flex; align-items: center; gap: var(--sp-2); }
.cv-phone { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.cv-num { display: inline-flex; flex: 1 0 100%; justify-self: start; align-items: center; gap: var(--sp-2); padding: 2px; border: 0; background: none; font-size: var(--fs-title); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cv-copied { flex-basis: 100%; min-height: 0; color: var(--brand-strong); font-size: var(--fs-meta); }
.cv-copied:empty { display: none; }
.cv-also { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; color: var(--text-muted); }
.cv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.cv-acts .ui-btn-primary { grid-column: 1 / -1; }
.cv-next { gap: 2px; margin-bottom: var(--sp-3); padding: var(--sp-3); background: var(--surface-2); }
.cv-prog { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.cv-bar { height: var(--dot); overflow: hidden; border: var(--border-w) solid var(--border-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.cv-bar i { display: block; height: 100%; background: var(--brand); }
.cv-sec .label-picker { padding: 0; gap: var(--sp-2); }
.cv-sec .label-menu > .label-menu-btn::before, .cv-labelbar .label-menu > .label-menu-btn::before { content: "+"; margin-right: var(--sp-1); }
.cv-toast { position: fixed; z-index: 30; bottom: var(--sp-6); left: 50%; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--text-strong); color: var(--surface-1); font-size: var(--fs-body); transform: translateX(-50%); box-shadow: var(--shadow-2); }
.cv-toast button { border: 0; background: none; color: var(--surface-1); font-weight: var(--fw-bold); text-decoration: underline; }
.cv-sheet-wrap { position: fixed; z-index: 25; inset: 0; background: var(--surface-1); }
.cv-ficha.is-sheet { height: 100%; border-left: 0; }
.cv-nophone { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); justify-items: start; }
.cv-nophone .cv-also { margin: 0; }
.cv-link-phone { width: 100%; background: var(--surface-2); }
.cv-noteform { display: grid; gap: var(--sp-1); }
.cv-link-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.cv-idents { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-body); }
.cv-idents li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); }
.cv-idents b { min-width: 76px; }
.cv-idents small { flex-basis: 100%; padding-left: 84px; color: var(--text-muted); }
.cv-idents em { padding: 0 var(--sp-1); border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand-strong); font-size: var(--fs-micro); font-style: normal; font-weight: var(--fw-medium); }
.cv-origin-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: var(--sp-3) 0 0; color: var(--text-muted); }
.cv-origin-line small { flex-basis: 100%; }
.cv-count-pill { padding: 0 var(--sp-1); border-radius: var(--r-full); background: var(--surface-3); font-size: var(--fs-micro); font-weight: var(--fw-medium); }
.cv-notelist { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.cv-notelist li { padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--brand); border-radius: var(--r-sm); background: var(--surface-2); }
.cv-notelist p { margin: 0 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-body); }
.cv-notelist small { color: var(--text-muted); font-size: var(--fs-meta); }
.cv-noteform .ui-btn { justify-self: end; }
/* Bloques vivos de la ficha (los declara la línea: citas, nombre en línea, archivos guardados). Cápsulas = estado; los botones son rectángulos de 8 px. */
.cvb h4 { margin: var(--sp-3) 0 var(--sp-1); }
.cvb-pills { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-1); }
.cvb-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.cvb-actions .ui-btn { flex: 1 1 auto; }
.cvb-actions .ui-btn-text { flex: 0 1 auto; }
.cvb-foot { margin-top: var(--sp-3); }
.cvb-list, .cvb-files { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.cvb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--sp-2); }
.cvb-row .cvb-what { grid-column: 1; overflow-wrap: anywhere; font-size: var(--fs-meta); }
.cvb-row .ui-status { grid-column: 2; grid-row: 1 / span 2; }
.cvb-when { font-size: var(--fs-body); }
.cvb-notice { margin: var(--sp-2) 0 0; color: var(--success-ink); font-size: var(--fs-meta); }
.cvb-notice.is-error { color: var(--danger-ink); }
.cvb-name { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cvb-nameform { display: grid; gap: var(--sp-2); }
.cvb-nameform .cvb-actions { justify-content: flex-end; margin-top: 0; }
.cvb-file { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-2); }
.cvb-filename { overflow-wrap: anywhere; }
.cvb-file img { max-width: 100%; border-radius: var(--r-sm); }
/* Bloque «Venta» de la ficha (rubros con embudo de ventas): una tarjeta por oportunidad, la etapa se elige en un campo, el estado «sin avance» va en cápsula y los botones son de 8 px. */
.cvb-ventas { display: grid; gap: var(--sp-3); margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.cvb-venta { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--border-w) solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-2); }
.cvb-venta-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.cvb-venta-head strong { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.cvb-venta-proposal { display: grid; gap: var(--sp-1); justify-items: start; }
.cvb-venta-proposal .t-micro { margin: 0; }
.cvb-venta-confirm { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); }
.cvb-venta-confirm .cvb-actions { justify-content: flex-end; margin-top: 0; }
.cvb-venta > .ui-btn { justify-self: start; border-radius: var(--r-md); }
.cvb-perfil { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: var(--border-w) solid var(--border-soft); }
.cvb-perfil > summary { cursor: pointer; padding: var(--sp-1) 0; }
.cvb-perfil > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.cvb-perfil .ui-field { margin-top: var(--sp-2); }
.cvb-perfil > .ui-btn { margin-top: var(--sp-3); border-radius: var(--r-md); }

/* ===== Pantallas medianas y móvil ===== */
@media (max-width: 1100px) { .cv { --cv-list: clamp(300px, 34vw, 360px); } }
@media (max-width: 767px) {
  .app-shell.is-inbox { display: block; padding-bottom: 0; }
  .is-inbox .sidebar, .is-inbox .mobile-bar { display: none; }
  .cv, .cv.ficha-on { grid-template-columns: 1fr; }
  .cv-list, .cv-chat { grid-column: 1; grid-row: 1; }
  .cv:not(.has-open) .cv-chat, .cv.has-open .cv-list, .cv-ficha:not(.is-sheet) { display: none; }
  .cv-desk-only { display: none !important; }
  .cv-mob-only { display: grid !important; }
  .cv-row { padding-inline: var(--sp-4); }
  .cv-list-top { padding: var(--sp-2) var(--sp-4); }
  /* Cabecera en teléfono: fila 1 = volver, avatar y nombre; fila 2 = quién atiende (su propia línea), la acción y ⋮ */
  .cv-head { height: auto; min-height: var(--head-h); flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); padding: var(--sp-1) var(--sp-2); }
  .cv-who { min-width: 0; flex: 1 1 0; min-height: var(--ctl-lg); align-content: center; padding: 2px var(--sp-1); }
  .cv-who > strong, .cv-name-btn { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .cv-who small .cv-chn, .cv-who small .cv-sepdot, .cv-who small .cv-num-text, .cv-who small .cv-ibx { display: none; }
  .cv-who small { flex-wrap: wrap; row-gap: 0; line-height: var(--lh-snug); white-space: normal; }
  .cv-stx { display: none; }
  .cv-full { display: none; }
  .cv-ctl { order: 3; flex: 1 1 100%; justify-content: space-between; padding: 0 0 var(--sp-1) var(--sp-1); }
  .cv-hold { flex: 1; justify-content: space-between; }
  .cv-short { display: inline; }
  .cv-ctl { min-width: 0; }
  .cv-hold { min-width: 0; max-width: 100%; flex-wrap: wrap; row-gap: var(--sp-1); }
  .cv-hold > .ui-status { flex: 0 1 auto; min-width: 0; white-space: normal; }
  .cv-hold > .ui-btn { flex: 0 1 auto; min-width: 0; }
  .cv-only-mobile { display: flex !important; }
  .cv-back { display: grid; }
  .cv-msgs { padding: var(--sp-3) var(--sp-3); }
  .ui-bubble { max-width: 84%; }
  .cv-audio { min-width: 200px; }
  .cv-composer { padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); }
  .ui-composer-note { flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
  .label-picker .label-menu-panel { right: 0; left: 0; min-width: 0; }
  .cv-pop { left: var(--sp-2); width: calc(100% - 16px); }
  .cv-pop button { align-items: center; }
  .cv-list-top { grid-template-columns: minmax(0, 1fr); }
  .cv-list-top > *, .cv-title > * { min-width: 0; }
  .cv-title h1 { flex: none; }
  .cv-title > :not(.cv-filters-btn) { flex-shrink: 0; }
  .cv-filters-btn > span { min-width: 0; }
  .cv-filters-btn { flex: 0 1 auto; max-width: 200px; }
  .cv-resizer { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cv *, .cv *::before, .cv *::after { animation: none !important; transition: none !important; } }

/* ===== Pantalla «Respuestas rápidas» (Asistente): alta, lista y edición ===== */
/* Respuestas rápidas: contador y «Nueva respuesta» arriba; formulario solo al crear/editar; lista en filas simples. */
.quick-reply-count { color: var(--text-muted); font-size: var(--fs-meta); }
.quick-reply-new { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.quick-reply-fields { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.quick-reply-fields label { display: grid; gap: var(--sp-1); min-width: 0; }
.quick-reply-fields label > span:first-child { color: var(--text-muted); font-size: var(--fs-meta); }
.quick-reply-slash { position: relative; display: block; }
.quick-reply-slash > i { position: absolute; left: var(--pad-x-md); top: 50%; transform: translateY(-50%); color: var(--text-muted); font-style: normal; pointer-events: none; }
.quick-reply-slash > input { padding-left: calc(var(--pad-x-md) + var(--sp-3)); }
.quick-reply-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.quick-reply-body textarea { min-height: calc(var(--ctl-md) * 4); }
.quick-reply-bodytools { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-regular); }
/* Selector de emojis (también reutilizable en otras pantallas). */
.emoji-picker { position: relative; display: inline-flex; }
.emoji-pop { position: absolute; top: calc(100% + var(--sp-1)); left: 0; z-index: 10; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: max-content; padding: var(--sp-2); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--shadow-2); }
.emoji-pop.is-up { top: auto; bottom: calc(100% + var(--sp-1)); }
.emoji-item { width: calc(var(--ctl-md) - var(--sp-1)); aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-sm); background: none; font-size: var(--fs-title); line-height: 1; cursor: pointer; }
.emoji-item:hover, .emoji-item:focus-visible { background: var(--surface-2); }
.quick-reply-empty { display: flex; align-items: center; gap: var(--sp-3); }
.quick-reply-empty > div { flex: 1; min-width: 0; }
.quick-reply-empty p { margin: 0; color: var(--text-muted); }
.quick-reply-empty p strong { color: var(--text-primary); }
.quick-reply-empty-icon { display: inline-flex; color: var(--brand-strong); }
.quick-reply-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.quick-reply-row { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-strong); }
.quick-reply-row:last-child { border-bottom: 0; }
.quick-reply-row.is-off { opacity: .65; }
.quick-reply-off { color: var(--text-muted); }
.quick-reply-row code { color: var(--brand-strong); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.quick-reply-row p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.quick-reply-row.is-editing { display: block; padding: var(--sp-3); }
.quick-reply-row.is-editing form { display: grid; gap: var(--sp-3); }
.quick-reply-tools { display: flex; align-items: center; gap: var(--sp-1); }
@media (max-width: 720px) { .quick-reply-fields, .quick-reply-row { grid-template-columns: 1fr; } .quick-reply-empty { flex-wrap: wrap; } }

/* ===== Pantallas nuevas de Conversaciones: Nueva conversación, No contactar, avisos de vencido, audio descargable y «Guardar en la ficha» ===== */
.cv-new { flex: none; }
.cv-start { width: min(100%, 520px); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.cv-start .ui-dialog-body { overflow-y: auto; padding-block: var(--sp-1); }
.cv-start-who, .cv-start-vars { display: grid; gap: var(--sp-3); }
.cv-start-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; max-height: calc(var(--row-h) * 4); overflow-y: auto; }
.cv-start-list .ui-row { width: 100%; }
.cv-start-picked { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cv-start-picked > span { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cv-start-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cv-expired { display: flex; align-items: flex-start; gap: var(--sp-1); }
.cv-audio.is-download { align-items: center; }
.cv-keep { display: grid; justify-items: start; gap: var(--sp-1); margin-top: var(--sp-1); }
.cv-keep.is-asking { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: color-mix(in srgb, currentColor 6%, transparent); }
.cv-keep p { margin: 0; font-size: var(--fs-meta); }
.cv-keep-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.cv-kept { margin-top: var(--sp-1); }

/* Correo: el asunto del mensaje que escribió la persona, arriba de su texto. */
.cv-subject { margin: 0 0 var(--sp-1); font-weight: var(--fw-bold); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.cv-subject .t-label { font-weight: var(--fw-medium); color: var(--text-muted); margin-right: var(--sp-1); }
/* ---- Visor de foto ampliada (A28): pantalla completa, zoom por barra, Esc, descarga ---- */
.cv-viewer { position: fixed; z-index: 50; inset: 0; display: flex; flex-direction: column; background: var(--overlay); }
.cv-viewer-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.cv-viewer-bar .ui-iconbtn { background: var(--surface-1); color: var(--text-strong); }
.cv-viewer-bar .ui-iconbtn:disabled { opacity: .5; }
.cv-viewer-zoom { margin-right: auto; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-strong); }
.cv-viewer-sign { font-size: var(--fs-screen); line-height: 1; }
.cv-viewer-stage { position: relative; flex: 1; min-height: 0; overflow: auto; }
.cv-viewer-box { position: absolute; top: 0; left: 0; box-sizing: border-box; padding: 0 var(--sp-4) var(--sp-4); }
.cv-viewer-box img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; }

/* ---- Vínculos del contacto en el chat (A30 canales, A31 otra bandeja, A32 celular repetido) ---- */
.cv-links { display: grid; flex: none; gap: var(--sp-1); padding: var(--sp-2) var(--sp-4); border-bottom: var(--border-w) solid var(--border-soft); background: var(--surface-2); }
.cv-links-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.cv-links-label { color: var(--text-muted); }
.cv-links-btn .ch-badge { flex: none; }
.cv-links-inbox { flex-wrap: nowrap; justify-content: space-between; }
.cv-links-text { display: inline-flex; flex: 1 1 auto; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text-primary); font-size: var(--fs-meta); }
.cv-phone-match { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--warning-soft); color: var(--warning-ink); font-size: var(--fs-meta); }

/* Acciones del chat de la línea (p. ej. «Agendar»): botón de la cabecera y aviso del resultado. Botones con esquinas de 8 px; la cápsula es solo estado. */
.cv-act { flex: none; white-space: nowrap; }
/* Botones de la cabecera compactos como SpeedGas: 30 px de alto, 10 px laterales, texto de cuerpo (13 px), ícono de 16 px a la izquierda. La acción principal va en negrita; la de la cita es secundaria (gris) y más discreta. */
.cv-head .cv-hold > .ui-btn, .cv-head .cv-act { --ctl-h: var(--ctl-md); padding-inline: var(--pad-x-md); gap: calc(var(--sp-1) * 1.5); font-size: var(--fs-body); }
.cv-head .cv-hold > .ui-btn-primary { font-weight: var(--fw-bold); }
.cv-head .cv-act:not(.ui-btn-primary) { font-weight: var(--fw-medium); }
.cv-head .ui-btn > .ui-icon { flex: none; }
/* Con poco ancho (p. ej. 1366 px con árbol y lista abiertos) queda solo el ícono; el nombre sale en el título y para lectores de pantalla. */
@container chat (max-width: 860px) {
  .cv-act .cv-lbl { display: none; }
  .cv-head .cv-act { padding: 0; width: var(--ctl-md); }
}
@media (min-width: 768px) {
  @container chat (max-width: 640px) { .cv-act { order: 2; } }
}
.cvh-notice { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-bottom: var(--border-w) solid var(--border-soft); background: var(--surface-1); color: var(--success-ink); font-size: var(--fs-meta); }
.cvh-notice.is-error { color: var(--danger-ink); }
/* La atiende otra persona: las acciones de la línea quedan a la vista, deshabilitadas, con quién la atiende junto al nombre. */
.cv-act-hint { display: block; color: var(--text-muted); font-size: var(--fs-meta); }
.cvb-locked { display: flex; align-items: center; gap: var(--sp-2); }
/* «Nueva cita»: lo que va a pasar («Limpieza · jue 8 oct, 10:00 · se avisará por WhatsApp») va en una línea sobre los botones; el botón queda corto y «Cancelar» siempre a la vista. */
.drawer-actions:has(.cal-summary) { flex-wrap: wrap; }
.drawer-actions .cal-summary { flex: 1 0 100%; margin: 0; color: var(--text-muted); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.drawer-actions .cal-submit { white-space: nowrap; flex: none; }
.cal-existing { color: var(--warning-ink, var(--text-muted)); }

/* ===== Auditoría de experiencia: etiquetas en la fila, textos mínimos de 12 px y áreas táctiles de 44 px ===== */
/* Etiquetas de una conversación en la fila: hasta 3 puntos de color y «+N». */
.cv-ldots { display: inline-flex; flex: none; align-items: center; gap: var(--sp-1); margin-left: auto; }
/* Los puntos de la fila llevan la inicial de la etiqueta: color de relleno suave, letra y aro del color (pares AA del canon). */
.cv-ldots .cv-dot { display: grid; place-items: center; width: calc(var(--fs-micro) * 1.8); height: calc(var(--fs-micro) * 1.8); background: var(--neutral-soft); color: var(--neutral-ink); box-shadow: inset 0 0 0 var(--border-w) var(--neutral-solid); font-size: var(--fs-micro); font-style: normal; font-weight: var(--fw-bold); line-height: 1; }
.cv-ldots .cv-dot.c-accent, .cv-ldots .cv-dot.c-success { background: var(--success-soft); color: var(--success-ink); box-shadow: inset 0 0 0 var(--border-w) var(--success-solid); }
.cv-ldots .cv-dot.c-warning { background: var(--warning-soft); color: var(--warning-ink); box-shadow: inset 0 0 0 var(--border-w) var(--warning-solid); }
.cv-ldots .cv-dot.c-coral { background: var(--coral-soft); color: var(--coral-ink); box-shadow: inset 0 0 0 var(--border-w) var(--coral-solid); }
.cv-ldots .cv-dot.c-danger { background: var(--danger-soft); color: var(--danger-ink); box-shadow: inset 0 0 0 var(--border-w) var(--danger-solid); }
.cv-ldots-more { color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-medium); line-height: 1; }
/* Cápsulas y contadores de la ventana: 12 px como mínimo. */
.cv-row .ui-count, .cv-mark, .cv-kind, .cv-idents em, .cv-count-pill { font-size: var(--fs-meta); }
@media (max-width: 767px) {
  /* Botones e iconos de la ventana: dibujo compacto (--ctl-*); el dedo recibe 44 px del área invisible de canon-components. */
  .cv-head .cv-hold > .ui-btn { padding-inline: var(--sp-3); }
  .cv-name-btn { display: inline-flex; align-items: center; min-height: var(--ctl-lg); }
  .cv-labelbar .label-menu > .label-menu-btn, .cv-sec .label-menu > .label-menu-btn { min-height: var(--ctl-lg); }
  .label-option { min-height: calc(var(--ctl-lg) + var(--sp-1)); }
  .cv-pop button { min-height: calc(var(--ctl-lg) + var(--sp-1)); }
  /* La × de quitar etiqueta: área de 44 px sin agrandar la etiqueta (margen negativo). */
  .ui-tag-remove { width: calc(var(--ctl-lg) + var(--sp-1)); height: calc(var(--ctl-lg) + var(--sp-1)); margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) calc(var(--sp-2) * -1); }
}

/* ---------- Menú ⋮ del chat: buscar en la conversación, fijar arriba y marcar como no leída ---------- */
.cv-findbar { display: flex; flex: none; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-soft); background: var(--surface-1); color: var(--text-muted); }
.cv-find-input { flex: 1 1 140px; min-width: 0; }
.cv-find-status { flex: none; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-find-status.is-none { color: var(--danger-ink); }
.cv-find-up .ui-icon { transform: rotate(180deg); }
.cv-line.is-found .ui-bubble { box-shadow: 0 0 0 2px var(--warning-solid); }
.cv-line.is-found-current .ui-bubble { box-shadow: 0 0 0 3px var(--focus); }
.cv-find-hit { padding: 0 var(--sp-1); border-radius: var(--r-sm); background: var(--warning-soft); color: var(--warning-ink); font-weight: var(--fw-medium); }
.cv-line.is-found-current .cv-find-hit { background: var(--warning-solid); color: var(--on-brand, #fff); }
.cv-pinmark { display: inline-flex; flex: none; align-items: center; color: var(--text-muted); }
.ui-count.is-dot { min-width: 0; width: calc(var(--fs-micro) + var(--sp-1)); height: calc(var(--fs-micro) + var(--sp-1)); padding: 0; }
.cv-load-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
@media (max-width: 767px) {
  .cv-find-btn { display: none; }
  .cv-findbar { flex-wrap: wrap; }
  .cv-find-status { max-width: none; flex: 1 1 100%; order: 3; }
}

/* Visor de foto: fondo oscuro del canon (--hero-bg, oscuro de día y de noche) y barra con los íconos claros sobre oscuro. */
.cv-viewer { background: color-mix(in srgb, var(--hero-bg) 90%, transparent); }
.cv-viewer-bar { flex: none; }
.cv-viewer-bar .ui-iconbtn { background: transparent; color: var(--hero-ink); border-color: color-mix(in srgb, var(--hero-ink) 28%, transparent); }
.cv-viewer-bar .ui-iconbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--hero-ink) 16%, transparent); color: var(--hero-ink); }
.cv-viewer-bar .ui-iconbtn:disabled { color: color-mix(in srgb, var(--hero-ink) 40%, transparent); opacity: 1; }
.cv-viewer-zoom { flex: none; background: color-mix(in srgb, var(--hero-ink) 16%, transparent); color: var(--hero-ink); }
.cv-viewer-bar .ui-iconbtn .ui-icon, .cv-viewer-bar .ui-iconbtn svg { color: inherit; }
/* El visor se pinta dentro de la foto del mensaje: sin esto «.cv-photo a» estira el botón de descarga a todo el ancho y tapa la barra. */
.cv-viewer-bar a.ui-iconbtn { display: inline-grid; width: var(--ctl-h); padding: 0; background: transparent; cursor: pointer; }

/* Menú de cada fila (⌄ al pasar el mouse, clic derecho, pulsación larga): la flechita es un icono pequeño con esquinas de 8 px, no una cápsula. */
.cv-rowwrap { position: relative; }
.cv-rowwrap .cv-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cv-rowmenu-btn { position: absolute; bottom: var(--sp-2); right: var(--sp-2); z-index: 1; display: inline-flex; width: var(--icon-lg); height: var(--icon-lg); align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r-md); background: var(--surface-1); color: var(--text-muted); cursor: pointer; opacity: 0; pointer-events: none; }
.cv-rowwrap:hover .cv-rowmenu-btn, .cv-rowwrap:focus-within .cv-rowmenu-btn, .cv-rowmenu-btn.is-open, .cv-rowmenu-btn:focus-visible { opacity: 1; pointer-events: auto; }
/* La flecha va abajo a la derecha; las etiquetas (con nombre) quedan a la izquierda junto al estado, así no se desplazan. */
.cv-rowmenu-btn:hover { background: var(--surface-hover); color: var(--text-strong); }
.cv-rowmenu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Sin mouse (táctil) no hay «pasar por encima»: la flechita solo aparece con foco de teclado; el menú se abre con pulsación larga. */
@media (hover: none) { .cv-rowwrap:hover .cv-rowmenu-btn:not(:focus-visible):not(.is-open) { opacity: 0; pointer-events: none; } }
.cv-rowmenu { z-index: 30; }

/* Etiquetas con nombre en la fila de la lista. */
.cv-ltags { display: inline-flex; flex: 0 1 auto; min-width: 0; align-items: center; gap: var(--sp-1); overflow: hidden; }
.cv-ltag-i { display: inline-flex; min-width: 0; }
.cv-ltags .ui-tag { flex: 0 1 auto; min-width: 0; max-width: 14ch; overflow: hidden; font-size: var(--fs-micro); text-overflow: ellipsis; white-space: nowrap; }
/* Cuántas etiquetas caben según el ancho de la lista (que el usuario ajusta): 1, 2, 3 o todas; el «+N» solo del caso. */
.cv-list { container: cvlist / inline-size; }
.cv-ltag-i.i2, .cv-ltag-i.i3, .cv-ltag-i.i4, .cv-ldots-more.m2, .cv-ldots-more.m3 { display: none; }
@container cvlist (min-width: 400px) { .cv-ltag-i.i2 { display: inline-flex; } .cv-ldots-more.m1 { display: none; } .cv-ldots-more.m2 { display: inline; } }
@container cvlist (min-width: 500px) { .cv-ltag-i.i3 { display: inline-flex; } .cv-ldots-more.m2 { display: none; } .cv-ldots-more.m3 { display: inline; } }
@container cvlist (min-width: 620px) { .cv-ltag-i.i4 { display: inline-flex; } .cv-ldots-more.m3 { display: none; } }
/* Ordenar canales arrastrando: se marca dónde caerá. */
.cv-branch.is-nested > .cv-branch-head > .cv-chev[title] { cursor: grab; }
.cv-branch.is-nested > .cv-branch-head.is-drop { box-shadow: inset 0 2px 0 var(--brand); }
.cv-summary-ico { display: inline-flex; flex: none; color: var(--text-muted); }
/* Envoltura del chat para saber si la persona lo tocó (vista previa): no altera la grilla. */
.cv-chat-slot { display: contents; }
/* Logo del canal dentro del globo: tenue, que acompañe a la hora sin resaltar (pedido del dueño 2026-10-07). */
.ui-bubble-meta .cv-via { opacity: .5; }
.cv-ad-note { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--success-ink); white-space: normal; }
/* Motivo del pedido de hablar contigo, junto a la bandeja en la cabecera. */
.cv-reason { color: var(--danger-ink); font-weight: var(--fw-medium); }
/* Canal de salida: solo su logo (color oficial) en un círculo con su tono suave; el detalle va en el globo. */
.ui-composer-note .cv-via-tag { display: inline-grid; flex: none; place-items: center; width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--r-full); background: none; }
.ui-composer-note .cv-via-tag .ch-badge { color: var(--ch-color); }
.ui-composer-note .cv-via-tag .ch-badge.ch-whatsapp { color: var(--ch-whatsapp); } /* verde más oscuro: contrasta sobre el gris de la franja */
/* Tiempo de la ventana: reloj + horas, sin texto. */
.cv-clock { display: inline-flex; align-items: center; gap: 3px; color: var(--success-ink); font-weight: var(--fw-medium); font-size: calc((var(--fs-micro) + var(--fs-meta)) / 2); /* 11 px, como la etiqueta del anuncio */ }
/* Anuncio: etiqueta corta con detalle desplegable encima. */
.cv-ad { position: relative; flex: none; }
.cv-ad > summary { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-full); background: var(--success-soft); color: var(--success-ink); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
.cv-ad > summary::-webkit-details-marker { display: none; }
.cv-ad-pop { position: absolute; bottom: calc(100% + var(--sp-1)); left: 0; z-index: 5; width: min(320px, 80vw); padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--shadow-2); color: var(--text-primary); white-space: normal; }
.cv-ad-pop p { margin: var(--sp-1) 0 0; color: var(--text-muted); }
.cv-ad-pop ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); color: var(--text-primary); }
/* Línea bajo el cuadro de escribir: cada dato en una sola línea (el detalle va en el globo al pasar el mouse). */
.ui-composer-note > span { white-space: nowrap; }
/* El reloj de arena apoya su base en la línea de las cifras (antes quedaba más abajo que el «21»). */
.cv-clock svg { position: relative; top: -1px; flex: none; }
/* Anuncio sin beneficio vigente: solo informa, en gris. */
.cv-ad > summary { font-size: calc((var(--fs-micro) + var(--fs-meta)) / 2); } /* 11 px */
/* Formato aprobado (2026-10-08): anuncio como texto verde sin cápsula; reloj (cronómetro y horas) en naranja. */
.cv-ad > summary { padding: 0; background: none; font-weight: var(--fw-bold); }
.cv-ad-text { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cv-clock { gap: var(--sp-1); font-weight: var(--fw-bold); color: var(--warning-solid); }
/* Alineación: anuncio y reloj como cajas flexibles de una sola línea, centradas entre sí (sin desplazar los íconos a mano). */
.cv-ad { display: inline-flex; align-items: center; }
:is(.cv-ad > summary, .cv-clock) { line-height: 1; }
.cv-clock svg { top: 0; }
.cv-ad-text + .cv-clock { margin-left: var(--sp-2); }
.cv-ad-text.is-lead + .cv-clock { margin-left: 0; } /* «Responde por ⏱ 21 h» va junto */
.cv-tpl-head .cv-ad { flex: none; }