/* ============================================================
   CAJA.CSS
   Estilos específicos del módulo de Caja:
   - Dashboard de 4 tarjetas resumen
   - Panel lateral de detalle de movimiento
   - Badges de tipo (ingreso / gasto) y estado
   ============================================================ */

/* ============================================================
   DASHBOARD DE TARJETAS RESUMEN
   ============================================================ */
.dashboard-caja {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-3);
  padding: var(--esp-6) var(--esp-6) 0;
}

.tarjeta-resumen {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-3) var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  /* sin cursor:pointer ni hover: ahora son sólo informativas */
}

.tarjeta-resumen__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tarjeta-resumen__titulo {
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tarjeta-resumen__icono {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-md);
  fill: currentColor;
}

.tarjeta-resumen__icono--rojo {
  background: rgb(234, 240, 246);
}

.tarjeta-resumen__icono--verde {
  background: rgb(234, 240, 246);
}

.tarjeta-resumen__icono--azul {
  background: rgb(234, 240, 246);
}

.tarjeta-resumen__icono--naranja {
  background: rgb(234, 240, 246);
}

.tarjeta-resumen__valor {
  font-size: 22px;
  font-weight: var(--font-peso-bold);
  color: var(--color-texto);
  line-height: 1.1;
}

.tarjeta-resumen__valor--negativo {
  color: #dc2626;
}

.tarjeta-resumen__valor--positivo {
  color: #059669;
}

.tarjeta-resumen__detalle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
}

.tarjeta-resumen__cambio {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: var(--font-peso-medio);
}

.tarjeta-resumen__cambio--up {
  color: #059669;
}

.tarjeta-resumen__cambio--down {
  color: #dc2626;
}

/* ============================================================
   ACCIONES DE CABECERA CAJA
   ============================================================ */
#btn-registrar-ingreso {
  color: var(--color-texto-link);
  border-color: #d1fae5;
}

#btn-registrar-ingreso svg {
  color: currentColor;
  fill: currentColor;
}

#btn-registrar-ingreso:hover {
  color: var(--color-texto-link-hover);
}

/* ============================================================
   BADGE DE TIPO MOVIMIENTO (en tabla)
   ============================================================ */
.tipo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radio-pill);
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-medio);
}

.tipo-badge--ingreso {
  background: #d1fae5;
  color: #065f46;
}

.tipo-badge--gasto {
  background: #fee2e2;
  color: #991b1b;
}

.tipo-badge__icono {
  display: inline-flex;
}

/* ============================================================
   VALOR EN TABLA (alineado a la derecha, color por tipo)
   ============================================================ */
.valor-celda {
  font-weight: var(--font-peso-semibold);
  font-variant-numeric: tabular-nums;
}

.valor-celda--ingreso {
  color: #059669;
}

.valor-celda--gasto {
  color: #dc2626;
}

/* ============================================================
   FILAS: hover visual, sin cursor pointer (solo link y botón son accionables)
   ============================================================ */
.tabla-cotizaciones tbody tr {
  cursor: default;
  transition: background-color var(--trans-rapida);
}

.tabla-cotizaciones tbody tr:hover {
  background-color: var(--color-fondo-suave);
}

.tabla-cotizaciones tbody tr.fila-activa {
  background-color: var(--color-acento-claro);
}

/* ============================================================
   PANEL LATERAL DE DETALLE DE MOVIMIENTO
   El panel vive en .contenido__body como hermano flex de
   .bloque-tabla; la tarjeta visual está en .panel-detalle__card.
   ============================================================ */
.panel-detalle {
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  transition: width 240ms ease-out;
  margin: 0 0 var(--esp-6) 0;
}

.panel-detalle.abierto {
  width: calc(420px + var(--esp-6));
}

.panel-detalle__card {
  flex-shrink: 0;
  width: 420px;
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-detalle__header {
  padding: var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  flex-shrink: 0;
}

.panel-detalle__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--esp-3);
}

.panel-detalle__cerrar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-suave);
  border-radius: 50%;
  transition: background-color var(--trans-rapida);
}

.panel-detalle__cerrar:hover {
  background-color: var(--color-fondo-hover);
}

.panel-detalle__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radio-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--font-peso-bold);
  margin-bottom: var(--esp-3);
}

