/* Facturación, cobro de remisiones y recurrentes (modulos87.js): del reloj (240 px) al escritorio, en claro y en oscuro. Usa las variables del Administrativo. */

.f87-chips { align-self: end; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.f87-x { padding: 0 8px; min-height: 40px; min-width: 40px; }

#f87-form input, #f87-form select, #f87-cobro input, #f87-cobro select, #f87-pform input, #f87-pform select { min-height: 44px; max-width: 100%; }
#f87-form .campo, #f87-cobro .campo, #f87-pform .campo { min-width: 0; }
#f87-form button[type=submit], #f87-cobro button[type=submit], #f87-pform button[type=submit], .f87-pie .btn, .f87-cobros .btn, #f87-precios { min-height: 44px; }
#f87-form .fila-check input, .f87-cuales .fila-check input, .f87-rems .fila-check input { width: 22px; height: 22px; min-height: 0; flex: none; }
.f87-cuales { border: 1px solid var(--regla); border-radius: 12px; padding: 8px 14px 10px; margin: 8px 0 12px; min-width: 0; }
.f87-cuales legend { padding: 0 6px; font-weight: 650; }

/* una tarjeta por cliente en la prefacturación: se acomoda sola en pantallas chicas */
.f87-grupo { border: 1px solid var(--regla); border-radius: 12px; padding: 10px 14px 6px; margin: 10px 0; background: var(--blanco); min-width: 0; }
.f87-grupo > header { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.f87-grupo > header .nombre { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.f87-total { margin-left: auto; font-weight: 700; }
.f87-omitida { opacity: .72; }
.f87-problema { border-color: var(--jitomate); }
.f87-bloqueo, .f87-aviso, .f87-cobrado { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; font-size: .92rem; overflow-wrap: anywhere; }
.f87-bloqueo { background: color-mix(in srgb, var(--jitomate) 12%, transparent); color: var(--jitomate); }
.f87-aviso { background: var(--ambar-fondo); color: var(--ambar); }
.f87-cobrado { background: color-mix(in srgb, var(--hoja) 14%, transparent); color: var(--hoja); }
.f87-rojo { color: var(--jitomate); }
.f87-rems { list-style: none; margin: 8px 0 4px; padding: 0; }
.f87-rems li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; min-height: 44px; border-top: 1px solid var(--regla); }
.f87-rems li:first-child { border-top: 0; }
.f87-rems .fila-check { margin: 0; min-height: 44px; flex: 1 1 160px; min-width: 0; }
.f87-rems .fila-check span { overflow-wrap: anywhere; }
.f87-sin { margin: 10px 0 4px; border: 1px dashed var(--regla); border-radius: 12px; padding: 4px 14px 8px; }
.f87-sin > summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.f87-pie { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 12px; }
.f87-fallo { margin-top: 12px; }
.f87-fallo ul { margin: 6px 0 8px; padding-left: 20px; overflow-wrap: anywhere; }

/* cobros de la remisión */
.f87-cobros .franja { margin-bottom: 10px; }
.f87-lista-cobros { list-style: none; margin: 0 0 12px; padding: 0; }
.f87-lista-cobros li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--regla); min-width: 0; }
.f87-lista-cobros li:first-child { border-top: 0; }
.f87-cob-info { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.f87-cob-info small { color: var(--tinta-suave, inherit); opacity: .8; }
.f87-cob-importe { font-weight: 700; white-space: nowrap; }
.f87-lista-cobros .btn { flex: 0 0 auto; }
.f87-cancelado .f87-cob-info, .f87-cancelado .f87-cob-importe { opacity: .55; }
.f87-cancelado .f87-cob-importe { text-decoration: line-through; }
.f87-auto { margin-top: 16px; }