/* ==========================================================================
   CUENTAS POR COBRAR
   Todo el color sale de las variables del tema, salvo los tonos de alerta,
   que se construyen con color-mix sobre las mismas variables para que
   funcionen igual en claro y en oscuro.
   ========================================================================== */

/* El rojo de alerta necesita dos tonos: uno claro que se lea sobre el fondo
   oscuro, y uno oscuro que se lea sobre el claro. Con un solo tono el modo
   Light quedaba en 2,6 de contraste — medido en pantalla, no a ojo. */
:root { --cxc-alerta: #fb7185; --cxc-alerta-borde: #e11d48; }
[data-theme="light"] { --cxc-alerta: #be123c; --cxc-alerta-borde: #be123c; }

.cxc-head { flex-wrap: wrap; gap: 10px; }
.cxc-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cxc-toolbar select, .cxc-toolbar input { width: auto; }
/* Sin fondo propio los botones toman el del navegador, casi blanco, y en
   modo oscuro el texto claro queda invisible encima. */
.cxc-toolbar button { background: var(--panel2); color: var(--txt); border: 1px solid var(--border); }
.cxc-toolbar button:hover { background: var(--border); border-color: var(--title-color); }
.cxc-grow { flex: 1 1 220px; min-width: 0; }
.cxc-vacio { padding: 20px; text-align: center; color: var(--mut); font-size: 12.5px;
  border: 1px dashed var(--border); border-radius: 12px; }

/* ---------- Cifras de arriba */
.cxc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; margin-top: 4px; }
.cxc-kpi { padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel2); min-width: 0; }
.cxc-kpi span { display: block; color: var(--mut); font-size: 9.5px; text-transform: uppercase; letter-spacing: .35px; }
.cxc-kpi b { font-size: 16px; word-break: break-word; }
.cxc-kpi.is-money b { color: var(--ok); }
.cxc-kpi.is-debt { border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--panel2)); }
.cxc-kpi.is-debt b { color: var(--warn); }
.cxc-kpi.is-late { border-color: color-mix(in srgb, var(--cxc-alerta-borde) 45%, var(--border));
  background: color-mix(in srgb, var(--cxc-alerta-borde) 8%, var(--panel2)); }
.cxc-kpi.is-late b { color: var(--cxc-alerta); }

/* ---------- Antigüedad */
.cxc-aging { margin-top: 13px; }
.cxc-aging h4 { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 7px; }
.cxc-tramos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.cxc-tramo { position: relative; overflow: hidden; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel2); }
.cxc-tramo span { display: block; color: var(--mut); font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; }
.cxc-tramo b { font-size: 14px; position: relative; z-index: 1; }
.cxc-tramo i { position: absolute; left: 0; bottom: 0; height: 3px; }
.cxc-tramo.t0-30 i { background: var(--ok); }
.cxc-tramo.t31-60 i { background: var(--warn); }
.cxc-tramo.t61-90 i { background: var(--warn); }
.cxc-tramo.t90mas i { background: var(--cxc-alerta-borde); }

/* ---------- Fichas de cada cuenta */
.cxc-lista { display: grid; gap: 10px; margin-top: 14px; }
.cxc-card { padding: 12px 13px; border: 1px solid var(--border); border-radius: 13px;
  background: var(--table-body); display: grid; gap: 8px; min-width: 0; }
