/* AXTIA Despacho · composición de cada vista (Hoy, Cobranza, Renovación, Lector, fichas y pago).
   Usa solo los tokens --dp-* y --dur-* que define despacho.css; los componentes base viven allá.
   Se carga después de despacho.css: con la misma especificidad (body.despachoui …) estas reglas ganan. */

/* ───────────────────────── Común a las vistas ───────────────────────── */

body.despachoui .dp-page { display: grid; gap: var(--dp-s5); min-width: 0; }
body.despachoui .dp-page > * { min-width: 0; }

/* Encabezado de vista: sobretítulo, titular serif y texto de apoyo. */
body.despachoui .dp-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--dp-s4); min-width: 0; }
body.despachoui .dp-hero > div { display: grid; gap: var(--dp-s2); min-width: 0; max-width: 72ch; }
body.despachoui .dp-hero .dp-muted { margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-body); line-height: var(--dp-lh-body); }
body.despachoui .dp-eyebrow { display: inline-flex; align-items: center; gap: var(--dp-s2); margin: 0; color: var(--dp-accent); font-size: var(--dp-fs-overline); font-weight: 700; letter-spacing: .12em; line-height: var(--dp-lh-ui); text-transform: uppercase; }
body.despachoui .dp-eyebrow svg { flex: none; }
body.despachoui h2.dp-display {
  margin: 0;
  color: var(--dp-ink);
  font-family: var(--dp-serif);
  font-size: var(--dp-fs-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* Los titulares y los h2 de panel reciben foco por programa (tabindex=-1): sin recuadro de ancho completo. */
body.despachoui h2[tabindex="-1"]:focus,
body.despachoui h3[tabindex="-1"]:focus { outline: none; }
body.despachoui h2[tabindex="-1"]:focus-visible,
body.despachoui h3[tabindex="-1"]:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--dp-focus); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Botones juntos al final de un formulario. */
body.despachoui .dp-acciones-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s2) var(--dp-s3); margin-top: var(--dp-s2); }
body.despachoui .dp-acciones-form > * { flex: 0 1 auto; }

/* Avisos: icono + contenido (strong, p y acciones). */
body.despachoui .dp-alerta > div { display: grid; gap: var(--dp-s1); min-width: 0; }
body.despachoui .dp-alerta strong { color: inherit; font-weight: 700; }
body.despachoui .dp-alerta p { margin: 0; overflow-wrap: anywhere; }
body.despachoui .dp-alerta .dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s2) var(--dp-s3); margin-top: var(--dp-s2); }

/* ───────────────────────── 1. Hoy ───────────────────────── */

body.despachoui .dp-today { gap: var(--dp-s5); }
body.despachoui .dp-today-hero { align-items: flex-end; }
body.despachoui .dp-today-hero .dp-date time { color: inherit; }
body.despachoui .dp-hoy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s1) var(--dp-s2); margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); line-height: var(--dp-lh-ui); }
body.despachoui .dp-hoy-meta .dp-link-button { display: inline-flex; align-items: center; gap: var(--dp-s1); }

/* Franja de indicadores: cuatro enlaces que llevan a su lista. */
body.despachoui .dp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dp-s3); }
body.despachoui .dp-stat {
  display: grid;
  align-content: start;
  gap: var(--dp-s1);
  min-width: 0;
  padding: var(--dp-s4);
  color: var(--dp-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  background: var(--dp-surface);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-lg);
  box-shadow: var(--dp-elev-1);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
body.despachoui .dp-stat:hover { border-color: var(--dp-line-strong); box-shadow: var(--dp-elev-2); }
body.despachoui .dp-stat-label { display: flex; align-items: center; gap: var(--dp-s2); min-width: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); font-weight: 600; line-height: var(--dp-lh-ui); }
body.despachoui .dp-stat-label svg { flex: none; }
body.despachoui .dp-stat-value { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s2); }
body.despachoui .dp-stat-value strong { color: var(--dp-ink); font-size: 30px; font-weight: 700; line-height: var(--dp-lh-tight); font-variant-numeric: tabular-nums; }
body.despachoui .dp-stat-value svg { flex: none; color: var(--dp-ink-3); }
body.despachoui .dp-stat small { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); line-height: var(--dp-lh-ui); }
body.despachoui .dp-stat-urgent { border-color: var(--dp-danger); box-shadow: inset 3px 0 0 var(--dp-danger), var(--dp-elev-1); }
body.despachoui .dp-stat-urgent .dp-stat-value strong { color: var(--dp-danger); }
body.despachoui .dp-stat-urgent small { color: var(--dp-danger); font-weight: 600; }

/* Balance por moneda. */
body.despachoui .dp-ledger { display: grid; gap: var(--dp-s3); min-width: 0; padding: var(--dp-s4) var(--dp-s5); background: var(--dp-surface-2); border: 1px solid var(--dp-line-soft); border-radius: var(--dp-r-lg); }
body.despachoui .dp-ledger-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dp-s1) var(--dp-s3); }
body.despachoui .dp-ledger-heading .dp-muted { color: var(--dp-ink-2); font-size: var(--dp-fs-sm); }
body.despachoui .dp-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--dp-s3) var(--dp-s5); margin: 0; }
body.despachoui .dp-balances > .dp-muted { margin: 0; color: var(--dp-ink-2); }
body.despachoui .dp-balance { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--dp-s1) var(--dp-s3); min-width: 0; padding: 0; background: none; border: 0; }
body.despachoui .dp-balance-label { display: grid; gap: 2px; min-width: 0; }
body.despachoui .dp-currency { color: var(--dp-ink); font-size: var(--dp-fs-sm); font-weight: 700; }
body.despachoui .dp-balance-label small { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); }
body.despachoui .dp-balance > strong { color: var(--dp-ink); font-size: 24px; font-weight: 700; line-height: var(--dp-lh-tight); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Mesa de trabajo: cobranza a la izquierda; renovaciones y seguimientos apilados a la derecha sin hueco. */
body.despachoui .dp-today-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dp-s4); align-items: start; min-width: 0; }
body.despachoui .dp-today-layout > * { min-width: 0; }
@media (min-width: 1100px) {
  body.despachoui .dp-today-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'c r' 'c t';
  }
  body.despachoui #dp-hoy-cobranza { grid-area: c; }
  body.despachoui #dp-hoy-renovaciones { grid-area: r; }
  body.despachoui #dp-hoy-seguimientos { grid-area: t; align-self: start; }
}

body.despachoui .dp-work-panel {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding: 0;
  background: var(--dp-surface);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-lg);
  box-shadow: var(--dp-elev-1);
  container-type: inline-size;
  container-name: panel;
}
body.despachoui .dp-work-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--dp-s2) var(--dp-s4); padding: var(--dp-s4) var(--dp-s5); border-bottom: 1px solid var(--dp-line-soft); }
body.despachoui .dp-work-head > div { display: grid; gap: var(--dp-s1); min-width: 0; flex: 1 1 220px; }
body.despachoui .dp-work-title { display: flex; align-items: center; gap: var(--dp-s2); }
body.despachoui .dp-work-title h2 { margin: 0; color: var(--dp-ink); font-family: var(--dp-font); font-size: var(--dp-fs-h2); font-weight: 700; line-height: var(--dp-lh-ui); }
body.despachoui .dp-work-head .dp-muted { margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); line-height: var(--dp-lh-ui); }
body.despachoui .dp-work-head > a { flex: none; font-size: var(--dp-fs-sm); font-weight: 600; }
body.despachoui .dp-work-list { display: grid; margin: 0; padding: 0; }
body.despachoui .dp-work-list > * + * { border-top: 1px solid var(--dp-line-soft); }
body.despachoui .dp-work-panel > .dp-empty { margin: 0; padding: var(--dp-s5); color: var(--dp-ink-2); }