.panel-detalle__avatar--ingreso {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.panel-detalle__avatar--gasto {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

.panel-detalle__titulo {
  font-size: var(--font-tam-lg);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto);
  margin-bottom: 2px;
}

.panel-detalle__subtitulo {
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
}

.panel-detalle__monto {
  font-size: 28px;
  font-weight: var(--font-peso-bold);
  font-variant-numeric: tabular-nums;
  margin: var(--esp-3) 0 var(--esp-2);
}

.panel-detalle__monto--ingreso {
  color: #059669;
}

.panel-detalle__monto--gasto {
  color: #dc2626;
}

.panel-detalle__acciones {
  display: flex;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.panel-detalle__acciones .btn {
  flex: 1;
  justify-content: center;
}

.panel-detalle__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.panel-detalle__seccion {
  padding: var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
}

.panel-detalle__seccion-titulo {
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--esp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-detalle__seccion-titulo .toggle-seccion {
  color: var(--color-texto-debil);
  font-size: 16px;
}

.panel-detalle__campo {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--esp-2);
  padding: 6px 0;
  font-size: var(--font-tam-md);
}

.panel-detalle__campo-label {
  color: var(--color-texto-suave);
}

.panel-detalle__campo-valor {
  color: var(--color-texto);
  font-weight: var(--font-peso-medio);
}

.panel-detalle__campo-valor a {
  color: var(--color-acento);
  text-decoration: none;
}

.panel-detalle__campo-valor a:hover {
  text-decoration: underline;
}

.panel-detalle__observaciones {
  padding: var(--esp-3);
  background: var(--color-fondo-suave);
  border-radius: var(--radio-md);
  font-size: var(--font-tam-md);
  color: var(--color-texto);
  line-height: 1.5;
}

.panel-detalle__adjunto {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  border: 1px dashed var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
}

.panel-detalle__adjunto-icono {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-acento-claro);
  color: var(--color-acento);
  border-radius: var(--radio-sm);
}

.panel-detalle__actividad {
  display: flex;
  gap: var(--esp-2);
  padding: var(--esp-2) 0;
  font-size: var(--font-tam-sm);
}

.panel-detalle__actividad-icono {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-fondo-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-suave);
  flex-shrink: 0;
}

.panel-detalle__actividad-texto {
  color: var(--color-texto);
}

.panel-detalle__actividad-fecha {
  color: var(--color-texto-suave);
  font-size: var(--font-tam-xs);
  margin-top: 2px;
}

/* ============================================================
   ESTADOS específicos del módulo Caja (badges)
   ============================================================ */
.estado-dot--pagado {
  background-color: #10b981;
}

.estado-dot--pendiente {
  background-color: #f59e0b;
}

.estado-dot--anulado {
  background-color: #6b7280;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .dashboard-caja {
    grid-template-columns: repeat(2, 1fr);
  }

  .panel-detalle__card {
    width: 380px;
  }

  .panel-detalle.abierto {
    width: calc(380px + var(--esp-6));
  }
}

@media (max-width: 768px) {
  .dashboard-caja {
    grid-template-columns: 1fr;
    padding: var(--esp-3);
  }

  .panel-detalle.abierto {
    width: 100%;
    height: 280px;
  }

  .panel-detalle__card {
    width: 100%;
    margin: 0 var(--esp-4) var(--esp-4);
  }
}

/* ============================================================
   NUEVOS COMPONENTES — POLISH iteración 3
   - Filtro de fecha (presets + rango personalizado)
   - Popover de opciones de exportación
   - Modales de configuración y reporte de comisiones
   ============================================================ */

/* ----- Pill: etiqueta cuando muestra el valor del filtro de fecha ----- */
.filtro-pill__valor {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  margin-right: 4px;
  font-size: 11px;
  font-weight: var(--font-peso-medio);
  color: var(--color-acento);
  background: var(--color-acento-claro);
  border-radius: var(--radio-md);
  white-space: nowrap;
}

/* ----- Popover de fecha — sección de rango personalizado ----- */
.popover__seccion-fecha {
  padding: var(--esp-3);
  border-top: 1px solid var(--color-borde);
  background: var(--color-fondo-suave);
}

.popover__rango-fila {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.popover__rango-fila .form-input--sm {
  flex: 1;
  min-width: 0;
}

.popover__rango-sep {
  color: var(--color-texto-debil);
  font-size: 14px;
  font-weight: var(--font-peso-bold);
}

.popover__rango-acciones {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
}

/* Variantes pequeñas de inputs y botones (reusables) */
.form-input--sm,
.form-select--sm {
  height: 30px;
  padding: 0 var(--esp-2);
  font-size: var(--font-tam-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-fondo-panel);
  color: var(--color-texto);
}

.btn--sm {
  height: 28px;
  padding: 0 var(--esp-3);
  font-size: var(--font-tam-sm);
}

/* ----- Popover de exportación ----- */
.popover__nota {
  padding: 0 var(--esp-3) var(--esp-3);
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  line-height: 1.4;
}

.popover__item--rico {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3);
  text-align: left;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--trans-rapida);
}

.popover__item--rico:hover {
  background: var(--color-fondo-hover);
}

.popover__item-icono {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-acento-claro);
  color: var(--color-acento);
  border-radius: var(--radio-md);
}