.cxc-card.estado-pagado { opacity: .72; }
.cxc-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.cxc-card-tit { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.cxc-card-tit b { font-size: 14px; word-break: break-word; }
.cxc-card-tit small { color: var(--mut); font-size: 10.5px; }
.cxc-chip { font-style: normal; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; background: var(--panel2); color: var(--mut); }
.cxc-chip.c-0-30 { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.cxc-chip.c-31-60 { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.cxc-chip.c-61-90 { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.cxc-chip.c-90\+ { background: color-mix(in srgb, var(--cxc-alerta-borde) 20%, transparent); color: var(--cxc-alerta); }
.cxc-card-acc { display: flex; gap: 5px; flex-wrap: wrap; }
.cxc-card-acc .btn-mini { padding: 4px 9px; font-size: 11px; }
.cxc-abonar { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)) !important; color: var(--ok) !important; }
.cxc-del { color: var(--cxc-alerta-borde) !important; border-color: color-mix(in srgb, var(--cxc-alerta-borde) 40%, var(--border)) !important; }
.cxc-del:hover { color: var(--cxc-alerta) !important; border-color: var(--cxc-alerta) !important; }

.cxc-cifras { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--mut); }
.cxc-cifras b { color: var(--txt); }
.cxc-cifras b.is-ok { color: var(--ok); }
.cxc-saldo b { color: var(--warn); font-size: 14px; }
.cxc-card.estado-pagado .cxc-saldo b { color: var(--ok); }

.cxc-riel { position: relative; height: 16px; border-radius: 999px; background: var(--panel2);
  border: 1px solid var(--border); overflow: hidden; }
.cxc-riel i { display: block; height: 100%; background: color-mix(in srgb, var(--ok) 55%, transparent); }
.cxc-riel span { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; color: var(--txt); }
.cxc-detalle { font-size: 11.5px; color: var(--mut); word-break: break-word; }
/* La venta sobre la que se hizo el acuerdo. Va antes del detalle escrito a
   mano porque es el dato duro: de aqui salio la deuda. */
.cxc-venta { font-size: 11.5px; color: var(--txt); word-break: break-word; }
/* La lista desplegable recorta el texto, asi que la venta elegida se repite
   completa debajo del selector. Ahi es donde se confirma que es la correcta. */
#cxcVentaAyuda.is-ligada { color: var(--txt); font-weight: 600; }
/* Cuando la venta cambio de precio pero el acuerdo estaba pactado a mano, no
   se pisa: se avisa aqui para que Cristian decida. */
.cxc-aviso { font-size: 11.5px; color: var(--txt); word-break: break-word;
  padding: 7px 10px; border-radius: 9px; border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, var(--panel2)); }

.cxc-abonos { display: grid; gap: 4px; padding-top: 7px; border-top: 1px solid var(--border);
  /* Sin tope, en una pantalla ancha la fila se estira y el boton de quitar
     queda a dos mil pixeles del nombre. Ahi nadie lo encuentra. */
  max-width: 620px; }
.cxc-abono { display: grid; grid-template-columns: 84px 110px minmax(0, 1fr) auto auto;
  gap: 8px; align-items: center; font-size: 11px; color: var(--mut); }
.cxc-abono b { color: var(--ok); text-align: right; }
/* Era de 24x20 px: demasiado chico para acertarle, y es la unica forma de
   deshacer un abono. Ahora dice lo que hace en vez de ser una equis suelta. */
.cxc-abdel { min-height: 28px; padding: 4px 10px; font-size: 11px; font-weight: 700;
  line-height: 1; background: var(--panel2); white-space: nowrap;
  border: 1px solid var(--border); border-radius: 8px; color: var(--mut); }
.cxc-abdel:hover { color: var(--cxc-alerta); border-color: var(--cxc-alerta); transform: none; box-shadow: none; }
/* Emite el recibo de caja de ESE pago. Va junto al abono y no arriba en la
   tarjeta porque un recibo documenta un pago concreto, no la cuenta entera. */
.cxc-recibo { min-height: 28px; padding: 4px 10px; font-size: 11px; font-weight: 700;
  line-height: 1; white-space: nowrap; border-radius: 8px; color: var(--cy);
  background: color-mix(in srgb, var(--cy) 10%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--cy) 45%, var(--border)); }
.cxc-recibo:hover { color: #04222a; background: var(--cy); border-color: var(--cy);
  transform: none; box-shadow: none; }
.cxc-recibo:disabled { opacity: .55; cursor: default; }

/* ---------- Cuadros */
.cxc-modal { width: 560px; max-width: 94vw; }
.cxc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cxc-span2 { grid-column: 1 / -1; }
.cxc-nota { margin-top: 10px; padding: 8px 11px; border-left: 3px solid var(--cy);
  border-radius: 8px; background: color-mix(in srgb, var(--cy) 7%, var(--panel2)); }
.cxc-abono-max { margin-top: 10px; padding: 8px 11px; font-size: 11.5px; color: var(--mut);
  border: 1px dashed var(--border); border-radius: 9px; }
.cxc-abono-max b { color: var(--txt); }

/* ---------- Cuadro del recibo de caja
   Es mas alto que los demas porque lleva la lista de componentes: se le deja
   scroll propio para que los botones de abajo siempre queden alcanzables. */
