/* 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 gris, titular en Manrope 600 (28 px; 24 px en el teléfono) 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-ink-3); 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-font);
  font-size: var(--dp-fs-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  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-on-accent); 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; }

/* Lupita, la asistente: bolita abajo a la izquierda (a la derecha del menú lateral en escritorio) y ventana de chat que se
   abre desde ahí; en el teléfono la ventana ocupa toda la pantalla. */
body.despachoui .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.despachoui .dp-lupita {
  position: fixed; z-index: 41; left: calc(var(--dp-nav-w) + 20px); bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--dp-s2); pointer-events: none;
}
body.despachoui .dp-lupita[hidden] { display: none; }
body.despachoui .dp-lupita > * { pointer-events: auto; }
body.despachoui .dp-lupita-boton {
  position: relative; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0;
  background: var(--dp-accent); color: var(--dp-on-accent); box-shadow: var(--dp-elev-2); display: grid; place-items: center;
}
body.despachoui .dp-lupita-boton:hover { background: var(--dp-accent-hover); }
body.despachoui .dp-lupita-boton:focus-visible { outline: 3px solid var(--dp-focus); outline-offset: 3px; }
body.despachoui .dp-lupita-avatar { font: 600 22px/1 var(--dp-font); letter-spacing: -.02em; }
body.despachoui .dp-lupita-avatar.chico {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--dp-accent); color: var(--dp-on-accent); font-size: 16px;
}
body.despachoui .dp-lupita-punto { position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--dp-positive); border: 2px solid var(--dp-surface); }
body.despachoui .dp-lupita-burbuja {
  display: none; align-items: flex-start; gap: 4px; max-width: 250px; padding: 8px 10px; border-radius: 12px 12px 12px 4px;
  background: var(--dp-surface); border: 1px solid var(--dp-line); box-shadow: var(--dp-elev-1, var(--dp-elev-2));
  font-size: var(--dp-fs-xs); line-height: 1.35; color: var(--dp-ink-2);
}
body.despachoui .dp-lupita.con-saludo:not(.abierto) .dp-lupita-burbuja { display: flex; }
body.despachoui .dp-lupita-saludo__cerrar { flex: none; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--dp-ink-2); display: grid; place-items: center; box-shadow: none; }
body.despachoui .dp-asistente {
  position: fixed; z-index: 40; left: calc(var(--dp-nav-w) + 20px); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 68px);
  width: min(400px, calc(100vw - var(--dp-nav-w) - 40px)); height: min(640px, calc(100vh - 120px));
  display: flex; flex-direction: column; gap: var(--dp-s3); padding: var(--dp-s4);
  background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 16px; 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__quien { flex: 1; display: grid; }
