/* ============================================================
   DANGOFE OS · TALLER · CENTRO DE COBROS («quién le debe al taller») · 2026-10-16 · chat de Diseño
   v1.1.0 · 2026-10-30 · T151: las etiquetas de la deuda (en revisión, paga al recibir o al retirar, total por completar, listo sin factura),
   la línea «Total por completar: falta …» y la etiqueta en las cartas de C. Al final del archivo.
   Karla: «esto debe de ser algo muy especial para mí, para poder manejar y administrar quién le debe al taller,
   esmérate con esto y haz algo bien hecho y que funcione, apóyate por correos electrónicos y recordatorios que yo
   pueda personalizar por tiempo».
   Liquid glass, SIN sombras (anillos planos y bordes internos), claro y «Noche azul» por [data-theme='dark'].
   Vive dentro del Taller: .tal-wrap.tp .cb (mismos tonos del panel «Tablero»). Tres versiones:
     .cb--A  Tablero   · todo en una columna: números, antigüedad, filtros y tarjetas por cliente que se abren
     .cb--B  Bandeja   · lista de clientes a la izquierda, el cliente elegido a la derecha (teléfono: va y vuelve)
     .cb--C  Columnas  · tablero por estado: Vencidos · Prometieron · Al día · No va a pagar
   Hojas (previa del correo, prometió pagar, anotar, recordatorios, ajustes) y avisos: comunes a las tres.
   ============================================================ */
.cb {
  --cb-az: 3, 38, 155; --cb-cel: 59, 130, 246; --cb-ver: 34, 197, 94; --cb-amb: 245, 158, 11; --cb-roj: 239, 68, 68; --cb-mor: 139, 92, 246;
  --cb-card: rgba(255, 255, 255, .76); --cb-card2: rgba(255, 255, 255, .6); --cb-card3: rgba(255, 255, 255, .92);
  --cb-borde: rgba(3, 38, 155, .1); --cb-borde2: rgba(3, 38, 155, .2);
  --cb-txt: #0b1540; --cb-txt2: #4a5680; --cb-txt3: #7a85a8; --cb-azul: #0b3dd6;
  --cb-ok: #15803d; --cb-ok-f: rgba(34, 197, 94, .14); --cb-amb-t: #b45309; --cb-amb-f: rgba(245, 158, 11, .16);
  --cb-roj-t: #b91c1c; --cb-roj-f: rgba(239, 68, 68, .12); --cb-mor-t: #6d28d9; --cb-mor-f: rgba(139, 92, 246, .14);
  --cb-gris-t: #475569; --cb-gris-f: rgba(100, 116, 139, .14);
  --cb-r: 18px; --cb-r2: 14px; --cb-r3: 10px; --cb-blur: 14px;
  --cb-foco: 0 0 0 3px rgba(var(--cb-cel), .35);
  position: relative; color: var(--cb-txt); font-family: 'Plus Jakarta Sans', 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  font-variant-numeric: tabular-nums;
}
[data-theme='dark'] .cb, .cb.is-noche {
  --cb-card: rgba(8, 16, 46, .7); --cb-card2: rgba(14, 24, 66, .58); --cb-card3: rgba(18, 30, 78, .78);
  --cb-borde: rgba(120, 150, 255, .14); --cb-borde2: rgba(120, 150, 255, .28);
  --cb-txt: #eef1ff; --cb-txt2: #aab5e0; --cb-txt3: #7d89b8; --cb-azul: #8db0ff;
  --cb-ok: #4ade80; --cb-ok-f: rgba(34, 197, 94, .18); --cb-amb-t: #fbbf24; --cb-amb-f: rgba(245, 158, 11, .2);
  --cb-roj-t: #f87171; --cb-roj-f: rgba(239, 68, 68, .18); --cb-mor-t: #c4b5fd; --cb-mor-f: rgba(139, 92, 246, .22);
  --cb-gris-t: #cbd5e1; --cb-gris-f: rgba(148, 163, 184, .18);
}
.cb *, .cb *::before, .cb *::after { box-sizing: border-box; }
.cb button, .cb input, .cb select, .cb textarea { font: inherit; color: inherit; }
.cb button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cb :focus-visible { outline: 0; box-shadow: var(--cb-foco); }
.cb [hidden] { display: none !important; }