/* Fila de recibo: persona · antigüedad y fecha · importe y acciones. Apilada por omisión; en panel ancho, en columnas. */
body.despachoui .dp-receipt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'persona importe' 'plazo plazo';
  gap: var(--dp-s2) var(--dp-s4);
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: var(--dp-s3) var(--dp-s5);
  background: none;
  border: 0;
  border-radius: 0;
}
body.despachoui .dp-receipt-person { grid-area: persona; display: grid; justify-items: start; gap: 2px; min-width: 0; }
body.despachoui .dp-receipt-person .dp-muted { margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); line-height: var(--dp-lh-ui); overflow-wrap: anywhere; }
body.despachoui .dp-receipt-person .dp-tag { margin-top: var(--dp-s1); }
body.despachoui .dp-client-name { max-width: 100%; color: var(--dp-ink); font-size: var(--dp-fs-body); font-weight: 700; line-height: var(--dp-lh-ui); text-decoration: none; overflow-wrap: anywhere; }
body.despachoui a.dp-client-name:hover { color: var(--dp-accent); text-decoration: underline; text-underline-offset: 3px; }
body.despachoui .dp-receipt-due { grid-area: plazo; display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s1) var(--dp-s2); min-width: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); }
body.despachoui .dp-row-money { grid-area: importe; display: grid; justify-items: end; gap: var(--dp-s2); min-width: 0; text-align: right; }
body.despachoui .dp-row-money > strong { color: var(--dp-ink); font-size: var(--dp-fs-h3); font-weight: 700; line-height: var(--dp-lh-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.despachoui .dp-row-money .dp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--dp-s1) var(--dp-s3); }
body.despachoui .dp-row-money .dp-button { min-height: var(--dp-control-h-sm); width: auto; }
@container panel (min-width: 620px) {
  body.despachoui .dp-receipt-row { grid-template-columns: minmax(0, 1fr) minmax(130px, auto) minmax(150px, auto); grid-template-areas: 'persona plazo importe'; }
  body.despachoui .dp-receipt-due { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@container panel (max-width: 360px) {
  body.despachoui .dp-receipt-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'persona' 'plazo' 'importe'; }
  body.despachoui .dp-row-money { justify-items: start; text-align: left; }
  body.despachoui .dp-row-money .dp-actions { justify-content: flex-start; }
}

/* Antigüedad: refuerza el texto con un punto de color; el texto ya dice el plazo. */
body.despachoui .dp-age { display: inline-flex; align-items: center; gap: 6px; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); font-weight: 600; line-height: var(--dp-lh-ui); white-space: nowrap; }
body.despachoui .dp-age::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--dp-line-strong); border-radius: var(--dp-r-full); }
body.despachoui .dp-age--ok { color: var(--dp-positive); }
body.despachoui .dp-age--ok::before { background: var(--dp-positive); }
body.despachoui .dp-age--aviso { color: var(--dp-warning); }
body.despachoui .dp-age--aviso::before { background: var(--dp-warning); }
body.despachoui .dp-age--tarde { color: var(--dp-danger); }
body.despachoui .dp-age--tarde::before { background: var(--dp-danger); }
body.despachoui .dp-age--critico { color: var(--dp-danger); font-weight: 700; }
body.despachoui .dp-age--critico::before { background: var(--dp-danger); box-shadow: 0 0 0 3px var(--dp-danger-soft); }

/* Fila de renovación: póliza y plazo · cliente · prima y acción. */
body.despachoui .dp-renewal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--dp-s2) var(--dp-s4);
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: var(--dp-s3) var(--dp-s5);
  background: none;
  border: 0;
  border-radius: 0;
}
body.despachoui .dp-renewal-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s1) var(--dp-s2); min-width: 0; }
body.despachoui .dp-renewal-meta svg { flex: none; color: var(--dp-ink-3); }
body.despachoui .dp-renewal-meta > a { min-width: 0; color: var(--dp-ink); font-size: var(--dp-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.despachoui .dp-renewal-row > div:nth-child(2) { display: grid; justify-items: start; gap: 2px; min-width: 0; }
body.despachoui .dp-renewal-row .dp-muted { margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); line-height: var(--dp-lh-ui); overflow-wrap: anywhere; }
body.despachoui .dp-renewal-action { display: grid; justify-items: end; gap: var(--dp-s2); min-width: 0; text-align: right; }
body.despachoui .dp-renewal-action > strong { color: var(--dp-ink); font-size: var(--dp-fs-body); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.despachoui .dp-renewal-action .dp-button { min-height: var(--dp-control-h-sm); }
@container panel (max-width: 360px) {
  body.despachoui .dp-renewal-row { grid-template-columns: minmax(0, 1fr); }
  body.despachoui .dp-renewal-action { justify-items: start; text-align: left; }
}

/* Fila de seguimiento. */
body.despachoui .dp-task-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--dp-s2) var(--dp-s4); min-width: 0; margin: 0; padding: var(--dp-s3) var(--dp-s5); background: none; border: 0; border-radius: 0; }
body.despachoui .dp-task-row > div:first-child { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
body.despachoui .dp-task-row strong { color: var(--dp-ink); font-weight: 700; overflow-wrap: anywhere; }
body.despachoui .dp-task-row .dp-muted { margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); line-height: var(--dp-lh-ui); overflow-wrap: anywhere; }
body.despachoui .dp-task-row .dp-tag { margin-right: var(--dp-s1); vertical-align: 1px; }
body.despachoui .dp-task-row .dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s1) var(--dp-s3); }
body.despachoui .dp-empty-agenda { display: flex; align-items: flex-start; gap: var(--dp-s3); padding: var(--dp-s5); color: var(--dp-ink-2); }
body.despachoui .dp-empty-agenda svg { flex: none; color: var(--dp-ink-3); }
body.despachoui .dp-empty-agenda strong { color: var(--dp-ink); }
body.despachoui .dp-empty-agenda p { margin: 2px 0 0; }

/* Pie de lista y nota del panel. */
body.despachoui .dp-list-foot { margin: 0; padding: var(--dp-s3) var(--dp-s5); color: var(--dp-ink-2); font-size: var(--dp-fs-sm); line-height: var(--dp-lh-ui); border-top: 1px solid var(--dp-line-soft); }
body.despachoui .dp-list-foot:empty { display: none; }
body.despachoui .dp-list-foot a { font-weight: 600; }
body.despachoui .dp-panel-foot { display: flex; align-items: center; gap: var(--dp-s2); margin: 0; padding: var(--dp-s3) var(--dp-s5); color: var(--dp-ink-2); font-size: var(--dp-fs-xs); background: var(--dp-surface-2); border-top: 1px solid var(--dp-line-soft); border-radius: 0 0 var(--dp-r-lg) var(--dp-r-lg); }
body.despachoui .dp-panel-foot svg { flex: none; }

