@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root {
  --bg-0: #f6f8fb;
  --bg-1: #eef3f8;
  --panel: rgba(255, 255, 255, 0.6);
  --glass: rgba(255, 255, 255, 0.06);
  --muted: #6b7280;
  --text: #0f172a;
  --primary: #0b63ff;
  --accent: #7c3aed;
  --success: #16a34a;
  --danger: #ef4444;
  --shadow-1: 0 12px 40px rgba(2, 6, 23, 0.10);
  --shadow-2: 0 10px 30px rgba(2, 6, 23, 0.12);
  --radius-lg: 14px;
  --radius-md: 10px;
}

body {
  background: linear-gradient(180deg, var(--bg-0), var(--bg-1));
  overflow-x: hidden;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.rle-locked {
  overflow: hidden;
}

.app-shell.hidden {
  display: none;
}

/* --- System Loading Screen Overlay --- */
.system-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(249, 250, 251, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.system-loading-screen.visible {
  opacity: 1;
  pointer-events: auto;
}

.system-loading-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 36px 44px;
  text-align: center;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 400px;
  width: 90%;
  animation: loadingCardPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loadingCardPop {
  from {
    transform: scale(0.92);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.system-loading-logo-pill {
  display: none !important;
}

.system-loading-spinner-wrapper {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.system-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f4f6;
  border-top-color: #111827;
  border-right-color: #2563eb;
  border-radius: 50%;
  animation: systemSpin 0.75s linear infinite;
}

.system-loading-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
  animation: systemPulse 1.5s ease-in-out infinite alternate;
}

@keyframes systemSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes systemPulse {
  from {
    opacity: 0.35;
    transform: scale(0.88);
  }

  to {
    opacity: 1;
    transform: scale(1.15);
  }
}

.system-loading-title {
  color: #111827;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.3;
}

.system-loading-subtitle {
  color: #6b7280;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

.auth-screen {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: stretch;
  background:
    radial-gradient(circle at top left, rgba(22, 163, 74, 0.18), transparent 32%),
    radial-gradient(circle at right center, rgba(11, 99, 255, 0.16), transparent 30%),
    linear-gradient(135deg, #07111f 0%, #0a1629 42%, #0e1d35 100%);
  color: #fff;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.01);
  transition: opacity .35s ease, transform .35s ease;
  overflow: hidden;
}

.auth-screen.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.auth-screen-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.15));
  opacity: .24;
  pointer-events: none;
}

.auth-screen-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: .7;
  pointer-events: none;
}

.auth-glow-one {
  top: -120px;
  left: -90px;
  width: 340px;
  height: 340px;
  background: rgba(11, 99, 255, 0.34);
}

.auth-glow-two {
  right: -120px;
  bottom: -140px;
  width: 380px;
  height: 380px;
  background: rgba(124, 58, 237, 0.22);
}

.auth-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px clamp(24px, 5vw, 72px);
}

.auth-panel-story {
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.auth-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
}

.auth-panel-story h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: .96;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.auth-story-copy {
  max-width: 540px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.05rem;
  line-height: 1.75;
}

.auth-quote-card {
  display: flex;
  gap: 18px;
  max-width: 560px;
  padding: 22px 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.auth-quote-mark {
  font-size: 4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.24);
  font-family: Georgia, serif;
}

.auth-quote-text {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.65;
  font-weight: 600;
}

.auth-quote-author {
  color: rgba(255, 255, 255, 0.68);
  font-size: .95rem;
}

.auth-story-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 560px;
}

.auth-story-stats>div {
  padding: 18px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-story-stats strong,
.auth-story-stats span {
  display: block;
}

.auth-story-stats strong {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.auth-story-stats span {
  color: rgba(255, 255, 255, 0.66);
  font-size: .92rem;
}

.auth-panel-form {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
}

.auth-form-card {
  width: min(100%, 460px);
  padding: 32px;
  border-radius: 30px;
  background: rgba(6, 12, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
}

.auth-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.auth-form-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: rgba(255, 255, 255, 0.58);
}

.auth-form-header h2 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  font-weight: 800;
}

.auth-form-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

.auth-screen {
  color-scheme: dark;
}

.auth-form-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.auth-screen label,
.auth-screen .form-label,
.auth-form-card label,
.auth-form-card .form-label {
  color: #ffffff !important;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.auth-input {
  background: #13223f !important;
  border: 1px solid rgba(77, 148, 255, 0.55) !important;
  color: #ffffff !important;
  padding: .95rem 1rem;
  color-scheme: dark;
}

.auth-input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

.auth-input:focus {
  background: #182a4d !important;
  border-color: rgba(77, 148, 255, 0.85) !important;
  box-shadow: 0 0 0 .25rem rgba(77, 148, 255, .3) !important;
  color: #ffffff !important;
}

.auth-input:not(:placeholder-shown) {
  background: #13223f !important;
  border-color: rgba(77, 148, 255, 0.55) !important;
  color: #ffffff !important;
}

/* Keep browser autofill from turning fields white/yellow on authScreen */
.auth-screen input:-webkit-autofill,
.auth-screen input:-webkit-autofill:hover,
.auth-screen input:-webkit-autofill:focus,
.auth-screen input:-webkit-autofill:active,
.auth-screen input:autofill,
.auth-screen input:autofill:hover,
.auth-screen input:autofill:focus,
.auth-screen input:autofill:active,
#authScreen .auth-input:-webkit-autofill,
#authScreen .auth-input:-webkit-autofill:hover,
#authScreen .auth-input:-webkit-autofill:focus,
#authScreen .auth-input:-webkit-autofill:active,
#authScreen .auth-input:autofill,
#authScreen .auth-input:autofill:hover,
#authScreen .auth-input:autofill:focus,
#authScreen .auth-input:autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #1a2740 inset !important;
  box-shadow: 0 0 0px 1000px #1a2740 inset !important;
  background-color: #1a2740 !important;
  caret-color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transition: background-color 999999s ease-in-out 0s, color 999999s ease-in-out 0s !important;
  color-scheme: dark !important;
}

.auth-password-group {
  display: flex !important;
  align-items: stretch !important;
  border-radius: 1rem !important;
  background: #13223f !important;
  border: 1px solid rgba(77, 148, 255, 0.55) !important;
  overflow: hidden !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.auth-password-group:focus-within {
  background: #182a4d !important;
  border-color: rgba(77, 148, 255, 0.85) !important;
  box-shadow: 0 0 0 .25rem rgba(77, 148, 255, .3) !important;
}

.auth-password-group .auth-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  flex: 1 1 auto !important;
  padding: .95rem 1rem !important;
}

.auth-password-group .auth-input:focus,
.auth-password-group .auth-input:not(:placeholder-shown) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.auth-eye-btn {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(77, 148, 255, 0.45) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  min-width: 52px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 1rem !important;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.auth-eye-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.auth-eye-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

.auth-submit {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #0b172a !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 28px rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.28) !important;
  transition: all .2s ease !important;
}

.auth-submit:hover,
.auth-submit:focus {
  background: #f1f5f9 !important;
  color: #020617 !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(255, 255, 255, 0.32), 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

.auth-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.18) !important;
}

.auth-form-footnote {
  margin-top: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: .9rem;
}

@media (max-width: 992px) {
  .auth-screen {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .auth-panel {
    padding: 36px 22px;
  }

  .auth-panel-story h1 {
    max-width: none;
  }

  .auth-story-stats {
    grid-template-columns: 1fr;
  }

  .auth-panel-form {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 48px;
  }
}

.sidebar {
  position: fixed;
  width: 250px;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto !important;
  background: linear-gradient(180deg, rgba(11, 22, 45, 0.95), rgba(6, 11, 26, 0.95));
  color: #ffffffee;
  border-right: 1px solid rgba(255, 255, 255, 0.03);
  padding: 24px;
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(6px) saturate(110%);
  border-radius: 0 16px 16px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 5px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.sidebar.menu-collapsed {
  width: 78px;
  padding: 18px 12px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-header h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 1.05rem;
  color: #ffffff;
}

.sidebar.menu-collapsed .sidebar-header h2 {
  display: none;
}

.sidebar.menu-collapsed .sidebar-header {
  justify-content: center;
}

.sidebar.menu-collapsed hr {
  display: none;
}

.menu-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.18);
}

.menu-toggle:hover {
  transform: translateY(-2px);
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transition: all .18s ease;
}

.menu-toggle span {
  position: relative;
}

.menu-toggle span::before,
.menu-toggle span::after {
  position: absolute;
  left: 0;
}

.menu-toggle span::before {
  top: -6px;
}

.menu-toggle span::after {
  top: 6px;
}

.sidebar-menu {
  max-height: 520px;
  overflow: visible;
  opacity: 1;
  transition: max-height .28s ease, opacity .2s ease, transform .18s ease;
  transform-origin: top left;
}

.sidebar-menu.collapsed {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
}

.sidebar.menu-collapsed .sidebar-menu {
  display: none;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  color: white;
  transition: transform .18s ease, box-shadow .18s ease;
}

.settings-toggle:hover {
  transform: translateY(-2px);
}

.settings-toggle-desktop {
  width: 100%;
  height: 42px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-radius: 10px;
  margin: 0 !important;
}

.settings-toggle-desktop span:last-child {
  font-weight: 600;
}

.sidebar.menu-collapsed .settings-toggle-desktop {
  width: 42px;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin-left: 0;
  margin-right: auto;
}

.sidebar.menu-collapsed .settings-toggle-desktop span:last-child {
  display: none;
}

.settings-toggle-mobile {
  display: none;
}

@media (min-width: 991px) {
  .settings-toggle-mobile {
    display: none !important;
  }
}

.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main {
  margin-left: 260px;
  padding: 28px;
}

.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-user-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.app-user-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.app-user-chip strong {
  font-size: .85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.app-topbar-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-topbar-icon:hover {
  transform: translateY(-1px);
}

body.sidebar-collapsed .main {
  margin-left: 88px;
}



.menu-btn {
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 600;
  color: white;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: transform .14s ease, box-shadow .14s ease;
  box-shadow: none;
}

.menu-btn:hover {
  transform: translateX(4px);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.14);
}



.active-menu {
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.12);
}

.btn-outline-dark.menu-btn {
  color: rgba(255, 255, 255, 0.85);
}

.section {
  display: none;
  animation: fade .22s ease;
}

.section.active-section {
  display: block;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 252, 0.9));
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: var(--shadow-1);
}

.table-container {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 252, 0.9));
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.03);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.06);
}

.dashboard-header {
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-header>div:first-child {
  min-width: 0;
}

.dashboard-header h2,
.dashboard-header p {
  overflow-wrap: anywhere;
}

.date-card {
  min-width: 128px;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
}

.stat-card {
  min-width: 0;
  height: 100%;
}

.dashboard-stats>.col-md-3 {
  width: auto;
  padding: 0;
}

.dashboard-stats>.col-md-3>.card-box {
  min-width: 0;
  height: 100%;
}

.stat-label {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-stats small {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.stat-value {
  font-size: 1.65rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: normal;
}

.dashboard-stats h2 {
  font-size: 1.65rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: normal;
}

.stat-note {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-stats span {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.quantity-control {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important;
}

.quantity-control .btn {
  flex: 0 0 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  width: 32px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #334155 !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.quantity-control .btn:first-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.quantity-control .btn:last-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

.quantity-control .form-control,
.quantity-control input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 30px !important;
  max-width: 100% !important;
  height: 36px !important;
  padding: 0 4px !important;
  margin: 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  border: 1px solid #334155 !important;
  border-radius: 0 !important;
  -moz-appearance: textfield !important;
}

.quantity-control input::-webkit-outer-spin-button,
.quantity-control input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.quantity-control-pos {
  max-width: 180px;
}

.discount-control .form-select {
  max-width: 78px;
  flex: 0 0 78px;
}

.discount-control .form-control {
  min-width: 0;
}

.pos-layout {
  align-items: flex-start;
}

/* Ticket print styles */
.ticket-print-area {
  padding: 8px;
  background: #fff;
}

.ticket {
  font-family: 'Courier New', monospace;
  color: #000;
  line-height: 1.1;
}

.ticket .center {
  text-align: center
}

.ticket .bold {
  font-weight: 700
}

.ticket .small {
  font-size: 12px
}

.ticket .divider {
  border-top: 1px dashed #000;
  margin: 6px 0
}

.ticket .items {
  width: 100%;
  font-size: 12px
}

.ticket .items td,
.ticket .items th {
  padding: 2px 0;
}

.ticket .totals {
  width: 100%;
  margin-top: 6px;
  font-size: 13px
}

.ticket .totals td {
  padding: 2px 0
}

/* ==============================
         Premium SaaS UI Layer
         ============================== */

:root {
  --app-bg: #f5f7fb;
  --sidebar-bg: #071224;
  --sidebar-border: rgba(148, 163, 184, 0.14);
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(255, 255, 255, 0.94);
  --surface-soft: rgba(255, 255, 255, 0.66);
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.12);
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --brand: #2563eb;
  --brand-2: #1d4ed8;
  --success-soft: rgba(22, 163, 74, 0.12);
  --warning-soft: rgba(245, 158, 11, 0.14);
  --danger-soft: rgba(239, 68, 68, 0.12);
  --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 24px 70px rgba(15, 23, 42, 0.12);
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 16px;
}

body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.07), transparent 22%),
    linear-gradient(180deg, #f7f9fc 0%, var(--app-bg) 100%);
  color: var(--text-primary);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(15, 23, 42, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.018) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.16), transparent 72%);
  opacity: 0.35;
}