/* En escritorio se aprovecha mas ancho para los recibos complejos. El calculo
   resta un margen real en vez de depender de 98vw, que Safari puede medir con
   su viewport de escritorio aunque la pantalla fisica sea mucho mas angosta. */
/* Se combina con .modal para ganarle al ancho general de 460 px que aparece
   despues en index.html. Con una sola clase, el cuadro seguia angosto en PC. */
.modal.cxc-rec-modal { width: min(1320px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  box-sizing: border-box; max-height: 94vh; overflow-y: auto; }
.cxc-grid > .mrow { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.cxc-grid input, .cxc-grid select { min-width: 0; max-width: 100%; box-sizing: border-box; }
/* El selector nativo de fecha de Safari conserva un ancho minimo propio si
   solo recibe width:100%; las propiedades logicas lo obligan a ceder. */
#cxcRecFecha {
  display: block; width: 100% !important; inline-size: 100% !important;
  min-width: 0 !important; min-inline-size: 0 !important;
  max-width: 100% !important; max-inline-size: 100% !important;
  box-sizing: border-box;
}
.cxc-rec-cifras { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px;
  padding: 9px 12px; border: 1px dashed var(--border); border-radius: 10px;
  font-size: 11.5px; color: var(--mut); }
.cxc-rec-cifras b { margin-left: 5px; font-size: 14px; }
.cxc-rec-cifras .is-ok { color: var(--ok); }
.cxc-rec-cifras .is-debt { color: var(--warn); }

.cxc-rec-bloque { margin-top: 13px; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 11px; background: var(--panel2); }
.cxc-rec-head { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 4px; }
.cxc-rec-head b { font-size: 12px; color: var(--txt); }

/* Cantidad · descripcion · garantia · quitar. El precio individual de venta
   no se imprime ni participa en el recibo, por eso ya no ocupa una columna. */
.cxc-rec-fila { display: grid; grid-template-columns: 64px minmax(0, 1fr) 100px auto;
  grid-template-areas: "cant desc gar quitar";
  gap: 7px; align-items: end; width: 100%; max-width: 100%; min-width: 0;
  box-sizing: border-box; margin-top: 8px; }
/* El concepto de los extras ("Soporte Windows + BIOS + Drivers + Software")
   es lo mas largo del cuadro y tenia menos sitio que los precios. Ahora se
   lleva todo el ancho que sobra y los precios se quedan con lo justo.
   Los cuatro anchos fijos suman 386 px: con el cuadro a 1180 sobra sitio de
   verdad para el concepto y ya no se sale nada. */
.cxc-rec-extra { grid-template-columns: minmax(240px, 1fr) 100px 120px 120px auto;
  grid-template-areas: "desc gar antes ahora quitar"; }
.cxc-rec-fila input,.cxc-rec-fila textarea { width: 100%; min-width: 0; font-size: 11.5px; }
.cxc-rec-texto { min-height: 48px; resize: vertical; line-height: 1.4; }
.cxc-rec-control { display: grid; gap: 4px; min-width: 0; margin: 0; }
.cxc-rec-fila > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cxc-rec-control > span { color: var(--mut); font-size: 9.5px; font-weight: 700; }
.cxc-rec-cant { grid-area: cant; }
.cxc-rec-desc { grid-area: desc; }
.cxc-rec-gar { grid-area: gar; }
.cxc-rec-antes { grid-area: antes; }
.cxc-rec-ahora { grid-area: ahora; }
.cxc-rec-quitar { grid-area: quitar; align-self: end; min-height: 36px; }
.cxc-rec-cant input, .cxc-rec-gar input,
.cxc-rec-antes input, .cxc-rec-ahora input { text-align: center; }

.cxc-rec-png { margin-top: 9px; }
.cxc-rec-png img { max-width: 100%; max-height: 190px; border-radius: 9px;
  border: 1px solid var(--border); background: #fff; }

@media (max-width: 1180px) {
  /* Safari del iPhone puede calcular cerca de 980 px aunque la pantalla fisica
     mida 428 px. Por eso el modo seguro empieza antes: descripcion/concepto
     ocupan un renglon completo y nunca compiten con precios o botones. */
  .cxc-rec-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "desc desc" "cant gar" "quitar quitar"; }
  .cxc-rec-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "desc desc" "gar gar" "antes ahora" "quitar quitar"; }
  .cxc-rec-bloque { padding: 9px 8px; }
  .cxc-rec-fila { border-top: 1px dashed var(--border); padding-top: 7px; }
  .cxc-rec-quitar { width: 100%; min-height: 42px; }
  .cxc-rec-head { align-items: flex-start; flex-wrap: wrap; }
  .cxc-rec-head .btn-mini { margin-left: auto; max-width: 100%; }
}

