/* components/comisiones/comisiones.css — RRHH · Comisiones */
.com-wrap { display: flex; flex-direction: column; gap: 1.25rem; }

.com-filters { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: flex-end; }
.com-filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.com-filters input, .com-filters select {
  padding: 0.4rem 0.6rem; border: 1px solid var(--border-soft); border-radius: 8px;
  font: inherit; color: var(--text-strong); background: var(--surface-card, #fff); min-width: 160px;
}

.com-kpis { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.com-kpi {
  flex: 1 1 180px; display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.85rem 1.1rem; border-radius: 12px; background: var(--surface-muted, #f3f4f6);
  border-left: 4px solid #9ca3af;
}
.com-kpi label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; }
.com-kpi span { font-size: 1.6rem; font-weight: 800; color: var(--text-strong); line-height: 1.1; }
.com-kpi-accent { border-left-color: #16a34a; background: #f0fdf4; }
.com-kpi-accent span { color: #16a34a; }

.com-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 12px; }
.com-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.com-table th, .com-table td { padding: 0.55rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.com-table thead th { background: var(--surface-muted, #f3f4f6); color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.com-table tbody tr:hover { background: var(--surface-muted, #f9fafb); }
.com-num { text-align: right; font-variant-numeric: tabular-nums; }
.com-dev td { color: #b91c1c; }
.com-empty { text-align: center; color: var(--text-muted); padding: 1.25rem; }
.com-total td { font-weight: 800; color: var(--text-strong); background: var(--surface-muted, #f3f4f6); border-top: 2px solid var(--border-soft); }

/* Botón y modal de Referencia + bonificación (v6.20.61) */
.com-ref-btn { align-self:end; background:#0f5132; color:#fff; border:none; border-radius:6px; padding:7px 16px; font-size:0.85rem; font-weight:600; cursor:pointer; height:fit-content; }
.com-ref-btn:hover { background:#0c3f28; }
.com-num.com-bonif { color:#047857; font-weight:700; }
.com-bonif-tag { display:inline-block; font-size:0.65rem; background:#047857; color:#fff; border-radius:4px; padding:0 4px; margin-left:4px; vertical-align:middle; }

.com-ref-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:1000; }
.com-ref-modal { background:#fff; border-radius:12px; width:min(680px,92vw); max-height:88vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.com-ref-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid #e2e8f0; }
.com-ref-head h3 { margin:0; font-size:1.05rem; }
.com-ref-x { background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:#64748b; }
.com-ref-help { margin:0; padding:0.75rem 1.25rem; font-size:0.82rem; color:#475569; background:#f8fafc; }
.com-ref-body { padding:0.5rem 1.25rem 1rem; overflow:auto; }
.com-ref-marca { margin-top:0.75rem; }
.com-ref-marca h4 { margin:0 0 0.4rem; font-size:0.9rem; color:#0f5132; border-bottom:1px solid #e2e8f0; padding-bottom:0.25rem; }
.com-ref-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 0; font-size:0.85rem; }
.com-ref-row input { width:140px; padding:4px 8px; border:1px solid #cbd5e1; border-radius:6px; text-align:right; }
.com-ref-foot { display:flex; align-items:center; gap:10px; justify-content:flex-end; padding:0.85rem 1.25rem; border-top:1px solid #e2e8f0; }
.com-ref-status { margin-right:auto; font-size:0.8rem; color:#16a34a; }

/* Referencia por versión: Marca → Modelo → Versión (v6.20.64) */
.com-ref-modelo { margin:0.35rem 0 0.35rem 0.25rem; }
.com-ref-modelo h5 { margin:0 0 0.15rem; font-size:0.8rem; font-weight:600; color:#334155; }
.com-ref-modelo .com-ref-row { padding-left:0.75rem; }