.sidebar {
  width: 270px;
  background: linear-gradient(180deg, #071224 0%, #0b1629 100%);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 18px 0 40px rgba(2, 6, 23, 0.22);
}

.sidebar-header h2 {
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sidebar-header hr,
.sidebar hr {
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

.sidebar-menu {
  margin-top: 10px;
}

.menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 8px;
  border-radius: 16px;
  color: rgba(226, 232, 240, 0.92);
  background: transparent;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.menu-btn i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.menu-btn span {
  flex: 1;
}

.menu-btn:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 34px rgba(2, 6, 23, 0.22);
}

.active-menu {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(29, 78, 216, 0.92)) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.35);
}

.main {
  padding: 32px;
}

.eyebrow-chip,
.panel-kicker,
.panel-badge,
.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.eyebrow-chip,
.panel-kicker {
  background: rgba(37, 99, 235, 0.09);
  color: var(--brand);
  padding: 7px 11px;
}

.panel-badge,
.metric-pill {
  padding: 7px 10px;
  border: 1px solid transparent;
}

.panel-badge {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-secondary);
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.metric-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.metric-icon svg,
.premium-alert-icon svg,
.menu-btn svg {
  width: 18px;
  height: 18px;
}

.metric-icon-primary {
  background: linear-gradient(135deg, rgba(34, 214, 64, 0.18), rgba(34, 214, 64, 0.18));
  color: var(#15803d);
}

.metric-icon-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.08));
  color: #2563eb;
}

.metric-icon-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08));
  color: #d97706;
}

.metric-icon-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.07));
  color: #dc2626;
}

.metric-pill-success {
  background: var(--success-soft);
  color: #15803d;
}

.metric-pill-info {
  background: rgba(37, 99, 235, 0.10);
  color: var(--brand);
}

.metric-pill-warning {
  background: var(--warning-soft);
  color: #b45309;
}

.metric-pill-danger {
  background: var(--danger-soft);
  color: #b91c1c;
}

.soft-accent-card {
  position: relative;
  overflow: hidden;
}

.soft-accent-card::after {
  content: '';
  position: absolute;
  inset: auto -20px -30px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08), transparent 68%);
  pointer-events: none;
}

.metric-note {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

.dashboard-panel,
.premium-side-panel,
.table-container,
.card-box,
.modal-content {
  border-radius: var(--radius-xl);
}

.dashboard-panel {
  min-height: 460px;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-box,
.table-container {
  background: var(--surface-strong);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px) saturate(140%);
}

.card-box:hover,
.table-container:hover,
.premium-alert-card:hover {
  box-shadow: var(--shadow-hover);
}

.dashboard-panel-header,
.section h3,
.section h4,
.section h5 {
  color: var(--text-primary);
}

.dashboard-panel canvas {
  height: 360px !important;
  max-height: 360px;
}

.premium-alert-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: rgba(248, 250, 252, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.premium-alert-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.14);
}

.premium-alert-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.premium-alert-icon.danger {
  background: var(--danger-soft);
  color: #dc2626;
}

.premium-alert-icon.warning {
  background: var(--warning-soft);
  color: #d97706;
}

.premium-alert-icon.success {
  background: var(--success-soft);
  color: #15803d;
}

.premium-alert-icon.info {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.table-container {
  padding: 24px;
}

.table-container .table {
  margin-bottom: 0;
}

.table-container .table thead th {
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-top: 14px;
  padding-bottom: 14px;
}

.table-container .table tbody tr {
  transition: background .16s ease, transform .16s ease;
}

.table-container .table tbody tr:hover {
  background: rgba(37, 99, 235, 0.04);
}

.table-container .table tbody td {
  vertical-align: middle;
  border-color: rgba(148, 163, 184, 0.12);
  padding-top: 16px;
  padding-bottom: 16px;
}

.badge {
  border-radius: 999px;
  padding: .5rem .75rem;
  font-weight: 700;
}

.btn {
  border-radius: 14px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-dark {
  background: linear-gradient(135deg, #111827, #0f172a);
  border-color: #111827;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: var(--brand-2);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.btn-outline-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-danger {
  border-width: 1px;
}

.form-control,
.form-select {
  border-radius: 14px;
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 .24rem rgba(37, 99, 235, 0.12);
}

#ventasChart {
  min-height: 320px;
}

.dashboard-panel .btn-outline-dark {
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--text-primary);
}

.dashboard-panel .btn-outline-dark:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand);
}

.dashboard-header p,
.section .text-muted,
.table-container .text-muted {
  color: var(--text-secondary) !important;
}

@media (max-width: 991.98px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    border-radius: 0;
  }

  .main {
    margin-left: 0 !important;
    padding: 18px;
  }

  .dashboard-stats {
    gap: 14px;
  }
}

@media (max-width: 767.98px) {

  .card-box,
  .table-container {
    padding: 18px;
    border-radius: 18px;
  }

  .dashboard-panel-header,
  .dashboard-header {
    align-items: flex-start !important;
  }

  .metric-icon {
    width: 44px;
    height: 44px;
  }
}

/* Width variants */
.ticket.width-58 {
  width: 58mm;
  max-width: 100%;
}

.ticket.width-80 {
  width: 80mm;
  max-width: 100%;
}

@media print {
  body * {
    visibility: hidden
  }

  .ticket-print-only,
  .ticket-print-only * {
    visibility: visible
  }

  .ticket-print-only {
    position: absolute;
    left: 0;
    top: 0
  }
}

.pos-browser,
.pos-checkout {
  border-radius: 20px;
}

.pos-search {
  min-width: 280px;
  max-width: 340px;
}

.pos-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pos-cart-shell,
.pos-payment-shell,
.pos-summary-shell,
.pos-shipping-box {
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
  padding: 16px;
}

.pos-cart-item {
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(2, 6, 23, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #ffffff;
  transition: all 0.2s ease;
}

.pos-cart-item:hover {
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
  border-color: rgba(37, 99, 235, 0.25) !important;
}

.pos-empty-state {
  text-align: center;
  padding: 22px 10px;
  border: 1px dashed rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
}

.pos-empty-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #eef2ff, #e0e7ff);
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.payment-method-card {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.05);
}

.pos-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pos-summary-grid div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.05);
}

.pos-summary-grid span,
.pos-summary-grid strong {
  display: block;
  line-height: 1.2;
}

.pos-total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
  color: #fff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
}

.pos-total-strip span {
  font-size: .9rem;
  opacity: .84;
}

.pos-total-strip h3 {
  color: #fff;
}

.pos-summary-grid-pay div:nth-child(1) strong {
  color: var(--success);
}

.pos-summary-grid-pay div:nth-child(2) strong {
  color: var(--danger);
}

.pos-summary-grid-pay div:nth-child(3) strong {
  color: #f59e0b;
}

.pos-summary-grid-pay div:nth-child(4) strong {
  color: var(--primary);
}

.pos-remove-btn {
  width: 34px;
  height: 34px;
  line-height: 1;
  font-size: 1.1rem;
  flex: 0 0 34px;
}

.pos-browser-header p,
.pos-checkout p {
  max-width: 46rem;
}

.combo-box {
  position: relative;
}

.combo-box:focus-within {
  z-index: 1050;
}

.combo-control {
  display: flex;
  align-items: stretch;
}

.combo-input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 12px !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 10px !important;
  padding-right: 32px !important;
}

.combo-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 2050 !important;
  display: none;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #dbe2ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.combo-dropdown.show {
  display: block;
}

.combo-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  color: #0f172a;
}

.combo-option:hover,
.combo-option:focus {
  background: #eef2ff;
  outline: none;
}

.combo-option-add {
  margin-top: 6px;
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 700;
}

.combo-option-add:hover,
.combo-option-add:focus {
  background: #e2e8f0;
}

.inventory-actions {
  white-space: nowrap;
}

.inventory-action-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.stock-ubicacion-picker {
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stock-ubicacion-picker label {
  font-size: .82rem;
  color: #64748b;
  margin-bottom: 0;
  white-space: nowrap;
}

.stock-ubicacion-picker select {
  flex: 1;
}

@media (max-width: 990px) {
  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
  }

  .sidebar.menu-collapsed {
    width: 100%;
    padding: 8px 24px;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .sidebar.menu-collapsed .sidebar-footer {
    display: none !important;
  }

  .sidebar.menu-collapsed .settings-toggle-desktop {
    display: none !important;
  }

  .sidebar:not(.menu-collapsed) {
    max-height: calc(100vh - 12px);
    overflow-y: auto !important;
    padding-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
  }

  .sidebar:not(.menu-collapsed)::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar:not(.menu-collapsed)::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
  }

  .sidebar:not(.menu-collapsed)::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
  }

  .sidebar:not(.menu-collapsed)::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  .sidebar:not(.menu-collapsed) .sidebar-menu {
    max-height: none !important;
    overflow: visible !important;
  }

  .sidebar:not(.menu-collapsed) .sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .sidebar:not(.menu-collapsed) .settings-toggle-desktop {
    display: flex !important;
    width: 100% !important;
    height: 42px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
  }

  .sidebar:not(.menu-collapsed) .settings-toggle-desktop span:last-child {
    display: inline-block !important;
    font-weight: 600 !important;
  }

  .sidebar.menu-collapsed .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
  }

  /* Keep login fields in a static system-blue tone regardless of focus/global form overrides */
  #authScreen .auth-input,
  #authScreen input.auth-input,
  #authScreen .auth-password-group .auth-input {
    background: rgba(37, 99, 235, 0.16) !important;
    background-color: rgba(37, 99, 235, 0.16) !important;
    border-color: rgba(77, 148, 255, 0.55) !important;
    color: #ffffff !important;
  }

  #authScreen .auth-input:focus,
  #authScreen input.auth-input:focus,
  #authScreen .auth-password-group .auth-input:focus,
  #authScreen .auth-input:active,
  #authScreen input.auth-input:active {
    background: rgba(37, 99, 235, 0.16) !important;
    background-color: rgba(37, 99, 235, 0.16) !important;
    border-color: rgba(77, 148, 255, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 .18rem rgba(77, 148, 255, .22) !important;
  }

  #authScreen .auth-input:-webkit-autofill,
  #authScreen .auth-input:-webkit-autofill:hover,
  #authScreen .auth-input:-webkit-autofill:focus,
  #authScreen .auth-input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(37, 99, 235, 0.16) inset !important;
    box-shadow: 0 0 0 1000px rgba(37, 99, 235, 0.16) inset !important;
  }

  #authScreen .form-control.auth-input,
  #authScreen .form-control.auth-input:focus,
  #authScreen .form-control.auth-input:active,
  #authScreen .form-control.auth-input:not(:placeholder-shown),
  #authScreen .auth-password-group .form-control.auth-input,
  #authScreen .auth-password-group .form-control.auth-input:focus {
    background: rgba(37, 99, 235, 0.16) !important;
    background-color: rgba(37, 99, 235, 0.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #authScreen .form-control.auth-input:focus {
    border-color: rgba(77, 148, 255, 0.55) !important;
    box-shadow: 0 0 0 .18rem rgba(77, 148, 255, .22) !important;
  }

  #authScreen .form-control.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
  }

  #authScreen .auth-password-group>.form-control.auth-input,
  #authScreen input[type="password"].auth-input {
    background: rgba(37, 99, 235, 0.16) !important;
    background-color: rgba(37, 99, 235, 0.16) !important;
    background-clip: padding-box !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
  }

  #authScreen .auth-password-group>.form-control.auth-input:focus,
  #authScreen input[type="password"].auth-input:focus {
    background: rgba(37, 99, 235, 0.16) !important;
    background-color: rgba(37, 99, 235, 0.16) !important;
    box-shadow: 0 0 0 .18rem rgba(77, 148, 255, .22) !important;
  }

  .sidebar.menu-collapsed .sidebar-header h2 {
    display: block;
    font-size: 1 rem;
    margin: 0;
  }

  .sidebar.menu-collapsed .sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .sidebar.menu-collapsed .sidebar-menu {
    display: none;
  }

  .sidebar.menu-collapsed .settings-toggle-desktop {
    display: none;
  }

  .settings-toggle-mobile {
    display: inline-flex;
  }

  .main {
    margin-left: 0;
  }

  body.sidebar-collapsed .main {
    margin-left: 0;
  }

  .app-topbar-right {
    justify-content: flex-end;
  }
}

