/* ================================================================
   KUVOO -- Design System v4.0
   Bootstrap 5.3 | Inter | Font Awesome 6
   White Navbar layout + unified component library
   ================================================================ */

/* ── 1. CSS Variables ─────────────────────────────────────────── */
:root {
  --primary:          #2563EB;
  --primary-dark:     #1D4ED8;
  --primary-light:    #EFF6FF;
  --success:          #059669;
  --success-light:    #ECFDF5;
  --danger:           #DC2626;
  --danger-light:     #FEF2F2;
  --warning:          #D97706;
  --warning-light:    #FFFBEB;
  --info:             #0284C7;
  --info-light:       #F0F9FF;
  --navbar-h:         56px;
  --bg:               #F1F5F9;
  --surface:          #FFFFFF;
  --border:           #E2E8F0;
  --text:             #0F172A;
  --text-secondary:   #64748B;
  --text-muted:       #94A3B8;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --r-sm:  0.375rem;
  --r:     0.5rem;
  --r-lg:  0.75rem;
  --r-xl:  1rem;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Legacy compat */
  --primary-color:var(--primary); --primary-dark:#1D4ED8;
  --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0;
  --gray-300:#CBD5E1; --gray-400:#94A3B8; --gray-500:#64748B;
  --gray-600:#475569; --gray-700:#334155; --gray-800:#1E293B;
  --gray-900:#0F172A; --white:#FFFFFF;
  --border-radius:var(--r-lg); --border-radius-sm:var(--r-sm);
  --success-color:#059669; --danger-color:#DC2626;
  --warning-color:#D97706; --info-color:#0284C7; --secondary-color:#64748B;
}

/* ── 2. Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* ── 3. Navbar ────────────────────────────────────────────────── */
.kuvoo-navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  height: auto;
  min-height: var(--navbar-h);
  padding: 0.375rem 0;
  z-index: 1030;
}
.navbar-brand-logo {
  height: 28px;
  max-height: 28px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 576px) {
  .navbar-brand-logo {
    height: 24px;
    max-height: 24px;
  }
}

.kuvoo-navbar .nav-link {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  transition: color .12s, background .12s;
}
.kuvoo-navbar .nav-link:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.kuvoo-navbar .nav-link.active {
  color: var(--primary);
  font-weight: 600;
}
.kuvoo-navbar .navbar-toggler {
  border: 1px solid var(--border);
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
}
.kuvoo-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.topbar-user-btn:hover { background: var(--bg); }
.kuvoo-user-menu { min-width: 220px; }
.kuvoo-user-email { font-size: 0.75rem; }
.kuvoo-membership-badge { font-size: 0.65rem; }
.kuvoo-readonly-banner { border-radius: 0 !important; }
.kuvoo-toast-stack { z-index: 1100; }
.topbar-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 7. Page Content ──────────────────────────────────────────── */
.page-content { flex: 1; padding: 1.5rem; min-width: 0; }
.messages-container { margin-bottom: 1.25rem; }

/* ── 8. Page Header ───────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.page-title   { font-size: 1.375rem; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
.page-subtitle{ font-size: 0.8125rem; color: var(--text-secondary); margin: 0.2rem 0 0; }
.page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── 9. Stat Cards ────────────────────────────────────────────── */
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.25rem; transition: box-shadow .15s;
}
.stat-card:hover { box-shadow: var(--shadow-lg); }
.stat-icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.stat-icon.blue, .stat-icon.primary   { background: #EFF6FF; color: #2563EB; }
.stat-icon.green, .stat-icon.success,
.stat-icon.today, .stat-icon.paid     { background: #ECFDF5; color: #059669; }
.stat-icon.red, .stat-icon.danger,
.stat-icon.to-pay, .stat-icon.credito { background: #FEF2F2; color: #DC2626; }
.stat-icon.yellow, .stat-icon.warning,
.stat-icon.pending                    { background: #FFFBEB; color: #D97706; }
.stat-icon.purple, .stat-icon.average { background: #F5F3FF; color: #7C3AED; }
.stat-icon.secondary, .stat-icon.total{ background: #F1F5F9; color: #475569; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.stat-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.125rem; }

/* ── 10. Cards ────────────────────────────────────────────────── */
.kuvoo-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs);
}
.kuvoo-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); gap: 0.75rem; flex-wrap: wrap;
}
.kuvoo-card-title { font-size: 0.9375rem; font-weight: 600; margin: 0; color: var(--text); }
.kuvoo-card-body { padding: 1.25rem; }

.table-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs);
}
.table-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 0.75rem;
}
.table-card-title { font-size: 0.9375rem; font-weight: 600; margin: 0; }