body.despachoui .dp-asistente__quien h2 { margin: 0; font-size: var(--dp-fs-h3); line-height: 1.2; }
body.despachoui .dp-asistente__sub { font-size: var(--dp-fs-xs); color: var(--dp-ink-2); }
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__accion {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dp-s2);
  margin-top: var(--dp-s2); padding: var(--dp-s2); border: 1px dashed var(--dp-line); border-radius: var(--dp-r-md); background: var(--dp-surface);
}
body.despachoui .dp-asistente__accion > span { flex: 1 1 180px; font-size: var(--dp-fs-sm); }
/* Tarjeta de confirmación: detalle, campos editables («Cambiar») y botones; al terminar queda el resultado. */
body.despachoui .dp-asistente__accion--confirmar { border-style: solid; border-color: var(--dp-accent); flex-direction: column; align-items: stretch; }
body.despachoui .dp-asistente__accion--confirmar > span { flex: none; }
body.despachoui .dp-asistente__accion--confirmar.hecha { border-color: var(--dp-positive); }
body.despachoui .dp-asistente__accion--confirmar.cancelada { border-color: var(--dp-line); opacity: .8; }
body.despachoui .dp-asistente__campos { display: grid; gap: var(--dp-s2); }
body.despachoui .dp-asistente__campos[hidden] { display: none; }
body.despachoui .dp-asistente__campos .campo { margin: 0; }
body.despachoui .dp-asistente__botones { display: flex; flex-wrap: wrap; gap: var(--dp-s2); align-items: center; }
body.despachoui .dp-asistente__botones button.enlace { border: 0; background: none; box-shadow: none; text-decoration: underline; color: var(--dp-ink-2); }
body.despachoui .dp-asistente__estado:empty { display: none; }
body.despachoui .dp-asistente__estado { font-size: var(--dp-fs-sm); }
body.despachoui a.dp-asistente__enlace {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--dp-line); border-radius: var(--dp-r-md);
  background: var(--dp-surface); color: var(--dp-ink); font-size: var(--dp-fs-sm); text-decoration: none;
}
body.despachoui a.dp-asistente__enlace:hover { border-color: var(--dp-accent); }
body.despachoui .dp-asistente__msj .dp-asistente__sugerencias { margin-top: var(--dp-s2); }
body.despachoui .dp-asistente__clip { flex: none; align-self: flex-end; }
body.despachoui .dp-asistente__clip[hidden] { display: none; }
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); }
/* Espacio al final de cada vista para que la bolita no tape el último botón. */
body.despachoui .main { padding-bottom: calc(var(--dp-s7) + 64px); }
@media (max-width: 859px) {
  body.despachoui .dp-lupita { left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  body.despachoui .dp-asistente { inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  body.despachoui .dp-asistente:not([hidden]) { animation: dp-asistente-entra var(--dur-2, 200ms) ease-out; transform-origin: bottom left; }
  @keyframes dp-asistente-entra { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
  body.despachoui .dp-lupita.con-saludo .dp-lupita-burbuja { animation: dp-asistente-entra var(--dur-3, 260ms) ease-out; }
}

/* ───────────── buscador del despacho (Ctrl+K, paleta.js) ─────────────
   Diálogo con el cuadro arriba, la lista de resultados con su propio desplazamiento y una pista de teclado al pie. La opción
   activa (aria-activedescendant) se ve como la entrada activa del menú. En 600 px o menos ocupa toda la pantalla. */
body.despachoui .velo.dp-paleta-velo { padding-top: 10vh; }
body.despachoui .modal.dp-paleta-modal { display: flex; flex-direction: column; width: min(680px, 100%); max-height: 80vh; }
body.despachoui .dp-paleta-modal .cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; }
body.despachoui .dp-paleta { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.despachoui .dp-paleta-caja { flex: none; display: flex; align-items: center; gap: var(--dp-s2); padding: var(--dp-s2) var(--dp-s4); color: var(--dp-ink-3); border-bottom: 1px solid var(--dp-line-soft); }
body.despachoui .dp-paleta-caja:focus-within { box-shadow: inset 0 -2px var(--dp-focus); }
body.despachoui .dp-paleta-caja input[type='search'] { flex: 1 1 auto; min-width: 0; min-height: var(--dp-target); padding: 0; color: var(--dp-ink); background: transparent; border: 0; box-shadow: none; font-size: 16px; }
body.despachoui .dp-paleta-caja input[type='search']:focus-visible { outline: none; }
body.despachoui .dp-paleta-lista { flex: 1 1 auto; min-height: 0; padding: var(--dp-s2); overflow-y: auto; overscroll-behavior: contain; }
body.despachoui .dp-paleta-lista[hidden] { display: none; }
body.despachoui .dp-paleta-grupo + .dp-paleta-grupo { margin-top: var(--dp-s2); }
body.despachoui .dp-paleta-grupo-titulo { padding: var(--dp-s2) var(--dp-s3) var(--dp-s1); color: var(--dp-ink-3); font-size: var(--dp-fs-overline); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body.despachoui .dp-paleta-opcion { display: flex; align-items: center; gap: var(--dp-s3); min-height: var(--dp-target); padding: var(--dp-s1) var(--dp-s3); color: var(--dp-ink); border-radius: var(--dp-r-md); cursor: pointer; }
body.despachoui .dp-paleta-opcion.activa { color: var(--dp-accent); background: var(--dp-accent-soft); box-shadow: inset 3px 0 var(--dp-accent); }
body.despachoui .dp-paleta-icono { flex: none; display: inline-flex; color: var(--dp-ink-3); }
body.despachoui .dp-paleta-opcion.activa .dp-paleta-icono { color: var(--dp-accent); }
body.despachoui .dp-paleta-texto { display: grid; gap: 2px; min-width: 0; }
body.despachoui .dp-paleta-titulo { font-size: var(--dp-fs-body); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
body.despachoui .dp-paleta-detalle { overflow: hidden; color: var(--dp-ink-2); font-size: var(--dp-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
body.despachoui .dp-paleta-lupita .dp-paleta-titulo { font-weight: 600; }
body.despachoui .dp-paleta-vacio { margin: 0; padding: var(--dp-s4); color: var(--dp-ink-2); font-size: var(--dp-fs-sm); }
body.despachoui .dp-paleta-vacio[hidden] { display: none; }
body.despachoui .dp-paleta-pista { flex: none; margin: 0; padding: var(--dp-s2) var(--dp-s4); color: var(--dp-ink-3); 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); font-size: var(--dp-fs-xs); }
@media (forced-colors: active) {
  body.despachoui .dp-paleta-opcion.activa { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media (max-width: 600px) {
  body.despachoui .velo.dp-paleta-velo { padding: 0; }
  body.despachoui .modal.dp-paleta-modal { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  body.despachoui .dp-paleta-pista { display: none; }
}

/* ───────────── todas las herramientas (#/herramientas) ───────────── */
body.despachoui .dp-catalogo > p { margin-top: 0; }
body.despachoui .dp-catalogo-indice ul { display: flex; flex-wrap: wrap; gap: var(--dp-s2); margin: 0 0 var(--dp-s4); padding: 0; list-style: none; }
body.despachoui .dp-catalogo-indice button { min-height: var(--dp-target); }
body.despachoui .dp-catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--dp-s4); align-items: start; }
body.despachoui .dp-catalogo-cat { margin: 0; }
body.despachoui .dp-catalogo-cat h2 { margin-bottom: var(--dp-s2); }
body.despachoui .dp-catalogo-cuenta { color: var(--dp-ink-3); font-weight: 500; }
body.despachoui .dp-catalogo-sub { margin: var(--dp-s3) 0 var(--dp-s1); color: var(--dp-ink-3); font-size: var(--dp-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
body.despachoui .dp-catalogo-lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
body.despachoui .dp-catalogo-item { display: flex; align-items: center; gap: var(--dp-s2); min-height: var(--dp-target); padding: 0 var(--dp-s2); color: var(--dp-ink); border-radius: var(--dp-r-md); text-decoration: none; overflow-wrap: anywhere; }
body.despachoui .dp-catalogo-item:hover { color: var(--dp-accent); background: var(--dp-accent-soft); text-decoration: none; }
body.despachoui .dp-catalogo-item svg { flex: none; color: var(--dp-ink-3); }

/* ───────────── «Mi menú» fuera del menú lateral ─────────────
   Estrella para agregar una herramienta (en #/herramientas y en el buscador), candado de los básicos y la tarjeta de
   Mi cuenta con el editor a lo ancho (una fila por botón; en el teléfono, dos renglones como en el menú lateral). */
body.despachoui .dp-catalogo-fila { display: flex; align-items: center; gap: var(--dp-s1); }
body.despachoui .dp-catalogo-fila > .dp-catalogo-item { flex: 1 1 auto; min-width: 0; }
body.despachoui :where(.dp-fijar) { flex: none; width: var(--dp-target); height: var(--dp-target); min-height: 0; padding: 0; color: var(--dp-ink-3); background: transparent; border-color: transparent; }
body.despachoui :where(.dp-fijar):where(:hover:not(:disabled)) { color: var(--dp-accent); background: var(--dp-accent-soft); border-color: transparent; }
body.despachoui .dp-fijar[aria-pressed='true'] { color: var(--dp-accent); background: transparent; border-color: transparent; box-shadow: none; }
body.despachoui .dp-fijar[aria-pressed='true'] svg { fill: currentColor; }
body.despachoui .dp-catalogo-fijo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--dp-target); height: var(--dp-target); color: var(--dp-ink-3); }
body.despachoui .dp-paleta-opcion .dp-paleta-texto { flex: 1 1 auto; }
body.despachoui .dp-paleta-fijar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--dp-target); height: var(--dp-target); margin: calc(var(--dp-s1) * -1) calc(var(--dp-s2) * -1) calc(var(--dp-s1) * -1) auto; color: var(--dp-ink-3); border-radius: var(--dp-r-md); cursor: pointer; }
body.despachoui .dp-paleta-fijar:hover { color: var(--dp-accent); background: var(--dp-surface); }
body.despachoui .dp-paleta-fijar.activa { color: var(--dp-accent); }
body.despachoui .dp-paleta-fijar.activa svg { fill: currentColor; }
body.despachoui .dp-paleta-aviso { flex: none; margin: 0; padding: var(--dp-s2) var(--dp-s4); color: var(--dp-warning); background: var(--dp-warning-soft); border-bottom: 1px solid var(--dp-line-soft); font-size: var(--dp-fs-sm); }
body.despachoui .dp-cuenta { display: grid; gap: var(--dp-s4); max-width: 760px; }
body.despachoui .dp-cuenta > .card { margin: 0; }
body.despachoui .dp-mimenu-tarjeta h2 { margin: 0 0 var(--dp-s2); }
body.despachoui .dp-mimenu-tarjeta > p { margin: 0 0 var(--dp-s4); }
body.despachoui .dp-mimenu-editor--ancho .dp-mimenu-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--dp-s1) var(--dp-s2) var(--dp-s1) 0; }
body.despachoui .dp-mimenu-editor--ancho .dp-mimenu-controles { flex-wrap: nowrap; padding-left: 0; }
body.despachoui .dp-mimenu-editor--ancho .dp-mimenu-titulo { font-size: var(--dp-fs-body); }
body.despachoui .dp-mimenu-editor--ancho .dp-mimenu-acciones { justify-content: flex-start; }
body.despachoui .dp-mimenu-editor--ancho .dp-mimenu-acciones :where(button) { flex: 0 0 auto; }
@media (max-width: 600px) {
  body.despachoui .dp-mimenu-editor--ancho .dp-mimenu-item { grid-template-columns: minmax(0, 1fr); }
  body.despachoui .dp-mimenu-editor--ancho .dp-mimenu-controles { flex-wrap: wrap; padding-left: var(--dp-target); }
}

/* ───────────── Escuchar a los agentes (fase 5) ─────────────
   «Pedir ayuda» junto a cada error que se queda en pantalla, nota del recibo oficial al registrar un pago, «Leer póliza en
   PDF» en Hoy y la página «Descargar mis datos» (#/descargas). */
body.despachoui .dp-pedir-ayuda { display: inline-flex; align-items: center; gap: var(--dp-s1); min-height: var(--dp-target); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
body.despachoui .dp-pedir-ayuda svg { flex: none; }
body.despachoui .dp-error-state > .dp-error-acciones { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s2) var(--dp-s4); min-width: 0; }
body.despachoui .dp-status-inline.is-error { flex-wrap: wrap; column-gap: var(--dp-s2); }
body.despachoui .dp-pago-nota { display: flex; align-items: flex-start; gap: var(--dp-s2); margin: 0 0 var(--dp-s4); color: var(--dp-ink-2); font-size: var(--dp-fs-sm); line-height: var(--dp-lh-ui); }
body.despachoui .dp-pago-nota svg { flex: none; margin-top: 1px; color: var(--dp-ink-3); }
body.despachoui .dp-pago-ayuda { margin: var(--dp-s2) 0 0; }
body.despachoui .dp-hero-acciones { display: flex; flex-wrap: wrap; gap: var(--dp-s2); }
body.despachoui .dp-hero-acciones .dp-button { min-height: var(--dp-target); }
body.despachoui .dp-descargas { display: grid; gap: var(--dp-s4); }
body.despachoui .dp-descargas > p { margin: 0; max-width: 72ch; }
body.despachoui .dp-descargas-lema { color: var(--dp-ink); font-size: var(--dp-fs-h3); font-weight: 600; }
body.despachoui .dp-descargas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--dp-s4); align-items: stretch; margin: 0; padding: 0; list-style: none; }
body.despachoui .dp-descarga { display: grid; grid-template-rows: auto 1fr auto; gap: var(--dp-s2); margin: 0; }
body.despachoui .dp-descarga h2,
body.despachoui .dp-descargas-respaldo h2 { display: flex; align-items: center; gap: var(--dp-s2); margin: 0; }
body.despachoui .dp-descarga h2 svg,
body.despachoui .dp-descargas-respaldo h2 svg { flex: none; color: var(--dp-ink-3); }
body.despachoui .dp-descarga p,
body.despachoui .dp-descargas-respaldo p { margin: 0; }
body.despachoui .dp-descarga-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s2) var(--dp-s4); }
body.despachoui .dp-descarga-acciones :where(.btn, .dp-text-link) { min-height: var(--dp-target); }
body.despachoui .dp-descarga-acciones .dp-text-link { display: inline-flex; align-items: center; }
body.despachoui .dp-descargas-respaldo { display: grid; gap: var(--dp-s2); margin: 0; }
@media (max-width: 600px) {
  body.despachoui .dp-descarga-acciones > .btn { flex: 1 1 100%; }
  body.despachoui .dp-hero-acciones { width: 100%; }
  body.despachoui .dp-hero-acciones .dp-button { flex: 1 1 auto; }
}

