:root {
  --lotus-emerald: #10b981;
  --lotus-emerald-dark: #059669;
  --sally-emerald-soft: #ecfdf5;
  --sally-emerald-border: rgba(16, 185, 129, 0.24);
  --sally-ink: #0f172a;
  --sally-muted: #64748b;
  --sally-soft: #f8fafc;
  --sidebar-dark: #ffffff;
  --bg-dark: #f8fafc;
  --bg-darker: #ffffff;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;
}

body {
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.11), transparent 24rem),
    linear-gradient(180deg, #f8fafc 0%, #eef7f2 100%);
  color: var(--sally-ink);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

main {
  min-width: 0;
}

.bg-darker {
  background-color: var(--bg-darker) !important;
}

.bg-cover {
  background-size: cover;
  background-position: center;
}

/* Sidebar Styles */
.sidebar {
  width: 280px;
  background-color: var(--sidebar-dark);
  box-shadow: 12px 0 32px rgba(15, 23, 42, 0.04);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1040;
}

.sidebar-toggle {
  color: #64748b;
  transition: color 0.15s ease;
}

.sidebar-toggle:hover {
  color: var(--lotus-emerald);
}

.sidebar .sidebar-head {
  min-height: 73px;
}

.sidebar .sidebar-head a {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.sidebar .brand-icon {
  flex: 0 0 auto;
}

.sidebar .brand-text {
  display: inline-block;
  flex: 1 1 auto;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.sidebar .nav-link {
  transition: all 0.2s ease;
  color: #64748b !important;
  font-weight: 700;
}

.sidebar .nav-link:hover {
  color: var(--lotus-emerald-dark) !important;
  background-color: rgba(16, 185, 129, 0.06);
  transform: translateX(2px);
}

.sidebar .nav-link.active {
  color: var(--lotus-emerald-dark) !important;
  background-color: rgba(16, 185, 129, 0.12) !important;
  border-left: 3px solid var(--lotus-emerald);
  border-radius: 0 0.5rem 0.5rem 0;
}

.sidebar-brand-logo {
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4));
}

.topbar {
  height: 64px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.topbar-brand {
  color: #6b7280;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.topbar-brand i {
  color: var(--lotus-emerald-dark);
  font-size: 1.2rem;
}

.canvas {
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  min-height: calc(100vh - 120px);
  min-width: 0;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07) !important;
}

/* Custom buttons */
.btn-emerald {
  background: linear-gradient(135deg, var(--lotus-emerald) 0%, var(--lotus-emerald-dark) 100%);
  border-color: var(--lotus-emerald);
  border-radius: 0.8rem;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(16, 185, 129, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-emerald:hover, .btn-emerald:focus {
  background: linear-gradient(135deg, #34d399 0%, var(--lotus-emerald-dark) 100%);
  border-color: var(--lotus-emerald-dark);
  color: #ffffff;
  box-shadow: 0 16px 30px rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
}

.btn-emerald-outline {
  background-color: transparent;
  border: 1px solid var(--sally-emerald-border);
  border-radius: 0.8rem;
  color: var(--lotus-emerald);
  font-weight: 800;
  transition: all 0.2s ease;
}

.btn-emerald-outline:hover {
  background-color: var(--sally-emerald-soft);
  border-color: var(--lotus-emerald);
  color: var(--lotus-emerald-dark);
}

/* Form Controls */
.form-control, .form-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.85rem;
  min-height: 2.85rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--lotus-emerald) !important;
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25) !important;
}

.form-check-input:checked {
  background-color: var(--lotus-emerald) !important;
  border-color: var(--lotus-emerald) !important;
}

/* Responsive Collapse */
@media (max-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(82vw, 300px);
    height: 100vh;
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }

  body.sidebar-collapsed .sidebar {
    transform: translateX(-105%);
  }

  main {
    width: 100%;
    min-width: 0;
  }
}

