/* Proyectos — cartera a plazos (panel) y portal «mi lote» (página). Only the theme's tokens: works on Vidrio, Rapport and
   the page in the prospect's colour. Prefix cl-. */

/* ---------- panel: the list ---------- */
.cl-item { align-items: flex-start; }
.cl-main { flex: 1 1 300px; min-width: 0; display: grid; gap: 6px; }
.cl-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14.5px; }
.cl-top b { overflow-wrap: anywhere; }
.cl-sub { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.cl-meter { height: 6px; max-width: 360px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.cl-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent-ink); }
.cl-item .ndf-item-side { justify-content: flex-end; }

/* ---------- panel: estado de cuenta and «Armar plan» sheets ---------- */
.cl-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.cl-head > div { display: grid; gap: 2px; min-width: 0; }
.cl-h { font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
.cl-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.cl-dl dt { color: var(--muted); }
.cl-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 420px) { .cl-dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .cl-dl dd { margin-bottom: 8px; } }
.cl-table td, .cl-table th { font-variant-numeric: tabular-nums; }
.cl-table tr[data-st="ok"] td, .cl-table tr[data-st="ok"] th { color: var(--muted); }
.cl-table tr[data-st="mal"] th::before, .cl-cuotas li[data-st="mal"] em::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #ef4444; vertical-align: 1px; }
.cl-table tr[data-st="mal"] td:last-child { font-weight: 700; }
.cl-f { color: var(--fg); }
.cl-f > span { font-size: 13px; color: var(--muted); }
.cl-f input { width: 100%; box-sizing: border-box; }
.cl-resumen { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent-ink) 30%, transparent); }
.cl-resumen span, .cl-resumen small { color: var(--muted); font-size: 13px; }
.cl-resumen b { font-size: 26px; line-height: 1.15; font-variant-numeric: tabular-nums; }

/* ---------- page: the buyer's portal (?milote=) on the tracking page's frame ---------- */
.cl-foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius, 16px) * .8); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.cl-avance { display: grid; gap: 8px; }
.cl-avance-t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.cl-avance-t span { color: var(--muted); font-size: 14px; }
.cl-bar { height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.cl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent-ink); }
.cl-cuotas { list-style: none; margin: 0; padding: 0; display: grid; }
.cl-cuotas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); font-size: 15px; }
.cl-cuotas li:first-child { border-top: 0; }
.cl-cuotas .cl-n { font-weight: 700; }
.cl-cuotas b { font-variant-numeric: tabular-nums; }
.cl-cuotas em { grid-column: 1 / -1; font-style: normal; font-size: 13.5px; color: var(--muted); }
.cl-cuotas li[data-st="ok"] em { color: var(--fg); }
.cl-cuotas li[data-st="ok"] em::before { content: "✓ "; font-weight: 700; color: var(--accent-ink); }
.cl-cuotas li[data-st="mal"] em { color: var(--fg); font-weight: 700; }
.cl-docs { list-style: none; margin: 0; padding: 0; display: grid; }
.cl-docs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); }
.cl-docs li:first-child { border-top: 0; }
.cl-docs li > span { display: grid; gap: 1px; min-width: 0; }
.cl-docs small { color: var(--muted); font-size: 13.5px; }
.ndf-dlg[data-mod="cartera-lotes"] input[type="number"] { font: 15px/1.3 var(--font-body, system-ui), system-ui, sans-serif; min-height: 44px; padding: 8px 10px; border-radius: 10px; max-width: 100%; box-sizing: border-box;
  background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg); border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); }

/* touch: 44 px targets in both panel skins (Rapport keeps .ndf-btn.sm at 36 px) */
@media (pointer: coarse), (max-width: 1023px) {
  #t-m-cartera-lotes .ndf-btn, #t-m-cartera-lotes .ndf-seg button, #t-m-cartera-lotes select, #t-m-cartera-lotes .ndf-link, .ndf-dlg[data-mod="cartera-lotes"] .ndf-btn, .ndf-dlg[data-mod="cartera-lotes"] .ndf-chip, section[data-mod="cartera-lotes"] .ndf-btn { min-height: 44px; }
  #t-m-cartera-lotes .ndf-link { display: inline-flex; align-items: center; }
}