:root {
  --premium-bg: #f5f7fa;
  --premium-bg-soft: #eef4ff;
  --premium-surface: rgba(255, 255, 255, 0.94);
  --premium-surface-solid: #ffffff;
  --premium-border: rgba(148, 163, 184, 0.24);
  --premium-text: #1f2937;
  --premium-muted: #64748b;
  --premium-primary: #2563eb;
  --premium-primary-dark: #384f8c;
  --premium-primary-soft: rgba(37, 99, 235, 0.10);
  --premium-success: #16a34a;
  --premium-danger: #e11d48;
  --premium-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
  --premium-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
  --premium-radius: 18px;
}

html,
body {
  background: var(--premium-bg);
  color: var(--premium-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem),
    linear-gradient(180deg, var(--premium-bg) 0%, var(--premium-bg-soft) 100%);
}

body * {
  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

body *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body *::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.32);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.bg-primary,
.hover\:bg-primary:hover,
.focus\:bg-primary:focus {
  background: linear-gradient(45deg, var(--premium-primary-dark), #33aeff) !important;
}

.text-primary {
  color: var(--premium-primary-dark) !important;
}

.border-primary {
  border-color: rgba(56, 79, 140, 0.45) !important;
}

button,
a,
input,
select,
textarea {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
    box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

button:not(:disabled):active,
a:active {
  transform: translateY(1px);
}

button:disabled,
.disabled\:bg-white\/20:disabled {
  cursor: not-allowed;
  opacity: .62;
}

input,
select,
textarea {
  border-color: rgba(148, 163, 184, 0.38) !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

main.w-screen.h-full {
  background:
    radial-gradient(circle at 8% 0%, rgba(51, 174, 255, 0.18), transparent 26rem),
    linear-gradient(180deg, #f8fbff 0%, #edf3fb 100%) !important;
  padding: .75rem;
}

main > nav,
nav.w-screen {
  width: calc(100vw - 1.5rem) !important;
  height: 72px !important;
  margin: 0 auto .75rem !important;
  padding: .35rem .5rem;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--premium-text) !important;
  border: 1px solid var(--premium-border);
  border-radius: var(--premium-radius);
  box-shadow: var(--premium-shadow-sm);
  backdrop-filter: blur(16px);
}

nav.text-white,
nav .text-white,
nav a,
nav button,
nav span {
  color: var(--premium-text) !important;
}

nav svg {
  color: var(--premium-primary-dark) !important;
}

nav .divide-x > :not([hidden]) ~ :not([hidden]) {
  border-left-color: rgba(148, 163, 184, 0.18) !important;
}

nav a,
nav button,
#online_status_menu > span {
  border-radius: 14px;
}

nav a:hover,
nav button:hover,
#online_status_menu > span:hover {
  background: var(--premium-primary-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.10);
}

#online_status_menu {
  border-radius: 14px;
  overflow: hidden;
}

#online_status_menu[style*="green"] span,
#online_status_menu[style*="red"] span {
  color: #fff !important;
}

main > div[class*="h-[90%]"] {
  height: calc(100% - 84px) !important;
}

main > div[class*="h-[90%]"] > div {
  background: var(--premium-surface) !important;
  border: 1px solid var(--premium-border);
  border-radius: 24px;
  box-shadow: var(--premium-shadow);
  overflow: hidden;
  backdrop-filter: blur(12px);
}

main > div[class*="h-[90%]"] > div:first-child {
  padding: .85rem !important;
}

#view-product-container,
#view-category-container {
  gap: .7rem !important;
}

[product-id],
[category-id] {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

[product-id]:hover,
[category-id]:hover {
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
  border-color: rgba(37, 99, 235, 0.35) !important;
}

[product-name],
[category-name] {
  background: rgba(255, 255, 255, 0.78) !important;
  color: #111827;
  letter-spacing: -.01em;
  backdrop-filter: blur(8px);
}

[product-name-vat] {
  background: rgba(15, 23, 42, 0.72) !important;
  color: #fff;
  padding: .25rem .4rem;
}

[product-show-info-button] {
  margin: .35rem;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--premium-primary-dark) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
}

#visual-information-wrapper {
  background: rgba(248, 250, 252, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  padding: .75rem 1rem;
  color: var(--premium-muted);
}

#visual-information-wrapper p:nth-child(even) {
  color: var(--premium-text);
}

#search-product-button,
#view-product-button,
#view-category-button,
#view-product-featured-button,
#pagination-first,
#pagination-back,
#pagination-next,
#pagination-last,
#pagination-go-previous,
#firstsalesEncargoPage,
#previoussalesEncargoPage,
#nextsalesEncargoPage,
#lastsalesEncargoPage {
  border-color: rgba(148, 163, 184, 0.30) !important;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

#search-product-button:hover,
#view-product-button:hover,
#view-category-button:hover,
#view-product-featured-button:hover,
#pagination-first:hover,
#pagination-back:hover,
#pagination-next:hover,
#pagination-last:hover,
#pagination-go-previous:hover,
#firstsalesEncargoPage:hover,
#previoussalesEncargoPage:hover,
#nextsalesEncargoPage:hover,
#lastsalesEncargoPage:hover {
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: var(--premium-primary-dark) !important;
  background: #f8fbff;
  transform: translateY(-1px);
}

table {
  border-collapse: separate !important;
  border-spacing: 0 .38rem !important;
}

thead tr,
#salesEncargoHistorial thead tr {
  background: #eef4ff !important;
  color: #334155 !important;
  border-radius: 14px;
}

thead th:first-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

thead th:last-child {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

tbody tr,
tr[sale-line] {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

tbody tr:hover,
tr[sale-line]:hover {
  background: #f8fbff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

tbody td:first-child,
tr[sale-line] td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

tbody td:last-child,
tr[sale-line] td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

[sale-line] input {
  border-radius: 10px !important;
}

[sale-line-delete],
[print-sale],
[print-deliver-sale],
[deliver-sale],
[sale-encargo-recover],
[sale-encargo-modify],
[sale-encargo-manage],
[print-sale-label] {
  color: var(--premium-primary-dark) !important;
}

[sale-line-delete]:hover {
  color: var(--premium-danger) !important;
}

dialog {
  border: 0 !important;
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(7px);
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(7px);
}

dialog > div {
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;
}

dialog header {
  background: linear-gradient(45deg, var(--premium-primary-dark), #33aeff) !important;
}

dialog header h1,
dialog header button,
dialog header svg,
dialog header .text-white {
  color: #fff !important;
}

#filter-sale-encargo-search-modal {
  background: rgba(248, 250, 252, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  padding: 1rem;
  margin-bottom: .8rem;
}

#bulk-finish-payment-method {
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.94) !important;
}

#bulk-finish-selected-encargos,
#search-product-submit,
#save-sale-line-comment,
button[onclick="salePointOrderReport()"] {
  background: linear-gradient(45deg, var(--premium-primary-dark), #33aeff) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

#bulk-finish-selected-encargos:not(:disabled):hover,
#search-product-submit:hover,
#save-sale-line-comment:hover,
button[onclick="salePointOrderReport()"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.30);
}

#sale-encargo-search-modal input[type="checkbox"] {
  accent-color: var(--premium-primary-dark);
}

#currentsalesEncargoPage,
#totalsalesEncargoPages,
#pagination-current-page,
#pagination-total-pages {
  font-weight: 700;
  color: var(--premium-primary-dark);
}

body > main.flex.h-screen {
  background:
    radial-gradient(circle at 12% 12%, rgba(51, 174, 255, 0.20), transparent 28rem),
    linear-gradient(135deg, #f8fbff 0%, #edf3fb 100%);
}

body > main.flex.h-screen form {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  border-radius: 24px !important;
  box-shadow: var(--premium-shadow) !important;
  backdrop-filter: blur(12px);
}

body > main.flex.h-screen h1 {
  color: var(--premium-text);
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

body > main.flex.h-screen button[type="submit"] {
  background: linear-gradient(45deg, var(--premium-primary-dark), #33aeff) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

#exit-fullscreen {
  margin: .75rem;
  border-radius: 14px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: var(--premium-shadow-sm);
}

@media (max-width: 900px) {
  main.w-screen.h-full {
    padding: .45rem;
  }

  main > nav,
  nav.w-screen {
    width: calc(100vw - .9rem) !important;
    height: 64px !important;
    border-radius: 16px;
  }

  main > div[class*="h-[90%]"] {
    height: calc(100% - 72px) !important;
  }

  dialog > div {
    min-width: min(640px, 96vw) !important;
  }
}

/* Modal sizing fix: keep the original app dimensions while preserving the premium look. */
dialog {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--premium-text);
  align-items: center;
  justify-content: center;
}

dialog:not([open]) {
  display: none !important;
}

dialog[open] {
  display: flex !important;
}

dialog.items-start[open] {
  align-items: flex-start !important;
}

dialog > div {
  min-height: 0;
  background-color: #fff !important;
  overflow: hidden;
}

#sale-encargo-search-modal > div,
#sale-encargo-cancel-dialog > div,
#sale-encargo-manage > div,
#sale-encargo-historial-search-modal > div,
#sale-encargo-historial-manage > div,
#payment-modal > div,
#order-modal > div,
#label-modal > div,
#client-create-modal > div,
#client-search-modal > div,
#employees-modal > div,
#price-lists-modal > div {
  width: 95vw !important;
  max-width: 95vw !important;
  min-width: min(640px, 95vw) !important;
}

#sale-encargo-search-modal > div,
#sale-encargo-cancel-dialog > div,
#sale-encargo-manage > div,
#sale-encargo-historial-search-modal > div,
#sale-encargo-historial-manage > div {
  height: 95vh !important;
  max-height: 95vh !important;
}

#payment-modal > div,
#order-modal > div,
#label-modal > div,
#client-create-modal > div,
#client-search-modal > div,
#employees-modal > div,
#price-lists-modal > div {
  height: 90vh !important;
  max-height: 90vh !important;
}

#search-product-modal > div {
  width: min(720px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 90vh !important;
}

#sale-line-comment-modal > div {
  width: min(760px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 90vh !important;
}