@media (max-width: 1099px) {
  body.despachoui .dp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body.despachoui .dp-page { gap: var(--dp-s4); }
  body.despachoui .dp-stats { gap: var(--dp-s2); }
  body.despachoui .dp-stat { padding: var(--dp-s3); }
  body.despachoui .dp-stat-value strong { font-size: 24px; }
  body.despachoui .dp-ledger { padding: var(--dp-s3) var(--dp-s4); }
  body.despachoui .dp-balance > strong { font-size: 20px; }
  body.despachoui .dp-work-head,
  body.despachoui .dp-receipt-row,
  body.despachoui .dp-renewal-row,
  body.despachoui .dp-task-row,
  body.despachoui .dp-list-foot,
  body.despachoui .dp-panel-foot,
  body.despachoui .dp-empty-agenda,
  body.despachoui .dp-work-panel > .dp-empty { padding-left: var(--dp-s4); padding-right: var(--dp-s4); }
}
@media (max-width: 380px) {
  body.despachoui .dp-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────────────────── 2. Cobranza ───────────────────────── */

/* Una columna por omisión (lista y luego detalle); a ≥1100 px, cartera a la izquierda y detalle fijo a la derecha.
   El corte coincide con UNA_COLUMNA de cobranzaasistida.js. */
body.despachoui .dp-cobranza { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dp-s4); align-items: start; min-width: 0; }
body.despachoui .dp-cobranza > * { min-width: 0; margin: 0; }
/* Cobranza pasa a dos columnas a 1280 px: con el menú lateral, antes no caben cartera y detalle. */
@media (min-width: 1280px) {
  body.despachoui .dp-cobranza { grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); }
  body.despachoui .dp-cobranza__filtros { grid-column: 1 / -1; }
  body.despachoui .dp-cobranza__zona-detalle {
    position: sticky;
    top: var(--dp-s4);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-radius: var(--dp-r-lg);
  }
  body.despachoui .dp-cobranza__volver { display: none; }
}

/* Filtros con etiqueta visible encima de cada control. */
body.despachoui .dp-cobranza__filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--dp-s3); margin: 0; padding: 0; background: none; border: 0; }
body.despachoui .dp-cobranza__filtros label { display: grid; gap: var(--dp-s1); flex: 0 1 200px; min-width: 0; margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; line-height: var(--dp-lh-ui); }
body.despachoui .dp-cobranza__filtros label.dp-cobranza__buscar { flex: 1 1 280px; }
body.despachoui .dp-cobranza__filtros input,
body.despachoui .dp-cobranza__filtros select { width: 100%; min-width: 0; min-height: var(--dp-control-h); color: var(--dp-ink); font-size: var(--dp-fs-body); font-weight: 400; }

/* Cartera. */
body.despachoui .dp-cobranza__lista { display: grid; gap: 0; padding: 0; overflow: hidden; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); box-shadow: var(--dp-elev-1); }
body.despachoui .dp-cobranza__lista > h2 { margin: 0; padding: var(--dp-s4) var(--dp-s5); color: var(--dp-ink); font-family: var(--dp-font); font-size: var(--dp-fs-h2); font-weight: 700; line-height: var(--dp-lh-ui); border-bottom: 1px solid var(--dp-line-soft); }
body.despachoui .dp-cobranza__cuerpo,
body.despachoui .dp-cobranza__zona-detalle { min-width: 0; transition: opacity var(--dur-2) var(--ease-std); }
body.despachoui .dp-cobranza__cuerpo[aria-busy="true"],
body.despachoui .dp-cobranza__zona-detalle[aria-busy="true"] { opacity: .55; cursor: progress; }

body.despachoui .dp-cobranza__tabla { max-width: 100%; margin: 0; overflow-x: auto; overscroll-behavior-inline: contain; border: 0; border-radius: 0; }
body.despachoui .dp-cobranza__tabla table { width: 100%; min-width: 560px; border-collapse: collapse; }
body.despachoui .dp-cobranza__tabla th { padding: var(--dp-s2) var(--dp-s3); color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; text-align: left; white-space: nowrap; background: var(--dp-surface-2); border-bottom: 1px solid var(--dp-line); }
body.despachoui .dp-cobranza__tabla td { padding: var(--dp-s3); color: var(--dp-ink); font-size: var(--dp-fs-sm); font-weight: 400; text-align: left; vertical-align: top; border-bottom: 1px solid var(--dp-line-soft); }
body.despachoui .dp-cobranza__tabla tr:last-child td { border-bottom: 0; }
body.despachoui .dp-cobranza__tabla th:first-child,
body.despachoui .dp-cobranza__tabla td:first-child { padding-left: var(--dp-s5); }
body.despachoui .dp-cobranza__tabla th:last-child,
body.despachoui .dp-cobranza__tabla td:last-child { padding-right: var(--dp-s5); }
/* V-04: la alineación numérica va en la columna Saldo (td.num), no en la última celda (acción). */
body.despachoui .dp-cobranza__tabla td:last-child { font-weight: 400; font-variant-numeric: normal; }
body.despachoui .dp-cobranza__tabla th.num,
body.despachoui .dp-cobranza__tabla td.num { text-align: right; white-space: nowrap; }
body.despachoui .dp-cobranza__tabla td.num { font-size: var(--dp-fs-body); font-weight: 700; font-variant-numeric: tabular-nums; }
body.despachoui .dp-cobranza__tabla td.dp-cobranza__accion { width: 1%; text-align: right; white-space: nowrap; vertical-align: middle; }
body.despachoui .dp-cobranza__cliente {
  display: -webkit-box;
  max-width: 28ch;
  overflow: hidden;
  font-weight: 700;
  line-height: var(--dp-lh-ui);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
body.despachoui .dp-cobranza__tabla td .dp-tag { margin-top: var(--dp-s1); }
body.despachoui .dp-cobranza__poliza { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.despachoui .dp-cobranza__tabla td .dp-muted { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); }
body.despachoui .dp-cobranza__tabla td time { display: block; margin-top: 2px; }
body.despachoui .dp-cobranza__fila { cursor: default; transition: background-color var(--dur-2) var(--ease-std); }
body.despachoui .dp-cobranza__fila:hover,
body.despachoui .dp-cobranza__fila:focus-within { background: var(--dp-surface-2); }
body.despachoui .dp-cobranza__fila.activo,
body.despachoui .dp-cobranza__fila.activo:hover { background: var(--dp-accent-soft); box-shadow: inset 3px 0 0 var(--dp-accent); }
body.despachoui .dp-cobranza__seleccionar { min-height: var(--dp-control-h-sm); padding: 0 var(--dp-s3); color: var(--dp-ink); font-weight: 700; }
body.despachoui .dp-cobranza__seleccionar[aria-pressed="true"] { color: var(--dp-accent); border-color: var(--dp-accent); background: var(--dp-surface); }

/* Recién pagado o recién elegido: resaltado breve que se desvanece. */
@keyframes dp-vistas-recien { from { background-color: var(--dp-positive-soft); } to { background-color: transparent; } }
body.despachoui .dp-cobranza__fila.dp-recien,
body.despachoui .dp-cobranza__tarjeta.dp-recien { animation: dp-vistas-recien var(--dur-hl) var(--ease-out) 1; }

/* Tarjetas: solo en pantallas angostas (≤600 px); la tabla se oculta. */
body.despachoui .dp-cobranza__tarjetas { display: none; }
body.despachoui .dp-cobranza__vacio { display: grid; justify-items: start; gap: var(--dp-s2); padding: var(--dp-s5); color: var(--dp-ink-2); }
body.despachoui .dp-cobranza__vacio p { margin: 0; max-width: 60ch; color: var(--dp-ink); }
body.despachoui .dp-cobranza__lista > .dp-list-foot { border-top: 1px solid var(--dp-line-soft); }

/* Detalle del recibo. */
body.despachoui .dp-cobranza__estado { margin: 0; padding: var(--dp-s5); color: var(--dp-ink-2); background: var(--dp-surface-2); border: 1px dashed var(--dp-line-strong); border-radius: var(--dp-r-lg); box-shadow: none; }
body.despachoui .dp-cobranza__detalle { display: grid; gap: var(--dp-s4); min-width: 0; margin: 0; padding: var(--dp-s5); background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); box-shadow: var(--dp-elev-1); }
body.despachoui .dp-cobranza__detalle > * { min-width: 0; margin: 0; }
body.despachoui .dp-cobranza__detalle p { margin: 0; }
@keyframes dp-vistas-detalle { from { opacity: 0; transform: translateY(var(--shift-1)); } to { opacity: 1; transform: none; } }
body.despachoui .dp-cobranza__detalle[data-cambio="recibo"] { animation: dp-vistas-detalle var(--dur-3) var(--ease-out) 1; }
body.despachoui .dp-cobranza__detalle[data-cambio="refresco"] { animation: none; }