/* ---------- cristal ---------- */
.cb__vidrio { border: 1px solid var(--cb-borde); border-radius: var(--cb-r); background: var(--cb-card); -webkit-backdrop-filter: blur(var(--cb-blur)) saturate(140%); backdrop-filter: blur(var(--cb-blur)) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
[data-theme='dark'] .cb__vidrio, .cb.is-noche .cb__vidrio { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* ---------- cabecera ---------- */
.cb__cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.cb__cab-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0b3dd6, #3b82f6); }
.cb__cab-ic svg { width: 20px; height: 20px; }
.cb__cab-t { min-width: 0; flex: 1; }
.cb__cab-t h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.cb__cab-t p { margin: 2px 0 0; font-size: 12.5px; color: var(--cb-txt2); }
.cb__cab-acc { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- botones ---------- */
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cb-borde2); background: var(--cb-card3); color: var(--cb-txt); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.cb-btn svg { width: 15px; height: 15px; flex: none; }
.cb-btn:hover { border-color: rgba(var(--cb-cel), .5); }
.cb-btn:active { transform: scale(.98); }
.cb-btn--pri { background: linear-gradient(135deg, #0b3dd6, #3b82f6); color: #fff; border-color: transparent; }
.cb-btn--pri:hover { filter: brightness(1.06); }
.cb-btn--wa { color: #15803d; border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .1); }
[data-theme='dark'] .cb-btn--wa, .cb.is-noche .cb-btn--wa { color: #4ade80; }
.cb-btn--xs { min-height: 32px; padding: 5px 11px; font-size: 12px; }
.cb-btn--ico { width: 38px; padding: 0; }
.cb-btn--ico.cb-btn--xs { width: 32px; }
.cb-btn--sut { background: transparent; border-color: transparent; color: var(--cb-azul); }
.cb-btn--sut:hover { background: rgba(var(--cb-cel), .1); border-color: transparent; }
.cb-btn[disabled], .cb-btn.is-cargando { opacity: .55; pointer-events: none; }
.cb-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgb(var(--cb-roj)); color: #fff; font-size: 11px; font-weight: 800; }

/* ---------- 1 · los números ---------- */
.cb__kpis { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 10px; }
.cb-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--cb-r2); border: 1px solid var(--cb-borde); background: var(--cb-card2); text-align: left; min-width: 0; transition: border-color .2s ease, background .2s ease; }
button.cb-kpi:hover, button.cb-kpi.is-on { border-color: rgba(var(--cb-cel), .55); background: var(--cb-card3); }
.cb-kpi__l { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-txt3); display: flex; align-items: center; gap: 6px; }
.cb-kpi__l svg { width: 13px; height: 13px; }
.cb-kpi__v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-kpi__s { font-size: 12px; color: var(--cb-txt2); }
.cb-kpi--total { background: linear-gradient(135deg, rgba(11, 61, 214, .12), rgba(59, 130, 246, .04)), var(--cb-card2); }
.cb-kpi--total .cb-kpi__v { font-size: 30px; color: var(--cb-azul); }
.cb-kpi--roj .cb-kpi__v { color: var(--cb-roj-t); }
.cb-kpi--amb .cb-kpi__v { color: var(--cb-amb-t); }
.cb-kpi--gris .cb-kpi__v { color: var(--cb-gris-t); }
.cb-kpi__dos { display: flex; gap: 10px; align-items: baseline; }
.cb-kpi__dos b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.cb-kpi__dos small { font-size: 11.5px; color: var(--cb-txt2); font-weight: 700; }

/* ---------- 2 · antigüedad ---------- */
.cb__ant { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.cb__ant-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cb__ant-cab h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cb-txt3); }
.cb__ant-cab small { font-size: 12px; color: var(--cb-txt2); }
.cb-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--cb-gris-f); border: 1px solid var(--cb-borde); }
.cb-barra > i { display: block; height: 100%; transition: width .6s cubic-bezier(.2, .8, .2, 1); min-width: 0; }
.cb-barra > i[data-t='0-15'] { background: rgb(var(--cb-ver)); }
.cb-barra > i[data-t='16-30'] { background: rgb(var(--cb-amb)); }
.cb-barra > i[data-t='31-60'] { background: #f97316; }
.cb-barra > i[data-t='60+'] { background: rgb(var(--cb-roj)); }
.cb__tramos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cb-tramo { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: var(--cb-r3); border: 1px solid var(--cb-borde); background: var(--cb-card2); text-align: left; min-width: 0; transition: border-color .2s ease, background .2s ease; }
.cb-tramo:hover, .cb-tramo.is-on { border-color: rgba(var(--cb-cel), .55); background: var(--cb-card3); }
.cb-tramo.is-on { box-shadow: inset 0 0 0 1px rgba(var(--cb-cel), .45); }
.cb-tramo__l { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--cb-txt2); }
.cb-tramo__l i { width: 8px; height: 8px; border-radius: 50%; }
.cb-tramo__v { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-tramo__n { font-size: 11.5px; color: var(--cb-txt3); }

/* ---------- 3 · filtros ---------- */
.cb__filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; }
.cb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cb-borde2); background: var(--cb-card3); color: var(--cb-txt); font-weight: 700; font-size: 12.5px; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cb-chip__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(var(--cb-az), .1); font-size: 11px; font-weight: 800; }
.cb-chip.is-on { background: linear-gradient(135deg, #0b3dd6, #3b82f6); color: #fff; border-color: transparent; }
.cb-chip.is-on .cb-chip__n { background: rgba(255, 255, 255, .22); }
.cb-chip i { width: 8px; height: 8px; border-radius: 50%; }
.cb__buscar { flex: 1 1 220px; min-width: 160px; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cb-borde2); background: var(--cb-card3); }
.cb__buscar svg { width: 15px; height: 15px; flex: none; color: var(--cb-txt3); }
.cb__buscar input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 13.5px; }
.cb__buscar input::placeholder { color: var(--cb-txt3); }
.cb__buscar:focus-within { border-color: rgba(var(--cb-cel), .6); box-shadow: var(--cb-foco); }
.cb__buscar input:focus-visible { box-shadow: none; }
.cb__filtros-limpiar { margin-left: auto; }

