/* ===== ESTILOS GENERALES ===== */
:root {
  /* Colores base usados por vistas nuevas (alineados con referencias) */
  --brand-blue: #1f6feb; /* ya usado en otras partes */
  --primary-color: var(--brand-blue);
  --danger-color: #e74c3c;
  --success-color: #27ae60;
  --border-color: #ddd;
  --dark-gray: #555;
  --warning-color: #f39c12;
  --info-color: #17a2b8;
  --text-muted: #777;
  --inactive-color: #7f8c9d;
  --pink-color: #e91e63;
  --cancel-color: #6c757d;
  --light-gray: #f4f7f6;
}
html {
  overflow-x: hidden;
}

body {
  font-family: 'Segoe UI', Roboto, Helvetica, sans-serif;
  background-color: #f8f9fb;
  margin: 0;
  padding: 30px;
  color: #2d2d2d;
  overflow-x: hidden;
  max-width: 100vw;
}

h1 {
  text-align: center;
  color: #2f3e46;
  font-size: 28px;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

/* Título principal con icono (coincide con referencia) */
#titulo-principal {
  color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ===== BARRA SUPERIOR ===== */
.barra-superior {
  width: 95%;
  margin: 0 auto 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.barra-izquierda,
.barra-derecha {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.multiriesgo-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.multiriesgo-label {
  font-size: 14px;
  font-weight: 600;
  color: #2d2d2d;
}

.multiriesgo-select {
  min-width: 200px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  color: #2d2d2d;
}

.multiriesgo-chip {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  background-color: #eef2ff;
  color: #3949ab;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

#busqueda {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  min-width: 250px;
  background-color: #fff;
  color: #2d2d2d;
}

.barra-derecha select,
#filtroDepartamento,
#filtroMarca {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  min-width: 120px;
  background-color: #fff;
  color: #2d2d2d;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  transition: border 0.3s ease;
}

#filtroDepartamento:hover,
#filtroMarca:hover {
  border-color: #3a86ff;
}

#btnAgregar, #btnBuscarCliente {
  padding: 10px 16px;
  font-size: 14px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.barra-superior-polizas {
  width: 100%;
  margin: 0 0 16px 0;
  gap: 14px;
}

.barra-superior-polizas .barra-izquierda {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.barra-superior-polizas .barra-derecha {
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
}

#btnAgregar:hover, #btnBuscarCliente:hover {
  background-color: #0056b3;
}

/* ===== Botón “Agregar Riesgo” igual que “Agregar Ramo” ===== */
#btnAgregarRiesgo {
  padding: 10px 16px;
  font-size: 14px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}
#btnAgregarRiesgo:hover {
  background-color: #0056b3;
}


/* ===== TABLA ===== */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 95%;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-align: center;
}

table:not(.data-table) th,
table:not(.data-table) td {
  border-right: none;
  border-left: none;
}

th, td {
  padding: 14px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

th {
  background-color: #3a86ff;
  color: white;
  font-weight: 600;
}

tr:nth-child(even) {
  background-color: #f4f6f9;
}

tbody tr:hover {
  background-color: #e6f0ff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* ===== BOTONES DE ACCIÓN ===== */
button.editar, button.eliminar, button.permisos, button.riesgos, button.bienes, button.btn--edit, button.btn--delete, button.acuerdo {
    padding: 7px 12px;
    margin: 0 5px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

button.bienes {
    background-color: #ff7675;
}
button.bienes:hover {
    background-color: #e17055;
}

button.editar, button.btn--edit, button.acuerdo {
  background-color: #00b894;
}
button.editar, button.btn--edit:hover, button.acuerdo:hover {
  background-color: #019875;
}

button.eliminar, button.btn--delete {
  background-color: #ef233c;
}
button.eliminar, button.btn--delete:hover {
  background-color: #d90429;
}

button.permisos, button.riesgos{
  background-color: #6c5ce7;
}
button.permisos:hover {
  background-color: #5a4bcf;
}

/* Botón para registro financiero desde notas */
.btn-financiero-caso {
  width: 30%;
  max-width: 320px;
  min-width: 240px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--brand-blue), #0f5bd1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(31, 111, 235, 0.25);
  transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-financiero-caso:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 14px rgba(31, 111, 235, 0.3);
}

.btn-financiero-caso:active {
  transform: translateY(1px);
}

.btn-financiero-caso:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

/* ===== COMISIONES ASEGURADORAS X RAMOS ===== */
.commission-page {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  padding: 28px 24px 32px;
}

.commission-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8eef5;
  color: #243b53;
  font-size: 30px;
  justify-content: flex-start;
}

.commission-title i {
  color: var(--brand-blue);
}

.commission-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.commission-tabs-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid #d9e2ec;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.commission-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

.commission-search-input {
  min-width: 340px;
  padding: 10px 14px;
  border: 1px solid #cbd2d9;
  border-radius: 10px;
  font-size: 14px;
  color: #243b53;
  background: #fff;
  box-sizing: border-box;
}

.commission-search-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}

.commission-tab-btn {
  border: none;
  background: transparent;
  color: #52606d;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.commission-tab-btn:hover:not(:disabled) {
  color: var(--brand-blue);
  background: #eef6ff;
}

.commission-tab-btn.active {
  color: var(--brand-blue);
  background: #eef6ff;
  box-shadow: inset 0 0 0 1px rgba(31, 111, 235, 0.15);
}

.commission-tab-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.commission-tab {
  display: none;
}

.commission-tab.active {
  display: block;
}

.commission-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.commission-subtitle {
  margin: 0;
  font-size: 15px;
  color: #52606d;
}

.commission-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.commission-btn.primary {
  background: var(--brand-blue);
  color: #fff;
}

.commission-btn.primary:hover {
  background: #165dca;
}

.commission-btn.secondary {
  background: #eaf1f8;
  color: #334e68;
}

.commission-btn.secondary:hover {
  background: #dce7f4;
}

.commission-grid {
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  overflow: visible;
  background: #fff;
}

.commission-table-wrap {
  overflow: visible;
  overflow-y: visible;
  position: relative;
  border-radius: inherit;
}

.commission-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  margin: 0;
  box-shadow: none;
  overflow: visible;
}

.commission-table thead tr {
  background: var(--brand-blue);
}

.commission-table th {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 16px;
  text-align: left;
  white-space: normal;
  max-width: none;
  background: var(--brand-blue);
}

.commission-table td {
  padding: 14px 16px;
  border-top: 1px solid #e8eef5;
  border-bottom: none;
  font-size: 14px;
  vertical-align: middle;
  white-space: normal;
  max-width: none;
}

.commission-table tbody tr:nth-child(even) {
  background: #fff;
}

.commission-table tbody tr:hover {
  background: #f8fbff;
}

.commission-table .text-center {
  text-align: center;
}

.commission-input {
  width: 100%;
  min-width: 112px;
  border: 1px solid #cbd2d9;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: right;
  font-size: 14px;
  box-sizing: border-box;
}

.commission-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.14);
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #52606d;
}

.contact-block span:first-child {
  white-space: nowrap;
}

.contact-block span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contact-block i {
  width: 14px;
  color: var(--brand-blue);
}

.aseg-name {
  font-weight: 700;
  color: #243b53;
}

.matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.matrix-company {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.matrix-company h2 {
  margin: 0;
  font-size: 22px;
  color: var(--brand-blue);
}

.matrix-company p {
  margin: 0;
  color: #52606d;
  font-size: 14px;
}

.matrix-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.empty-state {
  padding: 48px 18px;
  text-align: center;
  color: #7b8794;
  font-size: 15px;
}

.empty-state i {
  display: block;
  font-size: 28px;
  margin-bottom: 10px;
  color: #9fb3c8;
}

.toast-inline {
  position: fixed;
  right: 28px;
  bottom: 28px;
  background: #243b53;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-inline.mostrar {
  opacity: 1;
  transform: translateY(0);
}

.toast-inline.error {
  background: #c0392b;
}

.toast-inline.success {
  background: #168a4a;
}

.toast-inline.warning {
  background: #b7791f;
}

.toast-inline.info {
  background: #243b53;
}

.hidden-k {
  display: none !important;
}

/* Mantener visibles los encabezados en Comisiones Aseguradoras por Ramos */
#tablaListadoComisionAseguradoras,
#tablaMatrizComisionAseguradoras {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
}

#tablaListadoComisionAseguradoras thead th,
#tablaMatrizComisionAseguradoras thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background-color: #3a86ff !important;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.08), 0 3px 8px rgba(17, 24, 39, 0.12);
}

@media (max-width: 1100px) {
  .commission-page {
    padding: 22px 16px 24px;
  }

  .commission-tabs-row {
    align-items: stretch;
  }

  .commission-search-bar {
    width: 100%;
    margin-left: 0;
  }

  .commission-search-input {
    min-width: 0;
    flex: 1 1 260px;
  }

  .commission-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
  }
}

.pulse-once {
  animation: pulse-once 0.8s ease;
}

@keyframes pulse-once {
  0% { box-shadow: 0 0 0 0 rgba(31,111,235,0.35); }
  70% { box-shadow: 0 0 0 14px rgba(31,111,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,111,235,0); }
}


/* ===== MODALES ===== */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.oculto {
  display: none;
}

.modal-contenido {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  width: 95%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

/* ===== Icono “X” de cierre en esquina ===== */
.modal-contenido {
  position: relative;  /* necesario para posicionar la X */
}

.close-modal {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.close-modal:hover {
  background-color: #d90429;
  color: white;
}

.modal input,
.modal textarea,
#comboDepartamento,
#comboCargo,
#comboRol, 
#nombreDepartamento,
#nombreCargo,
#descripcion,
#nombre,
#siglas,
#nombreRol {
  width: 100%;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.modal input,
.modal select,
.modal textarea {
  margin: 6px 0;
}

#descripcion {
  min-height: 100px;
  resize: vertical;
}

.botones-modal {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.botones-modal button {
  width: 45%;
  padding: 11px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  border: none;
}

#btnConfirmarEliminar, #btnGuardarPermisos, #btnCancelarFacturar, #btnConfirmarCambio, #btnConfirmarAnularAcuerdo, #btnConfirmarAnularCobro {
  background-color: #d90429;
  color: white;
}

#btnCancelarEliminar, #btnCancelarPermisos, #btnCerrarAdvertencia, #btnConfirmarFacturar, #btnCancelarCambio, #btnCancelarAnularAcuerdo, #btnCancelarAnularCobro {
  background-color: #6c757d;
  color: white;
}

#btnConfirmarEliminar:hover, #btnGuardarPermisos:hover, #btnCancelarFacturar:hover, #btnConfirmarCambio:hover, #btnConfirmarAnularAcuerdo:hover, #btnConfirmarAnularCobro:hover {
  background-color: #a80321;
}

#btnCancelarEliminar:hover, #btnCancelarPermisos:hover, #btnCerrarAdvertencia:hover, #btnConfirmarFacturar:hover, #btnCancelarCambio:hover, #btnCancelarAnularAcuerdo:hover, #btnCancelarAnularCobro:hover{
  background-color: #495057;
}

#modalConfirmarCambio .modal-contenido {
  max-width: 560px;
}

#modalConfirmarCambio .cambio-modal-header {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  color: #333;
}

#modalConfirmarCambio .cambio-modal-header i {
  display: none;
}

#modalConfirmarCambio .cambio-modal-header h2 {
  margin: 0 36px 12px 0;
  color: #333;
  font-size: 1.15rem;
}

#modalConfirmarCambio #btnCerrarModalCambio {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #333;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

#modalConfirmarCambio #btnCerrarModalCambio:hover {
  background-color: #d90429;
  color: #fff;
}

#modalConfirmarCambio .cambio-modal-body {
  padding: 0;
  color: #333;
}

#modalConfirmarCambio .cambio-modal-warning {
  display: none;
}

#modalConfirmarCambio .cambio-confirmacion-texto,
#modalConfirmarCambio #txtResumenCambio {
  margin: 0;
  line-height: 1.5;
  color: #333;
}

#btnCancelar {
  padding: 10px 16px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.modal-advertencia p,
#modalEliminar p {
  text-align: center;
  font-size: 15px;
  margin-top: 10px;
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #3a86ff;
  color: #fff;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.toast.toast-info {
  background-color: var(--primary-color, #3498db);
}

.toast.toast-success {
  background-color: var(--success-color, #27ae60);
}

.toast.toast-error {
  background-color: var(--danger-color, #e74c3c);
}

.toast.toast-warning {
  background-color: var(--warning-color, #f39c12);
}

.toast.mostrar {
  opacity: 1;
  transform: translateY(0);
}

/* ===== ESTILOS CAMPOS CON ERROR DE VALIDACIÓN ===== */
.campo-error {
  border-color: var(--danger-color, #e74c3c) !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
}

.campo-error:focus {
  border-color: var(--danger-color, #e74c3c) !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3) !important;
  outline: none;
}

select.campo-error {
  border-color: var(--danger-color, #e74c3c) !important;
  background-color: #fff5f5 !important;
}

/* Animación para campos con error */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.campo-error-animado {
  animation: shake 0.4s ease-in-out;
}

/* Estilo para toast con múltiples errores */
.toast.error {
  white-space: pre-line;
  text-align: left;
  max-width: 450px;
  line-height: 1.5;
}

/* ===== CLASES GENERALES ===== */
.oculto {
  display: none;
}

/* ===== ESTILOS MODAL EXCLUSIÓN DE BIEN ===== */
.modal-contenido-exclusion {
  background-color: white;
  padding: 30px 40px;
  border-radius: 12px;
  width: 95%;
  max-width: 1600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  box-sizing: border-box;
  position: relative;
}

.modal-contenido-exclusion h2 {
  color: #2c3e50;
  font-size: 1.9em;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.context-header-exclusion {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  border: 1px solid #ddd;
}

.client-name-exclusion {
  margin-bottom: 15px;
  font-size: 1.1em;
}

.poliza-datos-basicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.dato-basico {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label-exc {
  font-size: 0.85em;
  color: #666;
  font-weight: 600;
}

.field-value-exc {
  font-size: 1em;
  color: #2d2d2d;
  font-weight: 500;
}

.form-row-exclusion {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.form-section-exclusion {
  flex: 1;
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  min-width: 400px;
}

.form-section-exclusion.bienes-section {
  flex: 2;
  min-width: 600px;
}

.form-section-exclusion.credito-section {
  flex: 1;
  min-width: 450px;
  border-color: #ef233c;
}

.form-section-exclusion h4 {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  color: #3a86ff;
  font-size: 1.1em;
}

.tabla-bienes-exclusion-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.tabla-bienes-exclusion {
  width: 100%;
  border-collapse: collapse;
}

.tabla-bienes-exclusion th,
.tabla-bienes-exclusion td {
  padding: 8px 10px;
  font-size: 0.9em;
  border-bottom: 1px solid #f0f0f0;
}

.tabla-bienes-exclusion thead th {
  background-color: #3a86ff;
  color: white;
  border-bottom: none;
  font-weight: 500;
}

.tabla-bienes-exclusion tbody tr {
  background-color: #fff;
}

.tabla-bienes-exclusion tbody tr:hover {
  background-color: #f0f0f0;
}

.tabla-bienes-exclusion .col-select-exc {
  width: 40px;
  text-align: center;
  padding: 5px;
}

.tabla-bienes-exclusion .col-valor-exc,
.tabla-bienes-exclusion .col-prima-exc,
.tabla-bienes-exclusion .col-monto-exc {
  text-align: right;
}

.form-row-exc {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.form-group-exc {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 150px;
}

.form-group-exc.compact-exc,
.form-group-exc#isc-acreditar-group-exc {
  min-width: 0;
}

.form-group-exc.three-col-exc {
  flex: 1 1 0px;
  min-width: 130px;
}

.form-group-exc.col-25-exc {
  flex: 1;
  max-width: 40%;
  min-width: 100px;
}

.form-group-exc.col-75-exc {
  flex: 3;
  max-width: 60%;
  min-width: 280px;
}

.form-group-exc label {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: #555;
}

.form-group-exc label .required {
  color: #ef233c;
  font-size: 1.2em;
  margin-left: 2px;
}

.form-group-exc input,
.form-group-exc select,
.form-group-exc textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1em;
}

.form-group-exc textarea {
  resize: vertical;
  min-height: 80px;
}

.highlight-credit-exc {
  font-size: 1.2em;
  font-weight: 700;
  color: #ef233c;
  background-color: #fdedec;
  border: 2px solid #ef233c;
  text-align: right !important;
}

.highlight-credit-exc.new-premium-exc {
  color: #27ae60;
  background-color: #e8f8ef;
  border-color: #27ae60;
}

.form-actions-exc {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.btn-danger-exc {
  background-color: #ef233c;
  color: white;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-danger-exc:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-cancelar-exc {
  background-color: #6c757d;
  color: white;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-cancelar-exc:hover {
  background-color: #495057;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 768px) {
  .table-responsive:not(.renov-card .table-wrapper) {
    overflow-x: visible;
  }

  table, thead, tbody, th, td, tr {
    display: table;
    width: 100%;
  }

  td::before {
    content: "";
  }
  
  .modal-contenido-exclusion {
    padding: 20px;
    max-width: 95%;
  }
  
  .form-section-exclusion {
    min-width: 100%;
  }
  
  .poliza-datos-basicos {
    grid-template-columns: 1fr;
  }
}

/* ===== PAGINACIÓN ===== */
.paginacion {
  margin-top: 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.paginacion .btn-pagina {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
}

.paginacion .btn-pagina:hover:not(:disabled) {
  background-color: #dcdcdc;
}

.paginacion .btn-pagina.activa {
  background-color: #3a86ff;
  color: white;
  font-weight: bold;
}

.paginacion .btn-pagina:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ===== ESTADO Y RADIO BUTTONS ===== */
.estado-radio-group {
  margin-top: 8px;
}

.radio-options {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333;
}

.estado-radio-group label strong {
  font-size: 14px;
  color: #2d2d2d;
}

/* ===== PERMISOS (solo roles) ===== */
#modalPermisos .modal-contenido {
  background-color: #fff;
  padding: 32px 28px 26px 28px;
  border-radius: 16px;
  width: 100%;
  height: 78vh; /* ajusta a tu gusto */
  max-height: 95vh;
  max-width: 1100px;
  min-height: 110px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);

  display: flex;
  flex-direction: column;
}

#modalPermisos #formPermisos {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#modalPermisos h2 {
  font-size: 22px;
  margin-bottom: 18px;
  color: #2d2d2d;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#modalPermisos .tabla-permisos-scroll {
  flex: 1;
  overflow-y: auto;
}

.tabla-permisos {
  width: 100%;
  border-collapse: collapse;
}

.tabla-permisos th,
.tabla-permisos td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
}

.tabla-permisos th {
  background-color: #3a86ff;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-permisos td:first-child {
  text-align: center;
  font-weight: 500;
}

.acciones-marcado {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

#btnMarcarTodo, #btnDesmarcarTodo {
  padding: 7px 16px;
  background: #f1f3fa;
  border: 1px solid #3a86ff;
  border-radius: 6px;
  color: #3a86ff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

#btnMarcarTodo:hover, #btnDesmarcarTodo:hover {
  background: #3a86ff;
  color: white;
}

#btnGuardarPermisos {
  background-color: #3a86ff;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 140px;
}

#btnGuardarPermisos:hover {
  background-color: #2f6ee2;
}

#btnCancelarPermisos {
  background-color: #6c757d;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 140px;
}

#btnCancelarPermisos:hover {
  background-color: #495057;
}

.acciones-modal {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 30px; /* puedes ajustar esto para separar de la tabla */
}


/* Ajustes específicos para descripción */
tbody td:nth-child(2) {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

#modalConfirmar .modal-contenido {
  max-width: 400px;
  padding: 24px 20px;
  text-align: center;
  margin: 0 auto;
}

#modalConfirmarFacturar {
  z-index: 1300;
}

#modalConfirmarFacturar .modal-contenido {
  max-width: 420px;
  padding: 24px 20px;
  text-align: center;
  margin: 0 auto;
}

#modalConfirmar h3,
#modalConfirmar p {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
  color: #2d2d2d;
}

#modalConfirmar .botones-modal {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

#modalConfirmar .botones-modal button {
  width: auto;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 6px;
  font-weight: 600;
}

label {
  margin-bottom: 2px;
  display: block;
  font-size: 13px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-bottom: 20px;
}

/* MODAL DE RESTRICCIONES*/

#modalRestricciones .modal-contenido {
  background-color: #fff;
  padding: 32px;
  border-radius: 16px;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

#modalRestricciones h2 {
  font-size: 24px;
  margin-bottom: 28px;
  text-align: center;
  color: #2d2d2d;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Grilla de 3 columnas con espacio uniforme */
#formRestricciones .form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 30px;
  margin-bottom: 24px;
}

/* Estilo de labels */
#formRestricciones label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  color: #333;
}

/* Estilo de selects */
#formRestricciones select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  color: #2d2d2d;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Botones */
#modalRestricciones .acciones-modal {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 12px;
}

#btnGuardarRestricciones,
#modalRestricciones .acciones-modal button[type="button"] {
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#btnGuardarRestricciones {
  background-color: #3a86ff;
  color: white;
}

#btnGuardarRestricciones:hover {
  background-color: #2f6ee2;
}

#modalRestricciones .acciones-modal button[type="button"] {
  background-color: #6c757d;
  color: white;
}

#modalRestricciones .acciones-modal button[type="button"]:hover {
  background-color: #495057;
}

/* Responsivo */
@media (max-width: 1024px) {
  #formRestricciones .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #formRestricciones .form-grid {
    grid-template-columns: 1fr;
  }
}

/* boton de restricciones */
button.restricciones {
  padding: 7px 12px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  
  color: #2d2d2d;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

button.restricciones:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* informacion del usuario modal restricciones */
#infoUsuarioRestricciones {
  margin-bottom: 20px;
  background-color: #f1f3f7;
  padding: 14px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#infoUsuarioRestricciones p {
  margin: 6px 0;
  font-size: 14px;
  color: #333;
}

/* checkboxes del modal restricciones*/
.grupo-checkboxes {
  background-color: #f1f3f7;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: fit-content;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #2d2d2d;
}

.checkbox-label {
  white-space: nowrap;
}

.form-checkbox-group input[type="checkbox"] {
  transform: scale(1.1);
  cursor: pointer;
}

.form-checkbox-group label.checkbox-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #2d2d2d;
}

/*opcion vacia de los selects de restricciones*/
select option.opcion-vacia {
  color: #999;
}

select:has(option.opcion-vacia:checked) {
  color: transparent;
  text-shadow: 0 0 0 #000; /* Esto mantiene el texto editable pero visualmente en blanco */
}

/* Estilo uniforme para los selects del modal ramos */
.modal-contenido select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  margin: 6px 0;
  background-color: #fff;
  box-sizing: border-box;
}

/* ===== GRUPO DE PORCENTAJES EN LÍNEA ===== */
#formRamo .grupo-porcentajes {
  grid-column: span 2; /* Ocupa el ancho completo */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  gap: 16px; /* Espacio entre inputs */
  margin-bottom: 10px;
}

/* Ajuste para labels de porcentajes */
#formRamo .grupo-porcentajes label {
  margin-bottom: 6px;
  font-size: 13px;
}

/* ===== CHECKBOXES EN COLUMNA - VERSIÓN CORREGIDA ===== */
.form-checkbox-group {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: #f8f9fb;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  margin: 8px 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #2d2d2d;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* ===== MODAL RIESGOS – TAMAÑO PERSONALIZADO ===== */
#modalRiesgos .modal-contenido {
  width: 90vw !important;        /* Ocupa el 80% del ancho de la ventana */
  max-width: 1300px !important;  /* Ancho máximo en píxeles */
  height: 80vh !important;       /* Ocupa el 80% de la altura de la ventana */
  max-height: 800px !important;  /* Altura máxima en píxeles */
  overflow-y: auto;   /* Scroll vertical si el contenido rebasa */
}

/* ===== AJUSTES ESPECÍFICOS PARA EL MODAL DE RIESGOS ===== */
#modalRiesgos .modal-contenido {
  /* Aumenta el ancho del modal */
  width: 125vw;         /* ahora ocupa hasta 95% de la ventana */
  max-width: 1300px;   /* máximo 1200px */
  /* mantén el resto igual */
}


/* Asegura que la barra y la tabla compartan la misma anchura */
#modalRiesgos .barra-superior {
  width: 95%;          /* igual que tu tabla */
  margin: 0 auto 10px; /* centrarla y algo de separación abajo */
}

/* Controles en línea, sin saltos */
#modalRiesgos .barra-superior .barra-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* El input de búsqueda ocupa el espacio disponible */
#modalRiesgos .barra-superior .barra-derecha #busquedaRiesgos {
  flex: 1 1 200px;     /* crece hasta ocupar todo, pero no menos de 200px */
  min-width: 200px;
}

/* El select mantiene un ancho fijo */
#modalRiesgos .barra-superior .barra-derecha #filtroEstadoRiesgos {
  flex: 0 0 150px;     /* siempre 150px de ancho */
  min-width: 150px;
}

/* ===== BOTÓN ELIMINAR EN MODAL DE RIESGO ===== */
#btnConfirmarEliminarRiesgo {
  background-color: #ef233c;      /* mismo rojo que los botones .eliminar */
  color: white;
  border: none;
  border-radius: 6px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#btnConfirmarEliminarRiesgo:hover {
  background-color: #d90429;      /* tono hover igual al de ramos */
}

/* ===== ALINEAR DATOS DE TABLAS A LA IZQUIERDA ===== */
table tbody td {
  text-align: left;       /* fuerza alineación izquierda */
  padding-left: 12px;     /* pequeña sangría para “indentar” */
}

/* Opcional: si quieres que también los encabezados estén a la izq. */
table thead th {
  text-align: left;
  padding-left: 12px;
}

/* ==== INDENTAR CELDAS DE DATOS, EXCLUYENDO LA COLUMNA DE ACCIONES ==== */
table tbody td:not(:last-child) {
  text-align: left;      /* alineación a la izquierda */
  padding-left: 12px;    /* sangría para el “indentado” */
}

/* Mantener la columna de acciones centrada */
table tbody td:last-child {
  text-align: left;
  padding-left: 0;       /* sin sangría */
}

#modalRiesgos .modal-contenido table .inpNota {
  width: 100%;
  box-sizing: border-box;
  min-width: 200px; /* opcional, para anchos muy grandes */
}

/* En tu CSS global (crudStyles.css) */
#modalRiesgos .modal-contenido input.inpCob,
#modalRiesgos .modal-contenido input.inpPorDed,
#modalRiesgos .modal-contenido input.inpMonCob,
#modalRiesgos .modal-contenido input.inpMonDed {
  min-width: 120px;     /* más espacio mínimo */
  max-width: 180px;     /* límite razonable para no romper la tabla */
  width: auto;          /* deja que se adapte */
  text-align: right;    /* números alineados a la derecha */
  padding: 6px 8px;     /* más cómodo para leer */
 /* font-family: monospace; x opcional: hace que los números se alineen mejor */
}
/* Observaciones ocupa el resto */
#modalRiesgos .modal-contenido input.inpNota {
  width: calc(100% - 88px); /* 100% de la celda menos margen de los inputs anteriores */
  box-sizing: border-box;
}

/* 1) Alinea el botón “Guardar” a la derecha dentro del modal de beneficios */
#modalRiesgos .botones-modal {
  justify-content: flex-end;
  gap: 12px;
  padding: 12px;       /* opcional: un poco de espacio */
}

/* 2) Dale al botón “Guardar Beneficios” el mismo azul del header */
#btnGuardarBeneficios {
  padding: 10px 2px;
  font-size: 14px;
  background-color: #3a86ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 145px; 
  white-space: nowrap;
  transition: background-color 0.3s ease;
}
#btnGuardarBeneficios:hover {
  background-color: #2f6ee2;
}

/* Añade esto al final de tu crudStyles.css o en tu CSS específico */
#modalRiesgos .modal-contenido .botones-modal {
  width: 95%;            /* mismo ancho que la tabla */
  margin: 10px auto 0;   /* centra horizontalmente y separa un poco de la tabla */
  display: flex;         
  justify-content: flex-end; /* sitúa el botón en la esquina derecha */
  gap: 8px;              /* espacio entre botones */
}

.modal-beneficios-plan {
  width: min(98vw, 1500px) !important;
  max-width: min(98vw, 1500px) !important;
  height: min(92vh, 900px) !important;
  max-height: min(92vh, 900px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px 20px 20px !important;
}

.tabla-beneficios-plan {
  width: 100% !important;
  table-layout: fixed;
}

.tabla-beneficios-plan th,
.tabla-beneficios-plan td {
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
}

.tabla-beneficios-plan th:nth-child(1),
.tabla-beneficios-plan td:nth-child(1) { width: 4%; }

.tabla-beneficios-plan th:nth-child(2),
.tabla-beneficios-plan td:nth-child(2) { width: 20%; }

.tabla-beneficios-plan th:nth-child(3),
.tabla-beneficios-plan td:nth-child(3) { width: 13%; }

.tabla-beneficios-plan th:nth-child(4),
.tabla-beneficios-plan td:nth-child(4) { width: 16%; }

.tabla-beneficios-plan th:nth-child(5),
.tabla-beneficios-plan td:nth-child(5) { width: 13%; }

.tabla-beneficios-plan th:nth-child(6),
.tabla-beneficios-plan td:nth-child(6) { width: 16%; }

.tabla-beneficios-plan th:nth-child(7),
.tabla-beneficios-plan td:nth-child(7) { width: 18%; }

.tabla-beneficios-plan .inpCob,
.tabla-beneficios-plan .inpPorDed,
.tabla-beneficios-plan .inpMonCob,
.tabla-beneficios-plan .inpMonDed,
.tabla-beneficios-plan .inpNota {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

.tabla-beneficios-plan .inpNota {
  resize: vertical;
  min-height: 52px;
}

/* Tres campos en línea: igual ancho y separación */
.inline-3 {
  display: flex;
  gap: 16px;
  margin: 6px 0 16px;
}
.inline-3 > div {
  flex: 1; /* cada uno ocupa el mismo espacio */
}

/* Dos campos en línea */
.inline-2 {
  display: flex;
  gap: 16px;
  margin: 6px 0 16px;
}
.inline-2 > div {
  flex: 1;
}

/* Asegura que los labels y inputs internos ocupen 100% */
.inline-3 label,
.inline-2 label,
.inline-3 input,
.inline-2 input {
  display: block;
  width: 100%;
}

#tituloRiesgos {
  margin-left: 0;
  padding-left: 8px;
  text-align: left;
}

.form-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.dos-columnas {
  grid-template-columns: repeat(2, 1fr);
}

.tres-columnas {
  grid-template-columns: repeat(3, 1fr);
}

.cuatro-columnas {
  grid-template-columns: repeat(4, 1fr);
}

.una-columna {
  grid-template-columns: 1fr;
}

.cinco-columnas {
  grid-template-columns: repeat(5, 1fr);
}

.seis-columnas {
  grid-template-columns: repeat(6, 1fr);
}

fieldset {
  border: 1px solid #ccc;
  padding: 0.8rem 1rem 0.6rem 1rem; /* reduce bottom padding un poco más */
  margin-bottom: 0.6rem;            /* acercar fieldset a los botones */
}

legend {
  font-weight: bold;
  padding: 0 0.5rem;
}

.oculto { display: none; }

/* Grid de 5 columnas, todos alineados centro vertical */
.form-grid.cinco-columnas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;               /* espaciado horizontal */
  align-items: center;     /* centra verticalmente input+label */
}

.form-grid.seis-columnas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  align-items: center;
}

/* Cada celda */
.form-grid.cinco-columnas .item,
.form-grid.seis-columnas .item {
  display: flex;
  align-items: center;
}

/* Asegura que el label que rodea el checkbox lo centre bien */
.form-grid.cinco-columnas .item label,
.form-grid.seis-columnas .item label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Separación entre radio buttons */
.inline-radios {
  display: flex;
  gap: 0.5rem;
  margin-left: 0.5rem; /* separación del label principal */
}

/* Hacer que el grupo Estado use una sola columna */
#grupoEstadoCliente, #grupoEstadoPersona {
  grid-template-columns: 1fr !important;
}

/* Que las opciones de radio ocupen toda la fila y queden separadas */
#grupoEstadoCliente .radio-options, #grupoEstadoPersona .radio-options {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}

/* Estilos específicos para el campo Estado en personas */
#grupoEstadoPersona {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#grupoEstadoPersona > label {
  font-weight: bold !important;
  margin-bottom: 0;
  color: #333;
  font-size: 14px;
}

#grupoEstadoPersona .radio-options {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-top: 5px;
}

#grupoEstadoPersona .radio-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal !important;
  cursor: pointer;
  line-height: 1.2;
  margin-bottom: 0;
  font-size: 14px;
}

#grupoEstadoPersona .radio-options input[type="radio"] {
  margin: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  position: relative;
  top: 0;
}

/* Estilo para el fieldset de Datos Generales */
.fieldset-general, .fieldset-clasificacionCliente, .fieldset-divisionCartera {
  border: 1px solid #3a86ff;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 6px;
  background-color: #f1f5ff;
}

/* modal agregar editar para cliente*/

.modal-contenidoCliente {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  width: 95%;
  max-width: 1400px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

#modalAseguradora .modal-contenidoCliente {
  width: min(96vw, 1500px);
  max-width: 1500px;
  height: min(88vh, 820px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#modalAseguradora #formAseguradora {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

#modalAseguradora .modal-aseguradora-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  margin-bottom: 12px;
}

#modalAseguradora .modal-aseguradora-header h2 {
  margin: 0;
}

#modalAseguradora .close-modal {
  margin-left: auto;
}

#modalAseguradora .tabs,
#modalAseguradora .btns-derecha {
  flex-shrink: 0;
}

#modalAseguradora .tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

#modalAseguradora .tab-content.oculto {
  display: none;
}

#modalAseguradora .btns-derecha {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf1f7;
}

@media (max-width: 768px) {
  #modalAseguradora .modal-contenidoCliente {
    width: 98vw;
    height: 92vh;
    max-height: 92vh;
  }
}

/* ===== Vista de inicio / Dashboard ejecutivo ===== */
.home-body {
  background:
    radial-gradient(circle at top right, rgba(52, 125, 245, 0.08), transparent 34%),
    linear-gradient(180deg, #f6f8fb 0%, #eef3f7 100%);
}

.home-page {
  max-width: 1680px;
  margin: 0 auto;
  color: #0f2f4f;
}

.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 210px;
  padding: 30px 34px;
  border: 1px solid #dce6f0;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(9, 48, 82, 0.96), rgba(22, 96, 145, 0.92)),
    #123a5e;
  box-shadow: 0 18px 40px rgba(15, 35, 55, 0.14);
  color: #fff;
}

.home-hero::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -130px;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.home-hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.home-eyebrow,
.home-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #2f80ed;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-eyebrow {
  color: #9ed0ff;
}

.home-hero h1 {
  margin: 0 0 12px;
  border: 0;
  padding: 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
}

.home-hero p {
  max-width: 680px;
  margin: 0;
  color: #d9e9f8;
  font-size: 16px;
  line-height: 1.6;
}

.home-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.home-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f2f8ff;
  font-size: 13px;
}

.home-hero-panel {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 280px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.home-panel-ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #fff;
  color: #1768ac;
  font-size: 26px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.home-hero-panel span {
  display: block;
  color: #cde4f8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-hero-panel strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.home-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.home-kpi-card,
.home-card {
  border: 1px solid #dce6f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(16, 45, 72, 0.08);
}

.home-kpi-card {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  color: #14324d;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-kpi-card:hover {
  transform: translateY(-3px);
  border-color: #a9c8eb;
  box-shadow: 0 18px 34px rgba(16, 45, 72, 0.13);
}

.home-kpi-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  font-size: 18px;
}

.home-kpi-icon.blue { background: #2f80ed; }
.home-kpi-icon.amber { background: #f59f00; }
.home-kpi-icon.green { background: #12b886; }
.home-kpi-icon.red { background: #e03131; }

.home-kpi-label {
  color: #6b7d90;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.home-kpi-card strong {
  color: #0f2f4f;
  font-size: 24px;
}

.home-kpi-card small {
  color: #5d6f82;
  font-size: 13px;
  line-height: 1.45;
}

.home-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 18px;
  margin-bottom: 18px;
}

.home-card {
  padding: 20px;
}

.home-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.home-card-header.compact {
  margin-bottom: 10px;
}

.home-card-header h2 {
  margin: 0;
  color: #14324d;
  font-size: 19px;
}

.home-card-header > i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2f80ed;
}

.home-priority-list {
  display: grid;
  gap: 10px;
}

.home-priority-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e4ebf3;
  border-radius: 14px;
  color: #102f4f;
  text-decoration: none;
  background: #fbfdff;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.home-priority-item:hover {
  border-color: #b9d3ee;
  background: #f3f8ff;
}

.home-priority-item strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
}

.home-priority-item small {
  color: #627487;
  font-size: 12px;
}

.home-priority-dot {
  width: 11px;
  height: 44px;
  border-radius: 999px;
}

.home-priority-dot.blue { background: #2f80ed; }
.home-priority-dot.amber { background: #f59f00; }
.home-priority-dot.green { background: #12b886; }

.home-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-actions-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px;
  border: 1px solid #e4ebf3;
  border-radius: 13px;
  color: #14324d;
  text-decoration: none;
  background: #fbfdff;
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.18s ease, background 0.18s ease;
}

.home-actions-grid a:hover {
  transform: translateY(-2px);
  background: #eef6ff;
}

.home-actions-grid i {
  color: #2f80ed;
}

.home-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.55fr);
  gap: 18px;
}

.home-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.home-flow-steps span {
  padding: 9px 13px;
  border-radius: 999px;
  background: #eef6ff;
  color: #164b78;
  font-size: 13px;
  font-weight: 800;
}

.home-flow-steps i {
  color: #8aa4bd;
}

.home-note {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #ffffff, #f3f8ff);
}

.home-note > i {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e7f5ff;
  color: #1c7ed6;
  font-size: 18px;
}

.home-note strong,
.home-note span {
  display: block;
}

.home-note strong {
  margin-bottom: 4px;
  color: #14324d;
}

.home-note span {
  color: #627487;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1200px) {
  .home-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-main-grid,
  .home-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Gestion operativa de Cobranzas
   ========================================================= */
.cobranzas-page {
  gap: 10px;
}

.cobranzas-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 9px;
  flex-shrink: 0;
}

.cobranzas-kpi {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid #dbe5f0;
  border-radius: 9px;
  background: linear-gradient(145deg, #ffffff, #f5f9ff);
  padding: 10px 12px 10px 16px;
  box-shadow: 0 2px 7px rgba(15, 45, 76, 0.05);
}

.cobranzas-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #347df5;
}

.cobranzas-kpi.danger::before {
  background: #e74c3c;
}

.cobranzas-kpi.success::before {
  background: #16a36a;
}

.cobranzas-kpi span,
.cobranzas-kpi small {
  display: block;
}

.cobranzas-kpi span {
  color: #61758f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cobranzas-kpi strong {
  display: block;
  margin: 4px 0 2px;
  color: #102a43;
  font-size: 15px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cobranzas-kpi.danger strong {
  color: #c0392b;
}

.cobranzas-kpi.success strong {
  color: #087f5b;
}

.cobranzas-kpi small {
  color: #7b8da3;
  font-size: 10px;
}

.cobranzas-level-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 7px 10px;
  border-bottom: 1px solid #e8eef5;
  background: #f8fafc;
  color: #4d627b;
  font-size: 12px;
  flex-shrink: 0;
}

.cobranzas-level-legend > span:not(.debt-dot) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  border-right: 1px solid #dce5ef;
  font-size: 12px;
  line-height: 1.35;
}

.cobranzas-level-legend i,
.cobranzas-level-legend small {
  font-size: 12px;
  line-height: 1.35;
}

.cobranzas-level-legend .legend-spacer {
  flex: 1;
  border: 0;
}

.debt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.debt-dot.esperanza,
.debt-dot.verde {
  background: #27ae60;
}

.debt-dot.cuidado,
.debt-dot.amarillo {
  background: #f1c40f;
}

.debt-dot.alerta-baja {
  background: #e67e22;
}

.debt-dot.alerta-media,
.debt-dot.mamey {
  background: #d35400;
}

.debt-dot.alerta-alta,
.debt-dot.rojo {
  background: #c0392b;
}

.cobranzas-table {
  min-width: 1120px;
  table-layout: fixed;
}

.cobranzas-table th:nth-child(1) {
  width: 5%;
}

.cobranzas-table th:nth-child(2) {
  width: 28%;
}

.cobranzas-table th:nth-child(3) {
  width: 17%;
}

.cobranzas-table th:nth-child(4) {
  width: 12%;
}

.cobranzas-table th:nth-child(5) {
  width: 12%;
}

.cobranzas-table th:nth-child(6) {
  width: 18%;
}

.cobranzas-table th:nth-child(7) {
  width: 8%;
}

.cobranzas-table td {
  font-size: 13px;
  height: 72px;
  line-height: 1.45;
  white-space: normal;
}

.cobranzas-row {
  border-left: 3px solid transparent;
}

.cobranzas-row.level-today td:first-child {
  box-shadow: inset 3px 0 #17a2b8;
}

.cobranzas-row.level-overdue td:first-child {
  box-shadow: inset 3px 0 #e74c3c;
}

.cobranzas-row.level-current td:first-child {
  box-shadow: inset 3px 0 #347df5;
}

.cobranzas-cell-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.cobranzas-cell-stack strong,
.cobranzas-cell-stack small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cobranzas-cell-stack strong {
  font-size: 13px;
  line-height: 1.35;
}

.cobranzas-cell-stack small,
.cobranzas-table td > small {
  color: #6f829a;
  font-size: 12.5px;
  line-height: 1.45;
}

.cobranzas-table td:nth-child(2) .cobranzas-cell-stack small {
  color: #52677f;
  font-size: 12.5px;
  line-height: 1.45;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.cobranzas-case-ref {
  color: #2563eb;
  font-weight: 800;
}

.cobranzas-status {
  --status-color: #64748b;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--status-color) 45%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--status-color) 10%, white);
  color: var(--status-color);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

@supports not (color: color-mix(in srgb, red, white)) {
  .cobranzas-status {
    border-color: #cbd5e1;
    background: #f8fafc;
  }
}

.cobranzas-priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
}

.cobranzas-priority.today {
  background: #e6f7fb;
  color: #087f8c;
}

.cobranzas-priority.overdue {
  background: #fff0f0;
  color: #c0392b;
}

.cobranzas-priority.current {
  background: #edf5ff;
  color: #2264c7;
}

.cobranzas-debt {
  display: block;
  border-right: 4px solid transparent;
  padding-right: 7px;
}

.cobranzas-debt.verde {
  color: #168d4a;
  border-color: #27ae60;
}

.cobranzas-debt.amarillo {
  color: #8a6b00;
  border-color: #f1c40f;
}

.cobranzas-debt.mamey {
  color: #bd5d20;
  border-color: #f08c46;
}

.cobranzas-debt.rojo {
  color: #c0392b;
  border-color: #e74c3c;
}

.cobranzas-days {
  display: block;
  margin-top: 4px;
}

.cobranzas-flags {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cobranzas-flags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #667b93;
  font-size: 12px;
  white-space: nowrap;
}

.cobranzas-flags .yes {
  color: #087f5b;
  font-weight: 700;
}

.cobranzas-manager {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.cobranzas-manager > span {
  display: inline-flex;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8f2ff;
  color: #256ee8;
  font-size: 10px;
  font-weight: 900;
}

.cobranzas-manager strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}

.cobranzas-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.cobranzas-action-btn {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: #3498db;
  color: #fff;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.cobranzas-action-btn:hover {
  background: #2b82bd;
}

.cobranzas-action-btn.cobranza-note-btn {
  background: #ff9800;
}

.cobranzas-action-btn.cobranza-note-btn:hover {
  background: #e08a00;
}

.cobranzas-table th:last-child,
.cobranzas-table td:last-child {
  min-width: 92px;
}

.cobranzas-agreement-ref,
.cobranzas-vencimiento.danger,
.cobranzas-amount.danger {
  color: #e74c3c !important;
  font-weight: 800;
}

.cobranzas-vencimiento.current,
.cobranzas-amount.current {
  color: #347df5 !important;
  font-weight: 800;
}

.cobranzas-vencimiento.esperanza,
.cobranzas-amount.esperanza {
  color: #27ae60 !important;
  font-weight: 800;
}

.cobranzas-vencimiento.cuidado,
.cobranzas-amount.cuidado {
  color: #f1c40f !important;
  font-weight: 800;
}

.cobranzas-vencimiento.alerta-baja,
.cobranzas-amount.alerta-baja {
  color: #e67e22 !important;
  font-weight: 800;
}

.cobranzas-vencimiento.alerta-media,
.cobranzas-amount.alerta-media {
  color: #d35400 !important;
  font-weight: 800;
}

.cobranzas-vencimiento.alerta-alta,
.cobranzas-amount.alerta-alta {
  color: #c0392b !important;
  font-weight: 800;
}

.cobranzas-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #dce6f1;
  margin: 8px 0 10px;
}

.cobranzas-page.cobranzas-internal-view .cobranzas-tabs {
  display: none;
}

.cobranzas-tab {
  border: 0;
  background: transparent;
  color: #526476;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 12px 18px;
  border-bottom: 3px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease, border-color .2s ease;
}

.cobranzas-tab:hover,
.cobranzas-tab.active {
  color: #1e88e5;
  border-bottom-color: #1e88e5;
}

.cobranzas-pane {
  display: none;
  min-height: 0;
}

.cobranzas-pane.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html.cobranzas-start-bitacora .cobranzas-page #cobranzasPaneLista {
  display: none;
}

html.cobranzas-start-bitacora .cobranzas-page #cobranzasPaneBitacora {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html.cobranzas-start-bitacora .cobranzas-page [data-cobranzas-tab="lista"] {
  border-bottom-color: transparent;
  color: #526476;
}

html.cobranzas-start-bitacora .cobranzas-page [data-cobranzas-tab="bitacora"] {
  border-bottom-color: #1e88e5;
  color: #1e88e5;
}

.cobranzas-bitacora-workspace .facturas-results-card {
  min-height: calc(100vh - 310px);
}

.cobranzas-bitacora-table {
  table-layout: fixed;
  width: 100%;
}

.cobranzas-bitacora-table th,
.cobranzas-bitacora-table td {
  min-width: 0;
  overflow-wrap: anywhere;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
}

.cobranzas-bitacora-table th:nth-child(1),
.cobranzas-bitacora-table td:nth-child(1) {
  width: 9.5%;
}

.cobranzas-bitacora-table th:nth-child(2),
.cobranzas-bitacora-table td:nth-child(2) {
  width: 21%;
}

.cobranzas-bitacora-table th:nth-child(3),
.cobranzas-bitacora-table td:nth-child(3) {
  width: 30%;
}

.cobranzas-bitacora-table th:nth-child(4),
.cobranzas-bitacora-table td:nth-child(4) {
  width: 18%;
}

.cobranzas-bitacora-table th:nth-child(5),
.cobranzas-bitacora-table td:nth-child(5) {
  width: 16%;
}

.cobranzas-bitacora-table th:nth-child(6),
.cobranzas-bitacora-table td:nth-child(6) {
  text-align: center;
  width: 5.5%;
}

.cobranzas-bitacora-table td:nth-child(6) {
  white-space: nowrap;
}

.cobranzas-bita-date,
.cobranzas-bita-client {
  color: #0b2e55;
  font-weight: 800;
}

.cobranzas-bita-user {
  align-items: center;
  display: flex;
  gap: 7px;
  margin-top: 7px;
}

.cobranzas-bita-avatar {
  align-items: center;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  width: 22px;
}

.cobranzas-bita-link {
  background: transparent;
  border: 0;
  color: #1677e8;
  cursor: pointer;
  display: inline;
  font: inherit;
  font-weight: 800;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: left;
  white-space: normal;
}

.cobranzas-bita-link:hover {
  text-decoration: underline;
}

.cobranzas-bita-meta,
.cobranzas-bita-notification {
  color: #5f6f83;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cobranzas-bita-meta span,
.cobranzas-bita-notification span {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.cobranzas-bita-note {
  color: #24364b;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: normal;
}

.cobranzas-bita-status-card {
  background: #fff4df;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
}

.cobranzas-bita-status-card span {
  align-items: center;
  align-self: flex-start;
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 800;
  gap: 5px;
  padding: 4px 8px;
}

.cobranzas-bita-status-card small {
  color: #5f6f83;
}

.cobranzas-bita-notification strong {
  align-self: flex-start;
  background: #e0f2fe;
  border-radius: 5px;
  color: #0284c7;
  padding: 3px 7px;
}

.cobranzas-bita-muted {
  color: #8a98aa;
}

.cobranzas-bita-action {
  align-items: center;
  background: #347df5;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(52, 125, 245, .22);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
  width: 34px;
}

.cobranzas-bita-action:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.cobranzas-payment-view {
  background: #fff;
  border: 1px solid #dce6f1;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(15, 35, 64, .06);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 190px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 22px;
}

.cobranzas-payment-view h2 {
  color: #0b2e55;
  font-size: 1.35rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cobranzas-payment-help {
  color: #64748b;
  margin: -4px 0 2px;
  text-align: center;
}

.cobranzas-payment-view .form-factura,
.cobranzas-payment-view .factura-client-info,
.cobranzas-payment-view .factura-policy-preview,
.cobranzas-payment-view .factura-policy-preview > *,
.cobranzas-payment-view fieldset,
.cobranzas-payment-view .tabla-wrapper,
.cobranzas-payment-view .data-table {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cobranzas-payment-view .factura-client-info {
  margin-bottom: 12px;
}

.cobranzas-payment-view .factura-policy-preview {
  overflow: hidden;
}

.cobranzas-payment-view .tabla-wrapper {
  overflow-x: hidden;
  padding-right: 0;
}

.cobranzas-payment-view .data-table {
  table-layout: fixed;
  min-width: 0 !important;
}

.cobranzas-payment-view .data-table th,
.cobranzas-payment-view .data-table td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  padding: 7px 6px;
  font-size: 12px;
  line-height: 1.25;
}

.cobranzas-payment-view .data-table input,
.cobranzas-payment-view .data-table select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cobranzas-payment-view .form-factura .fact-row {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cobranzas-payment-view .distribucion-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px;
  width: 100%;
}

.cobranzas-payment-view .distribucion-col-1,
.cobranzas-payment-view .distribucion-col-2 {
  min-width: 0;
}

.cobranzas-payment-view .distribucion-col-1 .data-table th:last-child,
.cobranzas-payment-view .distribucion-col-1 .data-table td:last-child {
  width: 18%;
}

.cobranzas-payment-view .botones-modal.btns-derecha {
  border-top: 1px solid #e5edf6;
  padding-top: 12px;
}

#modalCobroCobranzas .modal-contenido.cobranzas-payment-modal {
  width: 96vw !important;
  max-width: 1900px !important;
  min-width: min(1180px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 22px;
}

#modalCobroCobranzas .form-factura,
#modalCobroCobranzas .factura-client-info,
#modalCobroCobranzas .factura-policy-preview,
#modalCobroCobranzas .factura-policy-preview > *,
#modalCobroCobranzas fieldset,
#modalCobroCobranzas .tabla-wrapper,
#modalCobroCobranzas .data-table {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#modalCobroCobranzas .factura-client-info {
  margin-bottom: 12px;
}

#modalCobroCobranzas .factura-policy-preview {
  overflow: hidden;
}

#modalCobroCobranzas .tabla-wrapper {
  overflow-x: hidden;
  padding-right: 0;
}

#modalCobroCobranzas .data-table {
  table-layout: fixed;
  min-width: 0 !important;
}

#modalCobroCobranzas .data-table th,
#modalCobroCobranzas .data-table td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  padding: 7px 6px;
  font-size: 12px;
  line-height: 1.25;
}

#modalCobroCobranzas .data-table input,
#modalCobroCobranzas .data-table select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#modalCobroCobranzas .form-factura .fact-row {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#modalCobroCobranzas .distribucion-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px;
  width: 100%;
}

#modalCobroCobranzas .distribucion-col-1,
#modalCobroCobranzas .distribucion-col-2 {
  min-width: 0;
}

#modalCobroCobranzas .distribucion-col-1 .data-table th:last-child,
#modalCobroCobranzas .distribucion-col-1 .data-table td:last-child {
  width: 18%;
}

#modalCobroCobranzas .botones-modal.btns-derecha {
  border-top: 1px solid #e5edf6;
  padding-top: 12px;
}

.cobranzas-filter-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

/* =========================================================
   Historial y registro de notas de Cobranzas
   ========================================================= */
.cobranza-note-body #main-content {
  overflow: hidden;
}

.cobranza-note-page {
  height: calc(100vh - 24px);
  margin: 12px;
  padding: 14px 18px 28px;
  box-sizing: border-box;
  overflow-y: auto;
  border: 1px solid #dbe5f0;
  border-radius: 10px;
  background: #fff;
  color: #18314f;
  box-shadow: 0 3px 12px rgba(15, 45, 76, 0.06);
}

.cobranza-note-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 9px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.cobranza-note-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #17324d;
  font-size: 1.4rem;
}

.cobranza-note-header h1 i {
  color: #256ee8;
}

.cobranza-note-header p {
  margin: 5px 0 0;
  color: #6a7d94;
  font-size: 12px;
}

.cobranza-save-policy {
  display: inline-flex;
  max-width: 360px;
  align-items: center;
  gap: 7px;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #eff6ff;
  color: #225a9c;
  padding: 8px 10px;
  font-size: 10px;
  line-height: 1.35;
}

.cobranza-context-card {
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid #d8e4f1;
  border-radius: 9px;
  background: #f9fbfe;
}

.cobranza-context-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 13px;
  background: linear-gradient(100deg, #edf5ff, #f8fbff);
  border-bottom: 1px solid #dbe8f5;
}

.cobranza-context-title > div:first-child {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: 5px 8px;
}

.cobranza-context-title small,
.cobranza-context-grid small,
.cobranza-context-lists small {
  color: #6d8199;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cobranza-context-title strong {
  color: #102f50;
  font-size: 14px;
}

.cobranza-context-title span {
  color: #6f829a;
  font-size: 10px;
}

.cobranza-context-case {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cobranza-statement-btn {
  padding: 6px 9px;
  font-size: 9px;
}

.cobranza-unopened {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #fff4d6;
  color: #876500 !important;
  padding: 4px 8px;
  font-weight: 700;
}

.cobranza-context-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid #e3ebf4;
}

.cobranza-context-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid #e3ebf4;
}

.cobranza-context-grid > div:last-child {
  border-right: 0;
}

.cobranza-context-grid strong,
.cobranza-context-grid small {
  display: block;
}

.cobranza-context-grid strong {
  margin-top: 3px;
  overflow: hidden;
  color: #17324d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cobranza-context-grid .danger strong {
  color: #c0392b;
}

.cobranza-context-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.cobranza-context-lists > div {
  padding: 9px 12px;
}

.cobranza-context-lists > div:first-child {
  border-right: 1px solid #e3ebf4;
}

.cobranza-context-lists p {
  margin: 4px 0 0;
  color: #40566f;
  font-size: 10px;
  line-height: 1.5;
}

.cobranza-activity-plan {
  border-top: 1px solid #e3ebf4;
  background: #fff;
  padding: 10px 12px 12px;
}

.cobranza-activity-plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #17324d;
  font-size: 10px;
  font-weight: 800;
}

.cobranza-activity-plan-title i {
  color: #347df5;
}

.cobranza-activity-plan-title small {
  color: #71849a;
  font-size: 9px;
  font-weight: 500;
}

.cobranza-activity-items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.cobranza-activity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #d7e2ed;
  border-radius: 999px;
  padding: 5px 8px;
  color: #526b83;
  background: #f5f8fb;
  font-size: 9px;
  font-weight: 700;
}

.cobranza-activity.completed {
  border-color: #9fd7bf;
  color: #137a50;
  background: #edf9f3;
}

.cobranza-activity.pending i {
  color: #cc8500;
}

.cobranza-activity small {
  border-left: 1px solid currentColor;
  padding-left: 5px;
  font-size: 8px;
  opacity: 0.8;
}

.cobranza-escalation-warning {
  display: block;
  margin-top: 4px;
  border-radius: 5px;
  background: #fff4d6;
  color: #8a6100 !important;
  padding: 5px 7px;
  line-height: 1.35;
}

.cobranza-note-tabs {
  margin-bottom: 0;
}

.cobranza-note-pane {
  display: none;
  min-height: 290px;
  padding: 13px 0 0;
}

.cobranza-note-pane.rnc-active {
  display: block;
}

.cobranza-notes-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.cobranza-notes-heading h2 {
  margin: 0;
  color: #17324d;
  font-size: 14px;
}

.cobranza-notes-heading p {
  margin: 3px 0 0;
  color: #71849a;
  font-size: 10px;
}

.cobranza-history-wrap {
  overflow: auto;
  max-height: 46vh;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
}

.cobranza-history-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
}

.cobranza-history-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #347df5;
  color: #fff;
  padding: 9px 11px;
  text-align: left;
}

.cobranza-history-table td {
  vertical-align: top;
  padding: 10px 11px;
  border-bottom: 1px solid #e7edf4;
}

.cobranza-history-table td > strong,
.cobranza-history-table td > small {
  display: block;
}

.cobranza-history-table td > small {
  margin-top: 4px;
  color: #71849a;
  font-size: 9px;
}

.cobranza-note-text {
  max-width: none;
  color: #263f58;
  line-height: 1.5;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@keyframes cobranzaNewHistory {
  0% { background: #bcebd9; }
  100% { background: transparent; }
}

.cobranza-history-new {
  animation: cobranzaNewHistory 2.8s ease-out;
}

.cobranza-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  padding: 20px;
}

.cobranza-dialog {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  border: 1px solid #dbe5f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 35, 64, 0.22);
  color: #0b2e55;
  padding: 22px;
}

.cobranza-dialog-wide {
  width: min(760px, calc(100vw - 32px));
}

.cobranza-dialog h3 {
  margin: 0 32px 12px 0;
  color: #0b2e55;
  font-size: 1.1rem;
}

.cobranza-dialog p {
  margin: 0 0 18px;
  color: #52677f;
  line-height: 1.45;
}

.cobranza-dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #0b2e55;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cobranza-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #0b2e55;
  font-weight: 700;
}

.cobranza-dialog-field textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid #cbd7e6;
  border-radius: 7px;
  padding: 10px 12px;
  color: #0b2e55;
  font: inherit;
  line-height: 1.45;
}

.cobranza-dialog-help {
  display: block;
  margin-top: 8px;
  color: #71849a;
  font-size: 12px;
}

.cobranza-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.cobranza-notification {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: #71849a;
  font-size: 9px;
}

.cobranza-notification.active {
  color: #b66a00;
  font-weight: 700;
}

.cobranza-notification small {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
}

.cobranza-note-form {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 11px;
  padding-bottom: 12px;
}

.cobranza-note-form fieldset {
  min-width: 0;
  margin: 0;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px 14px;
}

.cobranza-note-form legend {
  color: #17324d;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 800;
}

.cobranza-form-grid {
  display: grid;
  gap: 11px;
}

.cobranza-form-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cobranza-form-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.cobranza-note-form .form-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 9px;
}

.cobranza-note-form label {
  color: #334e68;
  font-size: 12.5px;
  font-weight: 700;
}

.cobranza-note-form input,
.cobranza-note-form select,
.cobranza-note-form textarea {
  width: 100%;
  border: 1px solid #c7d5e5;
  border-radius: 6px;
  background: #fff;
  color: #18314f;
  padding: 8px 9px;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
}

.cobranza-note-form input:focus,
.cobranza-note-form select:focus,
.cobranza-note-form textarea:focus {
  border-color: #347df5;
  box-shadow: 0 0 0 3px rgba(52, 125, 245, 0.1);
}

.cobranza-note-form input:disabled {
  background: #eef3f8;
  color: #51677f;
}

.cobranza-note-form .form-group > small {
  color: #7b8da3;
  font-size: 12px;
  line-height: 1.4;
}

.cobranza-promise-panel {
  border-color: #f2c66f !important;
  background: #fffbef !important;
}

.cobranza-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin: 4px 0 7px;
  cursor: pointer;
}

.cobranza-checkbox-row.compact {
  margin-bottom: 10px;
}

.cobranza-checkbox-row input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
}

.cobranza-checkbox-row span,
.cobranza-checkbox-row strong,
.cobranza-checkbox-row small {
  display: block;
}

.cobranza-checkbox-row small {
  margin-top: 2px;
  color: #71849a;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}

.cobranza-route-panel {
  margin-top: 8px;
  border: 1px solid #bce6d7;
  border-radius: 7px;
  background: #f2fbf7;
  padding: 10px;
}

.cobranza-sync-note {
  margin: 5px 0 0;
  border-radius: 6px;
  background: #edf5ff;
  color: #225a9c;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.4;
}

.cobranza-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.cobranza-case-history-layout #main-content {
  overflow: auto;
  background: #f4f7f6;
}

.cobranza-case-history-layout .cobranza-note-page {
  height: auto;
  min-height: calc(100vh - 56px);
  max-width: 1600px;
  margin: 24px auto;
  padding: 30px 40px 40px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
}

.cobranza-case-history-layout .rnc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  border: 1px solid #d9e1ea;
  border-radius: 5px;
  background: #e9ecef;
  color: #555;
  padding: 8px 15px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.cobranza-case-history-layout .rnc-back-link:hover {
  background: #dee2e6;
  color: #333;
}

.cobranza-case-history-layout .cobranza-note-header {
  display: block;
  margin: 0 0 20px;
  padding: 0 0 15px;
  border-bottom: 2px solid #ddd;
}

.cobranza-case-history-layout .cobranza-note-header h1 {
  gap: 15px;
  color: #555;
  font-size: 1.8rem;
}

.cobranza-case-history-layout .cobranza-note-header h1 i {
  color: #555;
}

.cobranza-case-history-layout .cobranza-note-header p {
  display: none;
}

.cobranza-case-history-layout .cobranza-save-policy {
  display: none;
}

.cobranza-case-history-layout .cobranza-context-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  margin-bottom: 24px;
}

.cobranza-case-summary {
  display: grid;
  grid-template-columns: minmax(220px, 0.16fr) minmax(180px, 0.16fr) 1fr;
  gap: 22px;
  margin-bottom: 24px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f8f9fa;
  padding: 15px 20px;
}

.cobranza-case-summary span {
  display: block;
  color: #555;
  font-size: 0.9rem;
}

.cobranza-case-summary strong {
  color: #333;
  font-size: 0.95rem;
}

.cobranza-case-summary .cobranza-case-client {
  color: #1e88e5;
  font-size: 1.1rem;
}

.cobranza-case-summary .cobranza-case-agreement {
  color: #27ae60;
  font-size: 1.1rem;
}

.cobranza-case-table-wrap {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.cobranza-case-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9rem;
}

.cobranza-case-table th {
  background: #3498db;
  color: #fff;
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
}

.cobranza-case-table td {
  vertical-align: top;
  padding: 12px 10px;
  border-bottom: 1px solid #eee;
}

.cobranza-case-number {
  display: block;
  margin-bottom: 4px;
  color: #2c3e50;
  font-size: 1.05rem;
}

.cobranza-case-status {
  display: inline-flex;
  min-width: 140px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  background: var(--status-color, #ff9800);
  color: #fff;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cobranza-case-status-inline {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}

.cobranza-last-note-preview {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cobranza-case-days {
  display: flex;
  min-width: 140px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  background: #eceff1;
  color: #455a64;
  padding: 2px 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.cobranza-case-chrono {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cobranza-case-chrono span,
.cobranza-case-team span {
  display: block;
  color: #777;
  font-size: 0.85rem;
  font-weight: 500;
}

.cobranza-case-chrono strong,
.cobranza-case-team strong {
  color: #333;
  font-size: 0.95rem;
}

.cobranza-case-team {
  display: grid;
  gap: 6px;
}

.cobranza-case-team > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cobranza-user-dot,
.cobranza-history-user b {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e1f5fe;
  color: #0277bd;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.cobranza-case-team p {
  margin: 6px 0 0;
  border-left: 3px solid #ffeeba;
  border-radius: 4px;
  background: #fff3cd;
  color: #856404;
  padding: 6px;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.45;
}

.cobranza-case-history-layout .cobranza-note-tabs {
  margin: 0 0 20px;
  border-bottom: 2px solid #ddd;
}

.cobranza-case-history-layout .cobranza-hidden-tab {
  display: none !important;
}

.cobranza-case-history-layout .cobranza-note-tabs .rnc-nav-link {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #555;
  padding: 10px 20px;
  font-size: 1rem;
  margin-bottom: -2px;
}

.cobranza-case-history-layout .cobranza-note-tabs .rnc-nav-link.rnc-active {
  color: #3498db;
  border-bottom-color: #3498db;
  font-weight: 700;
}

.cobranza-case-history-layout .cobranza-note-pane {
  min-height: 0;
  padding: 10px 0 0;
}

.cobranza-case-history-layout .cobranza-notes-heading {
  margin: 0 0 6px;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.cobranza-case-history-layout .cobranza-notes-heading > div {
  display: none;
}

.cobranza-case-history-layout .cobranza-notes-title,
.cobranza-case-history-layout .cobranza-notes-heading h2 {
  margin: 0;
  color: #555;
  font-size: 1.1rem;
}

.cobranza-case-history-layout .cobranza-history-wrap {
  max-height: none;
  overflow: visible;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.cobranza-case-history-layout .cobranza-history-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 0.92rem;
  border-collapse: collapse;
}

.cobranza-case-history-layout .cobranza-history-table th:nth-child(1),
.cobranza-case-history-layout .cobranza-history-table td:nth-child(1) {
  width: 14%;
}

.cobranza-case-history-layout .cobranza-history-table th:nth-child(2),
.cobranza-case-history-layout .cobranza-history-table td:nth-child(2) {
  width: 45%;
}

.cobranza-case-history-layout .cobranza-history-table th:nth-child(3),
.cobranza-case-history-layout .cobranza-history-table td:nth-child(3) {
  width: 22%;
}

.cobranza-case-history-layout .cobranza-history-table th:nth-child(4),
.cobranza-case-history-layout .cobranza-history-table td:nth-child(4) {
  width: 13%;
}

.cobranza-case-history-layout .cobranza-history-table th:nth-child(5),
.cobranza-case-history-layout .cobranza-history-table td:nth-child(5) {
  width: 6%;
}

.cobranza-case-history-layout .cobranza-history-table th {
  position: static;
  background: #f8f9fa;
  color: #2c3e50;
  padding: 12px 14px;
  font-weight: 600;
}

.cobranza-case-history-layout .cobranza-history-table td {
  padding: 14px;
  vertical-align: top;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.cobranza-case-history-layout .cobranza-history-table .cobranza-note-text {
  display: table-cell;
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cobranza-case-empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed #cbd7e6;
  border-radius: 8px;
  background: #f8fbff;
  color: #415775;
  padding: 16px 18px;
}

.cobranza-case-empty-state i {
  color: #2f80ed;
  font-size: 22px;
}

.cobranza-case-empty-state strong,
.cobranza-case-empty-state span {
  display: block;
}

.cobranza-case-empty-state span {
  margin-top: 3px;
  color: #71849a;
  font-size: 12px;
}

.cobranza-history-user {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #2c3e50;
  font-size: 0.85rem;
}

.cobranza-transition-card {
  display: inline-flex;
  min-width: 230px;
  flex-direction: column;
  border-left: 4px solid var(--status-color, #ff9800);
  border-radius: 6px;
  background: #fff4e4;
  padding: 9px 12px;
}

.cobranza-transition-card strong {
  width: fit-content;
  border-radius: 4px;
  background: var(--status-color, #ff9800);
  color: #fff;
  padding: 4px 9px;
  font-size: 0.8rem;
}

.cobranza-transition-card small {
  margin-top: 6px;
  color: #6d5a42;
}

.cobranza-case-history-layout .cobranza-notification {
  font-size: 0.9rem;
}

.cobranza-case-history-layout .cobranza-notification.active {
  border-radius: 4px;
  background: #e4f7fb;
  color: #0d8aa5;
  padding: 5px 8px;
}

.cobranza-note-actions {
  display: inline-flex;
  gap: 8px;
}

.cobranza-note-action {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

.cobranza-note-action.edit {
  background: #f39c12;
}

.cobranza-note-action.delete {
  background: #e74c3c;
}

.cobranza-case-history-layout #tabRegistroCobranza {
  margin-top: 20px;
}

@media (max-width: 1350px) {
  .cobranzas-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .cobranza-context-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cobranza-context-grid > div:nth-child(3) {
    border-right: 0;
  }

  .cobranza-context-grid > div:nth-child(-n+3) {
    border-bottom: 1px solid #e3ebf4;
  }
}

@media (max-width: 850px) {
  .cobranzas-kpis,
  .cobranza-form-grid.cols-3,
  .cobranza-form-grid.cols-2,
  .cobranza-context-grid,
  .cobranza-context-lists {
    grid-template-columns: 1fr;
  }

  .cobranza-note-header,
  .cobranza-context-title,
  .cobranza-notes-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .cobranza-context-grid > div,
  .cobranza-context-lists > div:first-child {
    border-right: 0;
    border-bottom: 1px solid #e3ebf4;
  }
}

@media (max-width: 780px) {
  .home-hero {
    flex-direction: column;
    padding: 24px;
  }

  .home-hero-panel {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .home-kpi-grid,
  .home-actions-grid {
    grid-template-columns: 1fr;
  }

  .home-flow-steps i {
    display: none;
  }
}

/* ================================
   Selects en el modal Agregar/Editar Cliente
   ================================ */
.modal-contenidoCliente select,
.modal-contenidoPersona select,
.modal-contenidoCliente-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  margin: 6px 0;
  background-color: #fff;
  box-sizing: border-box;
}

.form-grid.tres-columnas {
  display: grid;                         /* ya lo tienes, pero reforzamos */
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;                             /* o el gap que uses */
  align-items: center;                   /* alinea labels/select/checks */
}

.align-center {
  align-items: center;
}

.tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.tab-btn {
  padding: .5rem 1rem;
  cursor: pointer;
  border: none;
  background: #eee;
  border-radius: .25rem;
}
.tab-btn.active {
  background: #ddd;
  font-weight: bold;
}
.tab-content.oculto {
  display: none;
}
.tab-content {
  /* separador visual opcional */
  padding-top: 1rem;
  border-top: 1px solid #ccc;
}
.tabla-canales {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
}
.tabla-canales th, .tabla-canales td {
  border: 1px solid #ccc;
  padding: .5rem;
  text-align: left;
}

.tabla-roles {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
}
.tabla-roles th, .tabla-roles td {
  border: 1px solid #ccc;
  padding: .5rem;
  text-align: left;
}

.tabla-roles-listado {
  table-layout: fixed;
}

.tabla-roles-listado th:nth-child(1),
.tabla-roles-listado td:nth-child(1) {
  width: 22%;
  text-align: left;
}

.tabla-roles-listado th:nth-child(2),
.tabla-roles-listado td:nth-child(2) {
  width: 50%;
  text-align: left;
}

.tabla-roles-listado th:nth-child(3),
.tabla-roles-listado td:nth-child(3) {
  width: 10%;
}

.tabla-roles-listado th:nth-child(4),
.tabla-roles-listado td:nth-child(4) {
  width: 18%;
}

.tabla-roles-listado td:nth-child(2) {
  white-space: normal;
  overflow: hidden;
  text-align: left;
}

.roles-descripcion-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  max-height: calc(1.35em * 2);
}

.tabla-cuentas {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
}
.tabla-cuentas th, .tabla-cuentas td {
  border: 1px solid #ccc;
  padding: .5rem;
  text-align: left;
}

/* Grid de 5 columnas, todos alineados en el centro vertical */
.form-grid.cinco-columnas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  align-items: center;
}

/* 2) Estilo para el botón “Agregar canal” */
#btnAgregarCanal, #btnAgregarEmpleador {
  background-color: #007bff;      /* mismo azul que tu btnAgregar */
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s;
}

#btnAgregarCanal:hover, #btnAgregarEmpleador:hover {
  background-color: #0056b3;      /* un tono más oscuro al pasar el ratón */
}

#btnAgregarDireccion {
  background-color: #007bff;      /* mismo azul que tu btnAgregar */
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s;
}

#btnAgregarDireccion:hover {
  background-color: #0056b3;      /* un tono más oscuro al pasar el ratón */
}

/* Ancho máximo igual que el de cliente */
#modalConfirmCanal .modal-contenido {
  max-width: 400px;
  padding: 24px 20px;
  text-align: center;
  margin: 0 auto;
}

/* Misma tipografía y espaciado */
#modalConfirmCanal h3 {
  font-size: 16px;
  color: #2d2d2d;
  margin-bottom: 20px;
}

/* Botones “Eliminar” y “Cancelar” con los mismos colores */
#modalConfirmCanal #btnConfirmarCanal {
  background-color: #d90429;
  color: white;
}
#modalConfirmCanal #btnConfirmarCanal:hover {
  background-color: #a80321;
}

#modalConfirmCanal #btnCancelarCanal {
  background-color: #6c757d;
  color: white;
}
#modalConfirmCanal #btnCancelarCanal:hover {
  background-color: #495057;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-contenido {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  width: 100%;
  max-width: 500px;
  text-align: center;
}

.botones-modal {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.btn-confirmar {
  background-color: #d90429;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.btn-confirmar:hover{
  background-color: #a80321;
}

.btn-cancelar {
  background-color: #6c757d;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.btn-cancelar:hover{
  background-color: #495057;
}

.tabla-direcciones {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Estilo para alinear los botones a la derecha y limitar su ancho */
.btns-derecha {
  display: flex;
  justify-content: flex-end;
  width: 50%;
  margin-left: auto;
  gap: 1rem;
  margin-top: 1.5rem;
}

.boton-guardar {
  background-color: #00b894;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.boton-guardar:hover {
  background-color: #019875;
}

.modal-contenido label {
  display: block;
  text-align: left;
  font-weight: 500;
  margin-bottom: 4px;
  align-items: flex-start !important;
}

.subtitulo-canales {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
}

/* Asegura que cada fila de canal quede en línea */
.canal-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Opcional: ajusta el select e input para que compartan espacio */
.canal-row select,
.canal-row input {
  flex: 1;
}
.canal-row button.btn-eliminar-canal {
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1;
}

/* ===== BOTONES “AGREGAR” ===== */
#btnAgregarContacto,
#btnAgregarCuenta,
#btnAsignarRol,
#btnAnadirCanalContacto {
  padding: 10px 16px;
  font-size: 14px;
  background-color: #007bff;  /* azul vivo */
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  margin: 0.5rem 0;            /* opcional: separarlos un poco del contenido */
}

#btnAgregarContacto:hover,
#btnAnadirCanalContacto:hover {
  background-color: #0056b3;  /* azul más oscuro al hover */
}

/* —— Tabla de Contactos full width —— */
#tab-contactos .tabla-contactos {
  width: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  table-layout: fixed;;      /* deja que las columnas se ajusten a su contenido */
}

#tab-contactos .tabla-contactos th,
#tab-contactos .tabla-contactos td {
  padding: 12px 8px;
  text-align: left;        /* alinea a la izquierda para aprovechar mejor el espacio */
}

.tab-content table {
  width: 100%;            /* Anula el 95% y hace que ocupe el ancho completo */
  margin: 25px 0 0 0;     /* Añade espacio arriba y elimina el centrado (margin: 0 auto) */
  box-sizing: border-box; /* Asegura que el padding y borde no afecten el ancho total */
}

/* Crea una rejilla de dos columnas con proporción 70% / 30% */
.grid-70-30 {
  display: grid;
  grid-template-columns: 7fr 3fr; /* 7 partes para el primero, 3 para el segundo */
  gap: 1rem;
}

/* Contenedor para alinear el botón a la derecha */
.grid-boton-derecha {
  display: flex;
  justify-content: flex-end; /* Alinea el contenido (el botón) a la derecha */
  margin-top: 1rem; /* Un poco de espacio superior */
}

/* === Vencimientos === */
.text-danger { color: #d90429; font-weight: 600; }   /* vencido o hoy */
.text-warning { color: #b26b00; font-weight: 600; }  /* <= 30 días */

/* Contenedor paginación + leyenda (misma fila) */
tr.poliza-recien-copiada td {
  animation: polizaRecienCopiadaPulse 1.15s ease-in-out 0s 4;
  background-color: #e8f8ef !important;
  box-shadow: inset 4px 0 0 #27ae60;
}

@keyframes polizaRecienCopiadaPulse {
  0%, 100% {
    background-color: #e8f8ef;
  }
  50% {
    background-color: #c8f3d8;
  }
}

.pie-listado {
  width: 95%;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pie-listado .paginacion {
  flex: 1;
  text-align: center; /* mantiene la paginación centrada */
}

.leyenda-vencimientos {
  font-size: 12px;
  color: #555;
  display: flex;
  gap: 12px;
  align-items: center;
}

.leyenda-vencimientos .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.leyenda-vencimientos .badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.badge-danger { background-color: #d90429; }
.badge-warning { background-color: #b26b00; }

/* ========================================
   SOLICITUDES DE MOVIMIENTO - Reference Styles
   ======================================== */
#main-content.smv-container {
  width: auto;
  max-width: none;
  min-width: 0;
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 10px;
  background-color: #ffffff;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.smv-back-link { display: inline-block; margin-bottom: 15px; font-weight: 600; color: #555; text-decoration: none; padding: 8px 15px; border-radius: 5px; background-color: #e9ecef; transition: background-color 0.2s; }
.smv-back-link:hover { background-color: #dee2e6; color: #333; }
.smv-title { color: #2c3e50; font-size: 1.9em; margin-bottom: 15px; margin-top: 5px; display: flex; align-items: center; gap: 15px; }

.smv-controls-bar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; flex-wrap: wrap; gap: 15px; }
.smv-controls-left { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.smv-controls-right { display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; }
.smv-toolbar-item { display: flex; flex-direction: column; }
.smv-toolbar-item label { font-size: 0.85em; font-weight: 600; color: #555; margin-bottom: 4px; }
.smv-toolbar-input { height: 38px; padding: 0 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.95em; min-width: 140px; box-sizing: border-box; line-height: 36px; }
.smv-add-btn { background-color: #1f6feb; color: white; padding: 0 20px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 38px; transition: background-color 0.3s; }
.smv-add-btn:hover { background-color: #2980b9; }

.smv-poliza-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background-color: #e3f2fd; border: 1px solid #1f6feb; border-radius: 16px; color: #1565c0; font-size: 14px; }
.smv-poliza-badge strong { font-weight: 700; }
.smv-badge-close { background: none; border: none; color: #d32f2f; cursor: pointer; font-size: 14px; padding: 2px 6px; margin-left: 4px; border-radius: 50%; transition: background-color 0.2s; }
.smv-badge-close:hover { background-color: rgba(211, 47, 47, 0.1); }

.smv-table-wrapper { overflow-x: auto; overflow-y: visible; width: 100%; border: 1px solid #eee; border-radius: 8px; -webkit-overflow-scrolling: touch; }
/* Listado principal: contenedor de scroll acotado para header fijo (igual que cobros/reclamos) */
.smv-listado-wrapper {
  overflow-y: auto;
  max-height: calc(100vh - 270px);
  min-height: 240px;
  position: relative;
  overscroll-behavior: contain;
}
.smv-data-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: visible !important; }
.smv-data-table thead { background-color: #1f6feb; }
.smv-data-table th, .smv-data-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #ddd; vertical-align: top; font-size: 0.88em; }
.smv-data-table thead th { color: white; font-weight: 600; white-space: nowrap; position: sticky; top: 0; z-index: 5; background-color: #1f6feb; background-clip: padding-box; box-shadow: 0 2px 0 rgba(15,23,42,0.08), 0 4px 10px rgba(15,23,42,0.08); }
.smv-data-table tbody tr:hover { background-color: #f9fbfd; transition: background-color 0.2s; }

.smv-caso-numero { font-size: 15px; font-weight: bold; color: #1976d2; margin-bottom: 5px; display: block; }
.smv-fecha-item { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 3px; color: #424242; }
.smv-fecha-item i { color: #1976d2; font-size: 12px; width: 14px; }
.smv-fecha-item strong { font-weight: 600; color: #212121; margin-right: 4px; }

.smv-poliza-info, .smv-cliente-info, .smv-aseguradora-info, .smv-ramo-info { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; color: #424242; }
.smv-poliza-info i { color: #1976d2; }
.smv-cliente-info i { color: #388e3c; }
.smv-aseguradora-info i { color: #f57c00; }
.smv-ramo-info i { color: #7b1fa2; }
.smv-poliza-info strong, .smv-cliente-info strong, .smv-aseguradora-info strong, .smv-ramo-info strong { font-weight: 600; color: #212121; }

.smv-concepto { font-size: 13px; color: #424242; margin-bottom: 6px; line-height: 1.4; display: flex; gap: 6px; }
.smv-concepto i { color: #1976d2; margin-top: 2px; }
.smv-ref-aseg, .smv-prima { font-size: 13px; color: #424242; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.smv-ref-aseg i { color: #f57c00; }
.smv-prima i { color: #388e3c; }

.smv-asignado, .smv-responsable { font-size: 13px; color: #424242; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.smv-asignado i { color: #1976d2; }
.smv-responsable i { color: #f57c00; }
.smv-sin-asignar { font-size: 13px; color: #9e9e9e; font-style: italic; display: flex; align-items: center; gap: 6px; }

.smv-pie-listado { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap; gap: 10px; }
.smv-pie-izq { font-size: 14px; color: #555; }
.smv-info-registros { font-weight: 600; }
.smv-paginacion { display: flex; gap: 5px; }
.smv-paginacion button { padding: 6px 12px; border: 1px solid #ddd; background-color: #fff; color: #555; cursor: pointer; border-radius: 4px; font-size: 14px; transition: all 0.2s; }
.smv-paginacion button:hover { background-color: #f5f5f5; border-color: #1f6feb; }
.smv-paginacion button.activo { background-color: #1f6feb; color: white; border-color: #1f6feb; font-weight: 600; }

/* CONTEXT HEADER - Rich Policy Information Table (Reference Style) */
.smv-context-header { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 25px; border: 1px solid #ddd; }
.smv-context-header .client-name.contextual { margin-bottom: 10px; border-bottom: none; padding-bottom: 0; font-size: 1.1em; margin-top: 0; }
.smv-context-header .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.smv-context-header .data-table { width: 100%; border-collapse: collapse; }
.smv-context-header .data-table thead { background-color: #3498db; }
.smv-context-header .data-table th, .smv-context-header .data-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid #ddd; vertical-align: middle; word-wrap: break-word; }
.smv-context-header .data-table thead th { color: white; font-weight: 500; vertical-align: bottom; text-align: left; }
.smv-context-header .policy-main-info .policy-number { font-size: 1.2em; font-weight: 700; color: #3498db; margin-bottom: 5px; display: block; }
.smv-context-header .policy-details .data-value { font-size: 0.95em; font-weight: 500; color: #555; display: block; line-height: 1.3; }
.smv-context-header .field-group { display: flex; align-items: center; font-size: 0.9em; margin-bottom: 4px; }
.smv-context-header .field-label { color: #666; font-weight: 500; margin-right: 8px; flex-shrink: 0; }
.smv-context-header .field-value { font-weight: 600; color: #333; }
.smv-context-header .line-group { display: flex; justify-content: flex-start; gap: 15px; align-items: center; }
.smv-context-header .status-vigente, .smv-context-header .status-activo { color: #27ae60; background-color: #e8f8ef; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 0.75em; text-transform: uppercase; display: inline-block; }
.smv-context-header .status-cancelada, .smv-context-header .status-excluido { color: #e74c3c; background-color: #fdedec; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 0.75em; text-transform: uppercase; display: inline-block; }
.smv-context-header .status-consumida { color: #E91E63; background-color: #FCE4EC; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 0.75em; text-transform: uppercase; display: inline-block; }
.smv-context-header .balance-highlight { font-weight: 700; font-size: 1.05em; color: #e74c3c; padding: 2px 6px; border-radius: 4px; background-color: #fdedec; display: inline-block; }
.smv-context-header .balance-highlight.settled { color: #27ae60; background-color: #e8f8ef; }

button.solicitud-movimiento { background-color: #1f6feb; color: white; border: none; width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s; }
button.solicitud-movimiento:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* FORM STYLES FOR SOLICITUD MODAL */
#modalSolicitud .modal-contenidoCliente {
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

#modalSolicitud #formSolicitud {
    background-color: #f1f5ff;
    border: 1px solid #3a86ff;
    padding: 1.5rem;
    border-radius: 6px;
    margin-top: 15px;
}

body.solicitud-registro-mode .facturas-page {
  display: none !important;
}

body.solicitud-registro-mode #main-content {
  display: block;
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

body.solicitud-registro-mode {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto !important;
}

body.solicitud-registro-mode #modalSolicitud {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 22px 34px 48px !important;
  display: block !important;
  background: transparent !important;
  overflow: visible !important;
  z-index: auto !important;
  box-sizing: border-box;
}

body.solicitud-registro-mode #modalSolicitud.oculto {
  display: none !important;
}

body.solicitud-registro-mode #modalSolicitud .modal-contenidoCliente {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 auto;
  overflow: visible !important;
  box-shadow: 0 2px 10px rgba(15, 45, 76, 0.06);
  border: 1px solid #dbe5f0;
}

body.solicitud-registro-mode #modalSolicitud #btnCerrarSolicitudX {
  display: none !important;
}

.smv-back-polizas-btn {
  margin: 4px 0 16px;
  width: max-content;
}

body.solicitud-registro-mode .smv-back-polizas-btn {
  display: inline-flex !important;
}

.smv-form-row { display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; }
.smv-form-group { flex: 1; display: flex; flex-direction: column; min-width: 150px; }
.smv-form-group label { font-weight: 600; font-size: 0.9em; color: #555; margin-bottom: 6px; }
.smv-form-group .form-control { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; box-sizing: border-box; font-size: 0.95em; }
.smv-form-group textarea.form-control { min-height: 80px; resize: vertical; }
.smv-form-group select.form-control { height: 38px; }
.smv-form-group input[type="date"].form-control,
.smv-form-group input[type="number"].form-control,
.smv-form-group input[type="text"].form-control { height: 38px; }
.smv-form-group .required { color: #e74c3c; margin-left: 3px; }

.smv-row-highlight {
  animation: smvHighlightRow 4.2s ease;
  box-shadow: inset 4px 0 0 #00b894;
}

@keyframes smvHighlightRow {
  0%, 70% { background-color: #e8fff6; }
  100% { background-color: transparent; }
}

/* ========================================
   TABLA DE SOLICITUDES - Reference Styles
   ======================================== */
.cell-group { display: flex; flex-direction: column; gap: 4px; }
.data-pair { display: flex; flex-direction: column; margin-bottom: 3px; }
.data-label { font-size: 0.8em; color: #777; line-height: 1.1; letter-spacing: 0.3px; }
.data-value { font-weight: 600; color: #333; font-size: 0.85em; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }

.chrono-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 2px; }

.status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 0.75em; text-transform: uppercase; margin-bottom: 5px; text-align: center; min-width: 140px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Badge de estado que además es acción (p. ej. "POR DIGITAR" dispara la
   facturación del caso desde el Historial y Notas del Caso). */
button.status-badge.rnc-status-badge-action {
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

button.status-badge.rnc-status-badge-action:hover,
button.status-badge.rnc-status-badge-action:focus-visible {
  filter: brightness(1.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

button.status-badge.rnc-status-badge-action:active {
  transform: translateY(0);
}

.badge { padding: 4px 8px; border-radius: 4px; color: white; font-size: 0.7em; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; width: fit-content; white-space: nowrap; }

.badge-days { background-color: #eceff1; color: #455a64; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: bold; border: 1px solid #cfd8dc; }

/* Days Indicator Badges */
.days-indicator { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-weight: 700; font-size: 0.85em; margin-top: 2px; transition: all 0.3s ease; }
.days-safe { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.days-warning { background-color: #fce4ec; color: #c2185b; border: 1px solid #f8bbd0; }
.days-danger { background-color: #ffebee; color: #c62828; border: 1px solid #ffcdd2; box-shadow: 0 2px 4px rgba(198, 40, 40, 0.1); }

.money-val { font-family: 'Consolas', monospace; font-weight: 700; font-size: 0.95em; }
.money-sol { color: #2980b9; }
.money-arr { color: #27ae60; }

.user-avatar { width: 24px; height: 24px; background: #e0e0e0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7em; color: #555; margin-right: 6px; font-weight: bold; }

.note-text { background-color: #fff3cd; padding: 6px; border-radius: 4px; font-size: 0.85em; color: #856404; margin-top: 6px; border-left: 3px solid #ffeeba; line-height: 1.3; }

.note-preview { background-color: #fff8e1; border-left: 3px solid #ffc107; padding: 4px 6px; font-size: 0.8em; color: #555; border-radius: 0 4px 4px 0; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; display: inline-block; }

.actions-cell { text-align: center !important; vertical-align: middle !important; }
.action-group { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.action-btn { width: 28px; height: 28px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: opacity 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; border: none; font-size: 0.8em; }
.action-btn:hover { opacity: 0.85; }
.btn-docs { background-color: #ff9800; }
.btn-edit { background-color: var(--success-color); }
.btn-note { background-color: var(--warning-color); }
.btn-soportes { background-color: var(--info-color); }
.btn-delete { background-color: var(--danger-color); }
.btn-del { background-color: #e74c3c; }

@media (max-width: 1400px) {
  #main-content.smv-container { width: auto; max-width: none; min-width: 0; padding: 25px 32px; margin-top: 10px; margin-right: 30px; margin-bottom: 10px; }
  .smv-data-table th, .smv-data-table td { padding: 8px 6px; font-size: 0.84em; }
  .chrono-grid { grid-template-columns: 1fr; }
  .status-badge { min-width: 120px; font-size: 0.7em; }
}

/* ========================================
   REGISTRO DE NOTA - Reference Styles
   ======================================== */
.rnc-container { max-width: 1600px; margin: 10px auto; background-color: #ffffff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 4px 4px rgba(0,0,0,0.05); }
.rnc-back-link { display: inline-block; margin-bottom: 15px; font-weight: 600; color: var(--dark-gray); text-decoration: none; padding: 8px 15px; border-radius: 5px; background-color: #e9ecef; transition: background-color 0.2s; border: none; cursor: pointer; }
.rnc-back-link:hover { background-color: #dee2e6; color: #333; }

.rnc-h1-title { font-size: 1.8em; color: var(--dark-gray); border-bottom: 2px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; }

/* ESTILOS DE PESTAÑAS */
.rnc-nav-tabs { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; }
.rnc-nav-link { 
    padding: 10px 20px; border: none; background-color: transparent; 
    cursor: pointer; font-size: 1em; color: var(--dark-gray); 
    border-bottom: 3px solid transparent; margin-bottom: -2px; 
    transition: all 0.2s; display: flex; align-items: center; gap: 8px; 
}
.rnc-nav-link.rnc-active { font-weight: bold; color: var(--primary-color); border-bottom-color: var(--primary-color); }
.rnc-tab-pane { display: none; min-height: 200px; padding: 10px 0; }
.rnc-tab-pane.rnc-active { display: block; }

/* Ocultar botón de pestaña de registro */
#registro-notas-nav .rnc-nav-link[data-tab="tab-registro"] {
    display: none;
}

/* CONTEXTO DE PÓLIZA */
.rnc-context-info-box {
    background-color: #f8f9fa; padding: 15px 20px; border-radius: 6px; 
    border: 1px solid var(--border-color); margin-bottom: 25px; font-size: 0.95em;
}
.rnc-client-context-title { font-weight: 500; color: var(--dark-gray); font-size: 1.1em; margin-bottom: 10px; }
.rnc-client-context-title strong { font-weight: 700; color: #333; }

.rnc-policy-context-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid #ddd; overflow-y: hidden; }
.rnc-policy-context-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.rnc-policy-context-table thead { background-color: var(--primary-color); }
.rnc-policy-context-table th { padding: 12px 10px; color: white; font-weight: 600; }
.rnc-policy-context-table th:first-child { border-top-left-radius: 8px; }
.rnc-policy-context-table th:last-child { border-top-right-radius: 8px; }
.rnc-policy-context-table td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; line-height: 1.35; background-color: white; color: #444; }
.rnc-policy-number-style { color: #2c3e50; font-weight: 700; font-size: 1.05em; display: block; }
.rnc-policy-details .rnc-data-value { font-size: 0.95em; font-weight: 500; color: #555; display: block; line-height: 1.3;}
.rnc-field-group { display: flex; align-items: center; font-size: 0.9em; margin-bottom: 4px; }
.rnc-field-label { color: #666; font-weight: 500; margin-right: 8px; flex-shrink: 0; }
.rnc-field-value { font-weight: 600; color: #333; }
.rnc-line-group { display: flex; justify-content: flex-start; gap: 15px; align-items: center; margin-bottom: 4px;}

/* CONTEXTO DE CASO */
.rnc-case-detail-box {
    background-color: #ffffff; 
    padding: 0; 
    margin-bottom: 25px;
}
.rnc-case-detail-box h2 {
    font-size: 1.4em; color: var(--primary-color); 
    display: flex; align-items: center; gap: 10px;
}

.rnc-case-context-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow-y: hidden;
    margin-top: 5px;
}
.rnc-case-context-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.rnc-case-context-table th:nth-child(1), .rnc-case-context-table td:nth-child(1) { width: 15%; }
.rnc-case-context-table th:nth-child(2), .rnc-case-context-table td:nth-child(2) { width: 20%; }
.rnc-case-context-table th:nth-child(3), .rnc-case-context-table td:nth-child(3) { width: 25%; }
.rnc-case-context-table th:nth-child(4), .rnc-case-context-table-td:nth-child(4) { width: 20%; }
.rnc-case-context-table th:nth-child(5), .rnc-case-context-table-td:nth-child(5) { width: 20%; }

.rnc-case-context-table thead {
    background-color: var(--primary-color);
    border-bottom: 1px solid #ddd;
}
.rnc-case-context-table th {
    padding: 12px 10px; 
    text-align: left;
    font-weight: 600;
    color: white;
}

.rnc-case-context-table th:first-child { border-top-left-radius: 8px; }
.rnc-case-context-table th:last-child { border-top-right-radius: 8px; }

.rnc-case-context-table td {
    padding: 12px 10px;
    vertical-align: top;
    background-color: white;
}
.rnc-case-context-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #eee;
}

.rnc-data-block { 
    margin-bottom: 5px; 
    line-height: 1.1; 
}
.rnc-data-block .rnc-data-label { 
    font-size: 0.85em; 
    color: var(--text-muted); 
    font-weight: 500; 
    display: block; 
}
.rnc-data-block .rnc-data-value { 
    font-size: 0.95em; 
    font-weight: 600; 
    color: #333; 
    display: block; 
}

.rnc-money-sol-val {
     color: #2980b9; 
     font-weight: 700;
}
.rnc-date-danger {
    color: var(--danger-color); 
    font-weight: 700;
}
.rnc-note-text-homologated {
    background-color: #fff3cd; 
    padding: 6px; 
    border-radius: 4px; 
    font-size: 0.85em; 
    color: #856404; 
    margin-top: 6px; 
    border-left: 3px solid #ffeeba; 
    line-height: 1.3;
}
.rnc-gestion-pair {
    display: flex;
    align-items: center;
    gap: 5px;
}
.rnc-user-avatar-badge {
    width: 24px;
    height: 24px;
    background: #e1f5fe; 
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    color: #0277bd; 
    font-weight: bold;
    flex-shrink: 0;
}

.rnc-badge-days { 
    background-color: #eceff1; 
    color: #455a64; 
    padding: 2px 6px; 
    border-radius: 4px; 
    font-size: 0.8em; 
    font-weight: 600; 
    border: 1px solid #cfd8dc; 
    min-width: 140px; 
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 5px;
    margin-top: 5px; 
    box-sizing: border-box;
}

.rnc-case-data-col strong { color: #2c3e50; font-weight: 700; display: block; }
.rnc-case-data-col .rnc-movement-type { font-weight: 700; color: var(--primary-color); margin-bottom: 5px; display: block; }

/* Grilla de fechas cronológicas */
.chrono-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 8px 15px; 
}

/* Status badge con tamaño mínimo y centrado */
.status-badge {
     min-width: 140px;
     display: inline-flex !important;
     align-items: center;
     justify-content: center;
     margin-bottom: 5px;
     gap: 5px;
     padding: 4px 10px;
     border-radius: 12px;
     font-weight: 700;
     font-size: 0.8em;
     text-transform: uppercase;
}

/* Variantes de status badge */
.status-vigente { color: var(--success-color); background-color: #e8f8ef; }
.status-cancelada { color: var(--danger-color); background-color: #fdedec; }
.status-consumida { color: var(--pink-color); background-color: #FCE4EC; }

/* GRILLA DE NOTAS */
.rnc-notes-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; 
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.rnc-notes-controls-bar h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1em;
    color: var(--dark-gray);
}

.rnc-btn-add-note {
    background-color: var(--success-color);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
}
.rnc-btn-add-note:hover {
    background-color: #2ecc71;
}

.rnc-notes-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.rnc-notes-table {
    width: 100%;
    border-collapse: collapse;
    /* Sin table-layout:fixed el navegador ensancha la columna de la nota según
       su contenido y aplasta las demás; con él se respetan los % del <th>. */
    table-layout: fixed;
}

/* Las notas largas se salían de su columna y se montaban sobre "Estatus de
   Transición" porque hay dos reglas GLOBALES (`th, td` y
   `tbody td:nth-child(2)`) que fuerzan white-space:nowrap. No se tocan esas
   reglas para no alterar el resto del sistema: se sobrescriben solo aquí. */
.rnc-notes-table th,
.rnc-notes-table td,
.rnc-notes-table tbody td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.rnc-notes-table tbody td:nth-child(2) {
    line-height: 1.45;
}
.rnc-notes-table thead {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #e1e6ec;
}
.rnc-notes-table thead th:first-child {
  border-top-left-radius: 6px;
}
.rnc-notes-table thead th:last-child {
  border-top-right-radius: 6px;
}
.rnc-notes-table th, .rnc-notes-table td {
    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    vertical-align: top;
}
.rnc-notes-table th {
    font-weight: 600;
  color: #5f6b7a;
  letter-spacing: 0.5px;
}
.rnc-notes-table td {
  color: #444;
}
.rnc-notes-table tbody tr:nth-child(even) {
  background-color: #fcfdff;
}
.rnc-notes-table tbody tr:hover {
  background-color: #f2f8ff;
}

.rnc-note-empty-text {
    font-style: italic;
    color: var(--text-muted-color, #6c757d);
}

.rnc-note-status-block {
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 0.85em;
    margin-top: 4px;
    line-height: 1.3;
}
.rnc-note-status-current {
    font-weight: 700;
    color: white;
    padding: 3px 6px;
    border-radius: 3px;
    display: inline-block;
}
.rnc-note-status-transition-label {
     font-size: 0.8em;
     color: #777;
     display: block;
     margin-top: 4px;
}

.rnc-notification-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rnc-notification-flag {
    font-weight: 700;
    color: var(--info-color);
    background-color: #e6f7ff;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rnc-notification-details {
    font-size: 0.8em;
    color: var(--text-muted);
}

.rnc-note-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.rnc-note-action-btn {
    padding: 6px 10px;
    border-radius: 4px;
    color: white;
    text-decoration: none;
    font-size: 0.8em;
    transition: opacity 0.2s;
    border: none;
    cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rnc-note-action-btn:hover {
    opacity: 0.8;
}
.rnc-btn-note-edit {
  background-color: var(--warning-color);
}
.rnc-btn-note-delete {
    background-color: var(--danger-color);
}

/* FORMULARIO DE REGISTRO */
.rnc-form-container-note { 
    background-color: #fdfdfd; 
    padding: 25px; 
    border: 1px solid #eef; 
    border-radius: 8px; 
}
.rnc-form-title-note {
    font-size: 1.4em; 
    color: var(--primary-color); 
    margin-bottom: 20px; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #eee;
}
.rnc-form-subtitle {
    border-bottom: 1px solid #eee; 
    padding-bottom: 5px; 
    margin-top: 20px;
}
.rnc-form-row { 
    display: flex; 
    gap: 20px; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
}
.rnc-form-group { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    min-width: 150px; 
}
.rnc-form-group label { 
    font-weight: 600; 
    font-size: 0.9em; 
    color: #555; 
    margin-bottom: 6px; 
}
.rnc-form-control { 
    width: 100%; 
    padding: 8px 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-family: inherit; 
    box-sizing: border-box; 
}
textarea.rnc-form-control { 
    min-height: 100px; 
    resize: vertical; 
}
.rnc-checkbox-group {
    display: flex; 
    align-items: center; 
    padding-top: 8px;
    gap: 8px;
}
.rnc-checkbox-group input[type="checkbox"] {
    width: auto;
    height: 16px;
}
.rnc-required { 
    color: var(--danger-color); 
    margin-left: 3px; 
}

/* ACCIONES */
.rnc-form-actions { 
    padding-top: 20px; 
    border-top: 1px solid var(--border-color); 
    text-align: right; 
    margin-top: 20px; 
}

.rnc-form-actions .btn {
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1em;
  background-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.rnc-form-actions .btn-primary {
  background-color: var(--primary-color, #3498db);
  color: #fff;
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.rnc-form-actions .btn-primary:hover {
  background-color: #2980b9;
}

/* Círculos para DD (S/N) */
/* Círculos sólidos con texto blanco */
.circle-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;              /* súbelo a 30px si ves el “Sí” muy justo */
  height:28px;
  border-radius:50%;
  font-weight:700;
  font-size:12px;
  line-height:1;
  color:#fff;              /* texto blanco */
  border:none;             /* sin borde */
}

.circle-badge--green{ background:#00b894; } /* verde sólido */
.circle-badge--red  { background:#ef233c; } /* rojo sólido */

/* Badges pequeños para roles */
.badge-small {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  margin-left: 8px;
  display: inline-block;
}

.badge-small.bg-success {
  background-color: #28a745;
}

.badge-small.bg-warning {
  background-color: #ffc107;
  color: #212529;
}

.badge-small.bg-danger {
  background-color: #dc3545;
}

/* =========================================
   Ajuste de Anchos para Tabla de Contactos
   ========================================= */
#tab-contactos .tabla-contactos th:nth-child(1),
#tab-contactos .tabla-contactos td:nth-child(1) {
  width: 14%; 
}

/* 2. Apellidos */
#tab-contactos .tabla-contactos th:nth-child(2),
#tab-contactos .tabla-contactos td:nth-child(2) {
  width: 14%;
}

/* 3. Tipo ID */
#tab-contactos .tabla-contactos th:nth-child(3),
#tab-contactos .tabla-contactos td:nth-child(3) {
  width: 6%;
}

/* 4. Número ID */
#tab-contactos .tabla-contactos th:nth-child(4),
#tab-contactos .tabla-contactos td:nth-child(4) {
  width: 10%;
}

/* 5. Departamento */
#tab-contactos .tabla-contactos th:nth-child(5),
#tab-contactos .tabla-contactos td:nth-child(5) {
  width: 12%;
}

/* 6. Cargo */
#tab-contactos .tabla-contactos th:nth-child(6),
#tab-contactos .tabla-contactos td:nth-child(6) {
  width: 9%;
}

/* 7. F. Nac. */
#tab-contactos .tabla-contactos th:nth-child(7),
#tab-contactos .tabla-contactos td:nth-child(7) {
  width: 6%;
}

/* 8. Canales */
#tab-contactos .tabla-contactos th:nth-child(8),
#tab-contactos .tabla-contactos td:nth-child(8) {
  width: 16%;
}

/* 9. Acciones */
#tab-contactos .tabla-contactos th:nth-child(9),
#tab-contactos .tabla-contactos td:nth-child(9) {
  width: 10%;
}
/* ==============================================
   Estilos para la Tabla de Datos Laborales (Empleadores)
   ============================================== */

/* 1. Forzar el ancho fijo de la tabla */
#tab-empleadores .tabla-empleadores {
  width: 100%;
  table-layout: fixed; /* ¡Esta es la clave! Obliga a la tabla a respetar el ancho. */
  margin-top: 1.5rem;  /* Un poco de espacio después del recuadro. */
}

/* 2. Controlar el desbordamiento de texto en las celdas */
#tab-empleadores .tabla-empleadores td {
  white-space: nowrap;     /* Evita que el texto salte a la siguiente línea. */
  overflow: hidden;        /* Oculta el texto que no cabe. */
  text-overflow: ellipsis; /* Muestra "..." al final del texto cortado. */
  text-align: left;        /* Alinea el texto a la izquierda para mejor lectura. */
}

/* 3. Asignar anchos a cada columna para una distribución óptima */
#tab-empleadores .tabla-empleadores th:nth-child(1) { width: 13%; } /* Empresa */
#tab-empleadores .tabla-empleadores th:nth-child(2) { width: 9%; } /* País */
#tab-empleadores .tabla-empleadores th:nth-child(3) { width: 9%; } /* Provincia */
#tab-empleadores .tabla-empleadores th:nth-child(4) { width: 9%; } /* Municipio */
#tab-empleadores .tabla-empleadores th:nth-child(5) { width: 17%; } /* Dirección */
#tab-empleadores .tabla-empleadores th:nth-child(6) { width: 8%; }  /* Teléfono */
#tab-empleadores .tabla-empleadores th:nth-child(7) { width: 12%; }  /* Email */
#tab-empleadores .tabla-empleadores th:nth-child(8) { width: 10%; } /* Fecha Ingreso */
#tab-empleadores .tabla-empleadores th:nth-child(9) { width: 10%; }  /* Acciones */

/* ——— Selección de cliente (polizas): modal grande y robusto ——— */
#modalSelCliente .modal-contenido{
  /* ancho y alto del modal */
  width: min(1800px, 98vw);
  max-width: none; 
  height: 90vh;
  max-height: 92vh;

  /* layout */
  display: flex;
  flex-direction: column;

  /* scroll interno sin que se mueva el fondo */
  overflow: hidden; /* contenedor sin scroll; lo hacemos en la tabla */
}

#modalSelCliente .tabla-wrapper{
  flex: 1;
  overflow-y: auto;  /* scroll sólo vertical para la tabla */
  overflow-x: hidden;
  min-height: 0;   /* evita que flex fuerce altura rara */
  max-height: 100%;
}

/* 2+1 columnas: buscador 2/3 y filtro 1/3 fijos */
#modalSelCliente .form-grid.tres-columnas {
  grid-template-columns: 2fr 1fr 220px; /* o 1fr 1fr 220px si prefieres */
}

/* En móviles ocupa casi toda la pantalla */
@media (max-width: 768px){
  #modalSelCliente .modal-contenido{
    width: 98vw;
    height: 90vh;
  }
}

/* Efecto hover para las filas de selección de cliente */
#modalSelCliente tbody tr:hover {
  background-color: #e6f0ff; /* Un suave resaltado azul */
  cursor: pointer;          /* Cambia el cursor a una mano */
}

/* 1. Centra el nuevo contenedor y le da el mismo ancho que tenía la tabla */
.modal-layout-container {
  width: 98%;
  margin: 0 auto; /* Esto lo centra horizontalmente */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 2. Hace que la tabla ocupe el 100% de su nuevo contenedor (en lugar de 95%) */
#modalSelCliente table {
  width: 100%;
  margin: 0; /* Reseteamos el margen que la centraba antes */
  table-layout: fixed;
  font-size: 12px;
}

#modalSelCliente th,
#modalSelCliente td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: none;
  padding: 10px 8px;
}

#modalSelCliente th:nth-child(1),
#modalSelCliente td:nth-child(1) { width: 4%; }

#modalSelCliente th:nth-child(2),
#modalSelCliente td:nth-child(2) { width: 18%; }

#modalSelCliente th:nth-child(3),
#modalSelCliente td:nth-child(3) { width: 5%; }

#modalSelCliente th:nth-child(4),
#modalSelCliente td:nth-child(4) { width: 5%; }

#modalSelCliente th:nth-child(5),
#modalSelCliente td:nth-child(5) { width: 6%; }

#modalSelCliente th:nth-child(6),
#modalSelCliente td:nth-child(6) { width: 8%; }

#modalSelCliente th:nth-child(7),
#modalSelCliente td:nth-child(7) { width: 7%; }

#modalSelCliente th:nth-child(8),
#modalSelCliente td:nth-child(8) { width: 8%; }

#modalSelCliente th:nth-child(9),
#modalSelCliente td:nth-child(9) { width: 7%; }

#modalSelCliente th:nth-child(10),
#modalSelCliente td:nth-child(10) { width: 8%; }

#modalSelCliente th:nth-child(11),
#modalSelCliente td:nth-child(11) { width: 10%; }

#modalSelCliente th:nth-child(12),
#modalSelCliente td:nth-child(12) { width: 9%; }

#modalSelCliente th:nth-child(13),
#modalSelCliente td:nth-child(13) { width: 5%; }

#modalSelCliente td:last-child,
#modalSelCliente th:last-child {
  text-align: center;
}

/* Mantener visibles los encabezados al hacer scroll en la lista de clientes */
#modalSelCliente .tabla-wrapper {
  position: relative;
}

#tablaSeleccionClientes {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
}

#tablaSeleccionClientes thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background-color: #3a86ff !important;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.08), 0 3px 8px rgba(17, 24, 39, 0.12);
}

/* Mantener visibles los encabezados del listado principal de pólizas al hacer scroll */
#tablaListadoPolizas {
  width: 100% !important;
  min-width: 900px;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
}

.polizas-list-table-wrap {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  width: 100%;
}

#tablaListadoPolizas thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 15 !important;
  background-color: #3a86ff !important;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.08), 0 3px 8px rgba(17, 24, 39, 0.12);
}

#tablaListadoPolizas th:nth-child(1),
#tablaListadoPolizas td:nth-child(1) {
  width: 15%;
}

#tablaListadoPolizas th:nth-child(2),
#tablaListadoPolizas td:nth-child(2) {
  width: 14%;
}

#tablaListadoPolizas th:nth-child(3),
#tablaListadoPolizas td:nth-child(3) {
  width: 13%;
}

#tablaListadoPolizas th:nth-child(4),
#tablaListadoPolizas td:nth-child(4) {
  width: 14%;
}

#tablaListadoPolizas th:nth-child(5),
#tablaListadoPolizas td:nth-child(5) {
  width: 24%;
}

#tablaListadoPolizas th:nth-child(6),
#tablaListadoPolizas td:nth-child(6) {
  width: 20%;
}

/* ============================================= */
/* ==   MAQUETACIÓN GRID PARA FORMULARIO      == */
/* ============================================= */

.policy-form-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* Espacio vertical entre cada fila */
}

.form-row {
  display: grid;
  gap: 1rem; /* Espacio horizontal entre cada campo */
  align-items: end; /* Alinea los campos en la base para un look limpio */
}

/* Definición de las columnas para cada fila */
.form-row.cols-6 { grid-template-columns: repeat(6, 1fr); }
.form-row.cols-7 { grid-template-columns: repeat(7, 1fr); }

/* Distribución 30%/70% para la última fila */
.form-row.cols-custom-split {
  grid-template-columns: 3fr 7fr; /* 3 partes para el primero, 7 para el segundo */
}

/* Estilo para cada celda del grid */
.form-row > div {
  display: flex;
  flex-direction: column;
}

/* Estilo específico para las celdas con checkboxes */
.form-row .checkbox-cell {
  flex-direction: row; /* Pone el checkbox al lado del texto */
  align-items: center;
  justify-content: center;
  padding-bottom: 0.5rem; /* Pequeño ajuste de altura */
  gap: 0.5rem;
}

.form-row .checkbox-cell label {
  white-space: nowrap; /* Evita que el texto del label se parta */
}

.side-by-side-container {
  display: flex;         /* Activa el modo Flexbox, que alinea los hijos horizontalmente */
  gap: 2rem;             /* Crea un espacio de separación entre los dos fieldsets */
  align-items: stretch;   /* Estira ambos fieldsets a la misma altura */
}

.side-by-side-container > fieldset {
  flex: 1; /* Hace que cada fieldset ocupe el mismo espacio disponible (50% en este caso) */
  margin-top: 0; /* Opcional: quita el margen superior por defecto para mejorar la alineación */
  display: flex;
  flex-direction: column; /* Permite que su contenido se distribuya verticalmente */
}

/* Inputs sólo lectura: fondo gris claro y cursor no-allowed */
input[readonly], textarea[readonly], select[readonly] {
  background-color: #e9ecef;
  color: #495057;
  cursor: not-allowed;
}

/* Estilo específico para Tasa y Valor no editables (LV) */
#lv-tasa[readonly], #lv-valor[readonly] {
  background-color: #eef2f7; /* un gris un poco más marcado */
  color: #6b7280;            /* gris medio para texto */
  border-color: #d1d5db;     /* borde gris claro */
}

/* Asegura que inputs y selects no fuercen más ancho que su celda de grid */
.form-grid input,
.form-grid select,
.form-grid textarea { min-width: 0; box-sizing: border-box; }

.veh-catalog-field {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.veh-catalog-field select {
  flex: 1 1 auto;
  min-width: 0;
}

.veh-catalog-btn {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background-color: #1f6feb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.veh-catalog-btn:hover {
  background-color: #185bc2;
  transform: translateY(-1px);
}

.grid-2-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Crea un grid de 2 columnas de igual tamaño */
  gap: 1.5rem 1rem; /* 1.5rem de espacio vertical, 1rem horizontal */
}

/* Esta es la regla especial:
  Selecciona el último elemento (last-child) SOLO SI también es un elemento impar (nth-child(odd)).
  Esto ocurre cuando tienes 1, 3, 5, 7, etc., elementos.
*/
.grid-2-cols > div:last-child:nth-child(odd) {
  grid-column: 1 / -1; /* Hace que el elemento ocupe todo el ancho del grid */
}

/* Uniformar inputs tipo number: quitar spinners para alineación consistente */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  appearance: textfield; /* estándar */
  -moz-appearance: textfield; /* Firefox */
}

/* Alinear filas de 4 columnas del formulario de Naves (incluye Combustible) */
#bienFormNave .form-grid.cuatro-columnas {
  align-items: end; /* alinea los contenedores de campos por la base */
}
#bienFormNave .form-grid.cuatro-columnas > div {
  display: flex;              /* asegura estructura uniforme */
  flex-direction: column;     /* label arriba, input debajo */
  justify-content: flex-end;  /* empuja el input hacia la base del contenedor */
}

#btnLimpiarCliente {
  /* Apariencia y color */
  background-color: #dc3545; 
  color: white;
  border: none;
  
  /* Forma y tamaño */
  width: 24px;
  height: 24px;
  border-radius: 4px; /* <-- CAMBIO CLAVE: De 50% a 4px para un cuadrado con esquinas suaves */
  
  /* Contenido (la "✖") */
  font-size: 14px;
  font-weight: bold;
  line-height: 1; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Evita que el botón se encoja si el nombre del cliente es largo */

  /* Interacción */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#btnLimpiarCliente:hover {
  background-color: #c82333; 
  transform: scale(1.1);
}

#clienteActualBadge:not(.oculto) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio-group {
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
}
.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: normal;
}

.oculto { display: none !important; }

/* ===== Coberturas Bien: Tabs Header (minimal styling) ===== */
#tabsCoberturas .tabs-header {
  display: flex;
  gap: 10px;
  border-bottom: 3px solid #e5e7eb; /* línea principal gris claro, más ancha */
  margin: 10px auto 0;
  width: 95%; /* alineado con la tabla */
}

#tabsCoberturas .tab-btn {
  background: transparent;
  border: none;
  padding: 10px 12px;
  border-bottom: 3px solid transparent; /* solo el activo será azul */
  cursor: pointer;
  color: #475569; /* gris-azulado para inactivo */
}

#tabsCoberturas .tab-btn.active {
  border-bottom-color: #3a86ff; /* azul marca solo bajo el activo */
  color: #3a86ff; /* texto e ícono azules */
  font-weight: 700;
}

#tabsCoberturas .tab-btn i { margin-right: 6px; }

/* Contenedor para alinear tabs con tabla */
.tabs-cob-container{
  width: 100%;
}

/* Mesas de coberturas: mayor espaciado vertical y margen superior */
.cob-table{
  width: 95%;
  margin: 16px auto; /* más espacio arriba y abajo */
}

/* Cabecera "Riesgos contratados" con selector de plan a la derecha */
.coberturas-header{
  width: 95%;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.coberturas-title{
  font-weight: 700;
  color: #2f3e46;
  font-size: 1.15rem; /* un poco más grande */
}
.coberturas-actions select{
  min-width: 260px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}

/* Contenedor del botón Guardar, alineado con la tabla de riesgos */
.cob-actions{
  width: 95%;
  margin: 12px auto 0; /* mismo alineado que las tablas */
  display: flex;
  justify-content: flex-end;
}
.cob-actions .boton-guardar{
  padding: 8px 12px; /* menos ancho a los lados */
}

/* Alinear contenido de la tabla de riesgos por columna */
.cob-riesgos thead th:nth-child(1),
.cob-riesgos tbody td:nth-child(1){ text-align: center; }
.cob-riesgos thead th:nth-child(2),
.cob-riesgos tbody td:nth-child(2){ text-align: left; }
.cob-riesgos thead th:nth-child(3),
.cob-riesgos tbody td:nth-child(3){ text-align: right; }
.cob-riesgos thead th:nth-child(4),
.cob-riesgos tbody td:nth-child(4){ text-align: right; }
.cob-riesgos thead th:nth-child(5),
.cob-riesgos tbody td:nth-child(5){ text-align: right; }
.cob-riesgos thead th:nth-child(6),
.cob-riesgos tbody td:nth-child(6){ text-align: right; }
.cob-riesgos thead th:nth-child(7),
.cob-riesgos tbody td:nth-child(7){ text-align: left; }

/* ===== Botón de coberturas (icono sombrilla) ===== */
button.coberturas {
  padding: 7px 12px;
  margin: 0 5px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  background-color: #6c5ce7; /* igual que permisos/riesgos */
}

button.coberturas:hover {
  background-color: #5a4bcf;
}

/* Utilidad: espacio consistente antes de los botones en modales de bienes */
.espaciado-antes-botones {
  margin-bottom: 28px !important; /* asegura una separación visible antes del bloque de botones */
}

/* Refuerzos específicos: garantizar separación en estos formularios */
#bienFormVehiculo fieldset:last-of-type,
#bienFormLocalVivienda fieldset:last-of-type {
  margin-bottom: 28px !important;
}

/* Badges de estado para pólizas */
.status-badge {
  display: inline-block;
  padding: .25rem .55rem;
  border: 2px solid transparent;
  border-radius: .5rem;         /* Cambia a 4px si quieres recto en lugar de pill */
  font-weight: 600;
  font-size: .85rem;
  line-height: 1;
  white-space: nowrap;
}

/* Vigente: recuadro verde */
.status-vigente {
  color: #1f7a1f;
  border-color: #1f7a1f;
  background: rgba(31, 122, 31, 0.08);  /* si NO quieres fondo, bórralo */
}

/* Cancelada: recuadro rojo */
.status-cancelada {
  color: #b42318;
  border-color: #b42318;
  background: rgba(180, 35, 24, 0.08);  /* si NO quieres fondo, bórralo */
}

/* Vigencia consumida: recuadro naranja */
.status-consumida {
  color: #b76100;
  border-color: #b76100;
  background: rgba(183, 97, 0, 0.10);   /* si NO quieres fondo, bórralo */
}

/* Azul de marca (igual al de los botones) - ya definido arriba */

/* Número de póliza en el listado */
.num-poliza {
  color: var(--brand-blue);
  font-weight: 700;        /* mantiene el negrito del <strong> */
  letter-spacing: .2px;    /* opcional, se ve más nítido */
}

.pie-listado {
  display: flex;
  align-items: center;
  justify-content: space-between; /* izq = contador+pag, der = leyenda */
  gap: 1rem;
  flex-wrap: wrap;
}

.pie-izq {
  display: flex;
  align-items: center;
  gap: 1rem; /* separa contador y paginación */
}

.info-registros {
  font-size: .92rem;
  color: #334155; /* gris oscuro suave */
}

#btnAgregar:disabled,
#btnAgregar.btn-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.1);
}

/* Contenedor para alinear elementos en una fila (Aseguradora, Botón, Ramo) */
.form-row-flex {
  display: flex;
  align-items: flex-end; /* Alinea los elementos en la base */
  gap: 0.5rem; /* Pequeño espacio entre elementos */
}

.form-row-flex .flex-item-grow {
  flex: 1; /* Ocupa el espacio disponible */
}

.form-row-flex .flex-item-auto {
  flex: 0 0 auto; /* El tamaño se ajusta al contenido */
}

/* Estilo para el nuevo botón de ícono */
.btn-icon {
  padding: 0;
  width: 40px;  /* Ancho fijo */
  height: 40px; /* Misma altura que los selects */
  font-size: 1.1rem;
  background-color: #6c757d; /* Gris neutro */
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 1px; /* Pequeño ajuste para alinear con los selects */
}

.btn-icon:hover:not(:disabled) {
  background-color: #5a6268;
}

.btn-icon:disabled {
  background-color: #ced4da; /* Gris más claro cuando está deshabilitado */
  cursor: not-allowed;
  opacity: 0.7;
}

/* Contenedor para alinear un campo con un botón al lado */
.campo-con-boton {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Espacio entre el select y el botón */
}

.campo-con-boton select {
  flex-grow: 1; /* Hace que el select ocupe todo el espacio disponible */
}

#modalContactosAseg .modal-contenido {
  width: 95vw !important;   /* 95% del ancho de la ventana */
  max-width: 1200px !important; /* nunca más de 1200px */
  max-height: 80vh !important;
}


/* Solo afecta al modal de contactos de aseguradora */
#modalContactosAseg {
  display: flex;
  align-items: flex-start;  /* lo pega arriba */
  padding-top: 140px;        /* puedes ajustar este valor a tu gusto */
}

/* ===== ESTILOS PÁGINA DE LOGIN ===== */

/* 1. Fondo y centrado */
body.login-page {
  background-color: #eef2f7; /* Un gris azulado muy claro */
  background-image: linear-gradient(135deg, #f8f9fb 0%, #eef2f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0; /* Anulamos el padding general para el login */
}

/* 2. Contenedor principal (la "tarjeta") */
.login-container {
  background-color: #ffffff;
  padding: 40px 45px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  text-align: center;
}

/* 3. Logo y Títulos */
.login-logo {
  margin-bottom: 15px;
}

.login-container h2 {
  color: #2f3e46;
  font-size: 26px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 10px;
}

.login-subtitle {
  color: #6c757d;
  font-size: 15px;
  margin-bottom: 30px;
}

/* 4. Formulario y campos de entrada */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-group {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  font-size: 16px;
}

.login-form input {
  width: 100%;
  padding: 14px 14px 14px 45px; /* Espacio para el ícono */
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #f8f9fa;
}

.login-form input:focus {
  outline: none;
  border-color: #3a86ff;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.2);
}

/* 5. Botón de "Entrar" */
.login-form button {
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  background-color: #3a86ff; /* El azul principal de tu app */
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  margin-top: 10px;
}

.login-form button:hover {
  background-color: #2f6ee2; /* Un azul más oscuro */
}

.login-form button:active {
  transform: scale(0.98);
}

/* 6. Mensaje de error */
#msg {
  margin-top: 20px;
  color: #d90429;
  font-weight: 500;
  font-size: 14px;
  min-height: 20px;
}

/* ============================================= */
/* ==   ESTILOS ESPECÍFICOS MODAL DE USUARIOS   == */
/* ============================================= */

/* 1. Aumentamos el ancho MÁXIMO del modal de usuarios */
.modal-contenido-usuario {
  max-width: 1150px;
}

/* 2. Convierte el formulario en un grid de 3 columnas */
.modal-contenido-usuario form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 20px;
}

/* 3. Estilos para cada celda del grid */
.modal-contenido-usuario .form-group {
  display: flex;
  flex-direction: column;
}

/* 4. Clase de utilidad para que un elemento ocupe las 3 columnas */
.modal-contenido-usuario .grid-span-3 {
  grid-column: 1 / -1;
}

/* 5. Ajuste para los botones (posicionados a la derecha) */
.modal-contenido-usuario .botones-modal {
  grid-column: 2 / 4;         /* <-- CAMBIO CLAVE */
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 6. Ajuste para los radio buttons de Estado */
.modal-contenido-usuario #grupoEstado .radio-options {
  margin-top: 8px;
}

/* 7. Ajusta el tamaño de los botones del modal */
.modal-contenido-usuario .botones-modal button {
  padding: 8px 16px; /* Menos padding = botón más pequeño */
  font-size: 14px;   /* Letra un poco más pequeña */
}

button.facturar {
  background:#0d6efd; color:#fff; border:none; border-radius:6px; padding:.4rem .55rem;
  cursor:pointer;
}
button.facturar i { pointer-events:none; }
button.facturar:disabled { opacity:.6; cursor:not-allowed; }

/* ===== Modal Factura: layout por filas ===== */
.form-factura .fact-row {
  display: grid;
  gap: 12px;
  margin-bottom: 10px;
}
.form-factura .fact-row.cols-1 { grid-template-columns: 1fr; }
.form-factura .fact-row.cols-2 { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.form-factura .fact-row.cols-4 { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.form-factura .fact-row.cols-5 { grid-template-columns: repeat(5, minmax(140px, 1fr)); }
.form-factura .fact-row.cols-6 { grid-template-columns: repeat(6, minmax(120px, 1fr)); }

.form-factura .form-group label { font-weight: 600; font-size: .92rem; color: #444; }
.form-factura .form-group input,
.form-factura .form-group select,
.form-factura .form-group textarea { width: 100%; }

/* Responsive */
@media (max-width: 1200px) {
  .form-factura .fact-row.cols-6 { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .form-factura .fact-row.cols-5 { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}
@media (max-width: 768px) {
  .form-factura .fact-row.cols-6,
  .form-factura .fact-row.cols-5,
  .form-factura .fact-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .form-factura .fact-row.cols-2 { grid-template-columns: 1fr; }
}

/* ===== Vista previa de póliza en el modal ===== */
.factura-policy-preview {
  border: 1px solid #e0e0e0;
  background: #fafafa;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.factura-policy-preview table { width: 100%; border-collapse: collapse; }
.factura-policy-preview th, .factura-policy-preview td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
/* Reusa tus clases de estado si ya existen (status-badge, status-vigente, etc) */

/* Solo el modal de Factura */
#modalFactura .modal-contenido{
  width: 98vw !important;          /* ocupa casi todo el ancho de la ventana */
  max-width: 1950px !important;    /* tope “grande” que tú decidas */
  max-height: 90vh;     /* por si se vuelve muy alto */
  overflow: auto;       /* scroll interno si hace falta */
}

/* Si quieres aún más ancho en pantallas grandes */
@media (min-width: 1600px){
  #modalFactura .modal-contenido{
    max-width: 1600px;
  }
}

/* ===== Alinear anchos dentro del modal de facturas ===== */
#modalFactura .modal-contenido {
  max-width: 2500px;          /* ya lo tienes inline, aquí lo reforzamos */
}

/* Asegura que ambos bloques usen el 100% del ancho disponible */
#modalFactura .factura-policy-preview,
#modalFactura .factura-policy-preview > *,
#modalFactura .tabla-wrapper,
#modalFactura .data-table {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Si usas la versión de preview en formato tabla (class="preview-poliza"),
   también la igualamos al ancho de la tabla de facturas */
#modalFactura .preview-poliza {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
}

/* Hace que la tabla de facturas ajuste sus columnas al ancho 100% */
#modalFactura .data-table {
  table-layout: fixed;
}

/* Opcional: unifica “gutter” (bordes/padding laterales) para que
   los bordes del preview y la tabla coincidan visualmente */
#modalFactura .factura-policy-preview .context-header {
  padding-left: 16px;
  padding-right: 16px;
}
#modalFactura .tabla-wrapper {
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Elimina posibles márgenes distintos que desalineen horizontalmente */
#modalFactura .factura-policy-preview,
#modalFactura .tabla-wrapper {
  margin-left: 0;
  margin-right: 0;
}

/* Modal base (el grande de facturas) */
#modalFactura {
    z-index: 1000;
}

/* Modal de confirmación (el pequeño que debe ir encima) */
#modalConfirmar {
    z-index: 1050; /* Un número MÁS ALTO para que se muestre por encima */
}

.btn-secundario {
    background-color: transparent;      /* Fondo transparente */
    color: #6c757d;                   /* Color de texto gris (neutro) */
    border: 1px solid #ced4da;        /* Borde sutil */
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease-in-out; /* Efecto suave */
}

.btn-secundario:hover {
    background-color: #f8f9fa;       /* Un fondo muy claro al pasar el mouse */
    color: #212529;                   /* Texto más oscuro para resaltar */
    border-color: #adb5bd;
}

.factura-client-info {
    padding: 10px 15px;
    margin-bottom: 1rem;
    background-color: #e9ecef; /* Un gris claro y neutro */
    border-radius: 5px;
    font-size: 1.1rem; /* Un poco más grande para que resalte */
    font-weight: 500;
    color: #495057;    /* Color de texto principal */
    border: 1px solid #dee2e6;
    text-align: left;
}

.factura-client-info strong {
    color: #212529; /* Un color más oscuro para el nombre */
}

#modalFactura .factura-toolbar {
  width: 100%;
  box-sizing: border-box;
  padding-left: 16px;   /* igual que #modalFactura .tabla-wrapper */
  padding-right: 16px;  /* igual que #modalFactura .tabla-wrapper */
}

button.facturar {
  padding: 7px 12px;          /* igual que .editar / .eliminar */
  margin: 0 5px;              /* mismo espacio lateral */
  border-radius: 6px;         /* mismo borde redondeado */
  font-size: 13px;            /* misma tipografía */
  display: inline-flex;       /* centra el ícono */
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

button.facturar:hover {
  background-color: #0b5ed7;  /* hover acorde al azul base */
}

/* Alinea el preview al mismo gutter (16px) que la tabla y la toolbar */
#modalFactura .factura-policy-preview {
  padding-left: 16px;
  padding-right: 16px;
  background: transparent;   /* opcional: quita el gris para que parezca tabla normal */
  border: none;               /* opcional */
  margin-top: 8px;            /* respirito debajo del botón/cliente */
}

/* Haz que la tabla del preview luzca como la tabla principal */
#modalFactura .preview-poliza {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Mismos paddings/alto de fila que el listado principal */
#modalFactura .preview-poliza th,
#modalFactura .preview-poliza td {
  padding: 14px;                     /* antes eran 6–8px */
  border-bottom: 1px solid #e6e6e6;
  font-size: 14px;
  vertical-align: middle;
  text-align: left;
}

/* Encabezado igual que el listado */
#modalFactura .preview-poliza th {
  background-color: #3a86ff;
  color: #fff;
  font-weight: 600;
}

/* Zebra y hover, como en la tabla general */
#modalFactura .preview-poliza tbody tr:nth-child(even) {
  background-color: #f4f6f9;
}
#modalFactura .preview-poliza tbody tr:hover {
  background-color: #e6f0ff;
}

/* 1) En la vista de LISTADO: el bloque con datos del cliente */
#modalFactura #facturaClientInfo {
  margin-left: 16px;   /* mismo offset lateral que la tabla */
  margin-right: 16px;
}

/* 2) En la vista de FORMULARIO:
      el contenedor de la fila que trae el botón "← Volver al listado"
      (es el primer <div> dentro de #facturaFormPane) */
#modalFactura #facturaFormPane > div:first-child {
  padding-left: 16px;  /* alinea el botón con el inicio de la tabla */
  padding-right: 16px;
  box-sizing: border-box;
}

/* 3) En la vista de FORMULARIO: datos del cliente (debajo del botón) */
#modalFactura #facturaClientInfoForm {
  margin-left: 16px;   /* alinea el borde del recuadro con la tabla */
  margin-right: 16px;
}

/* 1) Gutter uniforme para todo el panel de formulario */
#modalFactura #facturaFormPane {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* 2) Botón "← Volver al listado" y bloque de cliente SIN padding/margen extra
      (anula reglas previas específicas) */
#modalFactura #facturaFormPane > div:first-child,
#modalFactura #facturaClientInfoForm {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) El preview dentro del FORM no debe añadir padding interno,
      así la tabla del preview queda alineada con el gutter del panel */
#modalFactura #facturaFormPane .factura-policy-preview {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* 4) El propio formulario no añade márgenes laterales extra */
#modalFactura #formFactura {
  margin-left: 0;
  margin-right: 0;
}

body.facturas-body #modalFactura #facturaClientInfoForm {
  margin-left: 16px !important;
  margin-right: 16px !important;
  box-sizing: border-box;
}

body.facturas-body #modalFactura #facturaPolicyPreview2 {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

body.facturas-body #modalFactura #facturaFormPane {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* ===== Modal Facturas: 3 elementos alineados en 1 fila ===== */
#modalFactura #fac_wrap_confirm{
  display: grid;                           /* convierte el bloque en grid */
  grid-template-columns: auto minmax(220px,1fr) minmax(220px,1fr);
  gap: 12px 16px;                          /* separación entre los 3 elementos */
  align-items: end;                        /* alinea con la base de los inputs */
  margin-top: .75rem !important;           /* ignora inline si lo hubiera */
  padding: 0;
}

/* El label (checkbox + texto) como primer ítem del grid */
#modalFactura #fac_wrap_confirm > label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Aplana el contenedor interno para que los 2 .form-group
   se comporten como 2 ítems del grid padre */
#modalFactura #fac_wrap_confirm .fact-row{
  display: contents;                       /* ¡clave! usa sus hijos en el grid */
  margin: 0 !important;
}

/* Limpia márgenes en los grupos de los inputs */
#modalFactura #fac_wrap_confirm .form-group{
  margin: 0;
}

/* Responsivo: en pantallas angostas, se apilan */
@media (max-width: 900px){
  #modalFactura #fac_wrap_confirm{
    grid-template-columns: 1fr;            /* 1 por línea */
    align-items: start;
  }
}

/* ===== Modal Facturas: ordenar y alinear (Prima | Valor | Checkbox) ===== */
#modalFactura #fac_wrap_confirm{
  display: grid;
  grid-template-columns: minmax(220px,1fr) minmax(220px,1fr) auto; /* Prima | Valor | Check */
  gap: 12px 16px;
  align-items: end; /* alinea con la base de los inputs */
}

/* Aplana el interior para que los 2 .form-group participen en el grid del padre */
#modalFactura #fac_wrap_confirm .fact-row{
  display: contents;
}

/* Orden deseado dentro del grid */
#modalFactura #fac_wrap_confirm .form-group:first-of-type{ order: 1; } /* Nueva Prima */
#modalFactura #fac_wrap_confirm .form-group:last-of-type { order: 2; } /* Nuevo Valor */
#modalFactura #fac_wrap_confirm > label{
  order: 3;                               /* Checkbox al final */
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  align-self: end;                         /* alinea con la base de los inputs */
}

/* Responsive: en pantallas angostas se apilan en 1 columna */
@media (max-width: 900px){
  #modalFactura #fac_wrap_confirm{
    grid-template-columns: 1fr;
    align-items: start;
  }
}

#modalCliente .modal-contenidoCliente {
  position: relative; /* necesario para posicionar el botón */
}

#modalCliente .modal-contenidoCliente {
  width: min(98vw, 1680px);
  height: min(94vh, 920px);
  max-width: 1680px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#modalCliente #formCliente {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

#modalCliente .tabs {
  flex: 0 0 auto;
}

#modalCliente .tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

#modalCliente .tab-content.oculto {
  display: none !important;
}

#modalCliente .modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;               /* tamaño área clicable */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: transparent;
  color: inherit;
  border: none;
  border-radius: 50%;        /* base circular */
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .05s ease;
}

#modalCliente .modal-close:hover {
  background: #e53935;       /* círculo rojo */
  color: #fff;               /* X blanca */
  box-shadow: 0 0 0 3px rgba(229, 57, 53, .18); /* aro suave */
}

#modalCliente .modal-close:active {
  transform: scale(0.96);
}

#modalCliente .modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, .35);
}

/* Contenedor flex para botón + buscador */
.search-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* El input crece y ocupa el resto */
.search-actions input[type="search"] {
  flex: 1 1 auto;
}

/* Para posicionar la X en este modal */
/* Asegura posicionamiento relativo del contenedor del modal de póliza */
#modalPoliza .modal-contenidoCliente { position: relative; }

/* Botón de cierre: área clickeable circular */
.modal .close-modal{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;               /* tamaño área clicable */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: transparent;
  color: inherit;
  border: none;
  border-radius: 50%;        /* base circular */
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .05s ease;
}

/* Hover: círculo rojo alrededor de la X */
.modal .close-modal:hover{
  background: #e53935;       /* círculo rojo */
  color: #fff;               /* X blanca */
  box-shadow: 0 0 0 3px rgba(229, 57, 53, .18); /* aro suave */
}

/* Feedback al hacer click / accesibilidad */
.modal .close-modal:active{ transform: scale(0.96); }

.modal .close-modal:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, .35);
}

#modalEstadoCuenta .modal-estado-cuenta {
  max-width: 500px;
  position: relative;
}

#modalEstadoCuenta {
  z-index: 1200;
}

#modalEstadoCuenta .close-modal {
  top: 8px;
  right: 10px;
}

.botones-modal .btn-danger{
  background:#dc3545;      /* rojo */
  border-color:#dc3545;
  color:#fff;
}

/* ===== Overrides: NO recuadro alrededor de las tablas de listados en el modal de Acuerdos ===== */

/* Alineación general (lo dejamos) */
#modalAcuerdo .modal-contenido { box-sizing: border-box; padding: 16px 20px; }
#modalAcuerdo .acuerdos-header,
#modalAcuerdo .panel,
#modalAcuerdo #acuerdoListPane { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; }

/* Mantener tarjeta SOLO para "División de cartera" (si te gusta el look) */
#modalAcuerdo #divisionCartera {
  background: #f8f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}

/* Quitar recuadro a la tabla de ACUERDOS (el listado) */
#modalAcuerdo #acuerdoListPane .tabla-wrapper {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;               /* sin sangría extra */
}

/* Restaurar el borde de la tabla si antes lo quitamos */
#modalAcuerdo #acuerdoListPane .tabla-wrapper .data-table {
  border: 1px solid #e5e7eb;       /* usa el estilo base de tus tablas si ya lo tienes */
  width: 100%;
}

/* Quitar recuadro a la tabla de CANALES (el otro listado) */
#modalAcuerdo .panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
#modalAcuerdo .panel .tabla-wrapper { margin-top: 8px; }  /* un poco de aire bajo el título */

/* Toolbar del listado (botón + leyenda) alineada al borde de la tabla */
#modalAcuerdo .acuerdo-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  margin: 10px 0 8px;     /* separación antes de la tabla */
  padding-left: 0;        /* sin sangría */
}

/* Separación vertical homogénea entre bloques */
#modalAcuerdo .acuerdos-header,
#modalAcuerdo .panel,
#modalAcuerdo #acuerdoListPane,
#modalAcuerdo #acuerdoFormPane,
#modalAcuerdo .tabla-wrapper,
#modalAcuerdo .acuerdo-toolbar,
#modalAcuerdo .acuerdo-title,
#modalAcuerdo .acuerdo-title-row {
  margin-bottom: 12px;
}

/* ===== Modal Acuerdo: igualar ancho de "Canales de contacto" y "Acuerdos" ===== */

/* contenedores sin sangrías laterales */
#modalAcuerdo .acuerdos-header,
#modalAcuerdo .panel,
#modalAcuerdo #acuerdoListPane {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* wrapper de tablas: sin recuadro y ocupando todo el ancho */
#modalAcuerdo .panel .tabla-wrapper,
#modalAcuerdo #acuerdoListPane .tabla-wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* tablas a 100% y, si quieres, layout fijo para columnas consistentes */
#modalAcuerdo .panel .tabla-wrapper .data-table,
#modalAcuerdo #acuerdoListPane .tabla-wrapper .data-table {
  width: 100% !important;
  table-layout: fixed;              /* quítalo si prefieres auto */
}

/* evita desbordes visuales en celdas estrechas */
#modalAcuerdo .panel .data-table th,
#modalAcuerdo .panel .data-table td,
#modalAcuerdo #acuerdoListPane .data-table th,
#modalAcuerdo #acuerdoListPane .data-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* toolbar del listado de acuerdos: botón a la izquierda, pegado al borde */
#modalAcuerdo #acuerdoListPane .factura-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* <— botón a la izquierda */
  gap: .75rem !important;
  margin: 10px 0 8px !important;           /* igual separación que el resto */
  padding: 0 !important;
}

/* asegúrate de que el botón quede pegado al borde izquierdo */
#modalAcuerdo #btnAddAcuerdo { margin-left: 0 !important; }

/* ===== Modal Acuerdos: alineación y estética ===== */
#modalAcuerdo .modal-contenido { padding: 16px 24px; }

#modalAcuerdo .acuerdo-toolbar {
  display: flex;
  justify-content: flex-start;
  margin: 6px 0 10px;
}

#modalAcuerdo .acuerdo-section { margin-top: .75rem; }

#modalAcuerdo .acuerdo-title,
#modalAcuerdo .acuerdo-title-row {
  font-size: 1rem;
  font-weight: 600;
  margin: .75rem 0 .5rem;
}

#modalAcuerdo .acuerdo-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#modalAcuerdo .acuerdo-actions > * { margin-left: .5rem; }

/* Quitar “recuadro” y alinear bordes de tablas */
#modalAcuerdo .panel { background: transparent; border: none; padding: 0; }
#modalAcuerdo .panel-header { margin-bottom: .5rem; }

#modalAcuerdo .tabla-wrapper { border: none; padding: 0; margin: 0; }
#modalAcuerdo .tabla-wrapper table { width: 100%; border-collapse: collapse; }

/* Unificar márgenes horizontales de todas las secciones para que queden alineadas */
#modalAcuerdo .acuerdos-header,
#modalAcuerdo .panel,
#modalAcuerdo #acuerdoListPane,
#modalAcuerdo #acuerdoFormPane,
#modalAcuerdo .tabla-wrapper,
#modalAcuerdo .acuerdo-toolbar,
#modalAcuerdo .acuerdo-title,
#modalAcuerdo .acuerdo-title-row {
  margin-left: 0;
  margin-right: 0;
}

/* Inline para los checks del título de cuotas */
#modalAcuerdo .fact-row.inline {
  display: flex;
  align-items: center;
  gap: .75rem;
}
#modalAcuerdo .fact-row.inline .form-group { margin: 0; }

/* Mantener el form alineado con tablas */
#modalAcuerdo .form-factura { margin: 0; }

/* 3.1 Quitar “recuadro” visual de los listados dentro del modal de acuerdos */
#modalAcuerdo .panel,
#modalAcuerdo .tabla-wrapper {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* 3.2 Unificar el ancho y alineación izquierda de TODO:
   - barra de botones
   - division de cartera
   - tabla de canales
   - tabla de acuerdos
   - secciones del formulario
*/
#modalAcuerdo .acuerdo-toolbar,
#modalAcuerdo .acuerdos-header,
#modalAcuerdo .panel,
#modalAcuerdo #acuerdoListPane .tabla-wrapper,
#modalAcuerdo #acuerdoFormPane .acuerdo-section,
#modalAcuerdo #acuerdoFormPane .tabla-wrapper,
#modalAcuerdo #acuerdoFormPane .fact-row,
#modalAcuerdo .acuerdo-title,
#modalAcuerdo .acuerdo-title-row {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* 3.3 La barra del botón “+ Añadir acuerdo” pegada a la izquierda (alineada con las tablas) */
#modalAcuerdo .acuerdo-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* botón a la izquierda */
  margin: 10px 0 12px;
}

/* 3.4 La grilla de división de cartera sin recuadro grueso (si quieres algo muy sutil, deja sólo el borde claro) */
#modalAcuerdo .division-cartera {
  background: #f8f9fb;
  border: 1px solid #e5e7eb;   /* o quita esta línea si no quieres borde */
  border-radius: .5rem;
  padding: .75rem;
}

/* 3.5 Tablas al 100% y sin marcos externos raros */
#modalAcuerdo table.data-table {
  width: 100%;
  border-collapse: collapse;
}

/* 3.6 Celdas cómodas y consistentes */
#modalAcuerdo .data-table th,
#modalAcuerdo .data-table td {
  padding: 8px 10px;
}

/* 3.7 Títulos de sección consistentes */
#modalAcuerdo .acuerdo-title {
  margin: 16px 0 8px;
  font-size: 1rem;
  color: #444;
}

#modalAcuerdo .acuerdo-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 8px;
}

#modalAcuerdo .acuerdo-title-row .acuerdo-actions,
#modalAcuerdo .acuerdo-title-row .acuerdo-controls {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* 3.8 Panel superior “solo en FORM” (barra volver) bien alineado */
#modalAcuerdo .acuerdo-toolbar.oculto { display: none !important; }

/* 3.9 Por si acaso, reforzar ocultamiento genérico */
.oculto { display: none !important; }

/* Nuevo estilo para la tabla de división de cartera */
.division-cartera table.datos-cliente {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background-color: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.division-cartera table.datos-cliente th,
.division-cartera table.datos-cliente td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    text-align: left;
    white-space: nowrap;
}

.division-cartera table.datos-cliente th {
    font-weight: 600;
    color: #495057;
    width: 0%; /* Ajusta este valor si necesitas más espacio para las etiquetas */
}

.division-cartera table.datos-cliente td {
    color: #333;
    width: 30%; /* Ajusta este valor para el contenido */
}

.division-cartera table.datos-cliente th {
  background-color: transparent; /* Fondo transparente */
  color: #495057; /* Un color de texto oscuro que coincida con el fondo */
  font-weight: 600;
  border-bottom: none; /* Opcional: elimina el borde inferior si no lo quieres */
}

fieldset {
  border-radius: 8px; /* Ajusta este valor si quieres bordes más o menos curvos */
}

#modalAcuerdo .checkbox-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
#modalAcuerdo .checkbox-cell label {
  margin: 0;
}

/* Botón de gestión de bienes */
button.gestionar-bienes {
    background-color: #28a745;  /* Verde para bienes */
    color: white;
    border: none;
    padding: 7px 12px;
    margin: 0 5px;
    border-radius: 6px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

button.gestionar-bienes:hover {
    background-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button.gestionar-bienes i {
    pointer-events: none;
}

/* Botón de gestión de bienes */
button.gestionar-bienes {
    padding: 7px 12px;
    margin: 0 5px;
    border-radius: 6px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}

button.gestionar-bienes:hover {
    background-color: #218838;
}

button.gestionar-bienes i {
    pointer-events: none;
}

/* ===== BOTONES ESPECÍFICOS PARA BIENES ===== */
.btn-secundario {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    box-sizing: border-box;
}

.btn-secundario:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-secundario:active {
    transform: translateY(0);
}

/* Campo de nombre auto-generado */
.campo-autogenerado {
    background-color: #f8f9fa !important;
    border-left: 3px solid #28a745 !important;
}

.campo-autogenerado:focus {
    background-color: #fff !important;
}

/* Indicador de campo requerido mejorado */
.form-group label .required {
    color: #dc3545;
    font-weight: bold;
    margin-left: 2px;
}

/* Indicador de campo calculado */
.campo-calculado {
    background-color: #e3f2fd !important;
    border-left: 3px solid #2196f3 !important;
}

/* ===== ESTILOS PARA INFORMACIÓN CONTEXTUAL DE PÓLIZA (ESTILO IMAGEN) ===== */
.policy-info-horizontal {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #2196f3;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.policy-section {
    background: #1976d2;
    color: white;
    padding: 8px 15px;
    border-bottom: 1px solid #1565c0;
}

.policy-section strong {
    font-size: 14px;
    font-weight: 600;
    margin-right: 15px;
}

.policy-tabs {
    display: inline-flex;
    gap: 20px;
}

.policy-tabs .tab {
    font-size: 12px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.policy-tabs .tab.active {
    background: rgba(255,255,255,0.3);
    font-weight: 600;
}

.policy-tabs .tab:hover {
    background: rgba(255,255,255,0.25);
}

.policy-details {
    padding: 15px;
}

.policy-row {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    align-items: center;
}

.policy-row:last-child {
    margin-bottom: 0;
}

.policy-item {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    flex: 1;
}

.policy-item span {
    font-weight: 600;
    color: #1565c0;
    font-size: 14px;
    margin-bottom: 2px;
}

.policy-item .policy-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.policy-number {
    color: #1976d2 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.balance-highlight {
    color: #d32f2f !important;
    font-weight: 700 !important;
    background: rgba(244, 67, 54, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.balance-highlight.settled {
    color: #388e3c !important;
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.2);
}

/* Enlace de retorno */
.back-link {
    display: inline-block;
    margin-bottom: 25px;
    font-weight: 600;
    color: #6c757d;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    background-color: #f7f7f7;
    transition: background-color 0.3s;
}

.back-link:hover {
    background-color: #dee2e6;
}

.back-link i {
    margin-right: 8px;
}

/* ===== ESTILOS PARA BOTÓN AGREGAR BIEN ===== */
#btnAgregarBien,
.btn-agregar {
    padding: 10px 16px;
    font-size: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

#btnAgregarBien:hover,
.btn-agregar:hover {
    background-color: #0056b3;
}

/* ===== CONTENEDOR DE ARCHIVO DIGITAL ===== */
.archivo-digital-container {
    text-align: center;
    padding: 40px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
    border: 2px dashed #dee2e6;
}

.archivo-digital-container h3 {
    color: #6c757d;
    margin-bottom: 15px;
}

.archivo-digital-container p {
    color: #6c757d;
}

.archivo-digital-container i {
    color: #adb5bd;
}

/* ===== ESTILOS ESPECÍFICOS PARA MODAL DE BIENES ===== */
#modalBien .modal-contenidoCliente {
    position: relative;
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

#modalBien #btnCerrarModalBien {
    top: 12px;
    right: 12px;
    z-index: 5;
}

#modalBien input,
#modalBien select,
#modalBien textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    margin: 6px 0;
    background-color: #fff;
    box-sizing: border-box;
    font-family: inherit;
}

#modalBien textarea {
    min-height: 80px;
    resize: vertical;
}

#modalBien label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* Botones del modal de bienes */
#modalBien .botones-modal {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

#modalBien .botones-modal button {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#btnGuardarBien {
    background-color: #28a745;
    color: white;
}

#btnGuardarBien:hover {
    background-color: #218838;
}

#btnCancelarBien {
    background-color: #6c757d;
    color: white;
}

#btnCancelarBien:hover {
    background-color: #5a6268;
}

/* ===== ESTILOS PARA SECCIONES LADO A LADO EN MODAL DE VEHÍCULOS ===== */
.form-sections-container {
    display: flex;
    gap: 20px;
    width: 100%;
}

.form-section-left,
.form-section-right {
    flex: 1;
    min-width: 0; /* Permite que los elementos se encojan */
}

.form-section-left {
    flex: 1.2; /* Un poco más de espacio para identificación */
}

.form-section-right {
    flex: 1; /* Espacio normal para valores y cobertura */
}

/* Ajustes para campos de formulario en secciones lado a lado */
.form-sections-container input,
.form-sections-container select,
.form-sections-container textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive: En pantallas pequeñas, las secciones se apilan */
@media (max-width: 1200px) {
    .form-sections-container {
        flex-direction: column;
    }

    .form-section-left,
    .form-section-right {
        flex: none;
    }
}

/* === ESTILOS ESPECÍFICOS PARA BIENES === */

/* Tabla de póliza en bienes */
#polizaInfo table {
    margin-bottom: 20px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#polizaInfo table thead {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

#polizaInfo table thead th {
    color: white;
    font-weight: 600;
    padding: 12px 16px;
    text-align: center;
}

#polizaInfo table tbody td {
    padding: 16px;
    text-align: center;
    vertical-align: top;
    background-color: #ffffff;
}

/* Estilos para los badges de estado */
.badge-vigente {
    background-color: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

.badge-cancelada {
    background-color: #dc3545;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

/* Números de póliza destacados */
.policy-number {
    font-weight: 700;
    font-size: 1.1em;
    color: #007bff;
}

/* Mejoras para la alineación de las secciones del modal de vehículo */
.form-sections-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    min-height: 500px;
}

.form-section-left,
.form-section-right {
    height: 100%;
}

.form-section-left fieldset,
.form-section-right fieldset {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

/* Responsive para el modal de vehículo actualizado */
@media (max-width: 1200px) {
    .form-sections-container {
        grid-template-columns: 1fr;
        gap: 15px;
        min-height: auto;
    }

    .form-section-left fieldset,
    .form-section-right fieldset {
        min-height: auto;
    }
}

.titulo-contexto-poliza-superior:not(.oculto) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 15px;
    padding: 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d2d2d;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Celda de División de Cartera en 2 columnas */
td.col-division { white-space: normal; vertical-align: top; padding-top: 10px; padding-bottom: 10px; }

.col-division .dc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 columnas */
  gap: 6px 10px;                    /* row-gap | col-gap */
  align-items: start;
}

.dc-item{
  display: inline-flex;
  gap: 6px;
  min-width: 0;
}

.dc-item strong{ color:#495057; font-weight:600; }
.dc-item .value{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; max-width:100%;
}

#tablaListadoPolizas td.col-division .dc-item .value {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* móvil: 1 columna */
@media (max-width: 768px){ .col-division .dc-grid{ grid-template-columns: 1fr; } }

#modalSelCliente #btnCrearClienteDesdePoliza,
/* 2) ← Volver al listado (Facturación y Acuerdos) */
#modalFactura  #btnVolverListado,
#modalAcuerdo  #btnVolverAcuerdoListadoTop,
#modalAcuerdo  #btnVolverAcuerdoListado,
/* 3) Generar cuotas (Acuerdos de pago) */
#modalAcuerdo  #acu_btn_generar {
  background-color: #f1f3f5 !important;  /* gris bien clarito */
  color: #495057 !important;             /* texto gris medio */
  border: 1px solid #dfe3e6 !important;  /* borde suave */
}

/* Hover */
#modalSelCliente #btnCrearClienteDesdePoliza:hover,
#modalFactura  #btnVolverListado:hover,
#modalAcuerdo  #btnVolverAcuerdoListadoTop:hover,
#modalAcuerdo  #btnVolverAcuerdoListado:hover,
#modalAcuerdo  #acu_btn_generar:hover {
  background-color: #e9ecef !important;
  color: #212529 !important;
  border-color: #cfd4da !important;
}

/* Disabled (por si aplica) */
#modalSelCliente #btnCrearClienteDesdePoliza:disabled,
#modalFactura  #btnVolverListado:disabled,
#modalAcuerdo  #btnVolverAcuerdoListadoTop:disabled,
#modalAcuerdo  #btnVolverAcuerdoListado:disabled,
#modalAcuerdo  #acu_btn_generar:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/*
  Ajuste general para los elementos del modal de Cobros.
  Establece un ancho del 100% y elimina los márgenes para una alineación perfecta.
*/
#modalCobro .factura-policy-preview,
#modalEditarCobro .factura-policy-preview,
#modalCobro .tabla-wrapper,
#modalEditarCobro .tabla-wrapper,
#modalCobro .factura-toolbar,
#modalCobro .form-factura,
#modalEditarCobro .form-factura,
#modalCobro .factura-client-info,
#modalEditarCobro .factura-client-info {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

#modalCobro .modal-contenido {
    padding-left: 1rem;
    padding-right: 1rem;
     max-width: 2000px !important;
}

#modalEditarCobro .modal-contenido.cobro-edicion-modal {
    width: min(96vw, 1800px);
    max-width: 1800px !important;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* Asegura que los fieldsets del formulario de cobros ocupen el ancho completo */
#modalCobro .form-factura fieldset,
#modalEditarCobro .form-factura fieldset {
    width: 100%;
}

/* La barra de herramientas y la información del cliente también se ajustan al 100% */
#modalCobro .factura-toolbar,
#modalCobro .factura-client-info {
    width: 100%;
}

/* Las tablas internas se alinean al 100% del ancho del contenedor */
#modalCobro .data-table {
    width: 100%;
    table-layout: fixed;
}

#modalEditarCobro .data-table {
    width: 100%;
    table-layout: fixed;
}

#modalCobro .form-factura .fact-row,
#modalEditarCobro .form-factura .fact-row {
    display: grid;
    gap: 12px;
    margin-bottom: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* <-- Ajuste clave */
}

#modalCobro #tbodyCobroDistribFacturas,
#modalCobro #tbodyCobroDistribCuotas {
    width: 100%;
    table-layout: auto; /* <-- Usa 'auto' para que las celdas se ajusten al contenido */
}

/*
 * Contenedor flexible para las tablas de distribución
 * Utiliza CSS Grid para un control preciso de las columnas
 */
.distribucion-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Relación de 2 a 1 para las columnas */
  gap: 20px; /* Espacio entre las columnas */
}

/* Las columnas individuales se adaptan al espacio */
.distribucion-col-1,
.distribucion-col-2 {
  min-width: 0; /* Permite que las columnas se encogen si es necesario */
}

/*
 * Estilos para las tablas dentro de la distribución
 * Se asegura de que las columnas se ajusten de manera uniforme
 */
.distribucion-wrapper .data-table {
  width: 100%;
  table-layout: fixed; /* Mantiene el ancho de la tabla flexible */
}

/*
 * Columnas de entrada de datos
 * Alinear a la derecha para montos y hacerlas más pequeñas
 */
#tbodyCobroDistribFacturas input[type="text"],
#tbodyCobroDistribCuotas input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  text-align: right;
}

/* Evita que los encabezados de tabla se rompan */
.distribucion-wrapper th {
  white-space: nowrap;
}

/* Estilo para las celdas de concepto */
#tbodyCobroDistribFacturas td:last-child input {
  min-width: 150px;
}

/* --- Ajustes para alinear recuadros en el modal de cobros --- */
#modalCobro .modal-contenido {
  max-width: 100%;            /* no permitir que el contenido se desborde */
  overflow-x: hidden;         /* quitar scroll horizontal */
  box-sizing: border-box;     /* incluir paddings y bordes en el ancho */
}

#modalCobro fieldset,
#modalEditarCobro fieldset,
#modalCobro .tabla-wrapper,
#modalEditarCobro .tabla-wrapper,
#modalCobro .distribucion-wrapper {
  width: 100% !important;     /* que todos los recuadros respeten el ancho */
  box-sizing: border-box;     /* asegurar que no sobresalgan */
  margin-right: 0;
  padding-right: 0;
}

#modalCobro table,
#modalEditarCobro table {
  width: 100%;                /* tablas ocupan el ancho sin desbordarse */
  table-layout: auto;
}

/* Dar el mismo padding interno a los fieldset del modal de cobros */
#modalCobro fieldset,
#modalEditarCobro fieldset {
  padding: 0.75rem 1rem 1rem 1rem;  /* espacio interno arriba, derecha, abajo, izquierda */
  border: 1px solid #ccc;           /* borde uniforme */
  border-radius: 6px;               /* esquinas suaves como en otros recuadros */
  box-sizing: border-box;
}

#modalCobro .tabla-wrapper,
#modalEditarCobro .tabla-wrapper {
  padding-right: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.btn-secundario {
  background-color: #e0e0e0;  /* gris claro */
  color: #333;
  border: 1px solid #bbb;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secundario:hover {
  background-color: #d5d5d5;
}

/* === Ajustes para la sección Distribución del monto del cobro === */
#modalCobro .distribucion-wrapper {
  display: grid;
  grid-template-columns: 4fr 3fr; /* Ajuste para 60% y 40% */
  gap: 20px;
  width: 100%;
}

#modalCobro .distribucion-col-1,
#modalCobro .distribucion-col-2 {
  min-width: 0;
  overflow-x: visible;
}

/* Forzar ancho mínimo a la columna "Concepto" */
#tbodyCobroDistribFacturas th:last-child,
#tbodyCobroDistribFacturas td:last-child {
  min-width: 220px;     /* Ajusta según lo que necesites */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*
 * Ajuste para la columna de concepto
 * Aumenta el ancho mínimo del campo de texto
 */
#tbodyCobroDistribFacturas td:last-child {
    min-width: 220px; /* Asegura un ancho mínimo para la celda */
}

#tbodyCobroDistribFacturas td:last-child input {
    width: 100%; /* El input ocupa el 100% de la celda */
}

/* Definir anchos específicos para cada columna de la tabla de facturas */

/* --- Ajustes tabla distribución de cobros --- */
#modalCobro .distribucion-col-1 .data-table {
  table-layout: auto;          /* Que las columnas se ajusten a su contenido */
  width: 100%;                 /* Ocupa todo el ancho disponible */
}

#modalCobro .distribucion-col-1 .data-table th,
#modalCobro .distribucion-col-1 .data-table td {
  padding: 8px 12px;           /* Más espacio horizontal en celdas */
  white-space: nowrap;         /* Evita cortes en textos cortos */
}

#modalCobro .distribucion-col-1 .data-table td:last-child,
#modalCobro .distribucion-col-1 .data-table th:last-child {
  min-width: 220px;            /* 🔑 Asegura ancho para la columna de concepto */
  white-space: normal;         /* Permite que el texto largo haga salto de línea */
}

/* Inputs alineados a la izquierda */
#modalCobro .distribucion-col-1 .data-table input.cob_monto_fact,
#modalCobro .distribucion-col-1 .data-table input.cob_concepto_fact {
  text-align: left;          /* 🔑 texto alineado a la izquierda */
  padding-left: 6px;         /* un poco de padding interno */
}

/* Columna de póliza más ancha */
#modalCobro .distribucion-col-1 .data-table td:first-child,
#modalCobro .distribucion-col-1 .data-table th:first-child {
  min-width: 120px;          /* más espacio para el select de póliza */
}

/* === Ajuste visual del modal de Créditos (Igual al de Cobros) === */
#modalCredito .modal-contenido {
  width: auto;                  /* Deja que el navegador calcule el ancho natural */
  max-width: 2000px !important; /* Igual que el modal de Cobros */
  margin: 0 auto;
  padding-left: 1rem;           /* Mismo padding que Cobros (1rem = 16px aprox) */
  padding-right: 1rem;
  box-sizing: border-box;
  overflow-x: hidden;           /* Evita scroll horizontal general del modal */
}

/* Alinear la tabla con la barra de cliente */
#creditoClientInfo,
#tablaCreditosPoliza {
  width: 100%;
  box-sizing: border-box;
}

/* El contenedor de tabla debe ocupar todo el ancho disponible */
#modalCredito .tabla-wrapper {
  margin-top: 0.5rem;
  width: 100%;
}

/* Ajustar padding para que los bordes coincidan */
#modalCredito .factura-toolbar,
#modalCredito .tabla-wrapper,
#creditoClientInfo {
  padding: 0 1rem;
}

/* Opcional: mejorar legibilidad */
#modalCredito .factura-toolbar {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #fafafa;
  margin-bottom: 0;
}

.acuerdo-separador {
  background: #eef3ff !important;
  font-weight: bold;
  border-top: 2px solid #ccd8f0;
}

/* ======= AJUSTES VISUALES MODAL CRÉDITOS ======= */
/* Solo alineación y estructura - SIN cambiar colores existentes */

#modalCredito .form-factura {
  max-width: 1850px;
  margin: 0 auto;
}

/* Alinear tablas con los bordes de los inputs */
#modalCredito fieldset {
  border: 1px solid #ccc;
  padding: 15px;
  margin-top: 15px;
  border-radius: 8px;
}

#modalCredito .tabla-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Hacer que todas las tablas ocupen el mismo ancho que los inputs */
#modalCredito .data-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Eliminar el scroll horizontal no deseado */
#modalCredito .distribucion-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Cada columna de distribución ocupa 49% del recuadro */
#modalCredito .distribucion-col-1,
#modalCredito .distribucion-col-2 {
  flex: 1 1 48%;
  min-width: 48%;
  box-sizing: border-box;
}

/* Ajuste del recuadro para que no se desborde */
#modalCredito .distribucion-col-1 .tabla-wrapper,
#modalCredito .distribucion-col-2 .tabla-wrapper {
  overflow-x: hidden;
}

/* ELIMINAR LÍNEAS/BORDES DE LAS TABLAS - mantener estilo original */
#modalCredito table.data-table th,
#modalCredito table.data-table td {
  /* QUITAR bordes que se agregaron */
  border: none !important;
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}

/* Ajustar totales a la izquierda sin desbordarse */
#modalCredito .total-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px 10px;
  background-color: #f0f4ff;
  border: 1px solid #cfd8ff;
  border-radius: 6px;
}

/* Mantener los colores originales de los encabezados */
#modalCredito .data-table th {
  /* Los estilos de color se mantienen del CSS original */
  background-color: #3a86ff !important; /* Azul original */
  color: white !important; /* Texto blanco original */
  font-weight: 600;
}

/* Asegurar que las tablas de distribución se mantengan dentro del fieldset */
#modalCredito fieldset:has(.distribucion-wrapper) {
  overflow: hidden;
}

/* Alineación específica para la tabla de selección de facturas */
#modalCredito #tbodyCreditoFacturasElegibles {
  width: 100%;
}

/* Responsive para pantallas más pequeñas */
@media (max-width: 1400px) {
  #modalCredito .distribucion-col-1,
  #modalCredito .distribucion-col-2 {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* === AJUSTE DE ENCABEZADOS DE TABLAS (COBROS Y CRÉDITOS) === */

/* Unifica el alto y el padding de los encabezados */
#modalCobro table.data-table th,
#modalCredito table.data-table th {
  padding: 10px 8px;           /* igual que en cobros */
  font-size: 0.95rem;          /* tamaño de fuente coherente */
  height: 40px;                /* alto consistente */
  vertical-align: middle;      /* centra el texto verticalmente */
}

/* Asegura que los textos largos no se corten */
#modalCredito table.data-table th {
  white-space: nowrap;
}

/* Opcional: si notas que en créditos la fuente se ve más apretada */
#modalCredito table.data-table thead th {
  line-height: 1.2;            /* mejora la legibilidad */
}

/* === UNIFICAR ESTILO DISTRIBUCIÓN CRÉDITOS CON COBROS === */

#modalCredito .data-table td,
#modalCredito .data-table th {
  padding: 6px 8px;
  height: 38px;
  vertical-align: middle;
}

#modalCredito .data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

#modalCredito .data-table tr:hover {
  background-color: #eef4ff;
}

/* Inputs de montos de distribución */
#modalCredito input.cred_monto_fact,
#modalCredito input.cred_monto_cuota,
#modalCredito input.cred_concepto_fact {
  width: 100px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: right;
  font-size: 0.9rem;
}

#modalCredito input.cred_concepto_fact {
  width: 200px;
  text-align: left;
}

/* Centrado y eliminación de scroll horizontal */
#modalCredito .fieldsetDistribucion {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* === Alinear Fechas de Efectividad en una fila y Nota debajo ocupando toda la línea === */
#modalCredito .fact-row.cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dos columnas iguales */
  gap: 15px;
}

#modalCredito #cred_nota,
#modalCredito #cred_nota.form-group,
#modalCredito #cred_nota ~ .form-group:last-child {
  width: 100%;
}

/* Asegura que el form-group que contiene la nota ocupe las 2 columnas */
#modalCredito .fact-row.cols-3 .form-group:last-child {
  grid-column: 1 / span 2; /* la nota se extiende a lo ancho completo */
}

/* =========================================================
   CORRECCIÓN DEFINITIVA TABLA DISTRIBUCIÓN CRÉDITOS
   ========================================================= */

/* 1. Layout fijo obligatorio */
#modalCredito .distribucion-col-1 .data-table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse;
}

/* 2. NUEVOS ANCHOS PARA QUE QUEPAN LOS TÍTULOS */

/* Póliza: reducimos un poco (de 11% a 9%) */
#modalCredito .distribucion-col-1 .data-table th:nth-child(1),
#modalCredito .distribucion-col-1 .data-table td:nth-child(1) { width: 9%; }

/* N° Factura: reducimos (de 10% a 8%) */
#modalCredito .distribucion-col-1 .data-table th:nth-child(2),
#modalCredito .distribucion-col-1 .data-table td:nth-child(2) { width: 8%; }

/* Fecha Emisión: AUMENTAMOS (de 10% a 13%) para que quepa el título */
#modalCredito .distribucion-col-1 .data-table th:nth-child(3),
#modalCredito .distribucion-col-1 .data-table td:nth-child(3) { width: 13%; }

/* Vigencia: mantenemos espacio (18%) */
#modalCredito .distribucion-col-1 .data-table th:nth-child(4),
#modalCredito .distribucion-col-1 .data-table td:nth-child(4) { width: 18%; }

/* Balance: ajustamos (11%) */
#modalCredito .distribucion-col-1 .data-table th:nth-child(5),
#modalCredito .distribucion-col-1 .data-table td:nth-child(5) { width: 11%; }

/* Días: mínimo posible (4%) */
#modalCredito .distribucion-col-1 .data-table th:nth-child(6),
#modalCredito .distribucion-col-1 .data-table td:nth-child(6) { width: 4%; }

/* Monto Acreditar: AUMENTAMOS (de 11% a 14%) para el título largo */
#modalCredito .distribucion-col-1 .data-table th:nth-child(7),
#modalCredito .distribucion-col-1 .data-table td:nth-child(7) { width: 14%; }

/* Concepto: El resto (23%) */
#modalCredito .distribucion-col-1 .data-table th:nth-child(8),
#modalCredito .distribucion-col-1 .data-table td:nth-child(8) { width: 23%; }


/* 3. Ajustes de texto para encabezados */
#modalCredito .distribucion-col-1 .data-table th {
  white-space: nowrap;          /* Evita que el título se parta en dos líneas */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem;           /* Reducimos ligeramente la fuente del encabezado para asegurar ajuste */
  padding: 8px 4px;             /* Menos padding lateral para ganar espacio */
  text-align: center;
}

#modalCredito .distribucion-col-1 .data-table td {
  padding: 4px;
}

/* 4. Corrección para evitar conflictos anteriores en la última columna */
#modalCredito #tbodyCreditoDistribFacturas td:last-child {
  min-width: auto !important; 
  overflow: visible;
}

#modalCredito #tbodyCreditoDistribFacturas input.cred_concepto_fact {
  width: 100% !important;
  box-sizing: border-box;
  min-width: 0;
}

/* ✅ EXCEPCIÓN: columna de Concepto */
#modalCredito #tbodyCreditoDistribFacturas th:last-child,
#modalCredito #tbodyCreditoDistribFacturas td:last-child {
  white-space: normal !important;    /* permite múltiples líneas */
  word-break: break-word;            /* rompe palabras largas */
  overflow: visible !important;      /* deja que se vea el contenido completo */
  text-align: left;                  /* alinea el texto a la izquierda */
  min-width: 250px;                  /* un ancho cómodo */
}

/* ✅ El input dentro de Concepto se ajusta completamente */
#modalCredito #tbodyCreditoDistribFacturas td:last-child input.cred_concepto_fact {
  width: 100% !important;            /* ocupa todo el espacio de la celda */
  max-width: none !important;        /* sin límite de ancho */
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  box-sizing: border-box;
  height: auto;
}

/* Estilo gris para inputs/selects deshabilitados dentro de modales de bienes */
#modalBien input:disabled,
#modalBien select:disabled,
#modalBien textarea:disabled,
#modalBien input[readonly],
#modalBien textarea[readonly] {
  background-color: #eef2f7;
  color: #6b7280;
  border-color: #d1d5db;
  cursor: not-allowed;
}

#salud-descpdss:disabled {
  background-color: #f1f5f9;
}

.pdss-checkbox-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;             /* pequeño espacio entre cajita y texto */
  margin-left: 2px !important;    /* moverlo un poco a la izquierda */
  line-height: 1 !important;
  position: relative;
  transform: translateY(-26px);    /* moverlo hacia arriba para alinearlo con "Descuento PDSS" */
}

/* Ajuste del checkbox dentro del label específico */
.pdss-checkbox-label input[type="checkbox"] {
  margin: 0 !important;
  position: relative;
  top: 0px;
}

/* ============================================== */
/* ESTILOS PARA VISTA DE EXCLUSIÓN (INLINE) */
/* ============================================== */

#vista-exclusion-bien {
  margin-top: 20px;
}

#vista-exclusion-bien .form-container {
  padding: 25px;
  border-radius: 8px;
  background-color: #fdfdfd;
  border: 1px solid #eef;
  margin-top: 20px;
}

#vista-exclusion-bien .form-container h3 {
  text-align: center;
  color: var(--primary-color);
  margin-top: 5px;
  margin-bottom: 30px;
  font-size: 1.4em;
}

#vista-exclusion-bien .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
}

#vista-exclusion-bien .form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 150px;
}

#vista-exclusion-bien .form-group.compact {
  min-width: 0;
}

#vista-exclusion-bien .form-group.three-col {
  flex: 1 1 0px;
  min-width: 130px;
}

#vista-exclusion-bien .form-group.col-25 {
  flex: 1;
  max-width: 40%;
  min-width: 100px;
}

#vista-exclusion-bien .form-group.col-75 {
  flex: 3;
  max-width: 60%;
  min-width: 280px;
}

#vista-exclusion-bien .form-group label {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: var(--dark-gray);
}

#vista-exclusion-bien .form-group label .required {
  color: var(--danger-color);
  font-size: 1.2em;
  margin-left: 2px;
}

#vista-exclusion-bien .form-group input,
#vista-exclusion-bien .form-group select,
#vista-exclusion-bien .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1em;
}

#vista-exclusion-bien .form-group textarea {
  resize: vertical;
  min-height: 80px;
}

#vista-exclusion-bien .form-section {
  flex: 1;
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  min-width: 400px;
  background-color: white;
}

/* Sección izquierda (lista de bienes) más ancha como en referencia */
#vista-exclusion-bien .form-section.exclusion-list {
  flex: 3;
  min-width: 760px;
}

#vista-exclusion-bien .form-section.exclusion-data {
  border-color: var(--danger-color);
  border-width: 2px;
}

#vista-exclusion-bien .form-section h4 {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  color: var(--primary-color);
  font-size: 1.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}

#vista-exclusion-bien .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  position: relative;
  z-index: 20;
  isolation: isolate;
}

#vista-exclusion-bien .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 15px;
}

#vista-exclusion-bien .grid-context-bien {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

#vista-exclusion-bien .grid-context-bien th,
#vista-exclusion-bien .grid-context-bien td {
  padding: 10px;
  font-size: 0.9em;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

#vista-exclusion-bien .grid-context-bien thead {
  background-color: var(--primary-color);
}

#vista-exclusion-bien .grid-context-bien thead th {
  color: white;
  font-weight: 600;
  border-bottom: none;
  padding: 12px 10px;
}

#vista-exclusion-bien .table-wrapper table.grid-context-bien {
  border: none;
}

#vista-exclusion-bien .table-wrapper table.grid-context-bien thead th:first-child {
  border-top-left-radius: 7px;
}

#vista-exclusion-bien .table-wrapper table.grid-context-bien thead th:last-child {
  border-top-right-radius: 7px;
}

#vista-exclusion-bien .grid-context-bien th.col-select,
#vista-exclusion-bien .grid-context-bien td.col-select {
  width: 50px;
  text-align: center;
  padding: 5px;
}

#vista-exclusion-bien .grid-context-bien tbody tr {
  background-color: #fff;
}

#vista-exclusion-bien .grid-context-bien tbody tr:hover {
  background-color: #f8f9fa;
}

#vista-exclusion-bien .grid-context-bien .col-valor,
#vista-exclusion-bien .grid-context-bien .col-prima,
#vista-exclusion-bien .grid-context-bien .col-monto {
  text-align: right;
}

#vista-exclusion-bien .grid-context-bien tfoot tr {
  background-color: #f8f9fa;
  font-weight: bold;
}

#vista-exclusion-bien .grid-context-bien tfoot td {
  padding: 15px 10px;
  border-top: 2px solid #ddd;
  border-bottom: none;
}

#vista-exclusion-bien .highlight-credit {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--danger-color) !important;
  background-color: #fdedec !important;
  border: 2px solid var(--danger-color) !important;
  text-align: right !important;
  padding: 10px !important;
  border-radius: 4px;
}

#vista-exclusion-bien .highlight-credit.new-premium {
  color: var(--success-color) !important;
  background-color: #e8f8ef !important;
  border-color: var(--success-color) !important;
}

#vista-exclusion-bien .btn {
  padding: 10px 24px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 0.96em;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* Botones de acciones ligeramente más compactos */
#vista-exclusion-bien .form-actions .btn {
  padding: 10px 22px;
  font-size: 0.95em;
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

#vista-exclusion-bien .form-actions .btn i {
  pointer-events: none;
}

#vista-exclusion-bien .btn-danger {
  background-color: var(--danger-color) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
  opacity: 1 !important;
  visibility: visible !important;
}

#vista-exclusion-bien .btn-danger:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
}

#vista-exclusion-bien .btn-secondary {
  background-color: #6c757d;
  color: white;
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

#vista-exclusion-bien .btn-secondary:hover {
  background-color: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(108, 117, 125, 0.4);
}

/* Estilos para los campos de crédito en el footer */
#vista-exclusion-bien .form-row:has(#exc-credito-neto) {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

/* Asegurar visibilidad del botón de registrar dentro del footer */
#vista-exclusion-bien .form-actions .btn.btn-danger {
  background-color: var(--danger-color) !important;
  color: #fff !important;
}

#vista-exclusion-bien #isc-acreditar-group {
  max-width: 120px;
  min-width: 100px;
}

#vista-exclusion-bien #isc-acreditar-group input {
  background-color: #f7f7f7 !important;
  text-align: right;
  font-weight: bold;
  border: 1px solid #ccc;
}

/* Responsive para vista de exclusión */
@media screen and (max-width: 1200px) {
  #vista-exclusion-bien .form-section {
    min-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #vista-exclusion-bien .form-group.col-25,
  #vista-exclusion-bien .form-group.col-75 {
    max-width: 100%;
    min-width: 100%;
  }
  
  #vista-exclusion-bien .form-section {
    min-width: 100%;
    padding: 15px;
  }
  
  #vista-exclusion-bien .form-actions {
    flex-direction: column;
  }
  
  #vista-exclusion-bien .btn {
    width: 100%;
    justify-content: center;
  }
}

/* === Estilos personalizados para botones de pólizas === */
.actions button.cobros {
  background-color: #28a745; /* Verde igual al de facturar */
  color: #fff;
  border: none;
  padding: 5px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.actions button.cobros:hover {
  background-color: #218838;
}

.actions button.creditos {
  background-color: #dc3545; /* Rojo igual al de eliminar */
  color: #fff;
  border: none;
  padding: 5px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.actions button.creditos:hover {
  background-color: #b02a37;
}

.actions button.cobros i,
.actions button.creditos i {
  font-size: 14px;
}

/* ===== ESTILOS DEL GESTOR DE DOCUMENTOS ===== */

/* Modal principal del gestor de documentos */
.modal-contenido-documentos {
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  width: 95%;
  max-width: 1400px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  position: relative;
}

.modal-contenido-documentos h2 {
  color: #2c3e50;
  font-size: 1.9em;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Navegación por pestañas del gestor */
.modal-contenido-documentos .nav-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 20px;
}

.modal-contenido-documentos .nav-link {
  padding: 10px 20px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 1em;
  color: var(--dark-gray);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.modal-contenido-documentos .nav-link.active {
  font-weight: bold;
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.modal-contenido-documentos .nav-link:disabled {
  color: #aaa;
  cursor: not-allowed;
  background-color: #f9f9f9;
}

.modal-contenido-documentos .tab-pane {
  display: none;
}

.modal-contenido-documentos .tab-pane.active {
  display: block;
  animation: fadeIn 0.5s;
}

/* Contexto fijo */
.contexto-fijo-display-doc {
  background-color: #f0f8ff;
  border: 1px solid var(--primary-color);
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 0.95em;
  color: #173f5f;
}

/* Contenedor de lista en grid */
.list-container-grid-doc {
  display: flex;
  gap: 20px;
  flex-direction: row;
  min-height: 500px;
}

.grid-area-doc {
  flex-grow: 1;
}

.filter-sidebar-doc {
  width: 280px;
  padding-left: 20px;
  border-left: 1px solid var(--border-color);
}

.filter-sidebar-doc h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2c3e50;
  font-size: 1.1em;
}

/* Barra de controles */
.controls-bar-doc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 15px;
}

.controls-left-doc {
  order: 1;
}

.controls-right-doc {
  order: 2;
}

.add-btn-doc {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  box-sizing: border-box;
}

.add-btn-doc:hover {
  background-color: #2980b9;
}

/* Tabla de documentos */
.table-wrapper-doc {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.data-table-doc {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
}

.data-table-doc thead {
  background-color: var(--primary-color);
  color: white;
}

.data-table-doc th:first-child {
  border-top-left-radius: 5px;
}

.data-table-doc th:last-child {
  border-top-right-radius: 5px;
}

.data-table-doc th,
.data-table-doc td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.95em;
}

.data-table-doc tbody tr:hover {
  background-color: #ecf0f1;
}

.data-table-doc .actions a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  margin: 0 2px;
  transition: background-color 0.2s, transform 0.2s;
  display: inline-block;
}

.data-table-doc .actions a.view {
  background-color: var(--primary-color);
}

.data-table-doc .actions a.download {
  background-color: #27ae60;
}

.data-table-doc .actions a.delete {
  background-color: var(--danger-color);
}

.data-table-doc .actions a.share {
  background-color: #8e44ad;
}

.data-table-doc .actions a:hover {
  transform: translateY(-2px);
}

/* Paginación */
.pagination-bar-doc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
  color: var(--dark-gray);
  flex-wrap: wrap;
  gap: 15px;
}

.records-info-doc {
  font-weight: 600;
}

.page-navigator-doc {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-navigator-doc button {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 10px;
}

/* Formularios del gestor */
.form-group-doc {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
  margin-bottom: 15px;
}

.form-group-doc label {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 0.9em;
  color: #555;
}

.form-group-doc input,
.form-group-doc select,
.form-group-doc textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.95em;
}

.form-group-doc textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row-doc {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.btn-filtrar-doc {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-filtrar-doc:hover {
  background-color: #e0e0e0;
}

.btn-filtrar-doc.disabled,
.btn-filtrar-doc:disabled {
  background-color: #d3dbe6;
  cursor: not-allowed;
  opacity: 0.7;
  border-color: #ccd4dd;
}

/* Contenedor de carga */
.upload-container-doc {
  padding: 20px;
  border: 1px solid #eef;
  border-radius: 8px;
  background: #fdfdfd;
  max-width: 600px;
  margin: 0 auto;
}

.drop-zone-doc {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  margin-bottom: 15px;
  background-color: #fafafa;
  transition: all 0.3s;
  cursor: pointer;
}

.drop-zone-doc:hover {
  border-color: var(--primary-color);
  background-color: #f0f8ff;
}

.drop-zone-doc i {
  font-size: 2.5em;
  color: var(--primary-color);
  margin-bottom: 10px;
  display: block;
}

.drop-zone-doc small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 0.82em;
  line-height: 1.35;
}

.file-info-doc {
  background-color: #eaf6ff;
  border: 1px solid #cceeff;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 0.9em;
  white-space: pre-wrap;
}

.file-info-doc ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-top: 5px;
}

.upload-results-doc {
  margin-top: 20px;
  padding: 15px;
  border-radius: 5px;
  background-color: #e8f5e9;
  border-left: 5px solid var(--success-color);
  white-space: pre-wrap;
  font-size: 0.9em;
}

/* Botones de acciones del formulario */
.form-actions-doc {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 15px;
  padding-top: 0;
  border-top: none;
}

.btn-primary-doc {
  background-color: var(--success-color);
  color: white;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary-doc:hover {
  background-color: #2ecc71;
}

.btn-upload-doc:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.btn-cancelar-doc {
  background-color: #6c757d;
  color: white;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-cancelar-doc:hover {
  background-color: #495057;
}

/* Botón de documentos en tablas */
button.documentos {
  background-color: #ff9800;
  padding: 7px 12px;
  margin: 0 5px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

button.documentos:hover {
  background-color: #f57c00;
}

/* Botón de reclamo en tablas */
button.historial-notas {
  background-color: #f0ad4e;
  padding: 7px 12px;
  margin: 0 5px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

button.historial-notas:hover {
  background-color: #e08e0b;
}

/* Botón "Enviar por correo a la aseguradora" en acciones de solicitudes */
button.enviar-correo {
  background-color: #2f7df2;
  padding: 7px 12px;
  margin: 0 5px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

button.enviar-correo:hover {
  background-color: #1f63cc;
}

/* Botón "Digitar" (facturar/acreditar) en acciones de solicitudes */
button.digitar {
  background-color: #1f8a70;
  padding: 7px 12px;
  margin: 0 5px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

button.digitar:hover:not([disabled]) {
  background-color: #166b56;
}

button.digitar[disabled] {
  background-color: #cbd5e1;
  color: #8595a6;
  cursor: not-allowed;
}

button.reclamo {
  background-color: #e74c3c;
  padding: 7px 12px;
  margin: 0 5px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

button.reclamo:hover {
  background-color: #c0392b;
}

/* Diseño responsivo para el gestor */
@media screen and (max-width: 768px) {
  .modal-contenido-documentos {
    padding: 20px;
    max-width: 95%;
  }
  
  .list-container-grid-doc {
    flex-direction: column;
  }
  
  .filter-sidebar-doc {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
  }
  
  .controls-bar-doc {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .controls-right-doc {
    width: 100%;
  }
  
  .data-table-doc thead {
    display: none;
  }
  
  .data-table-doc tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .data-table-doc td {
    display: block;
    text-align: right !important;
    border-bottom: 1px dotted #ccc;
    position: relative;
    padding-left: 50%;
  }
  
  .data-table-doc td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    text-align: left;
    font-weight: bold;
  }
}

/* ===== PANEL DE PREVISUALIZACIÓN ===== */
.preview-panel-doc {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  min-height: 420px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  width: 100%;
}

#documentListSection {
  width: 100%;
}

.preview-header-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 20px;
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: 8px 8px 0 0;
}

.preview-header-doc h3 {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
}

.preview-header-spacer {
  width: 140px;
  flex: 0 0 140px;
}

.btn-back-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  text-transform: none;
}

.preview-content-doc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  background: #fdfdfd;
  min-height: 65vh;
  padding: 0;
}

/* Área del documento: ocupa todo el alto disponible del visor */
.preview-media-doc {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #525659;
}

/* El documento se ancla a los bordes del área para llenarla por completo.
   Se usan dimensiones explícitas con calc() (no 'auto'): el iframe y la
   imagen son elementos reemplazados y con 'auto' tomarían su tamaño
   intrínseco (~300x150) en vez de estirarse. En posición absoluta el
   porcentaje sí resuelve contra el alto usado del contenedor. */
.preview-media-doc iframe,
.preview-media-doc img {
  position: absolute;
  top: 16px;
  left: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border: 0;
  border-radius: 4px;
}

.preview-media-doc iframe {
  background: #ffffff;
}

.preview-media-doc img {
  object-fit: contain;
  background: transparent;
}

/* Barra de acciones fija bajo el documento */
.preview-actions-doc {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border-top: 1px solid var(--border-color);
}

.preview-placeholder-doc {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #666666;
  padding: 60px 20px;
  margin: 0;
  font-size: 0.95rem;
}

.tenant-badge-doc {
  background-color: #f5f7fb;
  border: 1px solid #e2e7f1;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 12px 0;
  font-size: 0.85rem;
}

.tenant-badge-doc strong {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5b667d;
  margin-bottom: 4px;
}

.tenant-badge-doc.secondary {
  background-color: #fdf6ed;
  border-color: #f3d7b8;
}

.preview-fallback-doc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px 20px;
  gap: 16px;
  color: #444444;
}

.preview-fallback-doc .preview-fallback-icon {
  font-size: 3rem;
  color: #b6c0cf;
}

.preview-fallback-doc p {
  margin: 0;
  line-height: 1.5;
}

.preview-fallback-doc .btn-primary-doc {
  margin-top: 8px;
}

.input-readonly-doc {
  background-color: #eef3f9 !important;
  color: #48525f !important;
  cursor: default;
}

/* Grid de 4-5 columnas bien compactas para acciones */
.acciones-grid {
  display: grid;

  /* Columnas ajustadas al tamaño del botón (no se expanden con el ancho de la celda) */
  grid-template-columns: repeat(auto-fit, minmax(30px, auto));
  max-width: 180px; /* Limitar ancho para mantener 4-5 botones por fila */

  /* Ajusta el espacio HORIZONTAL entre botones */
  column-gap: 4px;   /* <-- AJUSTA TU GUSTO */

  /* Ajusta el espacio VERTICAL entre fila 1 y fila 2 */
  row-gap: 4px;      /* <-- AJUSTA TU GUSTO */

  justify-content: center; /* centra todo el bloque */
}

/* Botones compactos y uniformes */
.acciones-grid button {
  width: 30px;    /* puedes bajar a 28 si quieres más compacto */
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px; /* más pequeño para que se vea más elegante */
}

/* Botón específico de solicitud de movimiento con color distintivo */
.acciones-grid button.solicitud-movimiento {
  background-color: #7b1fa2;
  color: white;
}

.acciones-grid button.solicitud-movimiento:hover {
  background-color: #6a1b9a;
}

/* Botón específico de reclamo con color distintivo */
.acciones-grid button.reclamo {
  background-color: #e74c3c;
  color: white;
}

.acciones-grid button.reclamo:hover {
  background-color: #c0392b;
}

/* Permitir múltiples líneas */
td.actions {
  white-space: normal !important;
  text-align: center;
}

.tabla-contexto td {
  padding: 8px;
  border: 1px solid #e0e0e0;
  color: #424242;
}

/* Botón historial */
.btn-historial {
  background-color: #7b1fa2;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-historial:hover {
  background-color: #6a1b9a;
}

/* ========================================
   ESTILOS ADICIONALES PARA CONTEXTO DE PÓLIZA
   (Desde HTML de referencia)
   ======================================== */

.smv-client-name.contextual {
  margin-bottom: 10px;
  border-bottom: none;
  padding-bottom: 0;
  font-size: 1.1em;
  margin-top: 0;
  color: #2c3e50;
}

.smv-context-header .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.smv-context-header .data-table {
  width: 100%;
  border-collapse: collapse;
}

.smv-context-header .data-table thead {
  background-color: #1f6feb;
}

.smv-context-header .data-table th,
.smv-context-header .data-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
  word-wrap: break-word;
}

.smv-context-header .data-table thead th {
  color: white;
  font-weight: 500;
  vertical-align: bottom;
  text-align: left;
}

.policy-main-info .policy-number {
  font-size: 1.2em;
  font-weight: 700;
  color: #1f6feb;
  margin-bottom: 5px;
  display: block;
}

.policy-details .data-value {
  font-size: 0.95em;
  font-weight: 500;
  color: #555;
  display: block;
  line-height: 1.3;
}

.field-group {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  margin-bottom: 4px;
}

.field-label {
  color: #666;
  font-weight: 500;
  margin-right: 8px;
  flex-shrink: 0;
}

.field-value {
  font-weight: 600;
  color: #333;
}

.line-group {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  align-items: center;
}

/* Status Badges para contexto */
.status-vigente,
.status-activo {
  color: #27ae60;
  background-color: #e8f8ef;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.75em;
  text-transform: uppercase;
  display: inline-block;
}

.status-cancelada,
.status-excluido {
  color: #e74c3c;
  background-color: #fdedec;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.75em;
  text-transform: uppercase;
  display: inline-block;
}

.status-consumida {
  color: #E91E63;
  background-color: #FCE4EC;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.75em;
  text-transform: uppercase;
  display: inline-block;
}

.policy-status-text {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.policy-status-text.status-vigente,
.policy-status-text.status-activo {
  color: #27ae60;
  background: transparent;
}

.policy-status-text.status-cancelada,
.policy-status-text.status-excluido {
  color: #e74c3c;
  background: transparent;
}

.policy-status-text.status-consumida {
  color: #E91E63;
  background: transparent;
}

.balance-highlight {
  font-weight: 700;
  font-size: 1.05em;
  color: #e74c3c;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #fdedec;
  display: inline-block;
}

.balance-highlight.settled {
  color: #27ae60;
  background-color: #e8f8ef;
}

.btn-estado-cuenta {
    background-color: #007bff; /* Azul profesional */
    color: white;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    transition: 0.2s ease-in-out;
}

.btn-estado-cuenta i {
    color: white !important;
}

.btn-estado-cuenta:hover {
    background-color: #0056b3;
}

/* Control de Renovaciones styles will be added */

/* ==============================
   Control de Renovaciones
   ============================== */

.container {
    max-width: 95%;
    margin: 10px auto;
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.container h1 {
    color: #2c3e50;
    font-size: 1.9em;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-and-icon {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-actions {
    display: flex;
    align-items: center;
    font-size: 1rem;
    gap: 10px;
}

.controls-bar-wrapper {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 25px;
}

.controls-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

  .toolbar-item {
      display: flex;
      flex-direction: column;
      min-width: 120px;
  }

  .toolbar-item label {
      font-size: 0.85em;
      font-weight: 600;
      color: var(--dark-gray);
      margin-bottom: 4px;
  }

  .toolbar-select, .toolbar-input {
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 0.95em;
      height: 38px;
      box-sizing: border-box;
      min-width: 100px;
  }

  .checkbox-column {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-bottom: 5px;
  }

  .checkbox-item {
      display: flex;
      align-items: center;
      height: 16px;
      line-height: 16px;
  }

  .checkbox-item input[type="checkbox"] {
      margin-right: 8px;
      width: 16px;
      height: 16px;
  }

  .checkbox-item label {
      font-size: 0.9em;
      font-weight: 500;
      color: #444;
      margin-bottom: 0;
  }

  .radio-label {
      font-size: 0.9em;
      cursor: pointer;
  }

  .btn-toolbar {
      padding: 8px 15px;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.2s;
      font-size: 0.95em;
  }

  .btn-apply-filter {
      background-color: var(--primary-color);
      color: white;
  }

  .btn-apply-filter:hover {
      background-color: #2980b9;
  }

  .btn-execute-motor {
    background-color: var(--success-color);
    color: white;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  }

  .btn-execute-motor:hover {
      background-color: #2ecc71;
  }

  .nav-tabs {
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
  }

  .nav-link {
      padding: 10px 20px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      font-size: 1em;
      color: var(--dark-gray);
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .nav-link.active {
      font-weight: bold;
      color: var(--primary-color);
      border-bottom-color: var(--primary-color);
  }

  .tab-pane { display: none; }
  .tab-pane.active {
      display: block;
      animation: fadeIn 0.5s;
  }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .table-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      background-color: white;
  }

  .data-table {
      width: 100%;
      border-collapse: collapse;
  }

  .data-table th, .data-table td {
      padding: 10px 12px;
      text-align: left;
      border-bottom: 1px solid #f0f0f0;
  }

  .data-table thead th {
      background-color: var(--primary-color);
      color: white;
      font-weight: 600;
  }

  .data-table tbody tr:nth-child(even) {
      background-color: var(--light-gray);
  }

  .data-table tbody tr:hover {
      background-color: #e0f7fa;
  }

  .data-table td[data-label] {
      font-size: 0.9em;
  }

  .btn-grid-action {
      padding: 5px 8px;
      margin: 2px;
      font-size: 0.8em;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: background-color 0.2s;
  }

  .btn-view { background-color: var(--primary-color); color: white; }
  .btn-edit { background-color: var(--success-color); color: white; }
  .btn-delete { background-color: var(--danger-color); color: white; }
  .btn-note { background-color: var(--warning-color); color: white; }

  .btn-view:hover { background-color: #2980b9; }
  .btn-edit:hover { background-color: #2ecc71; }
  .btn-delete:hover { background-color: #c0392b; }
  .btn-note:hover { background-color: #e08e0b; }

  /* Botón "Digitar" (facturar/acreditar) en las acciones del detalle */
  .btn-digitar { background-color: #1f8a70; color: white; }
  .btn-digitar:hover:not([disabled]) { background-color: #166b56; }
  .btn-digitar[disabled] { background-color: #cfd8dc; color: #90a4ae; cursor: not-allowed; }

  /* Estilo de alerta (parpadeo) cuando el caso está en "Por Digitar": la nota de
     "Por Digitar" ya existe y el caso está listo para facturarse. El parpadeo es
     intencional (solicitado) y lento (~1.1s, muy por debajo del umbral de
     destellos), por lo que NO se suprime con prefers-reduced-motion. */
  .btn-digitar.btn-digitar-alert {
    animation: renovDigitarAlert 1.1s ease-in-out infinite !important;
  }
  @keyframes renovDigitarAlert {
    0%, 100% {
      background-color: #1f8a70;
      box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.55);
    }
    50% {
      background-color: #d93025;
      box-shadow: 0 0 0 5px rgba(217, 48, 37, 0.10);
    }
  }

  /* Filtros del detalle (estatus + buscador) integrados en la barra única.
     El buscador tiene ancho acotado para no ocupar toda la línea. */
  .renov-bulk-group.renov-filtro-group { min-width: 160px; }
  .renov-bulk-group.renov-filtro-buscador { min-width: 220px; max-width: 260px; }
  .renov-bulk-group.renov-filtro-buscador .toolbar-input { width: 100%; }

  /* Separador vertical entre los filtros y las acciones masivas */
  .renov-bulk-divider {
      align-self: stretch;
      width: 1px;
      min-height: 38px;
      margin: 0 4px;
      background: var(--border-color, #d9e1ec);
  }

  .action-buttons-cell {
      display: flex;
      gap: 4px;
      align-items: center;
      padding: 0;
      min-height: 40px;
  }

  .action-buttons-cell button {
      margin: 0;
  }

  .data-table tfoot td {
      font-weight: bold;
      border-top: 3px solid var(--primary-color);
      font-size: 0.95em;
  }

  .data-table tfoot tr:first-child td {
      border-bottom: 1px solid var(--border-color);
  }

  .data-table tfoot tr:hover {
      background-color: transparent !important;
  }

  .status-si { color: var(--success-color); font-weight: 600; }
  .status-no { color: var(--soft-red); font-weight: 600; }
  .prima-no-digitada { color: var(--soft-red); font-style: italic; }

  .detail-context {
      color: #2c3e50;
    padding: 6px 0 12px 0;
    margin-bottom: 12px;
    font-weight: 700;
  }

  .detail-context h2 {
    font-size: 1.55em;
    margin: 0;
    color: #2c3e50;
  }

  .detail-context strong {
      color: var(--primary-color);
  }

  .renov-context-aseg {
    color: var(--primary-color);
    font-weight: 800;
  }

  .renov-context-moneda {
    color: #2c3e50;
    font-weight: 700;
  }

  .pagination-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 15px;
      padding: 10px 0;
      font-size: 0.9em;
  }

  .pagination-info {
      margin-right: 15px;
      color: var(--dark-gray);
  }

  .page-link {
      padding: 8px 12px;
      margin: 0 4px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      cursor: pointer;
      background-color: white;
      transition: background-color 0.2s;
      user-select: none;
  }

  .page-link:hover:not(.active) {
      background-color: var(--light-gray);
  }

  .page-link.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
      font-weight: bold;
  }

  .page-link.disabled {
      cursor: not-allowed;
      opacity: 0.5;
  }

  .renov-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    background: #fff;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 14px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
  }

  .renov-bulk-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
  }

  .renov-bulk-group label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--dark-gray);
  }

  .renov-bulk-group input,
  .renov-bulk-group select {
    min-height: 38px;
  }

  .renov-bulk-group#bulkNumeroWrapper,
  .renov-bulk-group#bulkPrimaWrapper,
  .renov-bulk-group#bulkFormaWrapper,
  .renov-bulk-group#bulkEntregadoPorWrapper {
    display: none;
  }

  .renov-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .empty-row {
    text-align: center;
    padding: 14px;
    color: var(--inactive-color);
  }

  @media (max-width: 992px) {
    .container h1 { flex-direction: column; align-items: flex-start; gap: 10px; }
    .controls-bar { flex-direction: column; align-items: stretch; }
    .renov-bulk-bar { flex-direction: column; align-items: stretch; }
  }

  /* =========================================
    Control de Renovaciones - Scoped estilos
    ========================================= */
  .renov-container {
    background: #f4f7f6;
    padding: 24px;
    height: 100vh;
    overflow: hidden;
    margin-right: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .renov-card {
    background: #fff;
    border: 1px solid #d9e1ec;
    border-radius: 12px;
    box-shadow: 0 10px 18px rgba(0,0,0,0.08);
    padding: 24px 28px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .renov-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.9rem;
    margin-bottom: 16px;
    color: #2c3e50;
  }

  .renov-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .controls-bar-wrapper {
    background: #f8f9fa;
    padding: 15px 20px;
    border: 1px solid #d9e1ec;
    border-radius: 10px;
    margin-bottom: 24px;
  }

  .renov-controls-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
  }

  .renov-field label,
  .renov-bulk-group label {
    font-size: 0.9em;
    font-weight: 600;
    color: #4a5568;
  }

  .renov-radio-row { display: flex; flex-direction: column; gap: 6px; }

  .btn-execute-motor {
    background: var(--success-color);
    color: #fff;
    border: none;
    padding: 8px 14px;
    min-height: 40px;
    min-width: 180px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .btn-apply-filter {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 9px 14px;
    border-radius: 6px;
  }

  .renov-card .nav-tabs {
    display: flex;
    gap: 12px;
    border-bottom: 2px solid #e0e6ed;
    margin: 6px 0 18px;
  }

  .renov-card .nav-link {
    padding: 10px 2px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #4a5568;
    font-weight: 700;
    border-radius: 0;
  }

  .renov-card .nav-link.active {
    background: transparent;
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    box-shadow: none;
  }

  .tab-content { margin-top: -1px; }
  .renov-card .tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .renov-card .tab-pane { display: none; }
  .renov-card .tab-pane.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    animation: renovFade 0.35s ease;
  }
  @keyframes renovFade { from { opacity:0; } to { opacity:1; } }

  .renov-card .table-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #d9e1ec;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    background: #fff;
    position: relative;
    overscroll-behavior: contain;
  }

  .renov-card .data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 0;
    /* La tabla NO debe ser contexto de recorte: overflow hidden en el <table>
       rompe el position:sticky del thead/tfoot (igual criterio que facturas). */
    overflow: visible !important;
    --renov-sticky-offset: 34px;
  }

  .renov-card .data-table th,
  .renov-card .data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f4f8;
    border-right: 1px solid #eef2f5;
    font-size: 0.94rem;
  }

  .renov-card .data-table thead th {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    border-right: 1px solid rgba(255,255,255,0.2);
    position: sticky;
    top: 0;
    z-index: 6;
    background-clip: padding-box;
  }

  .renov-card .data-table thead tr:nth-child(1) th {
    box-shadow: 0 2px 0 rgba(15,23,42,0.10);
  }

  .renov-card .data-table thead tr:nth-child(2) th {
    top: var(--renov-sticky-offset);
    z-index: 5;
  }

  /* Ajustes específicos de la tabla Detalle de Renovaciones */
  .renov-card #tablaDetalle {
    table-layout: auto;
    /* min-width fuerza a la tabla a ser más ancha que el wrapper cuando el
       espacio es reducido, activando el scroll horizontal del .table-wrapper
       (con width:100% sin min-width las columnas se comprimían y nunca había
       desbordamiento que permitiera scroll). */
    min-width: 1320px;
  }

  /* El resumen tiene 17 columnas: igual necesita ancho mínimo para poder
     desplazarse horizontalmente en pantallas o áreas estrechas. */
  .renov-card #tablaResumen {
    min-width: 1280px;
  }

  .renov-card #tablaDetalle th:nth-child(2),
  .renov-card #tablaDetalle td:nth-child(2) {
    min-width: 280px;
  }

  .renov-card #tablaDetalle td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: hidden;
    line-height: 1.35;
  }

  .renov-card #tablaDetalle td:nth-child(2) small {
    display: block;
    margin-top: 2px;
  }

  .renov-card #tablaDetalle th:nth-child(3),
  .renov-card #tablaDetalle td:nth-child(3) {
    min-width: 95px;
    white-space: nowrap;
  }

  .renov-card .data-table tbody tr:nth-child(even) { background: #f7fbff; }
  .renov-card .data-table tbody tr:hover { background: #e8f3ff; }

  .renov-card .data-table tfoot td {
    font-weight: 700;
    border-top: 3px solid var(--primary-color);
    background: #fafbfd;
    position: sticky;
    bottom: 0;
    z-index: 4;
    background-clip: padding-box;
    box-shadow: 0 -2px 0 rgba(15,23,42,0.08), 0 -4px 10px rgba(15,23,42,0.08);
  }

  .renov-tfoot-row td { border-top: 2px solid #d9e1ec; }
  .renov-tfoot-label { font-weight: 800; color: #2c3e50; text-align: left; }
  .renov-flag { font-weight: 900; color: #fff; text-align: center; }
  .renov-flag-si { background: #27ae60; }
  .renov-flag-no { background: #ec8282; }
  .renov-money { text-align: right; font-weight: 700; }
  .renov-money-si, .renov-count-si { color: #27ae60; }
  .renov-money-no, .renov-count-no { color: #ec8282; }
  .renov-count-si, .renov-count-no { text-align: center; font-weight: 700; }

  .renov-th-si { background: #27ae60; color: #fff; }
  .renov-th-no { background: #ec8282; color: #fff; }
  .renov-th-group { background: var(--primary-color); color: #fff; }

  .renov-pill {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
  }

  .renov-pill-si { background: #27ae60; }
  .renov-pill-no { background: #ec8282; }

  /* KPI strip */
  .renov-kpis { display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
  .renov-kpi-card { flex:1 1 180px; background:#f9fbfd; border:1px solid #dfe6ee; border-radius:8px; padding:10px 12px; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
  .renov-kpi-title { font-size:0.9rem; color:#4a5568; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
  .renov-kpi-value { font-size:1.4rem; font-weight:700; color:#1f6feb; }
  .renov-kpi-sub { font-size:0.85rem; color:#2d3748; }

  .status-si { color: var(--success-color); font-weight: 700; }
  .status-no { color: #ec8282; font-weight: 700; }
  .renov-card td .status-si,
  .renov-card td .status-no { display: inline-block; padding: 2px 6px; border-radius: 4px; }
  .renov-card td .status-si { background: #e8f8ef; }
  .renov-card td .status-no { background: #fdecea; }
  .prima-no-digitada { color: #ec8282; font-style: italic; }

  .renov-container .empty-row { text-align: center; padding: 14px; color: var(--inactive-color); }

  /* Resaltado temporal de la fila al volver de la bitácora */
  .renov-card .data-table tbody tr.renov-row-focus td {
    background: #fff3cd !important;
    animation: renovRowPulse 1.4s ease-in-out 2;
  }
  @keyframes renovRowPulse {
    0%, 100% { background: #fff3cd; }
    50% { background: #ffe08a; }
  }

  .renov-card .pagination-container { display: flex; justify-content: flex-end; align-items: center; margin-top: 12px; padding: 8px 0; font-size: 0.92rem; }
  .renov-card .pagination-info { margin-right: 12px; color: #4a5568; }
  .renov-card .pagination-container nav { display: flex; align-items: center; gap: 4px; }
  .renov-card .page-link { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; margin: 0; border: 1px solid #d0d7de; border-radius: 4px; cursor: pointer; background: #fff; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; user-select: none; }
  .renov-card .page-link:hover:not(.active):not(.disabled) { background: #f5f8fb; border-color: #bfc6d1; }
  .renov-card .page-link.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); font-weight: 700; }
  .renov-card .page-link.disabled { cursor: not-allowed; opacity: 0.5; color: #8c939f; }

  .form-container { padding: 12px; background: #fff; border: 1px dashed #d9e1ec; border-radius: 8px; }

  @media (max-width: 992px) {
    .renov-title { flex-direction: column; align-items: flex-start; gap: 10px; }
    .renov-controls-bar { flex-direction: column; align-items: stretch; }
    .renov-bulk-bar { flex-direction: column; align-items: stretch; }
    .renov-card { padding: 18px; }
    .renov-container { margin-right: 0; }
  }

  /* Control de Renovaciones: aprovecha mejor el alto de pantalla para los listados */
  body.renov-body {
    padding: 0;
    overflow: hidden;
  }

  body.renov-body #main-content.renov-container {
    height: 100vh;
    padding: 10px 12px;
    margin-right: 0;
    overflow: hidden;
  }

  body.renov-body .renov-card {
    height: 100%;
    padding: 14px 16px;
    min-height: 0;
  }

  body.renov-body .renov-title {
    font-size: 1.45rem;
    line-height: 1.2;
    margin: 0 0 8px;
    flex-shrink: 0;
  }

  body.renov-body .controls-bar-wrapper {
    padding: 8px 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  body.renov-body .renov-controls-bar {
    gap: 10px;
  }

  body.renov-body .toolbar-select,
  body.renov-body .toolbar-input {
    height: 32px;
    padding: 5px 8px;
    font-size: 0.88rem;
  }

  body.renov-body .renov-field label,
  body.renov-body .renov-bulk-group label {
    font-size: 0.78rem;
    margin-bottom: 3px;
  }

  body.renov-body .renov-radio-row {
    gap: 2px;
  }

  body.renov-body .checkbox-column {
    gap: 2px;
    padding-bottom: 0;
  }

  body.renov-body .checkbox-item {
    height: 15px;
    line-height: 15px;
    font-size: 0.82rem;
  }

  body.renov-body .btn-toolbar,
  body.renov-body .btn-execute-motor {
    height: 32px;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.84rem;
  }

  body.renov-body .renov-card .nav-tabs {
    margin: 0 0 8px;
    flex-shrink: 0;
  }

  body.renov-body .renov-card .nav-link {
    padding: 7px 2px;
    font-size: 0.9rem;
  }

  body.renov-body .renov-card .tab-content {
    flex: 1 1 auto;
    min-height: 0;
  }

  body.renov-body .renov-card .tab-pane.active {
    min-height: 0;
  }

  body.renov-body .detail-context {
    padding: 8px 10px;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  body.renov-body .detail-context h2 {
    font-size: 0.98rem;
    margin: 0;
  }

  body.renov-body .renov-bulk-bar {
    padding: 8px 10px;
    margin-bottom: 8px;
    gap: 10px;
    flex-shrink: 0;
  }

  body.renov-body .renov-card .table-wrapper {
    /* flex-basis:0 + min-height:0 son imprescindibles para que el wrapper quede
       acotado por la altura disponible de la tarjeta (100vh) y pueda hacer
       scroll vertical. Con flex:1 1 auto / min-height fijo el wrapper crecía con
       el contenido y el scroll no se activaba. */
    flex: 1 1 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
  }

  body.renov-body .renov-card .data-table th,
  body.renov-body .renov-card .data-table td {
    padding: 7px 8px;
    font-size: 0.88rem;
    line-height: 1.25;
  }

  body.renov-body .renov-card .data-table thead th {
    font-size: 0.84rem;
  }

  body.renov-body .renov-card .pagination-container {
    margin-top: 6px;
    padding: 4px 0 0;
    flex-shrink: 0;
  }

  body.renov-body .renov-card .page-link {
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    font-size: 0.86rem;
  }

  body.renov-body .renov-card #tablaDetalle th:nth-child(2),
  body.renov-body .renov-card #tablaDetalle td:nth-child(2) {
    min-width: 220px;
  }

  /* -------------------------------------------------------------
  * ESTILOS PARA BOTONES CONTEXTUALES FLOTANTES (ACTION TRIGGER)
  * ------------------------------------------------------------- */

  /* 1. Contenedor que permite el posicionamiento relativo para el botón flotante 
    Se aplica al <span> que envuelve el nombre del cliente en el <td> */
  .action-trigger {
      position: relative;
      display: inline-block; /* Crucial: asegura que el <span> ocupe solo el espacio del texto */
      padding: 0;
  }

  /* 2. Estilo base del botón flotante (OCULTO POR DEFECTO) */
  .floating-action-button {
      /* Posicionamiento absoluto para sacarlo del flujo del texto */
      position: absolute;
      
      /* Colocación: en la esquina superior derecha del <span>, movido 100% hacia la derecha */
      top: -15px; /* Ajuste vertical. Si quieres centrar más, puedes usar 0, o un valor negativo. -15px está bien como inicio. */
      right: 0; /* Alineado a la derecha del <span> */
      
      /* Comportamiento de OCULTAR POR DEFECTO */
      opacity: 0;
      visibility: hidden;
      
      /* Mueve y escala para el efecto de transición (fuera de la vista) */
      /* Lo movemos 100% + un poco (ej: 10px) del span hacia la derecha para que no se superponga al texto, y lo achicamos ligeramente. */
      transform: translateX(100%) scale(0.9);
      transition: all 0.3s ease; 

      /* Estilo visual */
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      background-color: var(--primary-color); /* Usamos el azul principal de tu tema */
      color: white;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap; /* Evita que el texto del botón se rompa */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 50; /* Asegura que esté por encima de las celdas adyacentes */
  }

  /* 3. Comportamiento al hacer HOVER sobre el contenedor action-trigger */
  .action-trigger:hover .floating-action-button {
      opacity: 1;
      visibility: visible;
      
      /* Movemos a la posición final visible */
      /* Dejamos el translateX(100%) para que inicie donde termina el texto, 
        pero cambiamos scale a 1 y quitamos el offset de X del step 2 */
      transform: translateX(100%) scale(1); 
  }

  /* 4. Subrayar el texto del cliente al hacer hover (indicador visual) */
  .action-trigger:hover {
      text-decoration: underline; 
      cursor: pointer;
  }

  .clientes-nombre-cell {
      text-align: left;
      white-space: normal;
      max-width: 260px;
  }

  .clientes-nombre-trigger {
      display: inline-block;
      width: auto;
      max-width: 100%;
      vertical-align: top;
  }

  .clientes-nombre-text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.35;
      max-height: calc(1.35em * 2);
      padding-right: 4px;
  }

  table tbody td:nth-child(2) {
      overflow: visible;
  }

  /* Asegura que el botón flotante no sea cortado por el scroll del modal de cobros */
  #tbodyCobrosPoliza td:first-child {
      overflow: visible !important;
  }

  /* Ajuste específico para que el botón no tape el texto si la celda es estrecha */
  .action-trigger .floating-action-button {
      white-space: nowrap;
      min-width: 160px;
  }

  /* Asegura que el botón flotante sea visible en la tabla de acuerdos */
  #tbodyAcuerdosPoliza td:first-child {
      overflow: visible !important;
  }

  /* =============================================================
    ESTILOS MODAL INFORMACIÓN ASEGURADORA
    ============================================================= */

  /* Encabezado azul */
  #modalInfoAseguradora h3 {
      background-color: var(--primary-color, #0d6efd);
      color: white;
      margin: -20px -20px 20px -20px; /* Expande el fondo azul a los bordes */
      padding: 15px 20px;
      font-size: 1.1rem;
      border-bottom: 1px solid #ddd;
  }

  /* Ajuste del botón de cerrar (X) en el header azul */
  #btnCerrarInfoAsegX {
      color: white;
      opacity: 0.9;
      top: 12px;
      right: 15px;
      font-size: 1.5rem;
  }
  #btnCerrarInfoAsegX:hover {
      color: #ffcccc;
  }

  /* Estilo de la tabla de información */
  #tbodyInfoAseguradora tr {
      border-bottom: 1px solid #f0f0f0;
  }
  #tbodyInfoAseguradora tr:last-child {
      border-bottom: none;
  }

  /* Columna Izquierda (Etiquetas) */
  #tbodyInfoAseguradora th {
      width: 35%;
      background-color: #f8f9fa; /* Gris muy claro */
      color: #555;
      font-weight: 600;
      text-align: right;
      padding: 10px 15px;
      vertical-align: middle;
      font-size: 0.9rem;
      border-right: 3px solid white; /* Separador visual */
  }

  /* Columna Derecha (Datos) */
  #tbodyInfoAseguradora td {
      padding: 10px 15px;
      color: #333;
      font-size: 0.95rem;
      vertical-align: middle;
  }

  /* Links dentro de la tabla */
  #tbodyInfoAseguradora a {
      color: var(--primary-color, #0d6efd);
      text-decoration: none;
      font-weight: 500;
  }
  #tbodyInfoAseguradora a:hover {
      text-decoration: underline;
  }

  /* Nuevo estilo para controlar el ancho del modal de información */
  #modalInfoAseguradora .modal-contenidoCliente {
      width: 80% !important;           /* Ocupa el 80% del ancho de la pantalla */
      max-width: 1200px !important;    /* No pasará de 1000px para que no se vea exagerado en monitores gigantes */
      min-width: 600px;     /* No se encogerá más de 600px */
  }

  /* Estilo para las pestañas de información (para que se vean como las del modal principal) */
  .tab-btn-info {
      padding: 10px 20px;
      cursor: pointer;
      background: #f1f1f1;
      border: 1px solid #ddd;
      border-bottom: none;
      border-radius: 5px 5px 0 0;
      margin-right: 5px;
      font-weight: 600;
      color: #666;
      transition: all 0.3s;
  }

  .tab-btn-info.active {
      background: white;
      border-top: 3px solid var(--primary-color, #0d6efd);
      color: var(--primary-color, #0d6efd);
      padding-bottom: 11px; /* Para que pise el borde de abajo */
      position: relative;
      top: 1px;
  }

  /* =============================================================
    ESTILOS UNIFICADOS: BOTÓN FLOTANTE AZUL (TOOLTIP ARRIBA)
    Aplica a:
    1. .preview-poliza (Modales Factura, Cobro, etc)
    2. #tablaPolizas (Listado principal de pólizas)
    ============================================================= */

  /* 1. Asegurar overflow visible en las celdas contenedoras */
  .preview-poliza td,
  #tablaPolizas td:first-child,
  .commission-table td:first-child,
  .liq-table td:first-child,
  .liq-table td.liq-action-cell {
      overflow: visible !important;
      position: relative;
  }

  /* 2. Definición del Botón Flotante (Posición Superior Izquierda) */
  .preview-poliza .action-trigger .floating-action-button,
  #tablaPolizas .action-trigger .floating-action-button,
  #tablaClientes .action-trigger .floating-action-button,
  .commission-table .action-trigger .floating-action-button,
  .liq-table .action-trigger .floating-action-button {
      /* Reseteo */
      top: auto; 
      right: auto; 
      
      /* Posición: Encima del texto */
      bottom: 100%; 
      left: 0;      
      
      /* Ajustes */
      margin-bottom: 6px; 
      margin-left: 0;
      
      /* Animación */
      transform: scale(0.9); 
      transform-origin: bottom left;
      
      /* Estética Azul */
      background-color: var(--primary-color);
      color: white;
      white-space: nowrap;
      z-index: 1000;
      min-width: auto; 
      padding: 5px 10px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  }

  /* 3. Flechita decorativa */
  .preview-poliza .action-trigger .floating-action-button::after,
  #tablaPolizas .action-trigger .floating-action-button::after,
  #tablaClientes .action-trigger .floating-action-button::after,
  .commission-table .action-trigger .floating-action-button::after,
  .liq-table .action-trigger .floating-action-button::after {
      content: '';
      position: absolute;
      top: 100%; 
      left: 15px; 
      border-width: 5px;
      border-style: solid;
      border-color: var(--primary-color) transparent transparent transparent; 
  }

  /* 4. Hover: Mostrar */
  .preview-poliza .action-trigger:hover .floating-action-button,
  #tablaPolizas .action-trigger:hover .floating-action-button,
  #tablaClientes .action-trigger:hover .floating-action-button,
  .commission-table .action-trigger:hover .floating-action-button,
  .liq-table .action-trigger:hover .floating-action-button {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
  }

  /* =============================================================
    ALINEACIÓN Y ESTÉTICA DE TABLAS (CONTACTOS Y BANCOS)
    ============================================================= */

  /* Estilo general para las tablas de las pestañas de info */
  .tab-content-info table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      table-layout: fixed; /* Fuerza a respetar los anchos que definamos */
  }

  /* Encabezados (Títulos de las columnas) */
  .tab-content-info th {
      background-color: #f1f3f5;
      color: #495057;
      font-weight: 700;
      text-align: left;        /* Cambiado de center a left */
      padding: 12px 15px;      /* Aumentamos el padding lateral para la indentación */
      border-bottom: 2px solid #dee2e6;
      font-size: 0.85rem;
      text-transform: none;
  }

  /* Celdas de contenido de las tablas */
  .tab-content-info td {
      padding: 12px 15px;      /* Alineado con el encabezado */
      border-bottom: 1px solid #eee;
      vertical-align: middle;
      text-align: left;        /* Cambiado de center a left para que coincida con el título */
      color: #333;
      font-size: 0.9rem;
      word-wrap: break-word;
  }

  /* Alineación especial para la columna de "Canales" (mejor a la izquierda) */
  /* Es la 3ra columna de la tabla de contactos */
  #tab-info-contactos td:nth-child(3) {
      text-align: left; 
      font-size: 0.85rem;
      line-height: 1.4;
  }

  /* Efecto cebra para que las filas se distingan mejor */
  .tab-content-info tbody tr:nth-child(even) {
      background-color: #fafafa;
  }

  /* Cambio de color al pasar el mouse por la fila */
  .tab-content-info tbody tr:hover {
      background-color: #f4f7ff;
  }

  /* Anchos para Contactos */
  #tab-info-contactos th:nth-child(1) { width: 30%; } /* Nombre */
  #tab-info-contactos th:nth-child(2) { width: 30%; } /* Cargo */
  #tab-info-contactos th:nth-child(3) { width: 40%; } /* Canales */

  /* Anchos para Bancos */
  #tab-info-bancos th:nth-child(1) { width: 35%; }    /* Banco */
  #tab-info-bancos th:nth-child(2) { width: 30%; }    /* Tipo */
  #tab-info-bancos th:nth-child(3) { width: 35%; }    /* Número */

  /* =============================================================
    MÓDULO DE CONTROL DE RECLAMOS
    ============================================================= */

  /* Contenedor principal */
  .rec-container {
      max-width: 1600px;
      margin: 0 auto;
      padding: 15px 20px;
  }

  /* Header de la página */
  .rec-page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      margin-bottom: 20px;
      border-bottom: 2px solid #e0e0e0;
  }

  .rec-page-header h1 {
      font-size: 24px;
      color: #2c3e50;
      margin: 0;
      text-align: left;
  }

  .rec-btn-back {
      background-color: var(--cancel-color);
      color: white;
      padding: 10px 18px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 500;
      transition: background-color 0.2s;
  }

  .rec-btn-back:hover {
      background-color: #5a6268;
  }

  /* Navegación de tabs */
  .rec-nav-tabs {
      display: flex;
      gap: 5px;
      border-bottom: 2px solid #e0e0e0;
      margin-bottom: 20px;
  }

  .rec-nav-link {
      padding: 12px 25px;
      border: none;
      background: #f5f5f5;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      border-radius: 8px 8px 0 0;
      transition: all 0.2s;
  }

  .rec-nav-link:hover {
      background: #e8e8e8;
  }

  .rec-nav-link.active {
      background: var(--primary-color);
      color: white;
  }

  /* Barra de controles */
  .rec-controls-bar {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 15px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 10px;
      margin-bottom: 20px;
  }

  .rec-controls-left {
      display: flex;
      gap: 10px;
  }

  .rec-controls-right {
      display: flex;
      gap: 15px;
      align-items: flex-end;
      flex-wrap: wrap;
  }

  .rec-toolbar-item {
      display: flex;
      flex-direction: column;
      gap: 5px;
  }

  .rec-toolbar-item label {
      font-size: 12px;
      color: #666;
      font-weight: 500;
  }

  .rec-toolbar-input {
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
  }

  .rec-input-estatus { min-width: 200px; }
  .rec-input-date { width: 150px; }
  .rec-input-ramo { min-width: 180px; }

  .rec-add-btn {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.2s;
  }

  .rec-add-btn:hover {
      background-color: #1557b0;
  }

  /* Tabla de lista */
  .rec-table-wrapper {
      overflow-x: auto;
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .rec-data-table-list {
      width: 100%;
      border-collapse: collapse;
      min-width: 1200px;
  }

  .rec-data-table-list thead {
      background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  }

  .rec-data-table-list th {
      padding: 14px 12px;
      text-align: left;
      color: white;
      font-weight: 600;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .rec-data-table-list td {
      padding: 14px 12px;
      border-bottom: 1px solid #eee;
      vertical-align: top;
      font-size: 13px;
      line-height: 1.5;
  }

  .rec-data-table-list tbody tr:hover {
      background-color: #f5f9ff;
  }

  /* Badges de estado */
  .rec-status-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
  }

  .rec-status-badge.status-pendiente {
      background-color: #fff3cd;
      color: #856404;
  }

  .rec-status-badge.status-proceso {
      background-color: #cce5ff;
      color: #004085;
  }

  .rec-status-badge.status-aprobado {
      background-color: #d4edda;
      color: #155724;
  }

  .rec-status-badge.status-rechazado {
      background-color: #f8d7da;
      color: #721c24;
  }

  /* Botones de acción en grid */
  .rec-action-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
  }

  .rec-action-btn {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
  }

  .rec-action-btn.edit {
      background-color: var(--primary-color);
      color: white;
  }

  .rec-action-btn.edit:hover {
      background-color: #1557b0;
  }

  .rec-action-btn.note {
      background-color: var(--warning-color);
      color: white;
  }

  .rec-action-btn.note:hover {
      background-color: #e08e0b;
  }

  /* Paginación */
  .rec-pagination-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: #f8f9fa;
      border-radius: 0 0 10px 10px;
  }

  .rec-pagination-info {
      color: #666;
      font-size: 14px;
  }

  .rec-pagination-controls {
      display: flex;
      gap: 5px;
  }

  .rec-page-btn {
      padding: 8px 14px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
  }

  .rec-page-btn:hover:not(:disabled) {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
  }

  .rec-page-btn.active {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
  }

  .rec-page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }

  /* Contenedor de sesión (secciones del formulario) */
  .rec-session-container {
      background: white;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .rec-session-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary-color);
      padding-bottom: 12px;
      margin-bottom: 18px;
      border-bottom: 2px solid #e8f4fd;
  }

  /* Layout grid para formularios */
  .rec-layout-grid {
      display: grid;
      gap: 15px;
      margin-bottom: 15px;
  }

  .rec-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
  }

  .rec-form-group label {
      font-size: 12px;
      font-weight: 600;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 0.3px;
  }

  .rec-form-group input,
  .rec-form-group select,
  .rec-form-group textarea {
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      transition: border-color 0.2s, box-shadow 0.2s;
  }

  .rec-form-group input:focus,
  .rec-form-group select:focus,
  .rec-form-group textarea:focus {
      border-color: var(--primary-color);
      outline: none;
      box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.1);
  }

  .rec-form-group input:read-only {
      background-color: #f5f5f5;
  }

  /* Panel dividido */
  .rec-split-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
  }

  .rec-split-child {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  /* Grid de valores */
  .rec-valores-grid {
      display: grid;
      grid-template-columns: 1fr repeat(3, 1fr);
      gap: 8px;
      align-items: center;
  }

  .rec-valores-header {
      font-weight: 700;
      text-align: center;
      color: #555;
      font-size: 13px;
      padding: 8px 0;
      background: #f5f5f5;
      border-radius: 4px;
  }

  .rec-valores-grid input {
      padding: 8px 10px;
      border: 1px solid #ddd;
      border-radius: 6px;
      text-align: right;
      font-size: 13px;
  }

  /* Accordions */
  .rec-accordions-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 20px;
  }

  .rec-accordion-box {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
  }

  .rec-accordion-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      background: #f8f9fa;
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      color: #333;
      transition: background-color 0.2s;
  }

  .rec-accordion-header:hover {
      background: #eef2f7;
  }

  .rec-accordion-header.open {
      background: #e8f4fd;
      color: var(--primary-color);
  }

  .rec-accordion-content {
      border-top: 1px solid #e0e0e0;
      background: white;
  }

  .rec-header-status-pending {
      font-size: 11px;
      color: #856404;
      background: #fff3cd;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 10px;
  }

  .rec-header-status-complete {
      font-size: 11px;
      color: #155724;
      background: #d4edda;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 10px;
  }

  /* Checklist de documentos */
  .rec-docs-checklist {
      list-style: none;
      padding: 15px;
      margin: 0;
  }

  .rec-doc-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
  }

  .rec-doc-item:last-child {
      border-bottom: none;
  }

  .rec-doc-item.checked {
      background: #f8fff8;
  }

  .rec-doc-item input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
  }

  .rec-doc-item label {
      flex: 1;
      cursor: pointer;
      font-size: 14px;
  }

  .rec-doc-required {
      color: var(--danger-color);
      font-weight: bold;
      margin-left: 4px;
  }

  .rec-btn-upload-doc {
      background: var(--info-color);
      color: white;
      border: none;
      padding: 6px 10px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 12px;
  }

  .rec-btn-upload-doc:hover {
      background: #138496;
  }

  .rec-doc-file-name {
      font-size: 12px;
      color: var(--success-color);
      font-style: italic;
  }

  /* Botón agregar bienes */
  .rec-btn-add-bienes {
      background: linear-gradient(135deg, var(--info-color), #138496);
      color: white;
      border: none;
      padding: 10px 18px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px;
  }

  .rec-btn-add-bienes:hover {
      opacity: 0.9;
  }

  /* Mini tabla dentro de secciones */
  .rec-mini-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
  }

  .rec-mini-table th {
      background: #f5f5f5;
      padding: 10px;
      text-align: left;
      font-weight: 600;
      color: #555;
      border-bottom: 2px solid #ddd;
  }

  .rec-mini-table td {
      padding: 10px;
      border-bottom: 1px solid #eee;
  }

  .rec-mini-table tbody tr:hover {
      background: #fafafa;
  }

  .rec-btn-remove {
      background: var(--danger-color);
      color: white;
      border: none;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 12px;
  }

  .rec-btn-remove:hover {
      background: #c0392b;
  }

  /* Botón guardar reclamo */
  .rec-btn-submit-claim {
      background: linear-gradient(135deg, var(--success-color), #219a52);
      color: white;
      border: none;
      padding: 14px 35px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: all 0.2s;
  }

  .rec-btn-submit-claim:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
  }

  /* Modal de tabla */
  .rec-modal-table {
      width: 100%;
      border-collapse: collapse;
  }

  .rec-modal-table th {
      background: #f5f5f5;
      padding: 12px;
      text-align: left;
      font-weight: 600;
      color: #333;
      border-bottom: 2px solid #ddd;
  }

  .rec-modal-table td {
      padding: 12px;
      border-bottom: 1px solid #eee;
  }

  .rec-modal-table tbody tr:hover {
      background: #f8f9fa;
  }

  /* Upload dropzone */
  .rec-upload-dropzone {
      border: 2px dashed #ccc;
      border-radius: 10px;
      padding: 40px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 15px;
  }

  .rec-upload-dropzone:hover,
  .rec-upload-dropzone.dragover {
      border-color: var(--primary-color);
      background: #f8fbff;
  }

  .rec-upload-dropzone i {
      font-size: 48px;
      color: #aaa;
      margin-bottom: 15px;
  }

  .rec-upload-dropzone p {
      color: #666;
      margin: 0;
  }

  .rec-upload-dropzone .file-info {
      margin-top: 15px;
      padding: 10px;
      background: #e8f5e9;
      border-radius: 6px;
      color: var(--success-color);
      font-weight: 500;
  }

  /* Toast notifications */
  .toast {
      position: fixed;
      bottom: 30px;
      right: 30px;
      padding: 15px 25px;
      border-radius: 8px;
      color: white;
      font-weight: 500;
      z-index: 9999;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      transition: opacity 0.3s, transform 0.3s;
  }

  .toast.oculto {
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
  }

  .toast.info {
      background: var(--info-color);
  }

  .toast.success {
      background: var(--success-color);
  }

  .toast.warning {
      background: var(--warning-color);
  }

  .toast.error {
      background: var(--danger-color);
  }

  /* Responsivo para reclamos */
  @media (max-width: 1200px) {
      .rec-split-panel {
          grid-template-columns: 1fr;
      }
      
      .rec-accordions-grid {
          grid-template-columns: 1fr;
      }
  }

  @media (max-width: 768px) {
      .rec-controls-bar {
          flex-direction: column;
          align-items: stretch;
      }
      
      .rec-controls-right {
          flex-direction: column;
      }
      
      .rec-toolbar-input {
          width: 100%;
      }
  }       
          /* ======================================*/
          /* ==== ESTILOS BASE MODULO REMESAS =====*/
          /* ==== ESTILOS BASE K@RRENET ===========*/
          /* ======================================*/
          :root {
              --primary-color: #3498db; 
              --success-color: #27ae60; 
              --danger-color: #e74c3c;
              --warning-color: #f39c12; 
              --light-gray: #f4f7f6;
              --dark-gray: #555; 
              --border-color: #ddd; 
              --text-color: #333;
          }

          body {
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              background-color: var(--light-gray);
              margin: 0;
              padding: 20px;
              color: var(--text-color);
          }

          .container {
              max-width: 1600px;
              margin: 0 auto;
              background-color: #ffffff;
              padding: 30px 40px;
              border-radius: 10px;
              box-shadow: 0 4px 15px rgba(0,0,0,0.1);
              min-height: 80vh;
          }

          h1 {
              color: #2c3e50;
              font-size: 1.8em;
              margin-bottom: 25px;
              display: flex;
              align-items: center;
              gap: 15px;
              border-bottom: 1px solid #eee;
              padding-bottom: 15px;
          }

          /* --- PESTAÑAS --- */
          .nav-tabs {
              display: flex;
              border-bottom: 2px solid var(--border-color);
              margin-bottom: 20px;
              padding: 0;
              list-style: none;
          }

          .nav-link {
              padding: 12px 25px;
              border: none;
              background: transparent;
              font-size: 1rem;
              color: var(--dark-gray);
              cursor: pointer;
              border-bottom: 3px solid transparent;
              font-weight: 500;
              transition: all 0.3s;
          }

          .nav-link:hover { color: var(--primary-color); }
          .nav-link.active { 
              color: var(--primary-color); 
              border-bottom-color: var(--primary-color); 
              font-weight: bold; 
          }

          .tab-content { position: relative; }
          .tab-pane { display: none; }
          .tab-pane.active { display: block; animation: fadeIn 0.3s; }
          @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

          /* --- BOTONES Y FORMULARIOS --- */
          .btn {
              padding: 8px 15px;
              border-radius: 4px;
              border: none;
              cursor: pointer;
              font-weight: 500;
              transition: background 0.2s;
              display: inline-flex;
              align-items: center;
              gap: 8px;
          }
          
          .btn-primary { background-color: var(--primary-color); color: white; }
          .btn-primary:hover { background-color: #2980b9; }
          
          .btn-secondary { background-color: #95a5a6; color: white; }
          .btn-secondary:hover { background-color: #7f8c8d; }

          .btn:disabled, .btn[disabled] {
              background-color: #e0e0e0 !important;
              color: #a0a0a0 !important;
              border: 1px solid #dcdcdc;
              cursor: not-allowed;
              pointer-events: none;
          }

          .form-control {
              width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;
              box-sizing: border-box; font-family: inherit; font-size: 0.9rem;
          }
          .form-group { margin-bottom: 10px; } 

          /* --- FILTRO LATERAL (SIDEBAR) --- */
          .primas-layout { display: flex; gap: 20px; align-items: flex-start; }
          
          .filter-sidebar {
              width: 0; opacity: 0; overflow: hidden; background-color: #fcfcfc;
              border-right: 1px solid var(--border-color); transition: all 0.4s ease-in-out;
              padding: 0;
          }
          .filter-sidebar.open { width: 300px; opacity: 1; padding-right: 20px; border-right: 1px solid #ddd; max-height: 70vh; overflow-y: auto; }
          
          .filter-sidebar::-webkit-scrollbar { width: 6px; }
          .filter-sidebar::-webkit-scrollbar-track { background: #f1f1f1; }
          .filter-sidebar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

          .data-area { flex: 1; width: 100%; }

          .toolbar {
              display: flex; justify-content: space-between; align-items: center;
              margin-bottom: 15px; background: #f1f2f6; padding: 10px 15px; border-radius: 6px;
          }
          .back-link { display: inline-block; margin-bottom: 15px; color: var(--dark-gray); text-decoration: none; font-weight: 600; }

          /* --- HEADER CONTEXTO (PESTAÑA 2) --- */
          .context-header {
              background-color: #e8f4fc; border-left: 5px solid var(--primary-color);
              padding: 15px; margin-bottom: 20px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;
          }
          .context-title { font-size: 1.1rem; font-weight: bold; color: #2c3e50; }
          .context-subtitle { font-size: 0.9rem; color: #666; margin-top: 5px; }        
          
          /* --- TABLA K@RRENET --- */
          .table-k {
              width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem;
              border: 1px solid var(--border-color); border-radius: 8px 8px 0 0;
          }
          .table-k th {
              background-color: var(--primary-color); color: #fff; font-weight: 600;
              padding: 10px 15px; text-align: left; height: 45px; vertical-align: bottom; border-bottom: none;
          }
          .table-k th:first-child { border-top-left-radius: 8px; }
          .table-k th:last-child { border-top-right-radius: 8px; }
          .table-k td { padding: 12px 15px; border-bottom: 1px solid #eee; color: #333; vertical-align: middle; }
          .table-k tr:hover { background-color: #f1f8ff; cursor: pointer; }

          .text-right { text-align: right; }
          .text-center { text-align: center; }
          .font-bold { font-weight: bold; }
          .btn-action { background: none; border: none; color: var(--primary-color); cursor: pointer; font-size: 1.1rem; transition: transform 0.2s; }
          .btn-action:hover { transform: scale(1.2); }

          .table-footer {
              margin-top: 15px; background-color: #f1f2f6; padding: 15px;
              border-radius: 6px; display: flex; justify-content: flex-end; gap: 30px; font-weight: bold; color: var(--dark-gray);
          }
          .total-amount { color: var(--danger-color); font-size: 1.2rem; }

          /* --- PAGINACIÓN --- */
          .pagination-container {
              display: flex; justify-content: flex-end; align-items: center; gap: 20px;
              padding: 15px 0; margin-top: 10px; border-top: 1px solid #eee;
          }
          .pagination-info { color: #666; font-size: 0.9rem; font-weight: 500; }
          .pagination-controls { display: flex; gap: 5px; }
          .page-btn { padding: 8px 16px; border: 1px solid #ddd; background-color: #fff; color: var(--text-color); cursor: pointer; border-radius: 4px; }
          .page-btn:hover:not(:disabled) { background-color: #f1f1f1; border-color: #ccc; }
          .page-btn.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }
          .page-btn:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f9f9f9; color: #aaa; }

          .table-k input[type="checkbox"] { width: 15px; height: 15px; margin: 0 auto; display: block; cursor: pointer; }
          .table-k th:first-child, .table-k td:first-child { text-align: center; vertical-align: middle; padding: 0; }

          /* ========================================================================== */
          /* ESTILOS DEL RECIBO DE DESCARGO (MODAL + IMPRESIÓN)                         */
          /* ========================================================================== */
          .modal-overlay {
              position: fixed; top: 0; left: 0; width: 100%; height: 100%;
              background: rgba(0,0,0,0.6); z-index: 9999;
              display: none; justify-content: center; overflow-y: auto; padding-top: 20px;
              backdrop-filter: blur(3px);
          }

          .hoja-recibo {
              background: white; width: 216mm; /* Tamaño Carta */ min-height: 279mm;
              padding: 40px; margin-bottom: 50px;
              box-shadow: 0 0 20px rgba(0,0,0,0.5);
              font-family: 'Times New Roman', serif; 
              color: #000; position: relative;
          }

          /* Header del Recibo */
          .recibo-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px double #000; padding-bottom: 15px; margin-bottom: 15px; }
          .empresa-info { text-align: center; flex: 1; }
          .empresa-info h2 { margin: 0; font-family: Arial, sans-serif; font-size: 16pt; text-transform: uppercase; }
          .empresa-info p { margin: 2px 0; font-size: 10pt; }
          
          .box-remesa { border: 2px solid #000; padding: 5px 10px; text-align: center; margin-bottom: 5px; }
          .box-remesa small { display: block; font-size: 8pt; text-transform: uppercase; }
          .box-remesa span { font-size: 14pt; font-weight: bold; font-family: Arial, sans-serif; }

          .titulo-documento { text-align: center; font-weight: bold; font-size: 14pt; margin: 20px 0; text-decoration: underline; font-family: Arial, sans-serif; }

          .info-destino { margin-bottom: 20px; font-size: 11pt; font-family: Arial, sans-serif; }
          .info-destino .fila-dato { margin-bottom: 5px; }
          .info-destino .label { font-weight: bold; width: 140px; display: inline-block; }

          /* Tabla del Recibo */
          .tabla-impresion { 
              width: 100%; 
              border-collapse: collapse; 
              font-size: 8.5pt; /* Letra un poco más pequeña para que quepan las 8 columnas */
              margin-bottom: 30px; 
          }
          .tabla-impresion th { 
              border-top: 2px solid #000; 
              border-bottom: 2px solid #000; 
              padding: 6px 2px; 
              text-align: center; /* Encabezados centrados por defecto */
              font-weight: bold; 
              background-color: #f0f0f0; /* Ligero gris para diferenciar cabecera en pantalla */
          }
          .tabla-impresion th:first-child { text-align: left; } /* Cliente alineado a la izquierda */
          .tabla-impresion td { 
              border-bottom: 1px solid #ccc; 
              padding: 4px 2px; 
              vertical-align: middle; 
          }    

          .label-total { font-weight: bold; font-size: 11pt; padding-top: 10px; border-top: 2px solid #000; }
          .valor-total { font-weight: bold; font-size: 11pt; padding-top: 10px; border-top: 2px solid #000; }

          /* ESTILO RESUMEN HORIZONTAL (TIPO IMAGEN) */
          .contenedor-resumen {
              display: flex; 
              justify-content: flex-end; /* Alineado a la derecha */
              margin-top: 10px; 
              margin-bottom: 20px;
          }

          .tabla-resumen-horizontal {
              border-collapse: collapse;
              font-family: Arial, sans-serif;
              font-size: 8pt; /* REDUCIDO: De 10pt a 8pt para que combine mejor */
              border: 1px solid #999;
              min-width: 200px; /* Un poco más compacto */
          }

          /* Encabezado Principal (Gris Oscuro) */
          .tabla-resumen-horizontal thead tr:first-child th {
              background-color: #e0e0e0;
              padding: 4px 2px; /* Padding reducido */
              border-bottom: 1px solid #999;
              text-align: center;
              font-weight: bold;
              font-size: 8.5pt; /* Título apenas un poquito más grande */
              letter-spacing: 0.5px;
          }

          /* Encabezados de Columnas */
          .tabla-resumen-horizontal thead tr:last-child th {
              background-color: #f0f0f0;
              border: 1px solid #ccc;
              padding: 3px 8px; /* Más compacto verticalmente */
              text-align: right;
              font-weight: bold;
              text-transform: uppercase;
              font-size: 7.5pt; /* Letra técnica pequeña */
          }

          /* Valores Numéricos */
          .tabla-resumen-horizontal td {
              border: 1px solid #ccc;
              padding: 4px 8px;
              text-align: right;
              font-weight: bold;
              color: #333;
          }        

          /* Firmas */
          .seccion-pago { margin-bottom: 40px; font-size: 10pt; }
          .area-firmas { display: flex; justify-content: space-between; margin-top: 60px; }
          .firma { width: 40%; text-align: center; }
          .linea-firma { border-top: 1px solid #000; margin-bottom: 5px; }
          
          .footer-sistema { position: absolute; bottom: 20px; left: 40px; font-size: 8pt; color: #666; font-family: Arial, sans-serif; }

          .acciones-modal { position: absolute; top: 10px; right: -120px; display: flex; flex-direction: column; gap: 10px; }

          /* REGLAS DE IMPRESIÓN (MÁGICAS) */
          @media print {
              body * { visibility: hidden; } 
              .modal-overlay { position: absolute; left: 0; top: 0; background: none; display: block !important; padding: 0; }
              .hoja-recibo, .hoja-recibo * { visibility: visible; } 
              .hoja-recibo { box-shadow: none; margin: 0; width: 100%; padding: 0; }
              .acciones-modal { display: none; } 
          } 

          /*=========================================================*/
          .badge-success {
              background: #2ecc71;
              color: white;
              padding: 4px 8px;
              border-radius: 6px;
              font-size: 12px;
          }

          .badge-danger {
              background: #e74c3c;
              color: white;
              padding: 4px 8px;
              border-radius: 6px;
              font-size: 12px;
          }
          /*=========================================================*/

          /* =========================
            MODAL GLOBAL
          ========================= */
          .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
          }

          .modal-box {
            background: #1e1e1e;
            width: 420px;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
            overflow: hidden;
            animation: fadeInScale 0.2s ease-in-out;
          }

          .modal-header {
            padding: 15px 20px;
            background: #2a2a2a;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: #fff;
          }

          .modal-body {
            padding: 20px;
            color: #ddd;
            font-size: 15px;
          }

          .modal-footer {
            padding: 15px 20px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            background: #2a2a2a;
          }

          .modal-close {
            background: none;
            border: none;
            font-size: 20px;
            color: #aaa;
            cursor: pointer;
          }

          .modal-close:hover {
            color: #fff;
          }

          .btn-primary {
            background: #3498db;
            border: none;
            padding: 8px 16px;
            color: white;
            border-radius: 6px;
            cursor: pointer;
          }

          .btn-secondary {
            background: #7f8c8d;
            border: none;
            padding: 8px 16px;
            color: white;
            border-radius: 6px;
            cursor: pointer;
          }

          @keyframes fadeInScale {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
          }

          /* ==========================================================
          FIX BOTONES MODALES USUARIOS (Permisos y Restricciones)
          ========================================================== */

        /* Quitar posicionamiento absoluto heredado */
        #modalPermisos .acciones-modal,
        #modalRestricciones .acciones-modal {
            position: static !important;
            right: auto !important;
            top: auto !important;

            display: flex;
            justify-content: flex-end;  /* A la derecha */
            gap: 12px;
            margin-top: 25px;
        }

        /* Evitar scroll horizontal dentro del modal */
        #modalPermisos .modal-contenido,
        #modalRestricciones .modal-contenido {
            overflow-x: hidden;
        }

        /* ==========================================================
        FIX FINAL BOTONES MODALES USUARIOS
        ========================================================== */

      /* Contenedor de botones */
      #modalPermisos .acciones-modal,
      #modalRestricciones .acciones-modal {
          position: static !important;
          display: flex !important;
          flex-direction: row !important;   /* En línea */
          justify-content: flex-end !important; /* A la derecha */
          align-items: center;
          gap: 12px;
          margin-top: 30px;
          width: 100%;
      }

      /* Quitar ancho completo heredado */
      #modalPermisos .acciones-modal button,
      #modalRestricciones .acciones-modal button {
          width: auto !important;
          min-width: 110px;
      }

   /* ==========================================================
   BOTÓN CERRAR MODALES (X)
   ========================================================== */

.btn-cerrar-modal {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    color: #555;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cerrar-modal:hover {
    background-color: #e74c3c;
    color: #fff;
}

/* ===== Modal Compartir Documento ===== */
.modal-contenido-compartir {
  max-width: 520px;
  padding-bottom: 10px;
}

.compartir-titulo {
  margin: 0 0 5px 0;
  font-size: 1.15em;
  color: #2c3e50;
}
.compartir-titulo i {
  color: #8e44ad;
}

.compartir-nombre-doc {
  margin: 0 0 15px 0;
  font-size: 0.92em;
  color: #666;
  word-break: break-all;
  padding: 6px 10px;
  background: #f8f9fa;
  border-radius: 5px;
  border-left: 3px solid #8e44ad;
}

.compartir-loading {
  text-align: center;
  padding: 30px 0;
  color: #888;
  font-size: 0.95em;
}
.compartir-loading i {
  margin-right: 6px;
}

.compartir-sin-contactos {
  text-align: center;
  padding: 30px 15px;
  color: #999;
}
.compartir-sin-contactos i {
  font-size: 2em;
  margin-bottom: 10px;
  display: block;
  color: #ccc;
}
.compartir-sin-contactos p {
  margin: 0;
  font-size: 0.93em;
}

.compartir-seccion {
  margin-bottom: 15px;
}

.compartir-seccion-titulo {
  font-size: 0.95em;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.compartir-seccion-titulo i {
  margin-right: 5px;
  color: #7f8c8d;
}

.compartir-canales-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compartir-canal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  margin: 0;
}
.compartir-canal-option:hover {
  background-color: #f8f4ff;
  border-color: #c9a0dc;
}
.compartir-canal-option input[type="radio"] {
  margin: 0;
  width: auto;
  accent-color: #8e44ad;
}
.compartir-canal-option input[type="radio"]:checked ~ .compartir-canal-info {
  font-weight: 500;
}

.compartir-canal-icono {
  font-size: 1.15em;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.compartir-canal-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.compartir-canal-tipo {
  font-size: 0.78em;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.compartir-canal-valor {
  font-size: 0.92em;
  color: #333;
  word-break: break-all;
}

.compartir-badge-principal {
  display: inline-block;
  background: #27ae60;
  color: white;
  font-size: 0.7em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}

.compartir-contacto-item {
  margin-bottom: 10px;
  padding: 8px;
  background: #fafafa;
  border-radius: 6px;
}

.compartir-contacto-nombre {
  font-size: 0.9em;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}
.compartir-contacto-nombre i {
  margin-right: 5px;
  color: #95a5a6;
}

.compartir-acciones {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  margin-top: 5px;
}
.compartir-acciones button {
  flex: 1;
}

.btn-compartir-whatsapp {
  background-color: #25D366 !important;
  color: white !important;
}
.btn-compartir-whatsapp:hover {
  background-color: #1da851 !important;
}

.btn-compartir-email {
  background-color: #3498db !important;
  color: white !important;
}
.btn-compartir-email:hover {
  background-color: #2980b9 !important;
}

/* =========================================================
   COMPONENTE PUBLICO: FILTER SIDEBAR (EXTRAIDO DE GUIA)
   ========================================================= */

.kre-filter-panel.filter-sidebar {
  width: 0;
  margin-left: -20px;
  opacity: 0;
  background-color: #fff;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kre-filter-panel.filter-sidebar.open {
  width: 340px;
  margin-left: 0;
  opacity: 1;
}

.kre-filter-panel .sidebar-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  background-color: #fcfcfc;
  flex-shrink: 0;
}

.kre-filter-panel .sidebar-body {
  padding: 15px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  scrollbar-width: thin;
}

.kre-filter-panel .sidebar-body::-webkit-scrollbar {
  width: 6px;
}

.kre-filter-panel .sidebar-body::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

.kre-filter-panel .filter-section {
  border-bottom: 1px solid #eee;
  padding-bottom: 2px;
  margin-bottom: 2px;
}

.kre-filter-panel .filter-section:last-child {
  border-bottom: none;
}

.clientes-filter-section {
  overflow: hidden;
}

.clientes-filter-section > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  color: var(--primary-color);
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.clientes-filter-section > summary::-webkit-details-marker {
  display: none;
}

.clientes-filter-section > summary > i {
  width: 18px;
  text-align: center;
}

.clientes-filter-section > summary::after {
  content: '\f078';
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-size: 0.72rem;
  font-weight: 900;
  transition: transform 0.2s ease;
}

.clientes-filter-section[open] > summary::after {
  transform: rotate(180deg);
}

.clientes-filter-section-body {
  padding: 2px 2px 6px;
}

.kre-filter-panel .section-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 5px;
  cursor: pointer;
}

.kre-filter-panel .form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 5px;
}

.kre-filter-panel .form-control {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.85rem;
}

.kre-filter-panel .form-group {
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
   Filtro de seleccion multiple con checkboxes (p. ej. Ramos en reporteria de
   reclamos). El <select multiple> real queda oculto como fuente de verdad; el
   panel se despliega en linea (no absoluto) porque .sidebar-body recorta con
   overflow-y:auto.
   --------------------------------------------------------------------------- */
.kre-filter-panel .kre-multiselect {
  position: relative;
}

.kre-filter-panel .kre-multiselect-source {
  display: none;
}

.kre-filter-panel .kre-multiselect-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  color: #333;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kre-filter-panel .kre-multiselect-toggle:hover {
  border-color: var(--primary-color, #3498db);
}

.kre-filter-panel .kre-multiselect.is-open .kre-multiselect-toggle {
  border-color: var(--primary-color, #3498db);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.18);
}

.kre-filter-panel .kre-multiselect.has-selection .kre-multiselect-toggle {
  border-color: var(--primary-color, #3498db);
  background: #f3f9fe;
  font-weight: 600;
}

.kre-filter-panel .kre-multiselect-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kre-filter-panel .kre-multiselect-value.is-placeholder {
  color: #98a3b3;
  font-weight: 400;
}

.kre-filter-panel .kre-multiselect-caret {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: #8894a5;
  transition: transform 0.18s ease;
}

.kre-filter-panel .kre-multiselect.is-open .kre-multiselect-caret {
  transform: rotate(180deg);
  color: var(--primary-color, #3498db);
}

.kre-filter-panel .kre-multiselect-panel {
  margin-top: 6px;
  border: 1px solid #dbe3ec;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(23, 43, 77, 0.1);
  overflow: hidden;
}

.kre-filter-panel .kre-multiselect-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-bottom: 1px solid #eef2f7;
  background: #fafcfe;
}

.kre-filter-panel .kre-multiselect-search i {
  font-size: 0.72rem;
  color: #98a3b3;
}

.kre-filter-panel .kre-multiselect-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  color: #333;
}

.kre-filter-panel .kre-multiselect-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-bottom: 1px solid #eef2f7;
}

.kre-filter-panel .kre-multiselect-toolbar button {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-color, #3498db);
  cursor: pointer;
}

.kre-filter-panel .kre-multiselect-toolbar button:hover {
  text-decoration: underline;
}

.kre-filter-panel .kre-multiselect-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: #7a8798;
  white-space: nowrap;
}

.kre-filter-panel .kre-multiselect-options {
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.kre-filter-panel .kre-multiselect-options::-webkit-scrollbar {
  width: 6px;
}

.kre-filter-panel .kre-multiselect-options::-webkit-scrollbar-thumb {
  background-color: #ccd4de;
  border-radius: 10px;
}

.kre-filter-panel .kre-multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: #444;
  cursor: pointer;
  border-bottom: 1px solid #f4f7fa;
}

.kre-filter-panel .kre-multiselect-option:last-child {
  border-bottom: none;
}

.kre-filter-panel .kre-multiselect-option:hover {
  background: #f5f9fd;
}

.kre-filter-panel .kre-multiselect-option.is-checked {
  background: #eef6fd;
  color: #1f2d3d;
  font-weight: 600;
}

.kre-filter-panel .kre-multiselect-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--primary-color, #3498db);
  cursor: pointer;
}

.kre-filter-panel .kre-multiselect-option span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kre-filter-panel .kre-multiselect-empty {
  margin: 0;
  padding: 14px 10px;
  text-align: center;
  font-size: 0.78rem;
  color: #98a3b3;
}

/* Separador para diferenciar un grupo de filtros de los que le siguen (p. ej. en
   polizas, separar los selects de vigencia/vencimiento de renglon/moneda/aseguradora). */
.kre-filter-panel .form-group.kre-filter-group-sep {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed #cfd8e3;
}

.kre-filter-panel .radio-group-box {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kre-filter-panel .radio-group-box label,
.kre-filter-panel .check-row {
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.kre-filter-panel .advanced-box {
  background-color: #f0f2f5;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #dce1e6;
}

.kre-filter-panel .btn-process {
  width: 100%;
  padding: 10px;
  background-color: var(--success-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.kre-filter-panel .btn-process:hover {
  background-color: #219150;
}

.kre-filter-panel details > summary {
  list-style: none;
}

.kre-filter-panel details > summary::-webkit-details-marker {
  display: none;
}

.kre-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kre-filter-panel .btn-clear-filters {
  padding: 10px;
  background-color: #95a5a6;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}

.kre-filter-panel .btn-clear-filters:hover {
  background-color: #7f8c8d;
}

.kre-filter-only-shell {
  padding: 16px;
  min-height: 100vh;
  box-sizing: border-box;
}

.kre-filter-only-shell #filterSidebarHost {
  display: flex;
  align-items: stretch;
}

.kre-filter-only-shell .kre-filter-panel.filter-sidebar,
.kre-filter-only-shell .kre-filter-panel.filter-sidebar.open {
  width: 420px;
  margin-left: 0;
  opacity: 1;
  border: 1px solid #ddd;
}

@media (max-width: 1100px) {
  .kre-filter-panel.filter-sidebar,
  .kre-filter-panel.filter-sidebar.open {
    width: 100%;
    margin-left: 0;
    opacity: 1;
  }

  .kre-filter-only-shell .kre-filter-panel.filter-sidebar,
  .kre-filter-only-shell .kre-filter-panel.filter-sidebar.open {
    width: 100%;
  }
}

/* =========================================================
   MODULO REPORTES - LISTA Y BASE FACTURACION
   ========================================================= */

.kre-reportes-list-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.kre-reportes-guide-surface {
  background: #ffffff;
  border: 1px solid #dde5ee;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

.kre-reportes-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.kre-reportes-guide-title-wrap {
  min-width: 0;
}

.kre-reportes-guide-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #3498db;
  font-size: 1.8rem;
  font-weight: 700;
}

.kre-reportes-guide-subtitle {
  margin: 6px 0 0;
  color: #666;
  font-size: 1rem;
}

.kre-reportes-refresh-btn {
  background: #f2f6fb;
  border: 1px solid #cfd9e6;
  color: #325a80;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.kre-reportes-refresh-btn:hover {
  background: #e6eef8;
}

.kre-reportes-guide-filter-panel {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.kre-reportes-guide-filter-panel > i {
  color: #3498db;
  font-size: 1.15rem;
}

.kre-reportes-guide-filter-label {
  font-size: 1rem;
  font-weight: 600;
  color: #111820;
}

.kre-reportes-guide-filter-select {
  flex: 1;
  min-width: 260px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
  color: #1a2a3a;
  background: #ffffff;
  outline: none;
}

.kre-reportes-guide-count {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 700;
  color: #4a6076;
  background: #ebf2fa;
  border: 1px solid #d4dfec;
  border-radius: 16px;
  padding: 6px 10px;
}

.kre-reportes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.kre-reporte-card {
  border: 1px solid transparent;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-align: left;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.kre-reporte-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  border-color: #3498db;
}

.kre-reporte-card-disabled {
  opacity: 0.56;
  cursor: not-allowed;
  background: #f9fbfe;
}

.kre-reporte-card-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #dce5f2;
}

.kre-reporte-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef7ff;
  color: #3498db;
  flex-shrink: 0;
  font-size: 1.5rem;
}

.kre-reporte-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.kre-reporte-card-content strong {
  color: #333;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kre-reporte-card-content small {
  color: #999;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.kre-reporte-card-action {
  margin-left: auto;
  color: #68829d;
  font-size: 1.05rem;
}

.kre-reportes-empty-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  border: 1px dashed #c9d8ea;
  border-radius: 10px;
  padding: 14px;
  background: #f8fbff;
  color: #57708a;
}

.kre-report-view-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 8px;
  height: calc(100vh - 110px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  --primary-color: #3498db;
  --success-color: #27ae60;
  --danger-color: #e74c3c;
  --border-color: #ddd;
}

.kre-report-guide-shell {
  background: #ffffff;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.kre-report-guide-header-section {
  display: block;
  margin-bottom: 0;
  padding: 20px 40px 0;
}

.kre-report-guide-title {
  margin: 0 0 10px;
  color: #2c3e50;
  font-size: 1.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  text-align: left;
}

.kre-report-guide-title i {
  color: var(--primary-color);
}

.kre-report-guide-subtitle {
  display: none;
}

.kre-report-divider {
  border: 0;
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 0 10px;
}

.kre-report-nav-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  list-style: none;
  margin: 0;
  padding: 0 40px;
  gap: 5px;
}

.kre-report-nav-link {
  padding: 10px 20px;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: #555;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  transition: all 0.3s;
}

.kre-report-nav-link:hover {
  color: #3498db;
  background-color: #f9f9f9;
}

.kre-report-nav-link.active {
  color: #3498db;
  border-bottom-color: #3498db;
  font-weight: 700;
}

.kre-report-back-link {
  color: #3b5d7f;
  text-decoration: none;
  border: 1px solid #d2deeb;
  background: #f4f8fd;
  border-radius: 8px;
  padding: 7px 10px;
  font-weight: 600;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.kre-report-back-link:hover {
  background: #e8f1fa;
}

.kre-report-toolbar {
  border: 1px solid var(--border-color);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  background: #f8f9fa;
  padding: 9px 16px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 0;
}

.kre-report-toolbar-filters,
.kre-report-toolbar-search-group,
.kre-report-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.kre-report-toolbar-filters {
  flex: 0 0 360px;
  justify-content: flex-start;
}

.kre-report-toolbar-search-group {
  flex: 1;
  min-width: 280px;
  padding-left: 8px;
  border-left: 1px solid #d6dee8;
}

.kre-report-toolbar-right {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.kre-report-quick-search {
  display: inline-flex;
  align-items: stretch;
  min-width: 280px;
  width: 320px;
}

.kre-report-quick-search input {
  flex: 1;
  border: 1px solid #d4deea;
  border-right: none;
  border-radius: 999px 0 0 999px;
  padding: 7px 10px;
  font-size: 0.85rem;
  outline: none;
}

.kre-report-quick-search input:focus {
  border-color: #1f6feb;
  box-shadow: inset 0 0 0 1px #1f6feb;
}

.kre-report-quick-search button {
  border: 1px solid #d4deea;
  border-radius: 0 999px 999px 0;
  width: 45px;
  background: #ffffff;
  color: var(--primary-color);
  cursor: pointer;
}

.kre-report-quick-search button:hover {
  background: #f4f8ff;
}

.kre-btn-primary {
  border: none;
  border-radius: 4px;
  background: var(--primary-color);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  font-weight: 700;
  cursor: pointer;
}

.kre-btn-primary:hover {
  background: #2980b9;
}

.kre-btn-alt {
  border: none;
  border-radius: 4px;
  background: #8e44ad;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  font-weight: 700;
  cursor: pointer;
}

.kre-btn-alt:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kre-report-action-btn {
  border: none;
  border-radius: 4px;
  color: #ffffff;
  height: 40px;
  padding: 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.kre-report-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kre-btn-excel {
  background: #217346;
}

.kre-btn-print {
  background: #d32f2f;
}

.kre-report-chip {
  border: none;
  border-left: 2px solid var(--border-color);
  border-radius: 0;
  height: 40px;
  padding: 0 0 0 14px;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666;
  background: transparent;
  font-weight: 500;
}

.kre-report-chip-muted {
  background: transparent;
}

.kre-report-chip strong {
  color: var(--primary-color);
}

.kre-report-tab-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.kre-report-tab-pane {
  display: none;
  flex: 1;
  min-height: 0;
}

.kre-report-tab-pane.active {
  display: flex;
  flex-direction: column;
}

.kre-report-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: clip;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

#reportFilterHost {
  display: flex;
  align-items: stretch;
  min-height: 0;
}

#reportFilterHost .kre-filter-panel.filter-sidebar,
#reportFilterHost .kre-filter-panel.filter-sidebar.open {
  width: 340px;
  margin-left: 0;
  opacity: 1;
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--border-color);
  background: #fff;
  height: 100%;
}

#reportFilterHost .kre-filter-panel.filter-sidebar .sidebar-header {
  display: block;
  padding: 16px;
  margin: 0;
  border-bottom: 1px solid #e8edf3;
}

#reportFilterHost .kre-filter-panel.filter-sidebar .kre-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#reportFilterHost .kre-filter-panel.filter-sidebar .btn-process,
#reportFilterHost .kre-filter-panel.filter-sidebar .btn-clear-filters {
  width: auto;
  flex: 1;
  min-width: 0;
  margin: 0;
  height: 40px;
  padding: 0 8px;
  font-size: 0.88rem;
}

#reportFilterHost .kre-filter-panel.filter-sidebar:not(.open) {
  width: 0;
  border: none;
  margin-left: -20px;
  opacity: 0;
  overflow: hidden;
}

.kre-report-results-area {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
}

.kre-report-response-meta {
  display: none;
}

.kre-report-response-meta span {
  background: #f1f6fc;
  border: 1px solid #d4e2f1;
  border-radius: 999px;
  padding: 4px 8px;
}

.kre-report-table-shell {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  position: relative;
}

/* ID rule — máxima especificidad, igual que el guide. Altura explícita = scroll dentro del shell */
#kre-report-output {
  height: calc(100vh - 300px);
  /* Un único contenedor de scroll (X e Y) para que thead/tfoot sticky y las
     columnas congeladas resuelvan todos contra el mismo scrollport. */
  overflow-x: auto;
  overflow-y: auto;
}

#kre-report-table-wrapper {
  /* Passthrough: ya no es contenedor de scroll para no capturar el sticky vertical. */
  overflow: visible;
  width: 100%;
}

.kre-report-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  /* El <table> no debe ser contexto de recorte: overflow hidden rompe el
     position:sticky de thead/tfoot (mismo criterio que facturas). */
  overflow: visible !important;
}

.kre-report-table-guide {
  table-layout: auto;
}

.kre-report-table-guide .group-title {
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.kre-report-table-guide th {
  vertical-align: bottom;
}

.kre-report-table-guide td,
.kre-report-table-guide th {
  border: 1px solid #e1e7ef;
}

.kre-report-table-guide .cell-left {
  text-align: left;
}

.kre-report-table-guide .cell-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kre-report-table-guide .cell-center {
  text-align: center;
}

.kre-report-table-guide .cell-small-label {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  text-align: left;
  font-weight: 700;
  color: #334155;
}

.kre-report-table-guide .cell-small-label.nta {
  text-align: center;
  background: #f0f7ff;
  color: #2980b9;
}

.kre-report-table-guide .cell-small-value {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  text-align: center;
  font-weight: 700;
  color: #1f2937;
}

.kre-report-table-guide .kre-currency-rd {
  font-weight: 700;
  color: #2980b9;
}

.kre-report-table-guide .kre-currency-usd {
  font-weight: 700;
  color: #27ae60;
}

.kre-report-table-guide .kre-balance-positive {
  color: #e74c3c;
  font-weight: 700;
  background: #fdf8e4;
}

.kre-report-table-guide .balance-total {
  background: #27ae60;
  color: #053d21;
  font-weight: 800;
}

.kre-report-table-guide tfoot td {
  font-weight: 700;
}

.kre-report-table-guide .kre-report-footer-title {
  text-align: right;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.kre-report-table-simple td[rowspan="2"] {
  vertical-align: middle;
}

.kre-report-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.kre-report-table thead th {
  background: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.kre-report-table th {
  background: var(--primary-color);
  color: #ffffff;
  font-size: 0.82rem;
  text-align: left;
  padding: 9px 10px;
  white-space: nowrap;
  border: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kre-report-table th:first-child {
  border-top-left-radius: 8px;
}

.kre-report-table th:last-child {
  border-top-right-radius: 8px;
}

.kre-report-table td {
  border-bottom: 1px solid #ececec;
  padding: 9px 10px;
  font-size: 0.82rem;
  color: #2f3f54;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kre-report-table tbody tr:hover {
  background: #f8fbff;
}

.kre-cell-currency,
.kre-cell-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kre-report-table tbody td.kre-cell-number,
.kre-report-table tbody td.kre-cell-currency {
  text-align: right;
  padding-right: 4px;
}

.kre-report-table th.kre-col-currency,
.kre-report-table th.kre-col-number {
  text-align: right;
}

.kre-report-table th.kre-col-text {
  text-align: left;
}

.kre-report-table td.kre-cell-text,
.kre-report-table th.kre-col-text {
  min-width: 120px;
}

.kre-report-footer-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kre-report-table tfoot td {
  /* El pin vertical lo hace el <tfoot> como bloque (soporta footers multi-moneda
     sin solaparse). Aquí solo estilos; la posición sticky por celda causaba que
     todas las filas se apilaran en el borde inferior. */
  background: #f8f9fa;
  border-top: 2px solid var(--primary-color);
  font-weight: 700;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Los footers de totales de simple y comparativo usan celdas con rowspan="2"
   (Mon, TOTALES, Balance, %Var, %Pen). Fijar el <tfoot> con position:sticky y
   apilar las filas por offset hace que las celdas con rowspan floten en una
   posición distinta a su fila pareja, provocando solapamiento. Para estos dos
   formatos el footer fluye al final de los datos (no flotante): se ve limpio y
   nunca se monta sobre el cuerpo. El detallado conserva su footer fijo (una
   fila por moneda, sin rowspan). */
.kre-report-table-simple tfoot,
.kre-report-table-comparativo tfoot {
  position: static !important;
}

.kre-report-table-simple tfoot td,
.kre-report-table-simple tfoot th,
.kre-report-table-comparativo tfoot td,
.kre-report-table-comparativo tfoot th {
  position: static !important;
  bottom: auto !important;
}

/* Realce del bloque de totales para que se lea como una sección al final. */
.kre-report-table-simple tfoot tr:first-child td,
.kre-report-table-simple tfoot tr:first-child th,
.kre-report-table-comparativo tfoot tr:first-child td,
.kre-report-table-comparativo tfoot tr:first-child th {
  border-top: 3px solid var(--primary-color);
}

.kre-report-table-comparativo {
  table-layout: fixed;
}

.kre-report-table-comparativo th,
.kre-report-table-comparativo td {
  padding: 5px 6px;
  font-size: 0.78rem;
  line-height: 1.15;
}

.kre-report-table-comparativo .comp-mon-head,
.kre-report-table-comparativo .comp-mon {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  text-align: center;
}

.kre-report-table-comparativo .comp-renglon-head,
.kre-report-table-comparativo .cell-renglon-name {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.22;
  word-break: break-word;
}

.kre-report-table-comparativo .cell-renglon-name {
  font-weight: 500;
}

.kre-report-table-comparativo .comp-metric-label {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left;
}

.kre-report-table-comparativo .comp-metric-value {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  text-align: right;
}

.kre-report-table-comparativo .comp-nta-label {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  text-align: center;
}

.kre-report-table-comparativo .comp-money {
  width: 94px;
  min-width: 94px;
  max-width: 94px;
  text-align: right;
}

.kre-report-table-comparativo .comp-percent {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  text-align: center;
  font-weight: 700;
}

.kre-report-table-comparativo .group-title {
  white-space: nowrap;
}

@media print {
  .kre-report-table-comparativo {
    table-layout: fixed !important;
    width: 100% !important;
  }

  .kre-report-table-comparativo th,
  .kre-report-table-comparativo td {
    white-space: normal !important;
    word-break: break-word;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    padding: 3px 4px !important;
  }

  .kre-report-table-comparativo .comp-mon-head,
  .kre-report-table-comparativo .comp-mon {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  .kre-report-table-comparativo .comp-renglon-head,
  .kre-report-table-comparativo .cell-renglon-name {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }

  .kre-report-table-comparativo .comp-metric-label,
  .kre-report-table-comparativo .comp-nta-label {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    text-align: center !important;
  }

  .kre-report-table-comparativo .comp-metric-value {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  .kre-report-table-comparativo .comp-money {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }

  .kre-report-table-comparativo .comp-percent {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }
}

.kre-report-table tfoot td.kre-cell-number,
.kre-report-table tfoot td.kre-cell-currency {
  text-align: right;
  padding-right: 4px;
}

.kre-report-empty-cell {
  text-align: center;
  padding: 24px 10px;
  color: #607a95;
}

.kre-report-placeholder {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  color: #2f3f54;
}

.kre-report-placeholder-icon {
  color: #c8c8c8;
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 16px;
}

.kre-report-placeholder-text {
  font-size: 2rem;
  line-height: 1.2;
}

.kre-report-graph-placeholder {
  margin: 24px;
  border: 1px dashed #cad6e6;
  border-radius: 10px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d8299;
  background: #f9fbfe;
}

.kre-report-charts-shell {
  flex: 1;
  min-height: 0;
  border: 1px dashed #cad6e6;
  border-radius: 10px;
  background: #f9fbfe;
  padding: 16px;
  overflow: auto;
}

.kre-report-charts-empty {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d8299;
  font-size: 1.05rem;
}

.kre-chart-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.kre-chart-kpi-item {
  border: 1px solid #dde7f2;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.kre-chart-kpi-item span {
  display: block;
  font-size: 0.8rem;
  color: #6d8299;
  margin-bottom: 6px;
}

.kre-chart-kpi-item strong {
  display: block;
  color: #2f3f54;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kre-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: 14px;
}

.kre-chart-card {
  border: 1px solid #dde7f2;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.kre-chart-card-title {
  color: #2f3f54;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.kre-chart-canvas {
  width: 100%;
  height: 360px;
}

.kre-chart-grid .kre-chart-card:nth-child(3),
.kre-chart-grid .kre-chart-card:nth-child(4) {
  grid-column: 1 / -1;
}

/* =========================================================
   KPI strip — Reclamos (7 columnas con acentos)
   ========================================================= */
.kre-chart-kpi-strip.kre-chart-kpi-reclamos {
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.kre-chart-kpi-item.kre-kpi-abierto {
  border-left: 4px solid #e74c3c;
  background: linear-gradient(90deg, rgba(231,76,60,0.07) 0%, #fff 60%);
}

.kre-chart-kpi-item.kre-kpi-abierto strong {
  color: #c0392b;
}

.kre-chart-kpi-item.kre-kpi-cerrado {
  border-left: 4px solid #27ae60;
  background: linear-gradient(90deg, rgba(39,174,96,0.07) 0%, #fff 60%);
}

.kre-chart-kpi-item.kre-kpi-cerrado strong {
  color: #1e8449;
}

.kre-chart-kpi-item.kre-kpi-ratio {
  border-left: 4px solid #2980b9;
  background: linear-gradient(90deg, rgba(41,128,185,0.07) 0%, #fff 60%);
}

.kre-chart-kpi-item.kre-kpi-ratio strong {
  color: #21618c;
}

/* =========================================================
   Theming sutil por reporte para las tarjetas de gráficas
   ========================================================= */
.kre-chart-grid-theme-facturacion .kre-chart-card { border-top: 3px solid #2f8fd0; }
.kre-chart-grid-theme-facturacion .kre-chart-card-title { color: #1f6feb; }

.kre-chart-grid-theme-cobros .kre-chart-card { border-top: 3px solid #27ae60; }
.kre-chart-grid-theme-cobros .kre-chart-card-title { color: #117a65; }

.kre-chart-grid-theme-creditos .kre-chart-card { border-top: 3px solid #e67e22; }
.kre-chart-grid-theme-creditos .kre-chart-card-title { color: #ba4a00; }

.kre-chart-grid-theme-comisiones .kre-chart-card { border-top: 3px solid #9b59b6; }
.kre-chart-grid-theme-comisiones .kre-chart-card-title { color: #6c3483; }

.kre-chart-grid-theme-reclamos .kre-chart-card { border-top: 3px solid #e74c3c; }
.kre-chart-grid-theme-reclamos .kre-chart-card-title { color: #c0392b; }

@media (max-width: 1100px) {
  .kre-chart-kpi-strip.kre-chart-kpi-reclamos {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

.kre-report-view-page.charts-mode #reportFilterHost,
.kre-report-view-page.charts-mode #btnToggleFilterPanel,
.kre-report-view-page.charts-mode #btnShowCharts,
.kre-report-view-page.charts-mode .kre-report-toolbar-search-group,
.kre-report-view-page.charts-mode #btnExportExcel,
.kre-report-view-page.charts-mode #btnPrintReport {
  display: none !important;
}

.kre-report-view-page.charts-mode #btnExportChartsPdf {
  display: inline-flex !important;
}

.kre-report-view-page.charts-mode .kre-report-toolbar {
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 8px;
}

.kre-report-view-page.charts-mode .kre-report-toolbar-filters {
  display: none !important;
}

.kre-report-view-page.charts-mode .kre-report-toolbar-right {
  flex: 1;
  justify-content: flex-end;
}

.kre-btn-pdf {
  background: #c0392b;
}

.kre-btn-pdf:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kre-report-charts-shell {
  margin-top: 0;
}

.kre-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.kre-modal-card {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 12px;
  border: 1px solid #dbe5f0;
  box-shadow: 0 18px 50px rgba(13, 38, 76, 0.22);
}

.kre-modal-header,
.kre-modal-footer {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8edf4;
}

.kre-modal-footer {
  border-bottom: 0;
  border-top: 1px solid #e8edf4;
  justify-content: flex-end;
  gap: 8px;
}

.kre-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #2f3f54;
}

.kre-modal-close {
  border: 0;
  background: transparent;
  color: #6b7a90;
  font-size: 1.1rem;
  cursor: pointer;
}

.kre-modal-body {
  padding: 14px 18px;
}

.kre-modal-help {
  margin: 0 0 12px 0;
  color: #5f7087;
  font-size: 0.9rem;
}

.kre-modal-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
}

.kre-modal-tools {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

.kre-modal-tool-btn {
  border: 1px solid #ced9e7;
  background: #f7faff;
  color: #2f3f54;
  border-radius: 6px;
  height: 30px;
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.kre-modal-tool-btn:hover {
  background: #edf4ff;
}

.kre-modal-check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  padding: 10px;
  color: #2f3f54;
  font-size: 0.9rem;
}

.kre-modal-check-item input {
  margin-top: 2px;
}

.kre-modal-btn {
  border: 0;
  border-radius: 7px;
  height: 36px;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
}

.kre-modal-btn-muted {
  background: #eef2f7;
  color: #44566f;
}

.kre-modal-btn-primary {
  background: #1f6feb;
  color: #fff;
}

@media (max-width: 1100px) {
  .kre-reportes-list-page {
    padding: 16px;
  }

  .kre-reportes-guide-surface {
    padding: 18px;
  }

  .kre-report-layout {
    flex-direction: column;
    min-height: auto;
    padding: 0;
  }

  .kre-report-toolbar {
    flex-wrap: wrap;
    align-items: stretch;
    padding: 10px 16px;
  }

  .kre-report-toolbar-filters,
  .kre-report-toolbar-search-group {
    flex: 1 1 100%;
    min-width: 0;
    border-left: 0;
    padding-left: 0;
  }

  .kre-report-toolbar-filters {
    flex-wrap: wrap;
  }

  .kre-report-toolbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  .kre-report-quick-search {
    width: min(360px, 100%);
    min-width: 0;
  }

  .kre-reportes-guide-header {
    flex-direction: column;
  }

  .kre-reportes-guide-filter-panel {
    flex-wrap: wrap;
  }

  .kre-reportes-guide-count {
    margin-left: 0;
  }

  #reportFilterHost .kre-filter-panel.filter-sidebar,
  #reportFilterHost .kre-filter-panel.filter-sidebar.open {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }

  #reportFilterHost .kre-filter-panel.filter-sidebar:not(.open) {
    display: none;
  }

  .kre-report-placeholder-text {
    font-size: 1.25rem;
  }

  .kre-chart-kpi-strip {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .kre-chart-grid {
    grid-template-columns: 1fr;
  }

  .kre-modal-checks {
    grid-template-columns: 1fr;
  }
}

@media print {
  #sidebar,
  .kre-report-nav-tabs,
  .kre-report-toolbar,
  #reportFilterHost,
  .kre-report-graph-placeholder,
  #btnShowCharts,
  #btnExportExcel,
  #btnPrintReport {
    display: none !important;
  }

  #main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .kre-report-view-page {
    padding: 0;
    min-height: auto;
  }

  .kre-report-guide-shell {
    border: 0;
    box-shadow: none;
    min-height: auto;
  }

  .kre-report-layout,
  .kre-report-tab-pane.active {
    display: block !important;
    min-height: auto;
  }

  .kre-report-results-area {
    padding: 0;
  }

  .kre-report-table-shell {
    height: auto;
    overflow: visible;
    border: 0;
  }

  .kre-report-table thead {
    position: static;
  }
}

/* ===== Ajustes Créditos (reportería) ===== */
.kre-report-table-detallado .cell-left {
  max-width: 260px;
}

.kre-report-table-comparativo .group-title {
  letter-spacing: 0.02em;
}

.kre-report-table-comparativo td.comp-money,
.kre-report-table-comparativo td.comp-percent {
  white-space: nowrap;
}

/* =========================================================
   Listados de facturas y cobros en polizas
   Mostrar contenido completo sin truncado
   ========================================================= */

#modalFactura #facturaListPane .tabla-wrapper,
#modalCobro #cobroListPane .tabla-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#modalFactura #facturaListPane .data-table,
#modalCobro #tablaCobrosPoliza {
  width: 100%;
  table-layout: auto !important;
}

#modalFactura #facturaListPane .data-table th,
#modalFactura #facturaListPane .data-table td,
#modalCobro #tablaCobrosPoliza th,
#modalCobro #tablaCobrosPoliza td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
  line-height: 1.35;
  text-align: left;
}

#modalFactura #facturaListPane .data-table thead th,
#modalCobro #tablaCobrosPoliza thead th {
  font-size: 13px;
}

#modalFactura #facturaListPane .data-table tbody td,
#modalCobro #tablaCobrosPoliza tbody td {
  font-size: 13px;
}

#modalFactura #facturaListPane .data-table th:last-child,
#modalFactura #facturaListPane .data-table td:last-child,
#modalCobro #tablaCobrosPoliza th:last-child,
#modalCobro #tablaCobrosPoliza td:last-child {
  white-space: nowrap !important;
  text-align: center;
  width: 1%;
}

#modalCobro #tablaCobrosPoliza th:nth-child(1),
#modalCobro #tablaCobrosPoliza td:nth-child(1),
#modalCobro #tablaCobrosPoliza th:nth-child(2),
#modalCobro #tablaCobrosPoliza td:nth-child(2),
#modalCobro #tablaCobrosPoliza th:nth-child(3),
#modalCobro #tablaCobrosPoliza td:nth-child(3),
#modalCobro #tablaCobrosPoliza th:nth-child(4),
#modalCobro #tablaCobrosPoliza td:nth-child(4),
#modalCobro #tablaCobrosPoliza th:nth-child(6),
#modalCobro #tablaCobrosPoliza td:nth-child(6),
#modalCobro #tablaCobrosPoliza th:nth-child(7),
#modalCobro #tablaCobrosPoliza td:nth-child(7),
#modalCobro #tablaCobrosPoliza th:nth-child(9),
#modalCobro #tablaCobrosPoliza td:nth-child(9),
#modalCobro #tablaCobrosPoliza th:nth-child(10),
#modalCobro #tablaCobrosPoliza td:nth-child(10),
#modalCobro #tablaCobrosPoliza th:nth-child(11),
#modalCobro #tablaCobrosPoliza td:nth-child(11) {
  white-space: nowrap !important;
}

#modalFactura #facturaListPane .data-table th:nth-child(1),
#modalFactura #facturaListPane .data-table td:nth-child(1),
#modalFactura #facturaListPane .data-table th:nth-child(2),
#modalFactura #facturaListPane .data-table td:nth-child(2),
#modalFactura #facturaListPane .data-table th:nth-child(3),
#modalFactura #facturaListPane .data-table td:nth-child(3),
#modalFactura #facturaListPane .data-table th:nth-child(6),
#modalFactura #facturaListPane .data-table td:nth-child(6),
#modalFactura #facturaListPane .data-table th:nth-child(7),
#modalFactura #facturaListPane .data-table td:nth-child(7),
#modalFactura #facturaListPane .data-table th:nth-child(8),
#modalFactura #facturaListPane .data-table td:nth-child(8),
#modalFactura #facturaListPane .data-table th:nth-child(9),
#modalFactura #facturaListPane .data-table td:nth-child(9),
#modalFactura #facturaListPane .data-table th:nth-child(10),
#modalFactura #facturaListPane .data-table td:nth-child(10),
#modalFactura #facturaListPane .data-table th:nth-child(11),
#modalFactura #facturaListPane .data-table td:nth-child(11),
#modalFactura #facturaListPane .data-table th:nth-child(12),
#modalFactura #facturaListPane .data-table td:nth-child(12),
#modalFactura #facturaListPane .data-table th:nth-child(13),
#modalFactura #facturaListPane .data-table td:nth-child(13),
#modalFactura #facturaListPane .data-table th:nth-child(14),
#modalFactura #facturaListPane .data-table td:nth-child(14) {
  white-space: nowrap !important;
}

/* =========================================================
   Listados de acuerdos y creditos en polizas
   Mostrar contenido completo sin truncado
   ========================================================= */

#modalAcuerdo #acuerdoListPane .tabla-wrapper,
#modalCredito .tabla-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#modalAcuerdo #acuerdoListPane .data-table,
#modalCredito #tbodyCreditosPoliza {
  width: 100%;
}

#modalAcuerdo #acuerdoListPane .data-table {
  table-layout: auto !important;
}

#modalCredito table.data-table {
  table-layout: auto !important;
}

#modalAcuerdo #acuerdoListPane .data-table th,
#modalAcuerdo #acuerdoListPane .data-table td,
#modalCredito table.data-table th,
#modalCredito table.data-table td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
  line-height: 1.35;
  text-align: left;
}

#modalAcuerdo #acuerdoListPane .data-table thead th,
#modalCredito table.data-table thead th {
  font-size: 13px;
}

#modalAcuerdo #acuerdoListPane .data-table tbody td,
#modalCredito table.data-table tbody td {
  font-size: 13px;
}

#modalAcuerdo #acuerdoListPane .data-table th:last-child,
#modalAcuerdo #acuerdoListPane .data-table td:last-child,
#modalCredito #tbodyCreditosPoliza td:last-child,
#modalCredito table.data-table thead th:last-child {
  white-space: nowrap !important;
  text-align: center;
  width: 1%;
}

#modalAcuerdo #acuerdoListPane .data-table th:nth-child(1),
#modalAcuerdo #acuerdoListPane .data-table td:nth-child(1),
#modalAcuerdo #acuerdoListPane .data-table th:nth-child(2),
#modalAcuerdo #acuerdoListPane .data-table td:nth-child(2),
#modalAcuerdo #acuerdoListPane .data-table th:nth-child(4),
#modalAcuerdo #acuerdoListPane .data-table td:nth-child(4),
#modalAcuerdo #acuerdoListPane .data-table th:nth-child(5),
#modalAcuerdo #acuerdoListPane .data-table td:nth-child(5),
#modalAcuerdo #acuerdoListPane .data-table th:nth-child(6),
#modalAcuerdo #acuerdoListPane .data-table td:nth-child(6),
#modalAcuerdo #acuerdoListPane .data-table th:nth-child(7),
#modalAcuerdo #acuerdoListPane .data-table td:nth-child(7),
#modalAcuerdo #acuerdoListPane .data-table th:nth-child(8),
#modalAcuerdo #acuerdoListPane .data-table td:nth-child(8) {
  white-space: nowrap !important;
}

#modalCredito #tbodyCreditosPoliza td:nth-child(1),
#modalCredito #tbodyCreditosPoliza td:nth-child(2),
#modalCredito #tbodyCreditosPoliza td:nth-child(3),
#modalCredito #tbodyCreditosPoliza td:nth-child(4),
#modalCredito #tbodyCreditosPoliza td:nth-child(6),
#modalCredito #tbodyCreditosPoliza td:nth-child(8),
#modalCredito #tbodyCreditosPoliza td:nth-child(9),
#modalCredito #tbodyCreditosPoliza td:nth-child(10),
#modalCredito #tbodyCreditosPoliza td:nth-child(11),
#modalCredito table.data-table thead th:nth-child(1),
#modalCredito table.data-table thead th:nth-child(2),
#modalCredito table.data-table thead th:nth-child(3),
#modalCredito table.data-table thead th:nth-child(4),
#modalCredito table.data-table thead th:nth-child(6),
#modalCredito table.data-table thead th:nth-child(8),
#modalCredito table.data-table thead th:nth-child(9),
#modalCredito table.data-table thead th:nth-child(10),
#modalCredito table.data-table thead th:nth-child(11) {
  white-space: nowrap !important;
}

/* Igualar ancho del modal de creditos al de cobros */
#modalCredito .modal-contenido {
  width: 98vw !important;
  max-width: 1900px !important;
}

/* =========================================================
   Ficha Tecnica Cobertura Financiera
   ========================================================= */

.cfk-balance-trigger {
  display: inline-block;
  color: inherit;
  text-align: left;
  white-space: nowrap;
}

.cfk-balance-trigger > strong {
  color: inherit;
}

.cfk-balance-trigger .floating-action-button {
  margin-top: 0;
}

.modal-cobertura-financiera {
  width: min(1280px, 96vw);
  max-width: 1280px;
  min-height: 680px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 36px 40px 30px;
}

.modal-cobertura-financiera .close-modal {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: 700;
  color: #5d6978;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.modal-cobertura-financiera .close-modal:hover {
  background: #e74c3c;
  color: #fff;
  transform: scale(1.02);
}

.modal-cobertura-financiera .close-modal:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.25);
  outline-offset: 2px;
}

.cfk-resumen-poliza {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.cfk-resumen-item,
.cfk-metrica {
  border: 1px solid #e3eaf4;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  padding: 16px 18px;
}

.cfk-resumen-item strong,
.cfk-metrica strong {
  display: block;
  color: #1f2f46;
  font-size: 1.15rem;
  line-height: 1.35;
}

.cfk-resumen-label,
.cfk-metrica-label,
.cfk-kicker {
  display: block;
  color: #68809c;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cfk-card {
  border: 1px solid #dde7f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  padding: 24px 26px;
}

.cfk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.cfk-card-header h4 {
  margin: 0;
  color: #23405f;
  font-size: 1.45rem;
  line-height: 1.3;
}

.cfk-card-header > div:first-child {
  flex: 1;
  text-align: center;
}

.cfk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1px solid #d9e4f2;
  background: #f5f8fc;
  color: #51637a;
  white-space: nowrap;
}

.cfk-badge-success {
  background: #eaf8ef;
  border-color: #bde4c9;
  color: #1f7a3e;
}

.cfk-badge-warning {
  background: #fff5e8;
  border-color: #f4d2a5;
  color: #b96a14;
}

.cfk-badge-danger {
  background: #fff0f0;
  border-color: #efb0b0;
  color: #bf2f2f;
}

.cfk-metricas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.cfk-loading {
  border: 1px dashed #c8d5e6;
  border-radius: 12px;
  background: #f8fbff;
  padding: 18px;
  color: #60758f;
  text-align: center;
  font-weight: 600;
}

.cfk-loading-error {
  color: #b33a3a;
  border-color: #e9b7b7;
  background: #fff6f6;
}

.cfk-inline-panel {
  margin-top: 14px;
  border: 1px solid #dde7f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  padding: 16px 18px;
}

.cfk-inline-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cfk-inline-panel-title {
  color: #23405f;
  font-size: 1rem;
  font-weight: 800;
}

.cfk-inline-slot .contenedor-maestro-kre {
  margin-top: 6px;
}

#contextoPolizaBienes #previewPolizaContainer {
  width: 95%;
  margin: 0 auto;
}

#contextoPolizaBienes #previewPolizaContainer .preview-poliza,
#contextoPolizaBienes #previewPolizaContainer .cfk-inline-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#contextoPolizaBienes #previewPolizaContainer .cfk-inline-panel {
  margin-left: 0;
  margin-right: 0;
}

.cfk-inline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.cfk-inline-meta-group {
  min-width: 120px;
}

.cfk-inline-meta-label {
  display: block;
  margin-bottom: 2px;
  color: #68809c;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cfk-inline-meta-group strong {
  color: #1f2f46;
  font-size: 1.05rem;
}

.kre-label-poliza {
  margin-bottom: 14px;
  color: #31465f;
  font-size: 1.1rem;
  text-align: center;
}

.contenedor-maestro-kre {
  display: flex;
  gap: 0;
  width: 100%;
  border: 1.5px solid #1d3553;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff9c8 0%, rgba(251, 192, 45, 0.18) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

.columna-bloque-kre {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bloque-kre {
  width: 100%;
  height: 34px;
  position: relative;
  display: flex;
  border-right: 1.5px solid #1d3553;
  box-sizing: border-box;
}

.columna-bloque-kre:last-child .bloque-kre {
  border-right: none;
}

.etiqueta-bloque-kre {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 12px;
  line-height: 34px;
  color: #16304a;
  font-weight: 700;
  z-index: 2;
}

.meta-monto-kre {
  font-size: 13px;
  color: #18324d;
  margin-top: 8px;
  font-weight: 700;
}

.relleno-barra-kre {
  height: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  transition: width 0.35s ease;
}

.msj-auditoria-kre {
  font-size: 15px;
  margin-top: 18px;
  line-height: 1.6;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid;
  text-align: center;
}

.msj-auditoria-kre-neutral {
  border-color: #d6e0ec !important;
  background: #f8fbff !important;
  color: #5f7087;
}

.modal-cobertura-financiera .botones-modal.btns-derecha {
  justify-content: flex-end;
}

.modal-cobertura-financiera #btnCerrarCoberturaFinanciera {
  min-width: 220px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}

@media (max-width: 960px) {
  .cfk-resumen-poliza,
  .cfk-metricas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfk-card-header {
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .modal-cobertura-financiera {
    width: 96vw;
    min-height: auto;
    padding: 24px 16px 20px;
  }

  .cfk-card-header {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .cfk-resumen-poliza,
  .cfk-metricas {
    grid-template-columns: 1fr;
  }

  .cfk-card-header > div:first-child {
    text-align: left;
  }

  .cfk-badge {
    align-self: flex-start;
  }

  .meta-monto-kre {
    font-size: 11px;
  }

  .etiqueta-bloque-kre {
    font-size: 10px;
  }
}

/* --- Reporteria: scrollbar horizontal superior (sin cambiar tema) --- */
.kre-report-scrollbar-top {
  width: 100%;
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border-color);
  border-bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.kre-report-scrollbar-top-inner {
  height: 1px;
}

.kre-report-scrollbar-top + .kre-report-table-shell {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --- Reporteria: scroll horizontal normal (sin columnas congeladas) ---
   Moneda y Renglón se desplazan como cualquier otra columna en todos los
   formatos (detallado, simple, comparativo). El pin VERTICAL del encabezado
   (.kre-report-table thead / .kre-report-table-guide thead + applyReportHeaderSticky)
   y del footer se mantienen aparte; aquí no se congela ninguna columna en el eje
   horizontal. */

/* =========================================================
   RESPONSIVE BASE APP-WIDE
   Ajustes compartidos para escritorio pequeño, tablet y móvil
   ========================================================= */
@media (max-width: 1200px) {
  body {
    padding: 20px 16px;
  }

  h1 {
    font-size: 24px;
    margin-bottom: 22px;
  }

  .barra-superior,
  .pie-listado,
  table {
    width: 100%;
  }

  #busqueda,
  .barra-derecha select,
  #filtroDepartamento {
    min-width: 0;
  }

  .modal-contenido,
  .modal-contenidoCliente,
  .modal-contenido-exclusion,
  .modal-contenido-compartir,
  .modal-estado-cuenta {
    width: min(96vw, 1200px) !important;
    max-width: min(96vw, 1200px) !important;
  }

  .form-grid.tres-columnas,
  .tres-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid.cuatro-columnas,
  .cuatro-columnas,
  .form-grid.cinco-columnas,
  .cinco-columnas,
  .form-grid.seis-columnas,
  .seis-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body {
    padding: 16px 12px;
  }

  h1,
  #titulo-principal,
  .smv-title,
  .rnc-h1-title,
  .renov-title {
    text-align: left;
    justify-content: flex-start;
    font-size: 22px;
    line-height: 1.2;
    gap: 10px;
  }

  .barra-superior,
  .barra-izquierda,
  .barra-derecha,
  .pie-listado,
  .smv-controls-bar,
  .smv-controls-left,
  .smv-controls-right,
  .smv-form-row,
  .renov-controls-bar,
  .renov-bulk-bar,
  .kre-report-toolbar,
  .kre-report-toolbar-filters,
  .kre-report-toolbar-search-group,
  .kre-report-toolbar-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  #btnAgregar,
  #btnBuscarCliente,
  #btnAgregarRiesgo,
  #busqueda,
  .barra-derecha select,
  #filtroDepartamento,
  .smv-toolbar-input,
  .rec-toolbar-input,
  .multiriesgo-select,
  .smv-add-btn {
    width: 100%;
    min-width: 0;
  }

  .table-responsive,
  .tabla-wrapper,
  .table-wrapper,
  .smv-table-wrapper,
  .rnc-notes-table-wrapper,
  .rnc-case-context-table-wrapper,
  .rnc-policy-context-table-wrapper,
  .renov-card .table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    width: 100%;
  }

  th,
  td {
    padding: 10px 8px;
    font-size: 13px;
    max-width: none;
  }

  .modal-contenido,
  .modal-contenidoCliente,
  .modal-contenido-exclusion,
  .modal-contenido-compartir,
  .modal-estado-cuenta,
  .modal-cobertura-financiera,
  #modalSolicitud .modal-contenidoCliente,
  #modalFactura .modal-contenido,
  #modalCobro .modal-contenido,
  #modalAcuerdo .modal-contenido,
  #modalCredito .modal-contenido {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh;
    padding: 18px 14px;
  }

  .botones-modal {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .botones-modal button {
    width: 100%;
  }

  .tabs,
  .rnc-nav-tabs,
  .nav-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tab-btn,
  .rnc-nav-link,
  .nav-link {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    text-align: center;
  }

  .form-grid,
  .dos-columnas,
  .tres-columnas,
  .cuatro-columnas,
  .cinco-columnas,
  .seis-columnas,
  #formRestricciones .form-grid,
  .form-factura .fact-row.cols-2,
  .form-factura .fact-row.cols-4,
  .form-factura .fact-row.cols-5,
  .form-factura .fact-row.cols-6 {
    grid-template-columns: 1fr !important;
  }

  .rnc-container,
  #main-content.smv-container,
  .renov-card {
    padding: 18px 14px;
  }

  .preview-poliza,
  .preview-poliza thead,
  .preview-poliza tbody,
  .preview-poliza tr,
  .preview-poliza th,
  .preview-poliza td {
    display: block;
    width: 100%;
  }

  .preview-poliza thead {
    display: none;
  }

  .preview-poliza tr {
    background: #fff;
    border: 1px solid #dfe7f3;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .preview-poliza td {
    text-align: left;
    white-space: normal;
    overflow: visible !important;
    text-overflow: clip;
    max-width: none;
    border-bottom: 1px solid #eef2f7;
  }

  .preview-poliza td:last-child {
    border-bottom: none;
  }

  .factura-policy-preview,
  .cfk-inline-panel {
    padding: 10px;
    overflow: visible;
  }

  .preview-poliza .col-division .dc-grid {
    grid-template-columns: 1fr !important;
  }

  .preview-poliza .action-trigger .floating-action-button,
  #tablaPolizas .action-trigger .floating-action-button,
  #tablaClientes .action-trigger .floating-action-button {
    max-width: calc(100vw - 48px);
    white-space: normal;
  }

  .pie-listado .paginacion {
    text-align: left;
  }
}

@media (max-width: 480px) {
  body {
    padding: 12px 10px;
  }

  h1,
  #titulo-principal,
  .smv-title,
  .rnc-h1-title,
  .renov-title {
    font-size: 20px;
  }

  .tab-btn,
  .rnc-nav-link,
  .nav-link {
    flex-basis: 100%;
  }

  .modal-contenido,
  .modal-contenidoCliente,
  .modal-contenido-exclusion,
  .modal-contenido-compartir,
  .modal-estado-cuenta,
  .modal-cobertura-financiera {
    padding: 16px 12px;
    border-radius: 10px;
  }

  th,
  td {
    font-size: 12px;
    padding: 8px 6px;
  }
}

/* =========================================================
   REPORTERÍA — Sticky thead segunda fila (guide tables con doble encabezado)
   ========================================================= */
.kre-report-table-guide thead tr:nth-child(1) th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--primary-color);
}

.kre-report-table-guide thead tr:nth-child(2) th {
  position: sticky;
  top: var(--kre-head-row1-h, 30px);
  z-index: 3;
  background: var(--primary-color);
}

/* Sticky tfoot para todas las tablas de reportería: se fija el <tfoot> como
   bloque (un único contenedor de scroll en .kre-report-table-shell). Así los
   totales por moneda quedan apilados y visibles, sin solaparse. */
.kre-report-table tfoot {
  position: sticky;
  bottom: 0;
  z-index: 8;
}

/* Refuerzo por-celda: cada celda del footer también es sticky; el offset 'bottom'
   por fila lo fija el JS (refreshStickyHeader) para apilar totales multi-moneda. */
.kre-report-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 8;
}

/* =========================================================
   BADGE ESTADO RECLAMO
   ========================================================= */
.kre-badge-reclamo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

.badge-reclamo-verde {
  background-color: #27ae60;
}

.badge-reclamo-naranja {
  background-color: #e67e22;
}

.badge-reclamo-rojo {
  background-color: #e74c3c;
}

#modal .modal-contenido.modal-ramo {
  width: min(96vw, 980px);
  max-width: 980px;
  padding: 24px 28px;
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  box-sizing: border-box;
}

#modal .modal-ramo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

#modal .modal-ramo-header h2 {
  margin: 0;
  padding-right: 40px;
}

#modal .modal-ramo-header .close-modal {
  position: static;
  flex: 0 0 auto;
}

#formRamo {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#formRamo .ramo-row {
  display: grid;
  gap: 16px;
  align-items: end;
}

#formRamo .ramo-row-3,
#formRamo .grupo-porcentajes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#formRamo .ramo-row-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#formRamo .grupo-comisiones-avanzadas {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#formRamo .campo-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#formRamo .campo-form input,
#formRamo .campo-form select {
  width: 100%;
  margin: 0;
}

#formRamo .campo-form label {
  margin: 0 0 6px;
  font-size: 13px;
}

#formRamo .form-checkbox-group,
#formRamo #grupoEstado,
#formRamo .botones-modal {
  width: 100%;
  box-sizing: border-box;
}

#formRamo .botones-modal {
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-top: 8px;
}

#formRamo .botones-modal button {
  width: auto;
  min-width: 160px;
}

#formRamo .campo-form-orden {
  min-width: 0;
}

#formRamo .form-checkbox-group {
  margin: 0;
}

@media (max-width: 1100px) {
  #formRamo .ramo-row-4,
  #formRamo .grupo-porcentajes,
  #formRamo .grupo-comisiones-avanzadas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #modal .modal-contenido.modal-ramo {
    width: 96vw;
    padding: 20px 18px;
  }

  #formRamo {
    gap: 14px;
  }

  #formRamo .ramo-row,
  #formRamo .ramo-row-4,
  #formRamo .grupo-porcentajes,
  #formRamo .grupo-comisiones-avanzadas {
    grid-template-columns: 1fr;
  }

  #formRamo .botones-modal {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* =====================================================================
   SPINNER DE CARGA — Reportería
   ===================================================================== */

.kre-report-spinner {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: inherit;
  animation: kre-spinner-fadein 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.kre-report-spinner.oculto {
  display: none;
}

@keyframes kre-spinner-fadein {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Doble anillo orbitante */
.kre-spinner-orbit {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.kre-spinner-orbit::before,
.kre-spinner-orbit::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.kre-spinner-orbit::before {
  inset: 0;
  border: 5px solid #e8f3fc;
  border-top-color: var(--primary-color, #3498db);
  border-right-color: #5dade2;
  animation: kre-spin-cw 0.85s linear infinite;
}

.kre-spinner-orbit::after {
  inset: 12px;
  border: 3px solid #f0f7ff;
  border-bottom-color: #aed6f1;
  border-left-color: #85c1e9;
  animation: kre-spin-ccw 1.3s linear infinite;
}

.kre-spinner-orbit-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kre-spinner-icon {
  font-size: 1.55rem;
  color: var(--primary-color, #3498db);
  animation: kre-icon-pulse 2.4s ease-in-out infinite;
}

@keyframes kre-spin-cw  { to { transform: rotate(360deg);  } }
@keyframes kre-spin-ccw { to { transform: rotate(-360deg); } }

@keyframes kre-icon-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.75; }
  50%       { transform: scale(1.12); opacity: 1;    }
}

/* Etiqueta de texto */
.kre-spinner-label {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.kre-spinner-text {
  font-size: 0.93rem;
  font-weight: 600;
  color: #4a6380;
  letter-spacing: 0.04em;
}

.kre-spinner-dots {
  display: inline-flex;
  gap: 1px;
  align-items: baseline;
}

.kre-spinner-dots span {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color, #3498db);
  display: inline-block;
  animation: kre-dot-bounce 1.5s ease-in-out infinite;
}

.kre-spinner-dots span:nth-child(1) { animation-delay: 0s;    }
.kre-spinner-dots span:nth-child(2) { animation-delay: 0.18s; }
.kre-spinner-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes kre-dot-bounce {
  0%, 70%, 100% { transform: translateY(0);   opacity: 0.35; }
  35%            { transform: translateY(-7px); opacity: 1;    }
}


/* =========================================================
   Paginacion de reportes
   ========================================================= */
.pagination-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #f5f8fc;
  border: 1px solid #dde6f0;
  border-radius: 6px;
  margin: 8px 0;
  font-size: 0.875rem;
  color: #444;
}

.pagination-info {
  color: #4a6080;
  font-size: 0.875rem;
  white-space: nowrap;
}

#reportPageSizeSelect {
  padding: 4px 8px;
  border: 1px solid #c8d8ea;
  border-radius: 4px;
  font-size: 0.85rem;
  background: #fff;
  color: #333;
  cursor: pointer;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.page-btn {
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #c8d8ea;
  border-radius: 4px;
  background: #fff;
  color: #2563eb;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.page-btn:hover:not(:disabled) {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.page-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* =========================================================
   Aviso graficas paginadas
   ========================================================= */
.kre-chart-paginated-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #7c5800;
}
.kre-chart-paginated-notice i {
  color: #faad14;
  flex-shrink: 0;
}
.kre-chart-paginated-notice strong {
  color: #5c4000;
}

/* ===== Clientes: mostrar completa la informacion en tablas internas del modal ===== */
#modalCliente .modal-contenidoCliente .tabla-canales,
#modalCliente .modal-contenidoCliente .tabla-direcciones,
#modalCliente .modal-contenidoCliente .tabla-contactos,
#modalCliente .modal-contenidoCliente .tabla-empleadores {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
}

#modalCliente .modal-contenidoCliente .tabla-canales th,
#modalCliente .modal-contenidoCliente .tabla-canales td,
#modalCliente .modal-contenidoCliente .tabla-direcciones th,
#modalCliente .modal-contenidoCliente .tabla-direcciones td,
#modalCliente .modal-contenidoCliente .tabla-contactos th,
#modalCliente .modal-contenidoCliente .tabla-contactos td,
#modalCliente .modal-contenidoCliente .tabla-empleadores th,
#modalCliente .modal-contenidoCliente .tabla-empleadores td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
  line-height: 1.35;
}

#modalCliente .modal-contenidoCliente .tabla-canales th,
#modalCliente .modal-contenidoCliente .tabla-direcciones th,
#modalCliente .modal-contenidoCliente .tabla-contactos th,
#modalCliente .modal-contenidoCliente .tabla-empleadores th {
  white-space: normal !important;
  word-break: normal;
}

#modalCliente .modal-contenidoCliente .tabla-canales th:last-child,
#modalCliente .modal-contenidoCliente .tabla-canales td:last-child,
#modalCliente .modal-contenidoCliente .tabla-direcciones th:last-child,
#modalCliente .modal-contenidoCliente .tabla-direcciones td:last-child,
#modalCliente .modal-contenidoCliente .tabla-contactos th:last-child,
#modalCliente .modal-contenidoCliente .tabla-contactos td:last-child,
#modalCliente .modal-contenidoCliente .tabla-empleadores th:last-child,
#modalCliente .modal-contenidoCliente .tabla-empleadores td:last-child {
  width: 1%;
  white-space: nowrap !important;
  text-align: center;
}

#modalCliente .modal-contenidoCliente .tabla-canales td:last-child button,
#modalCliente .modal-contenidoCliente .tabla-direcciones td:last-child button,
#modalCliente .modal-contenidoCliente .tabla-contactos td:last-child button,
#modalCliente .modal-contenidoCliente .tabla-empleadores td:last-child button {
  margin: 2px;
}

/* ===== Personas: modal estable al cambiar entre pestanas ===== */
#modalPersona .modal-contenidoCliente {
  position: relative;
  width: min(92vw, 1180px);
  height: min(88vh, 780px);
  max-width: 1180px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#modalPersona .close-modal {
  top: 18px;
  right: 18px;
  z-index: 20;
}

#modalPersona #formPersona {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#modalPersona .tabs {
  flex: 0 0 auto;
}

#modalPersona .tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
}

#modalPersona #tab-general.tab-content:not(.oculto) {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  padding-right: 0;
}

#modalPersona #tab-general .fieldset-general {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  padding: 24px 24px 30px;
}

#modalPersona #tab-general .form-grid {
  align-items: end;
  column-gap: 18px;
  row-gap: 22px;
}

#modalPersona #tab-general .form-grid + .form-grid {
  margin-top: 20px;
}

#modalPersona .tab-content.oculto {
  display: none !important;
}

#modalPersona .botones-modal {
  flex: 0 0 auto;
  margin-top: 14px;
}

/* Modal de informacion de aseguradora: tamano estable entre pestanas */
#modalInfoAseguradora .modal-contenidoCliente {
  width: min(86vw, 1180px) !important;
  height: min(82vh, 720px);
  max-width: 1180px !important;
  max-height: 82vh;
  min-width: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#modalInfoAseguradora #tituloInfoAseguradora {
  flex: 0 0 auto;
  padding-right: 42px;
}

#modalInfoAseguradora #btnCerrarInfoAsegX {
  top: 16px;
  right: 18px;
  z-index: 20;
  color: #2f3b4a;
  opacity: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

#modalInfoAseguradora #btnCerrarInfoAsegX:hover {
  background: #e53935;
  color: #fff;
}

#modalInfoAseguradora .tabs {
  flex: 0 0 auto;
}

#modalInfoAseguradora .tab-content-info {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

#modalInfoAseguradora .tab-content-info .tabla-wrapper {
  max-height: none !important;
  overflow-y: visible !important;
}

#modalInfoAseguradora #tbodyInfoAseguradora th,
#modalInfoAseguradora #tbodyInfoAseguradora td {
  text-align: left !important;
}

#modalInfoAseguradora #tbodyInfoAseguradora th {
  padding-left: 14px !important;
}

#modalInfoAseguradora .botones-modal {
  flex: 0 0 auto;
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px solid #edf1f7;
}

@media (max-width: 820px) {
  #modalInfoAseguradora .modal-contenidoCliente {
    width: 94vw !important;
    height: 86vh;
    min-width: 0;
  }
}

/* Liquidacion de Comisiones Aseguradoras */
body.liq-body {
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

body.liq-body #main-content {
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

.liq-page {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.liq-header {
  padding: 18px 2px 4px;
  border-bottom: 1px solid #dbe5f1;
}

.liq-title {
  margin: 0;
  color: #17324d;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.55rem;
}

.liq-title i,
.liq-counter i {
  color: #256ee8;
}

.liq-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #dbe5f1;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.liq-tab-btn {
  border: 1px solid transparent;
  background: transparent;
  color: #4a5a6a;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.liq-tab-btn:hover:not(:disabled),
.liq-tab-btn.active {
  color: #0f6df2;
  background: #eef6ff;
  border-color: #bfdbfe;
}

.liq-tab-btn:disabled {
  color: #9aa5b1;
  cursor: not-allowed;
}

.liq-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}

.liq-toolbar-primary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.liq-counter {
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
}

.liq-toolbar-actions,
.liq-context-actions,
.liq-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.liq-tab-panel {
  display: none;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.liq-tab-panel.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.liq-workspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  height: auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transition: grid-template-columns 0.25s ease;
}

#tabLista .liq-workspace.filters-collapsed,
#liqHistorialWorkspace.filters-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

.liq-filter-host {
  min-width: 0;
  overflow: hidden;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.liq-filter-host .filter-sidebar {
  width: 340px;
  height: 100%;
  max-height: calc(100vh - 245px);
  margin-left: 0;
  opacity: 1;
  transform: translateX(0);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.25s ease,
              transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.liq-history-filter-panel {
  width: 340px !important;
  height: 100%;
  max-height: calc(100vh - 245px);
  margin-left: 0 !important;
  opacity: 1 !important;
  transform: translateX(0);
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.25s ease,
              transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.liq-filter-date-row {
  display: flex;
  gap: 6px;
}

.liq-filter-date-row .form-control {
  min-width: 0;
}

.liq-filter-host .kre-filter-actions,
.liq-history-filter-panel .kre-filter-actions {
  align-items: stretch;
  gap: 6px;
}

.liq-filter-host .btn-process,
.liq-filter-host .btn-clear-filters,
.liq-filter-host .liq-filter-toggle-btn,
.liq-history-filter-panel .btn-process,
.liq-history-filter-panel .btn-clear-filters,
.liq-history-filter-panel .liq-filter-toggle-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.liq-filter-toggle-btn {
  background-color: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.liq-filter-toggle-btn:hover {
  background-color: #1d4ed8;
}

#tabLista .liq-workspace.filters-collapsed .liq-filter-host,
#liqHistorialWorkspace.filters-collapsed .liq-history-filter-panel {
  opacity: 0 !important;
  transform: translateX(-28px);
  pointer-events: none;
}

#tabLista .liq-workspace.filters-collapsed .liq-filter-host .filter-sidebar,
#liqHistorialWorkspace.filters-collapsed .liq-history-filter-panel {
  width: 0 !important;
  min-width: 0;
  margin-left: -340px !important;
  border-width: 0 !important;
}

.liq-results-card,
.liq-flow-card,
.liq-asentamiento-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  min-width: 0;
}

.liq-results-card,
.liq-flow-card {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.liq-results-card.full {
  height: auto;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.liq-section-heading,
.liq-context-header {
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.liq-section-heading h2,
.liq-context-header h2 {
  margin: 0;
  color: #17324d;
  font-size: 1.05rem;
}

.liq-section-heading p,
.liq-context-header p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 0.88rem;
}

.liq-context-header {
  background: #eef6ff;
  border-left: 5px solid #256ee8;
  border-radius: 12px 12px 0 0;
}

.liq-context-header.danger {
  background: #fff7f7;
  border-left-color: #dc2626;
}

.liq-context-header.danger h2 {
  color: #b91c1c;
}

.liq-table-wrap {
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0;
  position: relative;
  overscroll-behavior: contain;
}

.liq-table-wrap.detail {
  max-height: none;
  overflow-x: auto;
}

.liq-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  table-layout: fixed;
  position: relative;
  overflow: visible !important;
}

.liq-table.compact {
  min-width: 0;
  table-layout: fixed;
}

#tblDetalleLiquidacion {
  width: max-content;
  min-width: 2920px;
  table-layout: fixed;
}

#tblDetalleLiquidacion th,
#tblDetalleLiquidacion td {
  min-width: 0;
}

#tblDetalleLiquidacion th:nth-child(1) { width: 150px; }
#tblDetalleLiquidacion th:nth-child(2) { width: 125px; }
#tblDetalleLiquidacion th:nth-child(3) { width: 180px; }
#tblDetalleLiquidacion th:nth-child(4) { width: 125px; }
#tblDetalleLiquidacion th:nth-child(5) { width: 125px; }
#tblDetalleLiquidacion th:nth-child(6) { width: 115px; }
#tblDetalleLiquidacion th:nth-child(7),
#tblDetalleLiquidacion th:nth-child(8) { width: 92px; }
#tblDetalleLiquidacion th:nth-child(9),
#tblDetalleLiquidacion th:nth-child(10),
#tblDetalleLiquidacion th:nth-child(12),
#tblDetalleLiquidacion th:nth-child(14),
#tblDetalleLiquidacion th:nth-child(15),
#tblDetalleLiquidacion th:nth-child(21),
#tblDetalleLiquidacion th:nth-child(22),
#tblDetalleLiquidacion th:nth-child(26),
#tblDetalleLiquidacion th:nth-child(27),
#tblDetalleLiquidacion th:nth-child(28) { width: 105px; }
#tblDetalleLiquidacion th:nth-child(11),
#tblDetalleLiquidacion th:nth-child(23),
#tblDetalleLiquidacion th:nth-child(24),
#tblDetalleLiquidacion th:nth-child(25) { width: 74px; }
#tblDetalleLiquidacion th:nth-child(13) { width: 48px; }
#tblDetalleLiquidacion th:nth-child(16),
#tblDetalleLiquidacion th:nth-child(17),
#tblDetalleLiquidacion th:nth-child(18) { width: 135px; }
#tblDetalleLiquidacion th:nth-child(19) { width: 62px; }
#tblDetalleLiquidacion th:nth-child(20) { width: 115px; }

#tblDetalleLiquidacion .liq-action-cell .action-trigger {
  display: inline-block;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
}

#tblDetalleLiquidacion .liq-action-cell .liq-trigger-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liq-table thead,
.liq-table thead tr {
  position: static !important;
}

.liq-table th {
  position: sticky !important;
  top: 0;
  z-index: 80;
  background: #347df5 !important;
  color: #fff !important;
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  vertical-align: middle;
  background-clip: padding-box;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.08);
}

.liq-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #e8edf5;
  color: #17324d;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liq-table.compact td,
.liq-table.compact th {
  padding: 7px 8px;
}

.liq-table tbody tr:nth-child(even) {
  background: #f8fbff;
}

.liq-clickable-row,
.liq-icon-btn {
  cursor: pointer;
}

.liq-history-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.liq-clickable-row:hover,
.liq-table tbody tr.selected {
  background: #ecfdf5 !important;
}

.liq-empty {
  text-align: center !important;
  color: #64748b !important;
  padding: 28px !important;
  white-space: normal !important;
  width: 100%;
}

.liq-empty.error,
.liq-danger-text {
  color: #dc2626 !important;
  font-weight: 700;
}

.liq-blue-text {
  color: #0f6df2 !important;
  font-weight: 700;
}

.liq-icon-btn {
  border: none;
  background: #e8f1ff;
  color: #0f6df2;
  width: 34px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.18s ease, background 0.18s ease;
}

.liq-icon-btn:hover {
  transform: translateY(-1px);
  background: #dbeafe;
}

.liq-icon-btn.danger {
  color: #dc2626;
}

.liq-icon-btn.danger:hover {
  background: #fee2e2;
}

.liq-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: #fff;
  background: #0f6df2;
}

.liq-btn.secondary {
  color: #17324d;
  background: #e8edf5;
}

.liq-btn.success {
  background: #10b981;
}

.liq-btn.excel {
  background: #217346;
}

.liq-btn.print {
  background: #d32f2f;
}

.liq-btn.danger {
  background: #dc2626;
}

.liq-btn:disabled {
  background: #dbe3ec;
  color: #94a3b8;
  cursor: not-allowed;
}

.liq-kpis {
  display: grid;
  grid-template-columns: repeat(8, minmax(120px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.liq-kpi {
  border: 1px solid #dbe5f1;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  min-width: 0;
}

.liq-kpi span {
  display: block;
  color: #64748b;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  margin-bottom: 5px;
}

.liq-kpi strong {
  color: #17324d;
  font-size: 1rem;
}

.liq-kpi.blue {
  border-color: #93c5fd;
  background: #eff6ff;
}

.liq-kpi.green {
  border-color: #86efac;
  background: #f0fdf4;
}

.liq-kpi.red {
  border-color: #fecaca;
  background: #fff7f7;
}

.liq-kpi.blue strong {
  color: #0f6df2;
}

.liq-kpi.green strong {
  color: #16a34a;
}

.liq-kpi.red strong {
  color: #dc2626;
}

.liq-money-input,
.liq-form-grid input,
.liq-form-grid select,
.liq-form-grid textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #17324d;
}

.liq-money-input {
  text-align: right;
  padding: 6px 8px;
  font-weight: 700;
}

.liq-money-input:focus,
.liq-form-grid input:focus,
.liq-form-grid select:focus,
.liq-form-grid textarea:focus {
  outline: none;
  border-color: #347df5;
  box-shadow: 0 0 0 3px rgba(52, 125, 245, 0.14);
}

.liq-asentamiento-card {
  max-width: 980px;
  max-height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  margin: 0 auto;
  padding: 24px;
}

.liq-settlement-summary {
  background: #f8fafc;
  border-left: 5px solid #10b981;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 22px;
}

.liq-settlement-summary.danger {
  background: #fff7f7;
  border-left-color: #dc2626;
}

.liq-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 1.05rem;
  color: #17324d;
  margin-bottom: 8px;
}

.liq-summary-row.danger,
.liq-summary-row.danger strong {
  color: #dc2626;
}

.liq-summary-row.grand {
  border-top: 2px solid #dbe5f1;
  margin-top: 12px;
  padding-top: 12px;
  color: #16a34a;
  font-size: 1.2rem;
}

.liq-settlement-summary p {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
}

.liq-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.liq-form-grid label {
  font-weight: 700;
  color: #334155;
  font-size: 0.9rem;
}

.liq-form-grid input,
.liq-form-grid select,
.liq-form-grid textarea {
  display: block;
  margin-top: 7px;
  padding: 10px 12px;
  font: inherit;
}

.liq-form-full {
  grid-column: 1 / -1;
}

.liq-form-actions {
  justify-content: space-between;
  border-top: 1px solid #e2e8f0;
  margin-top: 22px;
  padding-top: 18px;
}

.liq-form-actions.center {
  justify-content: center;
}

.liq-anulacion-card {
  width: min(980px, 100%);
}

.liq-anulacion-card textarea[readonly] {
  background: #f8fafc;
  color: #64748b;
}

.liq-anulacion-confirm {
  margin-top: 24px;
  border-top: 1px solid #e2e8f0;
  padding-top: 18px;
  text-align: center;
}

.liq-anulacion-confirm h3 {
  margin: 0;
  color: #b91c1c;
  font-size: 1rem;
}

.liq-badge {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.75rem;
}

.liq-badge.ok {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.liq-badge.danger {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

#modalConfirmarLiquidacion {
  z-index: 1300;
}

#modalConfirmarLiquidacion .modal-contenido {
  max-width: 420px;
  padding: 24px 20px;
  text-align: center;
  margin: 0 auto;
  overflow-y: visible;
}

#modalConfirmarLiquidacion h3,
#modalConfirmarLiquidacion p {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
  color: #2d2d2d;
}

#modalConfirmarLiquidacion .botones-modal {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

#modalConfirmarLiquidacion .botones-modal button {
  width: auto;
  min-width: 110px;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
}

#modalConfirmarLiquidacion #btnCancelarConfirmarLiquidacion {
  background: #dc3545;
  color: #fff;
}

#modalConfirmarLiquidacion #btnAceptarConfirmarLiquidacion {
  background: #198754;
  color: #fff;
}

#modalConfirmarLiquidacion #btnCancelarConfirmarLiquidacion:hover {
  background: #b02a37;
}

#modalConfirmarLiquidacion #btnAceptarConfirmarLiquidacion:hover {
  background: #146c43;
}

.liq-print-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.liq-print-content {
  background: #fff;
  width: min(98vw, 1760px);
  height: 90vh;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.24);
}

.liq-print-header {
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.liq-print-header h2 {
  margin: 0;
  color: #17324d;
  font-size: 1.1rem;
}

.liq-print-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px;
  background: #fff;
  color: #111827;
}

.liq-receipt-header {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 2px solid #111827;
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.liq-receipt h2,
.liq-receipt h3 {
  margin: 0 0 8px;
}

.liq-receipt-grid {
  display: grid;
  grid-template-columns: max-content minmax(110px, 1fr) max-content minmax(180px, 1fr);
  gap: 6px 22px;
  font-size: 0.82rem;
}

.liq-receipt-company {
  text-align: right;
  color: #334155;
  font-size: 0.82rem;
  min-width: 260px;
}

.liq-receipt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(0.62rem, 0.62vw, 0.76rem);
}

.liq-receipt-table-section {
  margin-top: 14px;
}

.liq-receipt-table-section:first-of-type {
  margin-top: 0;
}

.liq-receipt-section-title {
  margin: 0 !important;
  padding: 7px 10px;
  border: 1px solid #64748b;
  border-bottom: 0;
  background: #17324d;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.liq-receipt-table-technical {
  font-size: clamp(0.68rem, 0.68vw, 0.8rem);
}

.liq-receipt-table th,
.liq-receipt-table td {
  border: 1px solid #64748b !important;
  padding: 5px 4px;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.2;
}

.liq-receipt-table th {
  background: #e7eef8 !important;
  color: #0f172a !important;
  text-align: center;
  font-weight: 800;
}

.liq-receipt-note {
  border: 1px solid #111827;
  background: #f8fafc;
  padding: 10px;
  margin-top: 14px;
}

.liq-receipt-totals {
  width: 390px;
  margin-left: auto;
  margin-top: 16px;
  border-collapse: collapse;
}

.liq-receipt-totals td {
  padding: 5px 8px;
}

.liq-receipt-totals td:last-child {
  text-align: right;
}

.liq-receipt-totals .grand {
  font-size: 1.05rem;
  font-weight: 800;
  border-top: 2px solid #111827;
}

.liq-receipt-signatures {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 60px;
}

.liq-receipt-signatures span {
  flex: 1;
  text-align: center;
  border-top: 1px solid #111827;
  padding-top: 6px;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .liq-workspace {
    grid-template-columns: 1fr;
  }

  .liq-filter-host .filter-sidebar {
    max-height: none;
  }

  .liq-kpis {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }
}

@media (max-width: 760px) {
  .liq-section-heading,
  .liq-context-header,
  .liq-toolbar,
  .liq-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .liq-kpis,
  .liq-form-grid {
    grid-template-columns: 1fr;
  }

  .liq-asentamiento-card {
    padding: 16px;
  }
}

@media print {
  body * {
    visibility: hidden;
  }

  #modalConstanciaLiquidacion,
  #modalConstanciaLiquidacion * {
    visibility: visible;
  }

  #modalConstanciaLiquidacion {
    position: absolute;
    inset: 0;
    padding: 0;
    background: #fff;
  }

  .liq-print-content {
    width: 100%;
    height: auto;
    box-shadow: none;
    border-radius: 0;
  }

  .liq-print-header {
    display: none;
  }

  .liq-print-area {
    padding: 0;
    overflow: visible;
  }

  @page {
    size: A3 landscape;
    margin: 7mm;
  }

  .liq-receipt {
    width: 100%;
  }

  .liq-receipt-table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 6.8pt;
  }

  .liq-receipt-table-technical {
    font-size: 7.6pt;
  }

  .liq-receipt-table th,
  .liq-receipt-table td {
    padding: 3px 2.5px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .liq-receipt-table thead {
    display: table-header-group;
  }

  .liq-receipt-table tr,
  .liq-receipt-section-title,
  .liq-receipt-note,
  .liq-receipt-totals,
  .liq-receipt-signatures {
    break-inside: avoid;
  }
}

/* =========================================================
   Vista independiente de Gestion de Facturas
   ========================================================= */
.facturas-body {
  min-height: 100vh;
  background: #f4f7fb;
  overflow: hidden;
}

.facturas-body #main-content {
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.facturas-page {
  flex: 1 1 auto;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #18314f;
  min-width: 0;
  min-height: 0;
}

.facturas-header {
  padding: 18px 2px 4px;
  border-bottom: 1px solid #dbe5f1;
  flex-shrink: 0;
}

.facturas-title,
.facturas-header h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #17324d;
  font-size: 1.55rem;
  font-weight: 700;
}

.facturas-title i,
.facturas-header h1 i {
  color: #256ee8;
}

.facturas-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  border-top: 1px solid #edf2f7;
  padding-top: 10px;
}

.facturas-tab {
  border: 1px solid transparent;
  background: transparent;
  color: #5b6b80;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.facturas-tab:hover,
.facturas-tab.active {
  background: #edf5ff;
  border-color: #b8d7ff;
  color: #0b72ee;
}

.facturas-toolbar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15, 45, 76, 0.04);
  width: 100%;
  box-sizing: border-box;
}

.facturas-toolbar-left,
.facturas-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.facturas-btn {
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.facturas-btn-primary,
.facturas-btn.primary {
  background: #256ee8;
  color: #fff;
}

.facturas-btn-secondary,
.facturas-btn.secondary {
  background: #eef3f8;
  color: #163554;
}

.facturas-btn-success,
.facturas-btn.success {
  background: #10b981;
  color: #fff;
}

.facturas-btn.excel {
  background: #217346;
  color: #fff;
}

.facturas-btn-danger,
.facturas-btn.danger {
  background: #dc2626;
  color: #fff;
}

.facturas-btn.print {
  background: #d32f2f;
  color: #fff;
}

.facturas-btn.info {
  background: #17a2b8;
  color: #fff;
}

.facturas-btn.warning {
  background: #f39c12;
  color: #fff;
}

.facturas-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.facturas-counter {
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.facturas-counter strong {
  color: #0f172a;
  font-weight: 700;
}

.facturas-counter i {
  color: #256ee8;
}

.facturas-quick-search {
  min-width: 300px;
  width: 34vw;
  max-width: 520px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 12px;
  outline: none;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.facturas-quick-search:focus {
  border-color: #2f7df2;
  box-shadow: 0 0 0 3px rgba(47, 125, 242, 0.12);
}

.facturas-quick-search:focus-within {
  border-color: #2f7df2;
  box-shadow: 0 0 0 3px rgba(47, 125, 242, 0.12);
}

.facturas-quick-search input {
  border: 0;
  outline: 0;
  min-width: 0;
  width: 100%;
  font-size: 12px;
  color: #18314f;
}

.facturas-tab-content {
  flex: 1;
  min-height: 0;
  display: flex;
}

.facturas-tab-pane,
.facturas-tab-panel {
  display: none;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.facturas-tab-pane.active,
.facturas-tab-panel.active {
  display: flex;
}

.facturas-workspace {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  gap: 0;
  box-sizing: border-box;
}

.facturas-filter-host {
  flex-shrink: 0;
  min-height: 0;
}

.facturas-filter-host .kre-filter-panel.filter-sidebar,
.facturas-filter-host .kre-filter-panel.filter-sidebar.open {
  height: 100%;
  max-height: none;
  border: 1px solid #dbe5f0;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
}

.facturas-filter-host .kre-filter-panel.filter-sidebar:not(.open) {
  width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.facturas-filter-host .kre-filter-panel .sidebar-body {
  min-height: 0;
}

.facturas-client-filter-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.facturas-client-filter-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.facturas-client-filter-actions .facturas-btn {
  padding: 7px 10px;
  font-size: 11px;
}

.facturas-selected-client {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #123a66;
  border-radius: 7px;
  padding: 8px 9px;
  font-size: 12px;
  line-height: 1.35;
}

.facturas-selected-client span {
  color: #64748b;
}

.facturas-results-card {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 45, 76, 0.05);
  box-sizing: border-box;
}

.facturas-workspace.filters-collapsed {
  padding-left: 0;
  padding-right: 0;
}

.facturas-body .facturas-toolbar,
.facturas-body .facturas-workspace {
  margin-left: 0;
  margin-right: 0;
}

.facturas-filter-host:empty + .facturas-results-card,
.facturas-workspace.filters-collapsed .facturas-results-card {
  border-radius: 8px;
}

.facturas-results-heading {
  padding: 15px 16px 12px;
  border-bottom: 1px solid #e8eef5;
  flex-shrink: 0;
}

.facturas-results-heading h3 {
  margin: 0 0 4px;
  color: #0f2d4c;
  font-size: 14px;
}

.facturas-results-heading p {
  margin: 0;
  color: #61758f;
  font-size: 12px;
}

.facturas-table-wrap {
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  background: #fff;
  padding: 0;
  position: relative;
  overscroll-behavior: contain;
}

.facturas-table {
  width: 100%;
  min-width: 1410px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  table-layout: fixed;
  position: relative;
  overflow: visible !important;
}

.facturas-table thead,
.facturas-table thead tr {
  position: static !important;
}

.facturas-table th {
  position: sticky !important;
  top: 0;
  z-index: 80;
  background: #347df5 !important;
  color: #fff !important;
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
  background-clip: padding-box;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.08);
}

.facturas-table td {
  padding: 8px;
  border-bottom: 1px solid #e9eef5;
  color: #102a43;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facturas-table td.facturas-action-cell {
  overflow: visible;
  position: relative;
}

.facturas-table .facturas-list-trigger {
  display: inline-block;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
}

.cobranzas-table .cobranzas-list-trigger {
  display: inline-block;
  max-width: 100%;
  width: auto;
  vertical-align: middle;
}

.facturas-table .facturas-trigger-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facturas-table .action-trigger .floating-action-button {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  transform: scale(0.9);
  transform-origin: bottom left;
  background-color: var(--primary-color);
  color: white;
  white-space: nowrap;
  z-index: 1000;
  min-width: auto;
  padding: 5px 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.facturas-table .action-trigger .floating-action-button::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 15px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--primary-color) transparent transparent transparent;
}

.facturas-table .action-trigger:hover .floating-action-button {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.facturas-table .cobranzas-list-trigger .floating-action-button {
  top: calc(100% + 4px);
  right: auto;
  bottom: auto;
  left: 0;
  margin-bottom: 0;
  min-width: max-content;
  max-width: none;
  transform: scale(0.96);
  transform-origin: top left;
  white-space: nowrap;
  z-index: 2000;
}

.facturas-table .cobranzas-list-trigger .floating-action-button::after {
  display: none;
}

.facturas-table .cobranzas-list-trigger:hover .floating-action-button {
  transform: scale(1);
}

.facturas-table .cobranzas-acuerdo-trigger .floating-action-button {
  background: #3498db;
}

.facturas-table .cobranzas-acuerdo-trigger .cobranzas-agreement-ref {
  cursor: pointer;
}

.facturas-table.cobranzas-table td {
  overflow: visible;
  position: relative;
}

.facturas-table .cobranzas-cell-stack,
.facturas-table .cobranzas-list-trigger {
  overflow: visible;
}

.facturas-table tbody tr:nth-child(even) {
  background: #f8fbff;
}

.facturas-table tbody tr:hover {
  background: #eef6ff;
}

.facturas-table tfoot,
.facturas-table tfoot tr {
  position: static !important;
}

.facturas-table tfoot td {
  position: sticky !important;
  bottom: 0;
  z-index: 75;
  background: #f6f9fd;
  border-top: 2px solid #2f7df2;
  font-weight: 800;
  background-clip: padding-box;
  box-shadow: 0 -2px 0 rgba(15, 23, 42, 0.08), 0 -4px 10px rgba(15, 23, 42, 0.08);
}

.facturas-table tfoot tr.facturas-total-usd td {
  color: #047857 !important;
  background: #ecfdf5;
  border-top-color: #10b981;
}

.facturas-table tfoot tr:nth-last-child(2) td {
  bottom: 34px;
}

.facturas-table tfoot tr:nth-last-child(3) td {
  bottom: 68px;
}

/* =========================================================
   Vista independiente de Registro de Solicitudes Movimiento
   Reutiliza el layout de facturas para mantener consistencia.
   ========================================================= */
.solicitudes-body .solicitudes-page {
  min-height: 0;
}

.solicitudes-body .facturas-toolbar {
  margin-left: 0;
  margin-right: 0;
}

.solicitudes-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  overscroll-behavior: contain;
}

.solicitudes-table {
  min-width: 1280px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.solicitudes-table thead,
.solicitudes-table thead tr {
  position: static !important;
}

.solicitudes-table thead th {
  position: sticky !important;
  top: 0;
  z-index: 80;
  background: #347df5 !important;
  color: #fff !important;
  background-clip: padding-box;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.08);
}

.solicitudes-table td {
  background-clip: padding-box;
}

.solicitudes-table tbody tr:nth-child(even) {
  background: #f8fbff;
}

.solicitudes-table tbody tr:hover {
  background: #eef6ff;
}

.solicitudes-table .data-value,
.solicitudes-wide-value {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.solicitudes-table .note-text {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.solicitudes-table .action-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Píldora de estatus: los nombres largos ("Enviado a Mensajería", "Riesgo No
   Aceptado") se salían del óvalo porque .status-badge fija min-width:140px y es
   flex, así que el texto no podía encogerse ni partirse dentro de la celda.
   Aquí se libera el ancho y se permite que el texto ocupe dos líneas. */
.solicitudes-table .status-badge {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  line-height: 1.2;
  padding: 5px 9px;
  flex-wrap: nowrap;
}

.solicitudes-table .status-badge i {
  flex: 0 0 auto;
}

/* Los botones se alinean ARRIBA, a la altura del contenido de las demás
   columnas. La regla base `.actions-cell` los centra verticalmente
   (vertical-align:middle !important), lo que dejaba un hueco en blanco encima
   en las filas altas. */
.solicitudes-table .actions-cell {
  min-width: 104px;
  padding-left: 4px;
  padding-right: 4px;
  white-space: normal;
  vertical-align: top !important;
}

/* Los 6 botones de acción no caben en una sola fila dentro de la columna
   (el de "Insertar nota" quedaba fuera de la vista). Se acotan a 3 por fila
   para que siempre se vean los 6, en dos filas parejas. */
.solicitudes-table .facturas-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 92px;
  margin: 0 auto;
}

/* La tabla mide 1280px y con el panel de filtros abierto no cabe, así que la
   columna de Acciones quedaba fuera del área visible y había que desplazarse
   en horizontal para usarla. Se ancla a la derecha para que esté siempre a la
   vista. El fondo debe ser opaco (y replicar el zebra/hover) porque el resto
   de las columnas pasa por debajo al desplazar. */
.solicitudes-table thead th:last-child,
.solicitudes-table td.actions-cell {
  position: sticky;
  right: 0;
  background: #fff;
  background-clip: padding-box;
  box-shadow: -6px 0 8px -7px rgba(15, 23, 42, 0.35);
}

.solicitudes-table td.actions-cell {
  z-index: 70;
}

/* La celda de la esquina es sticky en los dos ejes y debe quedar por encima
   tanto del encabezado (80) como de la columna de acciones (70). */
.solicitudes-table thead th:last-child {
  top: 0;
  z-index: 90;
}

.solicitudes-table tbody tr:nth-child(even) td.actions-cell {
  background: #f8fbff;
}

.solicitudes-table tbody tr:hover td.actions-cell {
  background: #eef6ff;
}

.solicitudes-table .facturas-actions button {
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
}

.solicitudes-body .smv-poliza-badge {
  height: 32px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #eff6ff;
}

.solicitudes-body .smv-paginacion button.activo,
.solicitudes-body .smv-paginacion button:hover {
  background-color: #347df5;
  border-color: #347df5;
  color: #fff;
}

.facturas-table th:nth-child(1),
.facturas-table td:nth-child(1) {
  width: 58px;
  text-align: center;
}

.facturas-table th:nth-child(2),
.facturas-table td:nth-child(2) {
  width: 95px;
}

.facturas-table th:nth-child(3),
.facturas-table td:nth-child(3) {
  width: 230px;
}

.facturas-table th:nth-child(4),
.facturas-table td:nth-child(4) {
  width: 135px;
}

.facturas-table th:nth-child(5),
.facturas-table td:nth-child(5) {
  width: 105px;
}

.facturas-table th:nth-child(6),
.facturas-table td:nth-child(6),
.facturas-table th:nth-child(7),
.facturas-table td:nth-child(7) {
  width: 110px;
}

.facturas-table th:nth-child(8),
.facturas-table td:nth-child(8) {
  width: 80px;
  text-align: center;
}

.facturas-table th:nth-child(9),
.facturas-table td:nth-child(9),
.facturas-table th:nth-child(10),
.facturas-table td:nth-child(10),
.facturas-table th:nth-child(11),
.facturas-table td:nth-child(11),
.facturas-table th:nth-child(12),
.facturas-table td:nth-child(12) {
  width: 92px;
  text-align: center;
}

.facturas-table th:nth-child(13),
.facturas-table td:nth-child(13) {
  width: 56px;
  text-align: center;
}

.facturas-table th:nth-child(14),
.facturas-table td:nth-child(14),
.facturas-table th:nth-child(15),
.facturas-table td:nth-child(15),
.facturas-table th:nth-child(16),
.facturas-table td:nth-child(16) {
  width: 116px;
  text-align: right;
}

.facturas-table th:nth-child(17),
.facturas-table td:nth-child(17) {
  width: 118px;
  text-align: center;
}

.creditos-table {
  min-width: 1420px;
}

.creditos-table th:nth-child(1),
.creditos-table td:nth-child(1) {
  width: 58px;
  text-align: center;
}

.creditos-table th:nth-child(2),
.creditos-table td:nth-child(2) {
  width: 95px;
}

.creditos-table th:nth-child(3),
.creditos-table td:nth-child(3) {
  width: 230px;
}

.creditos-table th:nth-child(4),
.creditos-table td:nth-child(4) {
  width: 135px;
}

.creditos-table th:nth-child(5),
.creditos-table td:nth-child(5) {
  width: 105px;
}

.creditos-table th:nth-child(6),
.creditos-table td:nth-child(6),
.creditos-table th:nth-child(7),
.creditos-table td:nth-child(7) {
  width: 110px;
}

.creditos-table th:nth-child(8),
.creditos-table td:nth-child(8) {
  width: 145px;
}

.creditos-table th:nth-child(9),
.creditos-table td:nth-child(9),
.creditos-table th:nth-child(10),
.creditos-table td:nth-child(10),
.creditos-table th:nth-child(11),
.creditos-table td:nth-child(11),
.creditos-table th:nth-child(12),
.creditos-table td:nth-child(12) {
  width: 92px;
  text-align: center;
}

.creditos-table th:nth-child(13),
.creditos-table td:nth-child(13),
.creditos-table th:nth-child(14),
.creditos-table td:nth-child(14) {
  width: 116px;
  text-align: right;
}

.creditos-table th:nth-child(15),
.creditos-table td:nth-child(15) {
  width: 118px;
  text-align: center;
}

.acuerdos-table {
  min-width: 1500px;
}

.acuerdos-table th:nth-child(1),
.acuerdos-table td:nth-child(1) {
  width: 58px;
  text-align: center;
}

.acuerdos-table th:nth-child(2),
.acuerdos-table td:nth-child(2) {
  width: 95px;
  text-align: center;
}

.acuerdos-table th:nth-child(3),
.acuerdos-table td:nth-child(3) {
  width: 105px;
}

.acuerdos-table th:nth-child(4),
.acuerdos-table td:nth-child(4) {
  width: 230px;
}

.acuerdos-table th:nth-child(5),
.acuerdos-table td:nth-child(5) {
  width: 135px;
}

.acuerdos-table th:nth-child(6),
.acuerdos-table td:nth-child(6) {
  width: 105px;
}

.acuerdos-table th:nth-child(7),
.acuerdos-table td:nth-child(7) {
  width: 150px;
}

.acuerdos-table th:nth-child(8),
.acuerdos-table td:nth-child(8) {
  width: 92px;
  text-align: center;
}

.acuerdos-table th:nth-child(9),
.acuerdos-table td:nth-child(9),
.acuerdos-table th:nth-child(10),
.acuerdos-table td:nth-child(10),
.acuerdos-table th:nth-child(11),
.acuerdos-table td:nth-child(11) {
  width: 84px;
  text-align: center;
}

.acuerdos-table th:nth-child(12),
.acuerdos-table td:nth-child(12),
.acuerdos-table th:nth-child(13),
.acuerdos-table td:nth-child(13),
.acuerdos-table th:nth-child(14),
.acuerdos-table td:nth-child(14) {
  width: 116px;
  text-align: right;
}

.acuerdos-table th:nth-child(15),
.acuerdos-table td:nth-child(15) {
  width: 105px;
  text-align: center;
}

.acuerdos-table th:nth-child(16),
.acuerdos-table td:nth-child(16) {
  width: 118px;
  text-align: center;
}

.facturas-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.facturas-balance-pendiente,
.facturas-balance-pending {
  color: #c0392b;
  font-weight: 800;
}

.facturas-balance-saldado,
.facturas-balance-ok {
  color: #168a4a;
  font-weight: 800;
}

.facturas-empty {
  text-align: center !important;
  color: #64748b !important;
  padding: 26px 14px !important;
}

.facturas-actions {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.facturas-action-btn {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.facturas-action-btn.view {
  background: #0879f2;
}

.facturas-action-btn.edit {
  background: #00a88a;
}

.facturas-action-btn.delete {
  background: #dc143c;
}

.facturas-action-btn.disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

.facturas-pagination {
  flex-shrink: 0;
  min-height: 52px;
  padding: 8px 12px;
  border-top: 1px solid #e8eef5;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.facturas-pagination-info {
  color: #516579;
  font-size: 12px;
  font-weight: 700;
}

.facturas-pagination-controls {
  display: flex;
  gap: 5px;
}

.facturas-pagination-controls button {
  min-width: 31px;
  height: 31px;
  border: 1px solid #d4dee9;
  background: #fff;
  color: #18314f;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.facturas-pagination-controls button.active {
  background: #2f7df2;
  color: #fff;
  border-color: #2f7df2;
}

.facturas-pagination-controls button:disabled {
  color: #a5b1c2;
  cursor: not-allowed;
}

.cobros-table {
  min-width: 1320px;
}

.cobros-table th:nth-child(1),
.cobros-table td:nth-child(1) {
  width: 58px;
  text-align: center;
}

.cobros-table th:nth-child(2),
.cobros-table td:nth-child(2),
.cobros-table th:nth-child(3),
.cobros-table td:nth-child(3) {
  width: 92px;
  text-align: center;
}

.cobros-table th:nth-child(4),
.cobros-table td:nth-child(4),
.cobros-table th:nth-child(5),
.cobros-table td:nth-child(5) {
  width: 120px;
}

.cobros-table th:nth-child(6),
.cobros-table td:nth-child(6) {
  width: 240px;
}

.cobros-table th:nth-child(7),
.cobros-table td:nth-child(7) {
  width: 115px;
}

.cobros-table th:nth-child(8),
.cobros-table td:nth-child(8),
.cobros-table th:nth-child(9),
.cobros-table td:nth-child(9) {
  width: 118px;
  text-align: right;
}

.cobros-table th:nth-child(10),
.cobros-table td:nth-child(10),
.cobros-table th:nth-child(11),
.cobros-table td:nth-child(11) {
  width: 120px;
}

.cobros-table th:nth-child(12),
.cobros-table td:nth-child(12) {
  width: 150px;
}

.cobros-table th:nth-child(13),
.cobros-table td:nth-child(13) {
  width: 118px;
  text-align: center;
}

.facturas-empty-panel {
  width: 100%;
  min-height: 300px;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #61758f;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 1200px) {
  .facturas-body {
    overflow: auto;
  }

  .facturas-body #main-content {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .facturas-page {
    height: auto;
    min-height: calc(100vh - 24px);
    margin: 12px;
  }

  .facturas-toolbar,
  .facturas-workspace,
  .facturas-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .facturas-toolbar-left,
  .facturas-toolbar-right {
    flex-wrap: wrap;
  }

  .facturas-quick-search {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .facturas-filter-host .kre-filter-panel.filter-sidebar,
  .facturas-filter-host .kre-filter-panel.filter-sidebar.open {
    width: 100%;
    border-right: 1px solid #dbe5f0;
    border-radius: 8px 8px 0 0;
  }

  .facturas-results-card {
    border-radius: 0 0 8px 8px;
    min-height: 520px;
  }
}

/* ===== Registro de Personas: listado moderno ===== */
.personas-body .personas-table {
  min-width: 1180px;
}

.personas-body .personas-table th:nth-child(1),
.personas-body .personas-table td:nth-child(1) {
  width: 78px;
  text-align: center;
}

.personas-body .personas-table th:nth-child(2),
.personas-body .personas-table td:nth-child(2),
.personas-body .personas-table th:nth-child(3),
.personas-body .personas-table td:nth-child(3) {
  width: 170px;
}

.personas-body .personas-table th:nth-child(4),
.personas-body .personas-table td:nth-child(4) {
  width: 120px;
}

.personas-body .personas-table th:nth-child(5),
.personas-body .personas-table td:nth-child(5) {
  width: 140px;
}

.personas-body .personas-table th:nth-child(6),
.personas-body .personas-table td:nth-child(6) {
  width: 130px;
  text-align: center;
}

.personas-body .personas-table th:nth-child(7),
.personas-body .personas-table td:nth-child(7) {
  width: 240px;
  white-space: normal;
  line-height: 1.35;
}

.personas-body .personas-table th:nth-child(8),
.personas-body .personas-table td:nth-child(8) {
  width: 105px;
  text-align: center;
}

.personas-body .personas-table th:nth-child(9),
.personas-body .personas-table td:nth-child(9) {
  width: 120px;
  text-align: center;
}

.personas-body .facturas-filter-host {
  width: 340px;
  max-width: 340px;
  opacity: 1;
  overflow: hidden;
  transition: width 0.24s ease, max-width 0.24s ease, opacity 0.18s ease;
}

.personas-body .facturas-workspace.filters-collapsed .facturas-filter-host {
  width: 0;
  max-width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}

.personas-body .facturas-workspace.filters-collapsed .facturas-filter-host .kre-filter-panel {
  border-width: 0;
}

/* La grilla operativa de cobranzas usa celdas compuestas; estas reglas deben
   prevalecer sobre los anchos genéricos del listado de facturas. */
.facturas-body .cobranzas-table {
  min-width: 1120px;
}

.facturas-body .cobranzas-table th:nth-child(1),
.facturas-body .cobranzas-table td:nth-child(1) {
  width: 5%;
  text-align: center;
}

.facturas-body .cobranzas-table th:nth-child(2),
.facturas-body .cobranzas-table td:nth-child(2) {
  width: 28%;
  text-align: left;
}

.facturas-body .cobranzas-table th:nth-child(3),
.facturas-body .cobranzas-table td:nth-child(3) {
  width: 17%;
  text-align: left;
}

.facturas-body .cobranzas-table th:nth-child(4),
.facturas-body .cobranzas-table td:nth-child(4) {
  width: 12%;
  text-align: left;
}

.facturas-body .cobranzas-table th:nth-child(5),
.facturas-body .cobranzas-table td:nth-child(5) {
  width: 12%;
  text-align: right;
}

.facturas-body .cobranzas-table th:nth-child(6),
.facturas-body .cobranzas-table td:nth-child(6) {
  width: 18%;
  text-align: left;
}

.facturas-body .cobranzas-table th:nth-child(7),
.facturas-body .cobranzas-table td:nth-child(7) {
  width: 8%;
  text-align: center;
}

.facturas-body .cobranzas-table td {
  height: 72px;
  white-space: normal;
}

.facturas-body .cobranzas-workspace {
  height: clamp(480px, calc(100vh - 270px), 760px);
}

.facturas-body .cobranzas-workspace .facturas-results-card {
  height: 100%;
  min-height: 0;
}

.facturas-body .cobranzas-workspace .facturas-table-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* Riesgo de cancelación: conserva la altura operativa de la lista aunque no
   utiliza el panel lateral de filtros. */
#cobranzasPaneRiesgo .facturas-tab-panel {
  min-height: 0;
}

#cobranzasPaneRiesgo .cobranzas-risk-card {
  height: clamp(480px, calc(100vh - 250px), 760px);
  min-height: 480px;
  border-radius: 8px;
}

#cobranzasPaneRiesgo .facturas-table-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.cobranzas-risk-selection {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  padding: 5px 10px;
  white-space: nowrap;
}

.cobranzas-risk-table input[type="checkbox"] {
  accent-color: #2f80ed;
  cursor: pointer;
  height: 16px;
  width: 16px;
}

.facturas-body .cobranzas-risk-table th:nth-child(1),
.facturas-body .cobranzas-risk-table td:nth-child(1) { width: 3%; text-align: center; }
.facturas-body .cobranzas-risk-table th:nth-child(2),
.facturas-body .cobranzas-risk-table td:nth-child(2) { width: 5%; text-align: center; }
.facturas-body .cobranzas-risk-table th:nth-child(3),
.facturas-body .cobranzas-risk-table td:nth-child(3) { width: 25%; text-align: left; }
.facturas-body .cobranzas-risk-table th:nth-child(4),
.facturas-body .cobranzas-risk-table td:nth-child(4) { width: 16%; text-align: left; }
.facturas-body .cobranzas-risk-table th:nth-child(5),
.facturas-body .cobranzas-risk-table td:nth-child(5) { width: 11%; text-align: left; }
.facturas-body .cobranzas-risk-table th:nth-child(6),
.facturas-body .cobranzas-risk-table td:nth-child(6) { width: 12%; text-align: right; }
.facturas-body .cobranzas-risk-table th:nth-child(7),
.facturas-body .cobranzas-risk-table td:nth-child(7) { width: 18%; text-align: left; }
.facturas-body .cobranzas-risk-table th:nth-child(8),
.facturas-body .cobranzas-risk-table td:nth-child(8) { width: 10%; text-align: center; }

.cobranzas-risk-table .cobranzas-actions {
  flex-wrap: wrap;
  justify-content: center;
}

.cobranzas-action-btn.cobranza-document-btn {
  background: #dc2626;
}

.cobranzas-action-btn.cobranza-document-btn:hover {
  background: #b91c1c;
}

.cobranzas-action-btn.cobranza-send-btn {
  background: #15803d;
}

.cobranzas-action-btn.cobranza-send-btn:hover {
  background: #166534;
}

.cobranzas-action-btn:disabled,
#btnEnviarCobranzasRiesgo:disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (max-width: 900px) {
  #cobranzasPaneRiesgo .cobranzas-risk-card {
    height: calc(100vh - 235px);
    min-height: 420px;
  }

  #cobranzasPaneRiesgo .facturas-toolbar-left,
  #cobranzasPaneRiesgo .facturas-toolbar-right {
    flex-wrap: wrap;
  }
}

.personas-body .facturas-pagination-controls .activa {
  background: #2f80ed;
  border-color: #2f80ed;
  color: #fff;
}

.personas-body #btnAgregar.facturas-btn.success {
  background: #10b981 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 13px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 7px !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.personas-body #btnAgregar.facturas-btn.success:hover {
  background: #059669 !important;
}

.personas-body .facturas-btn.neutral {
  background: #edf2f7;
  color: #18314f;
  border: 1px solid #dbe5f0;
}

.personas-body.personas-form-open #main-content {
  overflow-y: auto !important;
}

.personas-form-view {
  padding: 22px 34px 96px;
  min-height: 100vh;
  overflow: visible;
  font-family: 'Segoe UI', Roboto, Helvetica, sans-serif;
}

.personas-form-card {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 90px);
  margin: 0 auto;
  border: 1px solid #dbe5f0;
  box-shadow: 0 2px 12px rgba(15, 45, 76, 0.08);
  overflow: visible;
  font-family: 'Segoe UI', Roboto, Helvetica, sans-serif;
  padding-bottom: 34px;
}

.personas-form-card,
.personas-form-card * {
  font-family: 'Segoe UI', Roboto, Helvetica, sans-serif !important;
}

.personas-form-card .fas,
.personas-form-card .fa,
.personas-form-card [class^="fa-"],
.personas-form-card [class*=" fa-"] {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.personas-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 18px;
  border-bottom: 1px solid #e2ebf5;
  margin-bottom: 16px;
}

.personas-form-header h2 {
  margin: 0;
  color: #0b2f4f;
  font-size: 22px;
  font-weight: 700;
}

.personas-form-header p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.personas-form-header .facturas-btn.neutral {
  margin-top: 12px;
  width: max-content;
}

.personas-form-card .tabs {
  margin: 6px 0 18px;
  display: flex;
  gap: 10px;
  border-bottom: 2px solid #e5eaf0;
  padding: 0;
}

.personas-form-card .tab-btn {
  display: block;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #555;
  border-radius: 0;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  min-width: 0;
  margin-bottom: -2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.personas-form-card .tab-btn:hover {
  color: var(--primary-color, #3498db);
}

.personas-form-card .tab-btn.active {
  background: transparent;
  color: var(--primary-color, #3498db);
  border-bottom-color: var(--primary-color, #3498db);
  font-weight: 700;
  box-shadow: none;
}

.personas-form-card .tab-content {
  min-height: 0;
  padding-bottom: 18px;
}

.personas-form-card .personas-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.personas-form-card .persona-accordion-section {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.personas-form-card .persona-accordion-section summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  color: var(--brand-blue, #2f80ed);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.personas-form-card .persona-accordion-section summary i {
  width: 18px;
  text-align: center;
}

.personas-form-card .persona-section-status {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 800;
}

.personas-form-card .persona-section-status.pending {
  color: #dc2626;
}

.personas-form-card .persona-section-status.ready {
  color: #16a34a;
}

.personas-form-card .persona-accordion-section .tab-content {
  padding: 12px;
  border-top: 1px solid #edf2f7;
  background: #fbfdff;
}

.personas-form-card fieldset {
  border: 1px solid #dbe5f0;
  border-radius: 10px;
  background: #f7fbff;
  padding: 24px 22px 28px;
  margin: 0 0 18px;
}

.personas-form-card legend {
  color: #18314f;
  font-weight: 700;
  padding: 0 10px;
}

.personas-form-card label {
  display: block;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
}

.personas-form-card input,
.personas-form-card select,
.personas-form-card textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.personas-form-card button {
  font-family: inherit;
}

.personas-form-card input:focus,
.personas-form-card select:focus,
.personas-form-card textarea:focus {
  border-color: #2f80ed;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.12);
}

.personas-form-card .form-grid {
  gap: 18px;
  align-items: end;
}

.personas-form-card .form-grid + .form-grid {
  margin-top: 18px;
}

.personas-form-card .radio-options,
.personas-form-card .checkbox-label {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.personas-form-card .radio-options label,
.personas-form-card .checkbox-label {
  margin: 0;
  font-weight: 700;
}

.personas-form-card input[type="radio"],
.personas-form-card input[type="checkbox"] {
  width: auto;
  min-height: 0;
}

.personas-form-card .tabla-canales,
.personas-form-card .tabla-cuentas,
.personas-form-card .tabla-roles {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 14px;
}

.personas-form-card .tabla-canales th,
.personas-form-card .tabla-cuentas th,
.personas-form-card .tabla-roles th {
  background: #2f80ed;
  color: #fff;
  padding: 10px;
  text-align: left;
  font-size: 12px;
}

.personas-form-card .tabla-canales td,
.personas-form-card .tabla-cuentas td,
.personas-form-card .tabla-roles td {
  border-bottom: 1px solid #e8eef5;
  padding: 9px 10px;
  font-size: 13px;
}

.personas-form-card .botones-modal {
  border-top: 1px solid #e2ebf5;
  padding-top: 18px;
  margin-top: 20px;
  margin-bottom: 28px;
}

.personas-form-card .boton-guardar {
  background: #00a88a;
  border: 0;
  border-radius: 7px;
  color: #fff;
  font-weight: 700;
  min-height: 38px;
  min-width: 220px;
}

.personas-form-card #btnCancelar {
  border: 0;
  border-radius: 7px;
  background: #edf2f7;
  color: #0f172a;
  font-weight: 700;
  min-height: 38px;
  min-width: 220px;
}

.personas-body .personas-table tr.persona-row-highlight td {
  animation: personaRowHighlight 3.2s ease;
}

@keyframes personaRowHighlight {
  0%, 75% {
    background: #eafaf1;
  }
  100% {
    background: inherit;
  }
}

#modalPersona.personas-form-view .modal-contenidoCliente {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
}

#modalPersona.personas-form-view #formPersona {
  display: block !important;
  min-height: 0 !important;
}

#modalPersona.personas-form-view .tab-content {
  min-height: 0 !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

#modalPersona.personas-form-view .persona-accordion-section .tab-content {
  padding: 12px !important;
}

#modalPersona.personas-form-view #tab-general.tab-content:not(.oculto) {
  display: block !important;
  overflow: visible !important;
}

@media print {
  .personas-body #sidebar,
  .personas-body .facturas-toolbar,
  .personas-body .facturas-filter-host,
  .personas-body .facturas-pagination,
  .personas-body .personas-table th:last-child,
  .personas-body .personas-table td:last-child {
    display: none !important;
  }
}
/* ===== Herramientas: Copiar cuerpo de poliza ===== */
.copiar-poliza-body {
  background: #f4f7fb;
}

.copiar-poliza-page {
  gap: 12px;
}

.copiar-poliza-toolbar,
.copiar-poliza-card {
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.copiar-poliza-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
}

.copiar-poliza-cliente {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #334155;
  font-size: 0.9rem;
}

.copiar-poliza-cliente i,
.copiar-poliza-card-header h2 {
  color: var(--brand-blue);
}

.copiar-poliza-card {
  padding: 16px;
}

.copiar-poliza-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.copiar-poliza-card-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.copiar-poliza-card-header p {
  margin: 4px 0 0 0;
  color: #64748b;
  font-size: 0.86rem;
}

.copiar-radio-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 8px;
}

.copiar-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

.copiar-form-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.copiar-form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.copiar-form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.copiar-form-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.copiar-form-grid .form-group {
  margin: 0;
}

.copiar-form-grid label {
  display: block;
  margin-bottom: 6px;
  color: #1f2937;
  font-size: 0.84rem;
  font-weight: 700;
}

.copiar-form-grid input,
.copiar-form-grid select {
  width: 100%;
  height: 36px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  box-sizing: border-box;
}

.copiar-form-grid input:focus,
.copiar-form-grid select:focus {
  border-color: var(--brand-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}

.copiar-form-grid select:disabled,
.copiar-form-grid input:disabled {
  background: #eef2f7;
  color: #64748b;
  cursor: not-allowed;
}

.copiar-context-panel {
  min-height: 120px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
}

.copiar-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  color: #64748b;
  font-weight: 700;
}

.copiar-empty-state i {
  color: var(--brand-blue);
}

.copiar-preview {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.copiar-preview-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--brand-blue);
  color: #fff;
}

.copiar-preview-title strong {
  font-size: 1rem;
}

.copiar-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 0.78rem;
  font-weight: 800;
}

.copiar-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.copiar-preview-grid > div {
  min-height: 54px;
  padding: 10px 12px;
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}

.copiar-preview-grid span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.copiar-preview-grid strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copiar-check-inline {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 22px;
}

.copiar-check-inline label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.copiar-check-inline input {
  width: auto;
  height: auto;
}

.copiar-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1200px) {
  .copiar-form-grid.cols-5,
  .copiar-form-grid.cols-4,
  .copiar-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .copiar-poliza-toolbar,
  .copiar-poliza-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .copiar-poliza-cliente {
    justify-content: flex-start;
  }

  .copiar-form-grid.cols-3,
  .copiar-form-grid.cols-4,
  .copiar-form-grid.cols-5,
  .copiar-preview-grid {
    grid-template-columns: 1fr;
  }

  .copiar-actions {
    justify-content: stretch;
  }

  .copiar-actions .facturas-btn {
    flex: 1;
  }
}

/* ===== Herramientas: Cambio elemento poliza ===== */
.cambio-poliza-body {
  overflow: hidden;
}

.cambio-poliza-body #main-content {
  height: 100vh;
  display: block;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.cambio-poliza-page {
  display: block;
  flex: none;
  height: auto;
  min-height: auto;
  overflow: visible;
  padding-bottom: 96px;
}

.cambio-poliza-page .copiar-poliza-card {
  margin-bottom: 12px;
}

.cambio-count-card {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 700;
  grid-column: span 2;
}

.cambio-filter-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cambio-filter-section {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.cambio-filter-section summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  color: var(--brand-blue);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.cambio-filter-section summary i {
  width: 18px;
}

.cambio-filter-section .copiar-form-grid {
  padding: 12px;
  margin: 0;
  border-top: 1px solid #edf2f7;
  background: #fbfdff;
}

.cambio-footer-grid {
  align-items: end;
}

.cambio-count-card {
  display: block;
  grid-column: auto;
  min-height: auto;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cambio-count-card span {
  display: block;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.cambio-count-card strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 1.05rem;
}

.cambio-count-card small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
}

.cambio-count-hint,
.cambio-count-calculating {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.cambio-count-warning {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fff7cc 0%, #fffbeb 58%, #ffffff 100%);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .14), 0 10px 26px rgba(245, 158, 11, .16);
  animation: cambio-count-pulse 1.8s ease-in-out infinite;
}

.cambio-count-warning span,
.cambio-count-warning strong {
  color: #92400e;
}

.cambio-count-warning small {
  color: #b45309;
}

.cambio-count-empty {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.cambio-count-error {
  border-color: #fecaca;
  background: #fef2f2;
}

.cambio-count-error strong,
.cambio-count-error small {
  color: #b91c1c;
}

@keyframes cambio-count-pulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .12), 0 10px 26px rgba(245, 158, 11, .14);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, .22), 0 14px 32px rgba(245, 158, 11, .22);
  }
}

.cambio-count-highlight {
  color: #dc2626;
  font-size: 1.12rem;
}

.cambio-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.56);
}

.cambio-modal.oculto {
  display: none !important;
}

.cambio-modal-content {
  width: min(560px, 96vw);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  overflow: hidden;
}

.cambio-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  color: #9a3412;
}

.cambio-modal-header h2 {
  flex: 1;
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
}

.cambio-modal-header button {
  border: none;
  background: transparent;
  color: #334155;
  font-size: 1.35rem;
  cursor: pointer;
}

.cambio-modal-body {
  padding: 20px 22px;
  color: #334155;
  line-height: 1.45;
}

.cambio-modal-body p {
  margin: 0;
}

.cambio-modal-warning {
  margin-top: 16px;
  padding: 12px;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-weight: 700;
}

.cambio-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 760px) {
  .cambio-modal-footer {
    flex-direction: column;
  }
}

/* Detalle de acuerdo abierto desde Gestion de Cobranzas */
.cobranza-agreement-detail-body {
  min-height: 100vh;
  overflow-y: auto;
}

.cobranza-agreement-detail-body #main-content {
  padding: 24px 28px 36px;
  min-height: 100vh;
  overflow-y: visible;
}

.cobranza-agreement-detail-page {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.cobranza-agreement-detail-page > .rnc-back-link {
  margin-bottom: 16px;
}

.cobranza-agreement-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 24px;
  color: #52667a;
  background: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
}

.cobranza-agreement-card {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(15, 42, 67, 0.04);
}

.cobranza-agreement-card h1,
.cobranza-agreement-card h2 {
  margin: 0 0 14px;
  padding-bottom: 9px;
  color: #268fd4;
  font-size: 17px;
  line-height: 1.25;
  border-bottom: 1px solid #3498db;
}

.cobranza-agreement-card h1 i,
.cobranza-agreement-card h2 i {
  margin-right: 6px;
}

.cobranza-agreement-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d7e0ea;
  border-radius: 4px;
}

.cobranza-agreement-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: auto;
  color: #102a43;
  font-size: 13px;
}

.cobranza-agreement-table th {
  padding: 11px 10px;
  color: #fff;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  background: #3498db;
}

.cobranza-agreement-table td {
  padding: 10px;
  line-height: 1.55;
  vertical-align: top;
  border-bottom: 1px solid #dfe6ee;
}

.cobranza-agreement-table tbody tr:last-child td {
  border-bottom: 0;
}

.cobranza-agreement-table tbody tr:nth-child(even) {
  background: #f7faff;
}

.cobranza-agreement-context-table {
  min-width: 900px;
  table-layout: fixed;
}

.cobranza-agreement-context-table th:nth-child(1) { width: 30%; }
.cobranza-agreement-context-table th:nth-child(2) { width: 32%; }
.cobranza-agreement-context-table th:nth-child(3) { width: 28%; }
.cobranza-agreement-context-table th:nth-child(4) { width: 10%; text-align: center; }

.cobranza-agreement-contact,
.cobranza-agreement-last-note {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.cobranza-agreement-contact {
  display: inline-block;
  margin-top: 4px;
  color: #41617f;
  line-height: 1.5;
}

.cobranza-agreement-last-note {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: visible;
}

.cobranza-agreement-total-row {
  background: #eef6ff !important;
  border-top: 2px solid #3498db;
  font-weight: 700;
}

.cobranza-agreement-total-row td {
  border-bottom: 0;
}

.cobranza-agreement-actions {
  text-align: center;
  white-space: nowrap;
}

.cobranza-agreement-actions .facturas-btn {
  width: 34px;
  height: 32px;
  margin: 2px;
  padding: 0;
  justify-content: center;
}

.cobranza-agreement-actions .facturas-btn.warning {
  color: #fff;
  background: #f39c12;
  border-color: #f39c12;
}

.cobranza-agreement-balance {
  color: #c0392b;
  font-weight: 700;
}

.cobranza-policy-link-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 6px;
}

.cobranza-policy-link-text {
  color: #0b63ce;
  font-weight: 700;
}

.cobranza-policy-float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 26px;
  height: 26px;
  padding: 0 9px;
  gap: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #3498db;
  border: 0;
  border-radius: 7px;
  box-shadow: 0 5px 14px rgba(52, 152, 219, 0.24);
  opacity: 0;
  transform: translateX(-4px) scale(0.96);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.cobranza-policy-link-wrap:hover .cobranza-policy-float-btn,
.cobranza-policy-float-btn:focus {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.cobranza-policy-float-btn:hover {
  background: #256ee8;
}

.cobranza-policy-client-line {
  margin: 0 0 12px;
  color: #102a43;
  font-size: 14px;
}

.cobranza-policy-preview-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(15, 42, 67, 0.05);
}

.cobranza-policy-preview-head,
.cobranza-policy-preview-body {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1.1fr 1.2fr 1.25fr;
}

.cobranza-policy-preview-head {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  background: #3498db;
}

.cobranza-policy-preview-head span {
  padding: 9px 12px;
}

.cobranza-policy-preview-body > div {
  min-width: 0;
  padding: 14px 12px;
  color: #001f3f;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  border-right: 1px solid #e5edf5;
}

.cobranza-policy-preview-body > div:last-child {
  border-right: 0;
}

.cobranza-policy-number {
  color: #0068ff;
}

.cobranza-policy-status {
  display: inline-block;
  margin-top: 4px;
  color: #009b41;
  font-weight: 700;
}

.cobranza-policy-card-header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cobranza-policy-card-header h2 {
  margin: 0;
}

.cobranza-policy-goods-search {
  position: relative;
  flex: 0 1 420px;
  max-width: 100%;
  margin-left: auto;
}

.cobranza-policy-goods-search i {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #6b7c93;
  pointer-events: none;
  transform: translateY(-50%);
}

.cobranza-policy-goods-search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  color: #102a43;
  font-size: 13px;
  background: #fff;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  outline: none;
  box-shadow: 0 2px 8px rgba(15, 42, 67, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.cobranza-policy-goods-search input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.14);
}

.cobranza-policy-goods-table {
  min-width: 1080px;
}

.cobranza-policy-goods-table th:nth-child(1) { width: 7%; }
.cobranza-policy-goods-table th:nth-child(2) { width: 34%; }
.cobranza-policy-goods-table th:nth-child(3) { width: 12%; }
.cobranza-policy-goods-table th:nth-child(4) { width: 12%; }
.cobranza-policy-goods-table th:nth-child(5) { width: 10%; }
.cobranza-policy-goods-table th:nth-child(6) { width: 12%; }
.cobranza-policy-goods-table th:nth-child(7) { width: 8%; }
.cobranza-policy-goods-table th:nth-child(8) { width: 5%; text-align: center; }

.cobranza-agreement-table .action-trigger,
.cobranza-policy-preview-card .action-trigger {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: visible;
}

.cobranza-agreement-table .action-trigger .floating-action-button,
.cobranza-policy-preview-card .action-trigger .floating-action-button {
  top: calc(100% + 4px);
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 3000;
  min-width: max-content;
  margin-bottom: 0;
  color: #fff;
  white-space: nowrap;
  background: #3498db;
  transform: scale(0.96);
  transform-origin: top left;
}

.cobranza-agreement-table .action-trigger:hover .floating-action-button,
.cobranza-policy-preview-card .action-trigger:hover .floating-action-button {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.cobranza-policy-preview-card .cfk-balance-trigger {
  display: inline-block;
  cursor: default;
}

.cobranza-coverages-card {
  border-color: #b8d8f4;
}

.cobranza-coverages-summary {
  margin: 0 0 12px;
  padding: 10px 12px;
  color: #163554;
  background: #eef7ff;
  border: 1px solid #cde6fa;
  border-radius: 6px;
}

.cobranza-coverages-table {
  min-width: 920px;
}

@media (max-width: 900px) {
  .cobranza-agreement-detail-body #main-content {
    padding: 14px;
  }

  .cobranza-agreement-card {
    padding: 14px;
  }

  .cobranza-policy-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .cobranza-policy-goods-search {
    flex-basis: auto;
    width: 100%;
    margin-left: 0;
  }

  .cobranza-policy-preview-head,
  .cobranza-policy-preview-body {
    grid-template-columns: 1fr;
  }

  .cobranza-policy-preview-body > div {
    border-right: 0;
    border-bottom: 1px solid #e5edf5;
  }

  .cobranza-policy-preview-body > div:last-child {
    border-bottom: 0;
  }
}

@media print {
  .cobranza-agreement-detail-body {
    background: #fff !important;
    overflow: visible !important;
  }

  .cobranza-agreement-detail-body #sidebar,
  .cobranza-agreement-detail-body .rnc-back-link,
  .cobranza-agreement-detail-body .cobranza-agreement-actions,
  .cobranza-agreement-detail-body #toast {
    display: none !important;
  }

  .cobranza-agreement-detail-body #main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .cobranza-agreement-detail-page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cobranza-agreement-card {
    break-inside: avoid;
    box-shadow: none !important;
    border-color: #bfcbd8 !important;
  }

  .cobranza-agreement-table-wrap {
    overflow: visible !important;
  }

  .cobranza-agreement-table {
    min-width: 0 !important;
    font-size: 11px !important;
  }

  .cobranza-agreement-context-table th:nth-child(1) { width: 34%; }
  .cobranza-agreement-context-table th:nth-child(2) { width: 34%; }
  .cobranza-agreement-context-table th:nth-child(3) { width: 32%; }
  .cobranza-agreement-context-table th:nth-child(4),
  .cobranza-agreement-context-table td:nth-child(4) {
    display: none !important;
  }
}

/* ==========================================================================
   Cobranzas: registro de cobro y bitacora final
   ========================================================================== */
.cobranzas-page #cobranzaCobroPolicyPreview {
  display: none !important;
}

.cobranzas-page .cobranzas-payment-view {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 130px);
  max-height: none;
  margin: 0;
  padding: 22px 24px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #d8e4f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 35, 64, 0.08);
  box-sizing: border-box;
}

.cobranzas-page .cobranzas-payment-view .facturas-back-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto !important;
  min-width: 0;
  align-self: flex-start;
  margin: 0 0 6px;
  padding: 8px 14px;
  border: 1px solid #d9e6f4;
  border-radius: 7px;
  background: #edf5ff;
  color: #0b4f92;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cobranzas-page .cobranzas-payment-view .facturas-back-btn:hover {
  background: #dcecff;
  border-color: #b9d7fb;
  transform: translateX(-1px);
}

.cobranzas-page .cobranzas-payment-view h2 {
  margin: 0;
  color: #0b2e55;
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  justify-content: center;
}

.cobranzas-page .cobranzas-payment-help {
  margin: -2px 0 8px;
  color: #526987;
  font-size: 0.95rem;
  text-align: center;
}

.cobranzas-page .cobranzas-payment-view .factura-client-info {
  width: 100%;
  margin: 0 0 10px;
  padding: 12px 16px;
  border: 1px solid #d7dde4;
  border-radius: 7px;
  background: #e9edf2;
  color: #1f2d3d;
  font-size: 1rem;
  box-sizing: border-box;
}

.cobranzas-page .cobranzas-payment-view .form-factura {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cobranzas-page .cobranzas-payment-view .form-factura fieldset {
  width: 100%;
  margin: 0 0 16px;
  padding: 18px 16px 16px;
  border: 1px solid #cfdbea;
  border-radius: 10px;
  background: #fbfdff;
  box-sizing: border-box;
}

.cobranzas-page .cobranzas-payment-view .form-factura legend {
  padding: 0 10px;
  color: #003b70;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
}

.cobranzas-page .cobranzas-payment-view .form-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.cobranzas-page .cobranzas-payment-view .form-group label {
  color: #1f2d3d;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

.cobranzas-page .cobranzas-payment-view input:not([type="checkbox"]):not([type="radio"]),
.cobranzas-page .cobranzas-payment-view select,
.cobranzas-page .cobranzas-payment-view textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #c7d3df;
  border-radius: 7px;
  background: #fff;
  color: #001f3f;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.3;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cobranzas-page .cobranzas-payment-view textarea {
  min-height: 74px;
  resize: vertical;
}

.cobranzas-page .cobranzas-payment-view input:focus,
.cobranzas-page .cobranzas-payment-view select:focus,
.cobranzas-page .cobranzas-payment-view textarea:focus {
  outline: none;
  border-color: #2f80ed;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.14);
}

.cobranzas-page .cobranzas-payment-view input:disabled,
.cobranzas-page .cobranzas-payment-view input[readonly],
.cobranzas-page .cobranzas-payment-view select:disabled {
  background: #eef2f6;
  color: #687789;
  cursor: not-allowed;
}

.cobranzas-page .cobranzas-payment-view .fact-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.cobranzas-page .cobranzas-payment-view .fact-row:last-child {
  margin-bottom: 0;
}

.cobranzas-page .cobranzas-payment-view .fact-row.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cobranzas-page .cobranzas-payment-view .fact-row.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cobranzas-page .cobranzas-payment-view .tabla-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dfe7f1;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 35, 64, 0.05);
}

.cobranzas-page .cobranzas-payment-view .data-table {
  width: 100%;
  min-width: 980px !important;
  margin: 0;
  border-collapse: collapse;
  border-radius: 0;
  table-layout: auto;
  box-shadow: none;
}

.cobranzas-page .cobranzas-payment-view .data-table th,
.cobranzas-page .cobranzas-payment-view .data-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #e5edf5;
  font-size: 0.83rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
}

.cobranzas-page .cobranzas-payment-view .data-table th {
  background: #3498db;
  color: #fff;
  font-weight: 800;
}

.cobranzas-page .cobranzas-payment-view .data-table input:not([type="checkbox"]),
.cobranzas-page .cobranzas-payment-view .data-table select {
  min-height: 32px;
  padding: 6px 8px;
  font-size: 0.82rem;
}

.cobranzas-page .cobranzas-payment-view .cobranzas-cuotas-wrapper {
  overflow-x: hidden;
}

.cobranzas-page .cobranzas-payment-view .cobranzas-cuotas-table {
  min-width: 0 !important;
  table-layout: fixed;
}

.cobranzas-page .cobranzas-payment-view .cobranzas-cuotas-table th,
.cobranzas-page .cobranzas-payment-view .cobranzas-cuotas-table td {
  white-space: normal;
  word-break: break-word;
}

.cobranzas-page .cobranzas-payment-view .distribucion-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
}

.cobranzas-page .cobranzas-payment-view .botones-modal.btns-derecha {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid #e5edf6;
}

.cobranzas-page .cobranzas-payment-view .botones-modal.btns-derecha button {
  width: auto;
  min-width: 170px;
  border-radius: 7px;
  font-family: inherit;
  font-weight: 800;
}

.cobranza-case-history-layout #main-content {
  padding: 24px 28px;
  box-sizing: border-box;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.cobranza-case-history-layout .cobranza-note-page {
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 0;
}

/* El módulo debe seguir siendo navegable cuando el zoom reduce el viewport.
   El contenido general desplaza verticalmente y las tablas anchas conservan
   un scroll propio, sin quedar cortadas por el ancho del menú lateral. */
.cobranzas-body #main-content {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.cobranzas-body .cobranzas-page,
.cobranza-case-history-layout .cobranza-context-card,
.cobranza-case-history-layout .cobranza-note-pane,
.cobranza-case-history-layout .cobranza-notes-heading {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cobranza-case-history-layout .cobranza-notes-heading {
  flex-wrap: wrap;
  gap: 10px;
}

.cobranza-case-history-layout .cobranza-case-table-wrap,
.cobranza-case-history-layout .cobranza-history-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.cobranza-case-history-layout .cobranza-history-table {
  min-width: 860px;
}

@media (max-width: 1200px) {
  .cobranzas-page .cobranzas-payment-view .fact-row.cols-4,
  .cobranzas-page .cobranzas-payment-view .fact-row.cols-5,
  .cobranzas-page .cobranzas-payment-view .distribucion-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cobranzas-page .cobranzas-payment-view {
    padding: 16px;
  }

  .cobranzas-page .cobranzas-payment-view .fact-row.cols-4,
  .cobranzas-page .cobranzas-payment-view .fact-row.cols-5,
  .cobranzas-page .cobranzas-payment-view .distribucion-wrapper {
    grid-template-columns: 1fr;
  }

  .cobranza-case-history-layout #main-content {
    padding: 14px;
  }
}

/* ==========================================================================
   MÓDULO COTIZACIONES (27.07.2026)

   Solo se definen las clases que NO existían. Las que ya están en el archivo
   se reutilizan tal cual y no se redefinen para no pisar cascadas ajenas:
   .status-badge, .badge-days, .table-k, .filter-sidebar, .nav-tabs,
   .form-control, .pagination-container, .page-btn, .cell-group, .data-pair,
   .data-label, .data-value, .action-group, .action-btn, .facturas-*, .toast.
   ========================================================================== */

/* --- Celdas apiladas de la grilla enriquecida --- */
.cotizaciones-page .cell-stack { display: flex; flex-direction: column; line-height: 1.25; gap: 2px; }
.cotizaciones-page .cell-main  { font-weight: 600; color: #2c3e50; font-size: 0.9rem; }
.cotizaciones-page .cell-sub   { font-size: 0.76rem; color: #7f8c8d; line-height: 1.25; }

.cotizaciones-page .note-text-sm {
  background-color: #fff3cd; padding: 4px 6px; border-radius: 4px; font-size: 0.74rem;
  color: #856404; margin-top: 3px; border-left: 3px solid #ffeeba; line-height: 1.25;
  white-space: normal; word-break: break-word;
}

.cotizaciones-page .user-avatar-sm,
.cotizaciones-body .user-avatar-sm {
  width: 20px; height: 20px; background: #e1f5fe; color: #0277bd; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; margin-right: 5px; font-weight: 700; flex-shrink: 0;
}

/* Cronología en dos columnas dentro de la celda */
.cotizaciones-page .cot-chrono { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }

/* --- Badges de relación --- */
.badge-tipo-relacion {
  font-size: 0.63rem; padding: 2px 7px; border-radius: 3px; width: fit-content;
  margin-top: 4px; font-weight: 700; letter-spacing: .5px; color: #fff;
}
.badge-prospecto { background-color: #27ae60; }
.badge-cliente   { background-color: #347df5; }

/* --- Tarjetas KPI --- */
.kpi-container { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.kpi-card {
  flex: 0 1 auto; min-width: 9.5rem; padding: 0.5rem 0.75rem; border-radius: 0.4rem;
  color: #fff; display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.kpi-card h3 { font-size: 0.66rem; margin: 0; opacity: .85; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.kpi-card p  { font-size: 0.98rem; font-weight: 800; margin: 2px 0 0; }
.bg-green { background-color: #27ae60 !important; }
.bg-blue  { background-color: #347df5 !important; }
.bg-mamey { background-color: #f39c12 !important; }
.bg-red   { background-color: #e74c3c !important; }

/* --- Contenedores con scroll propio (grillas embebidas del formulario) --- */
.grid-scroll-area {
  width: 100%; overflow: auto; border: 1px solid #dbe5f0; border-radius: 0.3rem;
  position: relative; box-sizing: border-box; scrollbar-width: thin; background: #fff;
}
.grid-scroll-area .table-k thead th { position: sticky; top: 0; z-index: 3; }

/* --- Área de registro --- */
.registro-wrapper {
  width: 100%; max-width: 1500px; margin: 1.2rem auto; background-color: #fff;
  padding: 1.6rem 1.8rem; border-radius: 0.5rem; border: 1px solid #e6edf5;
  box-shadow: 0 .15rem .8rem rgba(0, 0, 0, .05); overflow-y: auto;
}
.cot-registro-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid #eef2f7; padding-bottom: .9rem; margin-bottom: 1.2rem; gap: 1rem;
}
.cot-registro-head h2 { color: #2c3e50; margin: 0; font-size: 1.25rem; }

.session-container {
  border: 1px solid #e6edf5; border-radius: .45rem; padding: 1rem 1.1rem; margin-bottom: 1.1rem;
  background: #fdfefe;
}
.form-title-note {
  font-size: 1.02rem; color: #347df5; margin: 0 0 .9rem; padding-bottom: .5rem;
  border-bottom: 1px solid #eef2f7; font-weight: 700;
}

/* Rejillas del formulario */
.cot-form-grid { display: grid; gap: .9rem 1.1rem; margin-bottom: .9rem; }
.cot-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cot-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cot-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cot-form-grid .form-group { display: flex; flex-direction: column; min-width: 0; }
.cot-form-grid .form-group > label,
.session-container .form-group > label {
  font-weight: 600; font-size: .8rem; line-height: 1.25; color: #55606d;
  min-height: 2rem; margin-bottom: .3rem;
  display: flex; align-items: flex-end;
}
/* ".modal input/select/textarea" global le mete margin-top:6px, pero el wrapper
   .cot-input-money no lo hereda (no es un input) y queda 6px más arriba: se
   anula aquí para que todos los campos de la fila arranquen a la misma altura. */
.cot-form-grid .form-group > input,
.cot-form-grid .form-group > select,
.cot-form-grid .form-group > textarea {
  margin-top: 0;
}
/* Cuando el "slot" de la etiqueta trae además un botón (ej. Buscar Cliente),
   necesita la misma altura mínima que un <label> suelto para que el campo de
   abajo arranque a la misma altura que sus vecinos en la fila del grid. */
.cot-label-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: .5rem; min-height: 2rem; margin-bottom: .3rem;
}
.cot-label-row label { margin: 0 !important; }
.cot-required { color: #e74c3c; margin-left: 2px; }
.cot-hint-inline { font-size: .72rem; color: #8a97a6; margin-top: .25rem; }
.cot-hint { font-size: .8rem; color: #55606d; background: #f4f8fd; border-left: 3px solid #347df5;
            padding: .45rem .7rem; border-radius: .25rem; margin-bottom: .8rem; }
.cot-btn-mini { padding: .3rem .7rem !important; font-size: .74rem !important; }

/* Fila de checkbox: la especificidad de ".modal-contenido label" (display:block)
   obliga a repetir el selector padre para que nuestro flex gane sin usar !important. */
.modal-contenido .cot-check-row {
  display: flex; align-items: center; gap: .6rem;
  font-size: .84rem; font-weight: 500; color: #3a4550;
  margin-top: .3rem; padding: .6rem .85rem;
  background: #f4f8fd; border: 1px solid #dbe6f3; border-radius: .35rem;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.modal-contenido .cot-check-row:hover { background: #eaf2fc; border-color: #c7d9ef; }
.cot-check-row input[type="checkbox"] {
  width: 17px; height: 17px; min-width: 17px; margin: 0;
  accent-color: #347df5; cursor: pointer;
}

/* Campo de dinero con prefijo de símbolo */
.cot-input-money {
  display: flex; align-items: stretch; border: 1px solid #ccd6e0; border-radius: .25rem;
  overflow: hidden; background: #fff;
}
.cot-money-prefix {
  background: #f0f4f8; padding: 0 .6rem; color: #55606d; font-weight: 700; font-size: .82rem;
  border-right: 1px solid #ccd6e0; display: flex; align-items: center; white-space: nowrap;
}
.cot-input-money .form-control { border: none !important; border-radius: 0 !important; }

.cot-form-actions {
  display: flex; justify-content: flex-end; gap: .8rem; margin-top: 1.3rem;
  padding-top: 1rem; border-top: 1px solid #eef2f7; flex-wrap: wrap;
}

.cot-empty { text-align: center; padding: 18px; color: #7f8c8d; font-size: .87rem; }

/* Enlaces tel: y mailto: en las grillas de aseguradoras */
.cot-link-tel  { text-decoration: none; color: #2c3e50; font-weight: 600; font-size: .8rem; display: block; }
.cot-link-tel i { color: #347df5; margin-right: 4px; }
.cot-link-sec  { color: #7f8c8d !important; font-weight: 500 !important; }
.cot-link-sec i { color: #c3cdd8 !important; }
.cot-link-mail { text-decoration: none; color: #347df5; font-weight: 500; font-size: .8rem; }

/* --- Badge de conteo sobre el botón de oferentes --- */
.cot-btn-badge { position: relative; overflow: visible; }
.cot-badge-count {
  position: absolute; top: -6px; right: -6px; background-color: #e74c3c; color: #fff;
  font-size: .6rem; font-weight: 700; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); line-height: 1;
}

/* --- Pestaña 3: banner de contexto macro --- */
.cot-ofertas-wrapper { max-width: none; }
/* El banner es contexto, no el contenido principal: se mantiene compacto para
   que la grilla de oferentes conserve alto suficiente y se vean varias
   aseguradoras sin scroll. */
.cot-macro-banner {
  background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem;
  margin-bottom: .6rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
.cot-banner-grid {
  display: flex; gap: 1.2rem; align-items: flex-start; padding: .7rem 1.1rem; flex-wrap: wrap;
}
.cot-banner-grid > .cell-stack { flex: 1 1 190px; min-width: 0; }
.cot-banner-sep { border-left: 1px solid #dde5ee; padding-left: 1.4rem; }
.cot-banner-label {
  font-size: .68rem; color: #7f8c8d; text-transform: uppercase; font-weight: 800; letter-spacing: .5px;
}
/* Los botones van en línea, alineados a la derecha. Antes se forzaban a su
   propia fila (flex-basis:100%) para evitar un recorte, pero aquel recorte lo
   causaba el box-sizing del wrapper —ya corregido—, y la fila extra costaba
   ~52px de alto que le hacían falta a la grilla. Con flex-wrap en el padre,
   si el ancho no alcanza bajan solos a la línea siguiente. */
.cot-banner-actions {
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;
  gap: .6rem; margin-left: auto; flex: 0 0 auto; align-self: center;
}
.cot-banner-cerrado {
  background: #fdecea; color: #922b21; border-top: 1px solid #f5c6cb;
  padding: .6rem 1.3rem; font-size: .84rem; font-weight: 600; border-radius: 0 0 .5rem .5rem;
}
/* Título de la sección, igual que la maqueta:
   <h2><i class="fas fa-layer-group"></i> Gestión de Aseguradoras (Oferentes)</h2> */
.cot-ofertas-titulo {
  color: #2c3e50;
  margin: 0 0 .4rem;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
}
.cot-ofertas-titulo i { color: #17a2b8; }

.cot-ofertas-toolbar { margin-bottom: .5rem; border-radius: .4rem; flex-wrap: wrap; row-gap: 8px; }
.cot-ofertas-toolbar .facturas-toolbar-left,
.cot-ofertas-toolbar .facturas-toolbar-right { flex-wrap: wrap; row-gap: 8px; }
.cot-fila-ganadora > td { background-color: #eafaf1 !important; box-shadow: inset 3px 0 0 #27ae60; }

/* Distintivo de aseguradora ganadora en la grilla principal (pestaña Lista).
   Usa el dorado del trofeo, no el verde de "caso cerrado": una cotización
   puede tener ganadora y seguir abierta hasta que se emita la póliza. */
.cot-ganadora-tag {
  display: block; margin-top: 4px; padding: 3px 7px;
  background: #fdf4e0; border: 1px solid #f2dca6; border-radius: .25rem;
  color: #8a6a08; font-size: .74rem; font-weight: 600; line-height: 1.3;
}
.cot-ganadora-tag i { color: #f39c12; margin-right: 2px; }
.cot-ganadora-tag strong { font-weight: 800; }

/* --- Pestaña 4: bitácora --- */
.cot-badge-ctx {
  display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.cot-ctx-macro { background: #ede7f6; color: #5e35b1; border: 1px solid #d1c4e9; }
.cot-ctx-micro { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.cot-status-block { padding: 6px 8px; border-radius: 5px; font-size: .8rem; line-height: 1.3; }
.cot-status-current {
  font-weight: 700; color: #fff; padding: 3px 7px; border-radius: 3px;
  display: inline-block; font-size: .72rem;
}
.cot-notif-on {
  font-weight: 700; color: #17a2b8; background-color: #e6f7ff; padding: 4px 7px;
  border-radius: 4px; font-size: .78rem; display: inline-block; line-height: 1.35;
}
.cot-notif-on .cell-sub { font-weight: 500; }

.page-ellipsis { padding: 0 .35rem; color: #94a3b8; align-self: center; }

/* Modal de captura/edición de oferta: el ancho genérico de .modal-contenido (600px)
   deja columnas de ~130px en la fila de 3 y provoca que la etiqueta más larga
   ("N° de cotización de la aseguradora") se parta en 2 líneas y desalinee los campos. */
#modalCapturaOferta .modal-contenido { max-width: 700px; }

/* --- Responsive --- */
@media (max-width: 1200px) {
  .cot-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-banner-sep { border-left: none; padding-left: 0; }
}
@media (max-width: 760px) {
  .cot-cols-2, .cot-cols-3, .cot-cols-4 { grid-template-columns: 1fr; }
  .registro-wrapper { padding: 1rem; }
  .kpi-card { flex: 1 1 45%; }
  .cot-banner-actions { justify-content: stretch; }
  .cot-banner-actions .facturas-btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   COTIZACIONES · Layout de pestañas y scroll  (fix 27.07.2026)

   #main-content es un flex column con overflow:hidden, así que cada .tab-content
   activo tiene que participar del flex y acotar su propio alto; si no, el
   contenido crece por debajo del viewport y la página no scrollea.
   Mismo tratamiento que .reclamos-page en control_reclamos.html.
   -------------------------------------------------------------------------- */

/* Pestañas con grilla: ocupan el alto disponible y el scroll vive en la tabla.
   min-width:0 es la pieza clave: #main-content es flex-direction:column, y sin
   esto cada pestaña hereda por defecto el min-content width de su descendiente
   más ancho (la tabla, que a propósito scrollea horizontal dentro de su propio
   wrapper) empujando TODA la pestaña más allá del viewport; el overflow:hidden
   de #main-content recorta después ese sobrante sin avisar, arrastrando con él
   a elementos que ni siquiera necesitan tanto ancho (banner, toolbar). */
.cotizaciones-page #tab-lista.tab-content.active,
.cotizaciones-page #tab-bitacora.tab-content.active {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.cotizaciones-page #tab-lista .facturas-workspace,
.cotizaciones-page #tab-bitacora .facturas-workspace {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.cotizaciones-page .facturas-results-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Las KPI no deben encogerse ni empujar la tabla fuera del contenedor. */
.cotizaciones-page .kpi-container { flex: 0 0 auto; }

.cotizaciones-page .facturas-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

.cotizaciones-page .facturas-pagination { flex: 0 0 auto; }

/* El panel de filtros scrollea por dentro, no estira el workspace.
   No se toca align-self ni width: el responsive del sistema
   (@media max-width:1100px) los gobierna. */
.cotizaciones-page .facturas-filter-host,
.cotizaciones-page .kre-filter-panel.filter-sidebar {
  max-height: 100%;
  overflow: hidden;
}
.cotizaciones-page .kre-filter-panel .sidebar-body {
  overflow-y: auto;
  min-height: 0;
}

/* Pestaña Registro (formulario): scroll propio de arriba a abajo, es un
   formulario largo, no una grilla — no aplica el patrón "solo la tabla
   scrollea" de abajo. */
.cotizaciones-page #tab-registro.tab-content.active {
  display: block !important;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: calc(100vh - 150px);
  height: calc(100dvh - 150px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
  overflow-x: visible;
  margin: 0;
}
/* Mismo motivo que en el wrapper de ofertas: content-box + width:100% + padding
   desbordaba el ancho del padre. */
.cotizaciones-page #tab-registro .registro-wrapper {
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
}

/* Pestaña Aseguradoras (Ofertas): banner + toolbar de alto fijo, y la tabla
   es la ÚNICA región que scrollea (vertical y horizontal) — la pestaña en
   sí y el wrapper NUNCA deben generar su propio scroll. Mismo patrón de
   flex-column que #tab-lista/#tab-bitacora: el padre es flex y dejamos que
   la regla global .facturas-table-wrap (flex:1 1 0; height:0) haga su
   trabajo real, en vez de pelear contra ella con display:block.  */
.cotizaciones-page #tab-aseguradoras.tab-content.active {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* box-sizing:border-box es OBLIGATORIO aquí: .registro-wrapper es content-box
   (no hay un `* { box-sizing:border-box }` global en el proyecto), así que con
   width:100% el padding lateral (28.8px x2) y el borde (1px x2) se SUMABAN al
   ancho del padre — ~60px de más que #tab-aseguradoras recortaba con su
   overflow:hidden. Ese era el contenido cortado a la derecha (botón "Notas del
   caso", "PDF" y el borde de la tabla). */
.cotizaciones-page #tab-aseguradoras .cot-ofertas-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  /* .registro-wrapper trae 1.6rem (25.6px) arriba y abajo: 51px que aquí se
     le restan directamente a la grilla. Esta pestaña es una grilla, no un
     formulario largo, así que se compacta. */
  padding: 1rem 1.2rem;
}
.cotizaciones-page #tab-aseguradoras .cot-macro-banner,
.cotizaciones-page #tab-aseguradoras .cot-ofertas-toolbar {
  flex: 0 0 auto;
}
.cotizaciones-page #tab-aseguradoras .facturas-table-wrap {
  flex: 1 1 0;
  /* min-height:0 a propósito. Un piso fijo (p.ej. 300px) hacía que el contenido
     desbordara .cot-ofertas-wrapper, que es overflow:hidden, y volvía a
     recortar. El alto suficiente para ver varias filas se consigue por la vía
     correcta: anchos de columna declarados (filas más bajas) y un banner
     compacto. */
  min-height: 0;
  overflow: auto;
}

/* --------------------------------------------------------------------------
   COTIZACIONES · Badges de estatus

   La .status-badge global (crudStyles:5297/5520) impone min-width:140px,
   white-space:nowrap y overflow:visible. Con nombres largos como
   "En Mercado / Esperando Ofertas" el texto se desborda del pill.
   Este override es LOCAL a .cotizaciones-page: no altera la clase global ni
   el resto de los módulos.
   -------------------------------------------------------------------------- */
.cotizaciones-page .status-badge,
.cotizaciones-body .cot-macro-banner .status-badge {
  display: inline-flex !important;
  min-width: 0 !important;
  max-width: 100%;
  white-space: normal !important;
  text-align: left;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.2;
  padding: 4px 9px;
  overflow-wrap: anywhere;
  text-transform: none;
  font-size: 0.7rem;
}

.cotizaciones-page .status-badge i { flex: 0 0 auto; }

.cotizaciones-page .badge-days {
  white-space: nowrap;
  width: fit-content;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   COTIZACIONES · Celdas de la grilla

   .facturas-table td trae white-space:nowrap; las celdas de este módulo son
   bloques apilados de varias líneas, así que se libera el wrap por columna.
   -------------------------------------------------------------------------- */
.cotizaciones-page .cotizaciones-grid-table td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
  /* Espaciado de la maqueta (.table-k de form_base_filtro.html):
     td = 0.6rem 0.75rem, th = 0.75rem. La .facturas-table del sistema usa
     8px/8px, que aprieta el contenido — se restaura el aire de la maqueta. */
  padding: 0.6rem 0.75rem;
}
.cotizaciones-page .cotizaciones-grid-table th {
  padding: 0.75rem;
}
/* La maqueta separa cada dato del stack con 4px. */
.cotizaciones-page .cotizaciones-grid-table .cell-stack,
.cotizaciones-page .cotizaciones-grid-table .cell-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cotizaciones-page .cotizaciones-grid-table .cell-sub,
.cotizaciones-page .cotizaciones-grid-table .cell-main {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Misma botonera secuencial que Emisiones: una sola fila, pegada arriba. */
.cotizaciones-page .cotizaciones-grid-table .actions-cell {
  vertical-align: top !important;
  padding-left: 8px;
}
.cotizaciones-page .cotizaciones-grid-table .action-group {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   COTIZACIONES · Fix del recorte lateral del contenedor (27.07.2026)

   KREFilterPanel REUTILIZA el <aside> que se le pasa como host, así que el
   host y el panel terminan siendo el MISMO elemento. El layout de facturas
   neutraliza el `margin-left:-20px` del panel cerrado con un selector de
   descendiente (`.facturas-filter-host .kre-filter-panel...`), que en ese caso
   no matchea: el margen negativo sobrevive, la tarjeta de resultados arranca
   ~20px a la izquierda del área útil y el overflow:hidden del workspace le
   recorta las esquinas.

   Se replica la misma neutralización para cuando host y panel coinciden.
   -------------------------------------------------------------------------- */
.cotizaciones-page .facturas-filter-host.kre-filter-panel.filter-sidebar,
.cotizaciones-page .facturas-filter-host.kre-filter-panel.filter-sidebar.open {
  height: 100%;
  max-height: none;
  margin-left: 0;
  border: 1px solid #dbe5f0;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
  box-sizing: border-box;
}

.cotizaciones-page .facturas-filter-host.kre-filter-panel.filter-sidebar:not(.open) {
  width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Con el panel cerrado la tarjeta ocupa todo el ancho y redondea las 4 esquinas. */
.cotizaciones-page .facturas-workspace.filters-collapsed .facturas-results-card {
  border-radius: 8px;
}

/* Cinturón de seguridad: nada dentro del workspace debe exceder su ancho. */
.cotizaciones-page .facturas-workspace > * { max-width: 100%; }

/* --------------------------------------------------------------------------
   COTIZACIONES · Botones de acción de la grilla

   Paleta tomada de la maqueta control_cotizaciones.html:
     .btn-edit  #27ae60 · .btn-note  #f39c12 (warning)
     .btn-micro #17a2b8 (info)      · .btn-delete #c0392b
   El botón de oferentes es el único que la maqueta define con burbuja de
   conteo: círculo rojo en la esquina superior derecha.
   -------------------------------------------------------------------------- */
.cotizaciones-page .cotizaciones-grid-table .action-btn.btn-micro,
.cotizaciones-page .action-btn.btn-micro {
  background-color: #17a2b8 !important;
  border-color: #148c9e !important;
  color: #ffffff !important;
}
.cotizaciones-page .action-btn.btn-micro:hover:not(:disabled) {
  background-color: #138496 !important;
}
.cotizaciones-page .action-btn.btn-micro i { color: #ffffff !important; }

/* Acciones de la grilla de ofertas: cada una con su propio color.
   Antes la carta PDF no tenía background definido (salía blanca/gris, parecía
   rota) y el clip de documentos compartía .btn-soportes con el trofeo, así que
   se veían idénticos. Colores elegidos para no chocar con los ya usados en la
   fila: edit #27ae60 · note #f39c12 · delete #e74c3c. */
/* Carta de solicitud (PDF a la aseguradora). No existe en la maqueta —la
   maqueta es estatica y no genera documentos— asi que se le asigna un azul
   propio, distinto del morado del clip. */
.cotizaciones-page .action-btn.cot-btn-carta {
  background-color: #2980b9 !important;
  color: #ffffff !important;
}
.cotizaciones-page .action-btn.cot-btn-carta:hover:not(:disabled) { background-color: #216694 !important; }

/* Documentos soporte: morado #9b59b6, exactamente el de la maqueta
   (control_cotizaciones.html, boton fa-paperclip de la grilla de ofertas). */
.cotizaciones-page .action-btn.cot-btn-docs {
  background-color: #9b59b6 !important;
  color: #ffffff !important;
}
.cotizaciones-page .action-btn.cot-btn-docs:hover:not(:disabled) { background-color: #83479c !important; }

/* Declarar ganadora. La maqueta lo pinta #27ae60, pero ese verde ya lo usa
   .btn-edit (convencion de todo el sistema) y en esta grilla si existe boton
   de editar oferta, que la maqueta no tiene. Se usa dorado para que las dos
   acciones sigan siendo distinguibles, manteniendo la semantica de trofeo. */
.cotizaciones-page .action-btn.cot-btn-ganadora {
  background-color: #b8860b !important;
  color: #ffffff !important;
}
.cotizaciones-page .action-btn.cot-btn-ganadora:hover:not(:disabled) { background-color: #9a7009 !important; }

.cotizaciones-page .action-btn.cot-btn-carta i,
.cotizaciones-page .action-btn.cot-btn-docs i,
.cotizaciones-page .action-btn.cot-btn-ganadora i { color: #ffffff !important; }

/* Botones de acción deshabilitados (p.ej. eliminar en cotización cerrada):
   se mantienen visibles pero atenuados, en vez de desaparecer del grid.
   Conservan su color (atenuado) para que se siga leyendo de qué acción se
   trata; el motivo concreto va en el title/tooltip. */
.cotizaciones-page .action-btn:disabled {
  opacity: .4;
  filter: grayscale(35%);
  cursor: not-allowed;
  box-shadow: none;
}
.cotizaciones-page .action-btn:disabled:hover { opacity: .4; }

/* Burbuja de conteo — mismas medidas que la maqueta */
.cotizaciones-page .cot-btn-badge { position: relative; overflow: visible; }
.cotizaciones-page .cot-badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  line-height: 1;
  min-width: 16px;
  text-align: center;
  pointer-events: none;
}

/* El grupo de acciones no debe recortar la burbuja que sobresale del botón. */
.cotizaciones-page .cotizaciones-grid-table .actions-cell,
.cotizaciones-page .cotizaciones-grid-table .action-group { overflow: visible; }

/* ==========================================================================
   GESTOR DE DOCUMENTOS · Nombres largos y lista de carga (28.07.2026)

   Componente compartido (Documentos, Reclamos, Cotizaciones): los estilos son
   aditivos y quedan acotados a sus propias clases, no pisan nada existente.
   ========================================================================== */

/* La celda de nombre no debe empujar ni superponerse a las demás columnas.
   El acortado ya se hace en JS; esto acota además el ancho por si el nombre
   viene sin espacios (una sola palabra muy larga no se puede cortar sola). */
.doc-nombre-cell {
  max-width: 420px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Lista de archivos pendientes de subir, con botón para quitar cada uno. */
.doc-upload-list {
  list-style: none;
  margin: .5rem 0;
  padding: 0;
}
.doc-upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .35rem .5rem;
  border: 1px solid #dbe5f0;
  border-radius: 4px;
  background: #fff;
  margin-bottom: .35rem;
}
.doc-upload-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .88rem;
  color: #2c3e50;
  overflow-wrap: anywhere;
}
.doc-upload-size { color: #7f8c8d; font-size: .82rem; }

.doc-upload-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: #e74c3c;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  line-height: 1;
  transition: background .15s;
}
.doc-upload-remove:hover { background: #c0392b; }

/* ==========================================================================
   COTIZACIONES · Modal "Seleccionar cliente" (28.07.2026)

   La regla global #modalSelCliente .modal-contenido (línea ~5914) fija
   width:min(1800px,98vw) y height:90vh porque en Pólizas ese selector se usa
   a pantalla casi completa. Cotizaciones reutiliza el mismo id, así que
   heredaba ese tamaño desproporcionado para las 8 columnas que muestra.
   Se acota SOLO en esta página; la regla de Pólizas queda intacta.
   ========================================================================== */
.cotizaciones-body #modalSelCliente .modal-contenido {
  width: min(1080px, 92vw);
  height: auto;
  max-height: 82vh;
}
/* ===== Gestión de Clientes: listado y formulario moderno ===== */
.clientes-body .clientes-table {
  min-width: 1280px;
}

/* ===== Clientes: ficha integral de consulta ===== */
.clientes-body .clientes-table tbody tr[data-cliente-id] {
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.clientes-body .clientes-table tbody tr[data-cliente-id]:hover,
.clientes-body .clientes-table tbody tr[data-cliente-id]:focus {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #2f80ed;
  outline: none;
}

.clientes-body.clientes-detail-open {
  overflow: hidden !important;
}

.clientes-body.clientes-detail-open #main-content {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.cliente-detail-view {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  padding: 18px 24px;
  width: 100%;
}

.cliente-detail-card {
  background: #fff;
  border: 1px solid #d6e2ef;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(15, 45, 75, .1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 20px 22px;
  position: relative;
}

.cliente-detail-header {
  align-items: center;
  border-bottom: 1px solid #dbe5f0;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 0 34px 14px 0;
}

.cliente-detail-heading {
  align-items: center;
  display: flex;
  gap: 18px;
  min-width: 0;
}

.cliente-detail-heading > div {
  min-width: 0;
}

.cliente-detail-heading h2 {
  color: #0b2f4f;
  font-size: 23px;
  line-height: 1.2;
  margin: 2px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cliente-detail-heading p {
  color: #64748b;
  margin: 0;
}

.cliente-detail-eyebrow {
  color: #2f80ed !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cliente-detail-header .facturas-btn.neutral {
  background: #edf2f7;
  border: 1px solid #dbe5f0;
  color: #18314f;
  flex: 0 0 auto;
}

.cliente-detail-summary {
  align-items: center;
  background: linear-gradient(135deg, #f2f7ff 0%, #f9fbfe 100%);
  border: 1px solid #d5e5f7;
  border-radius: 10px;
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  margin: 14px 0 0;
  min-height: 86px;
  padding: 14px 18px;
}

.cliente-detail-avatar {
  align-items: center;
  background: #2f80ed;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(47, 128, 237, .25);
  color: #fff;
  display: flex;
  flex: 0 0 54px;
  font-size: 22px;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.cliente-detail-avatar.company {
  background: #6750c5;
  box-shadow: 0 5px 14px rgba(103, 80, 197, .25);
}

.cliente-detail-summary-main {
  min-width: 0;
}

.cliente-detail-summary-main h3 {
  color: #0b2f4f;
  font-size: 18px;
  margin: 2px 0 7px;
}

.cliente-detail-code {
  color: #5b7088;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cliente-detail-badges,
.cliente-detail-inline-meta,
.cliente-detail-contact-channels {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cliente-detail-badge {
  align-items: center;
  background: #eef2f7;
  border-radius: 999px;
  color: #52677f;
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 6px;
  line-height: 1;
  padding: 6px 9px;
}

.cliente-detail-badge.success { background: #dcfce7; color: #15803d; }
.cliente-detail-badge.danger { background: #fee2e2; color: #b91c1c; }
.cliente-detail-badge.info { background: #dbeafe; color: #1d4ed8; }
.cliente-detail-badge.neutral { background: #e9eef5; color: #52677f; }
.cliente-detail-badge i { font-size: 8px; }

.cliente-detail-tabs {
  align-items: flex-end;
  border-bottom: 2px solid #dbe5f0;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0 0;
}

.cliente-detail-tab {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #52677f !important;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  margin: 0 0 -2px;
  min-height: 42px;
  padding: 9px 13px;
  white-space: nowrap;
}

.cliente-detail-tab:hover {
  background: #f5f9ff !important;
  color: #1f6feb !important;
}

.cliente-detail-tab.active {
  border-bottom-color: #2f80ed !important;
  color: #1672e8 !important;
}

.cliente-detail-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 3px 4px;
  scrollbar-gutter: stable;
}

.cliente-detail-content::-webkit-scrollbar { width: 10px; }
.cliente-detail-content::-webkit-scrollbar-thumb {
  background: #b9c8d8;
  border: 2px solid #f4f7fb;
  border-radius: 999px;
}
.cliente-detail-content::-webkit-scrollbar-track { background: #f4f7fb; }

.cliente-detail-panel {
  min-height: 100%;
}

.cliente-detail-sections {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cliente-detail-section {
  background: #fff;
  border: 1px solid #ccdced;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(22, 66, 110, .09);
  min-width: 0;
  padding: 16px 17px;
}

.cliente-detail-section h3 {
  align-items: center;
  border-bottom: 1px solid #e3ebf4;
  color: #173b61;
  display: flex;
  font-size: 13px;
  gap: 8px;
  margin: 0 0 13px;
  padding-bottom: 10px;
}

.cliente-detail-section h3 i { color: #2f80ed; }

.cliente-detail-data-grid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cliente-detail-item {
  align-items: flex-start;
  display: flex;
  gap: 9px;
  min-width: 0;
}

.cliente-detail-item-icon {
  align-items: center;
  background: #edf5ff;
  border-radius: 7px;
  color: #2f80ed;
  display: flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.cliente-detail-item > div { min-width: 0; }
.cliente-detail-item small {
  color: #718096;
  display: block;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 3px;
}
.cliente-detail-item strong {
  color: #153653;
  display: block;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cliente-detail-empty-value {
  color: #8a9aad;
  font-style: italic;
  font-weight: 500;
}

.cliente-detail-notes {
  grid-column: 1 / -1;
}
.cliente-detail-notes p {
  color: #425b73;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

.cliente-detail-card-grid {
  display: grid;
  gap: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cliente-detail-record {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #d6e2ef;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(22, 66, 110, .07);
  display: flex;
  gap: 13px;
  min-width: 0;
  padding: 15px;
}

.cliente-detail-record.principal {
  border-color: #8bc5a5;
  box-shadow: inset 3px 0 0 #16a34a, 0 4px 14px rgba(22, 66, 110, .07);
}

.cliente-detail-record-icon {
  align-items: center;
  background: #eaf3ff;
  border-radius: 9px;
  color: #2f80ed;
  display: flex;
  flex: 0 0 40px;
  font-size: 16px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.cliente-detail-record-body { min-width: 0; width: 100%; }
.cliente-detail-record-title {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cliente-detail-record-title h3 {
  color: #153653;
  font-size: 14px;
  margin: 0;
}
.cliente-detail-record-body > strong {
  color: #0b2f4f;
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.cliente-detail-record-body > p {
  color: #64748b;
  line-height: 1.45;
  margin: 5px 0 8px;
}

.cliente-detail-inline-meta,
.cliente-detail-contact-channels {
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}
.cliente-detail-inline-meta span,
.cliente-detail-contact-channels span {
  color: #52677f;
  font-size: 11px;
  line-height: 1.4;
}
.cliente-detail-inline-meta i,
.cliente-detail-contact-channels i {
  color: #2f80ed;
  margin-right: 6px;
  text-align: center;
  width: 13px;
}

.cliente-detail-empty,
.cliente-detail-loading,
.cliente-detail-error {
  align-items: center;
  border: 1px dashed #c8d7e7;
  border-radius: 10px;
  color: #64748b;
  display: flex;
  gap: 10px;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  text-align: center;
}
.cliente-detail-empty { flex-direction: column; }
.cliente-detail-empty > i,
.cliente-detail-loading > i,
.cliente-detail-error > i {
  color: #2f80ed;
  font-size: 24px;
}
.cliente-detail-empty strong,
.cliente-detail-empty span,
.cliente-detail-error strong,
.cliente-detail-error span { display: block; }
.cliente-detail-empty span,
.cliente-detail-error span { font-size: 12px; margin-top: 3px; }
.cliente-detail-loading.panel { min-height: 220px; }

@media (max-width: 1000px) {
  .cliente-detail-sections,
  .cliente-detail-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cliente-detail-view { padding: 8px; }
  .cliente-detail-card { padding: 14px; }
  .cliente-detail-header { align-items: flex-start; padding-right: 28px; }
  .cliente-detail-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cliente-detail-heading h2 { font-size: 19px; white-space: normal; }
  .cliente-detail-summary { align-items: flex-start; }
  .cliente-detail-tabs { gap: 4px; }
  .cliente-detail-tab { padding: 9px 10px; }
  .cliente-detail-data-grid { grid-template-columns: 1fr; }
  .cliente-detail-record { padding: 12px; }
}

.clientes-body .clientes-table th:nth-child(1),
.clientes-body .clientes-table td:nth-child(1) { width: 72px; text-align: center; }
.clientes-body .clientes-table th:nth-child(2),
.clientes-body .clientes-table td:nth-child(2) { width: 220px; }
.clientes-body .clientes-table th:nth-child(3),
.clientes-body .clientes-table td:nth-child(3) { width: 78px; text-align: center; }
.clientes-body .clientes-table th:nth-child(4),
.clientes-body .clientes-table td:nth-child(4) { width: 72px; text-align: center; }
.clientes-body .clientes-table th:nth-child(5),
.clientes-body .clientes-table td:nth-child(5) { width: 170px; }
.clientes-body .clientes-table th:nth-child(6),
.clientes-body .clientes-table td:nth-child(6) { width: 185px; }
.clientes-body .clientes-table th:nth-child(7),
.clientes-body .clientes-table td:nth-child(7) { width: 245px; }
.clientes-body .clientes-table th:nth-child(8),
.clientes-body .clientes-table td:nth-child(8) { width: 90px; text-align: center; }
.clientes-body .clientes-table th:nth-child(9),
.clientes-body .clientes-table td:nth-child(9) { width: 125px; text-align: center; }

.clientes-body .clientes-table td {
  white-space: normal;
  line-height: 1.35;
  vertical-align: middle;
}

.clientes-body .clientes-table .clientes-dd-cell {
  padding-left: 8px;
  padding-right: 8px;
  text-align: center !important;
  vertical-align: middle !important;
}

.clientes-body .clientes-dd-indicator {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  min-height: 34px;
  text-align: center;
  width: 100%;
}

.clientes-body .clientes-dd-indicator .circle-badge {
  align-items: center !important;
  box-sizing: border-box;
  display: inline-flex !important;
  flex: 0 0 32px;
  font-size: 11px;
  height: 32px;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0;
  text-align: center;
  width: 32px;
}

.clientes-body .clientes-table td > small,
.clientes-body .clientes-table td > span,
.clientes-tipo-razon {
  display: block;
  margin-top: 3px;
}

.clientes-body .clientes-documento-cell strong,
.clientes-body .clientes-documento-cell span,
.clientes-body .clientes-documento-cell small,
.clientes-body .clientes-contacto-cell span,
.clientes-body .clientes-contacto-cell small {
  display: block;
}

.clientes-body .clientes-documento-cell span {
  font-weight: 700;
  margin-top: 3px;
}

.clientes-body .clientes-documento-cell small,
.clientes-body .clientes-contacto-cell small {
  margin-top: 4px;
}

.clientes-body .clientes-contacto-cell i {
  color: #5b7088;
  margin-right: 4px;
  width: 13px;
}

.clientes-body .clientes-nombre-trigger {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 4px;
}

.clientes-body .clientes-nombre-text {
  color: #0b2f4f;
  font-weight: 800;
}

.clientes-body .clientes-tipo-razon {
  color: #64748b;
  font-size: 11px;
}

.clientes-body .floating-action-button {
  margin: 0;
  max-width: none;
  opacity: 0;
  transform: translateY(-2px) scale(.98);
  transition: opacity .16s ease, transform .16s ease;
}

#tablaClientes .clientes-nombre-trigger .floating-action-button {
  bottom: 100%;
  left: 0;
  margin: 0;
  top: auto;
  transform-origin: bottom left;
}

.clientes-body .clientes-nombre-trigger:hover .floating-action-button,
.clientes-body .clientes-nombre-trigger:focus-within .floating-action-button {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.clientes-list-legend {
  align-items: center;
  border-bottom: 1px solid #dbe5f0;
  color: #52677f;
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 18px;
  min-height: 36px;
  padding: 7px 12px;
}

.clientes-body .facturas-filter-host {
  max-width: 365px;
  opacity: 1;
  overflow-x: hidden;
  transition: width .24s ease, max-width .24s ease, opacity .18s ease;
  width: 365px;
}

.clientes-body .facturas-filter-host .kre-filter-panel.filter-sidebar,
.clientes-body .facturas-filter-host .kre-filter-panel.filter-sidebar.open {
  box-sizing: border-box;
  width: 365px;
}

.clientes-body .facturas-filter-host .sidebar-body {
  box-sizing: border-box;
  padding-right: 16px;
}

.clientes-body .facturas-filter-host .form-control {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

.clientes-body .facturas-workspace.filters-collapsed .facturas-filter-host {
  max-width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  width: 0;
}

.clientes-body .facturas-workspace.filters-collapsed .facturas-filter-host .kre-filter-panel {
  border-width: 0;
}

.clientes-body #btnAgregar.facturas-btn.success {
  background: #10b981 !important;
  border: 0 !important;
  color: #fff !important;
}

.clientes-body .facturas-pagination-controls .activa {
  background: #2f80ed;
  border-color: #2f80ed;
  color: #fff;
}

.clientes-body.clientes-form-open #main-content {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

.clientes-form-view {
  box-sizing: border-box;
  min-height: 100vh;
  overflow: visible;
  padding: 22px 30px 96px;
  width: 100%;
}

#modalCliente.clientes-form-view .modal-contenidoCliente {
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15, 45, 75, .08);
  display: block !important;
  height: auto !important;
  margin: 0;
  max-height: none !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 24px;
  position: relative;
  width: 100% !important;
}

.clientes-form-header {
  align-items: flex-end;
  border-bottom: 1px solid #dbe5f0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 34px 15px 0;
}

.clientes-form-header h2 {
  color: #0b2f4f;
  margin: 0 0 4px;
}

.clientes-form-header p {
  color: #64748b;
  font-size: 12px;
  margin: 0;
}

.clientes-form-header .facturas-btn.neutral {
  background: #edf2f7;
  border: 1px solid #dbe5f0;
  color: #18314f;
}

#modalCliente.clientes-form-view #formCliente {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#modalCliente.clientes-form-view .tabs {
  background: #f8fafc;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 15px;
  padding: 5px;
  position: sticky;
  top: 8px;
  z-index: 5;
}

#modalCliente.clientes-form-view .tab-btn {
  border-radius: 6px;
  min-height: 36px;
}

#modalCliente.clientes-form-view .tab-content {
  min-height: 0 !important;
  overflow: visible !important;
  padding: 4px 0 12px !important;
}

#modalCliente.clientes-form-view .tabla-canales,
#modalCliente.clientes-form-view .tabla-direcciones,
#modalCliente.clientes-form-view .tabla-contactos,
#modalCliente.clientes-form-view .tabla-empleadores {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

#modalCliente.clientes-form-view .botones-modal.btns-derecha {
  background: #fff;
  border-top: 1px solid #dbe5f0;
  bottom: 0;
  margin: 18px -24px -24px;
  padding: 14px 24px;
  position: sticky;
  z-index: 6;
}

#modalCliente.clientes-form-view .boton-guardar,
#modalCliente.clientes-form-view #btnCancelar {
  border-radius: 7px;
  font-weight: 700;
  min-height: 38px;
  min-width: 190px;
}

@media (max-width: 1200px) {
  .clientes-form-view { padding: 14px 16px 72px; }
  .clientes-body .facturas-filter-host,
  .clientes-body .facturas-filter-host .kre-filter-panel.filter-sidebar,
  .clientes-body .facturas-filter-host .kre-filter-panel.filter-sidebar.open {
    max-width: none;
    width: 100%;
  }
  .clientes-body .facturas-workspace.filters-collapsed .facturas-filter-host { max-height: 0; width: 100%; }
}

@media (max-width: 760px) {
  .clientes-form-view { padding: 8px 8px 60px; }
  #modalCliente.clientes-form-view .modal-contenidoCliente { padding: 15px; }
  .clientes-form-header { align-items: stretch; flex-direction: column; gap: 12px; padding-right: 30px; }
  #modalCliente.clientes-form-view .tabs { position: static; }
  #modalCliente.clientes-form-view .tab-btn { flex: 1 1 145px; }
  #modalCliente.clientes-form-view .botones-modal.btns-derecha { margin: 15px -15px -15px; padding: 12px 15px; }
  #modalCliente.clientes-form-view .boton-guardar,
  #modalCliente.clientes-form-view #btnCancelar { min-width: 0; width: 100%; }
}

@media print {
  .clientes-body #sidebar,
  .clientes-body .facturas-toolbar,
  .clientes-body .facturas-filter-host,
  .clientes-body .facturas-pagination,
  .clientes-body .clientes-list-legend,
  .clientes-body .clientes-table th:last-child,
  .clientes-body .clientes-table td:last-child { display: none !important; }
}

/* ===== Clientes: experiencia de registro y edición ===== */
.clientes-body.clientes-form-open {
  overflow: hidden !important;
}

.clientes-body.clientes-form-open #main-content {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#modalCliente.clientes-form-view {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 18px 24px !important;
}

#modalCliente.clientes-form-view #formCliente::-webkit-scrollbar {
  width: 10px;
}

#modalCliente.clientes-form-view #formCliente::-webkit-scrollbar-thumb {
  background: #b9c8d8;
  border: 2px solid #f4f7fb;
  border-radius: 999px;
}

#modalCliente.clientes-form-view #formCliente::-webkit-scrollbar-track {
  background: #f4f7fb;
}

#modalCliente.clientes-form-view .clientes-form-card {
  color: #102f4f;
  display: flex !important;
  flex-direction: column;
  height: 100% !important;
  min-height: 0;
  overflow: hidden !important;
}

#modalCliente.clientes-form-view .clientes-form-header {
  align-items: center;
  background: #fff;
  flex: 0 0 auto;
  margin-bottom: 12px;
  padding-bottom: 16px;
}

#modalCliente.clientes-form-view #formCliente {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 3px;
  scrollbar-gutter: stable;
}

#modalCliente.clientes-form-view .clientes-form-header h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}

#modalCliente.clientes-form-view .clientes-form-header p {
  font-size: 12px;
  line-height: 1.5;
}

#modalCliente.clientes-form-view .tabs {
  align-items: flex-end;
  background: #fff;
  border: 0;
  border-bottom: 2px solid #dbe5f0;
  border-radius: 0;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 0 18px;
  overflow-x: auto;
  padding: 0;
  position: sticky !important;
  top: 0;
  z-index: 20;
}

#modalCliente.clientes-form-view .tab-btn {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #52677f !important;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  margin: 0 0 -2px;
  min-height: 43px;
  padding: 10px 14px;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
  white-space: nowrap;
}

#modalCliente.clientes-form-view .tab-btn i {
  font-size: 13px;
  margin-right: 7px;
}

#modalCliente.clientes-form-view .tab-btn:hover {
  background: #f5f9ff !important;
  color: #1f6feb !important;
}

#modalCliente.clientes-form-view .tab-btn.active {
  background: transparent !important;
  border-bottom-color: #2f80ed !important;
  color: #1672e8 !important;
}

#modalCliente.clientes-form-view .tab-content {
  background: transparent;
}

#modalCliente.clientes-form-view fieldset {
  background: #fff;
  border: 1px solid #cbdcf0 !important;
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(22, 66, 110, .09);
  box-sizing: border-box;
  margin: 0 0 18px;
  min-width: 0;
  padding: 18px 20px 20px;
}

#modalCliente.clientes-form-view .fieldset-general,
#modalCliente.clientes-form-view .fieldset-clasificacionCliente,
#modalCliente.clientes-form-view .fieldset-divisionCartera {
  border-color: #bfd3ea !important;
  box-shadow: 0 7px 20px rgba(22, 66, 110, .13);
}

#modalCliente.clientes-form-view fieldset legend {
  background: #fff;
  color: #173b61;
  font-size: 14px;
  font-weight: 800;
  padding: 0 9px;
}

#modalCliente.clientes-form-view .form-grid {
  align-items: end;
  column-gap: 16px;
  row-gap: 14px;
  margin-bottom: 14px;
}

#modalCliente.clientes-form-view .form-grid:last-child {
  margin-bottom: 0;
}

#modalCliente.clientes-form-view .form-grid > div,
#modalCliente.clientes-form-view .form-grid > .item {
  box-sizing: border-box;
  min-width: 0;
}

#modalCliente.clientes-form-view label:not(.checkbox-label) {
  color: #3f5872;
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 6px;
}

#modalCliente.clientes-form-view input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#modalCliente.clientes-form-view select,
#modalCliente.clientes-form-view textarea {
  appearance: auto;
  background-color: #fff;
  border: 1px solid #c9d6e4 !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 2px rgba(15, 45, 76, .04);
  box-sizing: border-box;
  color: #102f4f;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  max-width: none !important;
  min-height: 38px;
  padding: 8px 10px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  width: 100% !important;
}

#modalCliente.clientes-form-view textarea {
  min-height: 88px;
  resize: vertical;
}

#modalCliente.clientes-form-view input:not([type="checkbox"]):not([type="radio"]):focus,
#modalCliente.clientes-form-view select:focus,
#modalCliente.clientes-form-view textarea:focus {
  border-color: #2f80ed !important;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, .12) !important;
  outline: none;
}

#modalCliente.clientes-form-view input:disabled,
#modalCliente.clientes-form-view select:disabled,
#modalCliente.clientes-form-view textarea:disabled {
  background: #edf2f7;
  color: #718096;
  cursor: not-allowed;
}

#modalCliente.clientes-form-view input[type="checkbox"],
#modalCliente.clientes-form-view input[type="radio"] {
  accent-color: #2f80ed;
  height: 17px;
  margin: 0;
  width: 17px;
}

#modalCliente.clientes-form-view .checkbox-label,
#modalCliente.clientes-form-view .radio-options label {
  align-items: center;
  color: #314a63;
  display: inline-flex !important;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  margin: 0;
}

#modalCliente.clientes-form-view button:not(.tab-btn):not(.modal-close):not(.facturas-btn) {
  border-radius: 7px;
  min-height: 34px;
}

#modalCliente.clientes-form-view .tabla-canales,
#modalCliente.clientes-form-view .tabla-direcciones,
#modalCliente.clientes-form-view .tabla-contactos,
#modalCliente.clientes-form-view .tabla-empleadores {
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  box-sizing: border-box;
  display: table;
  min-width: 980px;
  overflow: visible;
  width: 100%;
}

#modalCliente.clientes-form-view .clientes-subtable-wrap {
  border-radius: 8px;
  margin-top: 12px;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

#modalCliente.clientes-form-view .tab-content > table {
  margin-top: 12px;
}

#modalCliente.clientes-form-view .botones-modal.btns-derecha {
  align-items: center;
  box-shadow: 0 -5px 16px rgba(15, 45, 76, .07);
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  left: 0;
  flex: 0 0 auto;
  margin: 10px 0 0;
  max-width: none !important;
  padding: 10px 4px 3px;
  position: relative !important;
  right: 0;
  bottom: auto;
  width: auto !important;
  z-index: 25;
}

#modalCliente.clientes-form-view .botones-modal.btns-derecha #btnGuardar,
#modalCliente.clientes-form-view .botones-modal.btns-derecha #btnCancelar {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 36px;
  min-width: 104px !important;
  padding: 8px 17px;
  width: auto !important;
}

#modalCliente.clientes-form-view #btnGuardar:disabled {
  cursor: wait;
  opacity: .65;
}

@media (max-width: 1100px) {
  #modalCliente.clientes-form-view .form-grid.cinco-columnas,
  #modalCliente.clientes-form-view .form-grid.seis-columnas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #modalCliente.clientes-form-view {
    padding: 8px !important;
  }
  #modalCliente.clientes-form-view .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  #modalCliente.clientes-form-view .tab-btn {
    flex: 0 0 auto;
    min-width: max-content;
  }
  #modalCliente.clientes-form-view fieldset {
    padding: 15px;
  }
  #modalCliente.clientes-form-view .form-grid,
  #modalCliente.clientes-form-view .form-grid.dos-columnas,
  #modalCliente.clientes-form-view .form-grid.tres-columnas,
  #modalCliente.clientes-form-view .form-grid.cuatro-columnas,
  #modalCliente.clientes-form-view .form-grid.cinco-columnas,
  #modalCliente.clientes-form-view .form-grid.seis-columnas {
    grid-template-columns: 1fr;
  }
  #modalCliente.clientes-form-view .botones-modal.btns-derecha {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #modalCliente.clientes-form-view .botones-modal.btns-derecha #btnGuardar,
  #modalCliente.clientes-form-view .botones-modal.btns-derecha #btnCancelar {
    min-width: 96px !important;
    width: auto !important;
  }
}
.kr-required-marker {
  color: inherit;
  display: inline-block;
  font-weight: 800;
  line-height: 1;
  margin-left: 0.12rem;
}

/* =========================================================
   Pólizas: acciones uniformes y vista de registro / edición
   ========================================================= */
.polizas-body #tablaListadoPolizas .acciones-grid {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  grid-auto-rows: 30px;
  gap: 6px;
  justify-content: center;
  margin: 0 auto;
  max-width: 174px;
  width: 100%;
}

.polizas-body #tablaListadoPolizas td.actions {
  box-sizing: border-box;
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  vertical-align: middle;
}

.polizas-body #tablaListadoPolizas .acciones-grid button,
.polizas-body #tablaListadoPolizas .accion-placeholder {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 30px;
  justify-content: center;
  margin: 0;
  min-width: 30px;
  padding: 0;
  width: 30px;
}

.polizas-body #tablaListadoPolizas .accion-placeholder {
  visibility: hidden;
}

.polizas-form-view {
  box-sizing: border-box;
  min-height: 100vh;
  overflow: visible;
  padding: 22px 30px;
  width: 100%;
}

#modalPoliza.polizas-form-view .polizas-form-card {
  background: #fff;
  border: 1px solid #d9e5f1;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(15, 45, 75, 0.09);
  box-sizing: border-box;
  display: block;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: visible;
  padding: 24px;
  position: relative;
  width: 100%;
}

.polizas-form-header {
  align-items: center;
  border-bottom: 1px solid #dbe5f0;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.polizas-form-header h2 {
  color: #0b2f4f;
  font-size: 1.45rem;
  margin: 0 0 4px;
}

.polizas-form-header p {
  color: #64748b;
  font-size: 0.82rem;
  margin: 0;
}

.polizas-back-btn,
.polizas-cancel-btn {
  align-items: center;
  background: #edf2f7;
  border: 1px solid #d3dfeb;
  border-radius: 7px;
  color: #18314f;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 7px;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  white-space: nowrap;
}

.polizas-back-btn:hover,
.polizas-cancel-btn:hover {
  background: #dfe8f1;
  border-color: #bdcddd;
}

#modalPoliza.polizas-form-view .fieldset-general,
#modalPoliza.polizas-form-view .fieldset-clasificacionCliente,
#modalPoliza.polizas-form-view .fieldset-divisionCartera {
  background: #f8fbff;
  border: 1px solid #b9d3f2;
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(36, 92, 145, 0.08);
  margin-bottom: 20px;
  padding: 18px;
}

#modalPoliza.polizas-form-view fieldset legend {
  color: #0b72d9;
  font-size: 0.94rem;
  font-weight: 750;
  padding: 0 8px;
}

#modalPoliza.polizas-form-view label {
  color: #18314f;
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  margin-bottom: 6px;
}

#modalPoliza.polizas-form-view input:not([type="checkbox"]):not([type="radio"]),
#modalPoliza.polizas-form-view select,
#modalPoliza.polizas-form-view textarea {
  background: #fff;
  border: 1px solid #c7d5e3;
  border-radius: 7px;
  box-sizing: border-box;
  color: #102f50;
  font: inherit;
  min-height: 39px;
  padding: 8px 10px;
  width: 100%;
}

#modalPoliza.polizas-form-view input:focus,
#modalPoliza.polizas-form-view select:focus,
#modalPoliza.polizas-form-view textarea:focus {
  border-color: #2f80ed;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.13);
  outline: none;
}

#modalPoliza.polizas-form-view .form-row.cols-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#modalPoliza.polizas-form-view .form-row.cols-7 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#modalPoliza.polizas-form-view .policy-dates-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#modalPoliza.polizas-form-view .policy-money-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#modalPoliza.polizas-form-view .policy-options-row {
  align-items: end;
  display: flex;
}

#modalPoliza.polizas-form-view .policy-options-row > div {
  flex: 1 1 0;
  min-width: 0;
}

#modalPoliza.polizas-form-view .form-row.cols-custom-split {
  grid-template-columns: minmax(220px, 0.35fr) minmax(320px, 1fr);
}

#modalPoliza.polizas-form-view .form-row .checkbox-cell {
  align-items: center;
  background: #eef5fd;
  border: 1px solid #d7e6f5;
  border-radius: 7px;
  flex-direction: row;
  justify-content: flex-start;
  min-height: 39px;
  padding: 0 11px;
}

#modalPoliza.polizas-form-view .form-row .checkbox-cell label {
  margin: 0;
}

#modalPoliza.polizas-form-view .side-by-side-container {
  align-items: stretch;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#modalPoliza.polizas-form-view .grid-2-cols {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#modalPoliza.polizas-form-view .polizas-form-actions {
  align-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid #dbe5f0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 2px 0 0;
  padding: 16px 0 0;
  position: static;
  width: 100%;
}

#modalPoliza.polizas-form-view .polizas-form-actions button {
  border-radius: 7px;
  min-height: 36px;
  min-width: 0;
  padding: 7px 13px;
  width: auto;
}

#modalPoliza.polizas-form-view #btnGuardarPoliza {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  justify-content: center;
}

#modalPoliza.polizas-form-view #btnGuardarPoliza.is-loading {
  cursor: wait;
  opacity: 0.72;
}

.polizas-body.polizas-form-open {
  overflow-y: auto;
}

.polizas-body.polizas-form-open #main-content {
  height: auto;
  max-height: none;
  min-height: 100vh;
  overflow: visible;
}

@media (max-width: 1180px) {
  .polizas-form-view {
    padding: 14px 16px;
  }

  #modalPoliza.polizas-form-view .form-row.cols-6,
  #modalPoliza.polizas-form-view .form-row.cols-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .polizas-form-view {
    padding: 8px;
  }

  #modalPoliza.polizas-form-view .polizas-form-card {
    padding: 15px;
  }

  .polizas-form-header {
    align-items: stretch;
    flex-direction: column;
  }

  .polizas-back-btn {
    width: 100%;
  }

  #modalPoliza.polizas-form-view .form-row.cols-6,
  #modalPoliza.polizas-form-view .form-row.cols-7,
  #modalPoliza.polizas-form-view .policy-dates-row,
  #modalPoliza.polizas-form-view .policy-money-row,
  #modalPoliza.polizas-form-view .policy-options-row,
  #modalPoliza.polizas-form-view .form-row.cols-custom-split,
  #modalPoliza.polizas-form-view .side-by-side-container,
  #modalPoliza.polizas-form-view .grid-2-cols {
    grid-template-columns: 1fr;
  }

  #modalPoliza.polizas-form-view .polizas-form-actions {
    margin-top: 2px;
    padding: 14px 0 0;
  }

  #modalPoliza.polizas-form-view .polizas-form-actions button {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
  }

  #modalPoliza.polizas-form-view .policy-options-row {
    align-items: stretch;
    flex-direction: column;
  }

  #modalPoliza.polizas-form-view .policy-options-row > div {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* =========================================================
   Pólizas: vistas internas de facturación y acuerdos de pago
   ========================================================= */
.polizas-operation-view {
  box-sizing: border-box;
  min-height: 100vh;
  overflow: visible;
  padding: 22px 30px;
  width: 100%;
}

.polizas-operation-card {
  background: #fff;
  border: 1px solid #d9e5f1;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(15, 45, 75, 0.09);
  box-sizing: border-box;
  padding: 24px;
  width: 100%;
}

.polizas-operation-header {
  align-items: center;
  border-bottom: 1px solid #dbe5f0;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.polizas-operation-header h2 {
  align-items: center;
  color: #0b2f4f;
  display: flex;
  font-size: 1.45rem;
  gap: 9px;
  margin: 0 0 4px;
}

.polizas-operation-header h2 i {
  color: #2478e8;
}

.polizas-operation-header p {
  color: #64748b;
  font-size: 0.82rem;
  margin: 0;
}

.polizas-operation-view .factura-client-info {
  background: #f0f6ff;
  border: 1px solid #cfe0f4;
  border-left: 4px solid #2f80ed;
  border-radius: 8px;
  box-sizing: border-box;
  color: #18314f;
  margin: 0 0 14px;
  padding: 12px 14px;
  width: 100%;
}

.polizas-operation-view .factura-policy-preview {
  background: #fbfdff;
  border: 1px solid #dbe5f0;
  border-radius: 9px;
  box-sizing: border-box;
  margin-bottom: 16px !important;
  overflow: hidden;
  padding: 12px;
  width: 100%;
}

.polizas-operation-view .form-factura {
  background: transparent;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
}

#modalFactura.polizas-operation-view .form-factura {
  background: #f8fbff;
  border: 1px solid #b9d3f2;
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(36, 92, 145, 0.08);
  padding: 18px;
}

.polizas-operation-view fieldset {
  background: #f8fbff;
  border: 1px solid #b9d3f2;
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(36, 92, 145, 0.07);
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 18px;
  width: 100%;
}

.polizas-operation-view fieldset legend {
  color: #0b72d9;
  font-size: 0.94rem;
  font-weight: 750;
  padding: 0 8px;
}

.polizas-operation-view .fact-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  width: 100%;
}

.polizas-operation-view .fact-row:last-child {
  margin-bottom: 0;
}

.polizas-operation-view .fact-row.cols-1 {
  grid-template-columns: minmax(0, 1fr);
}

.polizas-operation-view .fact-row.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.polizas-operation-view .fact-row.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.polizas-operation-view .fact-row.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.polizas-operation-view .fact-row.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.polizas-operation-view .form-group {
  min-width: 0;
}

.polizas-operation-view .form-group > label {
  color: #18314f;
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  margin: 0 0 6px;
}

.polizas-operation-view input:not([type="checkbox"]):not([type="radio"]),
.polizas-operation-view select,
.polizas-operation-view textarea {
  background: #fff;
  border: 1px solid #c7d5e3;
  border-radius: 7px;
  box-sizing: border-box;
  color: #102f50;
  font: inherit;
  min-height: 39px;
  padding: 8px 10px;
  width: 100%;
}

.polizas-operation-view textarea {
  min-height: 72px;
  resize: vertical;
}

.polizas-operation-view input:focus,
.polizas-operation-view select:focus,
.polizas-operation-view textarea:focus {
  border-color: #2f80ed;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.13);
  outline: none;
}

.polizas-operation-view input[readonly],
.polizas-operation-view input:disabled,
.polizas-operation-view select:disabled {
  background: #edf2f7;
  color: #607086;
}

.polizas-operation-view .checkbox-cell {
  align-items: center;
  background: #eef5fd;
  border: 1px solid #d7e6f5;
  border-radius: 7px;
  display: flex;
  gap: 8px;
  min-height: 39px;
  padding: 0 11px;
}

.polizas-operation-view .checkbox-cell label {
  margin: 0;
}

#modalAcuerdo.polizas-operation-view .acuerdos-header {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 0.8fr) minmax(480px, 1.2fr);
}

#modalAcuerdo.polizas-operation-view #divisionCartera {
  background: #fff;
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 12px;
}

#modalAcuerdo.polizas-operation-view .datos-cliente {
  border-collapse: collapse;
  width: 100%;
}

#modalAcuerdo.polizas-operation-view .datos-cliente th,
#modalAcuerdo.polizas-operation-view .datos-cliente td {
  border: 0;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

#modalAcuerdo.polizas-operation-view .datos-cliente th {
  color: #526987;
  white-space: nowrap;
}

.polizas-operation-view .panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.polizas-operation-view .tabla-wrapper {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.polizas-operation-view .data-table {
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

.polizas-operation-view .data-table th {
  background: #347ff0;
  color: #fff;
  font-size: 0.78rem;
  padding: 10px;
  white-space: nowrap;
}

.polizas-operation-view .data-table td {
  border-bottom: 1px solid #e1e8f0;
  color: #18314f;
  padding: 9px 10px;
  vertical-align: middle;
}

.polizas-operation-view .data-table tbody tr:nth-child(even) {
  background: #f6f9fd;
}

.polizas-operation-view .polizas-operation-actions {
  align-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid #dbe5f0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 2px 0 0;
  padding: 16px 0 0;
  position: static;
  width: 100%;
}

.polizas-operation-view .polizas-operation-actions button {
  align-items: center;
  border-radius: 7px;
  display: inline-flex;
  gap: 7px;
  justify-content: center;
  min-height: 36px;
  min-width: 0;
  padding: 7px 13px;
  width: auto;
}

.polizas-body.polizas-operation-open,
.polizas-body.polizas-operation-open #main-content {
  height: auto;
  max-height: none;
  min-height: 100vh;
  overflow: visible;
}

.polizas-body.polizas-operation-open {
  overflow-x: hidden;
}

.polizas-body.polizas-operation-open #main-content {
  box-sizing: border-box;
  min-width: 0;
  width: calc(100% - 250px);
}

.polizas-body.polizas-operation-open #main-content.expanded {
  width: calc(100% - 90px);
}

@media (max-width: 1250px) {
  .polizas-operation-view .fact-row.cols-5,
  .polizas-operation-view .fact-row.cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #modalAcuerdo.polizas-operation-view .acuerdos-header {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .polizas-body.polizas-operation-open #main-content,
  .polizas-body.polizas-operation-open #main-content.expanded {
    width: 100%;
  }

  .polizas-operation-view {
    padding: 14px 16px;
  }

  .polizas-operation-view .fact-row.cols-4,
  .polizas-operation-view .fact-row.cols-5,
  .polizas-operation-view .fact-row.cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .polizas-operation-view {
    padding: 8px;
  }

  .polizas-operation-card {
    padding: 15px;
  }

  .polizas-operation-header {
    align-items: stretch;
    flex-direction: column;
  }

  .polizas-operation-header .polizas-back-btn {
    width: 100%;
  }

  .polizas-operation-view .fact-row.cols-2,
  .polizas-operation-view .fact-row.cols-4,
  .polizas-operation-view .fact-row.cols-5,
  .polizas-operation-view .fact-row.cols-6 {
    grid-template-columns: 1fr;
  }

  .polizas-operation-view .polizas-operation-actions {
    flex-wrap: wrap;
  }
}

/* Cobros y créditos comparten la misma experiencia de vista interna. */
#modalCobro.polizas-operation-view .polizas-operation-card,
#modalCredito.polizas-operation-view .polizas-operation-card {
  max-width: 100%;
  overflow: visible;
}

#modalCobro.polizas-operation-view #cobroFormPane,
#modalCredito.polizas-operation-view #creditoFormPane {
  min-width: 0;
  width: 100%;
}

#modalCobro.polizas-operation-view fieldset,
#modalCredito.polizas-operation-view fieldset {
  border-color: #b9d3f2;
  margin: 0 0 18px;
  overflow: visible;
  padding: 18px;
}

#modalCobro.polizas-operation-view .tabla-wrapper,
#modalCredito.polizas-operation-view .tabla-wrapper,
#modalCredito.polizas-operation-view .distribucion-col-1 .tabla-wrapper,
#modalCredito.polizas-operation-view .distribucion-col-2 .tabla-wrapper {
  margin: 0;
  overflow-x: auto;
  padding: 0;
}

#modalCobro.polizas-operation-view fieldset > .tabla-wrapper .data-table,
#modalCredito.polizas-operation-view fieldset > .tabla-wrapper .data-table {
  min-width: 1180px;
  table-layout: auto;
}

#modalCobro.polizas-operation-view .distribucion-wrapper,
#modalCredito.polizas-operation-view .distribucion-wrapper {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.65fr) minmax(330px, 0.85fr);
  overflow: visible;
  width: 100%;
}

#modalCobro.polizas-operation-view .distribucion-col-1,
#modalCobro.polizas-operation-view .distribucion-col-2,
#modalCredito.polizas-operation-view .distribucion-col-1,
#modalCredito.polizas-operation-view .distribucion-col-2 {
  min-width: 0;
  overflow: visible;
  width: auto;
}

#modalCobro.polizas-operation-view .distribucion-wrapper .data-table,
#modalCredito.polizas-operation-view .distribucion-wrapper .data-table {
  min-width: 720px;
}

#modalCobro.polizas-operation-view .distribucion-col-2 .data-table,
#modalCredito.polizas-operation-view .distribucion-col-2 .data-table {
  min-width: 480px;
}

#modalCobro.polizas-operation-view .total-box,
#modalCredito.polizas-operation-view .total-box {
  background: #eef5fd;
  border: 1px solid #d3e3f4;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 0 9px;
  padding: 9px 12px;
}

#modalCobro.polizas-operation-view .polizas-operation-actions,
#modalCredito.polizas-operation-view .polizas-operation-actions {
  margin-top: 2px;
  padding: 16px 0 0;
}

@media (max-width: 1400px) {
  #modalCobro.polizas-operation-view .distribucion-wrapper,
  #modalCredito.polizas-operation-view .distribucion-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  #modalCredito.polizas-operation-view .fact-row.cols-3 {
    grid-template-columns: 1fr;
  }

  #modalCredito.polizas-operation-view .fact-row.cols-3 .form-group:last-child {
    grid-column: auto;
  }
}

/* Créditos: el preview y los bloques del formulario comparten el mismo eje. */
#modalCredito.polizas-operation-view #creditoFormPane,
#modalCredito.polizas-operation-view #creditoPolicyPreviewForm,
#modalCredito.polizas-operation-view #formCredito,
#modalCredito.polizas-operation-view #formCredito > fieldset {
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

#modalCredito.polizas-operation-view #creditoPolicyPreviewForm {
  display: block;
}

/* ==========================================================================
   MÓDULO EMISIONES (27.08.2026)

   Bloque autónomo: NO depende de las reglas de `.cotizaciones-page`, para que
   un cambio en aquel módulo no arrastre a este. Solo se definen las clases que
   no existían de forma global; las que ya están en el archivo se reutilizan tal
   cual (.status-badge, .badge-days, .badge-tipo-relacion, .kpi-card, .table-k,
   .facturas-*, .action-btn, .page-btn, .toast, .modal, .form-control).
   ========================================================================== */

/* --- Celdas apiladas de la grilla enriquecida --- */
.emisiones-page .cell-stack { display: flex; flex-direction: column; line-height: 1.25; gap: 2px; }
.emisiones-page .cell-main  { font-weight: 600; color: #2c3e50; font-size: 0.9rem; }
.emisiones-page .cell-sub   { font-size: 0.76rem; color: #7f8c8d; line-height: 1.25; }
.emisiones-body .cell-sub   { font-size: 0.78rem; color: #7f8c8d; line-height: 1.3; }

.emisiones-page .note-text-sm {
  background-color: #fff3cd; padding: 4px 6px; border-radius: 4px; font-size: 0.74rem;
  color: #856404; margin-top: 3px; border-left: 3px solid #ffeeba; line-height: 1.25;
  white-space: normal; word-break: break-word;
}

.emisiones-page .user-avatar-sm,
.emisiones-body .user-avatar-sm {
  width: 20px; height: 20px; background: #e1f5fe; color: #0277bd; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; margin-right: 5px; font-weight: 700; flex-shrink: 0;
}

/* Cronología en dos columnas dentro de la celda */
.emisiones-page .emi-chrono { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }

/* Días en proceso vencidos: el SLA de la guía se ve de un vistazo */
.emisiones-page .badge-days.emi-days-vencida {
  background-color: #fdecea; color: #c0392b; border-color: #f5c6cb;
}

/* --- Tarjetas KPI: colores que no existían en el sistema --- */
.bg-purple { background-color: #9c27b0 !important; }
.bg-cyan   { background-color: #00bcd4 !important; }

.emi-kpi-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: .5rem; margin-top: 3px;
}
.emi-kpi-tag {
  font-size: .68rem; opacity: .92; font-weight: 600; text-align: right;
  line-height: 1.2; max-width: 62%;
}
.emi-kpi-tag.emi-kpi-alerta {
  background-color: rgba(192, 57, 43, .85); padding: 2px 6px; border-radius: 4px;
  font-weight: 700; opacity: 1;
}

/* --- Badges propios de la grilla --- */
.emi-badge-dd {
  font-size: .63rem; padding: 2px 7px; border-radius: 3px; width: fit-content;
  margin-top: 3px; font-weight: 700; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 4px;
}
.emi-dd-ok   { background-color: #e8f8ef; color: #1e8449; border: 1px solid #b7e4c7; }
.emi-dd-bad  { background-color: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }
.emi-dd-pend { background-color: #fff3cd; color: #8a6d3b; border: 1px solid #ffeeba; }

.emi-origen-cot { font-size: .85rem; color: #2c3e50; }
.emi-origen-cot i { color: #b0bec5; margin-right: 3px; }
.emi-origen-dir { font-size: .85rem; color: #8e24aa; }
.emi-origen-dir i { margin-right: 3px; }

.emi-tag-poliza {
  font-size: .72rem; background: #eaf4ff; color: #1565c0; border: 1px solid #bbdefb;
  border-radius: 4px; padding: 2px 6px; width: fit-content; margin-top: 3px;
}
.emi-tag-poliza i { margin-right: 3px; }

.emisiones-page .emi-fila-emitida > td {
  background-color: #f4fbf6 !important;
  box-shadow: inset 3px 0 0 #27ae60;
}

.emi-badge-ctx {
  font-size: .68rem; padding: 2px 8px; border-radius: 10px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px; width: fit-content;
}
.emi-ctx-directa    { background: #f3e5f5; color: #6a1b9a; border: 1px solid #e1bee7; }
.emi-ctx-cotizacion { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }

/* --- Botones de acción propios del módulo --- */
.emisiones-page .action-btn.emi-btn-dd     { background-color: #9c27b0; }
.emisiones-page .action-btn.btn-micro      { background-color: #17a2b8; }
.emisiones-page .action-btn.btn-print      { background-color: #c0392b; }
.emisiones-page .action-btn.emi-btn-editar { background-color: #546e7a; }
.emisiones-page .action-btn.emi-btn-docs   { background-color: #0277bd; }
.emisiones-page .action-btn i { color: #fff !important; }
/* Las acciones se leen como una botonera secuencial: una sola fila, alineada
   arriba junto al número de caso. Con `flex-wrap: wrap` el último botón caía a
   un segundo renglón descolgado y rompía la secuencia; el ancho de la columna
   se dimensionó para el peor caso (7 botones) para que nunca vuelva a envolver. */
.emisiones-page .emisiones-grid-table .actions-cell {
  vertical-align: top !important;   /* la regla global .actions-cell usa !important */
  padding-left: 8px;                /* simétrico: si no, la botonera queda descentrada */
}
.emisiones-page .emisiones-grid-table .action-group {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}
.emisiones-page .emisiones-grid-table .actions-cell,
.emisiones-page .emisiones-grid-table .action-group { overflow: visible; }

/* --- Encabezado de las pestañas de formulario --- */
.emi-registro-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid #eef2f7; padding-bottom: .9rem; margin-bottom: 1.2rem; gap: 1rem;
}
.emi-registro-head h2 { color: #2c3e50; margin: 0; font-size: 1.25rem; }

/* --- Banner de origen (Data Porting vs Directa) --- */
.emi-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  border-radius: .4rem; padding: 1rem 1.1rem; margin-bottom: 1.1rem;
  background-color: #f8f9fa; border: 1px solid #dbe5f0; border-left: 5px solid #347df5;
  flex-wrap: wrap;
}
.emi-banner-cot { background-color: #f8f9fa; border-left-color: #347df5; }
.emi-banner-dir { background-color: #f9f3fb; border-left-color: #9c27b0; }
.emi-banner-label {
  font-size: .78rem; color: #7f8c8d; text-transform: uppercase;
  font-weight: 700; letter-spacing: .4px;
}
.emi-banner-monto {
  font-family: Consolas, "Courier New", monospace; font-size: 1.4rem;
  font-weight: 800; color: #2c3e50;
}
.emi-banner:empty { display: none; }

/* --- Alertas de bloque --- */
.emi-alert {
  display: flex; align-items: flex-start; gap: .8rem;
  border-radius: .4rem; padding: .85rem 1rem; margin-bottom: 1.1rem;
  font-size: .9rem; line-height: 1.4; border: 1px solid transparent;
}
.emi-alert i { font-size: 1.3rem; margin-top: 1px; flex-shrink: 0; }
.emi-alert-ok     { background-color: #e8f8ef; border-color: #b7e4c7; color: #1e8449; }
.emi-alert-info   { background-color: #e3f2fd; border-color: #bbdefb; color: #0d47a1; }
.emi-alert-danger { background-color: #fdecea; border-color: #f5c6cb; color: #a5281c; }
.emi-alert:empty  { display: none; }

/* --- Rejillas del formulario --- */
.emi-form-grid { display: grid; gap: .9rem 1.1rem; margin-bottom: .9rem; }
.emi-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emi-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emi-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Todas las filas de una misma tarjeta comparten la retícula de 4 columnas: el
   campo que necesita más aire (email, nombre del prospecto, adjunto) ocupa dos
   tramos en lugar de romper el ritmo con una rejilla de 3. Así los bordes de
   columna coinciden de fila en fila. */
.emi-form-grid .form-group.emi-span-2 { grid-column: span 2; }
.emi-form-grid .form-group { display: flex; flex-direction: column; min-width: 0; }
.emi-form-grid .form-group > label { margin-bottom: .3rem; font-size: .85rem; font-weight: 600; color: #445; }
/* Los controles nativos traen margin-bottom del sistema; .emi-input-money no lo
   hereda (no es un input) y quedaria desalineado respecto a sus vecinos. */
.emi-form-grid .form-group > input,
.emi-form-grid .form-group > select,
.emi-form-grid .form-group > textarea { margin-bottom: 0; }

.emi-label-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.emi-label-row label { margin: 0 !important; }
.emi-btn-mini { padding: .3rem .7rem !important; font-size: .74rem !important; }

.emi-required { color: #e74c3c; margin-left: 2px; }
.emi-hint-inline { font-size: .72rem; color: #8a97a6; margin-top: .25rem; display: block; }
.emi-hint {
  font-size: .82rem; color: #55606d; background: #f4f8fd; border-left: 3px solid #347df5;
  padding: .5rem .7rem; border-radius: 0 .3rem .3rem 0; margin-bottom: .9rem;
}

.emi-check-row {
  display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: #445;
  background: #f4f8fd; border: 1px solid #dbe7f5; border-radius: .35rem;
  padding: .55rem .7rem; margin-bottom: .9rem; cursor: pointer;
}
.emi-check-row:hover { background: #eaf2fc; border-color: #c7d9ef; }
.emi-check-row input[type="checkbox"] { width: auto; height: 15px; margin: 0; flex-shrink: 0; }
.kre-filter-panel .emi-check-row { margin-bottom: .5rem; font-size: .82rem; }

.emi-input-money {
  display: flex; align-items: stretch; border: 1px solid #ccd6e0;
  border-radius: .25rem; overflow: hidden; background: #fff; height: 38px;
}
.emi-money-prefix {
  background-color: #f0f3f7; padding: 0 .6rem; color: #55606d; font-weight: 700;
  border-right: 1px solid #ccd6e0; display: flex; align-items: center; font-size: .82rem;
}
.emi-input-money .form-control {
  border: none !important; border-radius: 0 !important; margin-bottom: 0 !important;
  height: 100%; box-shadow: none !important;
}

.emi-readonly {
  background-color: #f0f0f0 !important; color: #555 !important;
  cursor: not-allowed; font-weight: 600;
}

.emi-form-actions {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding-top: 1rem; border-top: 1px solid #eef2f7; margin-top: 1rem;
}

.emi-empty { text-align: center; padding: 18px; color: #7f8c8d; font-size: .87rem; }

/* El acento va como sombra interior y no como borde: un `border-left: 5px`
   sobre el `border: 1px` de .session-container desplazaba este bloque 4px a la
   derecha y sus columnas no cuadraban con las de las tarjetas vecinas. */
.emi-bloque-destino { box-shadow: inset 5px 0 0 0 #f39c12; background: #fbfbfa; }

.emi-inyeccion-aviso {
  display: flex; align-items: center; gap: .7rem; margin-top: 1rem;
  background: #fff8e1; border: 1px solid #ffe0a3; border-radius: .4rem;
  padding: .8rem 1rem; color: #7a5a12; font-size: .88rem; line-height: 1.4;
}
.emi-inyeccion-aviso i { color: #f39c12; font-size: 1.25rem; flex-shrink: 0; }
/* El texto va en un unico <div>: suelto dentro de un contenedor flex cada
   <strong> se convertia en un item independiente y el parrafo se partia. */
.emi-inyeccion-aviso > div {
  flex: 1 1 auto;
  min-width: 0;
  text-align: justify;
  hyphens: auto;
}

/* --------------------------------------------------------------------------
   EMISIONES · Condiciones particulares del riesgo

   `.table-k td:first-child` va centrado y sin padding porque en el resto del
   sistema esa primera columna es un checkbox de seleccion. En las dos tablas de
   coberturas de Emisiones la primera columna es el NOMBRE del riesgo, asi que
   ahi ese centrado lo descoloca: se devuelve a la izquierda con su padding.
   -------------------------------------------------------------------------- */
#tbl-coberturas-directa th:first-child,
#tbl-coberturas-directa td:first-child,
#tbl-coberturas-digitacion th:first-child,
#tbl-coberturas-digitacion td:first-child {
  text-align: left;
  padding: 12px 15px;
  vertical-align: middle;
}

/* --- Bitácora --- */
.emi-status-block { padding: 6px 8px; border-radius: 5px; font-size: .8rem; line-height: 1.3; }
.emi-status-current {
  font-weight: 700; color: #fff; padding: 3px 7px; border-radius: 3px;
  display: inline-block; font-size: .72rem;
}
.emi-notif-on {
  font-weight: 700; color: #17a2b8; background-color: #e6f7ff; padding: 4px 7px;
  border-radius: 4px; font-size: .78rem; display: inline-block; line-height: 1.35;
}
.emi-notif-on .cell-sub { font-weight: 500; }

/* Modales del módulo: el ancho generico (600px) parte las etiquetas largas
   ("Referencia de tramite (aseguradora)") en dos lineas y desalinea la fila. */
#modalCumplimiento .modal-contenido,
#modalRespuesta .modal-contenido { max-width: 720px; }

/* --------------------------------------------------------------------------
   EMISIONES · Layout de pestañas y scroll

   #main-content es un flex column con overflow:hidden, así que cada
   .tab-content activo tiene que participar del flex y acotar su propio alto;
   si no, el contenido crece por debajo del viewport y la página no scrollea.
   -------------------------------------------------------------------------- */

/* Pestañas con grilla: ocupan el alto disponible y el scroll vive en la tabla.
   min-width:0 es la pieza clave: sin él la pestaña hereda el min-content width
   de la tabla (que scrollea horizontal dentro de su wrapper) y se sale del
   viewport, quedando recortada por el overflow:hidden del contenedor. */
.emisiones-page #tab-lista.tab-content.active,
.emisiones-page #tab-bitacora.tab-content.active {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.emisiones-page #tab-lista .facturas-workspace,
.emisiones-page #tab-bitacora .facturas-workspace {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.emisiones-page .facturas-results-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Las KPI no deben encogerse ni empujar la tabla fuera del contenedor. */
.emisiones-page .kpi-container { flex: 0 0 auto; }

.emisiones-page .facturas-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

.emisiones-page .facturas-pagination { flex: 0 0 auto; }

/* El panel de filtros scrollea por dentro, no estira el workspace. */
.emisiones-page .facturas-filter-host,
.emisiones-page .kre-filter-panel.filter-sidebar {
  max-height: 100%;
  overflow: hidden;
}
.emisiones-page .kre-filter-panel .sidebar-body {
  overflow-y: auto;
  min-height: 0;
}

/* KREFilterPanel reutiliza el <aside> host, así que host y panel terminan
   siendo el MISMO elemento y el selector de descendiente del layout de
   facturas no matchea: el margin-left negativo del panel cerrado sobrevive y
   recorta la tarjeta de resultados. Se replica la neutralización. */
.emisiones-page .facturas-filter-host.kre-filter-panel.filter-sidebar,
.emisiones-page .facturas-filter-host.kre-filter-panel.filter-sidebar.open {
  height: 100%;
  max-height: none;
  margin-left: 0;
  border: 1px solid #dbe5f0;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
  box-sizing: border-box;
}
.emisiones-page .facturas-filter-host.kre-filter-panel.filter-sidebar:not(.open) {
  width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
.emisiones-page .facturas-workspace.filters-collapsed .facturas-results-card {
  border-radius: 8px;
}
/* Cinturón de seguridad: nada dentro del workspace debe exceder su ancho. */
.emisiones-page .facturas-workspace > * { max-width: 100%; }

/* Pestañas de formulario (Digitación / Solicitud directa): scroll propio de
   arriba a abajo — son formularios largos, no grillas. */
.emisiones-page #tab-registro.tab-content.active,
.emisiones-page #tab-directa.tab-content.active {
  display: block !important;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: calc(100vh - 150px);
  height: calc(100dvh - 150px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
  overflow-x: visible;
  margin: 0;
}
/* .registro-wrapper es content-box (no hay un box-sizing:border-box global):
   con width:100% el padding lateral se sumaba al ancho del padre. */
.emisiones-page #tab-registro .registro-wrapper,
.emisiones-page #tab-directa .registro-wrapper {
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .emi-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emi-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emi-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .emi-cols-2, .emi-cols-3, .emi-cols-4 { grid-template-columns: 1fr; }
  .emi-form-grid .form-group.emi-span-2 { grid-column: auto; }
  .emisiones-page .registro-wrapper { padding: 1rem; }
  .emisiones-page .kpi-card { flex: 1 1 45%; }
  .emi-form-actions { flex-wrap: wrap; }
  .emi-form-actions .facturas-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   MÓDULO EMISIONES · AJUSTES DE REVISIÓN (28.08.2026)

   Correcciones de UI reportadas tras el primer QA visual. Van al final del
   archivo a propósito: el bloque original queda intacto y estas reglas lo
   sobrescriben por orden de cascada, sin subir especificidad a la fuerza.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Textos cortados en la grilla

   `.facturas-table` es table-layout:fixed y `.status-badge` global trae
   min-width:140px + display:flex, que fuerza una sola línea: el estatus más
   largo del catálogo ("Póliza Por Recibir de Aseguradora", 33 caracteres) se
   desbordaba sobre la columna vecina. Aquí el badge pasa a ser un bloque que
   envuelve, y los nombres largos rompen por palabra en vez de recortarse.
   -------------------------------------------------------------------------- */
.emisiones-page .emisiones-grid-table .status-badge {
  display: flex;
  min-width: 0;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
  padding: 5px 9px;
  font-size: 0.68rem;
  letter-spacing: 0.2px;
  box-sizing: border-box;
}

/* El contenedor de la celda no debe recortar: la fila crece a lo alto. */
.emisiones-page .emisiones-grid-table td,
.emisiones-page .emisiones-grid-table .cell-group,
.emisiones-page .emisiones-grid-table .cell-stack {
  overflow: visible;
  min-width: 0;
}

/* Nombres de asegurado, aseguradora, ramo y plan: envolver, nunca recortar. */
.emisiones-page .emisiones-grid-table .cell-main,
.emisiones-page .emisiones-grid-table .cell-sub,
.emisiones-page .emisiones-grid-table .data-value,
.emisiones-page .emisiones-grid-table .emi-tag-poliza {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
  overflow: visible;
}

/* La cronología es de pares etiqueta/valor cortos: se le da algo más de aire
   y se evita que las dos columnas internas se aprieten. */
.emisiones-page .emi-chrono { gap: 5px 12px; }
.emisiones-page .emi-chrono .data-label { font-size: 0.7rem; line-height: 1.2; }
.emisiones-page .emi-chrono .data-value { font-size: 0.78rem; line-height: 1.25; }

/* Insignias de la primera columna: mismo ancho que el badge, sin desbordar. */
.emisiones-page .emisiones-grid-table .badge-days,
.emisiones-page .emisiones-grid-table .emi-badge-dd,
.emisiones-page .emisiones-grid-table .badge-tipo-relacion {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

/* Un poco más de respiro vertical: las filas ahora pueden tener 2-3 líneas. */
.emisiones-page .emisiones-grid-table td { padding-top: 9px; padding-bottom: 9px; }
.emisiones-page .emisiones-grid-table .cell-group { gap: 5px; }

/* --------------------------------------------------------------------------
   2) Alineación del formulario de registro

   El label de "Tipo de asegurado" vive dentro de `.emi-label-row` (comparte
   fila con el botón "Buscar Cliente"), así que NO es hijo directo de
   `.form-group` y se quedaba fuera de la regla que da tamaño y margen a los
   demás labels: ese campo aparecía desalineado respecto a sus vecinos.
   -------------------------------------------------------------------------- */
/* El sistema aplica `display:flex` en COLUMNA a los label de .form-group, así
   que el <span> del asterisco caía a una segunda línea y cada etiqueta medía
   dos renglones... salvo la que vive dentro de .emi-label-row, que no matchea
   esa regla. De ahí venía el escalonado de la primera fila. Se fija dirección
   fila para que el asterisco quede en línea, y una altura mínima igual a la del
   botón mini para que la fila no se mueva cuando ese botón aparece. */
.emi-form-grid .form-group > label,
.emi-form-grid .form-group > .emi-label-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .15rem;
  min-height: 26px;
  margin-bottom: .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: #445;
  line-height: 1.25;
}
.emi-form-grid .form-group > .emi-label-row {
  justify-content: space-between;
  gap: .5rem;
}
.emi-form-grid .form-group > .emi-label-row > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .15rem;
  min-height: 0;
  margin: 0 !important;
  font-size: .85rem;
  font-weight: 600;
  color: #445;
  line-height: 1.25;
}
.emi-form-grid .form-group > label > .emi-required,
.emi-label-row label > .emi-required { margin-left: 0; }

/* Los <small> de ayuda cuelgan del campo y no deben empujar al vecino. */
.emi-form-grid .form-group > .emi-hint-inline {
  margin-top: .3rem;
  min-height: 0;
}

/* Todos los controles de una misma fila arrancan a la misma altura y ocupan
   el alto disponible, para que la rejilla no quede escalonada. */
.emi-form-grid .form-group {
  justify-content: flex-start;
}
.emi-form-grid .form-group > input,
.emi-form-grid .form-group > select,
.emi-form-grid .form-group > .emi-input-money {
  height: 38px;
}
.emi-form-grid .form-group > textarea {
  min-height: 38px;
  padding-top: .45rem;
}

/* El botón mini del label row no debe estirar la fila. */
.emi-label-row .emi-btn-mini { line-height: 1.1; white-space: nowrap; }

/* --------------------------------------------------------------------------
   3) Botón "Adjuntar PDF de la póliza"

   Antes usaba `.facturas-btn` sin modificador, que es gris y se leía como
   deshabilitado justo en el campo que bloquea toda la digitación. Ahora el
   propio botón comunica el estado del requisito: ámbar mientras falta el
   contrato, verde en cuanto está cargado.
   -------------------------------------------------------------------------- */
.emi-btn-adjuntar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 38px;
  padding: 0 .9rem;
  border-radius: .25rem;
  border: 1px solid #d68910;
  background: #f39c12;
  color: #fff;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.emi-btn-adjuntar:hover { background: #e08e0b; border-color: #b9770e; }
.emi-btn-adjuntar:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); }
.emi-btn-adjuntar i { font-size: .95rem; }

.emi-btn-adjuntar.cargado {
  background: #27ae60;
  border-color: #1e8449;
}
.emi-btn-adjuntar.cargado:hover { background: #219150; border-color: #196f3d; }

/* --------------------------------------------------------------------------
   4) Aviso de rechazo de la debida diligencia

   El texto ya va envuelto en un <div> (era hijo suelto de un contenedor flex y
   cada <strong> se convertía en un ítem independiente). Aquí solo se asegura
   la lectura como párrafo justificado.
   -------------------------------------------------------------------------- */
.emi-alert > div {
  flex: 1 1 auto;
  min-width: 0;
  text-align: justify;
  hyphens: auto;
  line-height: 1.5;
}
.emi-alert > div ul { text-align: left; }
#dd-aviso-rechazo strong { white-space: nowrap; }

/* Reenvío de la orden de emisión por correo (acción de fila). */
.emisiones-page .action-btn.emi-btn-correo { background-color: #6a1b9a; }

/* Hueco del mismo alto que un label del módulo, para alinear un control que no
   lleva etiqueta propia (p. ej. el check de ISC) con los selects vecinos. */
.emi-form-grid .form-group > .emi-label-spacer {
  display: block;
  min-height: 26px;
  margin-bottom: .3rem;
}
/* Un check dentro de la rejilla ocupa el alto de un input para no romper la fila. */
.emi-form-grid .form-group > .emi-check-row.emi-check-encampo {
  height: 38px;
  margin-bottom: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   GESTOR DE DOCUMENTOS · Optimización y progreso de carga (28.08.2026)

   Un archivo pesado se optimiza en el navegador antes de subirse (ver
   js/utils/compresorArchivos.js). Ambas fases —optimizar y subir— necesitan
   una señal visible: sin ella la pantalla parecía congelada.
   Estilos aditivos, acotados a sus propias clases.
   ========================================================================== */
.drop-zone-doc small.drop-zone-nota {
  color: #2c7a4b;
  font-weight: 600;
}

/* Distintivo del archivo que el sistema redujo por su cuenta. */
.doc-upload-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: 10px;
  background: #e8f5ee;
  color: #1e7a45;
  border: 1px solid #b7e0c8;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.doc-upload-name s { color: #95a5a6; }

.doc-upload-progress {
  margin: .75rem 0 .25rem;
  padding: .6rem .75rem;
  border: 1px solid #dbe5f0;
  border-radius: 6px;
  background: #f7fbff;
}
.doc-upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
  font-size: .86rem;
  color: #2c3e50;
}
.doc-upload-progress-head > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.doc-upload-cancel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  border: 1px solid #e0b4b0;
  border-radius: 4px;
  background: #fff;
  color: #c0392b;
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s;
}
.doc-upload-cancel:hover { background: #fdeceb; }

.doc-upload-progress-track {
  height: 8px;
  border-radius: 4px;
  background: #e3ecf5;
  overflow: hidden;
}
.doc-upload-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #2980b9, #3498db);
  transition: width .2s ease;
}
/* Sin porcentaje conocido (p. ej. cargando el optimizador de PDF). */
.doc-upload-progress-bar.indeterminado {
  width: 35% !important;
  animation: docUploadIndeterminado 1.1s ease-in-out infinite;
}
@keyframes docUploadIndeterminado {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}