body.despachoui .dp-cobranza__cabecera { display: grid; justify-items: start; gap: var(--dp-s1); min-width: 0; }
body.despachoui .dp-cobranza__volver { display: inline-flex; align-items: center; min-height: var(--dp-target); margin-bottom: var(--dp-s1); }
body.despachoui .dp-cobranza__cabecera h2 { margin: 0; color: var(--dp-ink); font-family: var(--dp-font); font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
body.despachoui .dp-cobranza__cabecera h2 a { color: inherit; text-decoration-color: var(--dp-line-strong); text-underline-offset: 4px; }
body.despachoui .dp-cobranza__cabecera h2 a:hover { color: var(--dp-accent); text-decoration-color: currentColor; }
body.despachoui .dp-cobranza__referencia { color: var(--dp-ink-2); font-size: var(--dp-fs-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.despachoui .dp-cobranza__cabecera .dp-tag { display: inline-flex; align-items: center; gap: var(--dp-s1); margin-top: var(--dp-s1); }

body.despachoui .dp-cobranza__saldo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--dp-s3) var(--dp-s4); padding: var(--dp-s4); background: var(--dp-surface-2); border: 0; border-radius: var(--dp-r-md); }
body.despachoui .dp-cobranza__saldo > div { display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; }
body.despachoui .dp-cobranza__saldo span:first-child { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; }
body.despachoui .dp-cobranza__saldo strong { color: var(--dp-ink); font-size: 24px; font-weight: 700; line-height: var(--dp-lh-tight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.despachoui .dp-cobranza__saldo time { color: var(--dp-ink); font-size: var(--dp-fs-body); font-weight: 600; }

body.despachoui .dp-cobranza__propuesta { display: grid; gap: var(--dp-s2); color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; line-height: var(--dp-lh-ui); }
body.despachoui .dp-cobranza__propuesta textarea { width: 100%; min-height: 160px; padding: var(--dp-s3); color: var(--dp-ink); font: 400 var(--dp-fs-body)/var(--dp-lh-body) var(--dp-font); background: var(--dp-surface); border: 1px solid var(--dp-line-strong); border-radius: var(--dp-r-md); resize: vertical; }
body.despachoui .dp-cobranza__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s2); }
body.despachoui .dp-cobranza__acciones > * { display: inline-flex; align-items: center; gap: var(--dp-s2); }
body.despachoui .dp-cobranza__detalle .dp-status-inline:empty { display: none; }

/* Contacto: cada dato en su renglón con su botón de copiar. */
body.despachoui .dp-cobranza__contacto,
body.despachoui .dp-cobranza__seguimiento,
body.despachoui .dp-cobranza__eventos { display: grid; gap: var(--dp-s3); padding-top: var(--dp-s4); border-top: 1px solid var(--dp-line-soft); }
body.despachoui .dp-cobranza__contacto h3,
body.despachoui .dp-cobranza__seguimiento h3,
body.despachoui .dp-cobranza__eventos h3 { margin: 0; color: var(--dp-ink); font-size: var(--dp-fs-h3); font-weight: 700; line-height: var(--dp-lh-ui); }
body.despachoui .dp-contacto { display: grid; gap: 0; margin: 0; }
body.despachoui .dp-contacto > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--dp-s2) var(--dp-s3); min-height: var(--dp-target); padding: var(--dp-s1) 0; border-bottom: 1px solid var(--dp-line-soft); }
body.despachoui .dp-contacto > div:last-child { border-bottom: 0; }
body.despachoui .dp-contacto dt { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; }
body.despachoui .dp-contacto dd { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s2); min-width: 0; margin: 0; }
body.despachoui .dp-contacto dd.dp-muted { color: var(--dp-ink-2); }
body.despachoui .dp-contacto__valor { min-width: 0; color: var(--dp-ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.despachoui .dp-contacto .dp-copy { flex: none; }
body.despachoui .dp-cobranza__contacto > .dp-alerta { display: flex; align-items: flex-start; gap: var(--dp-s2); }
body.despachoui .dp-cobranza__contacto > .dp-alerta svg { flex: none; margin-top: 2px; }
body.despachoui .dp-cobranza__preferencia { justify-self: start; }

/* Seguimiento: resultado y fecha lado a lado; la nota y el botón a todo lo ancho. */
body.despachoui .dp-cobranza__seguimiento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.despachoui .dp-cobranza__seguimiento > h3,
body.despachoui .dp-cobranza__seguimiento > .dp-cobranza__nota,
body.despachoui .dp-cobranza__seguimiento > .dp-status-inline,
body.despachoui .dp-cobranza__seguimiento > button { grid-column: 1 / -1; }
body.despachoui .dp-cobranza__seguimiento > button { justify-self: start; }
body.despachoui .dp-cobranza__seguimiento label { display: grid; gap: var(--dp-s1); min-width: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; }
body.despachoui .dp-cobranza__seguimiento select,
body.despachoui .dp-cobranza__seguimiento input { width: 100%; min-width: 0; min-height: var(--dp-control-h); color: var(--dp-ink); font-size: var(--dp-fs-body); font-weight: 400; }
body.despachoui .dp-cobranza__nota textarea { width: 100%; min-height: 84px; padding: var(--dp-s2) var(--dp-s3); color: var(--dp-ink); font: 400 var(--dp-fs-body)/var(--dp-lh-body) var(--dp-font); resize: vertical; }

body.despachoui .dp-cobranza__eventos ul { display: grid; gap: var(--dp-s2); margin: 0; padding-left: var(--dp-s5); color: var(--dp-ink-2); font-size: var(--dp-fs-sm); }
body.despachoui .dp-cobranza__eventos li { overflow-wrap: anywhere; }
body.despachoui .dp-cobranza__eventos li strong { color: var(--dp-ink); font-weight: 600; }
body.despachoui .dp-cobranza__eventos > .dp-muted { color: var(--dp-ink-2); }

@media (max-width: 1279.98px) {
  body.despachoui .dp-cobranza__zona-detalle { scroll-margin-top: var(--dp-s4); }
}
@media (max-width: 600px) {
  body.despachoui .dp-cobranza__tabla { display: none; }
  body.despachoui .dp-cobranza__tarjetas { display: grid; gap: 0; }
  body.despachoui .dp-cobranza__tarjeta { display: grid; gap: var(--dp-s1); min-width: 0; margin: 0; padding: var(--dp-s3) var(--dp-s4); background: none; border: 0; border-bottom: 1px solid var(--dp-line-soft); border-radius: 0; box-shadow: none; }
  body.despachoui .dp-cobranza__tarjeta:last-child { border-bottom: 0; }
  body.despachoui .dp-cobranza__tarjeta.activo { background: var(--dp-accent-soft); box-shadow: inset 3px 0 0 var(--dp-accent); }
  body.despachoui .dp-cobranza__tarjeta h3 { margin: 0 0 var(--dp-s1); color: var(--dp-ink); font-size: var(--dp-fs-h3); font-weight: 700; line-height: var(--dp-lh-ui); overflow-wrap: anywhere; }
  body.despachoui .dp-cobranza__tarjeta > .dp-tag { justify-self: start; }
  body.despachoui .dp-cobranza__tarjeta p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--dp-s1) var(--dp-s3); margin: 0; font-size: var(--dp-fs-sm); }
  body.despachoui .dp-cobranza__tarjeta p > :last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }
  body.despachoui .dp-cobranza__tarjeta p strong { font-size: var(--dp-fs-body); font-variant-numeric: tabular-nums; }
  body.despachoui .dp-cobranza__etiqueta { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; }
  body.despachoui .dp-cobranza__tarjeta .dp-cobranza__seleccionar { width: 100%; min-height: var(--dp-target); margin-top: var(--dp-s2); }
  body.despachoui .dp-cobranza__lista > h2,
  body.despachoui .dp-cobranza__vacio { padding-left: var(--dp-s4); padding-right: var(--dp-s4); }
  body.despachoui .dp-cobranza__detalle { padding: var(--dp-s4); }
  body.despachoui .dp-cobranza__filtros label,
  body.despachoui .dp-cobranza__filtros label.dp-cobranza__buscar { flex: 1 1 100%; }
  body.despachoui .dp-cobranza__seguimiento { grid-template-columns: minmax(0, 1fr); }
  body.despachoui .dp-cobranza__seguimiento > button { justify-self: stretch; }
  body.despachoui .dp-contacto > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body.despachoui .dp-cobranza__acciones > * { flex: 1 1 auto; justify-content: center; }
}