@media (max-width: 990px) {
  .main {
    padding: 16px;
  }

  .stock-ubicacion-picker {
    min-width: 0;
    width: 100%;
  }

  .card-box {
    padding: 18px;
  }

  .pos-search {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  .pos-item-summary {
    grid-template-columns: 1fr;
  }

  .pos-summary-grid {
    grid-template-columns: 1fr;
  }

  .pos-total-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 16px;
  }

  .stat-value {
    font-size: 1.45rem;
  }
}

.system-modal .modal-content {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.system-modal .modal-header {
  background: #0f172a;
  color: white;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 18px 22px;
}

.system-modal .modal-body {
  padding: 22px;
}

.system-modal .modal-footer {
  border-top: 1px solid #e5e7eb;
  padding: 16px 22px 22px;
}

.system-modal .btn-close {
  filter: invert(1);
  opacity: .85;
}

.ticket-preview-modal .modal-content {
  border: 2px solid rgba(11, 99, 255, 0.7);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(11, 99, 255, 0.16);
}

.ticket-preview-modal .modal-header {
  border-bottom: 1px solid rgba(11, 99, 255, 0.14);
}

.ticket-preview-modal .modal-footer {
  border-top: 1px solid rgba(11, 99, 255, 0.14);
}

/* Eliminar flechas de TODOS los input number */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* --- Modern form controls --- */
input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea,
.form-control,
.combo-input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 10px 12px;
  border-radius: 10px;
  transition: box-shadow .12s ease, transform .06s ease, border-color .12s ease;
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.04) inset;
  color: var(--text);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.combo-input:focus {
  outline: none;
  border-color: rgba(11, 99, 255, 0.9);
  box-shadow: 0 6px 20px rgba(11, 99, 255, 0.08);
  transform: translateY(-1px);
}

/* Combo dropdown options */
.combo-box {
  position: relative !important;
  width: 100%;
}

.combo-dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1050 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15) !important;
  display: none;
  padding: 6px !important;
}

.combo-dropdown.show {
  display: block !important;
}

.combo-option {
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 12px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #111827 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: block !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.combo-option:hover,
.combo-option:focus {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.combo-option-add {
  font-weight: 600 !important;
  color: #2563eb !important;
  border-top: 1px solid #e2e8f0 !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
}

.combo-option-add:hover {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* --- Tables --- */
.table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.table-container thead th {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  text-transform: none;
  padding: 10px 12px;
}

.table-container tbody tr {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 252, 0.9));
  border: 1px solid rgba(15, 23, 42, 0.03);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.03);
  border-radius: 10px;
}

.table-container tbody td {
  padding: 12px;
  vertical-align: middle;
}

.table-container tbody tr+tr {
  margin-top: 8px;
}

/* Make action buttons compact and modern */
.inventory-action-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}

.inventory-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.12);
}

/* System notification styles */
.sys-notification-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.sys-notification {
  min-width: 220px;
  max-width: 360px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.12);
  border: 1px solid rgba(2, 6, 23, 0.06);
  font-weight: 600;
  opacity: 1;
  transform: translateY(0);
  transition: transform .35s ease, opacity .35s ease;
}

.sys-notification.sys-success {
  border-left: 4px solid #16a34a;
}

.sys-notification.sys-error {
  border-left: 4px solid #dc2626;
}

.sys-notification.sys-warning {
  border-left: 4px solid #f59e0b;
}

.sys-notification.sys-info {
  border-left: 4px solid #0ea5e9;
}

.sys-notification.sys-hide {
  opacity: 0;
  transform: translateY(12px);
}

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: none;
}

.badge-success {
  background: linear-gradient(90deg, #dcfce7, #bbf7d0);
  color: #065f46;
}

.badge-danger {
  background: linear-gradient(90deg, #fee2e2, #fecaca);
  color: #7f1d1d;
}

.badge-muted {
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted);
}

/* --- Buttons primary/secondary --- */
.btn-primary {
  background: linear-gradient(90deg, var(--primary), #0a54d3);
  border: none;
  color: #fff;
  box-shadow: 0 14px 42px rgba(11, 99, 255, 0.16);
  transition: transform .12s ease, box-shadow .12s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
}

.btn-outline-primary {
  background: transparent;
  border: 1px solid rgba(17, 2, 150, 0.12);
  color: var(--primary);
}

.ticket-print-outline-btn {
  background: transparent;
  border-color: #0b63ff !important;
  border-width: 1px;
  color: #0b63ff;
}

.ticket-print-outline-btn:hover,
.ticket-print-outline-btn:focus {
  background: rgba(11, 99, 255, 0.08);
  border-color: #0b63ff !important;
  color: #0b63ff;
}

/* Micro interactions */
.menu-btn,
.settings-toggle,
.menu-toggle,
.settings-toggle-desktop {
  will-change: transform;
}

/* Responsive tweaks for compact header on mobile */
@media (max-width: 990px) {
  .sidebar {
    border-radius: 0 0 12px 12px;
  }

  .card-box {
    padding: 16px;
  }
}

/* BOTONES DE COLORES POS */

.color-btn {
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  color: #111827 !important;
  transition: all .2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}

.color-btn:hover {
  transform: translateY(-2px);
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
}

.color-btn.active {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
  transform: scale(0.97);
}

.color-btn .badge {
  margin-left: 6px;
}

/* Reports analytics */
.reports-hero {
  padding: 20px 22px;
}

.reports-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}

.report-kpi-card {
  position: relative;
  overflow: visible;
  min-height: 158px;
  padding: 22px;
}

.report-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.report-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.report-kpi-blue {
  background: rgba(37, 99, 235, .12);
  color: #2563eb;
}

.report-kpi-indigo {
  background: rgba(99, 102, 241, .12);
  color: #4f46e5;
}

.report-kpi-success {
  background: rgba(22, 163, 74, .12);
  color: #16a34a;
}

.report-kpi-warning {
  background: rgba(245, 158, 11, .14);
  color: #d97706;
}

.report-kpi-danger {
  background: rgba(239, 68, 68, .12);
  color: #dc2626;
}

.report-kpi-dark {
  background: rgba(15, 23, 42, .08);
  color: #0f172a;
}

.report-kpi-sub {
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.45;
}

.report-panel {
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.report-panel canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  max-height: none;
}

#reportes .row.g-4.mb-4 {
  align-items: stretch;
}

#reportes .report-row-ventas-stock {
  align-items: flex-start;
}

#reportes .col-lg-8 .report-panel {
  min-height: 420px;
}

#reportes .col-lg-12 .report-panel {
  min-height: 320px;
}

#reportes .col-lg-7 .report-panel {
  min-height: 320px;
}

#reportes .col-lg-5 .report-panel {
  min-height: 320px;
}

#reportes .col-lg-4.d-grid.gap-4 {
  grid-template-rows: repeat(2, minmax(240px, 1fr));
}

#reportes .col-lg-4.d-grid.gap-4 .report-panel {
  min-height: 240px;
}

#reportes .col-lg-6 .report-panel {
  min-height: 280px;
}

#reportes .col-lg-8,
#reportes .col-lg-4,
#reportes .col-lg-7,
#reportes .col-lg-5,
#reportes .col-lg-6 {
  min-width: 0;
}

#reportVentasChart {
  min-height: 340px;
  max-height: 360px;
}

#reportTopProductosChart {
  min-height: 210px;
  max-height: 230px;
}

#reportTiposVentaChart,
#reportInventarioChart {
  min-height: 230px;
  max-height: 250px;
}

#reportes .report-row-ventas-stock #reportInventarioChart {
  min-height: 250px;
  max-height: 290px;
}

.report-panel.h-100 {
  flex: 1 1 auto;
}

.report-panel>canvas {
  flex: 1 1 auto;
}

.report-metric-strip {
  margin-top: auto;
}

.reports-summary-grid .report-kpi-card {
  min-height: 0;
}

.report-metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.report-mini-metric {
  padding: 14px;
  border-radius: 18px;
  background: rgba(248, 250, 252, .9);
  border: 1px solid rgba(148, 163, 184, .14);
}

.report-mini-metric strong {
  font-size: 1.15rem;
  color: var(--text-primary);
}

.report-table-responsive {
  overflow-x: auto;
  overflow-y: visible;
}

.report-table {
  margin-bottom: 0;
}

.report-table thead th {
  font-size: .76rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
  padding: 0 12px 12px;
}

.report-table tbody tr {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 8px 22px rgba(15, 23, 42, .04);
}

.report-table tbody td {
  padding: 14px 12px;
  border: 0;
}

.report-table tbody tr:hover {
  background: rgba(255, 255, 255, 1);
}

.report-table tbody tr td:first-child {
  border-radius: 16px 0 0 16px;
}

.report-table tbody tr td:last-child {
  border-radius: 0 16px 16px 0;
}

/* Caja chica redesign */
.cash-header-card {
  background: linear-gradient(160deg, #0b1220 0%, #0f1b37 60%, #16263f 100%);
  color: #e6eef8;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 12px 18px;
}

.cash-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: rgba(226, 232, 240, .78);
}

.cash-breadcrumb i {
  width: 14px;
  height: 14px;
}

.cash-breadcrumb strong {
  color: #fff;
}

.cash-subtitle {
  color: rgba(226, 232, 240, .78);
}

.cash-reload-btn {
  min-height: 42px;
  border-radius: 12px;
  border-color: rgba(226, 232, 240, .35);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cash-current-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cash-state-pill-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cash-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 96px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .86rem;
  background: rgba(255, 255, 255, 0.06);
  color: #e6eef8;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.18);
}

#cajaEstadoBadge {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  display: inline-flex !important;
}

.cash-state-pill.is-open {
  background: linear-gradient(90deg, #15803d, #059669);
  color: #ffffff;
  text-align: center;
  justify-content: center;
}

.cash-state-pill.is-closed {
  background: linear-gradient(90deg, #dc2626, #ef4444);
  color: #ffffff;
  text-align: center;
  justify-content: center;
}

.cash-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cash-header-info {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: center;
  text-align: right;
}

.cash-header-line small {
  display: inline-block;
  color: #071428;
  font-size: .72rem;
  margin-right: 6px;
  font-weight: 600;
}

.cash-header-line strong {
  color: #000000;
  font-size: .95rem;
  display: inline-block;
}

.cash-state-sub {
  font-size: .73rem;
  color: rgba(230, 238, 248, 0.82);
  margin-top: 4px;
}

.cash-actions-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.cash-action-btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, .2);
  background: rgba(248, 250, 252, .9);
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.cash-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .15);
  border-color: rgba(37, 99, 235, .44);
  background: #fff;
}

.cash-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.cash-kpi-card {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cash-kpi-card:hover {
  transform: translateY(-2px);
}

.cash-kpi-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-weight: 700;
}

.cash-kpi-head i {
  width: 16px;
  height: 16px;
}