/* Premium polish v2: visual-only overrides, with a robust layering system. */
:root {
  --premium-z-base: 1;
  --premium-z-sticky: 20;
  --premium-z-floating: 100;
  --premium-z-modal: 900000;
  --premium-z-numpad: 900100;
  --premium-z-toast: 900200;
  --premium-app-padding: clamp(.45rem, .8vw, .9rem);
  --premium-panel-radius: 26px;
  --premium-card-radius: 20px;
  --premium-control-radius: 14px;
  --premium-gradient: linear-gradient(45deg, #0062e6, #33aeff);
  --premium-danger-gradient: linear-gradient(45deg, #e60023, #ff3366);
  --premium-success-gradient: linear-gradient(45deg, #0f9f55, #34d399);
}

html,
body {
  overflow: hidden;
}

main.w-screen.h-full {
  padding: var(--premium-app-padding) !important;
  gap: var(--premium-app-padding);
}

main > nav,
nav.w-screen {
  position: relative;
  z-index: var(--premium-z-floating);
}

main > div[class*="h-[90%]"] {
  position: relative;
  z-index: var(--premium-z-base);
  gap: var(--premium-app-padding) !important;
}

main > div[class*="h-[90%]"] > div {
  position: relative;
  z-index: var(--premium-z-base);
  border-radius: var(--premium-panel-radius) !important;
}

/* Product/search side */
#view-product-container,
#view-category-container {
  padding: .35rem;
}

[product-id],
[category-id] {
  transform: none !important;
  border-radius: var(--premium-card-radius) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease !important;
}

[product-id]:hover,
[category-id]:hover {
  transform: translateY(-2px) !important;
}

[product-image] {
  filter: saturate(1.05) contrast(1.03);
}

[product-name],
[category-name] {
  font-size: clamp(.78rem, .92vw, 1.05rem) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

[product-name-vat] {
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: clamp(.7rem, .78vw, .9rem) !important;
}

/* Sale side */
#active-sale-line-minus,
#active-sale-line-plus {
  color: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(15,23,42,.10);
}

#active-sale-line-minus {
  background: var(--premium-danger-gradient) !important;
}

#active-sale-line-plus {
  background: var(--premium-success-gradient) !important;
}

#active-sale-line-minus:hover,
#active-sale-line-plus:hover {
  filter: brightness(1.05);
}

/* Tables: keep them modern but never above modals. */
thead,
thead.sticky,
thead[class*="sticky"] {
  z-index: var(--premium-z-sticky) !important;
}

tr[sale-line].inactive,
tbody tr.inactive {
  opacity: .72;
}

tbody td,
tr[sale-line] td {
  border-top: 1px solid rgba(226,232,240,.75);
  border-bottom: 1px solid rgba(226,232,240,.75);
}

tbody td:first-child,
tr[sale-line] td:first-child {
  border-left: 1px solid rgba(226,232,240,.75);
}

tbody td:last-child,
tr[sale-line] td:last-child {
  border-right: 1px solid rgba(226,232,240,.75);
}

/* Summary and action panels */
[sale-summary],
#visual-information-wrapper,
#filter-sale-encargo-search-modal {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 18px rgba(15,23,42,.05);
}

button.bg-green-600,
button.bg-blue-600,
button.bg-red-700,
button.bg-primary,
#bulk-finish-selected-encargos,
#search-product-submit,
#save-sale-line-comment,
button[onclick="salePointOrderReport()"] {
  background: var(--premium-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--premium-control-radius) !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}

button.bg-green-600 {
  background: var(--premium-success-gradient) !important;
}

button.bg-red-700,
button.bg-rose-800,
button.hover\:bg-rose-800:hover {
  background: var(--premium-danger-gradient) !important;
}

button.bg-neutral-200,
button.bg-gray-200,
button.border,
a.border {
  border-color: rgba(148,163,184,.34) !important;
}

button:not(:disabled):hover,
a:not(.inactive):hover {
  filter: brightness(1.015);
}

/* Critical modal fix: every dialog opened with .show() must behave like a real top overlay. */
dialog,
dialog[open],
dialog.z-40,
dialog[class*="z-40"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: clamp(.45rem, 1.4vw, 1rem) !important;
  border: 0 !important;
  background: rgba(15, 23, 42, 0.50) !important;
  color: var(--premium-text) !important;
  overflow: hidden !important;
  z-index: var(--premium-z-modal) !important;
  isolation: isolate !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
}

dialog:not([open]) {
  display: none !important;
}

dialog[open] {
  display: flex !important;
}

dialog.items-start[open],
#search-product-modal[open] {
  align-items: flex-start !important;
  padding-top: clamp(1rem, 4vh, 2.2rem) !important;
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.54) !important;
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
}

dialog > div {
  position: relative !important;
  z-index: calc(var(--premium-z-modal) + 1) !important;
  background: #fff !important;
  color: var(--premium-text) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 26px !important;
  box-shadow: 0 34px 100px rgba(2,6,23,.42), 0 1px 0 rgba(255,255,255,.85) inset !important;
  overflow: hidden !important;
  transform: none !important;
}

dialog header {
  min-height: 4.25rem;
  background: var(--premium-gradient) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.22);
}

dialog header h1 {
  font-weight: 700 !important;
  letter-spacing: -.02em;
}

dialog header button {
  border-radius: 999px !important;
  opacity: .92;
}

dialog header button:hover {
  background: rgba(255,255,255,.16) !important;
  opacity: 1;
}

/* Keep the original large modal dimensions, but make them responsive and scroll-safe. */
#sale-encargo-search-modal > div,
#sale-encargo-cancel-dialog > div,
#sale-encargo-manage > div,
#sale-encargo-historial-search-modal > div,
#sale-encargo-historial-manage > div,
#payment-modal > div,
#order-modal > div,
#label-modal > div,
#client-create-modal > div,
#client-search-modal > div,
#employees-modal > div,
#price-lists-modal > div {
  width: min(95vw, 1680px) !important;
  max-width: 95vw !important;
  min-width: min(640px, calc(100vw - 1rem)) !important;
}

#sale-encargo-search-modal > div,
#sale-encargo-cancel-dialog > div,
#sale-encargo-manage > div,
#sale-encargo-historial-search-modal > div,
#sale-encargo-historial-manage > div {
  height: min(95vh, 980px) !important;
  max-height: 95vh !important;
}

#payment-modal > div,
#order-modal > div,
#label-modal > div,
#client-create-modal > div,
#client-search-modal > div,
#employees-modal > div,
#price-lists-modal > div {
  height: min(90vh, 940px) !important;
  max-height: 90vh !important;
}

#search-product-modal > div,
#sale-line-comment-modal > div,
#view-product-template dialog > div,
[product-id] + dialog > div {
  width: min(760px, 94vw) !important;
  max-width: 94vw !important;
  max-height: 90vh !important;
}

#sale-line-comment-modal > div {
  width: min(820px, 94vw) !important;
}

/* Any table/card overlay inside the app stays below modals. */
[product-name],
[category-name],
[product-show-info-button],
[product-name-vat],
[input-quantity-triggerer],
[input-discount-triggerer],
[global-discount-triggerer],
.sticky {
  z-index: var(--premium-z-sticky) !important;
}

/* Restore high layer for real overlays after the broad z-class cap above. */
dialog,
dialog[open],
dialog.z-40,
dialog[class*="z-40"] {
  z-index: var(--premium-z-modal) !important;
}

dialog > div {
  z-index: calc(var(--premium-z-modal) + 1) !important;
}

#numpad {
  z-index: var(--premium-z-numpad) !important;
  background: rgba(15,23,42,.50) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.noty_layout,
.noty_bar,
#noty_layout__topRight,
#noty_layout__topCenter,
#noty_layout__topLeft {
  z-index: var(--premium-z-toast) !important;
}

/* Login refresh */
body > main.flex.h-screen {
  padding: clamp(1rem, 4vw, 4rem);
}

body > main.flex.h-screen form {
  max-width: 34rem !important;
  padding: clamp(1rem, 2.3vw, 2rem) !important;
}

body > main.flex.h-screen img {
  filter: drop-shadow(0 24px 42px rgba(15,23,42,.12));
}

@media (max-width: 1100px) {
  main > div[class*="h-[90%]"] {
    gap: .5rem !important;
  }

  [product-name],
  [category-name] {
    font-size: .78rem !important;
  }

  dialog,
  dialog[open] {
    padding: .45rem !important;
  }

  #sale-encargo-search-modal > div,
  #sale-encargo-cancel-dialog > div,
  #sale-encargo-manage > div,
  #sale-encargo-historial-search-modal > div,
  #sale-encargo-historial-manage > div,
  #payment-modal > div,
  #order-modal > div,
  #label-modal > div,
  #client-create-modal > div,
  #client-search-modal > div,
  #employees-modal > div,
  #price-lists-modal > div {
    width: 98vw !important;
    max-width: 98vw !important;
    min-width: 0 !important;
  }
}

/* Premium v3 dialog layer hardening.
   The app opens dialogs with .show(); base.html upgrades that to showModal().
   These final rules keep every modal above product grids, summaries, sticky tables,
   numeric pads and custom z-index utilities without changing app behavior. */
html.app-dialog-open main,
html.app-dialog-open main *:not(dialog):not(dialog *) {
  pointer-events: none;
}

html.app-dialog-open dialog,
html.app-dialog-open dialog * {
  pointer-events: auto;
}

html body dialog.app-dialog-layer,
html body dialog.app-dialog-layer[open],
html body dialog.app-dialog-layer.z-40,
html body dialog.app-dialog-layer[class*="z-"] {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: clamp(.45rem, 1.4vw, 1rem) !important;
  border: 0 !important;
  background: rgba(15, 23, 42, .58) !important;
  overflow: hidden !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

html body dialog.app-dialog-layer[open] {
  display: flex !important;
}

html body dialog.app-dialog-layer.items-start[open],
html body #search-product-modal.app-dialog-layer[open] {
  align-items: flex-start !important;
  padding-top: clamp(1rem, 4vh, 2.2rem) !important;
}

html body dialog.app-dialog-layer::backdrop {
  background: rgba(15, 23, 42, .58) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

html body dialog.app-dialog-layer > div {
  position: relative !important;
  z-index: 2147483001 !important;
  background: #fff !important;
  color: var(--premium-text) !important;
  border-radius: 26px !important;
  box-shadow: 0 38px 120px rgba(2, 6, 23, .50), 0 1px 0 rgba(255, 255, 255, .85) inset !important;
  overflow: hidden !important;
}

html body #order-modal.app-dialog-layer > div,
html body #payment-modal.app-dialog-layer > div,
html body #label-modal.app-dialog-layer > div,
html body #client-create-modal.app-dialog-layer > div,
html body #client-search-modal.app-dialog-layer > div,
html body #price-lists-modal.app-dialog-layer > div,
html body #employees-modal.app-dialog-layer > div {
  width: min(95vw, 1680px) !important;
  max-width: 95vw !important;
  min-width: min(640px, calc(100vw - 1rem)) !important;
  height: min(90vh, 940px) !important;
  max-height: 90vh !important;
}

