:root {
  --app-hero-image: var(--app-hero-image-desktop);
  --app-brand-primary: #8d4e2f;
  --app-brand-secondary: #b46c40;
  --app-brand-accent: #21486f;
  --app-btn-grad-start: #8d4e2f;
  --app-btn-grad-end: #b46c40;
  --app-btn-grad-hover-start: #7e3f23;
  --app-btn-grad-hover-end: #9a4f2d;
  --app-logo-bg-start: #8f4f2d;
  --app-logo-bg-end: #e0a562;
  --app-logo-text-color: #ffffff;
  --app-nav-bg-on-start: #29170e;
  --app-nav-bg-on-end: #633821;
  --app-nav-bg-off-start: rgba(43, 24, 15, 0.84);
  --app-nav-bg-off-end: rgba(104, 58, 35, 0.8);
  --app-control-radius: 10px;
  --app-control-focus-ring: rgba(184, 102, 47, 0.28);
  --app-control-disabled-opacity: 0.64;
  --app-control-disabled-bg: #efe4d8;
  --app-control-disabled-text: #8a735f;
  --app-file-border: #d6c0ad;
  --app-file-border-hover: #bf8f67;
  --app-file-bg: #fffdf9;
  --app-file-text: #3d2f26;
}

@media only screen and (max-width: 735px) {
  :root {
    --app-hero-image: var(--app-hero-image-mobile);
  }
}

@media (prefers-reduced-data: reduce) {
  :root {
    --app-hero-image: var(--app-hero-image-mobile);
  }
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3.9rem;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  z-index: 30;
  border-bottom: 1px solid rgba(255, 227, 196, 0.42);
  background: linear-gradient(110deg, var(--app-nav-bg-off-start), var(--app-nav-bg-off-end));
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(33, 20, 14, 0.28);
}

.navBackgroundOn {
  background: linear-gradient(110deg, var(--app-nav-bg-on-start), var(--app-nav-bg-on-end));
}

.navBackgroundOff {
  background: linear-gradient(110deg, var(--app-nav-bg-off-start), var(--app-nav-bg-off-end));
}

.nav .logo {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: var(--app-logo-text-color);
  background: linear-gradient(135deg, var(--app-logo-bg-start), var(--app-logo-bg-end));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 18px rgba(8, 19, 37, 0.35);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.nav .logo.logo-has-image {
  width: 3.9rem;
  height: 2.72rem;
  border-radius: 0.85rem;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 6px 14px rgba(8, 19, 37, 0.18);
}

.nav-links {
  margin-left: auto;
  text-align: right;
}

.nav-links ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.nav-links ul li {
  list-style: none;
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.6rem;
  color: #fff;
  background: rgba(255, 238, 216, 0.12);
  border: 1px solid rgba(255, 230, 198, 0.36);
  transition: all 0.2s ease;
}

.nav-links ul li:hover {
  background: rgba(255, 238, 216, 0.28);
}

.container_iconoMenu {
  color: #fff;
}

.nav-cart-badge {
  position: absolute;
  top: 0.08rem;
  right: 0.08rem;
  min-width: 1.08rem;
  height: 1.08rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #d06d39, #a6352f);
  border: 1px solid rgba(255, 244, 226, 0.9);
  box-shadow: 0 6px 14px rgba(31, 20, 11, 0.36);
  z-index: 5;
  pointer-events: none;
}

.nav-cart-badge[hidden] {
  display: none !important;
}

.nav-orders-badge {
  position: absolute;
  top: 0.08rem;
  right: 0.08rem;
  min-width: 1.08rem;
  height: 1.08rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #5f597a, #2f5c9c);
  border: 1px solid rgba(236, 241, 255, 0.95);
  box-shadow: 0 6px 14px rgba(31, 20, 11, 0.36);
  z-index: 5;
  pointer-events: none;
}

.nav-orders-badge[hidden] {
  display: none !important;
}

.iconohome {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;
}

.boxIconoBarra {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.6rem;
  color: #fff;
  border: 1px solid rgba(255, 230, 198, 0.36);
  background: rgba(255, 238, 216, 0.14);
  align-items: center;
  justify-content: center;
  display: none;
  position: relative;
}

#idIconoBarraMenu,
#idIconoOcultarMenu {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 3;
}

