/* Estilo moderno para las ventanas clásicas (flujo de ventas: pago, link de pago, cotización, contrato y factura, precios, calculadora, nuevo lead;
   y las demás: gasto, guía de envío, orden de pago, costos del proveedor, editar ventas, reseña, reactivar, correo, objeciones, configuración…). Solo cambia la apariencia: no toca ni el HTML ni la lógica. Mismo lenguaje de «Nueva venta» y del módulo Ventas. */
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) {
  background: rgba(16, 35, 63, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-box {
  border-radius: 28px; background: #fff; box-shadow: 0 40px 90px -30px rgba(16, 35, 63, 0.65), 0 0 0 1px rgba(15, 31, 51, 0.04);
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-head {
  padding: 24px 28px 18px; border-bottom: 0; background: linear-gradient(180deg, rgba(20, 184, 166, 0.08), transparent);
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-head h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.025em; }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-head button {
  width: 38px; height: 38px; border-radius: 12px; background: #EEF2F7; color: var(--sub); font-size: 1.2rem; line-height: 1; transition: background .15s, color .15s;
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-head button:hover { background: #E2E8F0; color: var(--ink); }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body { padding: 8px 28px 26px; }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body label:not(.check-row) {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; margin-bottom: 7px;
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  border: 1.5px solid transparent; background-color: #F3F6FA; border-radius: 14px; padding: 13px 15px; font-weight: 600; margin-bottom: 18px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body :is(input, select, textarea):hover { background-color: #ECF1F7; }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body :is(input, select, textarea):focus {
  background-color: #fff; border-color: #14B8A6; box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body input[type=file] {
  width: 100%; padding: 11px 13px; border-radius: 14px; background: #F3F6FA; border: 1.5px dashed rgba(15, 31, 51, 0.2); font-size: 0.8rem; margin-bottom: 18px;
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body .check-row {
  gap: 12px; padding: 13px 15px; border-radius: 14px; background: #F6F8FB; margin-bottom: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body .check-row:hover { background: #EEF2F7; }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body .check-row input[type=checkbox] { width: 20px; height: 20px; accent-color: #14B8A6; margin: 0; }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body .field-row { gap: 14px; }
#contrato-modal #ctr-resumen { background: linear-gradient(160deg, #10233F, #17335A) !important; color: #fff; border-radius: 18px !important; padding: 18px 20px !important; box-shadow: 0 18px 34px -20px rgba(16, 35, 63, 0.8); line-height: 1.55; }
#contrato-modal #ctr-resumen b, #contrato-modal #ctr-resumen strong { color: #5EEAD4; }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-foot {
  padding: 18px 28px 22px; border-top: 0; background: linear-gradient(0deg, #F6F8FB, #fff); gap: 12px;
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-foot button.primary {
  padding: 14px 28px; border-radius: 14px; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff; box-shadow: 0 14px 26px -12px rgba(20, 184, 166, 0.75); transition: transform .15s, filter .15s;
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-foot button.primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-foot button.primary:disabled { background: #CBD5E1; box-shadow: none; }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-foot button.cancel {
  padding: 13px 18px; border-radius: 14px; background: #EEF2F7; color: var(--ink); font-weight: 800; font-size: 0.84rem;
}
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-foot button.cancel:hover { background: #E2E8F0; }
#cot-modal [data-cot-tipo] { border: 0; background: #F3F6FA; border-radius: 12px; padding: 11px 18px; font-weight: 800; }
#cot-modal [data-cot-tipo].active { background: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(16, 35, 63, 0.8); }
@media (max-width: 560px) { :is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-box { border-radius: 24px; } :is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-body { padding: 4px 18px 20px; } :is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .modal-head { padding: 20px 18px 14px; } }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .cf-box { background: rgba(20, 184, 166, 0.08) !important; border: 0 !important; border-radius: 16px !important; }
:is(#pago-modal, #link-pago-modal, #cot-modal, #contrato-modal, #precios-modal, #calc-modal, #lead-modal, #obralista-modal, #cobros-modal, #reactivar-modal, #estudio-modal, #estudio-cliente-modal, #lc-modal, #correo-modal, #gasto-modal, #guia-modal, #op-modal, #cp-modal, #tabla-modal, #prod-modal, #resena-modal, #reactivacion-modal, #campana-modal, #email-modal, #documentos-modal, #objeciones-modal, #herramientas-modal, #config-modal) .cf-toggle-title { font-weight: 800; color: #0D9488; }

/* ── Registrar pago (módulo de pagos) ── */
#pagos-modal { background: rgba(16, 35, 63, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#pagos-modal .modal-box { border-radius: 28px; box-shadow: 0 40px 90px -30px rgba(16, 35, 63, 0.65), 0 0 0 1px rgba(15, 31, 51, 0.04); }
#pagos-modal .modal-head { padding: 24px 28px 18px; border-bottom: 0; background: linear-gradient(180deg, rgba(20, 184, 166, 0.08), transparent); }
#pagos-modal .modal-head h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.025em; }
#pagos-modal .modal-head button { width: 38px; height: 38px; border-radius: 12px; background: #EEF2F7; color: var(--sub); font-size: 1.2rem; line-height: 1; }
#pagos-modal .modal-body { padding: 6px 28px 20px; }
#pagos-modal .modal-body :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { border: 1.5px solid transparent; background-color: #F3F6FA; border-radius: 14px; font-weight: 600; transition: background-color .15s, border-color .15s, box-shadow .15s; }
#pagos-modal .modal-body :is(input, select, textarea):focus { background-color: #fff; border-color: #14B8A6; box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15); }
#pagos-modal .pg2-grupo { border: 0; border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 31, 51, 0.04), 0 12px 26px -20px rgba(15, 31, 51, 0.35); margin-bottom: 12px; }
#pagos-modal .pg2-fila { padding: 13px 16px; }
#pagos-modal .pg2-btn { border: 0; background: #EEF2F7; border-radius: 11px; padding: 9px 15px; font-weight: 800; transition: background .15s, transform .15s; } #pagos-modal .pg2-btn:hover { background: #E2E8F0; } #pagos-modal .pg2-btn:active { transform: scale(0.97); }
#pagos-modal .pg2-btn.primario { background: var(--ink); box-shadow: 0 10px 20px -12px rgba(16, 35, 63, 0.7); }
#pagos-modal .modal-foot { padding: 18px 28px 22px; border-top: 0; background: linear-gradient(0deg, #F6F8FB, #fff); }
#pagos-modal .modal-foot button.primary { padding: 14px 28px; border-radius: 14px; font-size: 0.86rem; font-weight: 800; background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff; box-shadow: 0 14px 26px -12px rgba(20, 184, 166, 0.75); }
#pagos-modal .modal-foot button.primary:disabled { background: #CBD5E1; box-shadow: none; }
#pagos-modal .modal-foot button.cancel { padding: 13px 18px; border-radius: 14px; background: #EEF2F7; color: var(--ink); font-weight: 800; }