/* ---------- 4 · la lista por cliente ---------- */
.cb__lista { display: flex; flex-direction: column; gap: 10px; }
.cb-cli { border: 1px solid var(--cb-borde); border-radius: var(--cb-r); background: var(--cb-card); -webkit-backdrop-filter: blur(var(--cb-blur)) saturate(140%); backdrop-filter: blur(var(--cb-blur)) saturate(140%); overflow: clip; transition: border-color .2s ease; }
.cb-cli.is-abierta { border-color: rgba(var(--cb-cel), .4); }
.cb-cli__cab { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; background: none; border: 0; text-align: left; border-radius: var(--cb-r); }
.cb-cli__cab:hover { background: rgba(var(--cb-cel), .05); }
.cb-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(140deg, var(--cb-c, #0b3dd6), color-mix(in srgb, var(--cb-c, #0b3dd6) 65%, #000)); box-shadow: 0 0 0 2px var(--cb-card3), 0 0 0 3.5px rgba(var(--cb-az), .15); flex: none; }
.cb-cli__t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cb-cli__nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 800; line-height: 1.2; }
.cb-cli__sub { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--cb-txt2); }
.cb-cli__sub svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.cb-cli__der { display: flex; align-items: center; gap: 12px; }
.cb-cli__monto { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.cb-cli__monto b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.cb-cli__monto small { font-size: 11.5px; color: var(--cb-txt3); white-space: nowrap; }
.cb-cli__monto small.is-roj { color: var(--cb-roj-t); font-weight: 700; }
.cb-cli__flecha { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--cb-txt3); border: 1px solid var(--cb-borde); transition: transform .25s ease; }
.cb-cli__flecha svg { width: 14px; height: 14px; }
.cb-cli.is-abierta .cb-cli__flecha { transform: rotate(180deg); color: var(--cb-azul); border-color: rgba(var(--cb-cel), .5); }
.cb-cli__acc { display: flex; gap: 8px; align-items: center; padding: 0 14px 12px 70px; flex-wrap: wrap; }
.cb-cli__cuerpo { display: none; padding: 0 14px 14px; flex-direction: column; gap: 10px; border-top: 1px solid var(--cb-borde); }
.cb-cli.is-abierta .cb-cli__cuerpo { display: flex; }
.cb-cli__cuerpo > .cb-deuda:first-child { margin-top: 12px; }
.cb-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; }
.cb-tag--nopref { color: var(--cb-roj-t); background: var(--cb-roj-f); border-color: rgba(var(--cb-roj), .3); }
.cb-tag--pref { color: var(--cb-amb-t); background: var(--cb-amb-f); }
.cb-tag--sincorreo { color: var(--cb-gris-t); background: var(--cb-gris-f); }
.cb-tag svg { width: 11px; height: 11px; }