.cash-kpi-card h4 {
  margin: 0;
  font-size: 1.42rem;
  color: #0f172a;
}

/* Compact KPI styles */
.cash-kpi-card {
  min-height: 100px;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.cash-kpi-head {
  font-size: .82rem;
  color: rgba(255, 255, 255, 0.92);
}

.cash-kpi-card h4 {
  font-size: 1.2rem;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.cash-kpi-card .icon-lg {
  width: 22px;
  height: 22px;
}

.cash-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.22);
}

/* Color accents */
.kpi-inicial {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  border: 1px solid rgba(180, 83, 9, 0.35);
  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.2);
}

.kpi-saldo {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border: 1px solid rgba(30, 64, 175, 0.35);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.2);
}

.kpi-ingresos {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  border: 1px solid rgba(21, 128, 61, 0.35);
  box-shadow: 0 12px 30px rgba(22, 163, 74, 0.18);
}

.kpi-anulados {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
  border: 1px solid rgba(185, 28, 28, 0.35);
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.18);
}

/* Payments cards */
.payments-cards-grid {
  display: block;
}

.payment-linear-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-linear-item {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96));
  padding: 10px 12px 12px;
}

.payment-linear-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.payment-linear-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.payment-linear-label-wrap i {
  width: 16px;
  height: 16px;
  color: #334155;
}

.payment-linear-label {
  font-size: .82rem;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.payment-linear-values {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.payment-linear-values strong {
  font-size: 1rem;
  color: #0f172a;
}

.payment-linear-values span {
  font-size: .78rem;
  color: #64748b;
  font-weight: 700;
}

.payment-linear-track {
  width: 100%;
  height: 12px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  overflow: hidden;
}

.payment-linear-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width .25s ease;
}

.pay-efectivo .payment-linear-track span {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.pay-billetera .payment-linear-track span {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.pay-transferencia .payment-linear-track span {
  background: linear-gradient(90deg, #06b6d4, #67e8f9);
}

.pay-tarjeta .payment-linear-track span {
  background: linear-gradient(90deg, #f97316, #fdba74);
}

.payment-linear-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed rgba(148, 163, 184, 0.4);
  padding-top: 10px;
  margin-top: 4px;
}

.payment-linear-total span {
  color: #64748b;
  font-weight: 700;
}

.payment-linear-total strong {
  color: #0f172a;
  font-size: 1.08rem;
}

.pay-efectivo {
  border-left: 4px solid #10b981;
}

.pay-billetera {
  border-left: 4px solid #7c3aed;
}

.pay-transferencia {
  border-left: 4px solid #06b6d4;
}

.pay-tarjeta {
  border-left: 4px solid #f97316;
}

.cash-close-summary-panel {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.92));
}

/* Export modal */
.export-modal-dialog {
  max-width: 720px;
}

.export-modal.dark {
  background: linear-gradient(180deg, #071427, #0f1b2a);
  color: #e6eef8;
  border-radius: 18px;
}

.export-modal.dark .modal-header,
.export-modal.dark .modal-body,
.export-modal.dark .modal-footer {
  padding-left: 24px;
  padding-right: 24px;
}

.export-modal.dark .modal-body {
  padding-top: 6px;
  padding-bottom: 22px;
}

.export-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.export-card {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  padding: 16px 16px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  min-height: 88px;
}

.export-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.3);
}

.export-pdf i,
.export-xls i {
  width: 28px;
  height: 28px;
}

.export-pdf {
  border-left: 6px solid #ef4444;
}

.export-xls {
  border-left: 6px solid #059669;
}

@media(min-width:768px) {
  .export-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cash-forms-card,
.cash-payments-card,
.cash-history-card {
  border: 1px solid rgba(148, 163, 184, .18);
}

.cash-payments-table thead th {
  font-size: .74rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cash-payment-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.cash-payment-method i {
  width: 15px;
  height: 15px;
  color: #334155;
}

.cash-payment-share {
  min-width: 120px;
}

.cash-payment-share strong {
  font-size: .8rem;
  color: #334155;
}

.cash-payment-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .22);
  overflow: hidden;
  margin-top: 4px;
}

.cash-payment-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
}

.cash-history-table th {
  font-size: .75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.cash-history-table td {
  white-space: nowrap;
}

.cash-diff-up {
  color: #15803d;
  font-weight: 700;
}

.cash-diff-down {
  color: #dc2626;
  font-weight: 700;
}

.cash-diff-neutral {
  color: #475569;
  font-weight: 600;
}

.cash-history-cards {
  display: none;
  gap: 12px;
}

.cash-history-mobile-card {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  padding: 14px;
}

.cash-history-mobile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cash-history-mobile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cash-history-mobile-grid small {
  display: block;
  color: #64748b;
  font-size: .73rem;
}

.cash-history-mobile-grid strong {
  color: #0f172a;
  font-size: .86rem;
}

.nav-tabs {
  border-bottom: 0;
  gap: 10px;
}

.nav-tabs .nav-link {
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(255, 255, 255, .74);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 8px 18px rgba(15, 23, 42, .04);
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border-color: rgba(37, 99, 235, .18);
}

.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .12);
}

@media (max-width: 991.98px) {

  .reports-hero,
  .report-panel {
    padding: 18px;
  }

  #reportes .col-lg-8 .report-panel,
  #reportes .col-lg-7 .report-panel,
  #reportes .col-lg-5 .report-panel,
  #reportes .col-lg-6 .report-panel,
  #reportes .col-lg-4.d-grid.gap-4 .report-panel {
    min-height: 0;
  }

  #reportVentasChart {
    min-height: 280px;
    max-height: 280px;
  }

  #reportTiposVentaChart,
  #reportInventarioChart,
  #reportTopProductosChart {
    min-height: 190px;
    max-height: 200px;
  }

  .report-metric-strip {
    grid-template-columns: 1fr;
  }

  .cash-status-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .cash-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .cash-actions-bar {
    grid-template-columns: 1fr;
  }

  .cash-summary-grid {
    grid-template-columns: 1fr;
  }

  .cash-status-meta {
    grid-template-columns: 1fr;
  }

  .cash-history-table-wrap {
    display: none;
  }

  .cash-history-cards {
    display: grid;
  }

  .cash-history-mobile-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Final premium overrides: unify shadows, surfaces, tables, forms, modals
   and notifications without changing layout or behavior.
   ===================================================================== */

:root {
  --app-bg: #f5f7fb;
  --sidebar-bg: #071224;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --brand: #2563eb;
  --brand-2: #1d4ed8;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-strong: rgba(255, 255, 255, 0.95);
  --line: rgba(15, 23, 42, .08);
  --line-strong: rgba(15, 23, 42, .12);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-hover: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .08);
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 16px;
}

html,
body {
  background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.05), transparent 30%), #f5f7fb;
  color: var(--text-primary);
}

body::before {
  opacity: .18;
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 78%);
}

.main {
  padding: 34px;
}

.sidebar {
  background:
    radial-gradient(circle at top left,
      rgba(37, 99, 235, 0.42),
      transparent 45%),

    radial-gradient(circle at bottom right,
      rgba(59, 130, 246, 0.18),
      transparent 35%),

    linear-gradient(180deg,
      #071224 0%,
      #0a1529 100%);

  overflow: hidden;
}

.menu-btn,
.settings-toggle,
.menu-toggle {
  box-shadow: none;
}

.menu-btn {
  border-radius: 16px;
}

.menu-btn:hover {
  box-shadow: 0 10px 28px rgba(2, 6, 23, .18);
}

.active-menu {
  box-shadow: 0 10px 30px rgba(37, 99, 235, .22) !important;
}

.card-box,
.table-container,
.modal-content,
.system-modal .modal-content,
.ticket-preview-modal .modal-content {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  overflow: visible;
}

.card-box:hover,
.table-container:hover,
.premium-alert-card:hover,
.table-container .table tbody tr:hover {
  box-shadow: var(--shadow-hover);
}

.dashboard-panel,
.premium-side-panel,
.table-container,
.card-box {
  overflow: visible;
}

.dashboard-panel {
  min-height: 440px;
}

.dashboard-panel canvas {
  height: 340px !important;
  max-height: 340px;
}

.eyebrow-chip,
.panel-kicker,
.panel-badge,
.metric-pill {
  border-radius: 999px;
}

.metric-icon,
.premium-alert-icon {
  border-radius: 18px;
}

.premium-alert-card {
  background: rgba(248, 250, 252, .92);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px rgba(15, 23, 42, .05);
}

.table-container {
  padding: 24px;
}

.table-container .table {
  border-collapse: separate;
  border-spacing: 0 10px;
}

.table-container .table thead th {
  background: transparent;
  border: 0;
  padding: 10px 14px 8px;
  color: var(--text-secondary);
}

.table-container .table tbody tr {
  background: rgba(255, 255, 255, .92);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 8px 18px rgba(15, 23, 42, .04);
}

.table-container .table tbody td {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.table-container .table tbody tr td:first-child {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.table-container .table tbody tr td:last-child {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.table-container .table tbody tr:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .98);
}

input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea,
.form-control,
.combo-input,
.form-select {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) inset;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.combo-input:focus,
.form-select:focus {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
  transform: none;
}

.btn {
  border-radius: 14px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn-dark {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

.user-permissions-panel {
  color: #000000 !important;
  background: #ffffff !important;
}

.user-permissions-panel .form-check-label,
#userPermissionsContainer .form-check-label,
#userPermissionsContainer label,
#userPermissionsContainer p,
#userPermissionsContainer span,
#userPermissionsContainer div,
.user-permissions-panel label,
.user-permissions-panel small,
.modal #userPermissionsContainer label,
.modal #userPermissionsContainer .form-check-label,
.modal .user-permissions-panel label,
.modal .user-permissions-panel .form-check-label,
#modalUserForm #userPermissionsContainer label,
#modalUserForm #userPermissionsContainer .form-check-label {
  color: #000000 !important;
}

.user-permissions-panel .form-check-input,
#userPermissionsContainer .form-check-input,
.user-permission-check {
  border-color: rgba(15, 23, 42, .35) !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
}



.auth-close-btn {
  border-color: rgba(255, 255, 255, .22) !important;
  color: rgba(255, 255, 255, .92) !important;
}

.auth-close-btn:hover,
.auth-close-btn:focus {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .34) !important;
}

#modalUserForm .modal-footer {
  gap: 12px;
  padding-top: 18px;
}

#modalUserForm .modal-footer .btn {
  min-width: 118px;
  padding: 0.78rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

/* Ensure form controls in the Create User modal are readable (dark text on white) */
#modalUserForm .form-control,
#modalUserForm .form-select,
#modalUserForm select.form-control {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, .16) !important;
}

#modalUserForm .form-label {
  color: #fff !important;
}

.auth-cancel-btn,
.auth-save-btn {
  background: var(--primary) !important;
  border: 1px solid rgba(11, 99, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(11, 99, 255, 0.12);
}

.auth-cancel-btn {
  opacity: 0.92;
}

.auth-cancel-btn:hover,
.auth-cancel-btn:focus {
  background: #0a54d3 !important;
  opacity: 1;
  transform: translateY(-1px);
}

.auth-save-btn:hover,
.auth-save-btn:focus {
  background: #0e66ff !important;
  transform: translateY(-1px);
}

/* Distinct card style for auth credentials */
.auth-credentials-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 28px rgba(2, 6, 23, 0.6);
}

.auth-credentials-panel .form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.auth-credentials-panel .form-label {
  color: #ffffff !important;
}

/* New distinct look for the Auth Credentials modal: light card centered */
#modalAuthCredentials .modal-content {
  background: transparent;
}

#modalAuthCredentials .auth-credentials-panel {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.12) !important;
}

#modalAuthCredentials .auth-credentials-panel .form-control {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

#modalAuthCredentials .auth-credentials-panel .form-label {
  color: #0f172a !important;
}

#modalAuthCredentials .modal-header {
  border-bottom: none;
  background: linear-gradient(90deg, rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.85));
}

#modalAuthCredentials .modal-title,
#modalAuthCredentials .modal-header small {
  color: #fff !important;
}

#modalAuthCredentials .btn-close {
  filter: none;
}

/* Delete confirmation modal styling */
#modalConfirmDeleteUser .delete-modal {
  border: 1px solid rgba(239, 68, 68, 0.08);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.95), rgba(7, 10, 16, 0.95));
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.7);
}