/* ── 11. Tables ───────────────────────────────────────────────── */
.kuvoo-table { width: 100%; border-collapse: collapse; }
.kuvoo-table thead th {
  background: #F8FAFC; color: var(--text-secondary); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.kuvoo-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.kuvoo-table tbody tr:last-child { border-bottom: 0; }
.kuvoo-table tbody tr:hover { background: #F8FAFC; }
.kuvoo-table tbody td { padding: 0.8rem 1rem; vertical-align: middle; font-size: 0.875rem; }

/* ── 12. Filter Bar ───────────────────────────────────────────── */
.filters-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1rem 1.25rem;
  margin-bottom: 1.25rem; box-shadow: var(--shadow-xs);
}
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; align-items: end; }
.filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
.filter-label { font-size: 0.7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.filter-input {
  padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 0.875rem; background: white; color: var(--text);
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.filter-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* ── 13. Status Badges ────────────────────────────────────────── */
.badge-status {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border-radius: 99px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.badge-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-completada, .badge-pagado, .badge-activo, .badge-aprobado { background: #DCFCE7; color: #166534; }
.badge-pendiente, .badge-proceso { background: #FEF9C3; color: #854D0E; }
.badge-cancelada, .badge-rechazado, .badge-inactivo { background: #FEE2E2; color: #991B1B; }
.badge-credito, .badge-por_pagar { background: #FEE2E2; color: #991B1B; }
.badge-cobrar { background: #DBEAFE; color: #1E40AF; }
.badge-parcial { background: #E0E7FF; color: #3730A3; }

/* ── 14. Empty State ──────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }

/* ── Onboarding specific tweaks ───────────────────────────────── */
.onboarding-page main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3.5rem 1rem;
  background-color: var(--bg);
}

.onboarding-card {
  max-width: 680px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  padding: 2.5rem;
}

.onboarding-header h1 {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 48px;
  margin-bottom: .25rem;
  line-height: 1;
}


@media (max-width: 768px) {
  .onboarding-header h1 { font-size: 36px; text-align: center; }
  .onboarding-card { padding: 1.25rem; }
}
.empty-state i { font-size: 2.75rem; margin-bottom: 1rem; opacity: .3; display: block; }
.empty-state p { font-size: 0.9rem; margin-bottom: 1rem; color: var(--text-secondary); }

/* ── 15. Action Buttons ───────────────────────────────────────── */
.action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.25rem 0.75rem;
  text-decoration: none; color: var(--text); font-size: 0.8rem; font-weight: 500;
  transition: border-color .15s, box-shadow .15s, transform .15s, color .15s;
  text-align: center; box-shadow: var(--shadow-xs);
}
.action-btn i { font-size: 1.375rem; color: var(--primary); }
.action-btn:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(37,99,235,.15); color: var(--primary); transform: translateY(-2px); }
.action-btn.primary-action { background: var(--primary); border-color: var(--primary); color: #fff; }
.action-btn.primary-action i { color: #fff; }
.action-btn.primary-action:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

/* ── 16. Dashboard ────────────────────────────────────────────── */
.dashboard-container { }
.dashboard-header {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem; margin: -1.5rem -1.5rem 1.5rem;
}
.dashboard-title   { font-size: 1.25rem; font-weight: 700; margin: 0; }
.dashboard-subtitle{ color: var(--text-secondary); font-size: 0.8125rem; margin: 0.2rem 0 0; }
.dashboard-date    { font-size: 0.8rem; color: var(--text-secondary); }
.section-header    { margin-bottom: 0.75rem; }
.section-title     { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.section-subtitle  { font-size: 0.8125rem; }

/* Content cards */
.content-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.content-header { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); }
.content-title { font-size: 0.9rem; font-weight: 600; margin: 0; }
.content-body  { padding: 0; }
.item-list { list-style: none; padding: 0; margin: 0; }
.item-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); gap: 0.75rem; }
.item-list li:last-child { border-bottom: 0; }
.item-list li:hover { background: #F8FAFC; }
.item-title  { font-size: 0.875rem; font-weight: 500; }
.item-subtitle { font-size: 0.75rem; color: var(--text-secondary); }
.item-amount { font-size: 0.9rem; font-weight: 600; }
.item-badge  { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 99px; font-size: 0.7rem; font-weight: 700; background: var(--primary-light); color: var(--primary); }
.item-badge.badge-danger { background: var(--danger-light); color: var(--danger); }

/* ── 17. Module Containers (legacy) ───────────────────────────── */
.ventas-container, .gastos-container { }
.ventas-header, .gastos-header { margin-bottom: 1.5rem; }
.ventas-title, .gastos-title { font-size: 1.375rem; font-weight: 700; margin: 0; }
.ventas-subtitle, .gastos-subtitle { font-size: 0.8125rem; color: var(--text-secondary); margin: 0.2rem 0 0; }
.ventas-stats, .gastos-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.ventas-stat-card, .gastos-stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem;
  box-shadow: var(--shadow-xs); transition: box-shadow .15s;
}
.ventas-stat-card:hover, .gastos-stat-card:hover { box-shadow: var(--shadow-lg); }
.ventas-filters, .gastos-filters {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1rem 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-xs);
}
.ventas-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.venta-card, .gasto-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.25rem; transition: box-shadow .15s; box-shadow: var(--shadow-xs);
}
.venta-card:hover, .gasto-card:hover { box-shadow: var(--shadow-lg); }

/* ── 18. POS ──────────────────────────────────────────────────── */
.pos-page { background: var(--bg); }
.pos-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.75rem 1.25rem; margin: -1.5rem -1.5rem 1rem; }
.pos-header h5 { margin: 0; font-weight: 600; color: var(--text); }
.filtros-compactos { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros-compactos input, .filtros-compactos select {
  font-size: 0.875rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: white;
}
.filtros-compactos input:focus, .filtros-compactos select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* ── 19. Forms ────────────────────────────────────────────────── */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-xs); }
.form-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }

/* ── 20. Bootstrap Overrides ──────────────────────────────────── */
.btn { font-size: 0.8125rem; font-weight: 500; border-radius: var(--r-sm); }
.btn-primary  { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-sm { font-size: 0.75rem; padding: 0.3rem 0.65rem; }
.btn-lg { font-size: 0.9375rem; }
.card { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.card-header { background: #F8FAFC; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.875rem; }
.alert { border-radius: var(--r); border: 0; font-size: 0.875rem; }
.alert-success { background: #DCFCE7; color: #15803D; }
.alert-danger  { background: #FEE2E2; color: #B91C1C; }
.alert-warning { background: #FEF9C3; color: #854D0E; }
.alert-info    { background: #DBEAFE; color: #1D4ED8; }
.dropdown-menu { border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--r); padding: 0.375rem; font-size: 0.875rem; }
.dropdown-item { border-radius: var(--r-sm); padding: 0.45rem 0.75rem; color: var(--text); font-size: 0.8125rem; transition: background .1s, color .1s; }
.dropdown-item:hover  { background: var(--bg); color: var(--primary); }
.dropdown-item.active { background: var(--primary); color: #fff; }
.dropdown-header { font-size: 0.7rem; color: var(--text-secondary); padding: 0.4rem 0.75rem; font-weight: 600; }
.dropdown-divider { margin: 0.375rem 0; border-color: var(--border); }
.form-control, .form-select { font-size: 0.875rem; border-color: var(--border); border-radius: var(--r-sm); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.3rem; }
.table { font-size: 0.875rem; }
.table thead th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); border-bottom: 1px solid var(--border); background: #F8FAFC; }
.table > :not(caption) > * > * { padding: 0.75rem 1rem; }
.table-hover > tbody > tr:hover > * { background: #F8FAFC; }
.badge { font-size: 0.7rem; font-weight: 700; letter-spacing: .02em; }
.pagination { gap: 0.2rem; margin: 0; }
.page-link { border-radius: var(--r-sm) !important; border: 1px solid var(--border); color: var(--text); font-size: 0.8rem; padding: 0.35rem 0.65rem; transition: background .1s, color .1s; }
.page-link:hover { background: var(--bg); color: var(--primary); border-color: var(--primary); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
.page-item.disabled .page-link { color: var(--text-muted); }

/* ── 21. Onboarding ───────────────────────────────────────────── */
.onboarding-steps span { position: relative; }
.onboarding-page main { max-width: 900px; padding-top: 1rem; }

/* ── 22. Utilities ────────────────────────────────────────────── */
.hover-shadow { transition: box-shadow .15s, transform .15s; }
.hover-shadow:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.fs-xs { font-size: 0.75rem; }
.fs-sm { font-size: 0.8125rem; }
.fw-700 { font-weight: 700; }
.cursor-pointer { cursor: pointer; }
.text-balance { text-wrap: balance; }
.rounded-pill-sm { border-radius: 99px; }

/* ── 23. Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .page-content { padding: 1rem; }
  .ventas-stats, .gastos-stats { grid-template-columns: repeat(2, 1fr); }
  .filters-grid { grid-template-columns: repeat(2, 1fr); }
  .kuvoo-navbar .navbar-nav { padding: 0.5rem 0; }
  .kuvoo-navbar .nav-link { padding: 0.5rem 0.5rem; }
}
@media (max-width: 575.98px) {
  .page-header  { flex-direction: column; }
  .page-actions { width: 100%; }
  .ventas-stats, .gastos-stats { grid-template-columns: repeat(2, 1fr); }
  .filters-grid { grid-template-columns: 1fr; }
  .stat-value   { font-size: 1.25rem; }
  .page-content { padding: 0.875rem; }
  .dashboard-header { margin: -0.875rem -0.875rem 1.25rem; padding: 0.875rem; }
  .pos-header { margin: -0.875rem -0.875rem 1rem; }
}
@media print {
  .kuvoo-navbar, .page-actions, .filters-bar,
  .alert-dismissible .btn-close { display: none !important; }
  .page-content { padding: 0; }
}
/* ── 24. Layout: Form + Resumen ───────────────────────────────── */
.grid-form-resumen {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .grid-form-resumen { grid-template-columns: 1fr 320px; }
}

@media (max-width: 991.98px) {
    .grid-form-resumen { grid-template-columns: 1fr; }
}

.resumen-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--navbar-h) + 1.5rem);
    max-height: calc(100vh - var(--navbar-h) - 3rem);
    overflow-y: auto;
}

.resumen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.resumen-header h6 { margin: 0; font-weight: 700; font-size: 0.9375rem; color: var(--text); }

.card-bloque {
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 1rem;
    overflow: hidden;
    background: var(--surface);
    flex-shrink: 0;
}

.bloque-titulo {
    background: var(--gray-50);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bloque-titulo i { color: var(--primary); font-size: 0.8rem; }
.bloque-body { padding: 1rem; }

/* Compact Form Groups */
.fgroup { margin-bottom: 1rem; }
.fgroup:last-child { margin-bottom: 0; }
.fgroup label { display: block; margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); transition: color .15s; }
.fgroup label.req::after { content: ' *'; color: var(--danger); }
.fgroup:focus-within label { color: var(--primary); }

.fgroup input, .fgroup select, .fgroup textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--white);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Inputs with symbol prefix */
.monto-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding-left: 0.75rem;
    background: var(--white);
    transition: border-color .15s, box-shadow .15s;
}
.monto-input-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.monto-input-wrap span {
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 0.5rem;
    font-size: 0.875rem;
}
.monto-input-wrap input {
    border: none !important;
    padding: 0.5rem 0.75rem 0.5rem 0 !important;
    width: 100%;
    outline: none;
    background: transparent !important;
    font-size: 0.875rem;
    box-shadow: none !important;
}

/* 2-col form specific rows */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }