/* ============================================
   FXF Prestamos — Velonic Design System (Full)
   Bootstrap 5.3+ / Remix Icons / ApexCharts
   Primary: #4489e4 | Body: #f2f2f7
   ============================================ */

:root {
  /* Brand */
  --fxf-primary: #4489e4;
  --fxf-primary-rgb: 68, 137, 228;
  --fxf-success: #3bc0c3;
  --fxf-success-rgb: 59, 192, 195;
  --fxf-danger: #d03f3f;
  --fxf-danger-rgb: 208, 63, 63;
  --fxf-warning: #edc755;
  --fxf-warning-rgb: 237, 199, 85;
  --fxf-info: #33b0e0;
  --fxf-info-rgb: 51, 176, 224;
  --fxf-pink: #f24f7c;
  --fxf-pink-rgb: 242, 79, 124;
  --fxf-purple: #716cb0;
  --fxf-purple-rgb: 113, 108, 176;
  --fxf-dark: #212529;
  --fxf-dark-deep: #1a2942;
  --fxf-secondary: #6c757d;
  --fxf-secondary-rgb: 108, 117, 125;

  /* Surfaces */
  --fxf-body-bg: #f2f2f7;
  --fxf-card-bg: #ffffff;
  --fxf-sidebar-bg: #ffffff;
  --fxf-topbar-bg: #ffffff;
  --fxf-topbar-color: #495057;
  --fxf-topbar-height: 70px;

  /* Text */
  --fxf-body-color: #495057;
  --fxf-muted: #6c757d;
  --fxf-heading-color: #212529;
  --fxf-link-color: #4489e4;

  /* Borders */
  --fxf-border-color: #dee2e6;
  --fxf-border-radius: 0.25rem;
  --fxf-border-radius-lg: 0.3rem;

  /* Shadows */
  --fxf-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
  --fxf-box-shadow-sm: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
  --fxf-topbar-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

  /* Sidebar */
  --fxf-sidebar-width: 250px;
  --fxf-sidebar-collapsed-width: 70px;
}

/* ============================================
   Base
   ============================================ */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  background: var(--fxf-body-bg);
  color: var(--fxf-body-color);
  margin: 0;
  overflow-x: hidden;
}