#modalConfirmDeleteUser .modal-header {
  border-bottom: none;
}

#modalConfirmDeleteUser .modal-title {
  color: #ffffff;
}

#modalConfirmDeleteUser .delete-icon svg {
  width: 22px;
  height: 22px;
  color: #f87171;
  stroke: #f87171;
}

#modalConfirmDeleteUser .modal-body {
  color: #ffffff;
}

#modalConfirmDeleteUser .cancel-delete-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#modalConfirmDeleteUser .danger-delete-btn {
  background: linear-gradient(90deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  border: 1px solid rgba(220, 38, 38, 0.18) !important;
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.12);
}

#modalConfirmDeleteUser .danger-delete-btn:hover {
  transform: translateY(-1px);
}

.user-permissions-panel .form-check {
  min-height: 28px;
}

.btn-primary:hover,
.btn-dark:hover {
  box-shadow: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .08);
}

.btn-outline-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-danger,
.btn-outline-success {
  border-width: 1px;
  background: rgba(255, 255, 255, 0);
}

.modal-header,
.system-modal .modal-header,
.ticket-preview-modal .modal-header {
  border-bottom: 1px solid var(--line);
}

.modal-footer,
.system-modal .modal-footer,
.ticket-preview-modal .modal-footer {
  border-top: 1px solid var(--line);
}

.system-modal .modal-header {
  background: linear-gradient(135deg, #0f172a, #111827);
}

.system-modal .modal-content {
  overflow: visible;
}

.ticket-preview-modal .modal-content {
  border: 1px solid rgba(37, 99, 235, .18);
}

.sys-notification-container {
  right: 18px;
  bottom: 18px;
  gap: 12px;
}

.sys-notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 280px;
  max-width: 380px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, .18);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
  animation: notificationIn .22s ease both;
  position: relative;
}

.sys-notification-close {
  background: transparent;
  border: none;
  padding: 4px;
  margin: -4px -4px 0 auto;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1;
  flex-shrink: 0;
}

.sys-notification-close:hover {
  color: #0f172a;
  background: rgba(148, 163, 184, 0.18);
}

.pos-product-no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #94a3b8;
  border-radius: inherit;
}

.sys-notification-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.sys-notification-title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sys-notification-message {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.4;
}

.sys-notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.sys-notification-icon.sys-success {
  background: rgba(22, 163, 74, .12);
  color: #15803d;
}

.sys-notification-icon.sys-error {
  background: rgba(239, 68, 68, .12);
  color: #dc2626;
}

.sys-notification-icon.sys-warning {
  background: rgba(245, 158, 11, .14);
  color: #d97706;
}

.sys-notification-icon.sys-info {
  background: rgba(37, 99, 235, .12);
  color: #2563eb;
}

.sys-notification.sys-success,
.sys-notification.sys-error,
.sys-notification.sys-warning,
.sys-notification.sys-info {
  border-left: 0;
}

.sys-notification.sys-success {
  box-shadow: inset 3px 0 0 #16a34a, 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
}

.sys-notification.sys-error {
  box-shadow: inset 3px 0 0 #dc2626, 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
}

.sys-notification.sys-warning {
  box-shadow: inset 3px 0 0 #f59e0b, 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
}

.sys-notification.sys-info {
  box-shadow: inset 3px 0 0 #2563eb, 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
}

@keyframes notificationIn {
  from {
    opacity: 0;
    transform: translateY(10px) translateX(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.sidebar,
.card-box,
.table-container,
.modal-content,
.premium-alert-card,
.menu-btn,
.btn,
.form-control,
.form-select,
.sys-notification {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Caja Chica overrides: keep these above the generic card/modal surface rules */
.cash-kpi-card {
  color: #fff !important;
  background: transparent !important;
}

.cash-kpi-card.kpi-inicial {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  border-color: rgba(180, 83, 9, 0.35) !important;
}

.cash-kpi-card.kpi-saldo {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  border-color: rgba(30, 64, 175, 0.35) !important;
}

.cash-kpi-card.kpi-ingresos {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
  border-color: rgba(21, 128, 61, 0.35) !important;
}

.cash-kpi-card.kpi-anulados {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%) !important;
  border-color: rgba(185, 28, 28, 0.35) !important;
}

.cash-kpi-card .cash-kpi-head,
.cash-kpi-card .cash-kpi-head span,
.cash-kpi-card .cash-kpi-head i,
.cash-kpi-card h4 {
  color: #fff !important;
}

.export-modal-dialog {
  max-width: 760px;
}

.export-modal.dark {
  background: linear-gradient(180deg, #0b1324 0%, #101b30 100%) !important;
  color: #e5edf7 !important;
}

.export-modal.dark .modal-header,
.export-modal.dark .modal-body,
.export-modal.dark .modal-footer {
  background: transparent !important;
  color: inherit !important;
}

.export-modal.dark .modal-body {
  padding-top: 10px;
  padding-bottom: 24px;
}

.export-modal.dark .text-muted,
.export-modal.dark small {
  color: rgba(229, 237, 247, 0.72) !important;
}

.export-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.export-card {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: #fff !important;
  cursor: pointer;
  min-height: 92px;
}

.export-card strong,
.export-card .small,
.export-card i {
  color: #fff !important;
}

.export-modal.dark .form-control,
.export-modal.dark .form-select {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

.export-modal.dark .form-control::placeholder {
  color: rgba(255, 255, 255, 0.56) !important;
}

@media (min-width: 768px) {
  .export-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cash-close-compare-grid {
  margin-top: 4px;
}

.cash-close-summary-box {
  min-height: 74px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.02));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.cash-close-summary-label {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}

.cash-close-summary-box strong {
  font-size: 1rem;
  color: #0f172a;
}

.cash-close-summary-panel .badge {
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.cash-close-summary-box .text-danger,
.cash-close-summary-box .text-success {
  font-weight: 700;
}

.cash-close-advice {
  border: 1px solid rgba(245, 158, 11, 0.22);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06));
  color: #92400e;
}

@media (max-width: 991.98px) {
  .sidebar {
    width: 100%;
    border-radius: 0;
  }

  .main {
    padding: 18px;
  }
}

.modal-header .modal-title-dark {
  color: #000000 !important;
  font-weight: 700 !important;
}

.modal-header .modal-title,
.system-modal .modal-title,
.modal-header h5,
.modal-header h6 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.modal-header small,
.system-modal .modal-header small {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Form labels for page forms */
.form-label {
  color: #111827 !important;
  font-weight: 600 !important;
}

/* Dark Modal labels only */
.modal:not(#modalConfiguracion) label,
.modal:not(#modalConfiguracion) .form-label,
.system-modal:not(#modalConfiguracion) label,
.system-modal:not(#modalConfiguracion) .form-label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Unified modal system */
.modal-content,
.system-modal .modal-content,
.ticket-preview-modal .modal-content,
.export-modal.dark {
  background: linear-gradient(180deg, #0b1324 0%, #101b30 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(2, 6, 23, .32) !important;
  overflow: hidden;
}

.modal-header,
.system-modal .modal-header,
.ticket-preview-modal .modal-header,
.export-modal.dark .modal-header {
  background: linear-gradient(135deg, #0b63ff 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  padding: 20px 24px 16px !important;
}

.modal-body,
.system-modal .modal-body,
.ticket-preview-modal .modal-body,
.export-modal.dark .modal-body {
  color: #ffffff !important;
  padding: 22px 24px !important;
}

.modal-footer,
.system-modal .modal-footer,
.ticket-preview-modal .modal-footer,
.export-modal.dark .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  padding: 16px 24px 22px !important;
}

.modal .btn-close,
.system-modal .btn-close,
.ticket-preview-modal .btn-close,
.export-modal.dark .btn-close {
  filter: invert(1) brightness(1.1);
  opacity: .88;
}

.modal .form-control,
.modal .form-select,
.modal select,
.system-modal select,
.system-modal .form-select,
.modal textarea,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="search"],
.modal input[type="date"] {
  background-color: #1a2740 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color-scheme: dark !important;
}

.modal select option,
.system-modal select option,
.modal .form-select option,
.system-modal .form-select option,
.modal .form-control option,
.system-modal .form-control option,
select option {
  background-color: #1a2740 !important;
  color: #ffffff !important;
  padding: 8px;
}

/* Autofill for dark export modals only if present */
.export-modal.dark .form-control:-webkit-autofill,
.export-modal.dark input:-webkit-autofill,
.export-modal.dark select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #1c2842 inset !important;
  box-shadow: 0 0 0px 1000px #1c2842 inset !important;
  background-color: #1c2842 !important;
  caret-color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.modal .form-control::placeholder,
.modal input[type="text"]::placeholder,
.modal input[type="number"]::placeholder,
.modal input[type="search"]::placeholder,
.modal textarea::placeholder {
  color: rgba(255, 255, 255, .56) !important;
}

.modal input[type="date"] {
  color-scheme: dark;
}

.modal input[type="date"]::-webkit-calendar-picker-indicator,
.system-modal input[type="date"]::-webkit-calendar-picker-indicator,
.ticket-preview-modal input[type="date"]::-webkit-calendar-picker-indicator,
.export-modal.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  opacity: 1;
  cursor: pointer;
}

/* Modal Submit Buttons without gradients */
.modal-footer .btn-primary,
.modal-footer button.btn-dark,
.modal-footer .auth-save-btn {
  background-color: #2563eb !important;
  background-image: none !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
}

.modal-footer .btn-primary:hover,
.modal-footer button.btn-dark:hover,
.modal-footer .auth-save-btn:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

.modal-footer .btn-outline-dark,
.modal-footer .btn-outline-secondary,
.modal-footer .btn-outline-light,
.modal-footer .btn-secondary,
.modal-footer .btn-light,
.modal-footer .auth-cancel-btn {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
}

.modal-footer .btn-outline-dark:hover,
.modal-footer .btn-outline-secondary:hover,
.modal-footer .btn-outline-light:hover,
.modal-footer .btn-secondary:hover,
.modal-footer .btn-light:hover,
.modal-footer .auth-cancel-btn:hover {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* Tables inside dark modals (Editar Venta, etc.) */
.modal .table,
.system-modal .table {
  color: #ffffff !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.modal .table th,
.system-modal .table th {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 700 !important;
}

.modal .table td,
.system-modal .table td {
  background-color: transparent !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal .table tr,
.system-modal .table tr {
  background-color: transparent !important;
}

/* Configuration modal: light interior for readability */
#modalConfiguracion .modal-dialog {
  max-height: 85vh !important;
}

#modalConfiguracion .modal-content {
  max-height: 85vh !important;
  /* allow modal-body to handle scrolling via Bootstrap's scrollable dialog */
  overflow: visible !important;
}

#modalConfiguracion .modal-header {
  flex-shrink: 0;
}

#modalConfiguracion .modal-body {
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
  /* let Bootstrap's modal-dialog-scrollable provide scrolling */
  overflow: auto !important;
}

#modalConfiguracion .modal-body .row {
  display: flex;
}

#modalConfiguracion .modal-body .row .col-lg-3 {
  padding-top: 20px;
  padding-left: 12px;
  padding-right: 12px !important;
}

#modalConfiguracion .modal-body .row .col-lg-9 {
  padding: 20px 20px 20px 16px !important;
}

#modalConfiguracion .modal-footer {
  flex-shrink: 0;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important;
  border-top: 1px solid rgba(15, 23, 42, .08) !important;
  gap: 10px !important;
  padding: 20px !important;
}

#modalConfiguracion .modal-footer .btn {
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 500 !important;
}

#modalConfiguracion .modal-footer .btn-outline-dark {
  border-color: rgba(15, 23, 42, .32) !important;
  color: var(--text-primary) !important;
}

#modalConfiguracion .modal-footer .btn-outline-dark:hover {
  background: rgba(15, 23, 42, .05) !important;
  border-color: rgba(15, 23, 42, .48) !important;
}

#modalConfiguracion .modal-footer .btn-dark {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

#modalConfiguracion .modal-footer .btn-dark:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

#modalConfiguracion .modal-body>.row>.col-lg-3,
#modalConfiguracion .modal-body>.row>.col-lg-9 {
  display: flex;
  flex-direction: column;
}