.popover__item-cuerpo {
  flex: 1;
  min-width: 0;
}

.popover__item-titulo {
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto);
  line-height: 1.3;
}

.popover__item-sub {
  margin-top: 2px;
  font-size: var(--font-tam-xs);
  color: var(--color-texto-debil);
}

/* ----- Modal: Configurar comisiones ----- */
.modal__intro {
  margin: 0 0 var(--esp-4);
  padding: var(--esp-3);
  background: var(--color-fondo-suave);
  border-left: 3px solid var(--color-acento);
  border-radius: var(--radio-md);
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  line-height: 1.5;
}

.config-comisiones__tabs {
  display: flex;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
}

.config-comisiones__tab {
  padding: var(--esp-2) var(--esp-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto-suave);
  cursor: pointer;
  margin-bottom: -1px;
  transition: all var(--trans-rapida);
}

.config-comisiones__tab:hover {
  color: var(--color-texto);
}

.config-comisiones__tab--activo {
  color: var(--color-acento);
  border-bottom-color: var(--color-acento);
}

.tabla-config-comisiones {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-tam-md);
}

.tabla-config-comisiones th,
.tabla-config-comisiones td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
}

.tabla-config-comisiones th {
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--color-fondo-suave);
}

.tabla-config-comisiones__vacio {
  text-align: center;
  padding: var(--esp-6);
  color: var(--color-texto-debil);
  font-style: italic;
}

.input-pct {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100px;
}

.input-pct .form-input {
  width: 100%;
  padding-right: 24px;
  text-align: right;
}

.input-pct__suffix {
  position: absolute;
  right: var(--esp-2);
  font-size: var(--font-tam-sm);
  color: var(--color-texto-debil);
  pointer-events: none;
}

.btn-icono-mini {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radio-md);
  color: var(--color-texto-debil);
  cursor: pointer;
  transition: all var(--trans-rapida);
}

.btn-icono-mini:hover {
  background: var(--color-fondo-hover);
  color: var(--color-estado-vencido);
  border-color: var(--color-borde);
}

/* ----- Modal: Reporte de comisiones ----- */
.reporte-comisiones__filtros {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--esp-3);
  padding: var(--esp-3);
  background: var(--color-fondo-suave);
  border-radius: var(--radio-lg);
  margin-bottom: var(--esp-4);
  align-items: end;
}

.reporte-comisiones__filtros .form-grupo {
  margin: 0;
}

.form-grupo--acciones {
  display: flex;
  align-items: flex-end;
}

.reporte-comisiones__resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.reporte-comisiones__kpi {
  padding: var(--esp-3);
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
}

.reporte-comisiones__kpi-titulo {
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: var(--esp-2);
}

.reporte-comisiones__kpi-valor {
  font-size: 20px;
  font-weight: var(--font-peso-bold);
  color: var(--color-texto);
  line-height: 1.1;
}

.reporte-comisiones__kpi-valor.diff-pos {
  color: #059669;
}

.reporte-comisiones__kpi-valor.diff-neg {
  color: #dc2626;
}

.reporte-comisiones__kpi-sub {
  margin-top: var(--esp-1);
  font-size: var(--font-tam-xs);
  color: var(--color-texto-debil);
}

.tabla-reporte-comisiones {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-tam-md);
}

.tabla-reporte-comisiones th,
.tabla-reporte-comisiones td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.tabla-reporte-comisiones th {
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--color-fondo-suave);
  position: sticky;
  top: 0;
}

.tabla-reporte-comisiones .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla-reporte-comisiones tfoot th,
.tabla-reporte-comisiones tfoot td {
  font-weight: var(--font-peso-bold);
  background: var(--color-fondo-suave);
  border-top: 2px solid var(--color-borde-fuerte);
}

.tabla-reporte-comisiones__vacio {
  text-align: center;
  padding: var(--esp-6) !important;
  color: var(--color-texto-debil);
  font-style: italic;
}

.diff-pos {
  color: #059669;
}

.diff-neg {
  color: #dc2626;
}