html body #sale-encargo-search-modal.app-dialog-layer > div,
html body #sale-encargo-cancel-dialog.app-dialog-layer > div,
html body #sale-encargo-manage.app-dialog-layer > div,
html body #sale-encargo-historial-search-modal.app-dialog-layer > div,
html body #sale-encargo-historial-manage.app-dialog-layer > div {
  width: min(95vw, 1680px) !important;
  max-width: 95vw !important;
  min-width: min(640px, calc(100vw - 1rem)) !important;
  height: min(95vh, 980px) !important;
  max-height: 95vh !important;
}

html body #search-product-modal.app-dialog-layer > div,
html body #sale-line-comment-modal.app-dialog-layer > div,
html body dialog.app-dialog-layer[id^="info-"] > div {
  width: min(820px, 94vw) !important;
  max-width: 94vw !important;
  max-height: 90vh !important;
}

/* Keep product/table decorative layers low, without touching dialog layers. */
main [product-name],
main [category-name],
main [product-show-info-button],
main [product-name-vat],
main [input-quantity-triggerer],
main [input-discount-triggerer],
main [global-discount-triggerer],
main .sticky,
main thead[class*="sticky"] {
  z-index: 20 !important;
}

main #numpad,
body #numpad {
  z-index: 2147483002 !important;
}

body .noty_layout,
body .noty_bar,
body #noty_layout__topRight,
body #noty_layout__topCenter,
body #noty_layout__topLeft {
  z-index: 2147483003 !important;
}

@media (max-width: 1100px) {
  html body #order-modal.app-dialog-layer > div,
  html body #payment-modal.app-dialog-layer > div,
  html body #label-modal.app-dialog-layer > div,
  html body #client-create-modal.app-dialog-layer > div,
  html body #client-search-modal.app-dialog-layer > div,
  html body #price-lists-modal.app-dialog-layer > div,
  html body #employees-modal.app-dialog-layer > div,
  html body #sale-encargo-search-modal.app-dialog-layer > div,
  html body #sale-encargo-cancel-dialog.app-dialog-layer > div,
  html body #sale-encargo-manage.app-dialog-layer > div,
  html body #sale-encargo-historial-search-modal.app-dialog-layer > div,
  html body #sale-encargo-historial-manage.app-dialog-layer > div {
    width: 98vw !important;
    max-width: 98vw !important;
    min-width: 0 !important;
  }
}

/* Premium v4: motion, softer blur overlay, typography pass and dark mode.
   Visual-only layer: keep existing app logic and dimensions untouched. */
:root {
  --premium-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --premium-overlay-bg: rgba(248, 250, 252, .32);
  --premium-overlay-backdrop: rgba(248, 250, 252, .42);
  --premium-modal-surface: rgba(255, 255, 255, .98);
  --premium-modal-border: rgba(255, 255, 255, .86);
  --premium-focus-ring: rgba(37, 99, 235, .16);
}

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --premium-bg: #07111f;
  --premium-bg-soft: #0d1728;
  --premium-surface: rgba(15, 23, 42, .88);
  --premium-surface-solid: #111827;
  --premium-border: rgba(148, 163, 184, .18);
  --premium-text: #e5edf7;
  --premium-muted: #94a3b8;
  --premium-primary: #60a5fa;
  --premium-primary-dark: #7dd3fc;
  --premium-primary-soft: rgba(96, 165, 250, .14);
  --premium-shadow-sm: 0 8px 24px rgba(0, 0, 0, .24);
  --premium-shadow: 0 24px 70px rgba(0, 0, 0, .36);
  --premium-overlay-bg: rgba(2, 6, 23, .18);
  --premium-overlay-backdrop: rgba(2, 6, 23, .26);
  --premium-modal-surface: rgba(15, 23, 42, .98);
  --premium-modal-border: rgba(148, 163, 184, .18);
  --premium-focus-ring: rgba(96, 165, 250, .20);
}

html,
body,
button,
input,
select,
textarea,
table {
  font-family: var(--premium-font-family) !important;
}

body {
  letter-spacing: -.012em;
}

body,
body p,
body span,
body label,
body input,
body select,
body textarea,
body button,
body td,
body th {
  line-height: 1.35;
}

h1,
h2,
h3,
dialog header h1 {
  letter-spacing: -.025em !important;
  line-height: 1.15 !important;
}

label {
  color: var(--premium-muted) !important;
  font-weight: 650 !important;
}

input,
select,
textarea {
  color: var(--premium-text) !important;
  border-radius: 14px !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--premium-muted) 72%, transparent) !important;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

main.w-screen.h-full {
  transition: background .28s ease, color .28s ease;
}

nav.w-screen,
main > nav {
  align-items: center;
}

nav span,
nav button,
nav a {
  font-size: clamp(.68rem, .74vw, .9rem) !important;
  font-weight: 650 !important;
}

nav svg {
  width: clamp(1.3rem, 1.55vw, 1.65rem) !important;
  height: clamp(1.3rem, 1.55vw, 1.65rem) !important;
}

.premium-theme-toggle {
  gap: .12rem;
  border-radius: 14px !important;
}

#premium-theme-toggle-icon {
  display: inline-flex;
  width: 1.55rem;
  height: 1.55rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  color: var(--premium-primary-dark) !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

#premium-theme-toggle[aria-pressed="true"] #premium-theme-toggle-icon {
  background: rgba(125, 211, 252, .16);
}

#online_status_menu {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

#online_status_menu > span,
.premium-theme-toggle {
  min-width: 4.6rem;
}

main > div[class*="h-[90%]"] > div {
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

#view-product-container,
#view-category-container,
tbody,
[sale-summary] {
  font-size: clamp(.78rem, .86vw, .96rem) !important;
}

[product-id],
[category-id] {
  outline: 1px solid transparent;
}

[product-name],
[category-name] {
  display: flex !important;
  min-height: 2.6rem;
  align-items: center;
  justify-content: center;
  font-weight: 720 !important;
  line-height: 1.18 !important;
}

[product-name-vat] {
  font-weight: 650 !important;
}

table,
table * {
  line-height: 1.28 !important;
}

thead th,
tbody td,
tr[sale-line] td {
  vertical-align: middle !important;
}

thead th {
  font-size: clamp(.72rem, .82vw, .94rem) !important;
  font-weight: 750 !important;
  letter-spacing: .01em;
  text-transform: uppercase;
}

tbody td,
tr[sale-line] td {
  font-size: clamp(.76rem, .86vw, 1rem) !important;
}

[sale-summary-amounts] p,
[sale-summary-amounts] span {
  font-size: clamp(.8rem, .9vw, 1.05rem) !important;
}

[sale-summary-pay],
[sale-summary-label],
[sale-summary-clear],
[sale-summary-order],
[sale-summary-order-finish],
[sale-summary-order-save-modify],
#marcar-como-entregado-boton-grande {
  font-size: clamp(1rem, 1.35vw, 1.45rem) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-align: center;
}

/* Softer modal layer: blur-first, not black-first. */
html body dialog.app-dialog-layer,
html body dialog.app-dialog-layer[open],
html body dialog.app-dialog-layer.z-40,
html body dialog.app-dialog-layer[class*="z-"] {
  background: var(--premium-overlay-bg) !important;
  color: var(--premium-text) !important;
  backdrop-filter: blur(13px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.08) !important;
}

html body dialog.app-dialog-layer::backdrop {
  background: var(--premium-overlay-backdrop) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
}

html body dialog.app-dialog-layer > div {
  background: var(--premium-modal-surface) !important;
  color: var(--premium-text) !important;
  border: 1px solid var(--premium-modal-border) !important;
  box-shadow: 0 34px 96px rgba(15, 23, 42, .30), 0 1px 0 rgba(255, 255, 255, .70) inset !important;
}

html body dialog.app-dialog-layer header {
  display: flex !important;
  align-items: center !important;
  gap: .75rem;
  min-height: 4.35rem;
  padding-inline: clamp(1rem, 1.5vw, 1.6rem) !important;
}

html body dialog.app-dialog-layer header h1 {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: clamp(1.18rem, 1.45vw, 1.55rem) !important;
  font-weight: 780 !important;
}

html body dialog.app-dialog-layer header button,
html body dialog.app-dialog-layer header a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html body dialog.app-dialog-layer > div > div,
html body dialog.app-dialog-layer footer {
  color: var(--premium-text) !important;
}

html body dialog.app-dialog-layer footer {
  background: color-mix(in srgb, var(--premium-modal-surface) 86%, transparent) !important;
  border-top: 1px solid var(--premium-border);
}

dialog .text-xl,
dialog label.text-xl,
dialog span.text-xl {
  font-size: clamp(.95rem, 1vw, 1.1rem) !important;
}

dialog .text-2xl,
dialog h1.text-2xl {
  font-size: clamp(1.2rem, 1.45vw, 1.55rem) !important;
}

dialog input,
dialog select,
dialog textarea,
dialog button:not([id*="close"]):not([id*="toggle-filter"]) {
  font-size: clamp(.9rem, .95vw, 1.05rem) !important;
}

dialog input,
dialog select,
dialog textarea {
  min-height: 2.6rem;
}

dialog button:not([id*="close"]):not([id*="toggle-filter"]) {
  min-height: 2.6rem;
  font-weight: 700 !important;
}

#filter-sale-encargo-search-modal,
#filter-sale-encargo-historial-search-modal {
  align-items: end !important;
  border-radius: 22px !important;
}

#filter-sale-encargo-search-modal label,
#filter-sale-encargo-historial-search-modal label {
  font-size: clamp(.78rem, .82vw, .94rem) !important;
}

/* Modal open animation. Only animates on open; close behavior remains immediate. */
@keyframes premium-dialog-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes premium-modal-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.975);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes premium-modal-header-enter {
  from { opacity: .86; }
  to { opacity: 1; }
}

html body dialog.app-dialog-layer[open] {
  animation: premium-dialog-backdrop-enter .18s ease-out both;
}

html body dialog.app-dialog-layer[open]::backdrop {
  animation: premium-dialog-backdrop-enter .18s ease-out both;
}

html body dialog.app-dialog-layer[open] > div {
  animation: premium-modal-enter .22s cubic-bezier(.2, .82, .25, 1) both;
  transform-origin: center center;
}

html body dialog.app-dialog-layer.items-start[open] > div,
html body #search-product-modal.app-dialog-layer[open] > div {
  transform-origin: top center;
}

html body dialog.app-dialog-layer[open] header {
  animation: premium-modal-header-enter .28s ease-out both;
}

/* Dark mode polish */
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 0%, rgba(96, 165, 250, .16), transparent 34rem),
    linear-gradient(180deg, #07111f 0%, #0d1728 100%) !important;
  color: var(--premium-text) !important;
}