#modalConfiguracion .config-section {
  max-height: 100%;
  overflow-y: auto;
  padding-bottom: 10px;
  margin-bottom: 0;
}

#modalConfiguracion .config-section>div {
  background: rgba(255, 255, 255, .96) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}

/* Ensure flex children can shrink and allow inner scrolling to reach the bottom */
#modalConfiguracion .modal-content {
  height: 85vh !important;
}

#modalConfiguracion .modal-body,
#modalConfiguracion .modal-body .row,
#modalConfiguracion .modal-body>.row>.col-lg-3,
#modalConfiguracion .modal-body>.row>.col-lg-9,
#modalConfiguracion .config-section {
  min-height: 0 !important;
}

#modalConfiguracion .config-section {
  flex: 1 1 auto !important;
}

#modalConfiguracion .config-section>div {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

/* Override h-100 inside modal to avoid forcing incorrect heights */
#modalConfiguracion .h-100 {
  height: auto !important;
}

/* Ensure inner content has a calculable max-height so it can scroll to bottom */
#modalConfiguracion .config-section>div {
  max-height: calc(85vh - 160px) !important;
}

#modalConfiguracion .modal-body h6,
#modalConfiguracion .modal-body .form-label,
#modalConfiguracion .modal-body .form-check-label,
#modalConfiguracion .modal-body p,
#modalConfiguracion .modal-body small,
#modalConfiguracion .modal-body .form-text,
#modalConfiguracion .table,
#modalConfiguracion .table th,
#modalConfiguracion .table td,
#seccion-usuarios table,
#seccion-usuarios table th,
#seccion-usuarios table td,
#usersTableBody,
#usersTableBody tr,
#usersTableBody td {
  color: #000000 !important;
}

#modalConfiguracion .table th,
#seccion-usuarios table th {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
  border-bottom: 2px solid rgba(15, 23, 42, 0.15) !important;
}

#modalConfiguracion .table td,
#seccion-usuarios table td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}

#modalConfiguracion .modal-body .text-muted {
  color: var(--muted) !important;
}

#modalConfiguracion .modal-body .form-control,
#modalConfiguracion .modal-body .form-select,
#modalConfiguracion .modal-body textarea,
#modalConfiguracion .modal-body input[type="text"],
#modalConfiguracion .modal-body input[type="number"] {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: rgba(148, 163, 184, .32) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) inset !important;
}

#modalConfiguracion .modal-body .form-control::placeholder,
#modalConfiguracion .modal-body textarea::placeholder,
#modalConfiguracion .modal-body input[type="text"]::placeholder,
#modalConfiguracion .modal-body input[type="number"]::placeholder {
  color: #94a3b8 !important;
}

#modalConfiguracion .modal-body .form-control:focus,
#modalConfiguracion .modal-body .form-select:focus,
#modalConfiguracion .modal-body textarea:focus,
#modalConfiguracion .modal-body input[type="text"]:focus,
#modalConfiguracion .modal-body input[type="number"]:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25) !important;
}

.config-menu-btn {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  color: var(--text-primary) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.config-menu-btn:hover {
  background: rgba(15, 23, 42, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

.config-menu-btn.active {
  background: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

.config-section {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#authScreen .auth-input,
#authScreen input.auth-input,
#authScreen .auth-password-group .auth-input,
#authScreen .form-control.auth-input,
#authScreen .auth-password-group>.form-control.auth-input,
#authScreen input[type="password"].auth-input {
  background: rgba(37, 99, 235, 0.16) !important;
  background-color: rgba(37, 99, 235, 0.16) !important;
  background-clip: padding-box !important;
  border-color: rgba(77, 148, 255, 0.55) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

#authScreen .auth-input:focus,
#authScreen input.auth-input:focus,
#authScreen .auth-password-group .auth-input:focus,
#authScreen .form-control.auth-input:focus,
#authScreen .auth-password-group>.form-control.auth-input:focus,
#authScreen input[type="password"].auth-input:focus {
  background: rgba(37, 99, 235, 0.16) !important;
  background-color: rgba(37, 99, 235, 0.16) !important;
  border-color: rgba(77, 148, 255, 0.55) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 .18rem rgba(77, 148, 255, .22) !important;
}

#authScreen .auth-input::placeholder,
#authScreen .form-control.auth-input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

#modalConfiguracion .modal-body input[type="number"]:focus {
  border-color: rgba(11, 99, 255, .55) !important;
  box-shadow: 0 0 0 4px rgba(11, 99, 255, .10) !important;
}

#modalConfiguracion .modal-body .form-check-input {
  border-color: rgba(148, 163, 184, .38) !important;
}

#modalConfiguracion .modal-body .form-check-input:checked {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

#modalConfiguracion .modal-body .bg-light {
  background: rgba(255, 255, 255, .96) !important;
}

/* Prevent layout shift when modals open/close by keeping scrollbar space stable */
html {
  overflow-y: scroll;
}

/* Also prevent Bootstrap from adding body padding when modal opens */
body.modal-open {
  padding-right: 0 !important;
}

/* --- POS Card Footer & Alignment Fix --- */
.pos-product-card {
  display: flex !important;
  flex-direction: column !important;
}

.pos-card-footer {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.pos-card-footer .btn-success {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 14px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   PULACHE CATALOG DESIGN SYSTEM OVERLAY (MATCHING CATALOG AESTHETIC)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,700;0,800;0,900;1,700;1,800&display=swap');

:root {
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Montserrat', 'Inter', sans-serif;

  /* Color Palette matching Catalogo */
  --bg-main: #F9FAFB;
  --bg-card: #FFFFFF;
  --color-dark: #111827;
  --color-dark-subtle: #374151;
  --color-gray-muted: #6B7280;
  --color-gray-light: #F3F4F6;
  --color-border: #E5E7EB;

  --color-blue: #2563EB;
  --color-blue-dark: #1D4ED8;
  --color-blue-light: #DBEAFE;

  --primary: #111827;
  --success: #16A34A;
  --danger: #EF4444;

  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --shadow-hover: 0 20px 30px -10px rgba(15, 23, 42, 0.12);
}

body {
  font-family: var(--font-main) !important;
  background-color: var(--bg-main) !important;
  background: var(--bg-main) !important;
  color: var(--color-dark) !important;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.fw-bold,
.fw-extrabold,
.sidebar-header h2,
.panel-badge {
  font-family: var(--font-heading) !important;
}

/* Sidebar styling matching catalog dark-black accent header */
.sidebar {
  background: #111827 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25) !important;
}

.sidebar-header h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.menu-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 9999px !important;
}

.active-menu,
.menu-btn.active-menu {
  background: #FFFFFF !important;
  color: #111827 !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Card boxes & Panels matching Catalog Cards */
.card,
.card-box,
.table-container,
.dashboard-panel,
.pos-product-card,
.pos-cart-shell,
.pos-summary-shell {
  background-color: var(--bg-card) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}

.pos-product-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: #CBD5E1 !important;
}

/* Buttons matching Catalog Pill Style */
.btn-primary,
.btn-dark {
  background-color: #111827 !important;
  border-color: #111827 !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover,
.btn-dark:hover {
  background-color: #1F2937 !important;
  border-color: #1F2937 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.2) !important;
}

.btn-success,
.btn-whatsapp {
  background-color: #25D366 !important;
  border-color: #25D366 !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-success:hover,
.btn-whatsapp:hover {
  background-color: #128C7E !important;
  border-color: #128C7E !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3) !important;
}

.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-primary,
.btn-secondary {
  border-color: #6B7280 !important;
  color: #111827 !important;
  background-color: #FFFFFF !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
}

.btn-outline-dark:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-secondary:hover {
  background-color: #111827 !important;
  color: #FFFFFF !important;
  border-color: #111827 !important;
}

/* Form Controls & Inputs */
.form-control,
.form-select {
  border-radius: 12px !important;
  border: 1px solid #D1D5DB !important;
  background-color: #FFFFFF !important;
  color: #111827 !important;
  font-size: 0.88rem !important;
  padding: 0.5rem 0.85rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #111827 !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1) !important;
}

/* Badges */
.badge {
  border-radius: 9999px !important;
  font-weight: 700 !important;
  padding: 0.35em 0.8em !important;
}

.badge.bg-dark {
  background-color: #111827 !important;
  color: #FFFFFF !important;
}

.badge.bg-primary {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
}

.badge.bg-success {
  background-color: #16A34A !important;
  color: #FFFFFF !important;
}

.panel-badge {
  background: #F3F4F6 !important;
  color: #374151 !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Tables */
.table th {
  background-color: #F9FAFB !important;
  color: #6B7280 !important;
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.table td {
  border-bottom: 1px solid #F3F4F6 !important;
  color: #111827 !important;
}

/* Responsive Tables & Horizontal Scroll Slider */
.table-responsive {
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-md, 8px);
}

/* Custom styled horizontal scrollbar slider */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.15);
  border-radius: 9999px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.75);
}

/* Ensure minimum width for data tables so columns don't compress awkwardly on small screens */
#tablaClientes,
#tablaEnvios,
#tablaVentas,
#tablaCajasHistorico,
#tablaInventario {
  min-width: 720px;
}

.table-responsive .table th,
.table-responsive .table td {
  white-space: nowrap;
}

.table-responsive .table td {
  vertical-align: middle;
}

/* Custom File Upload Card & Styled File Input Buttons */
.custom-image-upload-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px !important;
  transition: all 0.2s ease-in-out !important;
}

.custom-image-upload-card:hover {
  background: rgba(37, 99, 235, 0.06) !important;
  border-color: rgba(37, 99, 235, 0.55) !important;
}

.custom-image-upload-card label.btn-primary {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  justify-content: center !important;
  text-align: center !important;
}

.custom-image-upload-card label.btn-primary:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

/* Fallback styling for standard file inputs across standard browsers */
input[type="file"].form-control,
.modal-body input[type="file"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  cursor: pointer;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.825rem !important;
  margin-right: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #1d4ed8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

/* Unrounded styling ONLY for Editar Venta products table */
#modalEditarVenta .table-responsive,
#modalEditarVenta .table,
#modalEditarVenta .table th,
#modalEditarVenta .table td,
#editarVentaItemsBody input,
#editarVentaItemsBody .form-control {
  border-radius: 0 !important;
}

/* Styling for Excel Bulk Import Modal (#modalImportarMasivo) */
#modalImportarMasivo .modal-content {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

#modalImportarMasivo .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#modalImportarMasivo .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#modalImportarMasivo .modal-title {
  color: #ffffff !important;
}

#modalImportarMasivo .excel-instructions-card,
#modalImportarMasivo .bg-light {
  background-color: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}

#modalImportarMasivo .excel-instructions-card h6,
#modalImportarMasivo .bg-light h6 {
  color: #ffffff !important;
}

#modalImportarMasivo .excel-instructions-card p,
#modalImportarMasivo .bg-light p,
#modalImportarMasivo .excel-instructions-card .text-muted,
#modalImportarMasivo .bg-light .text-muted {
  color: #94a3b8 !important;
}

#modalImportarMasivo .excel-instructions-card strong,
#modalImportarMasivo .bg-light strong {
  color: #38bdf8 !important;
}

#modalImportarMasivo .table-responsive,
#modalImportarMasivo .bg-white {
  background-color: #0b1329 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#modalImportarMasivo table {
  background-color: transparent !important;
  color: #f1f5f9 !important;
}

#modalImportarMasivo table th {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

#modalImportarMasivo table td {
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background-color: transparent !important;
  vertical-align: middle;
}

#modalImportarMasivo table tbody tr:nth-of-type(odd) td {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

#modalImportarMasivo table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}

#modalImportarMasivo code {
  color: #38bdf8 !important;
  background-color: rgba(15, 23, 42, 0.8) !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

#modalImportarMasivo .badge {
  font-weight: 700;
  padding: 4px 8px;
}

/* ==========================================================================
   GEOMETRIA Y SIMBOLOS UNIFICADOS PARA BOTONES DE ACCION DE TABLAS (INVENTARIO Y OTROS)
   ========================================================================== */

.table-action-btns,
.inventory-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.table-action-btns .btn,
.inventory-action-btn,
td.inventory-actions button,
.table-action-btns button {
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  height: auto !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease-in-out !important;
}