.sidebar-collapsed .sidebar {
  width: 88px;
}

@media (max-width: 992px) {
  .sidebar-collapsed .sidebar {
    width: min(82vw, 300px);
  }
}

.sidebar-collapsed .sidebar .nav-label,
.sidebar-collapsed .sidebar .section-title,
.sidebar-collapsed .sidebar .user-info,
.sidebar-collapsed .sidebar .sidebar-password-action,
.sidebar-collapsed .sidebar .logout-text {
  display: none !important;
}

.sidebar-password-action {
  color: #047857;
  flex: 0 0 auto;
  height: 2.15rem;
  width: 2.15rem;
}

.sidebar-password-action:hover,
.sidebar-password-action:focus {
  background: #ecfdf5;
  color: #065f46;
}

.sidebar-collapsed .sidebar .brand-text {
  max-width: 0;
  opacity: 0;
  visibility: hidden;
}

.sidebar-collapsed .sidebar .nav-link {
  justify-content: center;
}

.sidebar-collapsed .sidebar .sidebar-head {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.lotus-sidebar-tooltip {
  --bs-tooltip-bg: #0f172a;
  --bs-tooltip-color: #f8fafc;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-padding-x: 0.85rem;
  --bs-tooltip-padding-y: 0.55rem;
  --bs-tooltip-border-radius: 0.9rem;
  filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.22));
}

.lotus-sidebar-tooltip .tooltip-inner {
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.lotus-sidebar-tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #0f172a;
}

/* --- Global Utility Classes (migrated from inline styles) --- */
.max-w-600 { max-width: 600px; }

/* Modal Scroller */
.modal-body-scroll { max-height: 70vh; overflow-y: auto; }

/* Table Widths */
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-25 { width: 25% !important; }

/* Avatars & Icons */
.avatar-40 { width: 40px; height: 40px; }
.avatar-45 { width: 45px; height: 45px; transition: all 0.2s ease; }
.avatar-56 { width: 56px; height: 56px; }
.icon-circle-28 { width: 28px; height: 28px; }
.icon-circle-80 { width: 80px; height: 80px; }
.icon-2rem { font-size: 2rem; }
.icon-2-5rem { font-size: 2.5rem; }

/* Viewport Utilities */
.min-vh-60 { min-height: 60vh; }

/* Floating Action Button (FAB) */
.fab-wrapper { bottom: 20px; max-width: calc(100vw - 24px); right: 20px; z-index: 1050; }
.fab-menu {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  transform-origin: bottom right; 
}
.fab-menu-hidden { 
  opacity: 0; 
  visibility: hidden; 
  transform: translateY(20px) scale(0.95); 
}
.fab-item { width: 50px; height: 50px; }
.fab-main-btn { width: 60px; height: 60px; transition: transform 0.3s ease; }
.fab-menu a,
.fab-menu button {
  justify-content: flex-end;
  min-width: 0;
}
.fab-label {
  max-width: calc(100vw - 116px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  body {
    background: #eaf1f8;
  }

  .canvas {
    border-radius: 1rem !important;
    margin: 3rem !important;
    min-height: 100vh;
    padding: 1rem !important;
  }

  .fab-wrapper {
    bottom: 1.25rem;
    right: 1.25rem;
  }

  .fab-main-btn {
    height: 3.5rem;
    width: 3.5rem;
  }
}

/* Ventas / Factura */
.factura-icon-44 { 
  width: 44px; height: 44px; 
  background: rgba(16,185,129,0.15); 
  border: 1px solid rgba(16,185,129,0.3); 
}
.factura-icon-70 { 
  width: 70px; height: 70px; 
  background: rgba(16,185,129,0.15); 
  border: 2px solid rgba(16,185,129,0.3); 
}
.pos-badge-sm { font-size: 0.6rem; padding: 0.15rem 0.4rem; }
.factura-number { letter-spacing: 0.15em; font-weight: 600; }