html[data-theme="dark"] main.w-screen.h-full {
  background:
    radial-gradient(circle at 8% 0%, rgba(125, 211, 252, .16), transparent 28rem),
    linear-gradient(180deg, #07111f 0%, #0d1728 100%) !important;
}

html[data-theme="dark"] main > nav,
html[data-theme="dark"] nav.w-screen {
  background: rgba(15, 23, 42, .82) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] nav.text-white,
html[data-theme="dark"] nav .text-white,
html[data-theme="dark"] nav a,
html[data-theme="dark"] nav button,
html[data-theme="dark"] nav span {
  color: var(--premium-text) !important;
}

html[data-theme="dark"] nav svg {
  color: #93c5fd !important;
}

html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] nav button:hover,
html[data-theme="dark"] #online_status_menu > span:hover {
  background: rgba(96, 165, 250, .12) !important;
}

html[data-theme="dark"] main > div[class*="h-[90%]"] > div,
html[data-theme="dark"] [sale-summary],
html[data-theme="dark"] #visual-information-wrapper,
html[data-theme="dark"] #filter-sale-encargo-search-modal,
html[data-theme="dark"] #filter-sale-encargo-historial-search-modal {
  background: linear-gradient(180deg, rgba(15, 23, 42, .90), rgba(17, 24, 39, .86)) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] [product-id],
html[data-theme="dark"] [category-id],
html[data-theme="dark"] tbody tr,
html[data-theme="dark"] tr[sale-line] {
  background: linear-gradient(180deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .96)) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] [product-id]:hover,
html[data-theme="dark"] [category-id]:hover,
html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] tr[sale-line]:hover {
  background: linear-gradient(180deg, rgba(37, 52, 75, .98), rgba(17, 24, 39, .98)) !important;
  border-color: rgba(96, 165, 250, .28) !important;
}

html[data-theme="dark"] [product-name],
html[data-theme="dark"] [category-name] {
  background: rgba(15, 23, 42, .66) !important;
  color: #f8fafc !important;
  text-shadow: none;
}

html[data-theme="dark"] [product-name-vat] {
  background: rgba(2, 6, 23, .72) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] thead tr,
html[data-theme="dark"] #salesEncargoHistorial thead tr {
  background: rgba(30, 41, 59, .96) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] tbody td,
html[data-theme="dark"] tr[sale-line] td {
  border-color: rgba(148, 163, 184, .16) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input.bg-neutral-50,
html[data-theme="dark"] input.bg-gray-50,
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled {
  background-color: rgba(15, 23, 42, .88) !important;
  border-color: rgba(148, 163, 184, .24) !important;
  color: #e5edf7 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: rgba(96, 165, 250, .55) !important;
  box-shadow: 0 0 0 4px var(--premium-focus-ring) !important;
}

html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-neutral-900,
html[data-theme="dark"] .text-neutral-800,
html[data-theme="dark"] .text-neutral-700,
html[data-theme="dark"] .text-neutral-600,
html[data-theme="dark"] .text-neutral-500,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600 {
  color: var(--premium-text) !important;
}

html[data-theme="dark"] .text-neutral-400,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 {
  color: var(--premium-muted) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-neutral-50,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-neutral-100,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] button.bg-neutral-200,
html[data-theme="dark"] button.bg-gray-200 {
  background-color: rgba(15, 23, 42, .92) !important;
  color: var(--premium-text) !important;
}

html[data-theme="dark"] button.border,
html[data-theme="dark"] a.border,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-2 {
  border-color: rgba(148, 163, 184, .22) !important;
}

html[data-theme="dark"] html body dialog.app-dialog-layer > div,
html[data-theme="dark"] body dialog.app-dialog-layer > div,
html[data-theme="dark"] dialog.app-dialog-layer > div {
  background: var(--premium-modal-surface) !important;
  color: var(--premium-text) !important;
  border-color: var(--premium-modal-border) !important;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .44), 0 1px 0 rgba(255, 255, 255, .08) inset !important;
}

html[data-theme="dark"] dialog footer {
  background: rgba(15, 23, 42, .88) !important;
}

html[data-theme="dark"] #exit-fullscreen,
html[data-theme="dark"] body > main.flex.h-screen form {
  background: rgba(15, 23, 42, .88) !important;
  border-color: rgba(148, 163, 184, .20) !important;
  color: var(--premium-text) !important;
}

html[data-theme="dark"] body > main.flex.h-screen {
  background:
    radial-gradient(circle at 12% 12%, rgba(96, 165, 250, .15), transparent 28rem),
    linear-gradient(135deg, #07111f 0%, #0d1728 100%) !important;
}

html[data-theme="dark"] hr {
  border-color: rgba(148, 163, 184, .22) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* Keep modal header actions large and tappable after the general button normalization. */
html body dialog.app-dialog-layer header button {
  min-width: 2.65rem !important;
  min-height: 2.65rem !important;
  padding: .25rem !important;
  font-size: clamp(1.75rem, 2.15vw, 2.55rem) !important;
  line-height: 1 !important;
}

html body dialog.app-dialog-layer header button svg {
  width: clamp(1.8rem, 2vw, 2.35rem) !important;
  height: clamp(1.8rem, 2vw, 2.35rem) !important;
}


/* Premium v5: final polish pass — softer overlay, cleaner status/theme controls,
   better alignment and safer dark-mode contrast. Visual-only. */
:root {
  --premium-overlay-bg: rgba(248, 250, 252, .12);
  --premium-overlay-backdrop: rgba(248, 250, 252, .20);
  --premium-nav-control-bg: rgba(255, 255, 255, .54);
  --premium-online-bg: rgba(22, 163, 74, .16);
  --premium-online-border: rgba(22, 163, 74, .32);
  --premium-online-text: #15803d;
  --premium-offline-bg: rgba(225, 29, 72, .14);
  --premium-offline-border: rgba(225, 29, 72, .28);
  --premium-offline-text: #be123c;
}

html[data-theme="dark"] {
  --premium-overlay-bg: rgba(2, 6, 23, .10);
  --premium-overlay-backdrop: rgba(2, 6, 23, .18);
  --premium-nav-control-bg: rgba(15, 23, 42, .54);
  --premium-online-bg: rgba(52, 211, 153, .13);
  --premium-online-border: rgba(52, 211, 153, .26);
  --premium-online-text: #86efac;
  --premium-offline-bg: rgba(251, 113, 133, .13);
  --premium-offline-border: rgba(251, 113, 133, .24);
  --premium-offline-text: #fda4af;
}

/* Make the nav feel like a modern control bar, while preserving all existing buttons. */
nav .aspect-square > a,
nav .aspect-square > button,
#online_status_menu > span,
.premium-theme-toggle {
  margin: .18rem;
  width: calc(100% - .36rem) !important;
  height: calc(100% - .36rem) !important;
  background: var(--premium-nav-control-bg) !important;
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
}

nav .aspect-square > a:hover,
nav .aspect-square > button:hover,
#online_status_menu > span:hover,
.premium-theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.48);
}

html[data-theme="dark"] nav .aspect-square > a,
html[data-theme="dark"] nav .aspect-square > button,
html[data-theme="dark"] #online_status_menu > span,
html[data-theme="dark"] .premium-theme-toggle {
  border-color: rgba(148, 163, 184, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* The old JS still writes green/red inline. These rules intentionally win so the status
   looks premium without changing the online-check behavior. */
#online_status_menu[data-status="online"],
#online_status_menu[style*="green"] {
  background: var(--premium-online-bg) !important;
  border: 1px solid var(--premium-online-border) !important;
  border-radius: 14px;
}

#online_status_menu[data-status="offline"],
#online_status_menu[style*="red"] {
  background: var(--premium-offline-bg) !important;
  border: 1px solid var(--premium-offline-border) !important;
  border-radius: 14px;
}

#online_status {
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  color: var(--premium-online-text) !important;
  font-weight: 800 !important;
  letter-spacing: .005em;
}

#online_status::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 .24rem color-mix(in srgb, currentColor 14%, transparent);
}

#online_status_menu[data-status="offline"] #online_status,
#online_status_menu[style*="red"] #online_status {
  color: var(--premium-offline-text) !important;
}

#online_status_menu[style*="green"] span,
#online_status_menu[style*="red"] span {
  color: inherit !important;
}

#premium-theme-toggle-text,
#online_status {
  font-size: clamp(.72rem, .78vw, .92rem) !important;
}

/* Final modal polish: lighter glass backdrop, premium animation and consistent body spacing. */
html body dialog.app-dialog-layer,
html body dialog.app-dialog-layer[open],
html body dialog.app-dialog-layer.z-40,
html body dialog.app-dialog-layer[class*="z-"] {
  background: var(--premium-overlay-bg) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

html body dialog.app-dialog-layer::backdrop {
  background: var(--premium-overlay-backdrop) !important;
  backdrop-filter: blur(20px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.14) !important;
}

html body dialog.app-dialog-layer > div {
  border-radius: clamp(18px, 1.5vw, 28px) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24), 0 1px 0 rgba(255, 255, 255, .72) inset !important;
}

html[data-theme="dark"] body dialog.app-dialog-layer > div {
  box-shadow: 0 34px 94px rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .07) inset !important;
}

html body dialog.app-dialog-layer > div > :not(header):not(footer) {
  scrollbar-gutter: stable;
}

html body dialog.app-dialog-layer header {
  justify-content: space-between;
}

html body dialog.app-dialog-layer header h1 {
  margin: 0 !important;
}

/* Tables/forms inside dialogs: compact, aligned and readable. */
dialog table {
  width: 100%;
}

dialog thead th,
dialog tbody td {
  text-align: left;
}

dialog input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 1.05rem;
}

#filter-sale-encargo-search-modal,
#filter-sale-encargo-historial-search-modal {
  gap: .75rem !important;
}

#filter-sale-encargo-search-modal input,
#filter-sale-encargo-search-modal select,
#filter-sale-encargo-historial-search-modal input,
#filter-sale-encargo-historial-search-modal select {
  width: 100%;
}

/* Keep product cards and sale summary visually centered and consistent. */
[product-id],
[category-id],
[sale-summary],
#visual-information-wrapper,
tbody tr,
tr[sale-line] {
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, color .22s ease !important;
}

#view-product-container,
#view-category-container {
  align-content: start;
}

[sale-summary] {
  border-radius: 22px !important;
}

[sale-summary] button {
  justify-content: center;
  align-items: center;
}

/* Make disabled/secondary buttons legible in both themes. */
button.bg-neutral-200,
button.bg-gray-200,
button.bg-white,
a.bg-white {
  color: var(--premium-text) !important;
}

