/* ============================================================
   InvoiceFlow — Estilos globales v4
   Bootstrap 5.3 base + personalizaciones premium
   ============================================================ */

/* ── Override Bootstrap primary color ──────────────────────── */
:root {
  --bs-primary:                  #3B82F6;
  --bs-primary-rgb:              59, 130, 246;
  --bs-primary-bg-subtle:        #EFF6FF;
  --bs-primary-border-subtle:    #BFDBFE;
  --bs-primary-text-emphasis:    #1D4ED8;
  --bs-link-color:               #3B82F6;
  --bs-link-color-rgb:           59, 130, 246;
  --bs-link-hover-color:         #2563EB;

  /* Page & card backgrounds */
  --bs-body-bg:    #F4F6FB;
  --bs-card-bg:    #FFFFFF;
}

/* ── Variables InvoiceFlow ───────────────────────────────────── */
:root {
  --if-sidebar-width:  230px;
  --if-topbar-height:  56px;

  /* Paleta de marca */
  --if-primary:      #3B82F6;
  --if-primary-mid:  #2563EB;
  --if-indigo:       #6366F1;
  --if-purple:       #8B5CF6;
  --if-teal:         #14B8A6;
  --if-amber:        #F59E0B;
  --if-green:        #10B981;
  --if-red:          #EF4444;

  /* Sidebar – tema claro */
  --if-sb-text:        #475569;
  --if-sb-heading:     #475569;
  --if-sb-hover:       rgba(59,130,246,.07);
  --if-sb-active-bg:   rgba(59,130,246,.12);
  --if-sb-active-text: #2563EB;
  --if-sb-border:      rgba(148,163,184,.18);

  --if-transition: .22s ease;
  --if-ease:       cubic-bezier(.4,0,.2,1);
}

/* ── Base ────────────────────────────────────────────────────── */
body {
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  background: var(--bs-body-bg);
}

/* ── Layout SB-Admin ─────────────────────────────────────────── */
.sb-nav-fixed .sb-topnav   { position: fixed; top: 0; width: 100%; z-index: 1030; }
.sb-nav-fixed #layoutSidenav { padding-top: var(--if-topbar-height); }

#layoutSidenav {
  display: flex;
  min-height: calc(100vh - var(--if-topbar-height));
}

#layoutSidenav_nav {
  width: var(--if-sidebar-width);
  flex-shrink: 0;
  transition: width var(--if-transition);
}

#layoutSidenav_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* Footer de página */
footer.bg-body-tertiary {
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(8px);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sb-sidenav {
  background: linear-gradient(175deg, #FAFCFF 0%, #F0F4FF 55%, #EBF0FF 100%);
  border-right: 1px solid var(--if-sb-border);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  width: var(--if-sidebar-width);
  top: var(--if-topbar-height);
  bottom: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.2) transparent;
  transition: left var(--if-transition);
}

.sb-sidenav::-webkit-scrollbar       { width: 4px; }
.sb-sidenav::-webkit-scrollbar-thumb { background: rgba(100,116,139,.2); border-radius: 4px; }

/* Nav links */
.sb-sidenav .nav-link {
  color: var(--if-sb-text);
  padding: .55rem .75rem;
  border-radius: .5rem;
  margin: 1px .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  transition: background var(--if-transition), color var(--if-transition), transform var(--if-transition);
  position: relative;
}

.sb-sidenav .nav-link:hover {
  background: var(--if-sb-hover);
  color: var(--if-primary);
  transform: translateX(2px);
}

.sb-sidenav .nav-link.active {
  background: var(--if-sb-active-bg);
  color: var(--if-sb-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--if-primary), 0 1px 4px rgba(59,130,246,.12);
}

/* Iconos del sidebar */
.sb-sidenav .sb-nav-link-icon {
  width: 20px;
  text-align: center;
  color: #94A3B8;
  transition: color var(--if-transition);
}

.sb-sidenav .nav-link:hover .sb-nav-link-icon { color: var(--if-primary); }
.sb-sidenav .nav-link.active .sb-nav-link-icon { color: var(--if-primary); }

/* Headings de sección */
.sb-sidenav-menu-heading {
  color: var(--if-sb-heading);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.1rem 1rem .35rem;
  opacity: .9;
  border-top: 1px solid rgba(59,130,246,.15);
  margin-top: .25rem;
}

/* Submenú anidado */
.sb-sidenav-menu-nested          { padding-left: 2.6rem; }
.sb-sidenav-menu-nested .nav-link { font-size: .82rem; }

/* Flecha collapse */
.sb-sidenav-collapse-arrow {
  margin-left: auto;
  font-size: .7rem;
  color: #94A3B8;
  transition: transform .2s;
}
.nav-link[aria-expanded="true"] .sb-sidenav-collapse-arrow { transform: rotate(180deg); }

/* Footer del sidebar */
.sb-sidenav-footer {
  padding: .875rem 1rem;
  margin-top: auto;
  border-top: 1px solid var(--if-sb-border);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: .65rem;
}

.if-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--if-primary), var(--if-purple));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(99,102,241,.30);
}