.nav .fa-power-off,
.nav .fa-bars {
  display: none;
  pointer-events: none;
}

@media only screen and (max-width: 735px) {
  .nav {
    height: 3.55rem;
    padding: 0.5rem 0.75rem;
  }

  .nav .logo.logo-has-image {
    width: 3.2rem;
    height: 2.3rem;
    border-radius: 0.72rem;
  }

  .boxIconoBarra {
    display: inline-flex;
  }

  .nav .fa-power-off,
  .nav .fa-bars {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -12.2rem;
    width: 12rem;
    height: 100svh;
    padding: 3.6rem 0.85rem 1rem;
    text-align: left;
    opacity: 0;
    background: linear-gradient(160deg, rgba(43, 24, 15, 0.98), rgba(108, 61, 36, 0.95));
    border-left: 1px solid rgba(255, 230, 198, 0.2);
    transition: right 0.3s ease, opacity 0.3s ease;
    z-index: 35;
  }

  .nav-links > .boxIconoBarra {
    margin: 0 0 0.8rem auto;
  }

  .nav-links ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .nav-links ul li {
    width: 100%;
    height: 2.4rem;
    justify-content: flex-start;
    padding-left: 0.75rem;
  }

  .nav-cart-badge {
    top: 0.32rem;
    right: 0.4rem;
  }

  .nav-orders-badge {
    top: 0.32rem;
    right: 0.4rem;
  }

  .navlinksMediaShow {
    right: 0;
    opacity: 1;
  }

  .navlinksMediaHidden {
    right: -12.2rem;
    opacity: 0;
  }

  .navMediaShow {
    overflow: visible;
  }

  .navMediaHidden {
    overflow: hidden;
  }
}