html[data-theme="dark"] button.bg-green-600,
html[data-theme="dark"] button.bg-blue-600,
html[data-theme="dark"] button.bg-red-700,
html[data-theme="dark"] button.bg-primary,
html[data-theme="dark"] #bulk-finish-selected-encargos,
html[data-theme="dark"] #search-product-submit,
html[data-theme="dark"] #save-sale-line-comment,
html[data-theme="dark"] button[onclick="salePointOrderReport()"] {
  color: #ffffff !important;
}

@media (max-width: 900px) {
  nav .aspect-square > a,
  nav .aspect-square > button,
  #online_status_menu > span,
  .premium-theme-toggle {
    margin: .12rem;
    width: calc(100% - .24rem) !important;
    height: calc(100% - .24rem) !important;
  }

  #premium-theme-toggle-text,
  #online_status {
    font-size: .68rem !important;
  }

  html body dialog.app-dialog-layer header {
    min-height: 3.75rem;
  }
}

/* Premium v5.1: fix header status/theme controls so Online never gets cropped. */
nav.w-screen,
main > nav {
  overflow: visible !important;
}

nav.w-screen > .inline-flex,
main > nav > .inline-flex {
  min-width: 0 !important;
}

nav.w-screen > .inline-flex:first-child,
main > nav > .inline-flex:first-child {
  flex: 1 1 auto !important;
  width: auto !important;
}

nav.w-screen > .inline-flex:last-child,
main > nav > .inline-flex:last-child {
  flex: 0 1 auto !important;
  width: auto !important;
}

#online_status_menu.premium-status-slot,
.premium-status-slot {
  aspect-ratio: auto !important;
  width: auto !important;
  min-width: 7.8rem !important;
  flex: 0 0 7.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.premium-theme-slot {
  aspect-ratio: auto !important;
  width: auto !important;
  min-width: 7.1rem !important;
  flex: 0 0 7.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

#online_status_menu > span,
.premium-theme-toggle {
  min-width: 0 !important;
  width: calc(100% - .36rem) !important;
  padding-inline: .68rem !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#online_status {
  max-width: none !important;
  width: auto !important;
  min-width: max-content !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1 !important;
}

#online_status::before {
  flex: 0 0 auto !important;
}

#premium-theme-toggle-text {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 1100px) {
  #online_status_menu.premium-status-slot,
  .premium-status-slot {
    min-width: 7.1rem !important;
    flex-basis: 7.1rem !important;
  }

  .premium-theme-slot {
    min-width: 6.6rem !important;
    flex-basis: 6.6rem !important;
  }

  #online_status_menu > span,
  .premium-theme-toggle {
    padding-inline: .45rem !important;
  }
}

@media (max-width: 760px) {
  #online_status_menu.premium-status-slot,
  .premium-status-slot {
    min-width: 6.4rem !important;
    flex-basis: 6.4rem !important;
  }

  .premium-theme-slot {
    min-width: 3.9rem !important;
    flex-basis: 3.9rem !important;
  }

  #premium-theme-toggle-text {
    display: none !important;
  }
}

/* Premium v5.2: visual correction pass from real screenshots.
   - Header buttons use the same width, including menus that use lg:aspect-square.
   - +/- controls become one clean segmented control.
   - Sale line table inputs/units are aligned and consistent.
   - Employee selector modal is compact instead of full-screen. */
:root {
  --premium-nav-slot-width: clamp(5.6rem, 4.15vw, 7rem);
  --premium-nav-slot-gap: .18rem;
}

/* Header: all top controls occupy the same visual slot. Some menu partials use
   `lg:aspect-square`, so we target the direct nav slots instead of only `.aspect-square`. */
nav.w-screen > .inline-flex > .inline-flex.divide-x > div,
main > nav > .inline-flex > .inline-flex.divide-x > div,
nav.w-screen > .inline-flex:last-child > div,
main > nav > .inline-flex:last-child > div,
#online_status_menu.premium-status-slot,
.premium-status-slot,
.premium-theme-slot {
  aspect-ratio: auto !important;
  width: var(--premium-nav-slot-width) !important;
  min-width: var(--premium-nav-slot-width) !important;
  max-width: var(--premium-nav-slot-width) !important;
  flex: 0 0 var(--premium-nav-slot-width) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

nav.w-screen > .inline-flex > .inline-flex.divide-x > div > a,
nav.w-screen > .inline-flex > .inline-flex.divide-x > div > button,
main > nav > .inline-flex > .inline-flex.divide-x > div > a,
main > nav > .inline-flex > .inline-flex.divide-x > div > button,
nav.w-screen > .inline-flex:last-child > div > button,
main > nav > .inline-flex:last-child > div > button,
#online_status_menu > span,
.premium-theme-toggle {
  width: calc(100% - calc(var(--premium-nav-slot-gap) * 2)) !important;
  height: calc(100% - calc(var(--premium-nav-slot-gap) * 2)) !important;
  margin: var(--premium-nav-slot-gap) !important;
  padding: .25rem .35rem !important;
  border-radius: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: .14rem !important;
  overflow: hidden !important;
}

nav.w-screen > .inline-flex > .inline-flex.divide-x > div span,
nav.w-screen > .inline-flex:last-child > div span,
main > nav > .inline-flex > .inline-flex.divide-x > div span,
main > nav > .inline-flex:last-child > div span {
  width: 100%;
  max-width: 100%;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.05 !important;
}

#online_status,
#premium-theme-toggle-text {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

#premium-theme-toggle-icon {
  flex: 0 0 auto !important;
}

/* +/- controls: make the red and green halves look like a single segmented action. */
#active-sale-line-minus,
#active-sale-line-plus {
  margin: 0 !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.20) !important;
  transform: none !important;
}

#active-sale-line-minus {
  border-top-left-radius: var(--premium-panel-radius) !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#active-sale-line-plus {
  border-top-left-radius: 0 !important;
  border-top-right-radius: var(--premium-panel-radius) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#active-sale-line-minus svg,
#active-sale-line-plus svg {
  width: clamp(2.2rem, 2.8vw, 3.2rem) !important;
  height: clamp(2.2rem, 2.8vw, 3.2rem) !important;
  opacity: .96;
}

#active-sale-line-minus:hover,
#active-sale-line-plus:hover {
  transform: none !important;
}

/* Current sale table: align quantity + unit, inputs, totals and icon buttons. */
#sale-lines-container tr[sale-line] {
  box-shadow: 0 6px 14px rgba(15, 23, 42, .055) !important;
}

#sale-lines-container tr[sale-line] td {
  height: 3.15rem;
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
}

#sale-lines-container td[sale-line-product-quantity] {
  min-width: 7.4rem;
  white-space: nowrap !important;
  text-align: center !important;
}

#sale-lines-container td[sale-line-product-quantity] input {
  width: 4.6rem !important;
  max-width: 4.6rem !important;
  height: 2.1rem !important;
  padding: .25rem .45rem !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--premium-modal-surface, #fff) 90%, transparent) !important;
  font-weight: 650 !important;
  vertical-align: middle !important;
}

#sale-lines-container td[sale-line-product-quantity] [sale-line-product-unit] {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: .35rem !important;
  transform: none !important;
  color: var(--premium-text) !important;
  font-size: .86rem !important;
  font-weight: 650 !important;
  vertical-align: middle !important;
}

#sale-lines-container td[sale-line-product-name] {
  padding-left: .8rem !important;
  padding-right: .8rem !important;
  color: var(--premium-text) !important;
  font-weight: 620 !important;
  line-height: 1.18 !important;
}

#sale-lines-container td[sale-line-unit-price],
#sale-lines-container td[sale-line-base-price],
#sale-lines-container td[sale-line-product-vat],
#sale-lines-container td[sale-line-product-price-with-vat],
#sale-lines-container td[sale-line-total] {
  font-variant-numeric: tabular-nums;
  text-align: center !important;
}

#sale-lines-container td[sale-line-discount] input {
  width: 3.35rem !important;
  max-width: 3.35rem !important;
  height: 2.1rem !important;
  padding: .2rem .35rem !important;
  border-radius: 12px !important;
  font-weight: 650 !important;
}

#sale-lines-container button[sale-line-comment],
#sale-lines-container button[sale-line-delete] {
  min-width: 2.05rem !important;
  min-height: 2.05rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  box-shadow: none !important;
}

#sale-lines-container button[sale-line-comment]:hover,
#sale-lines-container button[sale-line-delete]:hover {
  background: var(--premium-primary-soft) !important;
}

#sale-lines-container button[sale-line-delete]:hover {
  background: rgba(225, 29, 72, .10) !important;
}

/* Summary: keep the amount block and the main action optically aligned. */
[sale-summary-amounts] {
  padding: .85rem 1.1rem !important;
  column-gap: 1.25rem !important;
}

[sale-summary-amounts] p,
[sale-summary-amounts] span {
  align-self: center !important;
}

[sale-summary-amounts] p {
  justify-content: flex-end !important;
  color: var(--premium-text) !important;
}

[sale-summary-amounts] span {
  justify-content: flex-end !important;
  font-weight: 520 !important;
  color: var(--premium-text) !important;
}

/* Employee selector: compact, centered and easy to tap. */
html body #employees-modal.app-dialog-layer > div {
  width: min(860px, 92vw) !important;
  max-width: 92vw !important;
  min-width: min(420px, calc(100vw - 1rem)) !important;
  height: auto !important;
  max-height: min(76vh, 620px) !important;
}

html body #employees-modal.app-dialog-layer header {
  min-height: 4rem !important;
}

html body #employees-modal.app-dialog-layer #employees-container {
  height: auto !important;
  max-height: calc(min(76vh, 620px) - 4rem) !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  gap: .75rem !important;
  padding: 1rem !important;
}

html body #employees-modal.app-dialog-layer #employees-container [employee-id] {
  min-height: 4.2rem !important;
  max-height: none !important;
  padding: .85rem 1rem !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)) !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body #employees-modal.app-dialog-layer #employees-container [employee-id]:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37, 99, 235, .34) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .12) !important;
}

html body #employees-modal.app-dialog-layer #employees-container [employee-name] {
  font-size: clamp(.86rem, .95vw, 1rem) !important;
  font-weight: 680 !important;
  line-height: 1.15 !important;
  width: 100%;
}

html[data-theme="dark"] body #employees-modal.app-dialog-layer #employees-container [employee-id] {
  background: linear-gradient(180deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .96)) !important;
  border-color: rgba(148, 163, 184, .20) !important;
  color: var(--premium-text) !important;
}