.if-user-name {
  font-size: .82rem;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.if-user-role {
  font-size: .72rem;
  color: #94A3B8;
  margin-top: 1px;
}

/* Sidebar toggle colapsado */
body.sb-sidenav-toggled #layoutSidenav_nav { width: 0; }
body.sb-sidenav-toggled .sb-sidenav        { left: calc(-1 * var(--if-sidebar-width)); }

/* ── Topbar ──────────────────────────────────────────────────── */
.if-topnav {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 1px 12px rgba(15,23,42,.06);
}

/* Brand */
.if-topnav .navbar-brand {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -.03em;
  transition: color var(--if-transition);
}
.if-topnav .navbar-brand:hover { color: var(--if-primary) !important; }

/* Icono de marca en pill */
.if-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--if-primary), var(--if-purple));
  box-shadow: 0 3px 10px rgba(99,102,241,.35);
  margin-right: .4rem;
  flex-shrink: 0;
}
.if-brand-icon .bi { color: #fff; font-size: .85rem; }

/* Toggle button */
.if-nav-toggle {
  border: 1px solid rgba(148,163,184,.28) !important;
  border-radius: .5rem !important;
  background: transparent !important;
  color: #475569 !important;
  transition: all var(--if-transition);
}
.if-nav-toggle:hover {
  background: rgba(59,130,246,.07) !important;
  color: var(--if-primary) !important;
  border-color: rgba(59,130,246,.3) !important;
}

/* Buscador */
.if-search .form-control {
  background: #F4F6FB;
  border: 1px solid rgba(148,163,184,.30);
  border-right: none;
  border-radius: .5rem 0 0 .5rem !important;
  font-size: .85rem;
  color: #334155;
  transition: var(--if-transition);
}
.if-search .form-control::placeholder { color: #94A3B8; }
.if-search .form-control:focus {
  background: #fff;
  border-color: var(--if-primary);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
  z-index: 1;
}
.if-search .btn-outline-light {
  background: #F4F6FB;
  border: 1px solid rgba(148,163,184,.30) !important;
  border-left: none !important;
  border-radius: 0 .5rem .5rem 0 !important;
  color: #64748B;
  transition: var(--if-transition);
}
.if-search .btn-outline-light:hover { color: var(--if-primary); background: #EFF6FF; }

/* Nav links del topbar */
.if-topnav .nav-link { color: #475569 !important; }
.if-topnav .nav-link:hover { color: var(--if-primary) !important; }

/* Dropdown del topbar */
.if-topnav .dropdown-menu {
  border: 1px solid rgba(148,163,184,.2);
  box-shadow: 0 8px 32px rgba(15,23,42,.10);
  border-radius: .75rem;
}

/* Avatar con gradiente */
.avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}
.avatar-gradient {
  background: linear-gradient(135deg, var(--if-primary), var(--if-purple)) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(99,102,241,.30);
}

/* ── Cards / KPIs ────────────────────────────────────────────── */
.card {
  border-radius: .875rem !important;
  transition: box-shadow .2s var(--if-ease), transform .2s var(--if-ease);
}
.card:hover {
  box-shadow: 0 8px 32px rgba(15,23,42,.10) !important;
  transform: translateY(-2px);
}

.kpi-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: .75rem !important;
}

/* Sistema de acentos por KPI */
.if-kpi { position: relative; overflow: hidden; }

.if-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transition: opacity .2s;
}
.if-kpi:hover::before { opacity: 1; }

.if-kpi-green::before  { background: linear-gradient(90deg, #10B981, #34D399); }
.if-kpi-blue::before   { background: linear-gradient(90deg, var(--if-primary), #60A5FA); }
.if-kpi-amber::before  { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
.if-kpi-red::before    { background: linear-gradient(90deg, #EF4444, #F87171); }
.if-kpi-purple::before { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }

/* Colores de iconos KPI */
.if-ico-green  { background: rgba(16,185,129,.10)  !important; color: #059669 !important; }
.if-ico-blue   { background: rgba(59,130,246,.10)  !important; color: #2563EB !important; }
.if-ico-amber  { background: rgba(245,158,11,.10)  !important; color: #D97706 !important; }
.if-ico-red    { background: rgba(239,68,68,.10)   !important; color: #DC2626 !important; }
.if-ico-purple { background: rgba(139,92,246,.10)  !important; color: #7C3AED !important; }

/* ── Tablas ──────────────────────────────────────────────────── */
.table th { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { cursor: default; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge { font-size: .72em; font-weight: 600; }

/* ── Formularios ─────────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.form-control:focus,
.form-select:focus {
  border-color: var(--if-primary);
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.20);
}

/* ── POS ─────────────────────────────────────────────────────── */
.pos-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1rem;
  height: calc(100vh - var(--if-topbar-height) - 2rem);
}

@media (max-width: 991px) {
  .pos-layout { grid-template-columns: 1fr; height: auto; }
  .pos-cart {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
    max-height: 55vh; overflow-y: auto; border-radius: 1rem 1rem 0 0;
  }
}

.pos-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .75rem;
  overflow-y: auto;
  align-content: start;
}

.pos-product-card {
  border-radius: .6rem;
  padding: .75rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border: 2px solid transparent;
  background: var(--bs-card-bg);
  text-align: center;
}
.pos-product-card:hover  { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.pos-product-card.active { border-color: var(--if-primary); }
.pos-product-card .price { font-weight: 700; color: var(--if-primary); font-size: .9rem; }
.pos-product-card .name  { font-size: .78rem; line-height: 1.2; margin-top: .25rem; }
.pos-product-card .stock-badge { font-size: .65rem; }

.pos-cart {
  display: flex;
  flex-direction: column;
  background: var(--bs-card-bg);
  border-radius: .75rem;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  overflow: hidden;
}
.pos-cart-items { flex: 1; overflow-y: auto; }

.cart-item {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--bs-border-color);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem;
  align-items: center;
}
.cart-item:last-child  { border-bottom: none; }
.cart-item-name        { font-size: .85rem; font-weight: 600; }
.cart-item-meta        { font-size: .78rem; color: var(--bs-secondary-color); }

.pos-totals             { border-top: 2px solid var(--bs-border-color); padding: .75rem; }
.pos-totals .total-row  { display: flex; justify-content: space-between; padding: .15rem 0; font-size: .88rem; }
.pos-totals .grand-total { font-size: 1.4rem; font-weight: 800; color: var(--if-primary); }

.btn-pagar { border-radius: .5rem; padding: .8rem; font-size: 1rem; font-weight: 700; }

/* ── Favoritos POS ───────────────────────────────────────────── */
.btn-favorito {
  border-radius: .5rem;
  font-size: .78rem;
  padding: .45rem .5rem;
  display: flex; flex-direction: column;
  align-items: center; gap: .15rem;
  min-height: 60px; cursor: pointer; border: none;
  transition: filter .15s, transform .1s;
}
.btn-favorito:hover { filter: brightness(1.1); transform: scale(1.04); }
.btn-favorito .fav-name {
  line-height: 1.1; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Barcode reader indicator ────────────────────────────────── */
#barcode-indicator {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: #198754; color: #fff;
  border-radius: 999px;
  padding: .35rem .9rem .35rem .7rem;
  font-size: .8rem;
  display: flex; align-items: center; gap: .4rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  z-index: 2000;
}
#barcode-indicator.show { opacity: 1; transform: translateY(0); }

/* ── Pantalla cliente ────────────────────────────────────────── */
.customer-display {
  min-height: 100vh;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* ── Impresión ───────────────────────────────────────────────── */
@media print {
  .sb-topnav, #layoutSidenav_nav, .no-print { display: none !important; }
  #layoutSidenav_content { margin: 0; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ── Modo oscuro ─────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --if-sb-text:        #9CA3AF;
  --if-sb-heading:     #94A3B8;
  --if-sb-hover:       rgba(255,255,255,.07);
  --if-sb-active-bg:   rgba(59,130,246,.20);
  --if-sb-active-text: #60A5FA;
  --if-sb-border:      rgba(255,255,255,.08);
  --bs-body-bg:        #0F172A;
  --bs-card-bg:        #1E293B;
}
[data-bs-theme="dark"] .sb-sidenav {
  background: #111827;
  border-right-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .sb-sidenav-footer {
  background: rgba(17,24,39,.8);
  border-top-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .if-user-name     { color: #F1F5F9; }
[data-bs-theme="dark"] .if-topnav        { background: rgba(15,23,42,.95) !important; border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .if-topnav .navbar-brand { color: #F1F5F9 !important; }
[data-bs-theme="dark"] .if-topnav .nav-link     { color: #9CA3AF !important; }
[data-bs-theme="dark"] .if-search .form-control { background: #1E293B; color: #E2E8F0; border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .if-search .btn-outline-light { background: #1E293B; border-color: rgba(255,255,255,.1) !important; }
[data-bs-theme="dark"] .if-nav-toggle   { border-color: rgba(255,255,255,.15) !important; color: #9CA3AF !important; }
[data-bs-theme="dark"] footer.bg-body-tertiary { background: rgba(15,23,42,.80) !important; }
[data-bs-theme="dark"] .table-light     { --bs-table-bg: rgba(255,255,255,.04); }

/* ── Utilidades ──────────────────────────────────────────────── */
.fs-7       { font-size: .8rem; }
.fs-8       { font-size: .72rem; }
.fw-800     { font-weight: 800; }
.cursor-pointer { cursor: pointer; }
.text-purple { color: var(--if-purple); }
.text-truncate-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* Loader */
.spinner-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; display: none;
}
.spinner-overlay.show { display: flex; }

/* Toast */
.if-toast { min-width: 260px; }

/* Barcode canvas */
#barcodeCanvas { max-width: 100%; }