/* ───────────────────────── 3. Preparar renovación y Configurar despacho ───────────────────────── */

/* Tarjetas de trabajo comunes a ambas vistas. */
body.despachoui .dp-card { display: grid; align-content: start; gap: var(--dp-s4); min-width: 0; margin: 0; padding: var(--dp-s5); background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); box-shadow: var(--dp-elev-1); }
body.despachoui .dp-card > * { min-width: 0; margin: 0; }
body.despachoui .dp-card > h2 { color: var(--dp-ink); font-family: var(--dp-font); font-size: var(--dp-fs-h2); font-weight: 700; line-height: var(--dp-lh-ui); }
body.despachoui .dp-card > .dp-muted { margin-top: calc(var(--dp-s2) * -1); color: var(--dp-ink-2); font-size: var(--dp-fs-sm); }
body.despachoui .dp-card .dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s2) var(--dp-s3); }
body.despachoui .dp-list { display: grid; align-content: start; gap: var(--dp-s4); min-width: 0; margin: 0; padding: 0; list-style: none; }
body.despachoui .dp-list > * { min-width: 0; }

/* Formulario en rejilla: dos columnas en escritorio, una en pantallas angostas. */
body.despachoui .dp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dp-s4); min-width: 0; }
body.despachoui .dp-form > * { min-width: 0; }
body.despachoui .dp-form .dp-field small { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 400; line-height: var(--dp-lh-ui); }

/* Renovación: propuesta (ancha) y póliza anterior (resumen fijo) lado a lado a ≥1100 px. */
body.despachoui .dp-review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dp-s4); align-items: start; min-width: 0; }
body.despachoui .dp-review-grid > * { min-width: 0; }
@media (min-width: 1100px) {
  body.despachoui .dp-review-grid { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--dp-s5); }
  body.despachoui .dp-review-grid > .dp-summary { position: sticky; top: var(--dp-s4); }
}
body.despachoui .dp-summary { display: grid; align-content: start; gap: var(--dp-s3); min-width: 0; margin: 0; padding: var(--dp-s5); background: var(--dp-surface-2); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); }
body.despachoui .dp-summary > * { margin: 0; }
body.despachoui .dp-summary h2 { color: var(--dp-ink); font-family: var(--dp-font); font-size: var(--dp-fs-h2); font-weight: 700; line-height: var(--dp-lh-ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.despachoui .dp-summary dl { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: var(--dp-s2) var(--dp-s4); margin: 0; font-size: var(--dp-fs-sm); }
body.despachoui .dp-summary dt { color: var(--dp-ink-2); font-weight: 400; }
body.despachoui .dp-summary dd { margin: 0; color: var(--dp-ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Importe calculado: una línea destacada debajo de los campos. */
body.despachoui .dp-calculado { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dp-s1) var(--dp-s2); margin: 0; padding: var(--dp-s3) var(--dp-s4); color: var(--dp-ink-2); font-size: var(--dp-fs-sm); font-variant-numeric: tabular-nums; background: var(--dp-surface-2); border-radius: var(--dp-r-md); }
body.despachoui .dp-calculado:empty { display: none; }
body.despachoui .dp-calculado strong { color: var(--dp-ink); font-size: var(--dp-fs-h3); font-weight: 700; }

/* Comparación anterior / propuesta / diferencia. */
body.despachoui .dp-comparacion { width: 100%; border-collapse: collapse; font-size: var(--dp-fs-sm); font-variant-numeric: tabular-nums; }
body.despachoui .dp-comparacion th,
body.despachoui .dp-comparacion td { padding: var(--dp-s2) var(--dp-s3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--dp-line-soft); overflow-wrap: anywhere; }
body.despachoui .dp-comparacion thead th { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; white-space: nowrap; background: var(--dp-surface-2); border-bottom-color: var(--dp-line); }
body.despachoui .dp-comparacion tbody th { color: var(--dp-ink-2); font-weight: 600; }
body.despachoui .dp-comparacion td { color: var(--dp-ink); }
body.despachoui .dp-comparacion tbody tr:last-child th,
body.despachoui .dp-comparacion tbody tr:last-child td { font-weight: 700; border-bottom: 0; }
body.despachoui .dp-delta--sube,
body.despachoui .dp-delta--baja { display: inline-flex; align-items: center; gap: var(--dp-s1); font-weight: 700; white-space: nowrap; }
body.despachoui .dp-delta--sube { color: var(--dp-danger); }
body.despachoui .dp-delta--baja { color: var(--dp-positive); }
body.despachoui .dp-delta--sube::before { content: '▲'; font-size: .75em; }
body.despachoui .dp-delta--baja::before { content: '▼'; font-size: .75em; }

/* Configurar despacho: formulario a la izquierda; equipo y cartera a la derecha. */
body.despachoui .dp-setup-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dp-s4); align-items: start; min-width: 0; }
body.despachoui .dp-setup-layout > * { min-width: 0; }
@media (min-width: 1100px) {
  body.despachoui .dp-setup-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--dp-s5); }
}
body.despachoui #dp-config-form > button[type="submit"] { justify-self: start; }