/* ───────────── Fase A: buscador, selector, listas y fichas que no esconden nada ───────────── */
/* Buscador (paleta.js): «Ver los N» en azul marino, «¿Quiso decir…?» con la sugerencia resaltada y la pregunta del empate. */
body.despachoui .dp-paleta-ver .dp-paleta-titulo { color: var(--dp-accent); font-weight: 600; }
body.despachoui .dp-paleta-sugerencia .dp-paleta-titulo strong { color: var(--dp-accent); font-weight: 700; }
body.despachoui .dp-paleta-pregunta { flex: none; max-width: none; margin: 0; padding: var(--dp-s2) var(--dp-s4); color: var(--dp-ink); background: var(--dp-accent-soft); border-bottom: 1px solid var(--dp-line-soft); font-size: var(--dp-fs-sm); font-weight: 600; }
/* Las franjas del buscador (aviso, pista) van de lado a lado aunque sean párrafos. */
body.despachoui :where(.dp-paleta-aviso, .dp-paleta-pista, .dp-paleta-vacio) { max-width: none; }
body.despachoui .dp-paleta-pregunta[hidden] { display: none; }
/* Selector de datos (ui.crearRef): «Hay N más…» o «No encontramos nada…» bajo el desplegable. */
body.despachoui .dp-ref-info { margin: 0; color: var(--dp-ink-2); font-size: var(--dp-fs-xs); }
body.despachoui .dp-ref-info[hidden] { display: none; }
/* «Se muestran X de Y» con el enlace al conjunto completo. */
body.despachoui .tabla-aviso .tabla-ver-todos { font-weight: 600; white-space: nowrap; }
/* Filtros que llegaron en la dirección sin control propio: fichas con «Quitar». */
body.despachoui .dp-filtros-zona:empty { display: none; }
body.despachoui .dp-filtros-activos { display: flex; flex-wrap: wrap; gap: var(--dp-s2); margin: 0 0 var(--dp-s3); }
body.despachoui .dp-filtro-ficha { display: inline-flex; align-items: center; gap: var(--dp-s1); min-height: var(--dp-control-h-sm); padding: 0 var(--dp-s1) 0 var(--dp-s3); color: var(--dp-ink); background: var(--dp-accent-soft); border: 1px solid var(--dp-line); border-radius: var(--dp-r-full); font-size: var(--dp-fs-sm); }
body.despachoui .dp-filtro-quitar { display: inline-flex; align-items: center; justify-content: center; width: var(--dp-control-h-sm); min-height: var(--dp-control-h-sm); padding: 0; color: var(--dp-ink-2); background: transparent; border: 0; border-radius: var(--dp-r-full); }
body.despachoui .dp-filtro-quitar:hover { color: var(--dp-accent); background: var(--dp-surface); }
/* Ficha del cliente: título de «Pólizas» con «Ver las N pólizas», el conteo y las históricas plegadas. */
body.despachoui .dp-ficha-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--dp-s1) var(--dp-s4); }
body.despachoui .dp-ficha-titulo > h2 { margin: 0; }
body.despachoui .dp-ficha-conteo { margin: var(--dp-s1) 0 var(--dp-s3); font-size: var(--dp-fs-sm); }
body.despachoui .dp-ficha-historial { margin-top: var(--dp-s4); border-top: 1px solid var(--dp-line-soft); }
body.despachoui .dp-ficha-historial > summary { display: flex; align-items: center; min-height: var(--dp-target); color: var(--dp-ink-2); font-size: var(--dp-fs-sm); font-weight: 600; cursor: pointer; }
body.despachoui .dp-ficha-historial > summary:hover { color: var(--dp-accent); }
/* Ficha de una póliza renovada: banda «Renovada por → N (vigente)». */
body.despachoui .dp-banda-renovada { align-items: center; margin: 0 0 var(--dp-s4); font-size: var(--dp-fs-sm); }
body.despachoui .dp-banda-renovada a { font-weight: 600; }
/* Lista sin resultados: «¿Quiso decir …?» con cada sugerencia como botón (repite la búsqueda en la misma lista). */
body.despachoui .dp-quiso-decir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s1); margin: 0 0 var(--dp-s3); font-size: var(--dp-fs-sm); }

/* ───────────── Recorrido de bienvenida y novedades (public/bienvenida.js) ───────────── */
.recorrido { min-height: 220px; }
.recorrido-titulo { margin: 0 0 8px; font-size: 20px; color: var(--dp-accent); }
.recorrido-puntos { margin: 8px 0 12px; padding-left: 20px; }
.recorrido-puntos li { margin: 4px 0; }
.recorrido-aviso { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--dp-warning-soft); border: 1px solid var(--dp-warning-line); color: var(--dp-ink); font-size: 14px; }
.recorrido-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex-wrap: wrap; }
.recorrido-botones { display: flex; gap: 8px; }
.recorrido-contador { color: var(--dp-muted); font-size: 14px; }