/* ============================================================
   GYA COMERCIAL — Design System v4.0
   Tipografía: DM Sans (títulos) + Geist (cuerpo)
   Estrategia: CSS vars light/dark, todo via data-bs-theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&family=Geist:wght@300;400;500;600&display=swap');

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  /* Brand */
  --p:          #5b5ef4;
  --p-dark:     #3d3fb8;
  --p-light:    #7879f7;
  --p-ghost:    rgba(91,94,244,.1);

  /* Semantic */
  --ok:         #16a34a;
  --ok-bg:      rgba(22,163,74,.1);
  --warn:       #d97706;
  --warn-bg:    rgba(217,119,6,.1);
  --err:        #dc2626;
  --err-bg:     rgba(220,38,38,.1);
  --info:       #0284c7;
  --info-bg:    rgba(2,132,199,.1);

  /* Light surfaces */
  --bg:         #f4f5fa;
  --s0:         #ffffff;
  --s1:         #f8f9fd;
  --s2:         #eef0f8;
  --bd:         #e2e5f0;
  --bd-s:       #ececf5;

  /* Light text */
  --t1:         #0d1225;
  --t2:         #2c3453;
  --t3:         #5c6484;
  --t4:         #9099bb;

  /* Nav (always dark) */
  --nav-bg:     #09090f;
  --nav-bd:     rgba(255,255,255,.06);
  --nav-t:      #e4e8f8;
  --nav-dim:    rgba(228,232,248,.45);
  --nav-h:      58px;

  /* Shadows */
  --sh1: 0 1px 3px rgba(13,18,37,.06);
  --sh2: 0 4px 12px rgba(13,18,37,.08);
  --sh3: 0 8px 28px rgba(13,18,37,.11);
  --sh4: 0 16px 48px rgba(13,18,37,.14);
  --shp: 0 4px 18px rgba(91,94,244,.28);

  /* Geometry */
  --r1: 6px;
  --r2: 10px;
  --r3: 14px;
  --r4: 20px;
  --rf: 9999px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --tf:   140ms;
  --ts:   260ms;
}

/* Dark overrides */
[data-bs-theme="dark"] {
  --bg:   #08090f;
  --s0:   #0e0f1a;
  --s1:   #13141f;
  --s2:   #191a28;
  --bd:   #252638;
  --bd-s: #1d1e2e;

  --t1:   #e8ecf8;
  --t2:   #c2c8e8;
  --t3:   #8088aa;
  --t4:   #4a5070;

  --ok:   #22c55e;
  --warn: #f59e0b;
  --err:  #f87171;
  --info: #38bdf8;

  --sh1: 0 1px 3px rgba(0,0,0,.5);
  --sh2: 0 4px 12px rgba(0,0,0,.55);
  --sh3: 0 8px 28px rgba(0,0,0,.6);
  --sh4: 0 16px 48px rgba(0,0,0,.7);
  --shp: 0 4px 20px rgba(91,94,244,.4);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Geist', 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg) !important;
  color: var(--t1) !important;
  min-height: 100vh;
  transition: background .25s var(--ease), color .25s var(--ease);
  overflow-x: hidden;
}

/* Page offset for fixed navbar */
.page-wrapper {
  padding-top: calc(var(--nav-h) + 20px);
  padding-bottom: 60px;
  min-height: 100vh;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6,
.page-title,.card-header,.modal-title,
.offcanvas-title,.section-title {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
.text-muted { color: var(--t3) !important; }

/* ============================================================
   NAVBAR — always dark, independent of theme
   ============================================================ */
.gya-nav {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-bd) !important;
  height: var(--nav-h);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
}

.gya-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.gya-nav .brand img {
  width: 34px; height: 34px;
  object-fit: contain;
}
.gya-nav .brand-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  color: var(--nav-t);
  line-height: 1;
  letter-spacing: -.02em;
}
.gya-nav .brand-sub {
  font-size: .65rem;
  color: var(--nav-dim);
  font-weight: 400;
  margin-top: 1px;
}

.gya-nav .spacer { flex: 1; }

.gya-nav .nav-dev {
  display: none;
}
@media (min-width: 992px) {
  .gya-nav .nav-dev { display: block; }
  .gya-nav .nav-dev img { height: 16px; opacity: .45; }
}

/* Icon buttons in nav */
.nav-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r2);
  color: var(--nav-dim);
  font-size: .95rem;
  cursor: pointer;
  transition: all var(--tf) var(--ease);
  position: relative;
  flex-shrink: 0;
}
.nav-btn:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.1);
  color: var(--nav-t);
}

/* Theme toggle icons */
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-bs-theme="dark"] .icon-sun  { display: block; }
[data-bs-theme="dark"] .icon-moon { display: none; }

/* Notification dot */
.nav-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 16px; height: 16px;
  border-radius: var(--rf);
  background: var(--err);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--nav-bg);
  line-height: 1;
}
.nav-dot.show { display: flex; }

/* Hamburger */
.nav-hamburger {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r2);
  color: var(--nav-t);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,.07); }
.nav-hamburger .line {
  display: block;
  width: 16px; height: 1.5px;
  background: currentColor;
  transition: all var(--tf);
}
.nav-hamburger span { display: flex; flex-direction: column; gap: 4px; }