@media (max-width: 620px) {
  body.despachoui .dp-card,
  body.despachoui .dp-summary { padding: var(--dp-s4); }
  body.despachoui .dp-form { grid-template-columns: minmax(0, 1fr); }
  body.despachoui .dp-summary dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body.despachoui .dp-summary dd { margin-bottom: var(--dp-s2); }
  body.despachoui .dp-acciones-form > * { flex: 1 1 auto; }
}

/* ───────────────────────── 4. Lector de pólizas ───────────────────────── */

body.despachoui .dp-lector .dp-intro { display: grid; gap: var(--dp-s2); max-width: 72ch; margin: 0; }
body.despachoui .dp-lector .dp-intro > p:not(.dp-eyebrow) { margin: 0; color: var(--dp-ink-2); }
body.despachoui .dp-lector .dp-content { display: grid; gap: var(--dp-s4); min-width: 0; }
body.despachoui .dp-lector .dp-content > * { min-width: 0; margin: 0; }

/* Cabecera del borrador: texto a la izquierda y «Iniciar otro borrador» a la derecha. */
body.despachoui .dp-lector-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--dp-s3) var(--dp-s4); }
body.despachoui .dp-lector-cabecera > div { display: grid; gap: var(--dp-s1); flex: 1 1 320px; min-width: 0; }
body.despachoui .dp-lector-cabecera h3 { margin: 0; color: var(--dp-ink); font-size: var(--dp-fs-h2); font-weight: 700; line-height: var(--dp-lh-ui); }
body.despachoui .dp-lector-cabecera p { margin: 0; color: var(--dp-ink-2); }

/* Visor y formulario: una columna; a ≥1100 px, visor fijo a la izquierda y formulario a la derecha. */
body.despachoui .dp-lector-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dp-s4); align-items: start; min-width: 0; }
body.despachoui .dp-lector-layout > * { min-width: 0; }
body.despachoui .dp-lector-visor,
body.despachoui .dp-lector .dp-form-panel { display: grid; align-content: start; gap: var(--dp-s3); min-width: 0; margin: 0; padding: var(--dp-s4); background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); box-shadow: var(--dp-elev-1); }
body.despachoui .dp-lector-visor > *,
body.despachoui .dp-lector .dp-form-panel > * { min-width: 0; margin: 0; }
body.despachoui .dp-lector-visor h3,
body.despachoui .dp-lector .dp-form-panel > h3 { color: var(--dp-ink); font-size: var(--dp-fs-h3); font-weight: 700; line-height: var(--dp-lh-ui); }
body.despachoui .dp-lector-visor .dp-actions { display: flex; flex-wrap: wrap; gap: var(--dp-s2); }
body.despachoui .dp-lector-visor > .dp-lector-nota:first-of-type { overflow-wrap: anywhere; }
body.despachoui .dp-document { display: block; width: 100%; height: 62vh; min-height: 360px; background: var(--dp-surface-2); border: 1px solid var(--dp-line); border-radius: var(--dp-r-md); }
@media (min-width: 1100px) {
  body.despachoui .dp-lector-layout { grid-template-columns: minmax(0, 1.05fr) minmax(420px, 1fr); gap: var(--dp-s5); }
  body.despachoui .dp-lector-visor {
    position: sticky;
    top: var(--dp-s4);
    height: calc(100dvh - 120px);
    min-height: 480px;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }
  body.despachoui .dp-lector-visor .dp-document { height: 100%; min-height: 0; }
}

/* Formulario del lector: grupos con leyenda; dentro de cada grupo, dos columnas. */
body.despachoui .dp-lector-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dp-s4); min-width: 0; }
/* La leyenda queda como leyenda renderizada (fuera de la rejilla), así que el fieldset no lleva borde superior que la cruce. */
body.despachoui .dp-lector-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dp-s3) var(--dp-s4); min-width: 0; margin: 0; padding: 0; border: 0; }
body.despachoui .dp-lector-form > .dp-lector-grupo + .dp-lector-grupo { margin-top: var(--dp-s2); }
body.despachoui .dp-lector-grupo > * { min-width: 0; }
body.despachoui .dp-lector-grupo > legend { margin: 0; padding: 0 0 var(--dp-s3); color: var(--dp-accent); font-size: var(--dp-fs-overline); font-weight: 700; letter-spacing: .12em; line-height: var(--dp-lh-ui); text-transform: uppercase; }
body.despachoui .dp-lector-ancho { grid-column: 1 / -1; }
body.despachoui .dp-lector-grupo .dp-check { grid-column: 1 / -1; }
body.despachoui .dp-lector-form .dp-field { align-content: start; }
body.despachoui .dp-lector-form .dp-field > span:first-child { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; line-height: var(--dp-lh-ui); }
body.despachoui .dp-lector-form textarea.dp-input { min-height: 84px; resize: vertical; }
body.despachoui .dp-requerido { color: var(--dp-danger); font-weight: 700; }
body.despachoui .dp-lector-nota { margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); font-weight: 400; line-height: var(--dp-lh-ui); }
body.despachoui .dp-lector-form > .dp-acciones-form { padding-top: var(--dp-s4); border-top: 1px solid var(--dp-line-soft); }

/* Importes calculados del lector: tarjeta pequeña con etiqueta, valor y nota. */
body.despachoui .dp-lector .dp-calculado { display: grid; align-content: start; gap: 2px; padding: var(--dp-s2) var(--dp-s3); background: var(--dp-surface-2); border: 1px dashed var(--dp-line); border-radius: var(--dp-r-md); }
body.despachoui .dp-calculado__etiqueta { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 700; }
body.despachoui .dp-calculado__valor { color: var(--dp-ink); font-size: var(--dp-fs-h3); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.despachoui .dp-calculado__nota { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); line-height: var(--dp-lh-ui); }
body.despachoui .dp-calculado__nota:empty { display: none; }

/* Estado y error junto a las acciones o al campo. */
body.despachoui .dp-lector-estado { display: grid; gap: var(--dp-s2); flex: 1 1 100%; min-width: 0; }
body.despachoui .dp-lector-estado > :empty { display: none; }
body.despachoui .dp-lector-estado .dp-alerta { margin: 0; }
body.despachoui .dp-lector-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s2) var(--dp-s3); }
body.despachoui .dp-lector-error .dp-error { flex: 1 1 200px; min-width: 0; }

