/* ============================================================
   CxC / CxP — estilos compartidos (prefijo ar-*)
   ============================================================
   Cargado global desde plantilla.php. Usa los tokens del design
   system turing-v2 (var(--accent), --bg-surface, --border, etc.)
   con fallbacks para integrarse con el chrome v2.

   Objetivos UX:
   - Selección cómoda: fila completa clickeable, checkbox grande,
     columna de selección sticky (no se pierde con scroll lateral).
   - Sin dt-responsive en las tablas de selección: el botón "+" del
     plugin caía encima del checkbox en pantallas pequeñas. En su
     lugar: scroll horizontal contenido en .ar-table-wrap.
   - Barra de acción flotante con total seleccionado y botones
     Abonar/Liquidar siempre visibles (clave en móvil).
   ============================================================ */

/* ── Banner del cliente/proveedor activo ─────────────────────── */
.ar-active-entity{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; margin-top:10px;
  background:var(--accent-soft, #eef2ff);
  border:1px solid var(--border, #e5e7eb);
  border-radius:8px;
  font-weight:600; color:var(--fg-1, #111827);
  min-height:38px;
}
.ar-active-entity .ico{ color:var(--accent, #4f46e5); font-size:14px; }

/* Compat: #showCustomerClient ahora vive dentro del banner */
#showCustomerClient{
  border:0; background:transparent; padding:0; margin:0;
  font-weight:600; font-size:14px; color:inherit;
  width:100%; box-shadow:none; outline:none;
}

/* ── Wrapper de tabla: scroll horizontal + checkbox sticky ───── */
/* OJO: la barra flotante (.ar-sticky) deja un espacio inferior que el
   .table-wrap de v2 también consume. Forzamos overflow-x en el wrapper
   directo de la tabla y damos un floor de altura para que el contenido
   no se aplane contra la barra. */
.ar-table-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Indicador visual de "hay más a la derecha" en móviles (gradient
     que se desvanece). Funciona con bg-color de fallback. */
  background:
    linear-gradient(to right, var(--bg-surface, #fff) 30%, rgba(255,255,255,0)) 0 0/40px 100% no-repeat,
    linear-gradient(to right, rgba(255,255,255,0), var(--bg-surface, #fff) 70%) 100% 0/40px 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)) 0 0/14px 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.08)) 100% 0/14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.ar-table-wrap table{
  /* Min-width relajado: si el contenido cabe, no fuerza scroll. */
  min-width: 540px;
  margin: 0;
}
.ar-table-wrap th,
.ar-table-wrap td{
  white-space: nowrap;  /* evita romper "Factura" o números a varias líneas */
}
/* Columna de montos: ancho suficiente para 8 dígitos + decimales sin
   que el header empuje. tabular-nums alinea verticalmente. */
.ar-table-wrap td.ar-num,
.ar-table-wrap th.ar-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 14px;
}
/* Columna sticky de selección (checkbox): siempre visible al hacer
   scroll horizontal — el cliente no se pierde QUÉ está marcando. */
.ar-table-wrap th:first-child,
.ar-table-wrap td:first-child{
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-surface, #fff);
  box-shadow: 1px 0 0 var(--border, #e5e7eb);
  width: 44px; min-width: 44px;
  text-align: center;
}
.ar-table-wrap tr.ar-selected td:first-child{
  background: var(--accent-soft, #eef2ff) !important;
}

/* En el panel derecho (pagos / morosos) la primera columna NO es
   un checkbox — no sticky, no marcador. Subclase para optar a
   sticky solo donde aplica. */
.ar-table-wrap.no-sticky th:first-child,
.ar-table-wrap.no-sticky td:first-child{
  position: static; box-shadow: none;
  width: auto; min-width: 0;
  background: transparent;
  text-align: left;
}

/* ── Filas seleccionables ────────────────────────────────────── */
.ar-row-selectable{ cursor:pointer; transition:background .12s ease; }
.ar-row-selectable:hover{ background:var(--bg-hover, #f3f4f6); }
.ar-row-selectable.ar-selected td,
.ar-row-selectable.ar-selected td:first-child{
  background:var(--accent-soft, #eef2ff) !important;
}
.ar-row-disabled{ opacity:.55; cursor:not-allowed; background:var(--bg-sunken, #f3f4f6); }

/* Checkbox grande con accent — touch target generoso */
.ar-check{
  width:18px; height:18px; cursor:pointer;
  accent-color:var(--accent, #4f46e5);
  vertical-align:middle;
}
.ar-row-disabled .ar-check{ cursor:not-allowed; }

/* ── Barra de acción flotante ────────────────────────────────── */
.ar-sticky{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(150%);
  z-index:980; /* bajo los modales (1040+) */
  display:flex; align-items:center; gap:14px;
  padding:10px 16px;
  background:var(--bg-surface, #fff);
  border:1px solid var(--border, #e5e7eb);
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
  max-width:calc(100vw - 24px);
}
.ar-sticky.ar-visible{ transform:translateX(-50%) translateY(0); }
.ar-sticky-info{
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
  font-size:13px; color:var(--fg-2, #4b5563);
}
.ar-sticky-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  background:var(--accent, #4f46e5); color:#fff;
  border-radius:999px; font-weight:700; font-size:12px;
}
.ar-sticky-total{
  font-weight:700; font-size:15px; color:var(--fg-1, #111827);
  font-variant-numeric:tabular-nums;
}
.ar-sticky .btn{ white-space:nowrap; }

@media (max-width: 560px){
  .ar-sticky{ gap:8px; padding:8px 10px; bottom:10px; }
  .ar-sticky-info{ font-size:12px; }
  .ar-sticky-total{ font-size:13px; }
  .ar-sticky .btn{ padding:0 10px; font-size:12px; }
}

/* ── Toolbar del card (filtros) ──────────────────────────────── */
.ar-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100%; }
.ar-toolbar .select2-container{ flex:1 1 220px; min-width:200px; }
.ar-toolbar-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
@media (max-width: 700px){
  .ar-toolbar-actions{ margin-left:0; width:100%; }
  .ar-toolbar-actions .btn{ flex:1; }
}

/* Chip "Saldo total" del panel de pagos */
.ar-balance-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:8px;
  background:var(--bg-sunken, #f3f4f6);
  border:1px solid var(--border, #e5e7eb);
  font-size:12.5px; color:var(--fg-2, #4b5563);
}
.ar-balance-chip b{
  font-size:15px; color:var(--fg-1, #111827);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   Modal Abono (am-*) — modos distribuir / específico
   ============================================================ */
.am-mode{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px;
}
.am-mode-opt{
  flex:1 1 180px; display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border:1.5px solid var(--border, #e5e7eb);
  border-radius:10px; cursor:pointer; transition:all .12s ease;
  margin:0; font-weight:400;
}
.am-mode-opt:hover{ border-color:var(--fg-4, #9ca3af); }
.am-mode-opt input{ margin-top:3px; accent-color:var(--accent, #4f46e5); }
.am-mode-opt.am-active{
  border-color:var(--accent, #4f46e5);
  background:var(--accent-soft, #eef2ff);
}
.am-mode-opt b{ display:block; font-size:13px; color:var(--fg-1, #111827); }
.am-mode-opt small{ display:block; font-size:11.5px; color:var(--fg-3, #6b7280); line-height:1.35; margin-top:2px; }

.am-grid{ display:flex; gap:10px; flex-wrap:wrap; }
.am-grid .field{ flex:1 1 150px; display:flex; flex-direction:column; gap:4px; }
.am-grid .field label{ font-size:12px; font-weight:500; color:var(--fg-2, #4b5563); margin:0; }

.am-pending{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-radius:8px; font-size:13px;
  background:var(--danger-soft, #fee2e2); color:var(--danger-ink, #b91c1c);
  border:1px solid currentColor; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.am-pending.am-ok{
  background:var(--success-soft, #dcfce7); color:var(--success-ink, #15803d);
}

.am-detail{ overflow-x:auto; border:1px solid var(--border, #e5e7eb); border-radius:10px; }
.am-detail table{ width:100%; margin:0; border-collapse:collapse; min-width:430px; }
.am-detail th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--fg-3, #6b7280); padding:8px 10px;
  border-bottom:1px solid var(--border, #e5e7eb);
  background:var(--bg-sunken, #f9fafb);
}
.am-detail td{
  padding:7px 10px; border-bottom:1px solid var(--divider, #f3f4f6);
  font-size:13px; vertical-align:middle; font-variant-numeric:tabular-nums;
}
.am-detail tr:last-child td{ border-bottom:0; }
.am-detail .num{ text-align:right; }
.am-detail input.am-amount{
  width:110px; text-align:right; height:30px;
  padding:0 8px; border:1px solid var(--border-strong, #d1d5db);
  border-radius:6px; font-size:13px; font-variant-numeric:tabular-nums;
}
.am-detail input.am-amount:focus{
  outline:none; border-color:var(--accent, #4f46e5);
  box-shadow:0 0 0 3px rgba(79,70,229,.15);
}
.am-detail input.am-amount[readonly]{
  background:var(--bg-sunken, #f3f4f6); border-color:transparent; color:var(--fg-2, #4b5563);
}
.am-detail input.am-amount.am-err{
  border-color:var(--danger, #dc2626);
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}
.am-help{ font-size:11.5px; color:var(--fg-3, #6b7280); margin-top:6px; line-height:1.4; }

/* El modal de abono necesita más ancho para la tabla detalle */
@media (min-width: 768px){
  #modalSettle .modal-dialog{ width:640px; }
  #modalSettlement .modal-dialog{ width:560px; }
}

/* ============================================================
   Modal Liquidar (lm-*) — métodos de pago como tarjetas + vuelto
   condicional (solo Efectivo) y diferencia en vivo
   ============================================================ */
.lm-summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-radius:10px;
  background:linear-gradient(135deg, var(--accent-soft, #eef2ff), var(--bg-surface, #fff));
  border:1px solid var(--border, #e5e7eb);
}
.lm-summary .lab{ font-size:11.5px; color:var(--fg-3, #6b7280); text-transform:uppercase; letter-spacing:.04em; }
.lm-summary .val{
  font-size:22px; font-weight:700; color:var(--fg-1, #111827);
  font-variant-numeric:tabular-nums; line-height:1.1; margin-top:2px;
}
.lm-summary .count{
  font-size:11.5px; color:var(--fg-3, #6b7280);
}

.lm-methods{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:8px;
}
.lm-method{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:12px 8px; border:1.5px solid var(--border, #e5e7eb);
  border-radius:10px; cursor:pointer; transition:all .12s ease;
  background:var(--bg-surface, #fff); text-align:center; min-height:78px;
}
.lm-method:hover{ border-color:var(--fg-4, #9ca3af); background:var(--bg-hover, #f9fafb); }
.lm-method input{ position:absolute; opacity:0; pointer-events:none; }
.lm-method i{ font-size:22px; color:var(--fg-3, #6b7280); }
.lm-method span{ font-size:11.5px; font-weight:500; color:var(--fg-2, #4b5563); line-height:1.2; }
.lm-method.lm-active{
  border-color:var(--accent, #4f46e5); background:var(--accent-soft, #eef2ff);
}
.lm-method.lm-active i,
.lm-method.lm-active span{ color:var(--accent, #4f46e5); }

.lm-section-title{
  font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  font-weight:600; color:var(--fg-3, #6b7280); margin:0 0 8px;
}

.lm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lm-grid .field{ display:flex; flex-direction:column; gap:4px; }
.lm-grid .field label{ font-size:12px; font-weight:500; color:var(--fg-2, #4b5563); margin:0; }
.lm-grid .field input{ height:38px; }

/* Vuelto: animación de aparición/desaparición */
.lm-change-row{
  display:none; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  background:var(--success-soft, #dcfce7); color:var(--success-ink, #15803d);
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
}
.lm-change-row.lm-show{ display:flex; }
.lm-change-row .val{ font-size:15px; }

/* Indicador de diferencia "Paga con" - "Monto a liquidar". Tres estados:
   exacto, sobrepasa (con vuelto), falta (rojo). */
.lm-diff{
  font-size:12.5px; color:var(--fg-3, #6b7280); margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.lm-diff.lm-ok{ color:var(--success-ink, #15803d); }
.lm-diff.lm-short{ color:var(--danger-ink, #b91c1c); font-weight:600; }

/* En no-efectivo el "Paga con" se autocompleta y queda informativo */
.lm-grid .field input.lm-auto{
  background:var(--bg-sunken, #f9fafb);
  color:var(--fg-2, #4b5563);
}

@media (max-width: 480px){
  .lm-methods{ grid-template-columns:repeat(3, 1fr); }
  .lm-method{ padding:10px 4px; min-height:70px; }
  .lm-method i{ font-size:18px; }
  .lm-method span{ font-size:10.5px; }
  .lm-grid{ grid-template-columns:1fr; }
  .lm-summary .val{ font-size:18px; }
}

/* ============================================================
   Tabla de "Clientes morosos" — responsive nativo (sin DataTables
   responsive). En móvil colapsa a cards.
   ============================================================ */
.ar-overdue-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.ar-overdue-wrap table{ min-width:780px; }
.ar-overdue-wrap th, .ar-overdue-wrap td{ white-space:nowrap; }
.ar-overdue-wrap td.ar-num{ text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width: 640px){
  /* Card layout: cada fila se vuelve un bloque con etiquetas a la
     izquierda y valores a la derecha. Mucho más legible que scroll
     lateral cuando hay 8 columnas. */
  .ar-overdue-wrap table,
  .ar-overdue-wrap thead,
  .ar-overdue-wrap tbody,
  .ar-overdue-wrap tr,
  .ar-overdue-wrap th,
  .ar-overdue-wrap td{ display:block; }
  .ar-overdue-wrap thead{
    position:absolute; left:-9999px; top:-9999px;  /* oculto pero accesible */
  }
  .ar-overdue-wrap{ overflow-x:hidden; }
  .ar-overdue-wrap table{ min-width:0; }
  .ar-overdue-wrap tr{
    border:1px solid var(--border, #e5e7eb);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:10px;
    background:var(--bg-surface, #fff);
  }
  .ar-overdue-wrap td{
    border:0; padding:5px 0; white-space:normal;
    display:flex; justify-content:space-between; align-items:baseline;
    gap:10px; font-size:13px;
  }
  .ar-overdue-wrap td::before{
    content: attr(data-label);
    font-size:11px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--fg-3, #6b7280); font-weight:500;
    flex-shrink:0;
  }
  .ar-overdue-wrap td:first-child{
    /* nombre del cliente: full width, sin label */
    padding-bottom:8px; margin-bottom:6px;
    border-bottom:1px solid var(--divider, #f3f4f6);
    font-weight:600; font-size:14px;
  }
  .ar-overdue-wrap td:first-child::before{ display:none; }
  .ar-overdue-wrap td.ar-num{ text-align:right; }
}

/* ============================================================
   Ajustes de móvil para las tablas de selección (CxC / CxP)
   ============================================================ */
@media (max-width: 640px){
  /* Sticky bar: necesita despegar más del borde inferior porque el
     chatbot bubble y la safe area del teléfono compiten por espacio. */
  .ar-sticky{ bottom:14px; }

  /* Espacio extra debajo de las tablas para que la sticky bar no
     tape la última fila. */
  .ar-table-wrap{ padding-bottom:6px; }

  /* Toolbar: stack vertical en móvil para que el select y el
     "Seleccionar todos" no compitan. */
  .ar-toolbar{ flex-direction:column; align-items:stretch; }
  .ar-toolbar .select2-container,
  .ar-toolbar > label{ width:100%; }

  /* Page-head: los botones de PDF caben en móvil estirados. */
  .page-head{ flex-direction:column; align-items:stretch; gap:8px; }
  .page-head > div:last-child .btn{ flex:1; }

  /* Banner del cliente activo: tipografía más cómoda. */
  .ar-active-entity{ font-size:13px; padding:10px 12px; }
}

/* ── Layout en columnas: en celular las dos columnas se apilan ── */
@media (max-width: 991px){
  /* La separación entre los dos cards en stack vertical: respeta
     el aire del card-header sin pegarse. */
  .row > [class*="col-lg-"]{ margin-bottom:14px; }
  .row > [class*="col-lg-"]:last-child{ margin-bottom:0; }
}