/* Notification panel */
.notif-panel {
  width: 370px;
  max-width: calc(100vw - 16px);
  background: #111320 !important;
  color: #e4e8f8 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--r3) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
  padding: 0 !important;
  overflow: hidden;
}
.notif-head {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  color: var(--nav-t);
}
.notif-item {
  padding: 11px 14px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background var(--tf);
}
.notif-item.unread {
  border-left-color: var(--p-light);
  background: rgba(91,94,244,.08);
}
.notif-item:hover { background: rgba(255,255,255,.04); }
.notif-item .nt  { color: #f1f5f9; font-size: .82rem; font-weight: 600; }
.notif-item .nb  { color: #94a3b8; font-size: .77rem; margin-top: 2px; }
.notif-item .ntm { color: #64748b; font-size: .69rem; }
.notif-foot {
  padding: 9px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
.notif-foot a { color: var(--p-light); font-size: .78rem; text-decoration: none; }

/* ============================================================
   OFFCANVAS MENU — always dark
   ============================================================ */
.gya-canvas {
  background: linear-gradient(160deg, #0a0b12 0%, #0c0d18 100%) !important;
  border-right: 1px solid rgba(255,255,255,.05) !important;
  width: 280px !important;
  color: var(--nav-t) !important;
}
.gya-canvas .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 14px 16px;
}
.gya-canvas .offcanvas-title {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--nav-t) !important;
  font-size: .92rem;
}

/* Search in offcanvas */
.cv-search { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.cv-search .input-group-text {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--nav-dim) !important;
}
.cv-search input {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--nav-t) !important;
  border-left: none !important;
}
.cv-search input::placeholder { color: rgba(255,255,255,.22) !important; }
.cv-search input:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(91,94,244,.5) !important;
  box-shadow: 0 0 0 .18rem rgba(91,94,244,.18) !important;
}

/* Nav items scroll area */
.cv-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.cv-body::-webkit-scrollbar { width: 3px; }
.cv-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

/* Section label */
.cv-label {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  padding: 14px 16px 3px;
  display: block;
  font-family: 'DM Sans', sans-serif;
}

/* Nav link */
.cv-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(228,232,248,.7) !important;
  font-size: .83rem;
  font-weight: 400;
  padding: 7px 16px !important;
  margin: 1px 5px;
  border-radius: var(--r2);
  text-decoration: none !important;
  transition: all var(--tf) var(--ease);
}
.cv-link:hover { color: #fff !important; background: rgba(255,255,255,.06); }
.cv-link i { font-size: .9rem; color: var(--p-light) !important; opacity: .75; width: 16px; text-align: center; flex-shrink: 0; }
.cv-link .cv-arrow { margin-left: auto; font-size: .65rem; opacity: .35; transition: transform var(--tf); flex-shrink: 0; }
.cv-link[aria-expanded="true"] .cv-arrow { transform: rotate(90deg); opacity: .7; }

/* Sub links */
.cv-sub { padding-left: 8px; }
.cv-sub .cv-link { font-size: .8rem !important; padding: 5px 14px !important; }
.cv-sub .cv-link i { font-size: .35rem !important; color: rgba(255,255,255,.25) !important; }

.cv-hr { border: none; border-top: 1px solid rgba(255,255,255,.05) !important; margin: 6px 12px; }

/* Role badges */
.rb-admin { background: rgba(91,94,244,.15); color: #a5b4fc; border: 1px solid rgba(91,94,244,.3); font-size: .6rem; padding: 2px 7px; border-radius: var(--rf); font-weight: 700; }
.rb-emp   { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.28); font-size: .6rem; padding: 2px 7px; border-radius: var(--rf); font-weight: 700; }

/* Offcanvas footer */
.cv-foot {
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cv-foot img { height: 15px; opacity: .3; }
.cv-foot small { color: rgba(255,255,255,.2); font-size: .65rem; }

/* Danger link */
.cv-danger { color: rgba(248,113,113,.8) !important; }
.cv-danger i { color: rgba(248,113,113,.8) !important; }
.cv-danger:hover { background: rgba(220,38,38,.08) !important; color: #f87171 !important; }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  background: linear-gradient(135deg, var(--p) 0%, var(--p-dark) 100%) !important;
  border-radius: var(--r3) !important;
  padding: 18px 22px !important;
  margin-bottom: 20px !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shp);
}
.page-header::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.page-header::after {
  content: '';
  position: absolute; bottom: -50px; right: 80px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.page-header *,
.page-header { color: #fff !important; }
.page-title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  color: #fff !important;
  margin: 0 !important;
  display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 1;
}
.page-subtitle {
  font-size: .8rem !important;
  color: rgba(255,255,255,.65) !important;
  margin: 2px 0 0 !important;
  font-weight: 400;
  position: relative; z-index: 1;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--s0) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1);
  transition: box-shadow var(--ts) var(--ease);
  color: var(--t1) !important;
}
.card-header {
  background: var(--s1) !important;
  border-bottom: 1px solid var(--bd) !important;
  padding: 13px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  color: var(--t1) !important;
  border-radius: calc(var(--r3) - 1px) calc(var(--r3) - 1px) 0 0 !important;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card-body { padding: 18px !important; color: var(--t1) !important; }
.card-footer {
  background: var(--s1) !important;
  border-top: 1px solid var(--bd) !important;
  padding: 10px 18px !important;
  border-radius: 0 0 calc(var(--r3) - 1px) calc(var(--r3) - 1px) !important;
}
.list-group-item {
  background: var(--s0) !important;
  border-color: var(--bd) !important;
  color: var(--t2) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  color: var(--t1) !important;
  background: transparent !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--t1);
  --bs-table-border-color: var(--bd-s);
  --bs-table-striped-bg: var(--s1);
  --bs-table-hover-bg: var(--s2);
}