/* Estilos específicos para Editar (oscuro / "negritos" como la imagen) */
.table-action-btns .btn-outline-secondary,
.table-action-btns .btn-outline-primary,
td.inventory-actions .btn-outline-secondary,
td.inventory-actions .btn-outline-primary,
.inventory-action-btn.btn-outline-secondary,
.inventory-action-btn.btn-outline-primary {
  border: 1.5px solid #334155 !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
}

.table-action-btns .btn-outline-secondary:hover,
.table-action-btns .btn-outline-primary:hover,
td.inventory-actions .btn-outline-secondary:hover,
td.inventory-actions .btn-outline-primary:hover,
.inventory-action-btn.btn-outline-secondary:hover,
.inventory-action-btn.btn-outline-primary:hover {
  background-color: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}

/* Estilos específicos para Eliminar (rojo orgánico como la imagen) */
.table-action-btns .btn-outline-danger,
td.inventory-actions .btn-outline-danger,
.inventory-action-btn.btn-outline-danger {
  border: 1.5px solid #e11d48 !important;
  color: #e11d48 !important;
  background-color: #ffffff !important;
}

.table-action-btns .btn-outline-danger:hover,
td.inventory-actions .btn-outline-danger:hover,
.inventory-action-btn.btn-outline-danger:hover {
  background-color: #e11d48 !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
}

/* Tamaño e íconos Lucide dentro de botones de acción */
.table-action-btns .btn svg,
.table-action-btns .btn i,
.table-action-btns .btn [data-lucide],
.inventory-action-btn svg,
.inventory-action-btn i,
.inventory-action-btn [data-lucide],
td.inventory-actions button svg,
td.inventory-actions button i,
td.inventory-actions button [data-lucide] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke-width: 2.2 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* ==========================================
   FIXES RESPONSIVE & AUTOCUMPLEADO DE ROLES
   ========================================== */

/* Coherencia de color en Autocompletado y Selects (Campo Roles y Modal Usuario) */
#modalUserForm .form-control,
#modalUserForm .form-select,
#modalUserForm input:not([type="checkbox"]):not([type="radio"]),
#modalUserForm select,
#formUserUsername,
#formUserPassword,
#formUserRole,
.form-select:not(.shipment-status-select),
select.form-control:not(.shipment-status-select),
.user-permissions-panel select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
}

#formUserRole option,
.form-select:not(.shipment-status-select) option,
select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Integración geométrica del Input de Contraseña y Botón Mostrar/Ocultar */
#modalUserForm #formUserPassword {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
  border-radius: 0.5rem !important;
  height: 42px !important;
  padding-right: 2.75rem !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#modalUserForm #formUserPassword:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

#modalUserForm #toggleFormUserPasswordButton {
  position: absolute !important;
  right: 0.35rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  padding: 0.35rem 0.5rem !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  z-index: 5 !important;
  border-radius: 0.375rem !important;
  margin: 0 !important;
}

#modalUserForm #toggleFormUserPasswordButton:hover,
#modalUserForm #toggleFormUserPasswordButton:focus {
  color: #0f172a !important;
  background-color: rgba(15, 23, 42, 0.06) !important;
}

/* Visibilidad y Color Azul en Checkboxes (Modal Usuario y Permisos) */
.form-check-input,
#modalUserForm .form-check-input,
#userPermissionsContainer .form-check-input,
.user-permission-check {
  background-color: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  cursor: pointer !important;
  margin-top: 0.1rem !important;
}

.form-check-input:checked,
#modalUserForm .form-check-input:checked,
#modalUserForm input[type="checkbox"]:checked,
#userPermissionsContainer .form-check-input:checked,
.user-permission-check:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Fix para color de texto e inhalación de fondo por Autocompletado del Navegador (Garantizar Texto Negro y Fondo Blanco Siempre) */
#modalUserForm .form-control:-webkit-autofill,
#modalUserForm .form-control:-webkit-autofill:hover,
#modalUserForm .form-control:-webkit-autofill:focus,
#modalUserForm .form-control:-webkit-autofill:active,
#modalUserForm input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill,
#modalUserForm input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:hover,
#modalUserForm input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:focus,
#modalUserForm input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:active,
#modalUserForm input:not([type="checkbox"]):not([type="radio"]):autofill,
#modalUserForm select:-webkit-autofill,
#modalUserForm select:-webkit-autofill:hover,
#modalUserForm select:-webkit-autofill:focus,
#modalUserForm select:-webkit-autofill:active,
#modalUserForm select:autofill,
#formUserUsername:-webkit-autofill,
#formUserUsername:-webkit-autofill:hover,
#formUserUsername:-webkit-autofill:focus,
#formUserUsername:-webkit-autofill:active,
#formUserUsername:autofill,
#formUserPassword:-webkit-autofill,
#formUserPassword:-webkit-autofill:hover,
#formUserPassword:-webkit-autofill:focus,
#formUserPassword:-webkit-autofill:active,
#formUserPassword:autofill,
#formUserRole:-webkit-autofill,
#formUserRole:-webkit-autofill:hover,
#formUserRole:-webkit-autofill:focus,
#formUserRole:-webkit-autofill:active,
#formUserRole:autofill,
input:not(#loginUsername):not(#loginPassword):not([type="checkbox"]):not([type="radio"]):-webkit-autofill,
input:not(#loginUsername):not(#loginPassword):not([type="checkbox"]):not([type="radio"]):-webkit-autofill:hover,
input:not(#loginUsername):not(#loginPassword):not([type="checkbox"]):not([type="radio"]):-webkit-autofill:focus,
input:not(#loginUsername):not(#loginPassword):not([type="checkbox"]):not([type="radio"]):-webkit-autofill:active,
input:not(#loginUsername):not(#loginPassword):not([type="checkbox"]):not([type="radio"]):autofill,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:autofill {
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  background-color: #ffffff !important;
  caret-color: #0f172a !important;
  color-scheme: light !important;
  transition: none !important;
}

/* Selector directo de Estado de Envío en Tablas */
.shipment-status-select {
  padding: 0.35rem 1.4rem 0.35rem 1.4rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  display: inline-block !important;
  width: auto !important;
  min-width: 135px !important;
  background-position: right 0.65rem center !important;
  background-size: 14px 10px !important;
  text-align: center !important;
  text-align-last: center !important;
  -webkit-text-align: center !important;
  -moz-text-align-last: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

#tablaEnvios td:nth-child(3),
#tablaEnvios th:nth-child(3),
#tablaEnvios td:nth-child(7),
#tablaEnvios th:nth-child(7) {
  text-align: center !important;
}

.shipment-status-select:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* Colores de estado según función (aplicados al entorno del selector y badges) */
select.shipment-status-select.shipment-status-pendiente,
.shipment-status-select.shipment-status-pendiente,
.shipment-status-pendiente {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde047 !important;
}

select.shipment-status-select.shipment-status-transito,
.shipment-status-select.shipment-status-transito,
.shipment-status-transito {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
}

select.shipment-status-select.shipment-status-entregado,
.shipment-status-select.shipment-status-entregado,
.shipment-status-entregado {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}

select.shipment-status-select.shipment-status-cancelado,
.shipment-status-select.shipment-status-cancelado,
.shipment-status-cancelado {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
}

/* Estilos para las opciones dentro del menú desplegable */
.shipment-status-select option,
select.shipment-status-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  text-align: center !important;
  text-align-last: center !important;
  -webkit-text-align: center !important;
  -moz-text-align-last: center !important;
  display: flex !important;
  justify-content: center !important;
  direction: ltr !important;
}

.shipment-status-select option[value="Pendiente"] {
  color: #92400e !important;
  background-color: #fffbeb !important;
}

.shipment-status-select option[value="En tránsito"] {
  color: #0369a1 !important;
  background-color: #f0f9ff !important;
}

.shipment-status-select option[value="Entregado"] {
  color: #15803d !important;
  background-color: #f0fdf4 !important;
}

.shipment-status-select option[value="Cancelado"] {
  color: #b91c1c !important;
  background-color: #fef2f2 !important;
}

/* Gestor de Variables (Tags/Chips con Botón +) */
.variable-tag-manager .variable-tags-container {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.variable-tag-badge {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
  transition: all 0.15s ease-in-out;
}

.variable-tag-badge:hover {
  background-color: #f1f5f9 !important;
}

.variable-tag-badge .btn-close,
.variable-tag-badge .variable-tag-remove-btn,
.variable-tag-remove-btn {
  color: #dc2626 !important;
  filter: none !important;
  opacity: 0.9 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

.variable-tag-badge .btn-close svg,
.variable-tag-badge .variable-tag-remove-btn svg,
.variable-tag-remove-btn svg {
  stroke: #dc2626 !important;
  filter: none !important;
}

.variable-tag-badge .btn-close:hover,
.variable-tag-badge .variable-tag-remove-btn:hover,
.variable-tag-remove-btn:hover {
  opacity: 1 !important;
  color: #b91c1c !important;
  transform: scale(1.2) !important;
}

.variable-tag-badge .btn-close:hover svg,
.variable-tag-badge .variable-tag-remove-btn:hover svg,
.variable-tag-remove-btn:hover svg {
  stroke: #b91c1c !important;
}

/* Ajustes Responsivos Globales (Tablas, Cards, Reportes y Modales) */
#tablaClientes,
#tablaVentas,
#tablaEnvios,
#tablaCajasHistorico,
#tablaInventario,
#tablaUsuarios {
  min-width: 720px;
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Reportes y Dashboard Grid Responsivo Adaptable */
.reports-summary-grid,
.dashboard-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.reports-summary-grid>.report-kpi-card,
.dashboard-stats>.stat-card,
.dashboard-stats>.col-md-3 {
  flex: 1 1 calc(23% - 16px) !important;
  min-width: 220px !important;
  max-width: 100% !important;
  width: auto !important;
  margin: 0 !important;
}

@media (max-width: 1100px) {

  .reports-summary-grid>.report-kpi-card,
  .dashboard-stats>.stat-card,
  .dashboard-stats>.col-md-3 {
    flex: 1 1 calc(45% - 16px) !important;
    min-width: 200px !important;
  }
}

@media (max-width: 768px) {

  .reports-summary-grid,
  .dashboard-stats {
    gap: 12px !important;
  }

  .report-kpi-card,
  .stat-card {
    padding: 16px !important;
    min-height: 125px !important;
  }

  .report-kpi-card h3,
  .stat-value {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 576px) {

  .reports-summary-grid>.report-kpi-card,
  .dashboard-stats>.stat-card,
  .dashboard-stats>.col-md-3 {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  .pos-product-card {
    margin-bottom: 12px;
  }
}

/* Carrusel y Editor de Fotos de Productos en Catálogo */
.pos-product-image-box {
  width: 100%;
  height: 150px;
  background-color: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
  overflow: hidden;
}

.pos-product-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.pos-product-image-box:hover img {
  transform: scale(1.04);
}

.photo-editor-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #cbd5e1;
}

/* ==========================================
   MODAL MATRIZ DE ENTRADA (ESTILOS Y CONTRASTE)
   ========================================== */
#modalMatrizEntrada .form-control,
#modalMatrizEntrada .form-select,
#modalMatrizEntrada input,
#modalMatrizEntrada select,
#matrizTipo,
#matrizModelo,
#matrizPrecio,
#matrizPrecioMayor,
#matrizColorSelect,
#matrizTallaSelect,
#matrizColorCustomInput,
#matrizTallaCustomInput {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(15, 23, 42, 0.2) !important;
  font-weight: 600 !important;
}

#modalMatrizEntrada .form-control::placeholder,
#modalMatrizEntrada input::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

#modalMatrizEntrada .form-control:focus,
#modalMatrizEntrada .form-select:focus,
#modalMatrizEntrada input:focus,
#modalMatrizEntrada select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Tarjetas de Sección Colores y Tallas (Sin contorno/borde) */
.matriz-section-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  box-shadow: none !important;
  height: 100%;
}

.matriz-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bg-emerald {
  background-color: #10b981 !important;
}

.matriz-selected-box {
  background: rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  min-height: 48px;
}

/* Tabla de Matriz de Cantidades con Alto Contraste */
#matrizGridContainer {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

#modalMatrizEntrada #matrizGridContainer table,
#modalMatrizEntrada table.table {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#modalMatrizEntrada #matrizGridContainer th,
#modalMatrizEntrada .table th {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border: 1px solid #e2e8f0 !important;
  text-align: center !important;
  padding: 10px 8px !important;
  font-size: 0.88rem !important;
}

#modalMatrizEntrada #matrizGridContainer td,
#modalMatrizEntrada .table td {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  vertical-align: middle !important;
  padding: 8px !important;
}

#modalMatrizEntrada #matrizGridContainer td.fw-bold {
  color: #0f172a !important;
  font-weight: 700 !important;
}

#modalMatrizEntrada .matriz-qty-input {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  height: 38px !important;
  transition: all 0.15s ease !important;
}

