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

/* Select con búsqueda integrada: el campo aparece únicamente al abrir el listado. */
.searchable-select { position: relative; width: 100%; min-width: 0; }
.searchable-select-source { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.searchable-select-toggle { width: 100%; min-height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; color: var(--bs-body-color, #212529); background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #ced4da); border-radius: .375rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; }
.searchable-select-toggle:hover { border-color: #86b7fe; }
.searchable-select-toggle:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.searchable-select.is-disabled .searchable-select-toggle { background: var(--bs-secondary-bg, #e9ecef); color: var(--bs-secondary-color, #6c757d); cursor: not-allowed; }
.searchable-select-menu { position: absolute; z-index: 1080; top: calc(100% + .25rem); left: 0; width: 100%; padding: .5rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #ced4da); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.16); }
.searchable-select-search { margin-bottom: .45rem; }
.searchable-select-options { max-height: 220px; overflow-y: auto; display: grid; gap: .15rem; }
.searchable-select-option { width: 100%; padding: .48rem .6rem; border: 0; border-radius: .3rem; color: var(--bs-body-color, #212529); background: transparent; text-align: left; }
.searchable-select-option:hover, .searchable-select-option:focus, .searchable-select-option.is-selected { color: #fff; background: #0d6efd; outline: 0; }
.searchable-select-empty { margin: .4rem .25rem; color: var(--bs-secondary-color, #6c757d); font-size: .875rem; }

/* ============================================================
   GYA COMERCIAL — Design System v4.0
   Tipografía global: Roboto
   Estrategia: CSS vars light/dark, todo via data-bs-theme
   ============================================================ */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --font-ui: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  /* 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:     #10172a;
  --nav-bd:     rgba(148,163,184,.14);
  --nav-t:      #edf2ff;
  --nav-dim:    rgba(226,232,255,.60);
  --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"] {
  /* Dark mode: azul pizarra, con suficiente contraste sin caer en negro puro. */
  --bg:   #0b1020;
  --s0:   #11182a;
  --s1:   #172136;
  --s2:   #1d2a43;
  --bd:   #2a3a58;
  --bd-s: #22314d;

  --t1:   #e8ecf8;
  --t2:   #c2c8e8;
  --t3:   #9aa8c5;
  --t4:   #687894;

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

  --sh1: 0 1px 3px rgba(0,0,0,.28);
  --sh2: 0 4px 12px rgba(0,0,0,.32);
  --sh3: 0 8px 28px rgba(0,0,0,.38);
  --sh4: 0 16px 48px rgba(0,0,0,.46);
  --shp: 0 7px 22px rgba(91,94,244,.25);
}

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

body {
  font-family: var(--font-ui);
  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;
}

/* En el menú superior hay dos barras fijas. La medición JavaScript ajusta
   --nav-h, pero esta reserva mínima evita que un encabezado quede detrás de
   ellas durante la carga inicial, un cambio de página o un recálculo visual. */
@media (min-width: 992px) {
  body.gya-menu-superior .page-wrapper {
    padding-top: max(134px, calc(var(--nav-h, 110px) + 24px)) !important;
  }

  body.gya-menu-superior.gya-operational-page .pm-page {
    padding-top: max(124px, calc(var(--nav-h, 110px) + 14px)) !important;
  }

  body.gya-menu-superior:not(.gya-report-page) > main:not(.gya-nav) {
    padding-top: max(134px, calc(var(--nav-h, 110px) + 24px)) !important;
  }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6,
.page-title,.card-header,.modal-title,
.offcanvas-title,.section-title {
  font-family: var(--font-display) !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: var(--font-display);
  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: var(--font-display);
  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: var(--font-display) !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: var(--font-display);
}

/* 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: var(--font-display) !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: var(--font-display) !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: var(--font-display) !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: var(--font-display);
  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: var(--font-ui) !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: var(--font-display) !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: var(--font-display) !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: var(--font-display) !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: var(--font-display) !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: var(--font-display) !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: var(--font-display) !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: var(--font-display) !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: var(--font-display) !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;
    }
}

/* ============================================================
   NAVEGADOR — mejoras de usabilidad y buscador
   ============================================================ */
.gya-nav {
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.gya-canvas {
  width: min(340px, 92vw) !important;
  box-shadow: -20px 0 45px rgba(0,0,0,.45);
}

.gya-canvas .offcanvas-header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: linear-gradient(180deg, rgba(10,11,18,.98) 0%, rgba(10,11,18,.92) 100%);
  backdrop-filter: blur(14px);
}

.cv-search {
  position: sticky;
  top: 63px;
  z-index: 5;
  padding: 12px 14px 10px;
  background: linear-gradient(180deg, rgba(10,11,18,.98) 0%, rgba(10,11,18,.9) 80%, rgba(10,11,18,.78) 100%);
  backdrop-filter: blur(14px);
}

.cv-search-box {
  padding: 2px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(91,94,244,.35), rgba(255,255,255,.03));
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.cv-search .input-group {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(12,15,28,.92);
  border: 1px solid rgba(255,255,255,.08);
}

.cv-search .input-group-text,
.cv-search input,
.cv-search #cvSearchClear {
  min-height: 44px;
  background: transparent !important;
  border: none !important;
}

.cv-search .input-group-text {
  padding-inline: 14px 10px;
  color: rgba(226,232,255,.72) !important;
}

.cv-search .input-group-text i {
  font-size: .88rem !important;
}

.cv-search input {
  color: #eef2ff !important;
  -webkit-text-fill-color: #eef2ff !important;
  caret-color: #ffffff;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.cv-search input::placeholder {
  color: rgba(226,232,255,.38) !important;
  -webkit-text-fill-color: rgba(226,232,255,.38) !important;
}

.cv-search input:focus {
  background: rgba(255,255,255,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.28), 0 0 0 .22rem rgba(91,94,244,.18) !important;
}

.cv-search #cvSearchClear {
  width: 44px;
  color: rgba(226,232,255,.65) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cv-search #cvSearchClear:hover {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}

.cv-search-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 4px 0;
  font-size: .72rem;
  color: rgba(226,232,255,.58);
}

.cv-search-hint i {
  color: #8b92ff;
}

.cv-body {
  padding: 10px 0 12px;
}

.cv-label {
  color: rgba(226,232,255,.28);
  padding-top: 16px;
  padding-bottom: 6px;
}

.cv-link {
  gap: 10px;
  min-height: 42px;
  padding: 9px 14px !important;
  margin: 3px 8px;
  border: 1px solid transparent;
  color: rgba(236,241,255,.8) !important;
}

.cv-link:hover {
  transform: translateX(2px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.06);
}

.cv-link i {
  width: 18px;
  font-size: .92rem;
}

.cv-link.is-active {
  background: linear-gradient(135deg, rgba(91,94,244,.28), rgba(91,94,244,.12));
  color: #fff !important;
  border-color: rgba(129,140,248,.34);
  box-shadow: 0 10px 24px rgba(39,51,170,.18);
}

.cv-link.is-active i,
.cv-link.is-current-parent i,
.cv-link.cv-match i,
.cv-link.is-search-parent i {
  color: #c7d2fe !important;
  opacity: 1;
}

.cv-link.is-current-parent,
.cv-link.is-search-parent {
  background: rgba(91,94,244,.10);
  color: #eef2ff !important;
  border-color: rgba(91,94,244,.16);
}

.cv-link.cv-match {
  background: rgba(15,23,42,.9);
  border-color: rgba(99,102,241,.26);
}

.cv-sub {
  padding-left: 10px;
  margin-top: 2px;
}

.cv-sub .cv-link {
  min-height: 38px;
  font-size: .81rem !important;
  margin-right: 10px;
}

.cv-sub .cv-link i {
  font-size: .42rem !important;
  color: rgba(199,210,254,.55) !important;
}

.cv-empty-state {
  margin: 18px 14px 4px;
  padding: 22px 16px;
  border-radius: 18px;
  text-align: center;
  border: 1px dashed rgba(148,163,184,.25);
  background: rgba(15,23,42,.52);
}

.cv-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(91,94,244,.2), rgba(59,130,246,.1));
  color: #c7d2fe;
  font-size: 1.2rem;
}

.cv-empty-title {
  color: #f8fafc;
  font-weight: 800;
  font-size: .95rem;
}

.cv-empty-text {
  margin-top: 6px;
  color: rgba(226,232,255,.62);
  font-size: .78rem;
  line-height: 1.55;
}

.cv-foot {
  background: linear-gradient(180deg, rgba(10,11,18,0) 0%, rgba(10,11,18,.98) 32%);
  position: sticky;
  bottom: 0;
  z-index: 4;
  backdrop-filter: blur(12px);
}

@media (max-width: 576px) {
  .gya-canvas {
    width: min(360px, 100vw) !important;
  }

  .cv-search {
    top: 61px;
    padding-inline: 12px;
  }
}

/* ============================================================
   IDENTIDAD UNIFICADA - todos los formularios
   Un unico lenguaje tipografico y visual para ventas, facturacion,
   inventario, fabricacion, asistencia y reportes.
   ============================================================ */
body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.input-group-text,
.table,
.dropdown-menu,
.nav-link,
.navbar,
.modal,
.offcanvas,
.toast,
.swal2-popup {
  font-family: var(--font-ui) !important;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.card-title,
.card-header,
.modal-title,
.offcanvas-title,
.section-title,
.as-section-title,
.as-page-header h3,
.as-page-header h4 {
  font-family: var(--font-display) !important;
  letter-spacing: -.015em;
}

/* Mismo encabezado principal para todos los modulos. */
.page-header,
.as-page-header {
  background: linear-gradient(135deg, var(--p) 0%, var(--p-dark) 100%) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--shp) !important;
  color: #fff !important;
}

.page-header *,
.as-page-header * {
  color: #fff !important;
}

.page-header .text-muted,
.as-page-header .text-muted {
  color: rgba(255,255,255,.78) !important;
}

.page-header .as-badge,
.as-page-header .as-badge {
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}

/* Tarjetas, titulos internos y tablas comparten la misma superficie. */
.card,
.as-card {
  border: 1px solid var(--bd) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}

.card-header,
.as-card .card-header {
  background: var(--s1) !important;
  border-bottom: 1px solid var(--bd) !important;
  color: var(--t1) !important;
}

.table thead th,
.gya-thead th {
  font-family: var(--font-display) !important;
  color: var(--t3) !important;
}

.btn,
.form-label {
  font-family: var(--font-display) !important;
}

/* Algunas pantallas antiguas declaran Outfit, Geist o fuentes monoespaciadas
   dentro de su propio bloque <style>. La interfaz debe conservar una sola
   tipografía, incluso en tablas cargadas por AJAX. Se excluyen los iconos para
   no reemplazar sus glifos. */
body,
body *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(.fa):not([class^="fa-"]):not([class*=" fa-"]) {
  font-family: var(--font-ui) !important;
}

/* Los encabezados de módulo usan la misma superficie que Caja de venta. */
.page-header,
.as-page-header,
.fab-header,
.cfg-hero {
  background: linear-gradient(135deg, var(--p) 0%, var(--p-dark) 100%) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--shp) !important;
  color: #fff !important;
}

.fab-header::before {
  background: none !important;
}

.fab-header *,
.cfg-hero * {
  color: #fff !important;
}

/* ============================================================
   REPORTES UNIFICADOS
   Todos los accesos del menú Reportes comparten la misma grilla,
   encabezado, filtros, indicadores y resultados.  Esta capa solo
   afecta páginas que declaran .gya-report-page.
   ============================================================ */
body.gya-report-page {
  background: var(--bg) !important;
  color: var(--t1) !important;
}

body.gya-report-page .page-wrapper {
  /* --nav-h lo calcula el navegador: una barra en menú lateral y dos
     barras cuando está activo el menú superior. */
  padding: calc(var(--nav-h) + 24px) 0 56px !important;
}

/* Ancho consistente: amplio en escritorio y con márgenes cómodos. */
body.gya-report-page .page-wrapper > .container,
body.gya-report-page .page-wrapper > .container-fluid,
body.gya-report-page > .page-wrap,
body.gya-report-page .page-wrapper > .page-wrap,
body.gya-report-page > .hero {
  width: min(calc(100% - 32px), 1536px) !important;
  max-width: 1536px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.gya-report-page .page-wrapper > .container,
body.gya-report-page .page-wrapper > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Encabezado único para reportes, dashboards y módulos avanzados. */
body.gya-report-page .page-header,
body.gya-report-page .as-page-header,
body.gya-report-page .dash-header,
body.gya-report-page .dashboard-header,
body.gya-report-page > .hero,
body.gya-report-page .page-wrapper > .hero {
  min-height: 104px !important;
  margin: 0 0 20px !important;
  padding: 22px 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: linear-gradient(135deg, var(--p) 0%, var(--p-dark) 100%) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--shp) !important;
  color: #fff !important;
}

/* Reportes avanzados usa el encabezado directamente bajo <body>, sin un
   .page-wrapper. También debe reservar el espacio de la navegación fija. */
body.gya-report-page > .hero {
  margin-top: calc(var(--nav-h) + 24px) !important;
}

body.gya-report-page .page-header *,
body.gya-report-page .as-page-header *,
body.gya-report-page .dash-header *,
body.gya-report-page .dashboard-header *,
body.gya-report-page > .hero *,
body.gya-report-page .page-wrapper > .hero * {
  color: #fff !important;
}

body.gya-report-page .dash-header .logo,
body.gya-report-page .dashboard-header .page-title,
body.gya-report-page > .hero h1,
body.gya-report-page .page-wrapper > .hero h1 {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.25rem, 1.6vw, 1.65rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

body.gya-report-page .dash-header .subtitle,
body.gya-report-page .dashboard-header p,
body.gya-report-page > .hero p,
body.gya-report-page .page-wrapper > .hero p,
body.gya-report-page .page-subtitle {
  margin: 5px 0 0 !important;
  color: rgba(255,255,255,.80) !important;
  font-size: .88rem !important;
}

/* Bloques de filtro y resultados con una sola superficie visual. */
body.gya-report-page .filter-card,
body.gya-report-page .search-card,
body.gya-report-page .filter-bar,
body.gya-report-page .filter-section,
body.gya-report-page .as-card,
body.gya-report-page .data-card,
body.gya-report-page .table-card,
body.gya-report-page .table-container,
body.gya-report-page .split-card,
body.gya-report-page .chart-card,
body.gya-report-page .obj-card,
body.gya-report-page .loading-card {
  background: var(--s0) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}

body.gya-report-page .filter-card,
body.gya-report-page .search-card,
body.gya-report-page .filter-bar,
body.gya-report-page .filter-section {
  padding: 20px !important;
  margin-bottom: 22px !important;
}

body.gya-report-page .section-title,
body.gya-report-page .as-section-title,
body.gya-report-page .chart-title,
body.gya-report-page .table-header,
body.gya-report-page .split-title {
  color: var(--t1) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.012em !important;
}

body.gya-report-page .section-title {
  margin: 0 0 12px !important;
  padding-left: 12px !important;
  border-left: 4px solid var(--p) !important;
  font-size: 1rem !important;
}

body.gya-report-page .filter-card label,
body.gya-report-page .search-card label,
body.gya-report-page .filter-bar label,
body.gya-report-page .filter-section label,
body.gya-report-page .as-toolbar label {
  color: var(--t2) !important;
  font-family: var(--font-display) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}

body.gya-report-page .filter-card input,
body.gya-report-page .filter-card select,
body.gya-report-page .search-card input,
body.gya-report-page .search-card select,
body.gya-report-page .filter-bar input,
body.gya-report-page .filter-bar select,
body.gya-report-page .filter-section input,
body.gya-report-page .filter-section select,
body.gya-report-page .as-toolbar input,
body.gya-report-page .as-toolbar select {
  min-height: 42px !important;
  border-color: var(--bd) !important;
  border-radius: var(--r2) !important;
  background: var(--s1) !important;
  color: var(--t1) !important;
}

/* Indicadores y tablas mantienen jerarquía y lectura uniforme. */
body.gya-report-page .kpi-card,
body.gya-report-page .metric-card,
body.gya-report-page .as-stat {
  background: var(--s0) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--sh1) !important;
}

body.gya-report-page .kpi-card .kpi-val,
body.gya-report-page .metric-card .metric-value,
body.gya-report-page .as-stat .value {
  color: var(--t1) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

body.gya-report-page .table-responsive,
body.gya-report-page .table-wrap {
  border-radius: var(--r2) !important;
}

body.gya-report-page .table {
  margin-bottom: 0 !important;
  color: var(--t1) !important;
}

body.gya-report-page .table thead th {
  padding: .78rem .85rem !important;
  background: var(--s2) !important;
  border-bottom: 1px solid var(--bd) !important;
  color: var(--t3) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

body.gya-report-page .table tbody td {
  padding: .78rem .85rem !important;
  border-color: var(--bd) !important;
  vertical-align: middle !important;
}

body.gya-report-page .table-hover > tbody > tr:hover > * {
  background: rgba(79,70,229,.045) !important;
}

@media (max-width: 768px) {
  body.gya-report-page .page-wrapper {
    padding-top: calc(var(--nav-h) + 16px) !important;
  }

  body.gya-report-page > .hero {
    margin-top: calc(var(--nav-h) + 16px) !important;
  }

  body.gya-report-page .page-wrapper > .container,
  body.gya-report-page .page-wrapper > .container-fluid,
  body.gya-report-page > .page-wrap,
  body.gya-report-page .page-wrapper > .page-wrap,
  body.gya-report-page > .hero {
    width: calc(100% - 20px) !important;
  }

  body.gya-report-page .page-header,
  body.gya-report-page .as-page-header,
  body.gya-report-page .dash-header,
  body.gya-report-page .dashboard-header,
  body.gya-report-page > .hero,
  body.gya-report-page .page-wrapper > .hero {
    min-height: auto !important;
    padding: 18px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Los dashboards cargan reglas locales después de esta hoja. Se conserva su
   contenido, pero se fuerza el mismo marco visual que el resto de Reportes. */
body.gya-report-page .page-wrapper.dash-page-wrapper .dash-header {
  width: min(calc(100% - 32px), 1536px) !important;
  max-width: 1536px !important;
  margin: 0 auto 20px !important;
}

@media (max-width: 768px) {
  body.gya-report-page .page-wrapper.dash-page-wrapper .dash-header {
    width: calc(100% - 20px) !important;
    margin: 0 auto 16px !important;
  }
}

/* ============================================================
   DARK MODE POLISH
   Superficie única para módulos antiguos y nuevos. Mantiene la
   jerarquía con azules pizarra y acentos violetas suaves.
   ============================================================ */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--t1);
  --bs-secondary-bg: var(--s1);
  --bs-tertiary-bg: var(--s2);
  --bs-border-color: var(--bd);
  --bs-emphasis-color: var(--t1);
}
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .toast {
  background: var(--s0) !important;
  border-color: var(--bd) !important;
  color: var(--t1) !important;
  box-shadow: var(--sh3) !important;
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .offcanvas-header,
[data-bs-theme="dark"] .offcanvas-footer {
  background: var(--s1) !important;
  border-color: var(--bd) !important;
}
[data-bs-theme="dark"] .dropdown-item,
[data-bs-theme="dark"] .popover-header,
[data-bs-theme="dark"] .popover-body { color: var(--t2) !important; }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background: var(--s2) !important; color: var(--p-light) !important; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1); opacity: .72; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] textarea:focus { box-shadow: 0 0 0 .2rem rgba(120,121,247,.2) !important; }
[data-bs-theme="dark"] ::selection { background: rgba(120,121,247,.38); color: #fff; }

/* Navegación superior y lateral en la misma familia cromática. */
[data-bs-theme="dark"] .gya-top-menu { background: rgba(17,24,42,.96) !important; border-color: var(--bd) !important; }
[data-bs-theme="dark"] .gya-top-dropdown { background: var(--s0) !important; border-color: var(--bd) !important; }
[data-bs-theme="dark"] .gya-top-link:hover { background: var(--s1) !important; }
[data-bs-theme="dark"] .gya-canvas { background: linear-gradient(160deg, #0e1526 0%, #111a2d 100%) !important; border-color: var(--bd) !important; }