@media (max-width: 900px) {
  :root {
    --premium-nav-slot-width: clamp(4.4rem, 9.5vw, 5.8rem);
  }

  nav.w-screen > .inline-flex > .inline-flex.divide-x > div span,
  nav.w-screen > .inline-flex:last-child > div span,
  main > nav > .inline-flex > .inline-flex.divide-x > div span,
  main > nav > .inline-flex:last-child > div span {
    font-size: .66rem !important;
  }

  #premium-theme-toggle-text {
    display: none !important;
  }

  #sale-lines-container td[sale-line-product-quantity] {
    min-width: 6.4rem;
  }

  #sale-lines-container td[sale-line-product-quantity] input {
    width: 3.9rem !important;
    max-width: 3.9rem !important;
  }

  html body #employees-modal.app-dialog-layer > div {
    min-width: 0 !important;
    width: min(92vw, 620px) !important;
  }
}

/* Premium v5.8: encargos como antes, pero más limpio y cómodo en tablet.
   No cambia la estructura HTML ni la lógica: mantiene la tabla original y solo pule lectura, filtros y acciones. */
html body #sale-encargo-search-modal.app-dialog-layer > div {
  width: min(1480px, 96vw) !important;
  height: min(91vh, 920px) !important;
  max-height: 92vh !important;
  overflow: hidden !important;
}

html body #sale-encargo-search-modal.app-dialog-layer header {
  min-height: 4.1rem !important;
  padding-inline: clamp(.95rem, 1.35vw, 1.45rem) !important;
  gap: .8rem !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
}

html body #sale-encargo-search-modal.app-dialog-layer header h1 {
  min-width: max-content !important;
  font-size: clamp(1.28rem, 1.7vw, 1.75rem) !important;
  font-weight: 820 !important;
  letter-spacing: -.025em !important;
}

#sale-encargo-search-modal > div > div {
  padding: clamp(.8rem, 1.05vw, 1.15rem) !important;
  overflow: auto !important;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .08), transparent 26rem),
    linear-gradient(180deg, rgba(248, 250, 252, .96), rgba(241, 245, 249, .94)) !important;
}

/* Barra de filtros compacta, no invasiva. */
#filter-sale-encargo-search-modal {
  padding: .85rem !important;
  margin-bottom: .8rem !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055) !important;
  backdrop-filter: blur(14px) !important;
}

#filter-sale-encargo-search-modal .grid-cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
  gap: .65rem !important;
}

#filter-sale-encargo-search-modal label {
  margin-bottom: .26rem !important;
  color: color-mix(in srgb, var(--premium-text) 68%, transparent) !important;
  font-size: .72rem !important;
  font-weight: 820 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

#filter-sale-encargo-search-modal input,
#filter-sale-encargo-search-modal select {
  min-height: 2.5rem !important;
  padding: .48rem .75rem !important;
  border-radius: 13px !important;
  border: 1px solid rgba(148, 163, 184, .30) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: var(--premium-text) !important;
  font-size: .9rem !important;
  font-weight: 620 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
}

#filter-sale-encargo-search-modal input::placeholder {
  color: rgba(100, 116, 139, .78) !important;
}

#filter-sale-encargo-search-modal button[onclick="salePointOrderReport()"] {
  min-height: 2.5rem !important;
  border-radius: 13px !important;
  font-weight: 780 !important;
}

/* Botón de acción masiva: visible, limpio y sin selector de método de pago. */
#bulk-finish-selected-encargos {
  min-height: 2.55rem !important;
  padding: .5rem .9rem !important;
  border-radius: 999px !important;
  font-size: clamp(.78rem, .85vw, .92rem) !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 22px rgba(22, 163, 74, .20) !important;
}

#bulk-finish-selected-encargos:disabled {
  box-shadow: none !important;
}

#bulk-finish-selected-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.30);
  font-size: .78rem;
}

/* Tabla original, pero con contenedor limpio y lectura cómoda. */
#sale-encargo-search-modal .w-full.mt-2 > .w-full.flex.flex-col.flex-grow {
  overflow: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .075) !important;
}

#salesEncargoHistorial {
  width: 100% !important;
  min-width: 1120px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
}

#salesEncargoHistorial thead tr {
  background: transparent !important;
  color: color-mix(in srgb, var(--premium-text) 78%, transparent) !important;
}

#salesEncargoHistorial thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
  padding: .74rem .76rem !important;
  background: rgba(241, 245, 249, .96) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .26) !important;
  color: color-mix(in srgb, var(--premium-text) 74%, transparent) !important;
  font-size: .72rem !important;
  font-weight: 880 !important;
  letter-spacing: .04em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  backdrop-filter: blur(12px) !important;
}

#salesEncargoHistorial thead th:first-child {
  padding-left: .95rem !important;
}

#salesEncargoHistorial thead th:last-child {
  padding-right: .95rem !important;
}

#salesEncargoHistorial tbody {
  color: var(--premium-text) !important;
  font-size: .87rem !important;
  font-weight: 620 !important;
}

#salesEncargoHistorial tbody tr {
  background: rgba(255,255,255,.94) !important;
  border: 0 !important;
  transition: background .16s ease, box-shadow .16s ease !important;
}

#salesEncargoHistorial tbody tr:nth-child(even) {
  background: rgba(248,250,252,.94) !important;
}

#salesEncargoHistorial tbody tr:hover {
  background: rgba(239, 246, 255, .88) !important;
  box-shadow: inset 4px 0 0 rgba(37, 99, 235, .42) !important;
}

#salesEncargoHistorial tbody td {
  padding: .62rem .76rem !important;
  height: 3.2rem !important;
  border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  vertical-align: middle !important;
  line-height: 1.18 !important;
  color: var(--premium-text) !important;
}

#salesEncargoHistorial tbody td:first-child {
  padding-left: .95rem !important;
}

#salesEncargoHistorial tbody td:last-child {
  padding-right: .95rem !important;
}

#salesEncargoHistorial tbody td > div {
  min-height: 2.15rem !important;
  gap: .42rem !important;
}

/* Textos importantes: legibles, sin romper la tabla. */
#salesEncargoHistorial [sale-encargo-client-pay],
#salesEncargoHistorial [sale-encargo-person-pay],
#salesEncargoHistorial [sale-encargo-client-lastname-deliver],
#salesEncargoHistorial [sale-encargo-client-deliver],
#salesEncargoHistorial [sale-encargo-employee],
#salesEncargoHistorial [sale-encargo-reference],
#salesEncargoHistorial [sale-encargo-product] {
  display: inline-block !important;
  max-width: 13.5rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#salesEncargoHistorial [sale-encargo-client-pay],
#salesEncargoHistorial [sale-encargo-person-pay] {
  font-weight: 780 !important;
  letter-spacing: -.01em !important;
}

#salesEncargoHistorial [sale-encargo-date-time],
#salesEncargoHistorial [sale-encargo-date] {
  display: inline-flex !important;
  white-space: nowrap !important;
  color: color-mix(in srgb, var(--premium-text) 74%, transparent) !important;
  font-variant-numeric: tabular-nums !important;
}

#salesEncargoHistorial [sale-encargo-amount-total],
#salesEncargoHistorial [sale-encargo-amount] {
  display: inline-flex !important;
  justify-content: flex-end !important;
  min-width: 4.9rem !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 850 !important;
  letter-spacing: -.015em !important;
}

#salesEncargoHistorial [sale-encargo-amount-total] {
  color: var(--premium-primary-dark) !important;
}

/* Sí/No como chips discretos. */
#salesEncargoHistorial [sale-encargo-paid],
#salesEncargoHistorial [sale-encargo-pending] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.25rem !important;
  min-height: 1.55rem !important;
  padding: .18rem .55rem !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .055) !important;
  color: color-mix(in srgb, var(--premium-text) 76%, transparent) !important;
  font-size: .75rem !important;
  font-weight: 880 !important;
  line-height: 1 !important;
}

/* Iconos de acción: tamaño táctil, pero más sobrios que botones grandes. */
#salesEncargoHistorial [sale-encargo-recover],
#salesEncargoHistorial [sale-encargo-modify],
#salesEncargoHistorial [sale-encargo-manage],
#salesEncargoHistorial [print-sale],
#salesEncargoHistorial [print-deliver-sale],
#salesEncargoHistorial [deliver-sale],
#salesEncargoHistorial [print-sale-label] {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  margin: 0 .08rem !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 23, 42, .045) !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  color: color-mix(in srgb, var(--premium-text) 72%, var(--premium-primary-dark)) !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

#salesEncargoHistorial [sale-encargo-recover]:hover,
#salesEncargoHistorial [sale-encargo-modify]:hover,
#salesEncargoHistorial [sale-encargo-manage]:hover,
#salesEncargoHistorial [print-sale]:hover,
#salesEncargoHistorial [print-deliver-sale]:hover,
#salesEncargoHistorial [deliver-sale]:hover,
#salesEncargoHistorial [print-sale-label]:hover {
  transform: translateY(-1px) !important;
  background: rgba(37, 99, 235, .10) !important;
  border-color: rgba(37, 99, 235, .22) !important;
  box-shadow: 0 8px 16px rgba(37, 99, 235, .10) !important;
}

#salesEncargoHistorial svg {
  width: 1.22rem !important;
  height: 1.22rem !important;
  color: currentColor !important;
  stroke-width: 1.85 !important;
}

#salesEncargoHistorial input[type="checkbox"] {
  width: 1.35rem !important;
  height: 1.35rem !important;
  min-width: 1.35rem !important;
  min-height: 1.35rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

/* Paginación integrada, no tan pesada. */
#sale-encargo-search-modal #firstsalesEncargoPage,
#sale-encargo-search-modal #previoussalesEncargoPage,
#sale-encargo-search-modal #nextsalesEncargoPage,
#sale-encargo-search-modal #lastsalesEncargoPage {
  min-width: 3rem !important;
  min-height: 2.65rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  background: rgba(255,255,255,.86) !important;
  color: var(--premium-primary-dark) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05) !important;
}

#sale-encargo-search-modal .inline-flex.gap-3.rounded-full {
  min-height: 2.45rem !important;
  align-items: center !important;
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
}

#sale-encargo-search-modal #currentsalesEncargoPage,
#sale-encargo-search-modal #totalsalesEncargoPages {
  min-width: 1.1rem !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

html[data-theme="dark"] #sale-encargo-search-modal > div > div {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, .10), transparent 26rem),
    linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .94)) !important;
}

html[data-theme="dark"] #filter-sale-encargo-search-modal,
html[data-theme="dark"] #sale-encargo-search-modal .w-full.mt-2 > .w-full.flex.flex-col.flex-grow {
  background: rgba(15, 23, 42, .78) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] #filter-sale-encargo-search-modal input,
