/**
 * Vehicle Module CSS v5 — Professional Fleet Management
 * Mobile-first, clean, premium design
 */

/* ==========================================
   PAGE HEADER
   ========================================== */
.vh-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}
.vh-page-header h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}
.vh-page-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 0 0;
}
.vh-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Financial overview: makes the fleet legible as an asset and cash-flow unit. */
.vh-financial-hero, .vh-profit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  margin-bottom: 20px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(20, 26, 38, 0.95) 50%, rgba(124, 58, 237, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}
.vh-financial-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #10B981, #3B82F6, #7C3AED);
  opacity: 0.8;
}
.vh-eyebrow { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; color: #10B981; }
.vh-financial-hero strong, .vh-profit-card strong { display: block; font-size: 32px; font-weight: 800; font-family: 'Outfit', sans-serif; letter-spacing: -0.8px; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.vh-financial-hero small, .vh-profit-card small { display: block; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.vh-hero-side { display: grid; gap: 4px; min-width: 200px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.1); font-size: 11px; color: var(--text-muted); }
.vh-hero-side b { color: #fff; font-size: 20px; font-family: 'Outfit', sans-serif; font-weight: 800; }
.vh-fleet-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.vh-search { display: flex; flex: 1; max-width: 400px; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-card); color: var(--text-muted); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.vh-search:focus-within { border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.vh-search input { width: 100%; height: 40px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 12.5px; }
.vh-cost-chip { padding: 10px 14px; border-radius: 10px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.2); color: var(--text-muted); font-size: 11.5px; }
.vh-cost-chip b { margin-left: 6px; color: #10B981; font-weight: 800; }

/* ==========================================
   FLEET DASHBOARD (Summary KPIs)
   ========================================== */
.vh-fleet-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.vh-fleet-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(8px);
}
.vh-fleet-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.85;
}
.vh-fleet-kpi:nth-child(1)::before { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.vh-fleet-kpi:nth-child(2)::before { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.vh-fleet-kpi:nth-child(3)::before { background: linear-gradient(90deg, #10B981, #34D399); }
.vh-fleet-kpi:nth-child(4)::before { background: linear-gradient(90deg, #F59E0B, #FBBF24); }

.vh-fleet-kpi:hover {
  transform: translateY(-2.5px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.16);
}
.vh-fleet-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.vh-fleet-kpi-icon.blue { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
.vh-fleet-kpi-icon.purple { background: rgba(124, 58, 237, 0.1); color: #A78BFA; }
.vh-fleet-kpi-icon.green { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.vh-fleet-kpi-icon.orange { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.vh-fleet-kpi-value {
  font-size: 20px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.vh-fleet-kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-top: 3px;
}
.vh-fleet-kpi-value.green { color: #10B981; }
.vh-fleet-kpi-value.orange { color: #F59E0B; }
.vh-fleet-kpi-value.red { color: #EF4444; }
.vh-fleet-kpi-value.blue { color: #6366F1; }

/* ==========================================
   PRIMARY BUTTON
   ========================================== */
.vh-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #FFF;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.vh-primary-btn:hover {
  background: linear-gradient(135deg, #6D28D9, #5B21B6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}
.vh-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.vh-secondary-btn:hover {
  border-color: #7C3AED;
  color: #7C3AED;
}

/* ==========================================
   VEHICLE GRID & CARDS
   ========================================== */
.vh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.vh-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
}
.vh-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, linear-gradient(90deg, #10B981, #7C3AED));
  opacity: 0.9;
}
.vh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.18);
}
.vh-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}
.vh-card-plate {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.vh-card-model {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.vh-card-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vh-card-badge.active { background: rgba(16,185,129,0.12); color: #10B981; }
.vh-card-badge.inactive { background: rgba(107,114,128,0.12); color: #6B7280; }
.vh-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.vh-card-row:last-of-type { border-bottom: none; }
.vh-card-label { color: var(--text-muted); font-weight: 500; }
.vh-card-value { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.vh-card-value.accent { color: #7C3AED; }
.vh-card-value.green { color: #10B981; }
.vh-card-value.negative, .negative { color: #EF4444; }
.vh-card-value.orange { color: #D97706; }
.positive { color: #10B981; }
.vh-card-note {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #10B981;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vh-card-finance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}
.vh-card-finance > div {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.vh-card-finance span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vh-card-finance b {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
}
.vh-card-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.vh-card-action {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
}
.vh-card-action.primary {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border-color: rgba(16, 185, 129, 0.25);
}
.vh-card-action.primary:hover {
  background: #10B981;
  color: #064E3B;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.vh-card-action.secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.vh-card-action.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

/* ==========================================
   EMPTY STATE
   ========================================== */
.vh-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.vh-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(124,58,237,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  color: #7C3AED;
}
.vh-empty h3 { font-size: 16px; margin: 0 0 6px 0; color: var(--text-primary); }
.vh-empty p { font-size: 13px; margin: 0 0 16px 0; }
.vh-empty-section {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.vh-empty-section p { margin: 0 0 12px 0; }

/* ==========================================
   DETAIL VIEW
   ========================================== */
.vh-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  flex-wrap: wrap;
}
.vh-detail-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vh-back {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.vh-back:hover {
  border-color: #7C3AED;
  color: #7C3AED;
  transform: translateX(-2px);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.2);
}
.vh-license-plate-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 14px 4px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fef9c3 0%, #facc15 100%);
  color: #0f172a;
  border: 2px solid #ca8a04;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  line-height: 1;
  flex-shrink: 0;
}
.vh-license-plate-badge .plate-text {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 1.8px;
}
.vh-license-plate-badge .plate-sub {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #713f12;
  margin-top: 1px;
}
.vh-detail-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vh-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vh-detail-title-row h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}
.vh-detail-info p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vh-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vh-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vh-status-badge.activo {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.vh-status-badge.inactivo {
  background: rgba(107, 114, 128, 0.12);
  color: #9CA3AF;
  border: 1px solid rgba(107, 114, 128, 0.3);
}
.vh-status-badge.mantenimiento {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.vh-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: vh-pulseDot 2s infinite ease-in-out;
}
@keyframes vh-pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.vh-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.vh-icon-btn:hover {
  border-color: #7C3AED;
  color: #7C3AED;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ==========================================
   STATS BAR
   ========================================== */
.vh-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.vh-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.vh-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.8;
  background: transparent;
}
.vh-stat.blue::before { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.vh-stat.purple::before { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.vh-stat.green::before { background: linear-gradient(90deg, #10B981, #34D399); }
.vh-stat.orange::before { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.vh-stat.red::before { background: linear-gradient(90deg, #EF4444, #F87171); }

.vh-stat:hover {
  transform: translateY(-2.5px);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 10px 24px -5px rgba(0, 0, 0, 0.3);
}
.vh-stat-icon {
  font-size: 18px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vh-stat-icon.blue { color: #3B82F6; }
.vh-stat-icon.purple { color: #8B5CF6; }
.vh-stat-icon.green { color: #10B981; }
.vh-stat-icon.orange { color: #F59E0B; }
.vh-stat-icon.red { color: #EF4444; }
.vh-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.vh-stat-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

.vh-profit-card { margin-top: -4px; background: linear-gradient(120deg, #0f172a, #164e63); }
.vh-profit-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vh-profit-metrics div { min-width: 100px; }
.vh-profit-metrics span { display: block; font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: .5px; opacity: .67; }
.vh-profit-metrics b { display: block; margin-top: 4px; font-size: 13px; color: #fff; }

.vh-validation-summary {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: 0;
  align-items: stretch;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.2);
}
.vh-validation-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  border-right: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), transparent);
}
.vh-validation-title span {
  font-size: 10.5px;
  color: #a78bfa;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.vh-validation-title small {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}
.vh-validation-value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  border-right: 1px solid var(--border-color);
}
.vh-validation-value span {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.vh-validation-value b {
  font-family: 'Outfit', sans-serif;
  margin-top: 6px;
  color: var(--text-primary);
  font-size: 20px;
  letter-spacing: -0.3px;
}
.vh-validation-value.result {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.03));
  border-right: 0;
  position: relative;
}
.vh-validation-value.result b.positive {
  color: #10B981;
  text-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}
.vh-validation-value.result b.negative {
  color: #EF4444;
}
.vh-validation-note {
  grid-column: 1 / -1;
  padding: 10px 20px;
  border-top: 1px solid var(--border-color);
  background: rgba(16, 185, 129, 0.05);
  color: #34d399;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vh-km-section { margin-bottom: 16px; padding: 17px 18px 12px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); }
.vh-km-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.vh-km-heading p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.vh-km-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(190px, .7fr); gap: 16px; align-items: stretch; }
.vh-km-chart-wrap { position: relative; height: 150px; padding: 3px 4px 0 0; }
.vh-km-insights { display: grid; grid-template-columns: 1fr; gap: 7px; }
.vh-km-insights div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border-radius: 9px; background: var(--bg-input); }
.vh-km-insights span { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.vh-km-insights b { color: var(--text-primary); font-size: 13px; white-space: nowrap; }
.vh-km-insights div:first-child { background: rgba(16,185,129,.09); }
.vh-km-insights div:first-child b { color: #059669; }
.vh-km-empty { display: grid; height: 100%; place-items: center; color: var(--text-muted); font-size: 12px; text-align: center; }
.vh-detail-columns { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(420px, 1.28fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.vh-detail-columns .vh-section { margin-bottom: 0; }
/* La ficha debe desplazarse con el resto de la página: sticky hacía que se
   cruzara visualmente con gastos en pantallas de distinta altura. */
.vh-vehicle-info { position: static; }

/* ==========================================
   SECTIONS
   ========================================== */
.vh-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.vh-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.vh-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vh-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: rgba(124,58,237,0.1);
  color: #7C3AED;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
}
.vh-section-body { /* container for content */ }

/* ==========================================
   INFO LIST (Vehicle details)
   ========================================== */
.vh-info-list { }
.vh-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.vh-info-item:last-child { border-bottom: none; }
.vh-info-item-label { color: var(--text-muted); font-weight: 500; }
.vh-info-item-value { color: var(--text-primary); font-weight: 600; text-align: right; }

/* ==========================================
   BILL CARDS (Cuentas de Cobro)
   ========================================== */
.vh-bill-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
  border-left: 4px solid #F59E0B;
}
.vh-bill-card.paid { border-left-color: #10B981; }

/* Filas de rastro del conductor + meta */
.vh-bill-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.vh-bill-conductor-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(45, 106, 79, 0.1);
  border: 1px solid rgba(45, 106, 79, 0.3);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main);
  max-width: 60%;
}

.vh-bill-conductor-chip.ex-conductor {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--text-main);
}

.vh-bill-conductor-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-moss, #52B788), var(--primary, #2D6A4F));
  color: white;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.vh-bill-conductor-chip.ex-conductor .vh-bill-conductor-dot {
  background: linear-gradient(135deg, #FBBF24, #B45309);
}

.vh-bill-conductor-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.vh-bill-conductor-tag {
  background: rgba(245, 158, 11, 0.25);
  color: #FBBF24;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.vh-bill-meta-info {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.vh-bill-card.partial { border-left-color: #3B82F6; }
.vh-bill-card.cancelled { border-left-color: #6B7280; opacity: 0.6; }
.vh-bill-card.pending { border-left-color: #F59E0B; }
.vh-bill-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.vh-bill-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.vh-bill-id { display: flex; align-items: center; gap: 8px; }
.vh-bill-week {
  background: rgba(124,58,237,0.1);
  color: #7C3AED;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}
.vh-bill-number {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}
.vh-bill-status {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.vh-bill-status.pending { background: rgba(245,158,11,0.12); color: #F59E0B; }
.vh-bill-status.paid { background: rgba(16,185,129,0.12); color: #10B981; }
.vh-bill-status.partial { background: rgba(59,130,246,0.12); color: #3B82F6; }
.vh-bill-status.cancelled { background: rgba(107,114,128,0.12); color: #6B7280; }
.vh-bill-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.vh-bill-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.vh-bill-amount-item {
  text-align: center;
  padding: 8px;
  background: var(--bg-input);
  border-radius: 8px;
}
.vh-bill-amount-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.vh-bill-amount-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
}
.vh-bill-amount-value.green { color: #10B981; }
.vh-bill-amount-value.red { color: #EF4444; }
.vh-bill-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vh-bill-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.vh-bill-btn:hover { border-color: #7C3AED; color: #7C3AED; }
.vh-bill-btn.view:hover { border-color: #3B82F6; color: #3B82F6; }
.vh-bill-btn.download:hover { border-color: #10B981; color: #10B981; }
.vh-bill-btn.pay { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: #10B981; }
.vh-bill-btn.pay:hover { background: rgba(16,185,129,0.15); }
.vh-bill-btn.km { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); color: #f59e0b; }
.vh-bill-btn.km:hover { background: rgba(245,158,11,0.15); }
.vh-bill-btn.danger:hover { border-color: #EF4444; color: #EF4444; }

/* ==========================================
   GENERATE PANEL
   ========================================== */
.vh-gen-panel {
  background: var(--bg-card);
  border: 2px solid #7C3AED;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  animation: vh-slideDown 0.3s ease;
}
@keyframes vh-slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.vh-gen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(109,40,217,0.04));
  border-bottom: 1px solid rgba(124,58,237,0.15);
}
.vh-gen-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #7C3AED;
  margin: 0;
}
.vh-gen-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(124,58,237,0.1);
  color: #7C3AED;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.vh-gen-close:hover { background: rgba(124,58,237,0.2); }
.vh-gen-body { padding: 16px; }
.vh-gen-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.vh-gen-row.full { grid-template-columns: 1fr; }

/* ==========================================
   FORM FIELDS
   ========================================== */
.vh-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vh-form-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vh-form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: border-color 0.2s ease;
  font-family: inherit;
}
.vh-form-input:focus {
  outline: none;
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.vh-form-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: border-color 0.2s ease;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}
.vh-form-textarea:focus {
  outline: none;
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

/* ==========================================
   DEDUCTIONS LIST & DYNAMIC SPLIT CO-PAYMENT
   ========================================== */
.vh-ded-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vh-split-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vh-split-card:hover {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.vh-split-card.disabled {
  opacity: 0.55;
}

.vh-split-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.vh-split-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 180px;
}
.vh-split-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #7C3AED;
  cursor: pointer;
  flex-shrink: 0;
}
.vh-split-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vh-split-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.vh-split-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.vh-split-total-badge {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.vh-split-total-badge strong {
  color: #a78bfa;
  font-weight: 800;
  margin-left: 4px;
}

.vh-split-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  transition: opacity 0.2s ease;
}

.vh-split-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.vh-preset-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.vh-preset-btn:hover {
  border-color: #7C3AED;
  color: var(--text-primary);
}
.vh-preset-btn.active {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

.vh-split-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vh-split-party {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 8px 10px;
}
.vh-split-party.conductor {
  border-left: 3px solid #ef4444;
}
.vh-split-party.owner {
  border-left: 3px solid #10b981;
}
.vh-party-tag {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.vh-party-fields {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 6px;
}
.vh-input-group {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.vh-input-group:focus-within {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.vh-input-affix {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  user-select: none;
  background: transparent;
}
.vh-split-pct, .vh-split-val {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 4px;
  outline: none;
  font-family: inherit;
}
.vh-split-pct {
  text-align: right;
}

.vh-split-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 6px;
}
.vh-split-ded-tag {
  color: #ef4444;
  font-weight: 700;
}
.vh-split-owner-tag {
  color: #10b981;
  font-weight: 700;
}

.vh-expense-split-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 6px;
}
.vh-expense-split-badge.driver {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.vh-expense-split-badge.shared {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.vh-expense-split-badge.owner {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.vh-ded-empty {
  padding: 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--bg-input);
  border-radius: 10px;
  border: 1px dashed var(--border-color);
}

/* ==========================================
   PREVIEW CARD
   ========================================== */
.vh-preview {
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(109,40,217,0.02));
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
  animation: vh-fadeIn 0.3s ease;
}
@keyframes vh-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.vh-preview-title {
  font-size: 12px;
  font-weight: 800;
  color: #7C3AED;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.vh-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.vh-preview-item {
  text-align: center;
  padding: 10px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.vh-preview-item-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.vh-preview-item-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 3px;
}
.vh-preview-item-value.green { color: #10B981; }
.vh-preview-item-value.red { color: #EF4444; }
.vh-preview-item-value.total { color: #7C3AED; font-size: 18px; }
.vh-preview-deductions {
  margin-bottom: 14px;
}
.vh-preview-ded-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--border-color);
}
.vh-preview-ded-row:last-child { border-bottom: none; }
.vh-preview-ded-name { color: var(--text-secondary); }
.vh-preview-ded-amount { color: #EF4444; font-weight: 700; }

.vh-gen-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.vh-gen-submit {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #FFF;
}
.vh-gen-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}
.vh-gen-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.vh-gen-calc {
  flex: 1;
  padding: 12px 20px;
  border: 2px solid #7C3AED;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: #7C3AED;
}
.vh-gen-calc:hover {
  background: rgba(124,58,237,0.06);
}

/* ==========================================
   EXPENSE ROW
   ========================================== */
.vh-expense-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s ease;
}
.vh-expense-row:last-child { border-bottom: none; }
.vh-expense-row:hover { background: rgba(0,0,0,0.02); border-radius: 8px; padding-left: 4px; padding-right: 4px; }
.vh-expense-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.vh-expense-info { flex: 1; min-width: 0; }
.vh-expense-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vh-expense-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.vh-expense-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.vh-expense-amount.negative { color: #EF4444; }
.vh-expense-actions {
  display: flex;
  gap: 4px;
}
.vh-expense-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted);
}
.vh-expense-btn:hover {
  background: var(--bg-input);
  border-color: var(--border-color);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
  .vh-financial-hero, .vh-profit-card { align-items: flex-start; flex-direction: column; gap: 16px; padding: 18px; }
  .vh-hero-side { padding: 12px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.22); width: 100%; }
  .vh-profit-metrics { width: 100%; }
  .vh-validation-summary { grid-template-columns: 1fr 1fr; }
  .vh-validation-title { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--border-color); }
  .vh-validation-value:nth-of-type(3) { border-right: 0; }
  .vh-fleet-toolbar { align-items: stretch; flex-direction: column; }
  .vh-search { max-width: none; }
  .vh-fleet-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .vh-grid {
    grid-template-columns: 1fr;
  }
  .vh-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .vh-detail-columns { grid-template-columns: 1fr; }
  .vh-gen-row {
    grid-template-columns: 1fr;
  }
  .vh-preview-grid {
    grid-template-columns: 1fr;
  }
  .vh-bill-amounts {
    grid-template-columns: repeat(3, 1fr);
  }
  .vh-bill-actions {
    flex-wrap: wrap;
  }
  .vh-gen-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .vh-financial-hero strong, .vh-profit-card strong { font-size: 24px; }
  .vh-profit-metrics { grid-template-columns: 1fr; gap: 9px; }
  .vh-validation-summary { grid-template-columns: 1fr; }
  .vh-validation-value, .vh-validation-value:nth-of-type(3) { border-right: 0; border-bottom: 1px solid var(--border-color); }
  .vh-validation-value.result { border-bottom: 0; }
  .vh-km-heading { align-items: stretch; flex-direction: column; }
  .vh-km-grid { grid-template-columns: 1fr; }
  .vh-km-chart-wrap { height: 155px; }
  .vh-km-insights { grid-template-columns: repeat(3, 1fr); }
  .vh-km-insights div { display: block; }
  .vh-km-insights b { display: block; margin-top: 4px; }
  .vh-page-header h1 { font-size: 18px; }
  .vh-detail-info h2 { font-size: 17px; }
  .vh-stats { gap: 6px; }
  .vh-stat { padding: 10px 8px; }
  .vh-stat-value { font-size: 13px; }
  .vh-fleet-kpi { padding: 12px 8px; }
  .vh-fleet-kpi-value { font-size: 15px; }
}

/* ==========================================
   PREVIEW BILL MODAL
   ========================================== */
.preview-bill { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.preview-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
.preview-status { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.preview-status.pagada { background: #d1fae5; color: #065f46; }
.preview-status.pendiente { background: #fef3c7; color: #92400e; }
.preview-status.parcial { background: #dbeafe; color: #1e40af; }
.preview-status.anulada { background: #fee2e2; color: #991b1b; }
.preview-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.preview-table th { text-align: left; padding: 8px 10px; background: #f9fafb; border-bottom: 2px solid #e5e7eb; font-size: 11px; text-transform: uppercase; color: #6b7280; letter-spacing: 0.3px; }
.preview-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }
.preview-table tfoot td { padding: 10px; font-weight: 600; }
.preview-table .total { border-top: 2px solid #e5e7eb; }
.preview-table .net { font-size: 15px; color: #7c3aed; }
.preview-table .paid td { color: #10b981; }
.preview-table .pending td { color: #f59e0b; }
.preview-table .ded td { color: #ef4444; font-style: italic; }
.preview-notes { margin-top: 12px; padding: 10px; background: #f9fafb; border-radius: 8px; font-size: 12px; color: #6b7280; border-left: 3px solid #7c3aed; }
.vh-bill-btn.pdf { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: #3B82F6; }
.vh-bill-btn.pdf:hover { background: rgba(59,130,246,0.15); }

/* ==========================================================================
   MINIMALIST HERO & PROGRESSIVE DISCLOSURE (DESGLOSE)
   ========================================================================== */

.vh-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.vh-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.vh-hero-ident {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.vh-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vh-hero-model {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.vh-hero-sub {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vh-hero-driver-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #10B981;
  font-weight: 600;
  font-size: 11.5px;
}

/* 3 Pillars Overview Bar */
.vh-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.vh-pillar-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.vh-pillar-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.vh-pillar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.vh-pillar-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.vh-pillar-footer {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vh-desglose-btn {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10B981;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.vh-desglose-btn:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10B981;
}

/* Progressive Disclosure: Financial Breakdown Drawer */
.vh-desglose-panel {
  display: none;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  animation: vhFadeSlideDown 0.25s ease-out;
}

.vh-desglose-panel.active {
  display: block;
}

.vh-desglose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.vh-desglose-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
}

.vh-desglose-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.vh-desglose-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

@keyframes vhFadeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SEGMENTED TABS NAVIGATION
   ========================================================================== */

.vh-detail-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.vh-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.vh-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.vh-tab-btn.active {
  color: #10B981;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.vh-tab-badge {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.vh-tab-btn.active .vh-tab-badge {
  background: #10B981;
  color: #064e3b;
}

.vh-tab-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  animation: pulseDot 1.8s infinite;
}

.vh-tab-alert-dot.danger {
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

/* Tab Containers */
.vh-tab-content {
  display: none;
}

.vh-tab-content.active {
  display: block;
  animation: vhFadeSlideDown 0.2s ease-out;
}

/* ==========================================================================
   MAINTENANCE & PREDICTIVE DAILY KM SYSTEM
   ========================================================================== */

.vh-maint-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Alert Banner */
.vh-maint-alert-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  flex-wrap: wrap;
}

.vh-maint-alert-box.ok {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10B981;
}

.vh-maint-alert-box.warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #F59E0B;
}

.vh-maint-alert-box.danger {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #EF4444;
}

.vh-maint-alert-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vh-maint-alert-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vh-maint-alert-box.ok .vh-maint-alert-icon { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.vh-maint-alert-box.warning .vh-maint-alert-icon { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.vh-maint-alert-box.danger .vh-maint-alert-icon { background: rgba(239, 68, 68, 0.15); color: #EF4444; }

.vh-maint-alert-text h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 3px 0;
  color: inherit;
}

.vh-maint-alert-text p {
  font-size: 12px;
  margin: 0;
  color: var(--text-muted);
}

/* Odometer & Milestone Grid */
.vh-odometer-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
}

.vh-odometer-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vh-odometer-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0;
}

.vh-odometer-real {
  font-size: 32px;
  font-weight: 800;
  font-family: 'Outfit', -apple-system, sans-serif;
  color: #10B981;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.vh-odometer-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.vh-odometer-sub {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Progress toward milestone */
.vh-cycle-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
}

.vh-cycle-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vh-cycle-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.vh-cycle-progress-bar-wrap {
  height: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.vh-cycle-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #10B981, #059669);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vh-cycle-progress-fill.warning {
  background: linear-gradient(90deg, #F59E0B, #D97706);
}

.vh-cycle-progress-fill.danger {
  background: linear-gradient(90deg, #EF4444, #B91C1C);
}

.vh-cycle-markers {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
}

.vh-cycle-meta-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.vh-meta-chip {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
}

.vh-meta-chip-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.vh-meta-chip-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
}

/* Daily KM Chart Card & Minimalist Dashboard */
.vh-maint-dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vh-maint-minimal-bar {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr auto;
  align-items: center;
  gap: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 18px;
  transition: all 0.25s ease;
}

.vh-maint-minimal-bar.ok {
  border-left: 3px solid #10B981;
}

.vh-maint-minimal-bar.warning {
  border-left: 3px solid #F59E0B;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.05), var(--bg-card) 35%);
}

.vh-maint-minimal-bar.danger {
  border-left: 3px solid #EF4444;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.07), var(--bg-card) 35%);
}

.vh-maint-minimal-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vh-maint-cycle-tag {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vh-maint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  flex-shrink: 0;
}

.vh-maint-dot.warning {
  background: #F59E0B;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.vh-maint-dot.danger {
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.vh-maint-cycle-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.vh-maint-cycle-status {
  font-size: 11.5px;
  color: var(--text-muted);
}

.vh-tag-danger {
  color: #EF4444;
  font-weight: 600;
}

.vh-tag-warning {
  color: #F59E0B;
  font-weight: 600;
}

.vh-maint-minimal-center {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.vh-maint-prog-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.vh-cycle-progress-bar-wrap.minimal {
  height: 7px;
  margin: 3px 0 2px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.vh-maint-prog-sub {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted);
}

.vh-maint-minimal-right {
  display: flex;
  justify-content: flex-end;
}

.vh-daily-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
}

.vh-daily-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.vh-daily-chart-wrap {
  height: 280px;
  position: relative;
  width: 100%;
}

.vh-proj-select {
  width: auto !important;
  height: 28px !important;
  font-size: 11.5px !important;
  padding: 0 24px 0 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--text-primary) !important;
  cursor: pointer;
}

.vh-chart-mini-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.vh-chart-mini-footer .vh-sep {
  color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
  .vh-pillars-grid {
    grid-template-columns: 1fr;
  }
  .vh-desglose-grid {
    grid-template-columns: 1fr 1fr;
  }
  .vh-maint-minimal-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .vh-maint-minimal-center {
    border: none;
    padding: 0;
  }
  .vh-maint-minimal-right {
    justify-content: stretch;
  }
  .vh-maint-minimal-right button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   GENERATE BILL SIMPLIFICADO (v3)
   Lista plana de gastos + resumen sticky
   ========================================== */

.vh-ded-simple-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}

.vh-simple-ded-row {
  display: grid;
  grid-template-columns: 18px 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card, #1a2421);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.vh-simple-ded-row:hover {
  border-color: var(--primary, #2D6A4F);
}

.vh-simple-ded-row.not-deduction {
  opacity: 0.55;
}

.vh-simple-ded-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #2D6A4F);
  cursor: pointer;
}

.vh-simple-ded-icon {
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.vh-simple-ded-info {
  min-width: 0;
}

.vh-simple-ded-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main, #f4f7f4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vh-simple-ded-meta {
  font-size: 11px;
  color: var(--text-muted, #9bb0a2);
  margin-top: 2px;
}

.vh-simple-ded-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.vh-simple-ded-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #f4f7f4);
  font-family: var(--font-display, inherit);
}

.vh-simple-ded-split {
  display: flex;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
}

.vh-simple-ded-split .cond {
  color: #f87171;
}

.vh-simple-ded-split .owner {
  color: var(--income, #38a169);
}

.vh-simple-summary {
  margin-top: 20px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}

.vh-simple-summary-header {
  background: linear-gradient(135deg, var(--primary-moss, #52B788), var(--primary, #2D6A4F));
  color: white;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.vh-simple-summary-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vh-simple-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-main, #f4f7f4);
}

.vh-simple-row > span {
  color: var(--text-muted, #9bb0a2);
}

.vh-simple-row > strong {
  font-family: var(--font-display, inherit);
  font-weight: 700;
}

.vh-simple-row.cond > strong {
  color: var(--income, #38a169);
}

.vh-simple-row.total {
  font-size: 14px;
  font-weight: 700;
}

.vh-simple-row.total.cond strong {
  color: var(--primary-moss, #52B788);
  font-size: 18px;
}

.vh-simple-row.total.owner strong {
  color: #f59e0b;
  font-size: 18px;
}

.vh-simple-divider {
  height: 1px;
  background: var(--border-color, rgba(255, 255, 255, 0.12));
  margin: 8px 0 4px;
}

.vh-simple-summary-empty {
  padding: 18px;
  text-align: center;
  color: var(--text-muted, #9bb0a2);
  font-size: 13px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  margin-top: 18px;
}

.vh-ded-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-muted, #9bb0a2);
  font-size: 12px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px dashed var(--border-color, rgba(255, 255, 255, 0.08));
}

/* ==========================================
   EXPENSE MODAL v3 (simplificado)
   5 campos + toggle deducción + slider presets
   ========================================== */

.vh-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #9bb0a2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.vh-input {
  width: 100%;
  background: var(--bg-input, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--border-glass, rgba(20, 34, 26, 0.1));
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text-main, #14221A);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vh-input:focus {
  outline: none;
  border-color: var(--primary, #2D6A4F);
  background: var(--bg-card, #FFFFFF);
}

.vh-conductor-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(45, 106, 79, 0.06);
  border: 1px solid rgba(45, 106, 79, 0.25);
  border-radius: 10px;
  min-height: 38px;
}

.vh-conductor-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-moss, #52B788), var(--primary, #2D6A4F));
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.vh-conductor-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main, #f4f7f4);
}

.vh-split-block {
  margin-top: 18px;
  padding: 14px;
  background: var(--bg-card-subtle, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}

.vh-split-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.vh-split-toggle-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main, #f4f7f4);
}

.vh-toggle-pair {
  display: flex;
  gap: 4px;
  background: var(--bg-input, rgba(0, 0, 0, 0.25));
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border-glass, rgba(20, 34, 26, 0.08));
}

.vh-toggle-opt {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  background: transparent;
  color: var(--text-muted, #9bb0a2);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vh-toggle-opt:hover:not(.active) {
  color: var(--text-main, #f4f7f4);
}

.vh-toggle-opt.active {
  background: linear-gradient(135deg, var(--primary-moss, #52B788), var(--primary, #2D6A4F));
  color: white;
  box-shadow: 0 2px 8px rgba(45, 106, 79, 0.3);
}

.vh-split-summary-card {
  margin-top: 14px;
  background: var(--bg-card, #1a2421);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vh-split-summary-card.owner-only {
  background: rgba(217, 74, 74, 0.06);
  border-color: rgba(217, 74, 74, 0.2);
}

.vh-split-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 12px;
}

.vh-split-summary-row > span {
  color: var(--text-muted, #9bb0a2);
}

.vh-split-summary-row > strong {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 14px;
}

.vh-split-summary-row .vh-split-cond-value {
  color: var(--primary-moss, #52B788);
}

.vh-split-summary-hint {
  font-size: 11px;
  color: var(--text-muted, #9bb0a2);
  font-style: italic;
  border-top: 1px dashed var(--border-color, rgba(255, 255, 255, 0.08));
  padding-top: 8px;
}

.vh-split-presets-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.vh-preset-pill {
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-input, rgba(0, 0, 0, 0.3));
  color: var(--text-main, #f4f7f4);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vh-preset-pill:hover:not(.active) {
  border-color: var(--primary, #2D6A4F);
}

.vh-preset-pill.active {
  background: linear-gradient(135deg, var(--primary-moss, #52B788), var(--primary, #2D6A4F));
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(45, 106, 79, 0.3);
}

.vh-split-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vh-split-slider-row input[type="range"] {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--income, #38A169) 0%, var(--income) var(--vh-pct, 50%), var(--border-color, #DEE5DD) var(--vh-pct, 50%), var(--border-color, #DEE5DD) 100%);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.vh-split-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: white;
  border: 3px solid var(--primary-moss, #52B788);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.vh-split-slider-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: white;
  border: 3px solid var(--primary-moss, #52B788);
  border-radius: 50%;
  cursor: pointer;
}

.vh-split-pct-badge {
  min-width: 44px;
  text-align: center;
  padding: 4px 10px;
  background: var(--bg-input, rgba(0, 0, 0, 0.3));
  color: var(--primary-moss, #52B788);
  font-weight: 800;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(45, 106, 79, 0.25);
}

@media (max-width: 768px) {
  .vh-simple-ded-row {
    grid-template-columns: 18px 1fr auto;
  }
  .vh-simple-ded-icon {
    display: none;
  }
  .vh-simple-ded-amounts {
    align-items: flex-end;
  }
  .vh-simple-ded-split {
    flex-direction: column;
    gap: 2px;
  }
}

/* ==========================================
   PARTNERS & EQUITY DISTRIBUTION (ALIANZAS)
   ========================================== */
.vh-partners-hero-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(20, 26, 38, 0.95) 50%, rgba(16, 185, 129, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
  margin-bottom: 20px;
}
.vh-partners-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.vh-partners-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.vh-equity-bar-wrapper {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
}
.vh-equity-bar-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.vh-equity-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 12px;
}
.vh-equity-segment {
  height: 100%;
  transition: width 0.3s ease;
}
.vh-equity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.vh-equity-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.vh-equity-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.vh-equity-name {
  color: var(--text-primary);
}
.vh-equity-pct {
  color: var(--text-muted);
}
.vh-partners-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.vh-partner-card {
  background: var(--bg-surface, #1e293b);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.vh-partner-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.vh-partner-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vh-tag-titular {
  font-size: 9.5px;
  padding: 1px 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border-radius: 4px;
  font-weight: 700;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.vh-partner-doc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.vh-partner-share-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}
.vh-partner-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.vh-partner-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vh-partner-stat .label {
  color: var(--text-muted);
}
.vh-partner-stat .val {
  color: var(--text-primary);
  font-weight: 600;
}
.vh-partner-bank {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.vh-partner-notes {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px solid rgba(139, 92, 246, 0.4);
  padding-left: 6px;
  margin-top: 4px;
}
.vh-table-responsive {
  width: 100%;
  overflow-x: auto;
}
.vh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.vh-table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vh-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  vertical-align: middle;
}

/* ==========================================
   PARTNER PAYOUT CYCLE & REMINDERS (v4)
   ========================================== */
.vh-card-partner-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.vh-card-partner-reminder.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.vh-card-partner-reminder.ok {
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ========================================================================== */
/* ESTILOS AESTHETIC: MÓDULO DE INVERSIÓN Y LIQUIDACIÓN A SOCIOS             */
/* ========================================================================== */

.vh-partners-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1. Tarjeta Hero de Capital y Acciones */
.vh-partners-hero-card {
  background: linear-gradient(135deg, rgba(24, 28, 40, 0.95), rgba(16, 20, 30, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.vh-partners-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.vh-partners-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.vh-partners-hero-title svg {
  background: rgba(139, 92, 246, 0.15);
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-sizing: content-box;
}

/* 2. Grid de KPIs Glassmorphic */
.vh-partners-hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.vh-partner-metric {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.vh-partner-metric:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.vh-partner-metric .label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted, #94a3b8);
}

.vh-partner-metric .val {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.vh-partner-metric .sub {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

/* 3. Equity Bar */
.vh-equity-bar-wrapper {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px 16px;
}

.vh-equity-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 10px;
}

.vh-equity-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.vh-equity-segment {
  height: 100%;
  transition: width 0.5s ease;
}

.vh-equity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.vh-equity-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.vh-equity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* 4. Tarjeta de Liquidación y Políticas de Pago */
.vh-payout-cycle-card {
  background: linear-gradient(135deg, rgba(24, 28, 40, 0.95), rgba(16, 20, 30, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.45);
}

.vh-payout-cycle-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 18px;
}

.vh-payout-policy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 8px;
}

.vh-payout-freq-group {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.vh-payout-freq-pill {
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vh-payout-freq-pill:hover {
  color: #ffffff;
}

.vh-payout-freq-pill.active {
  background: #8B5CF6;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
}

/* 5. Grid de Tarjetas de Socios */
.vh-payout-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.vh-payout-partner-card {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.2s ease;
}

.vh-payout-partner-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.vh-payout-partner-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vh-payout-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.3));
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.vh-payout-partner-info {
  flex: 1;
  min-width: 0;
}

.vh-payout-partner-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vh-payout-partner-meta {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

/* 6. Bloque de Liquidación Oficial */
.vh-payout-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
}

.vh-payout-box.pending {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.04);
}

.vh-payout-box.settled {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.03);
}

.vh-payout-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.vh-payout-period-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
}

.vh-pill-status {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vh-pill-status.ok {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.vh-pill-status.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.vh-pill-status.info {
  background: rgba(59, 130, 246, 0.12);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.vh-payout-amount-big {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #10B981;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 4px 0 8px 0;
}

.vh-payout-amount-big.zero {
  color: #64748b;
  font-size: 22px;
}

.vh-payout-expl {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  line-height: 1.45;
}

/* 7. Bloque de Operación en Curso */
.vh-payout-inprogress {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
}

.vh-payout-inprogress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.vh-payout-inprogress-row .label {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  display: block;
}

.vh-payout-inprogress-row .val {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.vh-payout-inprogress-row .val.green {
  color: #10B981;
}

.vh-payout-schedule-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
}

.vh-payout-schedule-info svg {
  color: #8B5CF6;
  flex-shrink: 0;
}

/* 8. Botones de Acción Estéticos */
.vh-btn-pay-now {
  width: 100%;
  height: 38px;
  border: none;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 10px;
}

.vh-btn-pay-now:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.vh-btn-pay-now:active {
  transform: translateY(0.5px) scale(0.99);
}

.vh-btn-advance-pay {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.1);
  color: #c4b5fd;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  margin-top: 10px;
}

.vh-btn-advance-pay:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
}

.vh-bank-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin: 10px 0;
}

.vh-bank-pill .copy-btn {
  border: none;
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vh-bank-pill .copy-btn:hover {
  background: #8B5CF6;
  color: #ffffff;
}

.vh-badge-paid-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 8px 12px;
  border-radius: 8px;
  color: #34D399;
  font-size: 11.5px;
  font-weight: 700;
}

.vh-btn-undo-pay {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}

.vh-btn-undo-pay:hover {
  color: #f87171;
}

/* 9. Recordatorio sutil en tarjeta exterior de vehículo */
.vh-card-partner-reminder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.vh-card-partner-reminder.pending {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #FBBF24;
}

.vh-card-partner-reminder.pending .dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
  display: inline-block;
  animation: vh-pulse 2s infinite ease-in-out;
}

.vh-card-partner-reminder.paid {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #34D399;
}

.vh-card-partner-reminder.paid .dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
}

@keyframes vh-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* =============================================================================
   10. MODAL VISTA PREVIA CUENTA DE COBRO (Aesthetic Invoice Style)
   ============================================================================= */

.vh-preview-invoice-container {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  color: var(--text-main, #f8fafc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.vh-preview-top-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.vh-preview-brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vh-preview-brand-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.vh-preview-doc-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vh-preview-num-badge {
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 6px;
}

.vh-preview-doc-sub {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

.vh-preview-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.4px;
}

.vh-preview-status-pill.pagada {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.vh-preview-status-pill.pendiente {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.vh-preview-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.vh-preview-meta-item {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 14px;
}

.vh-preview-meta-item .label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted, #94a3b8);
  display: block;
}

.vh-preview-meta-item .val {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  margin: 4px 0 2px 0;
}

.vh-preview-meta-item .sub {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.vh-plate-chip {
  background: #1e293b;
  border: 1px solid #475569;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 800;
  color: #e2e8f0;
  font-size: 11.5px;
}

.vh-preview-items-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}

.vh-preview-table {
  width: 100%;
  border-collapse: collapse;
}

.vh-preview-table th {
  background: rgba(30, 41, 59, 0.7);
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vh-preview-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  vertical-align: middle;
}

.vh-date-pill {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(139, 92, 246, 0.22);
}

.vh-preview-table .item-title {
  font-weight: 600;
  color: #f1f5f9;
}

.vh-preview-table .item-sub {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

.vh-preview-table .amount {
  font-weight: 700;
  font-size: 13px;
  text-align: right;
}

.vh-preview-table .val-base {
  color: #f8fafc;
}

.vh-preview-table .val-deduction {
  color: #f87171;
}

.vh-badge-charge {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.vh-badge-discount {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.vh-preview-summary-box {
  padding: 14px 18px;
  background: rgba(24, 32, 47, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vh-preview-summary-box .summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.vh-preview-summary-box .summary-line.discount {
  color: #f87171;
}

.vh-preview-summary-box .summary-line.total-net {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
}

.vh-preview-summary-box .summary-line.total-net .highlight {
  color: #818cf8;
  font-size: 16px;
  font-weight: 900;
}

.vh-preview-summary-box .summary-line.paid .green {
  color: #34d399;
  font-weight: 700;
}

.vh-preview-summary-box .summary-line.pending .amber {
  color: #fbbf24;
  font-weight: 700;
}

.vh-preview-summary-box .summary-line.zero-balance .green {
  color: #34d399;
  font-weight: 600;
}

.vh-preview-notes-card {
  background: rgba(30, 41, 59, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 14px;
  color: var(--text-muted, #94a3b8);
}

.vh-preview-notes-card p {
  margin: 3px 0 0 0;
  color: #e2e8f0;
}

.vh-preview-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.vh-preview-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.vh-preview-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.vh-preview-btn.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.vh-preview-btn.secondary {
  background: rgba(255, 255, 255, 0.07);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.vh-preview-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.vh-preview-btn.tertiary {
  background: transparent;
  color: var(--text-muted, #94a3b8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vh-preview-btn.tertiary:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

/* =============================================================================
   11. TARJETA COMPACTA DE REMUNERACIÓN A SOCIOS (Simple & Aesthetic)
   ============================================================================= */

.vh-equity-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 6px;
}

.vh-bank-pill-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.copy-mini-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c4b5fd;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.copy-mini-btn:hover {
  background: rgba(139, 92, 246, 0.25);
  color: #ffffff;
}

.vh-payout-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 14px 0 10px 0;
}

.vh-payout-compact-col {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vh-payout-compact-col.settled {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.03);
}

.vh-payout-compact-col.due {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.04);
}

.vh-payout-compact-col.inprogress {
  border-color: rgba(99, 102, 241, 0.2);
  background: rgba(99, 102, 241, 0.03);
}

.compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.compact-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #94a3b8);
}

.compact-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.compact-amount-row .amount {
  font-size: 19px;
  font-weight: 800;
  color: #f8fafc;
}

.compact-amount-row .amount.highlight {
  color: #818cf8;
}

.compact-amount-row .hint {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-left: 4px;
}

.compact-footer-hint {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  margin-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 6px;
}

.compact-footer-hint b {
  color: #e2e8f0;
}

.vh-btn-pay-now-compact {
  height: 28px;
  padding: 0 12px;
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vh-btn-pay-now-compact:hover {
  background: #059669;
}

.vh-btn-advance-compact {
  height: 28px;
  padding: 0 10px;
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vh-btn-advance-compact:hover {
  background: rgba(139, 92, 246, 0.3);
  color: #ffffff;
}

.vh-payout-card-bottom {
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
  margin-top: 6px;
}

/* =============================================================================
   SEGMENTED CONTROL DE GRANULARIDAD Y ODÓMETRO RÁPIDO
   ============================================================================= */
.vh-granularity-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.vh-gran-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.vh-gran-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
}

.vh-gran-btn.active {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.vh-odometer-quick-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.vh-odometer-quick-badge.real {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.vh-odometer-quick-badge.estimado {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.vh-btn-log-km {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.vh-btn-log-km:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}