/* ---------- Deuda en la ficha del cliente (sección Clientes) */
.cli-kpi.is-debt { border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.cli-kpi.is-debt b { color: var(--warn); }

/* ---------- Celular */
@media (max-width: 760px) {
  .modal.cxc-rec-modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); padding: 16px; }
  .cxc-toolbar { width: 100%; }
  .cxc-toolbar select, .cxc-toolbar input, .cxc-toolbar button { width: 100%; }
  .cxc-grow { flex: 1 1 100%; }
  .cxc-grid { grid-template-columns: 1fr; }
  .cxc-span2 { grid-column: auto; }
  /* iOS/Safari aplica al type=date un ancho intrinseco mayor que su columna.
     fill-available toma el ancho interior real del formulario y evita que
     sobresalga por la derecha, conservando el selector al tocarlo. */
  #cxcRecFecha {
    -webkit-appearance: none;
    appearance: none;
    width: -webkit-fill-available !important;
    max-width: -webkit-fill-available !important;
  }
  .cxc-cifras { gap: 4px 12px; }
  /* Los abonos se apilan: con cinco columnas no cabe ni la modalidad ni los
     dos botones. Fecha y monto arriba; modalidad, recibo y quitar debajo. */
  .cxc-abono { grid-template-columns: minmax(0, 1fr) auto; }
  .cxc-abono span:nth-of-type(2) { grid-column: 1 / -1; font-size: 10px; }
  .cxc-abono .cxc-recibo, .cxc-abono .cxc-abdel { grid-column: span 1; width: 100%; }
  /* iOS amplía la página si un campo enfocado mide menos de 16 px. */
  .cxc-rec-fila input, .cxc-rec-fila textarea, #cxcRecPng { font-size: 16px; }
}

/* ==========================================================================
   Marcos de los cuadros de FACTURA y de AJUSTES GENERALES DE FACTURA

   Sin esto, los campos de todos los productos salian uno detras de otro en
   una sola columna y no habia forma de saber donde terminaba un producto y
   empezaba el siguiente: se llenaba el "Precio" del equipo equivocado.
   Cada producto va ahora dentro de su propio marco, con su titulo.
   ========================================================================== */

/* El cuadro necesita ancho: con el ancho normal, los cinco campos de cada
   renglon se apilaban y el modal quedaba siendo una tira larguisima. */
.modal.cxc-modal-ancho {
  max-width: 980px;
  width: min(96vw, 980px);
}

.cxc-item-marco {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel2);
  padding: 10px 12px 12px;
  margin: 10px 0;
  /* Los campos se reparten en la fila y bajan solos cuando no caben, en vez
     de encogerse hasta quedar ilegibles en el celular. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 10px;
  align-items: end;
}

/* La cabecera ocupa la fila entera por encima de los campos. */
.cxc-item-cab {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px dashed var(--border);
}
.cxc-item-cab b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }

.cxc-item-marco label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--mut);
  margin: 0;
}
.cxc-item-marco input,
.cxc-item-marco textarea { width: 100%; }

/* La descripcion es la que mas texto lleva: ocupa el ancho entero para que se
   lea completa sin tener que arrastrar dentro del recuadro. */
.cxc-item-marco label:has(textarea) { grid-column: 1 / -1; }
.cxc-item-marco textarea { resize: vertical; min-height: 46px; }

/* Flechas para acomodar los productos del recibo.
   El recibo se imprime en el mismo orden en que estan en la lista, asi que
   mover una linea era antes borrarla y volver a escribirla entera. */
.cxc-rec-orden {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.cxc-rec-orden button {
  padding: 2px 8px;
  line-height: 1.1;
  font-size: 13px;
  min-width: 30px;
}
.cxc-rec-orden button:disabled { opacity: .3; cursor: default; }

@media (max-width: 760px) {
  /* En el celular las dos flechas van una al lado de la otra: apiladas
     estiraban la fila y dejaban el boton Quitar fuera de la pantalla. */
  .cxc-rec-orden { flex-direction: row; }
  .cxc-rec-orden button { flex: 1; }
}