.table thead tr,
.table thead {
  background: var(--s2) !important;
  border-bottom: 2px solid var(--bd) !important;
}
.table thead th,
.gya-thead th {
  background: var(--s2) !important;
  color: var(--t3) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 10px 13px !important;
  border: none !important;
  white-space: nowrap;
}
.table tbody td {
  color: var(--t2) !important;
  background: var(--s0) !important;
  border-bottom: 1px solid var(--bd-s) !important;
  padding: 10px 13px !important;
  font-size: .84rem;
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover td { background: var(--s1) !important; }
.table-striped tbody tr:nth-of-type(even) td { background: var(--s1) !important; }

/* Old class overrides from original files */
.table.bg-primary thead, .table .bg-primary,
.table .bg-dark, .table .thead-dark,
.table .gya-thead { background: var(--s2) !important; }

/* ============================================================
   FORMS
   ============================================================ */
.form-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .77rem;
  font-weight: 700;
  color: var(--t2) !important;
  margin-bottom: 5px;
  display: block;
}
.form-control,
.form-select,
textarea {
  background: var(--s0) !important;
  border: 1.5px solid var(--bd) !important;
  color: var(--t1) !important;
  border-radius: var(--r2) !important;
  font-size: .855rem !important;
  padding: 8px 12px !important;
  transition: border-color var(--tf), box-shadow var(--tf), background var(--tf) !important;
  font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
}
.form-control:focus, .form-select:focus,
textarea:focus {
  background: var(--s0) !important;
  border-color: var(--p-light) !important;
  box-shadow: 0 0 0 .2rem rgba(91,94,244,.18) !important;
  color: var(--t1) !important;
  outline: none !important;
}
.form-control::placeholder, textarea::placeholder {
  color: var(--t4) !important;
}
.form-control:disabled, .form-select:disabled {
  background: var(--s2) !important;
  color: var(--t4) !important;
  opacity: .7;
  cursor: not-allowed;
}
.input-group-text {
  background: var(--s1) !important;
  border: 1.5px solid var(--bd) !important;
  color: var(--t3) !important;
  font-size: .855rem;
}

/* SELECT arrow */
.form-select {
  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='%238088aa' 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 .65rem center !important;
  background-size: 13px 10px !important;
  padding-right: 2.2rem !important;
}
select option { background: var(--s0) !important; color: var(--t1) !important; }

/* Checkbox & Radio */
.form-check-input {
  background-color: var(--s0) !important;
  border-color: var(--bd) !important;
}
.form-check-input:checked {
  background-color: var(--p) !important;
  border-color: var(--p) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(91,94,244,.18) !important; }
.form-check-label { color: var(--t2) !important; }
.form-switch .form-check-input:not(:checked) { background-color: var(--s2) !important; border-color: var(--bd) !important; }

/* Floating label */
.form-floating label { color: var(--t3) !important; }

/* ============================================================
   BUTTONS — complete override
   ============================================================ */
.btn {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--r2) !important;
  font-size: .845rem !important;
  padding: 7px 15px !important;
  transition: all var(--tf) var(--ease) !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none !important;
  cursor: pointer;
  letter-spacing: .01em;
}
.btn-sm { padding: 5px 10px !important; font-size: .77rem !important; }
.btn-lg { padding: 11px 22px !important; font-size: .92rem !important; }
.btn-icon { width: 32px !important; height: 32px !important; padding: 0 !important; justify-content: center !important; }
.btn-icon.btn-sm { width: 27px !important; height: 27px !important; }

.btn:disabled, .btn.disabled { opacity: .5 !important; transform: none !important; cursor: not-allowed !important; }