/* Responsive — filtros del reporte */
@media (max-width: 768px) {
  .reporte-comisiones__filtros {
    grid-template-columns: 1fr;
  }

  .reporte-comisiones__resumen {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   AUTOCOMPLETADO DE PRODUCTOS (dropdown flotante, position:fixed)
   ============================================================ */
.prod-autocomplete__lista {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--color-fondo-panel, #fff);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow-y: auto;
}

.prod-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background var(--trans-rapida);
}

.prod-autocomplete__item:hover,
.prod-autocomplete__item:focus {
  background: var(--color-fondo-hover);
  outline: none;
}

.prod-ac__nombre {
  flex: 1;
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-ac__sku {
  font-size: 11px;
  color: var(--color-texto-debil);
  font-family: monospace;
  flex-shrink: 0;
}

.prod-ac__precio {
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-semibold);
  color: var(--color-acento);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Input readonly (valor de comisión calculado automáticamente) */
.form-input--readonly {
  background: var(--color-fondo-suave);
  color: var(--color-texto-suave);
  cursor: not-allowed;
}

/* ============================================================
   ASESORES — SOFT-DELETE (activo / inactivo)
   ============================================================ */

/* Fila inactiva: atenuada y sin interacción visual */
.asesor-row--inactivo {
  opacity: 0.45;
}

.asesor-row--inactivo input,
.asesor-row--inactivo select {
  background: var(--color-fondo-suave);
  color: var(--color-texto-debil);
}

/* Nombre tachado cuando el asesor está inactivo */
.asesor-row--inactivo .asesor-nombre {
  text-decoration: line-through;
  color: var(--color-texto-debil);
}

/* Badge "Inactivo" inline junto al nombre */
.badge-inactivo {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: var(--font-peso-semibold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  border-radius: var(--radio-pill);
  vertical-align: middle;
}

/* Botón de toggle estado asesor */
.btn-activo--on {
  color: #059669;
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.btn-activo--on:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.btn-activo--off {
  color: #92400e;
  border-color: #fde68a;
  background: #fffbeb;
}

.btn-activo--off:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}

/* ============================================================
   REPORTE DE COMISIONES — TABS (Resumen / Ingresos facturados)
   ============================================================ */

.rep-com__tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-borde);
  margin: var(--esp-3) 0 var(--esp-4);
}

.rep-com__tab {
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto-suave);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--trans-rapida), border-color var(--trans-rapida);
  white-space: nowrap;
}

.rep-com__tab:hover {
  color: var(--color-texto);
}

.rep-com__tab--activo {
  color: var(--color-acento);
  border-bottom-color: var(--color-acento);
}

/* ============================================================
   TABLA INGRESOS FACTURADOS — filas de factura + editor
   ============================================================ */

.tabla-facturas-comision .factura-titulo {
  display: block;
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.tabla-facturas-comision .factura-ref {
  display: block;
  font-size: var(--font-tam-xs);
  color: var(--color-texto-debil);
  font-family: monospace;
}

.tabla-facturas-comision .fecha-celda {
  font-size: var(--font-tam-sm);
  white-space: nowrap;
  color: var(--color-texto-suave);
}

/* Badge "Ajustado" — aparece junto al valor de comisión final */
.badge-ajustado {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: var(--font-peso-semibold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-acento);
  background: var(--color-acento-claro);
  border-radius: var(--radio-pill);
  vertical-align: middle;
}

/* Celda de comisión final — contiene display y editor */
.com-celda-ajustada {
  min-width: 200px;
}

/* Editor inline dentro de la celda */
.com-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) 0;
}

/* Badge de estado de comisión por factura */
.com-estado-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: var(--font-peso-semibold);
  border-radius: var(--radio-pill);
  white-space: nowrap;
}

.com-estado--pagada {
  color: #065f46;
  background: #d1fae5;
}

.com-estado--pendiente {
  color: #92400e;
  background: #fef3c7;
}

.com-estado--sin-registro {
  color: var(--color-texto-suave);
  background: var(--color-fondo-alt);
}

/* Botones de acción de la fila (editar, historial) */
.com-acciones {
  white-space: nowrap;
  text-align: right;
}

.com-acciones .btn-icono-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Contador de ajustes junto al botón de historial */
.historial-cnt {
  font-size: 10px;
  font-weight: var(--font-peso-bold);
  color: var(--color-acento);
  line-height: 1;
}

/* ============================================================
   HISTORIAL DE AJUSTES — fila expansible debajo de cada factura
   ============================================================ */

.historial-row td {
  background: var(--color-fondo-suave);
  border-top: none;
  padding: 0 var(--esp-3) var(--esp-3);
}

.historial-comision {
  padding: var(--esp-3);
  border-radius: var(--radio-md);
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
}

.historial-comision__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-tam-xs);
}

.historial-comision__tabla th,
.historial-comision__tabla td {
  padding: var(--esp-1) var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.historial-comision__tabla th {
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
}

.historial-comision__tabla .num {
  text-align: right;
}

.historial-comision__tabla tr:last-child td {
  border-bottom: none;
}

.historial-comision__estado {
  padding: var(--esp-3);
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  text-align: center;
}

.historial-comision__estado--error {
  color: #dc2626;
}

/* Texto "Inicial" en ajuste anterior cuando es el primer ajuste */
.com-estado-texto {
  font-size: 10px;
  color: var(--color-texto-debil);
  font-style: italic;
}