html[data-theme="dark"] #filter-sale-encargo-search-modal select,
html[data-theme="dark"] #sale-encargo-search-modal #firstsalesEncargoPage,
html[data-theme="dark"] #sale-encargo-search-modal #previoussalesEncargoPage,
html[data-theme="dark"] #sale-encargo-search-modal #nextsalesEncargoPage,
html[data-theme="dark"] #sale-encargo-search-modal #lastsalesEncargoPage,
html[data-theme="dark"] #sale-encargo-search-modal .inline-flex.gap-3.rounded-full {
  background: rgba(15, 23, 42, .86) !important;
  border-color: rgba(148, 163, 184, .20) !important;
  color: var(--premium-text) !important;
}

html[data-theme="dark"] #salesEncargoHistorial thead th {
  background: rgba(30, 41, 59, .96) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] #salesEncargoHistorial tbody tr,
html[data-theme="dark"] #salesEncargoHistorial tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, .92) !important;
}

html[data-theme="dark"] #salesEncargoHistorial tbody tr:hover {
  background: rgba(30, 41, 59, .96) !important;
}

html[data-theme="dark"] #salesEncargoHistorial tbody td {
  border-color: rgba(148, 163, 184, .14) !important;
}

html[data-theme="dark"] #salesEncargoHistorial [sale-encargo-recover],
html[data-theme="dark"] #salesEncargoHistorial [sale-encargo-modify],
html[data-theme="dark"] #salesEncargoHistorial [sale-encargo-manage],
html[data-theme="dark"] #salesEncargoHistorial [print-sale],
html[data-theme="dark"] #salesEncargoHistorial [print-deliver-sale],
html[data-theme="dark"] #salesEncargoHistorial [deliver-sale],
html[data-theme="dark"] #salesEncargoHistorial [print-sale-label] {
  background: rgba(96, 165, 250, .10) !important;
  border-color: rgba(96, 165, 250, .16) !important;
  color: #bfdbfe !important;
}

html[data-theme="dark"] #salesEncargoHistorial [sale-encargo-paid],
html[data-theme="dark"] #salesEncargoHistorial [sale-encargo-pending] {
  background: rgba(148, 163, 184, .14) !important;
  color: #e2e8f0 !important;
}

@media (max-width: 1180px) {
  html body #sale-encargo-search-modal.app-dialog-layer > div {
    width: 97vw !important;
    height: 91vh !important;
  }

  #salesEncargoHistorial {
    min-width: 1040px !important;
  }

  #salesEncargoHistorial thead th,
  #salesEncargoHistorial tbody td {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }

  #salesEncargoHistorial [sale-encargo-client-pay],
  #salesEncargoHistorial [sale-encargo-person-pay],
  #salesEncargoHistorial [sale-encargo-client-lastname-deliver],
  #salesEncargoHistorial [sale-encargo-client-deliver],
  #salesEncargoHistorial [sale-encargo-employee],
  #salesEncargoHistorial [sale-encargo-reference] {
    max-width: 10.8rem !important;
  }
}

@media (max-width: 760px) {
  html body #sale-encargo-search-modal.app-dialog-layer header {
    flex-wrap: wrap !important;
    min-height: 5rem !important;
    align-content: center !important;
  }

  #bulk-finish-selected-encargos {
    padding-inline: .72rem !important;
  }

  #salesEncargoHistorial {
    min-width: 980px !important;
  }
}

/* Premium v5.9: listado de encargos más limpio y cuadrado en tablet.
   Mantiene la tabla original, pero ordena anchuras, alineaciones y acciones. */
#salesEncargoHistorial {
  min-width: 1240px !important;
  table-layout: fixed !important;
}

#salesEncargoHistorial th[data-encargo-column],
#salesEncargoHistorial td[data-encargo-column] {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#salesEncargoHistorial thead th[data-encargo-column] {
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1.06 !important;
  padding-top: .68rem !important;
  padding-bottom: .68rem !important;
}

#salesEncargoHistorial tbody td[data-encargo-column] {
  text-align: center !important;
  padding-top: .58rem !important;
  padding-bottom: .58rem !important;
}

#salesEncargoHistorial th[data-encargo-column="bulk-select"],
#salesEncargoHistorial td[data-encargo-column="bulk-select"] {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  padding-left: .42rem !important;
  padding-right: .42rem !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-recuperar"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-recuperar"],
#salesEncargoHistorial th[data-encargo-column="sale-encargo-editar"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-editar"],
#salesEncargoHistorial th[data-encargo-column="sale-encargo-gestionar"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-gestionar"],
#salesEncargoHistorial th[data-encargo-column="sale-encargo-etiquetar"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-etiquetar"],
#salesEncargoHistorial th[data-encargo-column="sale-encargo-imprimir"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-imprimir"] {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding-left: .25rem !important;
  padding-right: .25rem !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-paid"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-paid"] {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-amount-total"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-amount-total"] {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  text-align: right !important;
}

#salesEncargoHistorial td[data-encargo-column="sale-encargo-amount-total"] > div,
#salesEncargoHistorial td[data-encargo-column="sale-encargo-amount"] > div {
  justify-content: flex-end !important;
}

#salesEncargoHistorial [sale-encargo-amount-total],
#salesEncargoHistorial [sale-encargo-amount] {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-pending"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-pending"] {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  padding-left: .35rem !important;
  padding-right: .35rem !important;
}

#salesEncargoHistorial td[data-encargo-column="sale-encargo-pending"] > div {
  justify-content: center !important;
  gap: .28rem !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-date-time"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-date-time"] {
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-client-pay"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-client-pay"] {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-person-pay"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-person-pay"] {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-client-lastname-deliver"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-client-lastname-deliver"] {
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-employee"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-employee"] {
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-date"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-date"] {
  width: 126px !important;
  min-width: 126px !important;
  max-width: 126px !important;
}

#salesEncargoHistorial td[data-encargo-column="sale-encargo-client-pay"] > div,
#salesEncargoHistorial td[data-encargo-column="sale-encargo-person-pay"] > div,
#salesEncargoHistorial td[data-encargo-column="sale-encargo-client-lastname-deliver"] > div,
#salesEncargoHistorial td[data-encargo-column="sale-encargo-employee"] > div,
#salesEncargoHistorial td[data-encargo-column="sale-encargo-date-time"] > div,
#salesEncargoHistorial td[data-encargo-column="sale-encargo-date"] > div {
  justify-content: center !important;
}

#salesEncargoHistorial [sale-encargo-client-pay],
#salesEncargoHistorial [sale-encargo-person-pay],
#salesEncargoHistorial [sale-encargo-client-lastname-deliver],
#salesEncargoHistorial [sale-encargo-employee],
#salesEncargoHistorial [sale-encargo-date-time],
#salesEncargoHistorial [sale-encargo-date] {
  max-width: 100% !important;
}

#salesEncargoHistorial .encargo-action-cell {
  width: 100% !important;
  height: 2.15rem !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#salesEncargoHistorial [sale-encargo-recover],
#salesEncargoHistorial [sale-encargo-modify],
#salesEncargoHistorial [sale-encargo-manage],
#salesEncargoHistorial [print-sale],
#salesEncargoHistorial [print-deliver-sale],
#salesEncargoHistorial [deliver-sale],
#salesEncargoHistorial [print-sale-label] {
  width: 2.05rem !important;
  height: 2.05rem !important;
  min-width: 2.05rem !important;
  min-height: 2.05rem !important;
  margin: 0 !important;
  border-radius: 11px !important;
  position: relative !important;
}

#salesEncargoHistorial [sale-encargo-recover] {
  background: rgba(37, 99, 235, .10) !important;
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, .20) !important;
}

#salesEncargoHistorial [sale-encargo-recover] svg {
  position: static !important;
}

#salesEncargoHistorial tbody tr:hover td[data-encargo-column="sale-encargo-amount-total"] {
  background: rgba(219, 234, 254, .38) !important;
}

@media (max-width: 1180px) {
  #salesEncargoHistorial {
    min-width: 1180px !important;
  }

  #salesEncargoHistorial th[data-encargo-column="sale-encargo-client-pay"],
  #salesEncargoHistorial td[data-encargo-column="sale-encargo-client-pay"] {
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }

  #salesEncargoHistorial th[data-encargo-column="sale-encargo-person-pay"],
  #salesEncargoHistorial td[data-encargo-column="sale-encargo-person-pay"] {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }

  #salesEncargoHistorial th[data-encargo-column="sale-encargo-client-lastname-deliver"],
  #salesEncargoHistorial td[data-encargo-column="sale-encargo-client-lastname-deliver"] {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
  }
}

/* Premium v6.0: encargos más cómodo para tablet.
   Mantiene el listado original, pero aumenta zonas táctiles, texto y espaciado. */
html body #sale-encargo-search-modal.app-dialog-layer > div {
  width: min(97vw, 96rem) !important;
  height: 92vh !important;
}

#sale-encargo-search-modal header {
  min-height: 4.45rem !important;
}

#sale-encargo-search-modal header h2,
#sale-encargo-search-modal header .text-2xl {
  font-size: 1.35rem !important;
  line-height: 1.2 !important;
}

#sale-encargo-search-modal header button {
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
}

#bulk-finish-selected-encargos {
  min-height: 2.65rem !important;
  padding-inline: 1.15rem !important;
  font-size: .92rem !important;
  border-radius: 999px !important;
}

#selected-encargos-count {
  min-width: 1.65rem !important;
  min-height: 1.65rem !important;
  font-size: .88rem !important;
}

#filter-sale-encargo-search-modal input,
#filter-sale-encargo-search-modal select,
#sale-encargo-search-modal select,
#sale-encargo-search-modal input[type="text"],
#sale-encargo-search-modal input[type="date"] {
  min-height: 3rem !important;
  font-size: .96rem !important;
  border-radius: 14px !important;
}

#sale-encargo-search-modal .w-full.mt-2 > .w-full.flex.flex-col.flex-grow {
  border-radius: 18px !important;
}

#salesEncargoHistorial {
  min-width: 1320px !important;
  font-size: .94rem !important;
}

#salesEncargoHistorial thead th[data-encargo-column] {
  padding-top: .88rem !important;
  padding-bottom: .88rem !important;
  font-size: .82rem !important;
  line-height: 1.15 !important;
  letter-spacing: .055em !important;
}

#salesEncargoHistorial tbody td[data-encargo-column] {
  padding-top: .78rem !important;
  padding-bottom: .78rem !important;
  font-size: .94rem !important;
  line-height: 1.25 !important;
}

#salesEncargoHistorial tbody tr {
  min-height: 3.75rem !important;
}