a { color: var(--fxf-link-color); text-decoration: none; }
a:hover { color: #3a7ad4; }

/* ============================================
   Bootstrap Overrides
   ============================================ */
.btn-primary { background: var(--fxf-primary); border-color: var(--fxf-primary); }
.btn-primary:hover { background: #3a7ad4; border-color: #3a7ad4; }
.btn-success { background: var(--fxf-success); border-color: var(--fxf-success); }
.btn-success:hover { background: #32a6a9; border-color: #32a6a9; }
.btn-danger { background: var(--fxf-danger); border-color: var(--fxf-danger); }
.btn-danger:hover { background: #b53636; border-color: #b53636; }
.btn-warning { background: var(--fxf-warning); border-color: var(--fxf-warning); color: #212529; }
.btn-info { background: var(--fxf-info); border-color: var(--fxf-info); }
.btn-pink { background: var(--fxf-pink); border-color: var(--fxf-pink); color: #fff; }
.btn-purple { background: var(--fxf-purple); border-color: var(--fxf-purple); color: #fff; }

/* ============================================
   Layout
   ============================================ */
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* ============================================
   Topbar (navbar-custom)
   ============================================ */
.navbar-custom {
  background: var(--fxf-topbar-bg);
  height: var(--fxf-topbar-height);
  box-shadow: var(--fxf-topbar-shadow);
  position: sticky; top: 0; z-index: 1000;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--fxf-topbar-height); padding: 0 20px;
}
.logo-topbar { font-size: 1.25rem; font-weight: 700; color: var(--fxf-primary); }
.logo-topbar a { color: var(--fxf-primary); text-decoration: none; }

.button-toggle-menu {
  background: none; border: none; font-size: 1.375rem;
  color: var(--fxf-body-color); cursor: pointer; padding: 4px 8px;
}
.button-toggle-menu:hover { color: var(--fxf-primary); }

.topbar-menu { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 12px; }
.topbar-menu .nav-link {
  color: var(--fxf-body-color); font-size: 1.375rem; padding: 4px;
  position: relative; cursor: pointer; display: flex; align-items: center; text-decoration: none;
}
.topbar-menu .nav-link:hover { color: var(--fxf-primary); }
.topbar-menu .nav-user img { width: 32px; height: 32px; border-radius: 50%; }

.noti-icon-badge {
  position: absolute; top: -2px; right: -4px;
  font-size: 0.6rem; padding: 2px 5px; border-radius: 50%;
}

/* App Search */
.app-search { position: relative; }
.app-search .form-control {
  border: none; background: var(--fxf-body-bg); border-radius: 20px;
  padding: 8px 16px 8px 36px; font-size: 0.875rem; width: 220px;
}
.app-search .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1.1rem;
}

/* ============================================
   Sidebar (leftside-menu)
   ============================================ */
.leftside-menu {
  position: fixed; top: var(--fxf-topbar-height); left: 0; bottom: 0;
  width: var(--fxf-sidebar-width); min-width: var(--fxf-sidebar-width);
  background: var(--fxf-sidebar-bg);
  border-right: 1px solid var(--fxf-border-color);
  z-index: 999; overflow-y: auto;
  transition: transform 0.3s;
}

.side-nav { list-style: none; padding: 8px 0; margin: 0; }
.side-nav-title {
  padding: 12px 20px 6px; font-size: 0.6875rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fxf-muted);
}
.side-nav-item { position: relative; }

.side-nav-link {
  display: flex; align-items: center; padding: 10px 20px;
  color: var(--fxf-muted); font-size: 0.875rem; font-weight: 500;
  transition: all 0.2s; border-left: 3px solid transparent; text-decoration: none;
  cursor: pointer;
}
.side-nav-link:hover { color: var(--fxf-dark); background: rgba(var(--fxf-primary-rgb), 0.05); }
.side-nav-link.active { color: var(--fxf-primary); border-left-color: var(--fxf-primary); background: rgba(var(--fxf-primary-rgb), 0.08); }
.side-nav-link i { font-size: 1.1rem; margin-right: 10px; width: 20px; text-align: center; }
.side-nav-link .menu-arrow {
  margin-left: auto; font-size: 0.875rem; transition: transform 0.3s;
}
.side-nav-link[aria-expanded="true"] .menu-arrow { transform: rotate(90deg); }
.side-nav-link .badge { margin-left: auto; }

.side-nav-second-level { list-style: none; padding: 0; margin: 0; background: rgba(0,0,0,0.02); }
.side-nav-second-level a {
  display: block; padding: 8px 20px 8px 50px;
  color: var(--fxf-muted); font-size: 0.8125rem; text-decoration: none;
}
.side-nav-second-level a:hover { color: var(--fxf-dark); }
.side-nav-second-level a.active { color: var(--fxf-primary); }

.side-nav-third-level { list-style: none; padding: 0; margin: 0; background: rgba(0,0,0,0.04); }
.side-nav-third-level a {
  display: block; padding: 8px 20px 8px 60px;
  color: var(--fxf-muted); font-size: 0.8125rem; text-decoration: none;
}

/* Sidebar Logo */
.leftside-menu .logo { display: flex; justify-content: center; padding: 16px; border-bottom: 1px solid var(--fxf-border-color); }

/* ============================================
   Content Page
   ============================================ */
.content-page {
  margin-left: var(--fxf-sidebar-width);
  flex: 1; display: flex; flex-direction: column; min-height: 100vh;
}
.content { flex: 1; padding: 20px; }

/* ============================================
   Page Title & Breadcrumb
   ============================================ */
.page-title-box {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap;
}
.page-title { font-size: 1.5rem; margin: 0; font-weight: 500; color: var(--fxf-heading-color); }
.page-title-right .breadcrumb { margin: 0; padding: 0; background: none; }

/* ============================================
   Cards
   ============================================ */
.card {
  border: 1px solid var(--fxf-border-color);
  border-radius: var(--fxf-border-radius);
  box-shadow: var(--fxf-box-shadow-sm);
  margin-bottom: 20px;
  background: var(--fxf-card-bg);
}
.card-body { padding: 20px; }
.header-title { font-size: 1rem; font-weight: 600; color: var(--fxf-heading-color); }

/* Card Widgets (reload/collapse/remove) */
.card-widgets {
  float: right; display: flex; gap: 4px;
}
.card-widgets a {
  color: var(--fxf-muted); font-size: 1rem; padding: 2px;
  transition: color 0.2s; text-decoration: none;
}
.card-widgets a:hover { color: var(--fxf-danger); }

/* ============================================
   Stat Cards (widget-flat) — Velonic Style
   ============================================ */
.widget-flat {
  border: none; border-radius: var(--fxf-border-radius); margin-bottom: 20px;
}
.widget-flat .card-body { color: #fff; }
.widget-icon { font-size: 2rem; opacity: 0.4; }

/* Bootstrap 5 text-bg extensions */
.text-bg-pink { background-color: var(--fxf-pink) !important; color: #fff; }
.text-bg-purple { background-color: var(--fxf-purple) !important; color: #fff; }

.widget-flat .badge { font-size: 0.75rem; }

/* ============================================
   Tables
   ============================================ */
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.table-hover tbody tr:hover { background: rgba(var(--fxf-primary-rgb), 0.04); }

/* ============================================
   Badges — Velonic subtle style
   ============================================ */
.badge.bg-primary-subtle { background-color: rgba(var(--fxf-primary-rgb), 0.15) !important; color: var(--fxf-primary) !important; }
.badge.bg-success-subtle { background-color: rgba(var(--fxf-success-rgb), 0.15) !important; color: var(--fxf-success) !important; }
.badge.bg-danger-subtle { background-color: rgba(var(--fxf-danger-rgb), 0.15) !important; color: var(--fxf-danger) !important; }
.badge.bg-warning-subtle { background-color: rgba(var(--fxf-warning-rgb), 0.15) !important; color: var(--fxf-warning) !important; }
.badge.bg-info-subtle { background-color: rgba(var(--fxf-info-rgb), 0.15) !important; color: var(--fxf-info) !important; }
.badge.bg-pink-subtle { background-color: rgba(var(--fxf-pink-rgb), 0.15) !important; color: var(--fxf-pink) !important; }
.badge.bg-purple-subtle { background-color: rgba(var(--fxf-purple-rgb), 0.15) !important; color: var(--fxf-purple) !important; }

/* ============================================
   Forms
   ============================================ */
.form-control:focus {
  border-color: var(--fxf-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--fxf-primary-rgb), 0.25);
}
.form-label { font-weight: 500; color: var(--fxf-heading-color); }

/* ============================================
   Chat Widget (Velonic style)
   ============================================ */
.chat-conversation { max-height: 400px; overflow-y: auto; }
.conversation-list { list-style: none; padding: 0; margin: 0; }
.conversation-list li { margin-bottom: 16px; display: flex; align-items: flex-start; }
.conversation-list li.odd { flex-direction: row-reverse; }
.chat-avatar { text-align: center; margin: 0 10px; }
.chat-avatar img { width: 36px; height: 36px; border-radius: 50%; display: block; }
.chat-avatar i { font-size: 0.7rem; color: var(--fxf-muted); font-style: normal; }
.ctext-wrap {
  max-width: 75%; padding: 10px 14px;
  background: rgba(var(--fxf-primary-rgb), 0.08); border-radius: 10px;
}
.ctext-wrap i { font-size: 0.75rem; color: var(--fxf-muted); font-style: normal; display: block; margin-bottom: 4px; }
.ctext-wrap p { margin: 0; }
.conversation-list li.odd .ctext-wrap { background: var(--fxf-primary); color: #fff; }
.conversation-list li.odd .ctext-wrap i { color: rgba(255,255,255,0.7); }

/* ============================================
   Dropdowns
   ============================================ */
.dropdown-menu-animated { animation: fadeInDown 0.3s; }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-dropdown .dropdown-header { padding: 10px 20px; border-bottom: 1px solid var(--fxf-border-color); }
.profile-dropdown .dropdown-item { padding: 8px 20px; }
.profile-dropdown .dropdown-item i { margin-right: 8px; font-size: 1.125rem; }

/* ============================================
   Footer
   ============================================ */
.footer {
  padding: 16px 20px; color: var(--fxf-muted);
  font-size: 0.8125rem; border-top: 1px solid var(--fxf-border-color);
}

/* ============================================
   Utility Classes
   ============================================ */
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-22 { font-size: 22px !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }

/* ============================================
   ApexCharts container
   ============================================ */
.apex-charts { min-height: 250px; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 991px) {
  .leftside-menu {
    transform: translateX(-100%);
  }
  .leftside-menu.open {
    transform: translateX(0);
  }
  .content-page { margin-left: 0; }
}

@media (max-width: 575px) {
  .topbar-menu .nav-link span { display: none; }
  .app-search { display: none; }
}