/* Zona de carga del PDF. */
body.despachoui .dp-upload { display: grid; gap: var(--dp-s3); min-width: 0; max-width: 720px; margin: 0; padding: var(--dp-s5); background: var(--dp-surface); border: 2px dashed var(--dp-line-strong); border-radius: var(--dp-r-lg); box-shadow: none; transition: background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std); }
body.despachoui .dp-upload > * { min-width: 0; margin: 0; }
body.despachoui .dp-upload > p { color: var(--dp-ink-2); font-size: var(--dp-fs-sm); }
body.despachoui .dp-upload.is-arrastrando { background: var(--dp-accent-soft); border-color: var(--dp-accent); }
body.despachoui .dp-upload .dp-file { padding: var(--dp-s2); }
body.despachoui .dp-lector .dp-admin { display: grid; gap: var(--dp-s3); max-width: 720px; margin: 0; padding: var(--dp-s3) var(--dp-s4); background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); }
body.despachoui .dp-lector .dp-admin > summary { min-height: var(--dp-control-h-sm); display: flex; align-items: center; color: var(--dp-ink); font-weight: 700; cursor: pointer; }
body.despachoui .dp-provider { display: grid; gap: var(--dp-s3); min-width: 0; }

@media (max-width: 620px) {
  body.despachoui .dp-lector-grupo { grid-template-columns: minmax(0, 1fr); }
  body.despachoui .dp-lector-visor,
  body.despachoui .dp-lector .dp-form-panel,
  body.despachoui .dp-upload { padding: var(--dp-s3); }
  body.despachoui .dp-document { height: 56vh; min-height: 280px; }
}

/* ───────────────────────── 5. Fichas de cliente y póliza ───────────────────────── */

/* Franja de resumen: 3–4 datos clave con etiqueta pequeña y valor tabular. */
body.despachoui .dp-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 0; min-width: 0; margin: 0; padding: 0; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); box-shadow: var(--dp-elev-1); }
body.despachoui .dp-resumen-item { display: grid; align-content: start; gap: var(--dp-s1); min-width: 0; margin: 0; padding: var(--dp-s3) var(--dp-s4); border-left: 1px solid var(--dp-line-soft); }
body.despachoui .dp-resumen-item:first-child { border-left: 0; }
body.despachoui .dp-resumen-item > :first-child { margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 600; line-height: var(--dp-lh-ui); }
body.despachoui .dp-resumen-item > :last-child:not(:first-child) { margin: 0; color: var(--dp-ink); font-size: var(--dp-fs-h2); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.despachoui .dp-resumen-item dd { margin: 0; }

/* Sección vacía: una línea con su acción, sin caja dentro de la tarjeta. */
body.despachoui .dp-seccion-vacia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dp-s2) var(--dp-s4); margin: 0; padding: var(--dp-s2) 0 0; color: var(--dp-ink-2); font-size: var(--dp-fs-sm); background: none; border: 0; }
body.despachoui .dp-seccion-vacia > :first-child { flex: 1 1 220px; min-width: 0; margin: 0; }
body.despachoui .dp-seccion-vacia button,
body.despachoui .dp-seccion-vacia .dp-button { flex: none; }

/* Tarjetas de sección de la ficha: título claro, contenido sin cajas anidadas. */
body.despachoui .secciones-modulos { display: grid; gap: var(--dp-s4); min-width: 0; }
body.despachoui .card > h2 { overflow-wrap: anywhere; }
body.despachoui .card .tabla-wrap { max-width: 100%; }
body.despachoui .card dd,
body.despachoui .card td { overflow-wrap: anywhere; }
body.despachoui .card td.num,
body.despachoui .card th.num { overflow-wrap: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  body.despachoui .dp-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.despachoui .dp-resumen-item:nth-child(odd) { border-left: 0; }
  body.despachoui .dp-resumen-item:nth-child(n + 3) { border-top: 1px solid var(--dp-line-soft); }
  body.despachoui .dp-resumen-item > :last-child:not(:first-child) { font-size: var(--dp-fs-h3); }
}

/* ───────────────────────── Modal de pago ───────────────────────── */

body.despachoui .dp-pago-contexto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--dp-s2) var(--dp-s4); margin: 0 0 var(--dp-s4); padding: var(--dp-s3) var(--dp-s4); background: var(--dp-surface-2); border-radius: var(--dp-r-md); font-size: var(--dp-fs-sm); }
body.despachoui .dp-pago-contexto > * { min-width: 0; margin: 0; overflow-wrap: anywhere; }
body.despachoui .dp-pago-contexto dt,
body.despachoui .dp-pago-contexto small { color: var(--dp-ink-2); font-size: var(--dp-fs-xs); font-weight: 600; }
body.despachoui .dp-pago-contexto dd { margin: 0; }
body.despachoui .dp-pago-contexto strong { color: var(--dp-ink); font-variant-numeric: tabular-nums; }

/* ───────────────────────── 6. Anchura mínima (360 px) ───────────────────────── */

/* Nombres y números largos nunca empujan el ancho de la página. */
body.despachoui :is(.dp-page, .dp-cobranza) :where(h2, h3, p, dd, td, a:not(.dp-button), strong) { overflow-wrap: anywhere; }
body.despachoui :is(.dp-page, .dp-cobranza) :is(.dp-money, .dp-age, .dp-delta--sube, .dp-delta--baja, time) { overflow-wrap: normal; }
@media (max-width: 380px) {
  body.despachoui .dp-row-money > strong,
  body.despachoui .dp-balance > strong,
  body.despachoui .dp-renewal-action > strong,
  body.despachoui .dp-cobranza__tabla td.num { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Ajustes tras la verificación en navegador (360–1920 px y 200 %) ── */
/* Antigüedad crítica: texto claro sobre rojo; la regla de color de arriba lo dejaba rojo sobre rojo. */
body.despachoui .dp-age--critico { color: var(--dp-surface); background: var(--dp-danger); }
body.despachoui .dp-age--critico::before { background: currentColor; box-shadow: none; }
/* El indicador «Seguimientos» es <button>: se alinea igual que los indicadores que son enlaces. */
body.despachoui button.dp-stat { display: grid; justify-content: stretch; justify-items: stretch; align-items: start; text-align: left; font: inherit; }
/* Pies de lista y de panel a todo el ancho (la medida máxima de los párrafos los recortaba). */
body.despachoui :is(.dp-list-foot, .dp-panel-foot) { max-width: none; width: 100%; box-sizing: border-box; }
/* Aire entre el resumen de una ficha y la primera tarjeta. */
body.despachoui .dp-resumen { margin-bottom: var(--dp-s4); }
/* Nombres largos de personas y empresas: se cortan entre palabras, no a media palabra. */
body.despachoui :is(.dp-cobranza__cliente, .dp-client-name, .dp-receipt-person a) { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
/* Contacto: valor en una línea con elipsis; «Copiar» entrega el dato completo. */
body.despachoui .dp-contacto__valor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
/* Accesos de la barra superior: solo icono con nombre en la descripción y color de texto, no de enlace. */
body.despachoui .top .barra-mod { color: var(--dp-ink-2); }
body.despachoui .top .barra-mod:hover { color: var(--dp-ink); }
/* Selector de archivo nativo con el aspecto de un botón secundario. */
body.despachoui input[type="file"] { padding: var(--dp-s1); font: var(--dp-fs-sm)/1.4 var(--dp-font); color: var(--dp-ink-2); }
body.despachoui input[type="file"]::file-selector-button { min-height: var(--dp-control-h-sm); margin-right: var(--dp-s3); padding: 0 var(--dp-s3); color: var(--dp-ink); background: var(--dp-surface); border: 1px solid var(--dp-line-strong); border-radius: var(--dp-r-md); font: 600 var(--dp-fs-sm)/1 var(--dp-font); cursor: pointer; }
body.despachoui input[type="file"]::file-selector-button:hover { background: var(--dp-surface-2); }
/* Cobranza a partir de 1280 px: la cartera cabe sin desplazamiento horizontal. */
@media (min-width: 1280px) {
  body.despachoui .dp-cobranza { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); }
  body.despachoui .dp-cobranza__tabla table { width: 100%; min-width: 0; table-layout: fixed; }
  body.despachoui .dp-cobranza__tabla th:nth-child(1) { width: 40%; }
  body.despachoui .dp-cobranza__tabla th:nth-child(2) { width: 25%; }
  body.despachoui .dp-cobranza__tabla th:nth-child(3) { width: 21%; }
  body.despachoui .dp-cobranza__tabla th:nth-child(4) { width: 14%; }
  body.despachoui .dp-cobranza__tabla .dp-age { white-space: normal; border-radius: var(--dp-r-sm); }
  body.despachoui .dp-cobranza__accion :is(button, .btn) { min-height: var(--dp-control-h-sm); padding-inline: var(--dp-s2); font-size: var(--dp-fs-sm); }
}
/* Filtros de las listas en móvil: cada control a todo el ancho, sin anchos irregulares. */
@media (max-width: 600px) {
  body.despachoui .dp-route-view .barra:not(.paginador) > :is(input, select, .filtro-ref) { flex: 1 1 100%; width: 100%; }
  body.despachoui .dp-route-view .barra:not(.paginador) .filtro-ref select { width: 100%; }
}
/* En la tabla de Cobranza la póliza va bajo el nombre del cliente. */
body.despachoui .dp-cobranza__tabla .dp-cobranza__poliza { margin-top: 2px; font-size: var(--dp-fs-xs); }
/* Menú móvil: mientras el cajón sale no recibe toques; si no, tapa el botón «Menú» durante la animación. */
@media (max-width: 859px) {
  body.despachoui .dp-nav:not(.abierto) { pointer-events: none; }
}

/* Pantallas previas al sistema: contraseña temporal y documentos que el despacho debe aceptar. */
body.despachoui .login .card:has(.puerta-docs) { width: min(640px, 100%); }
body.despachoui .puerta-docs { display: grid; gap: var(--dp-s2); margin: var(--dp-s4) 0; }
body.despachoui .puerta-doc { border: 1px solid var(--dp-line); border-radius: var(--dp-r-md, 10px); background: var(--dp-surface); }
body.despachoui .puerta-doc > summary { cursor: pointer; padding: var(--dp-s3) var(--dp-s4); font-weight: 600; }
body.despachoui .puerta-doc__cuerpo { max-height: 45vh; overflow: auto; padding: 0 var(--dp-s4) var(--dp-s4); overflow-wrap: anywhere; }
body.despachoui .puerta-texto { white-space: pre-wrap; }
body.despachoui .login .campo.campo-casilla { display: flex; flex-direction: row; gap: var(--dp-s2); align-items: flex-start; }
body.despachoui .login .campo.campo-casilla label { font-weight: 500; }
body.despachoui .campo-casilla input { margin-top: 3px; flex: none; width: auto; }
body.despachoui .login .puerta-salir { margin-top: var(--dp-s3); text-align: center; }
body.despachoui .login button.enlace { width: auto; margin: 0; padding: 4px 8px; border: 0; background: none; color: var(--dp-ink-2); text-decoration: underline; box-shadow: none; }
body.despachoui .login .dp-alerta { margin-top: var(--dp-s3); }

/* Aviso de la cuenta del servicio (prueba gratuita, solo lectura): una franja bajo la barra superior en todas las vistas. */
body.despachoui .dp-aviso-cuenta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dp-s2) var(--dp-s4); margin: 0 0 var(--dp-s4); }
body.despachoui .dp-aviso-cuenta[hidden] { display: none; }
body.despachoui .dp-aviso-cuenta p { margin: 0; flex: 1 1 280px; }
body.despachoui .dp-aviso-cuenta button { flex: none; }

/* Asistente de ayuda: panel lateral no modal (a pantalla completa en el teléfono). */
body.despachoui .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.despachoui .dp-asistente-boton { display: inline-flex; align-items: center; gap: 6px; }
body.despachoui .dp-asistente {
  position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  display: flex; flex-direction: column; gap: var(--dp-s3); padding: var(--dp-s4);
  background: var(--dp-surface); border-left: 1px solid var(--dp-line); box-shadow: var(--dp-elev-2);
}
body.despachoui .dp-asistente[hidden] { display: none; }
body.despachoui .dp-asistente__cabecera { display: flex; align-items: center; gap: var(--dp-s2); }
body.despachoui .dp-asistente__cabecera h2 { margin: 0; flex: 1; font-size: var(--dp-fs-h3); }
body.despachoui .dp-asistente__nota { margin: 0; font-size: var(--dp-fs-xs); color: var(--dp-ink-2); }
body.despachoui .dp-asistente__log { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--dp-s3); padding: 2px; overscroll-behavior: contain; }
body.despachoui .dp-asistente__msj { max-width: 92%; padding: var(--dp-s2) var(--dp-s3); border-radius: var(--dp-r-md); overflow-wrap: anywhere; }
body.despachoui .dp-asistente__msj > :is(p, ul, ol):first-of-type { margin-top: 0; }
body.despachoui .dp-asistente__msj > :is(p, ul, ol):last-child { margin-bottom: 0; }
body.despachoui .dp-asistente__msj--usuario { align-self: flex-end; background: var(--dp-accent-soft); }
body.despachoui .dp-asistente__msj--asistente { align-self: flex-start; background: var(--dp-surface-2); border: 1px solid var(--dp-line-soft); }
body.despachoui .dp-asistente__sugerencias { display: flex; flex-wrap: wrap; gap: var(--dp-s2); }
body.despachoui .dp-asistente__sugerencias[hidden] { display: none; }
body.despachoui .dp-asistente__form { display: flex; gap: var(--dp-s2); align-items: flex-end; }
body.despachoui .dp-asistente__form textarea { flex: 1; resize: none; min-height: 44px; }
body.despachoui .dp-asistente__pie { display: flex; justify-content: space-between; gap: var(--dp-s2); flex-wrap: wrap; }
body.despachoui .dp-asistente__pie button.enlace { padding: 4px 0; border: 0; background: none; color: var(--dp-ink-2); text-decoration: underline; box-shadow: none; }
body.despachoui .dp-asistente__pie button.enlace:disabled { opacity: .5; text-decoration: none; }
body.despachoui .dp-asistente__anexo { max-height: 50vh; overflow: auto; margin-bottom: var(--dp-s3); }
@media (min-width: 1100px) {
  /* En pantallas anchas el panel deja ver la vista: el contenido se recorre a la izquierda. */
  body.despachoui.con-asistente .shell { padding-right: min(400px, 30vw); }
}
@media (max-width: 859px) {
  body.despachoui .dp-asistente { width: 100vw; border-left: 0; }
  body.despachoui .dp-asistente-boton__texto { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body.despachoui .dp-asistente:not([hidden]) { animation: dp-asistente-entra var(--dur-2, 200ms) ease-out; }
  @keyframes dp-asistente-entra { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
}