#modalMatrizEntrada .matriz-qty-input:focus {
  background-color: #f0f9ff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
  color: #1e3a8a !important;
}

/* Chips de selección rápida de Colores y Tallas */
.matriz-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.matriz-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.matriz-preset-chip:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

.matriz-preset-chip.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.5);
}

.matriz-preset-chip.active::after {
  content: '✓';
  font-size: 0.78rem;
  font-weight: bold;
  margin-left: 2px;
}

.matriz-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#modalMatrizEntrada .modal-header .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1.15em auto no-repeat !important;
  opacity: 0.85 !important;
  border-radius: 0 !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  filter: none !important;
}

#modalMatrizEntrada .modal-header .btn-close:hover {
  background-color: transparent !important;
  opacity: 1 !important;
  transform: scale(1.15) !important;
}

/* Botones de Modal Matriz sin degradados (colores sólidos y limpios) */
#modalMatrizEntrada .btn:not(.btn-close),
#modalMatrizEntrada button:not(.btn-close) {
  background-image: none !important;
}

#modalMatrizEntrada .btn-primary {
  background-color: #2563eb !important;
  background-image: none !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

#modalMatrizEntrada .btn-primary:hover,
#modalMatrizEntrada .btn-primary:focus {
  background-color: #1d4ed8 !important;
  background-image: none !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

#modalMatrizEntrada .btn-success {
  background-color: #10b981 !important;
  background-image: none !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}

#modalMatrizEntrada .btn-success:hover,
#modalMatrizEntrada .btn-success:focus {
  background-color: #059669 !important;
  background-image: none !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

.matriz-badge-pill {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.matriz-badge-pill .btn-close {
  filter: none !important;
  opacity: 0.65;
  width: 0.6em !important;
  height: 0.6em !important;
  padding: 0 !important;
}

.matriz-badge-pill .btn-close:hover {
  opacity: 1;
}

/* Modal Editar Envío - Inputs y Selects con fondo blanco y texto oscuro */
#modalEditarEnvio .form-control,
#modalEditarEnvio .form-select,
#modalEditarEnvio input,
#modalEditarEnvio select,
#modalEditarEnvio textarea,
#modalEditarEnvio #editEnvioAddress,
#modalEditarEnvio #editEnvioReference,
#modalEditarEnvio #editEnvioPhone,
#modalEditarEnvio #editEnvioTracking,
#modalEditarEnvio #editEnvioDepartment,
#modalEditarEnvio #editEnvioProvince,
#modalEditarEnvio #editEnvioDistrict,
#modalEditarEnvio #editEnvioCourier,
#modalEditarEnvio #editEnvioStatus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  -webkit-text-fill-color: #0f172a !important;
}

#modalEditarEnvio .form-control::placeholder,
#modalEditarEnvio input::placeholder,
#modalEditarEnvio textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

#modalEditarEnvio .form-control:focus,
#modalEditarEnvio .form-select:focus,
#modalEditarEnvio input:focus,
#modalEditarEnvio select:focus,
#modalEditarEnvio textarea:focus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  -webkit-text-fill-color: #0f172a !important;
}

#modalEditarEnvio select option,
#modalEditarEnvio .form-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

#modalEditarEnvio .form-control:-webkit-autofill,
#modalEditarEnvio .form-control:-webkit-autofill:hover,
#modalEditarEnvio .form-control:-webkit-autofill:focus,
#modalEditarEnvio input:-webkit-autofill,
#modalEditarEnvio input:-webkit-autofill:hover,
#modalEditarEnvio input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  background-color: #ffffff !important;
  caret-color: #0f172a !important;
}

/* Modal Editar Venta - Inputs superiores específicos (Cliente, Fecha, Tipo, Estado, Courier) con fondo blanco y texto oscuro */
#modalEditarVenta #editarCliente,
#modalEditarVenta #editarVentaFecha,
#modalEditarVenta #editarVentaTipo,
#modalEditarVenta #editarEstadoVenta,
#modalEditarVenta #editarVentaCourier {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  -webkit-text-fill-color: #0f172a !important;
  color-scheme: light !important;
}

#modalEditarVenta #editarCliente::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

#modalEditarVenta #editarCliente:focus,
#modalEditarVenta #editarVentaFecha:focus,
#modalEditarVenta #editarVentaTipo:focus,
#modalEditarVenta #editarEstadoVenta:focus,
#modalEditarVenta #editarVentaCourier:focus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  -webkit-text-fill-color: #0f172a !important;
}

#modalEditarVenta #editarVentaTipo option,
#modalEditarVenta #editarEstadoVenta option,
#modalEditarVenta #editarVentaCourier option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

#modalEditarVenta #editarCliente:-webkit-autofill,
#modalEditarVenta #editarCliente:-webkit-autofill:hover,
#modalEditarVenta #editarCliente:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  background-color: #ffffff !important;
  caret-color: #0f172a !important;
}

/* Inputs de la tabla de productos de Editar Venta (#editarVentaItemsBody) - Fondo oscuro y texto blanco */
#editarVentaItemsBody input,
#editarVentaItemsBody .form-control,
#modalEditarVenta #editarVentaItemsBody input,
#modalEditarVenta #editarVentaItemsBody .form-control {
  background-color: #1a2740 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0 !important;
  color-scheme: dark !important;
}

#editarVentaItemsBody input:focus,
#editarVentaItemsBody .form-control:focus,
#modalEditarVenta #editarVentaItemsBody input:focus,
#modalEditarVenta #editarVentaItemsBody .form-control:focus {
  background-color: #1e2e4d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Modal Crear Envío - Inputs y Selects con fondo blanco y texto oscuro */
#modalCrearEnvio .form-control,
#modalCrearEnvio .form-select,
#modalCrearEnvio input,
#modalCrearEnvio select,
#modalCrearEnvio textarea,
#modalCrearEnvio #newEnvioCliente,
#modalCrearEnvio #newEnvioPhone,
#modalCrearEnvio #newEnvioDepartment,
#modalCrearEnvio #newEnvioProvince,
#modalCrearEnvio #newEnvioDistrict,
#modalCrearEnvio #newEnvioAddress,
#modalCrearEnvio #newEnvioReference,
#modalCrearEnvio #newEnvioCourier,
#modalCrearEnvio #newEnvioTotal {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  -webkit-text-fill-color: #0f172a !important;
  color-scheme: light !important;
}

#modalCrearEnvio .form-control::placeholder,
#modalCrearEnvio input::placeholder,
#modalCrearEnvio textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

#modalCrearEnvio .form-control:focus,
#modalCrearEnvio .form-select:focus,
#modalCrearEnvio input:focus,
#modalCrearEnvio select:focus,
#modalCrearEnvio textarea:focus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  -webkit-text-fill-color: #0f172a !important;
}

#modalCrearEnvio select option,
#modalCrearEnvio .form-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

#modalCrearEnvio .form-control:-webkit-autofill,
#modalCrearEnvio .form-control:-webkit-autofill:hover,
#modalCrearEnvio .form-control:-webkit-autofill:focus,
#modalCrearEnvio input:-webkit-autofill,
#modalCrearEnvio input:-webkit-autofill:hover,
#modalCrearEnvio input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  background-color: #ffffff !important;
  caret-color: #0f172a !important;
}

/* Modal Cliente Form (#modalClienteForm) - Inputs con fondo blanco y texto oscuro */
#modalClienteForm .form-control,
#modalClienteForm .form-select,
#modalClienteForm input,
#modalClienteForm select,
#modalClienteForm textarea,
#modalClienteForm #clienteFormName,
#modalClienteForm #clienteFormDni,
#modalClienteForm #clienteFormPhone,
#modalClienteForm #clienteFormEmail,
#modalClienteForm #clienteFormAddress,
#modalClienteForm #clienteFormReference {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  -webkit-text-fill-color: #0f172a !important;
  color-scheme: light !important;
}

#modalClienteForm .form-control::placeholder,
#modalClienteForm input::placeholder,
#modalClienteForm textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

#modalClienteForm .form-control:focus,
#modalClienteForm .form-select:focus,
#modalClienteForm input:focus,
#modalClienteForm select:focus,
#modalClienteForm textarea:focus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  -webkit-text-fill-color: #0f172a !important;
}


#modalDetalleSale .modal-content {
  background-color: #111827 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#modalDetalleSale .modal-header,
#modalDetalleSale .modal-footer {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#modalDetalleSale .modal-title,
#modalDetalleSale p,
#modalDetalleSale span,
#modalDetalleSale div,
#modalDetalleSale th,
#modalDetalleSale td,
#modalDetalleSale strong,
#modalDetalleSale .text-dark,
#modalDetalleSale .text-muted {
  color: #ffffff !important;
}

#modalDetalleSale .table {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

#modalDetalleSale .table th,
#modalDetalleSale .table td {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

#modalDetalleSale .table thead,
#modalDetalleSale .table-light {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

#modalDetalleSale .table-light th {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   POLISH PREMIUM & PROFESSIONAL SALES SYSTEM STYLING
   ========================================================================== */

/* Dashboard & Stats Cards Polish */
.dashboard-stats .stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
  border-radius: 18px !important;
  padding: 1.25rem !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dashboard-stats .stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.09) !important;
  border-color: rgba(203, 213, 225, 1) !important;
}

.dashboard-panel,
.premium-side-panel {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
  border-radius: 20px !important;
  padding: 1.5rem !important;
}

.premium-alert-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 0.9rem 1rem !important;
  transition: all 0.2s ease !important;
}

.premium-alert-card:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateX(2px);
}

/* Cards & Containers */
.card,
.table-container,
.dashboard-card,
.metric-card {
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
  border-radius: 16px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover,
.table-container:hover {
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.07) !important;
  border-color: rgba(203, 213, 225, 1) !important;
}

/* Tables refinement */
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table th {
  background-color: #f8fafc !important;
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 0.775rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding: 0.9rem 1rem !important;
}

.table td {
  padding: 0.9rem 1rem !important;
  vertical-align: middle !important;
  color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 0.875rem !important;
}

.table tbody tr {
  transition: background-color 0.15s ease !important;
}

.table tbody tr:hover {
  background-color: rgba(248, 250, 252, 0.8) !important;
}

/* Buttons refinement */
.btn {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.btn:active {
  transform: scale(0.97) !important;
}

.btn-dark {
  background-color: #0f172a !important;
  border-color: #0f172a !important;
}

.btn-dark:hover {
  background-color: #1e293b !important;
  border-color: #1e293b !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Modals premium backdrop & container polish */
.modal-content {
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 1.25rem 1.5rem !important;
  background: linear-gradient(135deg, #0b63ff 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

.modal-header .modal-title,
.modal-header h5,
.modal-header h6 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.modal-header .btn-close {
  filter: invert(1) brightness(1.1) !important;
  opacity: 0.9 !important;
}

.modal-footer {
  border-top: 1px solid #f1f5f9 !important;
  padding: 1rem 1.5rem !important;
  background-color: transparent !important;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

/* Sidebar navigation enhancement */
.sidebar .menu-btn {
  border-radius: 12px !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.sidebar .menu-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  transform: translateX(3px);
}

/* Variable Tags Manager - Delete 'X' in Red */
.variable-tag-badge {
  background-color: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.variable-tag-remove-btn {
  color: #dc2626 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 2px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

.variable-tag-remove-btn svg {
  stroke: #dc2626 !important;
  stroke-width: 2.6 !important;
  transition: stroke 0.15s ease;
}

.variable-tag-remove-btn:hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

.variable-tag-remove-btn:hover svg {
  stroke: #b91c1c !important;
}