/* la deuda */
.cb-deuda { border: 1px solid var(--cb-borde); border-radius: var(--cb-r2); background: var(--cb-card2); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cb-deuda.is-elegida { border-color: rgba(var(--cb-cel), .55); box-shadow: inset 0 0 0 1px rgba(var(--cb-cel), .35); }
.cb-deuda__cab { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.cb-deuda__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.cb-deuda__num { font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 13px; font-weight: 800; color: var(--cb-azul); letter-spacing: .02em; }
.cb-deuda__eq { font-size: 14px; font-weight: 700; }
.cb-deuda__fac { font-size: 12px; color: var(--cb-txt3); }
.cb-deuda__cifras { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 16px; text-align: right; }
.cb-deuda__cifras span { display: flex; flex-direction: column; gap: 1px; }
.cb-deuda__cifras small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-txt3); }
.cb-deuda__cifras b { font-size: 14px; font-weight: 800; white-space: nowrap; }
.cb-deuda__cifras .is-debe b { color: var(--cb-roj-t); font-size: 16px; }
.cb-deuda__meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--cb-txt2); }
.cb-deuda__meta svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.cb-deuda__rec { display: inline-flex; align-items: center; gap: 6px; }
.cb-deuda__rec b { color: var(--cb-txt); }
/* chip de estado */
.cb-est { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid transparent; white-space: nowrap; }
.cb-est i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cb-est--al_dia { color: var(--cb-ok); background: var(--cb-ok-f); }
.cb-est--vencida { color: var(--cb-roj-t); background: var(--cb-roj-f); border-color: rgba(var(--cb-roj), .3); }
.cb-est--promesa { color: var(--cb-mor-t); background: var(--cb-mor-f); }
.cb-est--promesa_vencida { color: var(--cb-roj-t); background: var(--cb-roj-f); border-color: rgba(var(--cb-roj), .45); border-style: dashed; }
.cb-est--no_paga { color: var(--cb-gris-t); background: var(--cb-gris-f); text-decoration: line-through; text-decoration-color: rgba(var(--cb-roj), .6); }
.cb-est--sin_correo { color: var(--cb-amb-t); background: var(--cb-amb-f); }
/* acciones de la deuda */
.cb-deuda__acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cb-deuda__acc .cb-btn { flex: 0 1 auto; }
.cb-deuda__mas { margin-left: auto; }
/* historial */
.cb-hist { display: none; flex-direction: column; gap: 0; padding: 4px 0 0; }
.cb-deuda.is-historial .cb-hist { display: flex; }
.cb-hist__t { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-txt3); margin: 0 0 6px; }
.cb-hist__i { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; position: relative; padding-bottom: 10px; }
.cb-hist__i::before { content: ''; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--cb-borde); }
.cb-hist__i:last-child::before { display: none; }
.cb-hist__ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--cb-txt3); }
.cb-hist__ic svg { width: 12px; height: 12px; }
.cb-hist__i[data-tipo='recordatorio'] .cb-hist__ic { background: #3b82f6; }
.cb-hist__i[data-tipo='whatsapp'] .cb-hist__ic { background: #16a34a; }
.cb-hist__i[data-tipo='promesa'] .cb-hist__ic { background: #7c3aed; }
.cb-hist__i[data-tipo='cobro'] .cb-hist__ic { background: #15803d; }
.cb-hist__i[data-tipo='nota'] .cb-hist__ic { background: #f59e0b; }
.cb-hist__i[data-tipo='rebote'] .cb-hist__ic { background: #ef4444; }
.cb-hist__q { font-size: 13px; line-height: 1.35; }
.cb-hist__q b { font-weight: 700; }
.cb-hist__m { font-size: 11.5px; color: var(--cb-txt3); }
.cb-hist__m .is-ok { color: var(--cb-ok); font-weight: 700; }
.cb-hist__m .is-mal { color: var(--cb-roj-t); font-weight: 700; }

/* vacío / cargando / error */
.cb__vacio { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--cb-txt2); }
.cb__vacio svg { width: 40px; height: 40px; color: var(--cb-ok); }
.cb__vacio b { font-size: 16px; color: var(--cb-txt); }
.cb__cargando { padding: 40px; text-align: center; color: var(--cb-txt2); font-weight: 700; }
.cb__cargando::before { content: ''; display: block; width: 28px; height: 28px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid rgba(var(--cb-cel), .25); border-top-color: rgb(var(--cb-cel)); animation: cb-gira .9s linear infinite; }
@keyframes cb-gira { to { transform: rotate(360deg); } }
.cb__error { padding: 20px; border-radius: var(--cb-r2); border: 1px solid rgba(var(--cb-roj), .35); background: var(--cb-roj-f); color: var(--cb-roj-t); font-weight: 700; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- B · Bandeja ---------- */
.cb--B .cb__cuerpo { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 12px; align-items: start; }
.cb--B .cb__izq { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cb--B .cb__izq .cb__filtros { padding: 8px; }
.cb--B .cb__izq .cb__buscar { flex-basis: 100%; }
.cb--B .cb__izq .cb__lista { gap: 6px; }
.cb--B .cb-cli { border-radius: var(--cb-r2); }
.cb--B .cb-cli__cab { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 10px 12px; gap: 10px; }
.cb--B .cb-av { width: 38px; height: 38px; font-size: 12.5px; }
.cb--B .cb-cli__nom { font-size: 14px; }
.cb--B .cb-cli__flecha, .cb--B .cb-cli__acc, .cb--B .cb-cli__cuerpo { display: none !important; }
.cb--B .cb-cli.is-abierta { border-color: rgba(var(--cb-cel), .6); background: var(--cb-card3); }
.cb--B .cb-cli.is-abierta .cb-cli__cab { box-shadow: inset 3px 0 0 var(--cb-azul); }
.cb--B .cb__der { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 320px; }
.cb--B .cb__der-cab { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cb--B .cb__der-cab .cb-av { width: 48px; height: 48px; font-size: 15px; }
.cb--B .cb__der-cab h3 { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb--B .cb__der-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.cb--B .cb__der-tot { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 0 2px; border-bottom: 1px solid var(--cb-borde); }
.cb--B .cb__der-tot b { font-size: 22px; font-weight: 800; color: var(--cb-roj-t); }
.cb--B .cb__der-tot small { font-size: 12.5px; color: var(--cb-txt2); }
.cb--B .cb__der .cb-deuda { background: var(--cb-card2); }
.cb--B .cb__volver { display: none; }
.cb--B .cb__der-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 280px; color: var(--cb-txt2); text-align: center; }
.cb--B .cb__der-vacio svg { width: 36px; height: 36px; color: var(--cb-txt3); }

/* ---------- C · Columnas ---------- */
.cb--C .cb__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cb-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--cb-r); border: 1px solid var(--cb-borde); background: var(--cb-card2); min-width: 0; }
.cb-col__cab { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; border-bottom: 2px solid var(--cb-col-c, var(--cb-borde2)); }
.cb-col__cab i { width: 10px; height: 10px; border-radius: 50%; background: var(--cb-col-c, var(--cb-txt3)); flex: none; }
.cb-col__cab h3 { margin: 0; font-size: 13px; font-weight: 800; flex: 1; min-width: 0; }
.cb-col__cab b { font-size: 12.5px; color: var(--cb-txt2); white-space: nowrap; }
.cb-col[data-col='vencidos'] { --cb-col-c: rgb(var(--cb-roj)); }
.cb-col[data-col='promesa'] { --cb-col-c: rgb(var(--cb-mor)); }
.cb-col[data-col='al_dia'] { --cb-col-c: rgb(var(--cb-ver)); }
.cb-col[data-col='no_paga'] { --cb-col-c: #94a3b8; }
.cb-carta { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 12px; border-radius: var(--cb-r2); border: 1px solid var(--cb-borde); background: var(--cb-card3); text-align: left; transition: border-color .2s ease, transform .15s ease; }
.cb-carta:hover { border-color: rgba(var(--cb-cel), .5); }
.cb-carta:active { transform: scale(.99); }
.cb-carta__cab { display: flex; align-items: center; gap: 8px; }
.cb-carta__cab .cb-av { width: 30px; height: 30px; font-size: 11px; }
.cb-carta__nom { font-weight: 800; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cb-carta__eq { font-size: 12px; color: var(--cb-txt2); display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.cb-carta__eq .cb-deuda__num { font-size: 11.5px; }
.cb-carta__eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-carta__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cb-carta__pie b { font-size: 15px; font-weight: 800; color: var(--cb-roj-t); }
.cb-carta__pie small { font-size: 11.5px; color: var(--cb-txt3); white-space: nowrap; }
.cb-col[data-col='no_paga'] .cb-carta__pie b { color: var(--cb-gris-t); text-decoration: line-through; }
.cb-carta__rec { font-size: 11.5px; color: var(--cb-txt3); }
.cb-col__vacio { padding: 18px 8px; text-align: center; font-size: 12.5px; color: var(--cb-txt3); }

/* ---------- hojas (previa, prometió, anotar, recordatorios, ajustes, detalle en C) ---------- */
.cb-velo { position: fixed; inset: 0; z-index: 1200; background: rgba(5, 10, 30, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; padding: 0; opacity: 0; transition: opacity .25s ease; }
.cb-velo.is-on { opacity: 1; }
.cb-hoja { --h-pad: 18px; position: relative; width: 100%; max-width: 100%; max-height: 92dvh; max-height: 92vh; display: flex; flex-direction: column; border-radius: 24px 24px 0 0; border: 1px solid var(--cb-borde2); border-bottom: 0; background: var(--cb-card3); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); color: var(--cb-txt); transform: translateY(24px); transition: transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.cb-velo.is-on .cb-hoja { transform: none; }
.cb-hoja__asa { width: 44px; height: 5px; border-radius: 999px; background: var(--cb-borde2); margin: 10px auto 0; }
.cb-hoja__cab { display: flex; align-items: center; gap: 10px; padding: 10px var(--h-pad) 8px; }
.cb-hoja__cab h3 { margin: 0; font-size: 17px; font-weight: 800; flex: 1; min-width: 0; }
.cb-hoja__cab p { margin: 2px 0 0; font-size: 12.5px; color: var(--cb-txt2); }
.cb-hoja__x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cb-borde2); background: var(--cb-card2); display: grid; place-items: center; }
.cb-hoja__x svg { width: 15px; height: 15px; }
.cb-hoja__cuerpo { padding: 4px var(--h-pad) 14px; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; }
.cb-hoja__pie { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 10px var(--h-pad) max(14px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cb-borde); }
.cb-hoja__pie .cb-btn { min-height: 42px; }
@media (min-width: 700px) {
  .cb-velo { align-items: center; padding: 20px; }
  .cb-hoja { max-width: 560px; border-radius: 22px; border-bottom: 1px solid var(--cb-borde2); max-height: min(88dvh, 820px); transform: translateY(14px) scale(.98); }
  .cb-hoja--ancha { max-width: 760px; }
  .cb-hoja__asa { display: none; }
  .cb-hoja__cab { padding-top: 18px; }
  .cb-hoja__pie { padding-bottom: 14px; }
}
html.cb-bloqueo, html.cb-bloqueo body { overflow: hidden !important; }
/* campos */
.cb-campo { display: flex; flex-direction: column; gap: 5px; }
.cb-campo > span { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cb-txt3); }
.cb-campo input, .cb-campo select, .cb-campo textarea { min-height: 42px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--cb-borde2); background: var(--cb-card2); font-size: 14px; outline: 0; }
.cb-campo textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.cb-campo input:focus, .cb-campo select:focus, .cb-campo textarea:focus { border-color: rgba(var(--cb-cel), .6); box-shadow: var(--cb-foco); }
.cb-campo small { font-size: 12px; color: var(--cb-txt2); }
.cb-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cb-fila > .cb-campo { flex: 1 1 140px; }
.cb-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; line-height: 1.5; }
.cb-inline input[type='number'] { width: 70px; min-height: 36px; padding: 6px 8px; text-align: center; border-radius: 10px; border: 1px solid var(--cb-borde2); background: var(--cb-card2); font-weight: 800; }
.cb-inline input[type='time'] { min-height: 36px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--cb-borde2); background: var(--cb-card2); font-weight: 700; }
/* opciones (radio grandes) */
.cb-ops { display: flex; flex-direction: column; gap: 8px; }
.cb-op { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 14px; border-radius: var(--cb-r2); border: 1px solid var(--cb-borde2); background: var(--cb-card2); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.cb-op.is-on { border-color: rgba(var(--cb-cel), .6); background: rgba(var(--cb-cel), .08); box-shadow: inset 0 0 0 1px rgba(var(--cb-cel), .35); }
.cb-op input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: #0b3dd6; }
.cb-op b { font-size: 14px; }
.cb-op small { grid-column: 2; font-size: 12.5px; color: var(--cb-txt2); line-height: 1.4; }
.cb-op .cb-inline { grid-column: 2; margin-top: 6px; }
/* fechas rápidas */
.cb-rapidas { display: flex; gap: 8px; flex-wrap: wrap; }
/* previa del correo */
.cb-previa { border: 1px solid var(--cb-borde2); border-radius: var(--cb-r2); overflow: hidden; background: var(--cb-card2); }
.cb-previa__cab { padding: 10px 14px; border-bottom: 1px solid var(--cb-borde); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: 12.5px; }
.cb-previa__cab span { color: var(--cb-txt3); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; align-self: center; }
.cb-previa__cab b { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-previa__cuerpo { padding: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cb-previa__cuerpo mark { background: rgba(var(--cb-cel), .16); color: inherit; border-radius: 4px; padding: 0 3px; font-weight: 700; }
.cb-previa__cuerpo a { color: var(--cb-azul); font-weight: 700; }
.cb-previa__boton { display: inline-block; margin-top: 10px; padding: 10px 18px; border-radius: 999px; background: #0b3dd6; color: #fff !important; text-decoration: none; font-weight: 800; }
.cb-vars { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-vars button { min-height: 28px; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--cb-borde2); background: transparent; font-size: 12px; font-weight: 800; color: var(--cb-azul); }
.cb-aj-sec { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--cb-r2); border: 1px solid var(--cb-borde); background: var(--cb-card2); }
.cb-aj-sec h4 { margin: 0; font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.cb-aj-sec h4 svg { width: 15px; height: 15px; color: var(--cb-azul); }
.cb-aj-sec p { margin: 0; font-size: 12.5px; color: var(--cb-txt2); line-height: 1.45; }
/* aviso (toast) */
.cb-aviso { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 1300; transform: translate(-50%, 20px); opacity: 0; display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100% - 32px)); padding: 12px 16px; border-radius: 16px; border: 1px solid var(--cb-borde2); background: var(--cb-card3); color: var(--cb-txt); font-weight: 700; font-size: 13.5px; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; pointer-events: none; }
.cb-aviso.is-on { transform: translate(-50%, 0); opacity: 1; }
.cb-aviso svg { width: 18px; height: 18px; flex: none; color: var(--cb-ok); }
.cb-aviso.is-mal svg { color: var(--cb-roj-t); }
/* el botón «Cobros» de la cabecera del Taller y la pastilla «Por cobrar» */
.tal-btn--cobros { position: relative; }
.tal-btn--cobros .cb-badge { margin-left: 4px; }
.tal-chip--cobrar .tal-chip__n { background: rgba(var(--cb-roj, 239, 68, 68), .16); color: #b91c1c; }
[data-theme='dark'] .tal-chip--cobrar .tal-chip__n { color: #fca5a5; }

/* ---------- iPad y teléfono ---------- */
@media (max-width: 1100px) {
  .cb__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-kpi--total { grid-column: 1 / -1; }
  .cb--B .cb__cuerpo { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .cb--C .cb__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cb { gap: 10px; }
  .cb__cab { padding: 12px; }
  .cb__cab-t h2 { font-size: 17px; }
  .cb__cab-acc .cb-btn span.cb-btn__txt { display: none; }
  .cb__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cb-kpi { padding: 11px 12px; }
  .cb-kpi__v { font-size: 20px; }
  .cb-kpi--total .cb-kpi__v { font-size: 26px; }
  .cb-kpi__dos b { font-size: 20px; }
  .cb__tramos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb__filtros { padding: 8px; gap: 6px; }
  .cb__buscar { flex-basis: 100%; order: -1; }
  .cb__filtros-limpiar { margin-left: 0; }
  .cb-cli__cab { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; }
  .cb-cli__der { grid-column: 2; justify-content: space-between; }
  .cb-cli__monto { text-align: left; }
  .cb-cli__acc { padding-left: 12px; }
  .cb-deuda { padding: 12px; }
  .cb-deuda__cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; text-align: left; }
  .cb-deuda__acc .cb-btn { flex: 1 1 calc(50% - 4px); }
  .cb-deuda__mas { margin-left: 0; }
  /* B: va y vuelve */
  .cb--B .cb__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cb--B .cb__der { position: static; display: none; }
  .cb--B.is-detalle .cb__izq { display: none; }
  .cb--B.is-detalle .cb__der { display: flex; }
  .cb--B .cb__volver { display: inline-flex; align-self: flex-start; }
  /* C: columnas de lado con freno */
  .cb--C .cb__cols { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .cb--C .cb-col { flex: 0 0 min(86vw, 340px); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .cb *, .cb *::before, .cb *::after, .cb-velo, .cb-hoja, .cb-aviso { transition: none !important; animation-duration: .001s !important; }
}

/* ---------- v1.1.0 · T151: el cliente debe desde que el equipo está Listo ---------- */
.cb-est--eti { white-space: normal; text-align: left; line-height: 1.25; }
.cb-est--eti svg { width: 13px; height: 13px; flex: none; margin: 0; }
.cb-est--revision { color: var(--cb-azul); background: rgba(var(--cb-cel), .14); border-color: rgba(var(--cb-cel), .3); }
.cb-est--al_recibir, .cb-est--al_retirar { color: var(--cb-mor-t); background: var(--cb-mor-f); }
.cb-est--sin_total { color: var(--cb-amb-t); background: var(--cb-amb-f); border-color: rgba(var(--cb-amb), .45); border-style: dashed; }
.cb-est--listo { color: var(--cb-azul); background: rgba(var(--cb-cel), .10); }
.cb-deuda__fac--listo { display: inline-flex; align-items: center; gap: 5px; color: var(--cb-azul); font-weight: 700; }
.cb-deuda__fac--listo svg { width: 13px; height: 13px; flex: none; }
.cb-deuda__falta { margin: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border-radius: 12px;
  background: var(--cb-amb-f); color: var(--cb-amb-t); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.cb-deuda__falta svg { width: 16px; height: 16px; margin-top: 1px; }
.cb-carta__eti { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cb-carta__eti small { font-size: 11.5px; color: var(--cb-amb-t); line-height: 1.3; overflow-wrap: anywhere; }
/* montos de 7 cifras en el teléfono: Total y Pagado en una fila, Debe debajo a lo ancho (antes se encimaban) */
@media (max-width: 760px) {
  .cb-deuda__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-deuda__cifras .is-debe { grid-column: 1 / -1; }
}