/* ============================================================
   Commerce Reports - Shared styles for microfinance report tables
   Prefix: cm-* (Commerce)
   ============================================================ */

/* Title row - dark blue header */
.cm-title {
    color: #fff !important;
    background-color: var(--primario) !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Day date header with left/right borders */
.cm-day-header {
    border-left: 1px solid #284a70;
    border-right: 1px solid #284a70;
    text-align: center;
}

/* Sub-header row (Programado / Avance / Porc.) */
.cm-sub-header {
    text-align: center;
}

.cm-sub-header--left {
    border-left: 1px solid #284a70;
    text-align: center;
}

.cm-sub-header--right {
    border-right: 1px solid #284a70;
    text-align: center;
}

/* Supervisor group row */
.cm-supervisor {
    font-weight: bold;
    background-color: #f0f4f8;
}

/* Subtotal row (per supervisor) */
.cm-subtotal {
    font-weight: bold;
}

/* Numeric centered cell */
.cm-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Amount right-aligned cell */
.cm-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Day start separator - left border for day groups */
.cm-day-start {
    border-left: 1px solid #284a70 !important;
}

/* Percentage color classes */
.cm-pct--complete {
    background-color: #dcfce7;
    color: #166534;
}

.cm-pct--progress {
    background-color: #fef3c7;
    color: #92400e;
}

.cm-pct--low {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Footer total row */
.cm-footer {
    font-size: 14px;
}

/* Renovation rows */
.cm-renov--normal {
    background-color: #fef3c7;
}

.cm-renov--final {
    background-color: #fee2e2;
}

/* Renovation installment cell */
.cm-renov-cuota {
    font-weight: bold;
    text-align: center;
    color: #dc2626;
}

/* Daily collection - complete (100%) */
.cm-cobr--complete {
    color: #066f0f;
    background-color: #dcfce7;
}

/* Daily collection - pending (< 100%) */
.cm-cobr--pending {
    color: #dc2626;
}

/* ── Cuentas por Pagar / Cobrar ──────────────────────────────── */

/* Provider / Client group header band */
.crep-grupo-header td {
    background-color: #1e3a5f !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    padding: 5px 8px !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Sub-total row per group */
.crep-grupo-total td {
    background-color: #edf2f7;
    font-weight: 600;
    border-top: 1.5px solid #2c5282 !important;
    color: #2c5282;
}

/* Días Vencidos color states */
.crep-dias--ok   { color: #2e7d32; font-weight: 600; }
.crep-dias--warn { color: #c77700; font-weight: 600; }
.crep-dias--late { color: #c62828; font-weight: 600; }
.crep-dias--severe {
    color: #7b1919;
    font-weight: 700;
    background-color: #fee2e2;
}
/* ============================================================
   Calendario de Producción — monto por día dentro de InsiCalendar.
   El div se crea vía RenderTreeBuilder dentro del DayTemplate del
   InsiCalendar (componente hijo), así que el CSS scoped (.razor.css)
   nunca lo alcanza (Blazor no le inyecta el atributo b-xxxxx). Por
   eso vive acá, en el CSS global.
   ============================================================ */
.pcal-monto {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 2px;
}

.pcal-monto--conData {
    color: #1e3a5f;
}

/* ══════════════════════════════════════════════════════════════════
   Cartera al corte, diseño de 2026-10-07 (.cxc-) — Ventas por Cobrar y Compras por Pagar. Componentes en
   Insi.Suite.Compartido/Components/Cartera: CarteraSaldosAl, CarteraBarraLista, CarteraListado, CarteraExcelDialogo y
   CarteraEstadoCuentaVista.
   La página es una columna (.cxc-pantalla): encabezado fijo arriba y .cxc-cuerpo, donde solo la TABLA desplaza
   (encabezado y totales pegados) y la paginación queda al pie. .content-wrapper no scrollea: nada de max-height en vh.
   ══════════════════════════════════════════════════════════════════ */
.cxc-pantalla {
    --cxc-acento: #1b87a8;
    --cxc-acento-osc: #136a85;
    --cxc-acento-suave: #e6f3f8;
    --cxc-texto: #1e293b;
    --cxc-gris: #64748b;
    --cxc-linea: #e1e6ee;
    --cxc-linea-suave: #edf0f5;
    --cxc-fondo-cab: #f1f4f8;
    --cxc-t-porvencer: #22a06b;
    --cxc-t-30: #e6b422;
    --cxc-t-60: #ef8a2b;
    --cxc-t-90: #e5584a;
    --cxc-t-mas: #b42318;
    --cxc-t-credito: #64a0e6;
    display: flex; flex-direction: column; flex: 1 1 0; min-height: 0;
}
.cxc-oculto { display: none !important; }

/* ── Encabezado: la ruta con "Por cliente / Por documento" y Acciones a la derecha (2026-10-20); debajo, Saldos al +
      búsqueda + Excel + Registrar cobro en una fila. Los controles de la ruta van compactos: la fila no crece ── */
.cxc-ruta { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cxc-ruta .breadcrumb { margin-bottom: 0; }
.cxc-barra-lista { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cxc-ruta .cxc-modo__btn { padding: 5px 14px; font-size: 13.5px; }
.cxc-ruta .cxc-acciones__btn { padding: 5px 12px; font-size: 13.5px; }
.cxc-toolbar { display: flex; align-items: center; gap: 12px; }
.cxc-toolbar__busqueda { flex: 1 1 auto; min-width: 0; }
.cxc-toolbar .barra-busqueda-wrapper { margin-bottom: 0 !important; }
/* La caja de búsqueda ocupa lo que sobra de la fila: Excel y Registrar cobro quedan al final, como en el diseño */
.cxc-toolbar .searchbox-wrapper { flex: 1 1 auto; min-width: 240px; }
.cxc-header .bb-btn-primary { background: #4a90e2; border-color: #4a90e2; color: #fff; }
.cxc-header .bb-btn-primary:hover:not(:disabled) { background: #3a7fd0; border-color: #3a7fd0; }

.cxc-saldosal {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 3px 6px 3px 12px; border: 1px solid var(--cxc-linea); border-radius: 8px; background: #fff;
}
.cxc-saldosal__label { font-size: 13.5px; font-weight: 600; color: var(--cxc-acento-osc); white-space: nowrap; }
.cxc-saldosal__fecha { width: 132px; }
.cxc-saldosal .insi-dp-trigger { border-color: transparent !important; box-shadow: none !important; background: transparent !important; }
.cxc-rapido {
    padding: 3px 12px; border-radius: 999px; border: 1px solid #cfe3ec; background: #fff;
    color: var(--cxc-acento-osc); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cxc-rapido:hover { background: #f2f8fb; }
.cxc-rapido--activo { background: var(--cxc-acento-suave); border-color: #a9d3e3; }

/* ── Cuerpo ── */
.cxc-cuerpo {
    flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px;
    padding: 10px 3% 0; position: relative; overflow: hidden;
}
.cxc { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; color: var(--cxc-texto); }

.cxc-modo { display: inline-flex; border: 1px solid var(--cxc-linea); border-radius: 8px; overflow: hidden; background: #fff; }
.cxc-modo__btn { padding: 8px 16px; border: 0; background: #fff; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; }
.cxc-modo__btn + .cxc-modo__btn { border-left: 1px solid var(--cxc-linea); }
.cxc-modo__btn--activo { background: var(--cxc-acento-suave); color: var(--cxc-acento-osc); }

/* Menú de acciones: trabaja sobre la fila elegida y lo dice arriba */
.cxc-acciones { position: relative; }
.cxc-acciones__btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border: 1px solid var(--cxc-linea); border-radius: 8px; background: #fff;
    font-size: 14px; font-weight: 600; color: var(--cxc-texto); cursor: pointer;
}
.cxc-acciones__btn:hover { background: #f6f8fb; }
.cxc-menu-fondo { position: fixed; inset: 0; z-index: 1040; }
.cxc-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 1041; min-width: 300px; padding: 6px 0;
    background: #fff; border: 1px solid var(--cxc-linea); border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}
.cxc-menu__cabecera {
    padding: 6px 16px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--cxc-linea-suave);
    font-size: 12.5px; color: var(--cxc-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px;
}
.cxc-menu__item {
    display: block; width: 100%; padding: 8px 16px; border: 0; background: transparent;
    text-align: left; font-size: 14px; color: var(--cxc-texto); cursor: pointer;
}
.cxc-menu__item:hover:not(:disabled) { background: #f2f7fb; }
.cxc-menu__item:disabled { color: #a3adbb; cursor: default; }

/* ── Colores de antigüedad: la barra del estado de cuenta, los puntos de las columnas y las píldoras ── */
.cxc-barra__seg { height: 100%; }
.cxc-tramo--porvencer { background: var(--cxc-t-porvencer); }
.cxc-tramo--t30 { background: var(--cxc-t-30); }
.cxc-tramo--t60 { background: var(--cxc-t-60); }
.cxc-tramo--t90 { background: var(--cxc-t-90); }
.cxc-tramo--tmas { background: var(--cxc-t-mas); }
.cxc-tramo--credito { background: var(--cxc-t-credito); }
.cxc-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.cxc-nota { margin-left: auto; font-size: 12.5px; color: var(--cxc-gris); }

/* ── Tablas: solo esto desplaza; encabezado y totales quedan pegados ── */
.cxc-tabla-wrap {
    flex: 1 1 0; min-height: 160px; overflow: auto; position: relative;
    background: #fff; border: 1px solid var(--cxc-linea); border-radius: 10px;
}
.cxc-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; color: var(--cxc-texto); }
.cxc-tabla th {
    position: sticky; top: 0; z-index: 2; padding: 10px 12px; background: var(--cxc-fondo-cab);
    border-bottom: 1px solid var(--cxc-linea); font-weight: 700; text-align: left; white-space: nowrap;
}
.cxc-tabla td { padding: 9px 12px; border-bottom: 1px solid var(--cxc-linea-suave); background: #fff; white-space: nowrap; vertical-align: middle; }
.cxc-tabla tfoot td {
    position: sticky; bottom: 0; z-index: 2; background: var(--cxc-fondo-cab);
    border-top: 1px solid var(--cxc-linea); border-bottom: 0; font-weight: 700;
}
.cxc-tabla th.cxc-num { text-align: right; }
.cxc-tabla th.cxc-centro { text-align: center; }
.cxc-num { text-align: right; font-variant-numeric: tabular-nums; }
.cxc-centro { text-align: center; }
.cxc-gris { color: var(--cxc-gris); }
.cxc-rojo { color: #c0392b; }
.cxc-verde { color: #1a7f4f; }
.cxc-saldo { color: var(--cxc-acento); font-weight: 700; }
.cxc-ordenable { cursor: pointer; user-select: none; }
.cxc-ordenable:hover { color: var(--cxc-acento); }
.cxc-nombre { font-weight: 600; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.cxc-corto { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.cxc-largo { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

.cxc-fila { cursor: pointer; }
.cxc-fila:hover td { background: #f7fafc; }
.cxc-fila--abierta td { background: #f4f8fb; }
.cxc-fila--doc td { background: #fbfcfd; }
.cxc-fila--doc td:nth-child(2) { padding-left: 20px; }
.cxc-fila--marcada td { background: #eef7fb; }
.cxc-fila--sel td { background: #dcf0f7 !important; }

.cxc-c-exp { width: 40px; padding-left: 8px !important; padding-right: 0 !important; }
.cxc-exp {
    width: 22px; height: 22px; padding: 0; border: 1px solid #cfd8e3; border-radius: 4px;
    background: #fff; color: #475569; font-size: 12px; line-height: 1; cursor: pointer;
}
.cxc-exp:hover { border-color: var(--cxc-acento); color: var(--cxc-acento); }
.cxc-c-ir { width: 44px; text-align: center; }
.cxc-ir { padding: 4px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--cxc-acento); cursor: pointer; }
.cxc-ir:hover { background: var(--cxc-acento-suave); }

.cxc-doc { display: block; font-weight: 600; }
.cxc-doc__sub { display: block; max-width: 270px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--cxc-gris); }
.cxc-doc__despues { display: block; font-size: 11.5px; color: #1a7f4f; }

/* Atraso: el color del tramo. En pastilla en la fila del cliente y en "Por documento"; en texto dentro de un cliente abierto */
.cxc-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cxc-pill--ok { background: #e3f5ec; color: #1a7f4f; }
.cxc-pill--t30 { background: #fcf1d2; color: #8a6400; }
.cxc-pill--t60 { background: #fde7d4; color: #bf5a0a; }
.cxc-pill--t90 { background: #fbdedb; color: #b8352a; }
.cxc-pill--tmas { background: #b42318; color: #fff; }
.cxc-pill--credito { background: #e7f0fd; color: #1565c0; }
.cxc-texto--ok { color: #1a7f4f; font-weight: 600; }
.cxc-texto--t30 { color: #a07400; font-weight: 600; }
.cxc-texto--t60 { color: #c25d0b; font-weight: 600; }
.cxc-texto--t90 { color: #c0392b; font-weight: 600; }
.cxc-texto--tmas { color: #b42318; font-weight: 700; }
.cxc-texto--credito { color: #1565c0; font-weight: 600; }
.cxc-estado {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.cxc-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cxc-estado--ok { background: #e3f5ec; color: #1a7f4f; }
.cxc-estado--mal { background: #fbdedb; color: #b8352a; }
.cxc-estado--info { background: #e7f0fd; color: #1565c0; }

/* Columnas fijas al desplazar a lo ancho: el documento a la izquierda y la flecha a la derecha */
.cxc-tabla .cxc-fijo-izq { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--cxc-linea-suave); }
.cxc-tabla .cxc-fijo-izq2 { position: sticky; left: 40px; z-index: 1; box-shadow: inset -1px 0 0 var(--cxc-linea-suave); }
.cxc-tabla .cxc-fijo-der { position: sticky; right: 0; z-index: 1; box-shadow: inset 1px 0 0 var(--cxc-linea-suave); }
.cxc-tabla th.cxc-fijo-izq, .cxc-tabla th.cxc-fijo-izq2, .cxc-tabla th.cxc-fijo-der,
.cxc-tabla tfoot td.cxc-fijo-izq, .cxc-tabla tfoot td.cxc-fijo-izq2, .cxc-tabla tfoot td.cxc-fijo-der { z-index: 3; }
.cxc-c-chk { width: 40px; min-width: 40px; max-width: 40px; text-align: center; padding-left: 0 !important; padding-right: 0 !important; }
.cxc-tabla--titular .cxc-c-exp { min-width: 40px; max-width: 40px; }
.cxc-tabla--ec .cxc-corto { max-width: 170px; }

/* Pantallas medianas (o con el menú lateral abierto): celdas más compactas para que el saldo y el atraso se vean sin desplazar */
@media (max-width: 1440px) {
    .cxc-tabla th, .cxc-tabla td { padding-left: 8px; padding-right: 8px; }
    .cxc-nombre { max-width: 230px; }
    .cxc-corto { max-width: 170px; }
}
.cxc-c-chk input { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }

/* ── Paginación ── */
.cxc-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 12px; flex-wrap: wrap; }
.cxc-pager__izq, .cxc-pager__der { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #475569; }
.cxc-pager__centro { display: flex; align-items: center; gap: 4px; }
.cxc-pager__btn {
    padding: 6px 14px; border: 1px solid var(--cxc-linea); border-radius: 6px; background: #fff;
    font-size: 15px; font-weight: 600; color: var(--cxc-acento-osc); cursor: pointer;
}
.cxc-pager__num {
    min-width: 34px; padding: 6px 4px; border: 1px solid var(--cxc-linea); border-radius: 6px; background: #fff;
    font-size: 15px; font-weight: 600; color: var(--cxc-acento-osc); cursor: pointer;
}
.cxc-pager__num--activo { background: #1aa3d4; border-color: #1aa3d4; color: #fff; }
.cxc-pager__ext {
    width: 40px; height: 34px; border: 1px solid var(--cxc-linea); border-radius: 6px; background: #fff;
    color: var(--cxc-acento-osc); font-size: 12px; cursor: pointer;
}
.cxc-pager button:disabled { opacity: .45; cursor: default; }
.cxc-pager__rango { font-size: 15px; font-weight: 700; color: #e67e22; white-space: nowrap; }

.cxc-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; color: #94a3b8; text-align: center; }
.cxc-vacio i { font-size: 2rem; color: #a5d6a7; }
.cxc-vacio p { margin: 0; font-size: 13.5px; }
.cxc-error {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px;
    background: #fff; border: 1px dashed #f0b4b4; border-radius: 10px; color: #475569; text-align: center;
}
.cxc-error i { font-size: 1.6rem; color: #c62828; }
.cxc-error p { margin: 0; }

/* ── Botones de la página y del estado de cuenta ── */
.cxc-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--cxc-linea);
    border-radius: 8px; background: #fff; font-size: 14px; font-weight: 600; color: var(--cxc-texto); cursor: pointer; white-space: nowrap;
}
.cxc-btn:hover:not(:disabled) { background: #f6f8fb; }
.cxc-btn:disabled { opacity: .55; cursor: default; }
.cxc-btn--pdf { color: #b42318; border-color: #f0b6ae; }
.cxc-btn--pdf:hover:not(:disabled) { background: #fff5f4; }
.cxc-btn--wsp { color: #1a7f4f; border-color: #a6dbbf; }
.cxc-btn--wsp:hover:not(:disabled) { background: #f2fbf6; }
.cxc-btn--cobro { background: #4a90e2; border-color: #4a90e2; color: #fff; }
.cxc-btn--cobro:hover:not(:disabled) { background: #3a7fd0; }
.cxc-btn--cobro:disabled { background: #a9c9f0; border-color: #a9c9f0; opacity: 1; }
.cxc-btn--chico { padding: 4px 10px; font-size: 12.5px; }
.cxc-btn--excel { background: #1d7a45; border-color: #1d7a45; color: #fff; }
.cxc-btn--excel:hover:not(:disabled) { background: #17633a; border-color: #17633a; }

/* ── Diálogo del Excel (CarteraExcelDialogo): qué formato bajar ── */
.insi-modal.cxc-xls { width: 500px; max-width: calc(100vw - 24px); border-radius: 12px; color: var(--cxc-texto); }
.cxc-xls .insi-modal-title { font-weight: 700; color: #0f172a; }
.cxc-xls__intro { margin: 0 0 12px; font-size: 13.5px; color: #475569; }
.cxc-xls__opciones { display: flex; flex-direction: column; gap: 8px; }
.cxc-xls__opcion {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px;
    border: 1px solid var(--cxc-linea); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 400;
}
.cxc-xls__opcion:hover { border-color: #b8d9e6; }
.cxc-xls__opcion--activa { border-color: var(--cxc-acento); background: var(--cxc-acento-suave); }
.cxc-xls__opcion input { margin-top: 3px; flex-shrink: 0; accent-color: var(--cxc-acento); cursor: pointer; }
.cxc-xls__icono { width: 18px; margin-top: 2px; flex-shrink: 0; text-align: center; color: var(--cxc-acento-osc); }
.cxc-xls__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cxc-xls__texto b { font-size: 14px; font-weight: 700; }
.cxc-xls__texto small { font-size: 12.5px; color: var(--cxc-gris); }

/* ── Estado de cuenta ── */
.cxc-ec-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cxc-ec-corte { padding: 8px 12px; border: 1px solid var(--cxc-linea); border-radius: 8px; font-size: 13.5px; color: #475569; white-space: nowrap; }
.cxc-ec-corte b { color: var(--cxc-texto); }
.cxc-ec-botones { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cxc-cuerpo--ec { gap: 12px; }
.cxc-ec-card {
    display: flex; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; flex: 0 0 auto;
    padding: 16px 22px; background: #fff; border: 1px solid var(--cxc-linea); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.cxc-ec-card__izq { min-width: 0; }
.cxc-ec-card__rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cxc-acento); }
.cxc-ec-card__nombre { margin: 2px 0 2px; font-size: 21px; font-weight: 800; color: #0f172a; }
.cxc-ec-card__sub { font-size: 13.5px; color: #475569; }
.cxc-ec-barra-mini {
    display: flex; gap: 2px; width: 520px; max-width: 100%; height: 7px; margin: 10px 0 6px;
    border-radius: 4px; overflow: hidden; background: var(--cxc-linea-suave);
}
.cxc-ec-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #475569; }
.cxc-ec-leyenda .cxc-punto { width: 8px; height: 8px; margin-right: 5px; }
.cxc-ec-kpis { display: flex; align-items: flex-start; gap: 16px 32px; flex-wrap: wrap; }
.cxc-ec-kpi { display: flex; flex-direction: column; gap: 2px; }
.cxc-ec-kpi span { font-size: 13px; color: var(--cxc-gris); }
.cxc-ec-kpi b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cxc-ec-kpi--total b { font-size: 26px; color: var(--cxc-acento); }
.cxc-ec-kpi--total small { font-size: 11.5px; color: var(--cxc-gris); }

/* Los tres pasos del cobro, al pie */
.cxc-pasos {
    display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; flex: 0 0 auto;
    padding: 10px 2px 12px; border-top: 1px solid var(--cxc-linea);
}
.cxc-pasos__lista { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.cxc-paso { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #94a3b8; }
.cxc-paso__num {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: #cbd5e1; color: #fff; font-size: 12.5px; font-weight: 700;
}
.cxc-paso--activo { color: var(--cxc-acento); font-weight: 600; }
.cxc-paso--activo .cxc-paso__num { background: var(--cxc-acento); }
.cxc-paso--hecho { color: #1a7f4f; }
.cxc-paso--hecho .cxc-paso__num { background: #22a06b; }
.cxc-pasos__sep { width: 24px; height: 1px; background: #cbd5e1; }
.cxc-pasos__estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: #475569; }

/* En un teléfono la página entera desplaza; la tabla conserva su scroll con un alto máximo y la búsqueda toma su fila */
@media (max-width: 768px) {
    .cxc-toolbar { flex-wrap: wrap; }
    .cxc-saldosal { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; }
    /* La ruta arriba y, en su propio renglón, el modo y Acciones a todo el ancho */
    .cxc-barra-lista { flex: 1 1 100%; }
    .cxc-barra-lista .cxc-modo { flex: 1 1 auto; }
    .cxc-barra-lista .cxc-modo__btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
    .cxc-toolbar__busqueda { flex: 1 1 100%; }
    .cxc-header .bb-search-zone { flex-wrap: wrap; row-gap: 8px; }
    .cxc-header .searchbox-wrapper { flex: 1 1 100%; min-width: 0; }
    .cxc-header .bb-separator { display: none; }
    .cxc-cuerpo { overflow-y: auto; padding: 8px 12px 0; }
    .cxc { flex: 0 0 auto; }
    .cxc-tabla-wrap { flex: 0 0 auto; max-height: 70vh; }
    .cxc-nota { margin-left: 0; }
    .cxc-ec-botones { margin-left: 0; }
    .cxc-ec-kpis { gap: 12px 20px; }
    .cxc-pager { justify-content: center; }
}