#salesEncargoHistorial th[data-encargo-column="bulk-select"],
#salesEncargoHistorial td[data-encargo-column="bulk-select"] {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
}

#salesEncargoHistorial input[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 6px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-recuperar"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-recuperar"],
#salesEncargoHistorial th[data-encargo-column="sale-encargo-editar"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-editar"],
#salesEncargoHistorial th[data-encargo-column="sale-encargo-gestionar"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-gestionar"],
#salesEncargoHistorial th[data-encargo-column="sale-encargo-etiquetar"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-etiquetar"],
#salesEncargoHistorial th[data-encargo-column="sale-encargo-imprimir"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-imprimir"] {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding-left: .35rem !important;
  padding-right: .35rem !important;
}

#salesEncargoHistorial .encargo-action-cell {
  height: 2.65rem !important;
}

#salesEncargoHistorial [sale-encargo-recover],
#salesEncargoHistorial [sale-encargo-modify],
#salesEncargoHistorial [sale-encargo-manage],
#salesEncargoHistorial [print-sale],
#salesEncargoHistorial [print-deliver-sale],
#salesEncargoHistorial [deliver-sale],
#salesEncargoHistorial [print-sale-label] {
  width: 2.48rem !important;
  height: 2.48rem !important;
  min-width: 2.48rem !important;
  min-height: 2.48rem !important;
  border-radius: 13px !important;
}

#salesEncargoHistorial [sale-encargo-recover] svg,
#salesEncargoHistorial [sale-encargo-modify] svg,
#salesEncargoHistorial [sale-encargo-manage] svg,
#salesEncargoHistorial [print-sale] svg,
#salesEncargoHistorial [print-deliver-sale] svg,
#salesEncargoHistorial [deliver-sale] svg,
#salesEncargoHistorial [print-sale-label] svg {
  width: 1.18rem !important;
  height: 1.18rem !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-paid"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-paid"] {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-amount-total"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-amount-total"] {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
}

#salesEncargoHistorial [sale-encargo-amount-total],
#salesEncargoHistorial [sale-encargo-amount] {
  font-size: .96rem !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-pending"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-pending"] {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}

#salesEncargoHistorial [sale-encargo-paid],
#salesEncargoHistorial [sale-encargo-pending] {
  min-height: 2rem !important;
  padding: .38rem .72rem !important;
  font-size: .84rem !important;
  border-radius: 999px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-date-time"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-date-time"] {
  width: 158px !important;
  min-width: 158px !important;
  max-width: 158px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-client-pay"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-client-pay"] {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-person-pay"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-person-pay"] {
  width: 158px !important;
  min-width: 158px !important;
  max-width: 158px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-client-lastname-deliver"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-client-lastname-deliver"] {
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-employee"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-employee"] {
  width: 152px !important;
  min-width: 152px !important;
  max-width: 152px !important;
}

#salesEncargoHistorial th[data-encargo-column="sale-encargo-date"],
#salesEncargoHistorial td[data-encargo-column="sale-encargo-date"] {
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
}

#salesEncargoHistorial [sale-encargo-client-pay],
#salesEncargoHistorial [sale-encargo-person-pay],
#salesEncargoHistorial [sale-encargo-client-lastname-deliver],
#salesEncargoHistorial [sale-encargo-employee],
#salesEncargoHistorial [sale-encargo-date-time],
#salesEncargoHistorial [sale-encargo-date] {
  font-size: .94rem !important;
  font-weight: 700 !important;
}

#sale-encargo-search-modal #firstsalesEncargoPage,
#sale-encargo-search-modal #previoussalesEncargoPage,
#sale-encargo-search-modal #nextsalesEncargoPage,
#sale-encargo-search-modal #lastsalesEncargoPage {
  min-width: 3.25rem !important;
  min-height: 2.9rem !important;
}

@media (max-width: 1180px) {
  #salesEncargoHistorial {
    min-width: 1260px !important;
  }

  #salesEncargoHistorial thead th[data-encargo-column] {
    font-size: .78rem !important;
  }

  #salesEncargoHistorial tbody td[data-encargo-column] {
    font-size: .90rem !important;
  }
}

@media (max-width: 760px) {
  #salesEncargoHistorial {
    min-width: 1160px !important;
  }

  #sale-encargo-search-modal header h2,
  #sale-encargo-search-modal header .text-2xl {
    font-size: 1.18rem !important;
  }
}

/* Premium v6.1: dark-mode polish for the product footer controls and pagination.
   Visual-only: keeps the same buttons and JS states, but makes them consistent on tablets. */
#search-product-button,
#view-product-button,
#view-category-button,
#view-product-featured-button {
  min-height: 2.72rem !important;
  min-width: 5.35rem !important;
  padding: .55rem 1rem !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--premium-text) !important;
  font-size: .94rem !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .055), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#search-product-button.text-neutral-400,
#view-product-button.text-neutral-400,
#view-category-button.text-neutral-400,
#view-product-featured-button.text-neutral-400 {
  color: var(--premium-muted) !important;
  background: rgba(255, 255, 255, .70) !important;
}

#search-product-button:not(.text-neutral-400),
#view-product-button:not(.text-neutral-400),
#view-category-button:not(.text-neutral-400),
#view-product-featured-button:not(.text-neutral-400) {
  color: var(--premium-primary-dark) !important;
  border-color: rgba(37, 99, 235, .30) !important;
  background: rgba(37, 99, 235, .10) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .10), inset 0 0 0 1px rgba(37, 99, 235, .08) !important;
}

#search-product-button:hover,
#view-product-button:hover,
#view-category-button:hover,
#view-product-featured-button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37, 99, 235, .34) !important;
  color: var(--premium-primary-dark) !important;
  background: rgba(248, 250, 252, .94) !important;
}

#pagination-first,
#pagination-back,
#pagination-next,
#pagination-last,
#pagination-go-previous {
  width: 3.25rem !important;
  height: 2.72rem !important;
  min-width: 3.25rem !important;
  min-height: 2.72rem !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--premium-primary-dark) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .055), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#pagination-first svg,
#pagination-back svg,
#pagination-next svg,
#pagination-last svg,
#pagination-go-previous svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: currentColor !important;
}

#pagination-first:disabled,
#pagination-back:disabled,
#pagination-next:disabled,
#pagination-last:disabled,
#pagination-go-previous:disabled,
#pagination-first.text-neutral-400:disabled,
#pagination-back.text-neutral-400:disabled,
#pagination-next.text-neutral-400:disabled,
#pagination-last.text-neutral-400:disabled {
  background: rgba(148, 163, 184, .12) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  color: color-mix(in srgb, var(--premium-muted) 78%, transparent) !important;
  box-shadow: none !important;
  opacity: .72 !important;
  transform: none !important;
}

#pagination-first:not(:disabled):hover,
#pagination-back:not(:disabled):hover,
#pagination-next:not(:disabled):hover,
#pagination-last:not(:disabled):hover,
#pagination-go-previous:not(:disabled):hover {
  transform: translateY(-1px) !important;
  background: rgba(37, 99, 235, .10) !important;
  border-color: rgba(37, 99, 235, .28) !important;
  color: var(--premium-primary-dark) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .10) !important;
}

#pagination-current-page,
#pagination-total-pages {
  color: var(--premium-primary-dark) !important;
  font-size: .96rem !important;
  font-weight: 820 !important;
  font-variant-numeric: tabular-nums !important;
}

#pagination-current-page + span {
  color: var(--premium-muted) !important;
  font-weight: 700 !important;
}

#pagination-current-page,
#pagination-total-pages,
#pagination-current-page + span {
  line-height: 1 !important;
}


html[data-theme="dark"] #search-product-button,
html[data-theme="dark"] #view-product-button,
html[data-theme="dark"] #view-category-button,
html[data-theme="dark"] #view-product-featured-button,
html[data-theme="dark"] #pagination-first,
html[data-theme="dark"] #pagination-back,
html[data-theme="dark"] #pagination-next,
html[data-theme="dark"] #pagination-last,
html[data-theme="dark"] #pagination-go-previous {
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  color: #bfdbfe !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

html[data-theme="dark"] #search-product-button.text-neutral-400,
html[data-theme="dark"] #view-product-button.text-neutral-400,
html[data-theme="dark"] #view-category-button.text-neutral-400,
html[data-theme="dark"] #view-product-featured-button.text-neutral-400 {
  background: rgba(15, 23, 42, .64) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] #search-product-button:not(.text-neutral-400),
html[data-theme="dark"] #view-product-button:not(.text-neutral-400),
html[data-theme="dark"] #view-category-button:not(.text-neutral-400),
html[data-theme="dark"] #view-product-featured-button:not(.text-neutral-400) {
  background: rgba(96, 165, 250, .16) !important;
  border-color: rgba(96, 165, 250, .30) !important;
  color: #dbeafe !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(96, 165, 250, .08) !important;
}

html[data-theme="dark"] #search-product-button:hover,
html[data-theme="dark"] #view-product-button:hover,
html[data-theme="dark"] #view-category-button:hover,
html[data-theme="dark"] #view-product-featured-button:hover,
html[data-theme="dark"] #pagination-first:not(:disabled):hover,
html[data-theme="dark"] #pagination-back:not(:disabled):hover,
html[data-theme="dark"] #pagination-next:not(:disabled):hover,
html[data-theme="dark"] #pagination-last:not(:disabled):hover,
html[data-theme="dark"] #pagination-go-previous:not(:disabled):hover {
  background: rgba(96, 165, 250, .18) !important;
  border-color: rgba(96, 165, 250, .34) !important;
  color: #eff6ff !important;
}

html[data-theme="dark"] #pagination-first:disabled,
html[data-theme="dark"] #pagination-back:disabled,
html[data-theme="dark"] #pagination-next:disabled,
html[data-theme="dark"] #pagination-last:disabled,
html[data-theme="dark"] #pagination-go-previous:disabled,
html[data-theme="dark"] #pagination-first.text-neutral-400:disabled,
html[data-theme="dark"] #pagination-back.text-neutral-400:disabled,
html[data-theme="dark"] #pagination-next.text-neutral-400:disabled,
html[data-theme="dark"] #pagination-last.text-neutral-400:disabled {
  background: rgba(15, 23, 42, .42) !important;
  border-color: rgba(148, 163, 184, .12) !important;
  color: rgba(148, 163, 184, .58) !important;
  box-shadow: none !important;
  opacity: .88 !important;
}

html[data-theme="dark"] #pagination-current-page,
html[data-theme="dark"] #pagination-total-pages {
  color: #bfdbfe !important;
}

html[data-theme="dark"] #pagination-current-page + span {
  color: #64748b !important;
}