/* Shared controls layer: keeps buttons + file inputs coherent across modules. */
:where(
  .btn,
  .btnLogin__a,
  .btnHero,
  .btn__pideloYA,
  .btn-toggle-filters,
  .btn-close-filters,
  .crud-btn,
  .btn-add,
  .btn-cart,
  .btn-detail,
  .btn-invoice-open,
  .order-toggle-icon-btn,
  .chart-detail-btn,
  .table-export-fab,
  .pagination button,
  .product-card-actions button,
  .qty-control button,
  .row-actions button,
  .admin-actions button,
  .reports-export-actions button,
  .reports-export-format button,
  .billing-resolution-actions button,
  .reports-invoice-reprint__search button,
  .inventory-movements__filters button,
  .billing-web-supports__filters button,
  .invoice-modal-actions button,
  .logistics-filter-actions button,
  .logistics-status-menu__actions button,
  .admin-pos-search button,
  .pos-held-actions button,
  .crud-actions button,
  .app-confirm-actions button
) {
  border-radius: var(--app-control-radius);
  font-family: inherit;
  line-height: 1.1;
  transition: box-shadow 160ms ease, transform 160ms ease, filter 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

:where(
  .btn,
  .btnLogin__a,
  .btnHero,
  .btn__pideloYA,
  .btn-toggle-filters,
  .btn-close-filters,
  .crud-btn,
  .btn-add,
  .btn-cart,
  .btn-detail,
  .btn-invoice-open,
  .order-toggle-icon-btn,
  .chart-detail-btn,
  .table-export-fab,
  .pagination button,
  .product-card-actions button,
  .qty-control button,
  .row-actions button,
  .admin-actions button,
  .reports-export-actions button,
  .reports-export-format button,
  .billing-resolution-actions button,
  .reports-invoice-reprint__search button,
  .inventory-movements__filters button,
  .billing-web-supports__filters button,
  .invoice-modal-actions button,
  .logistics-filter-actions button,
  .logistics-status-menu__actions button,
  .admin-pos-search button,
  .pos-held-actions button,
  .crud-actions button,
  .app-confirm-actions button
):focus-visible {
  outline: 3px solid var(--app-control-focus-ring);
  outline-offset: 2px;
}

:where(
  button.btn,
  button.btnHero,
  button.btn__pideloYA,
  button.btn-toggle-filters,
  button.btn-close-filters,
  button.crud-btn,
  button.btn-add,
  button.btn-cart,
  button.btn-detail,
  button.btn-invoice-open,
  button.order-toggle-icon-btn,
  button.chart-detail-btn,
  button.table-export-fab,
  .pagination button,
  .product-card-actions button,
  .qty-control button,
  .row-actions button,
  .admin-actions button,
  .reports-export-actions button,
  .reports-export-format button,
  .billing-resolution-actions button,
  .reports-invoice-reprint__search button,
  .inventory-movements__filters button,
  .billing-web-supports__filters button,
  .invoice-modal-actions button,
  .logistics-filter-actions button,
  .logistics-status-menu__actions button,
  .admin-pos-search button,
  .pos-held-actions button,
  .crud-actions button,
  .app-confirm-actions button
):disabled,
:where(
  button.btn,
  button.btnHero,
  button.btn__pideloYA,
  button.btn-toggle-filters,
  button.btn-close-filters,
  button.crud-btn,
  button.btn-add,
  button.btn-cart,
  button.btn-detail,
  button.btn-invoice-open,
  button.order-toggle-icon-btn,
  button.chart-detail-btn,
  button.table-export-fab,
  .pagination button,
  .product-card-actions button,
  .qty-control button,
  .row-actions button,
  .admin-actions button,
  .reports-export-actions button,
  .reports-export-format button,
  .billing-resolution-actions button,
  .reports-invoice-reprint__search button,
  .inventory-movements__filters button,
  .billing-web-supports__filters button,
  .invoice-modal-actions button,
  .logistics-filter-actions button,
  .logistics-status-menu__actions button,
  .admin-pos-search button,
  .pos-held-actions button,
  .crud-actions button,
  .app-confirm-actions button
)[aria-disabled="true"] {
  opacity: var(--app-control-disabled-opacity);
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: saturate(0.78);
}

:where(
  .admin-crud-form input[type="file"],
  .order-support-grid input[type="file"],
  #idAppearanceDesktopFile,
  #idAppearanceMobileFile,
  #idAppearanceLogoFile,
  #idCrudInventoryImages,
  #idOrderSupportFile
) {
  width: 100%;
  max-width: 100%;
  min-height: 2.65rem;
  border: 1px dashed var(--app-file-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefb 0%, var(--app-file-bg) 100%);
  color: var(--app-file-text);
  padding: 0.34rem 0.42rem;
  font-size: 0.88rem;
}

:where(
  .admin-crud-form input[type="file"],
  .order-support-grid input[type="file"],
  #idAppearanceDesktopFile,
  #idAppearanceMobileFile,
  #idAppearanceLogoFile,
  #idCrudInventoryImages,
  #idOrderSupportFile
):hover {
  border-color: var(--app-file-border-hover);
}

:where(
  .admin-crud-form input[type="file"],
  .order-support-grid input[type="file"],
  #idAppearanceDesktopFile,
  #idAppearanceMobileFile,
  #idAppearanceLogoFile,
  #idCrudInventoryImages,
  #idOrderSupportFile
):focus-visible {
  outline: 3px solid var(--app-control-focus-ring);
  outline-offset: 1px;
}

:where(
  .admin-crud-form input[type="file"],
  .order-support-grid input[type="file"],
  #idAppearanceDesktopFile,
  #idAppearanceMobileFile,
  #idAppearanceLogoFile,
  #idCrudInventoryImages,
  #idOrderSupportFile
)::file-selector-button {
  border: 1px solid #ba8a63;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--app-btn-grad-start), var(--app-btn-grad-end));
  color: #fff;
  padding: 0.44rem 0.72rem;
  margin-right: 0.62rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

:where(
  .admin-crud-form input[type="file"],
  .order-support-grid input[type="file"],
  #idAppearanceDesktopFile,
  #idAppearanceMobileFile,
  #idAppearanceLogoFile,
  #idCrudInventoryImages,
  #idOrderSupportFile
)::-webkit-file-upload-button {
  border: 1px solid #ba8a63;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--app-btn-grad-start), var(--app-btn-grad-end));
  color: #fff;
  padding: 0.44rem 0.72rem;
  margin-right: 0.62rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}