.btn-primary   { background: linear-gradient(135deg,var(--p),var(--p-dark)) !important; color:#fff!important; box-shadow:0 2px 8px rgba(91,94,244,.28)!important; }
.btn-primary:hover   { background: linear-gradient(135deg,var(--p-light),var(--p))!important; transform:translateY(-1px); box-shadow:0 4px 16px rgba(91,94,244,.38)!important; color:#fff!important; }

.btn-success   { background: linear-gradient(135deg,#16a34a,#15803d)!important; color:#fff!important; box-shadow:0 2px 8px rgba(22,163,74,.25)!important; }
.btn-success:hover   { background: linear-gradient(135deg,#22c55e,#16a34a)!important; transform:translateY(-1px); color:#fff!important; }

.btn-danger    { background: linear-gradient(135deg,#dc2626,#b91c1c)!important; color:#fff!important; box-shadow:0 2px 8px rgba(220,38,38,.25)!important; }
.btn-danger:hover    { background: linear-gradient(135deg,#ef4444,#dc2626)!important; transform:translateY(-1px); color:#fff!important; }

.btn-warning   { background: linear-gradient(135deg,#d97706,#b45309)!important; color:#fff!important; box-shadow:0 2px 8px rgba(217,119,6,.25)!important; }
.btn-warning:hover   { background: linear-gradient(135deg,#f59e0b,#d97706)!important; transform:translateY(-1px); color:#fff!important; }

.btn-info      { background: linear-gradient(135deg,#0284c7,#0369a1)!important; color:#fff!important; }
.btn-info:hover      { background: linear-gradient(135deg,#0ea5e9,#0284c7)!important; transform:translateY(-1px); color:#fff!important; }

.btn-secondary { background: var(--s1)!important; border: 1.5px solid var(--bd)!important; color:var(--t2)!important; box-shadow:none!important; }
.btn-secondary:hover { background: var(--s2)!important; border-color:var(--p-light)!important; color:var(--p)!important; transform:translateY(-1px); }

.btn-dark      { background: var(--s2)!important; color:var(--t1)!important; border:1px solid var(--bd)!important; }
.btn-dark:hover{ background: var(--bd)!important; }

.btn-outline-primary  { background:transparent!important; border:1.5px solid var(--p)!important; color:var(--p)!important; }
.btn-outline-primary:hover { background:var(--p-ghost)!important; color:var(--p-light)!important; }
.btn-outline-secondary{ background:transparent!important; border:1.5px solid var(--bd)!important; color:var(--t2)!important; }
.btn-outline-secondary:hover{ background:var(--s1)!important; color:var(--t1)!important; }
.btn-outline-danger   { background:transparent!important; border:1.5px solid var(--err)!important; color:var(--err)!important; }
.btn-outline-danger:hover{ background:var(--err-bg)!important; }
.btn-outline-success  { background:transparent!important; border:1.5px solid var(--ok)!important; color:var(--ok)!important; }
.btn-outline-success:hover{ background:var(--ok-bg)!important; }
.btn-outline-warning  { background:transparent!important; border:1.5px solid var(--warn)!important; color:var(--warn)!important; }
.btn-outline-info     { background:transparent!important; border:1.5px solid var(--info)!important; color:var(--info)!important; }

/* Close button in dark headers */
.modal-header .btn-close,
.btn-close-white { filter: invert(1) brightness(2) !important; opacity:.8!important; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  background: var(--s0) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r4) !important;
  box-shadow: var(--sh4) !important;
  color: var(--t1) !important;
}
.modal-header {
  background: linear-gradient(135deg,var(--p),var(--p-dark)) !important;
  border-radius: calc(var(--r4) - 1px) calc(var(--r4) - 1px) 0 0 !important;
  padding: 14px 20px !important;
  border-bottom: none !important;
}
.modal-title {
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: .96rem !important;
  display: flex; align-items: center; gap: 8px;
}
.modal-body { padding: 20px !important; color: var(--t1) !important; }
.modal-footer {
  background: var(--s1) !important;
  border-top: 1px solid var(--bd) !important;
  padding: 11px 20px !important;
  border-radius: 0 0 calc(var(--r4) - 1px) calc(var(--r4) - 1px) !important;
  gap: 8px;
}

/* Danger/Success/Warning modal headers */
.modal-header.bg-danger,
.modal-header[style*="ef4444"], .modal-header[style*="dc2626"] {
  background: linear-gradient(135deg,#dc2626,#b91c1c) !important;
}
.modal-header.bg-success,
.modal-header[style*="16a34a"], .modal-header[style*="10b981"] {
  background: linear-gradient(135deg,#16a34a,#15803d) !important;
}
.modal-header.bg-warning,
.modal-header[style*="f59e0b"], .modal-header[style*="d97706"] {
  background: linear-gradient(135deg,#d97706,#b45309) !important;
}
.modal-header.bg-info,
.modal-header[style*="0284c7"] {
  background: linear-gradient(135deg,#0284c7,#0369a1) !important;
}
.modal-header.bg-secondary,
.modal-header[style*="6b7280"] {
  background: linear-gradient(135deg,#374151,#1f2937) !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: .68rem !important;
  padding: 3px 8px !important;
  border-radius: var(--rf) !important;
  letter-spacing: .02em;
}
.badge.bg-primary, .badge.bg-info {
  background: rgba(91,94,244,.15) !important; color: var(--p-light) !important;
  border: 1px solid rgba(91,94,244,.3) !important;
}
.badge.bg-success {
  background: var(--ok-bg) !important; color: var(--ok) !important;
  border: 1px solid rgba(22,163,74,.3) !important;
}
.badge.bg-danger {
  background: var(--err-bg) !important; color: var(--err) !important;
  border: 1px solid rgba(220,38,38,.3) !important;
}
.badge.bg-warning {
  background: var(--warn-bg) !important; color: var(--warn) !important;
  border: 1px solid rgba(217,119,6,.3) !important;
}
.badge.bg-secondary, .badge.bg-dark {
  background: var(--s2) !important; color: var(--t3) !important;
  border: 1px solid var(--bd) !important;
}
.badge.bg-light { background: var(--s2) !important; color: var(--t2) !important; border: 1px solid var(--bd) !important; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { border-radius: var(--r2) !important; border: 1px solid transparent !important; padding: 11px 15px !important; font-size: .84rem; }
.alert-success { background: var(--ok-bg)!important;  border-color: rgba(22,163,74,.25)!important;  color: var(--ok)!important; }
.alert-danger  { background: var(--err-bg)!important; border-color: rgba(220,38,38,.25)!important;  color: var(--err)!important; }
.alert-warning { background: var(--warn-bg)!important;border-color: rgba(217,119,6,.25)!important;  color: var(--warn)!important; }
.alert-info    { background: var(--info-bg)!important;border-color: rgba(2,132,199,.25)!important;  color: var(--info)!important; }
.alert-primary { background: var(--p-ghost)!important;border-color: rgba(91,94,244,.25)!important;  color: var(--p-light)!important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { gap: 2px; }
.page-link {
  background: var(--s0) !important; border-color: var(--bd) !important; color: var(--t2) !important;
  font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important;
  font-size: .79rem !important; padding: 6px 11px !important;
  border-radius: var(--r2) !important; transition: all var(--tf) !important;
}
.page-link:hover { background: var(--s1) !important; border-color: var(--p-light) !important; color: var(--p) !important; }
.page-item.active .page-link {
  background: var(--p) !important; border-color: var(--p) !important;
  color: #fff !important; box-shadow: 0 2px 8px rgba(91,94,244,.3) !important;
}
.page-item.disabled .page-link { background: var(--s2) !important; color: var(--t4) !important; border-color: var(--bd) !important; }

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs { border-bottom: 2px solid var(--bd) !important; gap: 2px; }
.nav-tabs .nav-link {
  font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important;
  font-size: .82rem !important; color: var(--t3) !important;
  border: none !important; border-radius: var(--r2) var(--r2) 0 0 !important;
  padding: 8px 15px !important; background: transparent !important;
  transition: all var(--tf) !important;
}
.nav-tabs .nav-link:hover { color: var(--p) !important; background: var(--p-ghost) !important; }
.nav-tabs .nav-link.active {
  color: var(--p) !important; background: var(--s0) !important;
  border-bottom: 2px solid var(--p) !important; margin-bottom: -2px;
}
.nav-pills .nav-link {
  font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important;
  color: var(--t3) !important; border-radius: var(--r2) !important;
  padding: 7px 14px !important; background: transparent !important;
  font-size: .82rem !important; transition: all var(--tf) !important;
}
.nav-pills .nav-link:hover { background: var(--s1) !important; color: var(--t1) !important; }
.nav-pills .nav-link.active { background: var(--p) !important; color: #fff !important; }

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
  background: var(--s0) !important; border: 1px solid var(--bd) !important;
  border-radius: var(--r3) !important; box-shadow: var(--sh3) !important;
  padding: 5px !important;
}
.dropdown-item {
  color: var(--t2) !important; font-size: .84rem !important;
  padding: 7px 11px !important; border-radius: var(--r2) !important;
  display: flex; align-items: center; gap: 7px;
  transition: all var(--tf) !important;
}
.dropdown-item:hover { background: var(--s1) !important; color: var(--p) !important; }
.dropdown-divider { border-color: var(--bd) !important; margin: 4px 5px !important; }
.dropdown-header { color: var(--t3) !important; font-size: .69rem !important; font-weight: 800 !important; }

/* ============================================================
   ACCORDION
   ============================================================ */
.accordion-item { background: var(--s0) !important; border: 1px solid var(--bd) !important; border-radius: var(--r2) !important; margin-bottom: 5px; overflow: hidden; }
.accordion-button { background: var(--s1) !important; color: var(--t1) !important; font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important; font-size: .855rem !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--p-ghost) !important; color: var(--p) !important; }
[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); }
.accordion-body { background: var(--s0) !important; color: var(--t2) !important; }

/* ============================================================
   PROGRESS
   ============================================================ */
.progress { background: var(--s2) !important; border-radius: var(--rf) !important; }
.progress-bar { background: linear-gradient(90deg,var(--p),var(--p-light)) !important; }

/* ============================================================
   SPINNERS & TOOLTIPS
   ============================================================ */
.spinner-border { color: var(--p) !important; }
.spinner-border.text-primary { color: var(--p) !important; }
.tooltip .tooltip-inner { background: var(--s2) !important; color: var(--t1) !important; border: 1px solid var(--bd) !important; font-size: .76rem !important; border-radius: var(--r2) !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--t4); }


/* Notification panel is ALWAYS dark regardless of theme */
[data-bs-theme="light"] .notif-panel,
[data-bs-theme="light"] .notif-panel *:not(.btn):not(button) {
  background: transparent;
  color: inherit;
}
[data-bs-theme="light"] .notif-panel { background: #111320 !important; }
[data-bs-theme="light"] .notif-head { color: #e4e8f8 !important; border-bottom-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="light"] .notif-item { color: #e4e8f8 !important; }
[data-bs-theme="light"] .notif-item .nt { color: #f1f5f9 !important; }
[data-bs-theme="light"] .notif-item .nb { color: #94a3b8 !important; }
[data-bs-theme="light"] .notif-item .ntm { color: #64748b !important; }
[data-bs-theme="light"] .notif-foot { border-top-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="light"] .notif-foot a { color: #818cf8 !important; }
[data-bs-theme="light"] .notif-item.unread { background: rgba(91,94,244,.1) !important; }

/* ============================================================
   BACKWARDS COMPATIBILITY — old var names still referenced
   ============================================================ */
:root,[data-bs-theme="light"] {
  --brand: var(--p); --brand-2: var(--p-dark); --brand-3: var(--p-light);
  --ok: #16a34a; --warn: #d97706; --danger: #dc2626;
  --neutral-900: var(--t1); --neutral-700: var(--t2);
  --neutral-500: var(--t3); --neutral-300: var(--bd);
  --neutral-200: var(--bd-s); --neutral-100: var(--s1);
  --surface: var(--s0); --surface-2: var(--s1); --surface-3: var(--s2);
  --radius: var(--r3); --shadow-1: var(--sh2); --shadow-2: var(--sh3);
  --focus: 0 0 0 .2rem rgba(91,94,244,.18);
  /* DashboardCobranza & dashboard custom vars */
  --card: var(--s0); --card-2: var(--s1); --border: var(--bd);
  --border-s: var(--bd-s); --txt: var(--t1); --txt2: var(--t3); --txt3: var(--t4);
  --shadow: var(--sh2); --bg: var(--bg);
  --green: #16a34a; --green-bg: rgba(22,163,74,.1);
  --blue: #3b82f6;  --blue-bg:  rgba(59,130,246,.1);
  --red: #dc2626;   --red-bg:   rgba(220,38,38,.1);
  --yellow: #d97706;--yellow-bg:rgba(217,119,6,.1);
  --purple: #7c3aed;--purple-bg:rgba(124,58,237,.1);
  --orange: #ea580c;--orange-bg:rgba(234,88,12,.1);
  --brand-lg: linear-gradient(90deg,var(--p),var(--p-light));
}
[data-bs-theme="dark"] {
  --brand: var(--p-light); --brand-2: var(--p); --brand-3: #a5b4fc;
  --ok: #22c55e; --warn: #f59e0b; --danger: #f87171;
  --neutral-900: var(--t1); --neutral-700: var(--t2);
  --neutral-500: var(--t3); --neutral-300: var(--bd);
  --neutral-200: var(--bd-s); --neutral-100: var(--s1);
  --surface: var(--s0); --surface-2: var(--s1); --surface-3: var(--s2);
  --radius: var(--r3); --shadow-1: var(--sh2); --shadow-2: var(--sh3);
  --focus: 0 0 0 .2rem rgba(91,94,244,.25);
  --card: var(--s0); --card-2: var(--s1); --border: var(--bd);
  --border-s: var(--bd-s); --txt: var(--t1); --txt2: var(--t3); --txt3: var(--t4);
  --shadow: var(--sh2); --bg: var(--bg);
  --green: #22c55e; --green-bg: rgba(34,197,94,.1);
  --blue: #60a5fa;  --blue-bg:  rgba(96,165,250,.1);
  --red: #f87171;   --red-bg:   rgba(248,113,113,.1);
  --yellow: #fbbf24;--yellow-bg:rgba(251,191,36,.1);
  --purple: #a78bfa;--purple-bg:rgba(167,139,250,.1);
  --orange: #fb923c;--orange-bg:rgba(251,146,60,.1);
  --brand-lg: linear-gradient(90deg,var(--p),var(--p-light));
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-in  { animation: gFade .35s var(--ease) both; }
.slide-up { animation: gSlide .35s var(--ease) both; }
@keyframes gFade  { from{opacity:0} to{opacity:1} }
@keyframes gSlide { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .gya-nav, .gya-canvas, .btn { display: none !important; }
  .page-wrapper { padding-top: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ============================================================
   TARGETED DARK MODE OVERRIDES
   These fix hardcoded light colors in page-specific inline CSS
   ============================================================ */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .modal-body {
  color: var(--t1) !important;
}

/* Fix hardcoded light backgrounds inside cards/modals in dark mode */
[data-bs-theme="dark"] [style*="background-color: #f8"],
[data-bs-theme="dark"] [style*="background-color:#f8"],
[data-bs-theme="dark"] [style*="background: #f8"],
[data-bs-theme="dark"] [style*="background:#f8"],
[data-bs-theme="dark"] [style*="background-color: #fa"],
[data-bs-theme="dark"] [style*="background: #fa"],
[data-bs-theme="dark"] [style*="background-color: white"],
[data-bs-theme="dark"] [style*="background: white"] {
  background-color: var(--s1) !important;
  color: var(--t1) !important;
}

/* Fix hardcoded dark text in dark mode */
[data-bs-theme="dark"] [style*="color: #333"],
[data-bs-theme="dark"] [style*="color:#333"],
[data-bs-theme="dark"] [style*="color: #000"],
[data-bs-theme="dark"] [style*="color:#000"],
[data-bs-theme="dark"] [style*="color: black"] {
  color: var(--t1) !important;
}

/* Ensure text/bg in dark page content areas */
[data-bs-theme="dark"] .page-wrapper {
  background: var(--bg);
  color: var(--t1);
}

/* Fix Bootstrap table in dark mode - ensure all rows use theme vars */
[data-bs-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--s0) !important;
  color: var(--t1) !important;
  border-color: var(--bd-s) !important;
}
[data-bs-theme="dark"] .table > :not(caption) > *:hover > * {
  background-color: var(--s1) !important;
}
[data-bs-theme="dark"] .table thead > * > * {
  background-color: var(--s2) !important;
  color: var(--t3) !important;
}


/* ============================================================
   GYA REPORT PAGES — unified visual line
   ============================================================ */
.gya-report-page .page-wrapper{
  padding-top: calc(var(--nav-h) + 14px) !important;
  padding-bottom: 56px !important;
  background: var(--bg) !important;
}
.gya-report-page .container-fluid{
  max-width: 1600px !important;
  margin: 0 auto !important;
}
.gya-report-page .page-header{
  margin: 0 0 20px !important;
  padding: 20px 22px !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--shp) !important;
}
.gya-report-page .page-title{
  font-size: 1.28rem !important;
}
.gya-report-page .page-subtitle{
  display: block;
  margin-top: 4px !important;
  color: rgba(255,255,255,.72) !important;
}
.gya-report-page .btn-export{
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  min-height: 44px !important;
  font-weight: 800 !important;
  box-shadow: var(--sh2) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.gya-report-page .btn-export:hover,
.gya-report-page .btn-search:hover{
  transform: translateY(-1px);
  box-shadow: var(--sh3) !important;
  filter: brightness(1.02);
}
.gya-report-page .btn-excel{
  background: linear-gradient(135deg, #15c77b, #10b981) !important;
  color: #fff !important;
}
.gya-report-page .btn-pdf{
  background: linear-gradient(135deg, #ff6b57, #ef4444) !important;
  color: #fff !important;
}
.gya-report-page .btn-search{
  background: linear-gradient(135deg, var(--p), var(--p-dark)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  padding: 10px 22px !important;
  font-weight: 800 !important;
}
.gya-report-page .filter-card,
.gya-report-page .search-card,
.gya-report-page .table-container{
  background: var(--s0) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh2) !important;
}
.gya-report-page .filter-card,
.gya-report-page .search-card{
  padding: 24px !important;
}
.gya-report-page .table-container{
  overflow: hidden !important;
}
.gya-report-page .filter-card .row,
.gya-report-page .search-card .row{
  --bs-gutter-y: 1rem;
  --bs-gutter-x: 1rem;
}
.gya-report-page .form-label,
.gya-report-page label{
  color: var(--t3) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
}
.gya-report-page .form-control,
.gya-report-page .form-select,
.gya-report-page select,
.gya-report-page input[type="date"],
.gya-report-page input[type="text"],
.gya-report-page input[type="month"]{
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  color: var(--t1) !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  box-shadow: none !important;
}
.gya-report-page .form-control:focus,
.gya-report-page .form-select:focus,
.gya-report-page select:focus,
.gya-report-page input[type="date"]:focus,
.gya-report-page input[type="text"]:focus,
.gya-report-page input[type="month"]:focus{
  border-color: var(--p) !important;
  box-shadow: 0 0 0 .22rem rgba(91,94,244,.18) !important;
}
.gya-report-page .form-control::placeholder,
.gya-report-page input::placeholder{
  color: var(--t4) !important;
}
.gya-report-page .search-container i{
  color: var(--t4) !important;
}
.gya-report-page .table-responsive,
.gya-report-page #tableContainer{
  background: transparent !important;
  color: var(--t1) !important;
}
.gya-report-page .table{
  margin-bottom: 0 !important;
}
.gya-report-page .table thead th{
  background: var(--s2) !important;
  color: var(--t3) !important;
  border-color: var(--bd-s) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem !important;
  font-weight: 800 !important;
}
.gya-report-page .table tbody td{
  background: var(--s0) !important;
  color: var(--t1) !important;
  border-color: var(--bd-s) !important;
}
.gya-report-page .table tbody tr:hover td{
  background: var(--s1) !important;
}
.gya-report-page .table tfoot td{
  background: var(--s1) !important;
  color: var(--t2) !important;
  border-color: var(--bd-s) !important;
  font-weight: 800 !important;
}
.gya-report-page .tbl-pag-wrap{
  background: var(--s0) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 0 0 var(--r3) var(--r3) !important;
}
@media (max-width: 768px){
  .gya-report-page .page-wrapper{
    padding-top: calc(var(--nav-h) + 10px) !important;
  }
  .gya-report-page .container-fluid{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .gya-report-page .page-header{
    padding: 16px 18px !important;
  }
  .gya-report-page .filter-card,
  .gya-report-page .search-card{
    padding: 18px !important;
  }
}

/* ============================================================
   SEARCH AUTOCOMPLETE DROPDOWNS
   ============================================================ */
.codigo-principal {
  color: var(--t1) !important;
  border-left: 3px solid var(--p) !important;
  font-weight: 700;
  font-size: .82rem;
  margin: 0;
}
.codigo-interno {
  color: var(--t3) !important;
  font-size: .78rem;
  margin: 0;
}

/* Product search result items */
.resultItem, .resultItem2, .resultItem3 {
  color: var(--t1) !important;
  transition: background var(--tf);
}
.resultItem .fw-bold, .resultItem2 .fw-bold, .resultItem3 .fw-bold,
.resultItem .fw-semibold, .resultItem2 .fw-semibold, .resultItem3 .fw-semibold {
  color: var(--t1) !important;
}
.resultItem small, .resultItem2 small, .resultItem3 small {
  color: var(--t3) !important;
}
.precio-actual {
  color: var(--p) !important;
  font-weight: 700 !important;
}

/* Table modal product selector */
.tr-prod-modal .table tbody tr:hover {
  background: var(--s1) !important;
}

/* Card title always readable */
.card-title {
  color: var(--t1) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Strong / b elements */
strong, b {
  color: inherit;
}

/* ============================================================
   TABLE CONTAINER — ensures dark bg even when #fff hardcoded
   ============================================================ */
.table-container,
#tableContainer,
.table-wrapper,
.table-responsive-wrap {
  background: var(--s0) !important;
  border-radius: var(--r2);
}

/* ============================================================
   SEARCH AUTOCOMPLETE — always use theme vars for bg/border
   ============================================================ */
#productosNombreResultados,
#clientesRUCResultados,
#clientesNombreResultados,
#presResultados,
.dropdown-pres {
  background: var(--s0) !important;
  border-color: var(--bd) !important;
  box-shadow: var(--sh3) !important;
}

/* Items inside autocomplete */
.resultItem3,
.resultItem2,
.resultItem {
  background: var(--s0) !important;
  color: var(--t1) !important;
  border-color: var(--bd) !important;
}
.resultItem3:hover,
.resultItem2:hover,
.resultItem:hover {
  background: var(--s1) !important;
}
.resultItem3.is-active,
.resultItem2.is-active,
.resultItem.is-active {
  background: var(--p-ghost) !important;
  border-color: var(--p) !important;
}
.resultItem3 .fw-bold,
.resultItem3 .fw-semibold,
.resultItem2 .fw-bold,
.resultItem .fw-bold {
  color: var(--t1) !important;
}
.resultItem3 small,
.resultItem2 small,
.resultItem small {
  color: var(--t3) !important;
}

/* ============================================================
   AVATAR / INITIALS CIRCLES
   ============================================================ */
.default-avatar {
  background: var(--p) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ============================================================
   ACTION BUTTONS — uniform size and style
   ============================================================ */
.btn-action {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--r1) !important;
  padding: 0 !important;
  font-size: .82rem;
  cursor: pointer;
  border: none !important;
  transition: all var(--tf) var(--ease) !important;
}
.btn-action.btn-edit,
.btn-action[class*="edit"],
button.btn-action:not(.btn-delete):not([class*="delete"]):not([class*="delet"]) {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(59,130,246,.3) !important;
}
.btn-action.btn-edit:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(59,130,246,.4) !important; }
.btn-action.btn-delete,
.btn-action[class*="delete"],
.btn-action[class*="delet"] {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(239,68,68,.3) !important;
}
.btn-action.btn-delete:hover { transform: translateY(-1px); }

/* ============================================================
   SEARCH INPUT inside form pages
   ============================================================ */
.search-container {
  background: var(--s0) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r2) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.search-container i { color: var(--t3) !important; }
.search-container input {
  background: transparent !important;
  border: none !important;
  color: var(--t1) !important;
  outline: none;
  flex: 1;
  font-size: .875rem;
}
.search-container input::placeholder { color: var(--t4) !important; }
.search-container input:focus { box-shadow: none !important; }

/* ============================================================
   PORTALIZED DROPDOWNS — moved to <body> by JS
   These need explicit selectors since they leave their parent context
   ============================================================ */
[data-bs-theme="dark"] #productosNombreResultados,
[data-bs-theme="dark"] #clientesRUCResultados,
[data-bs-theme="dark"] #clientesNombreResultados,
[data-bs-theme="dark"] #presResultados {
  background: #0e0f1a !important;
  border-color: #252638 !important;
  color: #e8ecf8 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.6) !important;
}

[data-bs-theme="dark"] #productosNombreResultados .resultItem3,
[data-bs-theme="dark"] #clientesRUCResultados .resultItem,
[data-bs-theme="dark"] #clientesNombreResultados .resultItem2 {
  background: #0e0f1a !important;
  color: #e8ecf8 !important;
  border-color: #252638 !important;
}

[data-bs-theme="dark"] #productosNombreResultados .resultItem3:hover,
[data-bs-theme="dark"] #clientesRUCResultados .resultItem:hover,
[data-bs-theme="dark"] #clientesNombreResultados .resultItem2:hover {
  background: #13141f !important;
}

[data-bs-theme="dark"] #productosNombreResultados .resultItem3.is-active,
[data-bs-theme="dark"] #clientesRUCResultados .resultItem.is-active,
[data-bs-theme="dark"] #clientesNombreResultados .resultItem2.is-active,
[data-bs-theme="dark"] #ciudadesResultados .resultItem.is-active {
  background: rgba(91,94,244,.2) !important;
  border-color: #5b5ef4 !important;
}

[data-bs-theme="dark"] #productosNombreResultados .fw-bold,
[data-bs-theme="dark"] #productosNombreResultados .fw-semibold,
[data-bs-theme="dark"] #clientesRUCResultados .fw-bold,
[data-bs-theme="dark"] #clientesNombreResultados .fw-bold {
  color: #e8ecf8 !important;
}

[data-bs-theme="dark"] #productosNombreResultados small,
[data-bs-theme="dark"] #clientesRUCResultados small,
[data-bs-theme="dark"] #clientesNombreResultados small {
  color: #8088aa !important;
}

[data-bs-theme="dark"] #productosNombreResultados .precio-actual {
  color: #7879f7 !important;
}

[data-bs-theme="dark"] #productosNombreResultados .text-muted {
  color: #8088aa !important;
}

/* ============================================================
   CAJA VENTA — HEADER CHIPS (tablet + mobile)
   ============================================================ */

/* ── CHIP BASE para PC/Tablet header ── */
.gya-hdr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  color: #fff !important;
  cursor: default;
  height: 38px;          /* altura uniforme para todos */
  flex-shrink: 0;
  transition: background .15s;
}
.gya-hdr-chip i { font-size: .82rem; }

/* Chip cumpleaños: clickeable */
button.gya-hdr-chip-cumple {
  cursor: pointer;
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.35);
  position: relative;
}
button.gya-hdr-chip-cumple:hover {
  background: rgba(255,255,255,.28);
}
button.gya-hdr-chip-cumple .badge {
  position: static;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: .65rem;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 8px rgba(239,68,68,.4);
  margin-left: 1px;
}

/* Resetear el caja-online-badge para que use estilos gya-hdr-chip en tablet/PC */
.gya-hdr-chip.caja-online-badge {
  min-height: unset !important;
  height: 38px !important;
  padding: 7px 14px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  gap: 6px !important;
}
.gya-hdr-chip.caja-online-badge i { font-size: .82rem !important; }
.gya-hdr-chip.caja-online-badge .label { font-size: .82rem !important; letter-spacing: 0 !important; }

/* ── MOBILE HEADER (< 768px) ── */
@media (max-width: 767.98px) {
  /* Page-header compacto */
  .page-header {
    padding: 12px 16px 10px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
  }

  /* Contenedor del header mobile */
  .gya-mobile-header {
    flex-direction: column;
    gap: 8px;
  }

  /* Fecha: centrada, grande, destacada */
  .gya-mh-fecha-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gya-mh-fecha {
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
    text-shadow: 0 1px 4px rgba(0,0,0,.18);
    text-align: center;
  }

  /* Chips: fila centrada */
  .gya-mh-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 1px 2px;
  }
  .gya-mh-chips::-webkit-scrollbar { display: none; }

  /* Chip base mobile */
  .gya-mh-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.16);
    color: #fff !important;
    flex-shrink: 0;
    height: 30px;
    cursor: default;
    text-decoration: none;
  }
  .gya-mh-chip i { font-size: .72rem; }

  /* Chip cumpleaños mobile */
  button.gya-mh-chip-cumple {
    cursor: pointer;
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.35);
    position: relative;
  }
  button.gya-mh-chip-cumple:active { background: rgba(255,255,255,.32); }
  button.gya-mh-chip-cumple .badge {
    position: static;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: .6rem;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.85);
    margin-left: 2px;
    min-width: 16px;
    text-align: center;
  }

  /* Resetear caja-online-badge dentro del chip mobile */
  .gya-mh-chip.caja-online-badge {
    min-height: unset !important;
    height: 30px !important;
    padding: 5px 11px !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    gap: 5px !important;
  }
  .gya-mh-chip.caja-online-badge i { font-size: .72rem !important; }
  .gya-mh-chip.caja-online-badge .label { font-size: .72rem !important; letter-spacing: 0 !important; }
}
/* ============================================================
   BOTTOM NAV BAR — Mobile (inyectado por mobile-nav.js)
   ============================================================ */
.gya-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1040;
    background: var(--bs-body-bg, #fff);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 -4px 20px rgba(0,0,0,.10);
    padding: .3rem 0 calc(.3rem + env(safe-area-inset-bottom));
    gap: 0;
}
.gya-bn-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .18rem; border: none; background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .62rem; font-weight: 600;
    letter-spacing: .01em;
    padding: .35rem .2rem;
    transition: color .15s, background .15s;
    cursor: pointer; border-radius: .5rem;
    margin: 0 .15rem;
}
.gya-bn-item i { font-size: 1.25rem; line-height: 1; }
.gya-bn-item:hover, .gya-bn-item.active {
    color: var(--p, #4e73df);
    background: rgba(78,115,223,.07);
}
.gya-bn-main {
    color: #fff !important;
    background: linear-gradient(135deg, var(--p,#5b5ef4), var(--p-dark,#3d3fb8)) !important;
    border-radius: .75rem !important;
    box-shadow: 0 4px 14px rgba(91,94,244,.35);
    margin-top: -.55rem;
    padding: .7rem .2rem .35rem !important;
}
.gya-bn-main i { font-size: 1.4rem !important; }
.gya-bn-main:hover {
    background: linear-gradient(135deg,#6c6ff8,#4a4dd4) !important;
}
[data-bs-theme="dark"] .gya-bottom-nav {
    background: #0e0f1a;
    border-top-color: #252638;
}
[data-bs-theme="dark"] .gya-bn-item { color: #8890b0; }
[data-bs-theme="dark"] .gya-bn-item:hover,
[data-bs-theme="dark"] .gya-bn-item.active {
    color: #7b9ef0;
    background: rgba(78,115,223,.12);
}

/* Mobile page padding para que el bottom nav no tape contenido */
@media (max-width: 767.98px) {
    .page-wrapper { padding-bottom: 72px !important; }
}

/* ============================================================
   RESPONSIVE GLOBAL — Tabla scroll mobile
   ============================================================ */
@media (max-width: 991.98px) {
    .table-responsive, .table-container, #tableContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Sombra indicadora de scroll horizontal */
    .table-responsive, .table-container {
        background:
            linear-gradient(to right, var(--bs-body-bg, #fff) 30%, transparent),
            linear-gradient(to left, var(--bs-body-bg, #fff) 30%, transparent),
            linear-gradient(to right, rgba(0,0,0,.15), transparent 70%),
            linear-gradient(to left, rgba(0,0,0,.15), transparent 70%);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}