/**
 * @fileoverview Sistema de diseño y estilos globales para Danillanos.
 * Contiene variables de diseño (tokens), normalización base, componentes de interfaz,
 * vistas de catálogo, pasarela de pago wizard, perfil de cliente y panel administrativo.
 */

:root,
[data-theme="dark"] {
  /* Tokens cromáticos corporativos */
  --brand-red: #e01a2c;
  --brand-red-hover: #c81525;
  --brand-red-soft: rgba(224, 26, 44, 0.11);
  --brand-red-border: rgba(224, 26, 44, 0.28);
  --brand-red-glow: rgba(224, 26, 44, 0.22);

  /* Superficies y fondos para tema oscuro (Dark Mode) */
  --bg-body: #0d0f13;
  --bg-surface: #14171d;
  --bg-card: #191d25;
  --bg-card-hover: #1f242e;
  --bg-elevated: #232834;
  --bg-header: rgba(16, 19, 24, 0.92);
  --bg-dropdown: #181c24;

  /* Estados interactivos para elementos de listas desplegables */
  --dropdown-item-hover-bg: #d9dde5;
  --dropdown-item-hover-text: #111318;
  --dropdown-item-hover-subtext: #373c47;

  /* Jerarquía tipográfica, bordes y radios estándar */
  --text-primary: #f1f3f7;
  --text-secondary: #9ca5b4;
  --text-muted: #6c7585;
  --icon-neutral: #cbd2de;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.58);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  --bg-body: #ebedef;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafc;
  --bg-elevated: #edf0f5;
  --bg-header: rgba(255, 255, 255, 0.94);
  --bg-dropdown: #ffffff;

  --dropdown-item-hover-bg: #e3e7ee;
  --dropdown-item-hover-text: #111318;
  --dropdown-item-hover-subtext: #3f4654;

  --text-primary: #14171f;
  --text-secondary: #4e5666;
  --text-muted: #788192;
  --icon-neutral: #343b48;
  --border-subtle: rgba(18, 20, 26, 0.08);
  --border-strong: rgba(18, 20, 26, 0.15);

  --shadow-sm: 0 6px 18px rgba(15, 18, 26, 0.05);
  --shadow-md: 0 14px 34px rgba(15, 18, 26, 0.09);
  --shadow-lg: 0 24px 56px rgba(15, 18, 26, 0.14);
}

/* ==========================================================================
   RESET Y BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.55;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

/* Normalización: supresión del botón de borrado nativo en inputs tipo search */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   HEADER PRINCIPAL
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-header);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.9rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}

.header-nav-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
}

.nav-dropdown-wrapper {
  position: relative;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.62rem 1.08rem;
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s var(--ease-spring);
}

/* Iconografía de navegación */
.nav-btn-icon {
  font-size: 1.2rem;
  color: var(--icon-neutral);
  transition: transform 0.35s var(--ease-spring), color 0.25s ease;
}

.nav-dropdown-wrapper:hover .nav-btn,
.nav-btn:hover {
  background-color: var(--bg-elevated);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.nav-dropdown-wrapper:hover .nav-btn-icon,
.nav-btn:hover .nav-btn-icon {
  transform: scale(1.15) rotate(-6deg);
  color: var(--brand-red);
}

/* Dropdowns Redondeados */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 330px;
  max-height: 78vh;
  overflow-y: auto;
  background-color: var(--bg-dropdown);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0.7rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.97);
  transform-origin: top left;
  transition:
    opacity 0.24s var(--ease-out-expo),
    transform 0.24s var(--ease-out-expo),
    visibility 0.24s;
  z-index: 120;
}

.dropdown-menu-catalog {
  width: 365px;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-dropdown-wrapper:hover .dropdown-menu,
.nav-dropdown-wrapper:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dropdown-header-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.4rem 0.75rem 0.55rem;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0.8rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  width: 100%;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dropdown-item-icon {
  font-size: 1.22rem;
  color: var(--icon-neutral);
  background: var(--bg-elevated);
  width: 36px;
  height: 36px;
  border-radius: 11px;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring), background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item-content {
  display: flex;
  flex-direction: column;
}

.dropdown-item-title {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
}

.dropdown-item-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

/* Resaltado interactivo de opciones desplegables */
.dropdown-item:hover,
.dropdown-item:focus-visible {
  background-color: var(--dropdown-item-hover-bg);
  color: var(--dropdown-item-hover-text);
  transform: translateX(3px);
}

.dropdown-item:hover .dropdown-item-desc,
.dropdown-item:focus-visible .dropdown-item-desc {
  color: var(--dropdown-item-hover-subtext);
}

.dropdown-item:hover .dropdown-item-icon,
.dropdown-item:focus-visible .dropdown-item-icon {
  background-color: var(--brand-red);
  color: #ffffff;
  transform: scale(1.06);
}

/* Marca Central */
.header-brand-center {
  justify-self: center;
  text-align: center;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  transition: transform 0.25s var(--ease-spring);
}

.brand-link:hover {
  transform: scale(1.02);
}

.brand-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.brand-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.brand-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-primary);
}

.brand-name::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: var(--brand-red);
  border-radius: 50%;
  margin-left: 3px;
  vertical-align: middle;
}

.brand-tagline {
  margin-top: 5px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Acciones Derecha */
.header-actions-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  justify-self: end;
}

/* 1. Barra de Búsqueda Expandible + Dropdown de Autocompletar */
.search-wrapper {
  position: relative;
}

.search-expandable {
  position: relative;
  display: flex;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  transition:
    width 0.38s var(--ease-out-expo),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.search-wrapper:hover .search-expandable,
.search-expandable:focus-within,
.search-expandable.has-value {
  width: 310px;
  border-color: var(--border-strong);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.search-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.search-input {
  width: 100%;
  height: 100%;
  padding-right: 2.2rem;
  font-size: 0.88rem;
  color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-wrapper:hover .search-input,
.search-expandable:focus-within .search-input,
.search-expandable.has-value .search-input {
  opacity: 1;
  pointer-events: auto;
}

.search-clear-btn {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.18s ease, color 0.18s ease;
}

.search-clear-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

[data-theme="light"] .search-clear-btn:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: #111318;
}

.search-expandable.has-value .search-clear-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Dropdown de Autocompletar al escribir desde 1 letra */
.search-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 390px;
  max-height: 420px;
  overflow-y: auto;
  background-color: var(--bg-dropdown);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0.6rem;
  box-shadow: var(--shadow-lg);
  z-index: 150;
}

.autocomplete-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.35rem 0.65rem 0.5rem;
  display: flex;
  justify-content: space-between;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.58rem 0.65rem;
  border-radius: var(--radius-md);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.autocomplete-item:hover {
  background-color: var(--dropdown-item-hover-bg);
  color: var(--dropdown-item-hover-text);
}

.autocomplete-item-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
  cursor: pointer;
}

.autocomplete-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.autocomplete-info {
  min-width: 0;
}

.autocomplete-title {
  font-size: 0.83rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-meta {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.autocomplete-item:hover .autocomplete-meta {
  color: var(--dropdown-item-hover-subtext);
}

.autocomplete-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.autocomplete-qty-input {
  width: 56px;
  padding: 0.32rem 0.4rem;
  border-radius: 8px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.autocomplete-add-btn {
  padding: 0.36rem 0.68rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Botones de Icono Circulares */
.action-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s var(--ease-spring),
    color 0.25s ease;
}

.action-icon-btn:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 0.71rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-pulse-ring {
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--brand-red);
  opacity: 0;
  pointer-events: none;
}

.cart-btn.is-animating {
  animation: cartButtonReaction 0.65s var(--ease-spring);
  border-color: var(--brand-red);
}

.cart-btn.is-animating .cart-badge {
  animation: badgePop 0.65s var(--ease-spring);
}

.cart-btn.is-animating .cart-pulse-ring {
  animation: pulseRingOut 0.7s ease-out;
}

@keyframes cartButtonReaction {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.2) rotate(-10deg); }
  45% { transform: scale(1.15) rotate(8deg); }
  70% { transform: scale(1.06) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes badgePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

@keyframes pulseRingOut {
  0% { transform: scale(0.95); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Control de alternancia de tema claro/oscuro */
.monochrome-theme-btn {
  background-color: #181a20;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

[data-theme="light"] .monochrome-theme-btn {
  background-color: #ffffff;
  color: #0f1115 !important;
  border: 1px solid rgba(15, 17, 21, 0.25);
}

.monochrome-theme-btn:hover {
  border-color: currentColor;
  color: inherit !important;
}

.theme-icon-stage {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-icon-dark,
.theme-icon-light {
  position: absolute;
  font-size: 1.25rem;
  transition: transform 0.55s var(--ease-spring), opacity 0.35s ease;
}

[data-theme="dark"] .theme-icon-dark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #ffffff;
}

[data-theme="dark"] .theme-icon-light {
  opacity: 0;
  transform: rotate(-140deg) scale(0.3);
  color: #ffffff;
}

[data-theme="light"] .theme-icon-dark {
  opacity: 0;
  transform: rotate(140deg) scale(0.3);
  color: #0f1115;
}

[data-theme="light"] .theme-icon-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #0f1115;
}

/* Componente de avatar de usuario */
.user-avatar-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  transition: transform 0.25s var(--ease-spring), border-color 0.25s ease;
}

.user-avatar-btn:not(.is-guest) {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}

.user-avatar-btn:hover {
  transform: scale(1.06);
  border-color: var(--text-secondary);
}

/* Elementos de Header Móvil (Ocultos en Desktop) */
.header-mobile-left {
  display: none;
  align-items: center;
  gap: 0.45rem;
}

.mobile-search-bar-row {
  display: none;
  position: relative;
  padding: 0.55rem 1rem 0.7rem;
  background-color: #090b0e;
  border-top: 1px solid var(--border-subtle);
}

[data-theme="light"] .mobile-search-bar-row {
  background-color: #161920;
}

.mobile-search-box {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0.22rem 0.25rem 0.22rem 0.85rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.mobile-search-input {
  flex: 1;
  height: 36px;
  font-size: 0.9rem;
  color: #111318;
  background: transparent;
}

.mobile-search-input::placeholder {
  color: #6b7280;
}

.mobile-search-submit-btn {
  width: 42px;
  height: 36px;
  border-radius: 8px;
  background-color: #0d0f13;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-autocomplete {
  left: 1rem !important;
  right: 1rem !important;
  top: calc(100% + 4px) !important;
  width: auto !important;
}

/* Menú de navegación lateral deslizante (Drawer móvil) */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(5, 6, 8, 0.68);
  backdrop-filter: blur(4px);
  z-index: 230;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(330px, 86vw);
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  z-index: 240;
  display: flex;
  flex-direction: column;
  transform: translateX(-104%);
  transition: transform 0.34s var(--ease-out-expo);
}

.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

.mobile-nav-header {
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mobile-nav-section-title {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.65rem 0.65rem 0.25rem;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.85rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  width: 100%;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-nav-link:hover {
  background-color: var(--dropdown-item-hover-bg);
  color: var(--dropdown-item-hover-text);
}

.mobile-nav-link .material-symbols-rounded {
  font-size: 1.2rem;
  color: var(--icon-neutral);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.user-avatar-initial {
  text-transform: uppercase;
}

.user-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  display: none;
}

.user-status-dot.has-notification-red {
  display: block;
  background-color: var(--brand-red, #ef4444);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45);
  animation: pulseRedDot 2s infinite ease-in-out;
}

.tab-notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand-red, #ef4444);
  display: inline-block;
  margin-left: 6px;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35);
  animation: pulseRedDot 2s infinite ease-in-out;
}

.order-live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand-red, #ef4444);
  display: inline-block;
  margin-right: 5px;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35);
  animation: pulseRedDot 2s infinite ease-in-out;
}

@keyframes pulseRedDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.85;
  }
}

/* ==========================================================================
   CONTENEDORES DE PÁGINA AMPLIOS Y DESPEJADOS
   ========================================================================== */
.main-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.75rem 2rem 4.5rem;
}

.spacious-page {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.page-block {
  scroll-margin-top: 100px;
}

.block-header {
  margin-bottom: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.block-header .section-title {
  margin-top: 0.2rem;
  margin-bottom: 0.35rem;
}

.block-header .section-subtitle {
  line-height: 1.6;
  max-width: 820px;
}

.page-top-intro {
  max-width: 820px;
}

.page-hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-top: 0.35rem;
}

.page-hero-desc {
  font-size: 0.98rem;
  color: var(--text-secondary);
  margin-top: 0.45rem;
}

.surface-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.card-helper-text {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin: 0.3rem 0 1.15rem;
}

/* ==========================================================================
   HERO CARRUSEL PROMOCIONAL
   ========================================================================== */
.hero-section {
  margin-bottom: 2.25rem;
}

.hero-carousel {
  position: relative;
  width: 100%;
  height: 490px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.carousel-progress-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.14);
  z-index: 30;
}

.carousel-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--brand-red);
}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.75s var(--ease-out-expo);
  will-change: transform;
}

.carousel-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 6s ease-out;
}

.carousel-slide.is-active .carousel-slide-img {
  transform: scale(1.08);
}

.carousel-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 11, 14, 0.12) 0%,
    rgba(10, 11, 14, 0.45) 50%,
    rgba(10, 11, 14, 0.92) 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2.75rem 3.25rem 3.1rem;
  gap: 2rem;
}

.slide-caption-left {
  max-width: 660px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.34rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.slide-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 800;
  line-height: 1.12;
  color: #ffffff;
}

.slide-description {
  font-size: 0.95rem;
  color: rgba(245, 247, 250, 0.86);
}

.slide-price-tag {
  margin-top: 0.2rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.slide-price-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

.slide-price-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
}

.slide-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 700;
  transition: transform 0.25s var(--ease-spring), background-color 0.25s ease;
}

.slide-cta-btn:hover {
  background-color: var(--brand-red-hover);
  transform: translateY(-2px);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background-color: rgba(18, 20, 26, 0.76);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s var(--ease-spring), background-color 0.25s ease;
}

.carousel-arrow-prev { left: 1.35rem; }
.carousel-arrow-next { right: 1.35rem; }

.hero-carousel:hover .carousel-arrow {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.carousel-arrow:hover {
  background-color: var(--brand-red);
}

.carousel-dots {
  position: absolute;
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: rgba(14, 16, 22, 0.72);
  backdrop-filter: blur(8px);
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s var(--ease-out-expo);
}

.hero-carousel:hover .carousel-dots {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.38);
  transition: width 0.3s var(--ease-out-expo), background-color 0.3s ease;
}

.carousel-dot.is-active {
  width: 26px;
  background-color: var(--brand-red);
}

/* ==========================================================================
   TRES PUNTOS CLAVE BAJO EL CARRUSEL (TONOS RELAJADOS)
   ========================================================================== */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  margin-bottom: 3.25rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.trust-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-left: 3px solid var(--brand-red);
  font-size: 1.45rem;
  flex-shrink: 0;
}

.trust-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
}

.trust-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ==========================================================================
   CATÁLOGO DE PRODUCTOS Y ENTRADA MANUAL DE UNIDADES MASIVAS (100, 700, etc.)
   ========================================================================== */
.bestsellers-section {
  scroll-margin-top: 90px;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin-bottom: 2.25rem;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.section-eyebrow .material-symbols-rounded {
  font-size: 1rem;
  color: var(--brand-red);
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
  font-weight: 800;
}

.section-subtitle {
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.58rem 1.05rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.category-pill:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background-color: var(--bg-elevated);
}

/* Filtro de categoría activo */
.category-pill.active {
  background-color: var(--bg-elevated);
  border-color: var(--brand-red);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--brand-red);
}

.category-pill.active .material-symbols-rounded {
  color: var(--brand-red);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease-out-expo), border-color 0.28s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.product-image-wrap {
  position: relative;
  height: 185px;
  overflow: hidden;
  background-color: #101218;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out-expo);
}

.product-card:hover .product-image {
  transform: scale(1.06);
}

.product-tag-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.28rem 0.72rem;
  border-radius: var(--radius-pill);
  background-color: rgba(20, 23, 29, 0.88);
  border-left: 3px solid var(--brand-red);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
}

.product-temp-badge {
  position: absolute;
  bottom: 0.65rem;
  right: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.24rem 0.6rem;
  border-radius: var(--radius-pill);
  background-color: rgba(14, 16, 22, 0.82);
  color: #cbd5e1;
  font-size: 0.69rem;
  font-weight: 600;
}

.product-temp-badge .material-symbols-rounded {
  font-size: 0.88rem;
  color: #94a3b8;
}

.product-body {
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.product-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  line-height: 1.28;
}

.product-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  flex: 1;
}

.product-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
}

.product-footer-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.product-price-old {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-right: 0.4rem;
}

.product-price-current {
  font-family: 'Outfit', sans-serif;
  font-size: 1.26rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Selector numérico de cantidades para compra mayorista o unitaria */
.product-bulk-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bulk-qty-box {
  display: flex;
  align-items: center;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.18rem;
}

.bulk-step-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-primary);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bulk-step-btn:hover {
  background-color: var(--bg-surface);
}

.bulk-qty-input {
  width: 58px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  -moz-appearance: textfield;
}

.bulk-qty-input::-webkit-outer-spin-button,
.bulk-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-add-product {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.58rem 0.95rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-add-product:hover {
  background-color: var(--brand-red-hover);
  transform: translateY(-1px);
}

/* ==========================================================================
   PÁGINA AMPLIA DE PERFIL (perfil.html)
   ========================================================================== */
.wide-auth-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}

.wide-auth-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.logged-profile-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 2rem 2.5rem;
  box-shadow: var(--shadow-sm);
}

.logged-profile-left {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.logged-avatar-large {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.logged-avatar-large.has-photo {
  background-color: transparent;
  border-color: rgba(224, 26, 44, 0.45);
}

.logged-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.logged-user-extra {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.logged-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.wide-map-workspace {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.wide-canvas {
  height: 500px !important;
}

.coords-readonly-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.wide-support-card {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2.25rem;
  align-items: start;
}

.support-inline-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.support-submit-row {
  margin-top: 0.4rem;
  display: flex;
  justify-content: flex-start;
}

/* ==========================================================================
   PÁGINA AMPLIA DE PASARELA DE PAGOS (pagos.html)
   ========================================================================== */
.spacious-checkout-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.25rem;
  align-items: start;
}

.card-step-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}

.step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 2px solid var(--brand-red);
  color: var(--text-primary);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Selector de domicilio registrado con atajo a gestión */
.address-select-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.address-select-row select,
#checkoutAddressSelect {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(100% - 56px);
  width: 100%;
  height: 48px;
  border-radius: var(--radius-lg) !important;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  cursor: pointer !important;
  user-select: auto !important;
  font-weight: 600;
  opacity: 1 !important;
  padding: 0 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.address-select-row select:hover,
#checkoutAddressSelect:hover {
  border-color: var(--brand-red, #e01a2c) !important;
}

.address-select-row select:focus,
#checkoutAddressSelect:focus {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 3px rgba(224, 26, 44, 0.15) !important;
}

.btn-icon-manage {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.22s var(--ease-out-expo);
  text-decoration: none;
}

.btn-icon-manage:hover {
  background-color: var(--bg-elevated);
  border-color: var(--brand-red);
  color: var(--brand-red);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-icon-manage .material-symbols-rounded {
  font-size: 1.35rem;
}

/* Contenedor del módulo cartográfico interactivo */
.checkout-map-collapsible {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.32s ease, margin 0.4s ease;
  opacity: 1;
  margin-bottom: 1.25rem;
}

.checkout-map-collapsible.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.checkout-map-collapsible-inner {
  overflow: hidden;
  min-height: 0;
}

/* Campos de dirección bloqueados en gris cuando se usa dirección guardada (solo inputs y textareas, nunca selects) */
input.modal-input:read-only,
textarea.modal-input:read-only,
input.modal-input.is-locked-field,
textarea.modal-input.is-locked-field {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-subtle) !important;
  cursor: not-allowed;
  user-select: none;
  box-shadow: none !important;
}

input.modal-input:read-only:focus,
textarea.modal-input:read-only:focus,
input.modal-input.is-locked-field:focus,
textarea.modal-input.is-locked-field:focus {
  border-color: var(--border-subtle) !important;
  box-shadow: none !important;
  outline: none !important;
}

.checkout-map-canvas {
  height: 360px !important;
  margin-bottom: 0.85rem;
}

.sticky-payment-card {
  position: sticky;
  top: 96px;
}

.checkout-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.checkout-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.checkout-item-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  flex: 1;
}

.checkout-item-img {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.checkout-summary-breakdown {
  margin: 1.35rem 0;
  padding: 1.15rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.summary-line.total-line {
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 1.15rem;
  color: var(--text-primary);
}

.summary-line.total-line strong {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
}

.btn-pay-large {
  padding: 1.05rem 1.5rem !important;
  font-size: 1rem !important;
}

/* ==========================================================================
   PANEL DE ADMINISTRACIÓN / PERSONAL (panel.html)
   ========================================================================== */
.staff-workspace {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem;
  min-height: calc(100vh - 90px);
}

.staff-layout {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 2rem;
  align-items: start;
}

.staff-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.staff-profile-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 1.35rem 1.45rem;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.staff-profile-card:hover {
  border-color: var(--text-muted);
}

.staff-profile-info {
  flex: 1;
  min-width: 0;
}

.staff-avatar-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 1.38rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff-menu-toggle-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out-expo), background-color 0.2s ease;
}

.staff-sidebar.is-expanded .staff-menu-toggle-arrow {
  transform: rotate(180deg);
}

.staff-sidebar.is-collapsed-desktop .staff-nav-card {
  display: none;
}

.staff-role-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.staff-full-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.staff-email-text {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.staff-nav-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 0.95rem;
  box-shadow: var(--shadow-sm);
}

.staff-nav-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.35rem 0.75rem 0.6rem;
}

.staff-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.staff-nav-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.staff-nav-option .material-symbols-rounded {
  font-size: 1.25rem;
  color: var(--icon-neutral);
}

/* Resaltado de opciones del menú operativo */
.staff-nav-option:hover,
.staff-nav-option.active {
  background-color: var(--dropdown-item-hover-bg);
  color: var(--dropdown-item-hover-text);
  transform: translateX(3px);
}

.staff-nav-option:hover .material-symbols-rounded,
.staff-nav-option.active .material-symbols-rounded {
  color: var(--brand-red);
}

.staff-nav-Divider {
  height: 1px;
  background-color: var(--border-subtle);
  margin: 0.65rem 0;
}

.staff-main-panel {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.staff-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.35rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.staff-eyebrow {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.staff-panel-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
}

.staff-header-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* KPIs y Gráficas del Administrador */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.15rem;
  margin-bottom: 1.85rem;
}

.kpi-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kpi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.kpi-card-top .material-symbols-rounded {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  padding: 0.45rem;
  border-radius: 12px;
}

.kpi-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
}

.kpi-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.admin-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.35rem;
}

.admin-chart-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.chart-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

/* Gráfica de Columnas Verticales (Sin techo ni barra de límite) */
.vertical-bars-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 1rem;
  height: 235px;
  padding: 1.75rem 0.5rem 0.5rem;
  margin-top: 1rem;
  border-bottom: 1px solid var(--border-strong);
}

.vbar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0.45rem;
  text-align: center;
}

.vbar-value {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.vbar-pillar {
  width: 100%;
  max-width: 58px;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
  transition: height 0.5s var(--ease-out-expo), filter 0.2s ease;
  min-height: 16px;
}

.vbar-col.is-top-line .vbar-pillar {
  background: linear-gradient(180deg, #cbd5e1 0%, #64748b 100%);
  border-top: 3px solid var(--brand-red);
}

.vbar-col:hover .vbar-pillar {
  filter: brightness(1.15);
}

.vbar-label {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Gráfica de Pastel / Dona (Medios de Pago) */
.pie-chart-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.65rem;
  margin-top: 1.25rem;
}

.pie-donut-figure {
  position: relative;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.pie-donut-hole {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}

.pie-donut-hole span {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}

.pie-donut-hole strong {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
}

.pie-legend-list {
  flex: 1;
  min-width: 195px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.42rem 0.65rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  font-size: 0.79rem;
}

.pie-legend-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.pie-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

.pie-legend-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Tarjetas de Pedidos Operativos */
.staff-orders-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.staff-order-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.45rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.staff-order-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.order-id-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
}

.order-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  padding: 0.32rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.order-status-pill .ticket-unread-dot {
  width: 8px;
  height: 8px;
  margin: 0;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.status-pendiente { background-color: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.status-en_proceso { background-color: rgba(56, 189, 248, 0.16); color: #38bdf8; }
.status-en_camino { background-color: rgba(168, 85, 247, 0.18); color: #c084fc; }
.status-entregado { background-color: rgba(34, 197, 94, 0.16); color: #4ade80; }
.status-cancelado { background-color: rgba(239, 68, 68, 0.16); color: #f87171; }

.staff-order-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.15rem;
  font-size: 0.88rem;
}

.detail-box {
  background-color: var(--bg-elevated);
  padding: 1.05rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  line-height: 1.45;
}

.detail-box-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: block;
}

.detail-box-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.order-items-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.order-item-chip {
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  font-weight: 600;
}

.staff-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.btn-confirm-order {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-pill);
  background-color: #16a34a;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
}

.btn-cancel-order {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 0.85rem;
  font-weight: 700;
}

.driver-external-nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
}

.driver-external-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.btn-gmaps-route {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-pill);
  background-color: #1a73e8;
  color: #ffffff;
  font-size: 0.83rem;
  font-weight: 700;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-gmaps-route:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-waze-route {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-pill);
  background-color: #05c8f7;
  color: #09121c;
  font-size: 0.83rem;
  font-weight: 800;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-waze-route:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Desglose secuencial de paradas de despacho */
.driver-stop-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.driver-stop-card.is-current-stop {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18);
}

.driver-stop-accordion-header {
  width: 100%;
  padding: 1.15rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background-color: var(--bg-card);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.driver-stop-accordion-header:hover {
  background-color: var(--bg-card-hover);
}

.driver-stop-header-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1;
}

.driver-stop-num-pill {
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.driver-stop-card.is-current-stop .driver-stop-num-pill {
  background-color: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #38bdf8;
}

.driver-stop-header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.driver-stop-chevron {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out-expo);
}

.driver-stop-card.is-open .driver-stop-chevron {
  transform: rotate(180deg);
}

.driver-stop-body {
  display: none;
  padding: 0 1.35rem 1.35rem;
  border-top: 1px solid var(--border-subtle);
  flex-direction: column;
  gap: 1rem;
}

.driver-stop-card.is-open .driver-stop-body {
  display: flex;
  padding-top: 1.15rem;
}

.driver-route-wrapper {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.35rem;
  margin-bottom: 1.85rem;
}

.driver-map-box {
  height: 410px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  z-index: 10;
}

.driver-route-summary {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 410px;
  overflow-y: auto;
}

.route-step-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  font-size: 0.83rem;
}

.route-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--bg-surface);
  border: 2px solid var(--brand-red);
  color: var(--text-primary);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.driver-delivery-box {
  background-color: var(--bg-elevated);
  padding: 1rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.photo-upload-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.file-label-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.delivery-photo-preview {
  max-width: 240px;
  max-height: 150px;
  border-radius: var(--radius-md);
  border: 2px solid #22c55e;
  object-fit: cover;
}

/* ==========================================================================
   ELEMENTOS DE FORMULARIO, MAPAS Y PASARELA DE PAGOS
   ========================================================================== */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.35rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  margin-bottom: 1.15rem;
}

.auth-tab {
  padding: 0.6rem;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.86rem;
}

.auth-tab.active {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.btn-google-oauth {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.82rem 1rem;
  border-radius: var(--radius-pill);
  background-color: #ffffff;
  color: #1f2937;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid #d1d5db;
}

.auth-divider {
  text-align: center;
  margin: 1rem 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.modal-input {
  padding: 0.78rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.9rem;
  width: 100%;
}

.modal-input:focus {
  border-color: var(--brand-red);
}

.btn-primary {
  padding: 0.82rem 1.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-red);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.btn-primary:hover {
  background-color: var(--brand-red-hover);
}

.btn-secondary {
  padding: 0.72rem 1.2rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn-full { width: 100%; }

.demo-roles-box {
  padding: 1rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
}

.demo-roles-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.65rem;
}

.demo-roles-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.role-chip {
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 700;
}

.role-chip:hover {
  border-color: var(--brand-red);
  color: var(--brand-red);
}

.meta-municipalities-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.muni-btn {
  padding: 0.36rem 0.78rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
}

.muni-btn:hover,
.muni-btn.active {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--brand-red);
}

.address-map-canvas {
  width: 100%;
  height: 360px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  z-index: 10;
}

.zone-live-indicator {
  margin-top: 0.85rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.86rem;
}

.zone-live-indicator.is-villavicencio {
  background-color: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.zone-live-indicator.is-meta-outside {
  background-color: rgba(245, 158, 11, 0.13);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.saved-addresses-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.saved-addr-item {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.saved-addr-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.saved-addr-eta {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-primary);
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.payment-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 0.65rem;
  border-radius: var(--radius-lg);
  background-color: var(--bg-elevated);
  border: 2px solid transparent;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s var(--ease-out-expo);
}

.payment-method-card.active,
.payment-method-card:hover {
  border-color: var(--brand-red);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.pay-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.pay-logo-bco {
  background: #ffffff;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.pay-logo-nequi {
  background: #ffffff;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.pay-logo-card {
  background: #1e293b;
  color: #38bdf8;
}

.pay-logo-cash {
  background: #14532d;
  color: #4ade80;
}

.pay-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pay-method-brand-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.pay-modal-brand-logo {
  height: 38px;
  max-width: 140px;
  object-fit: contain;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.pay-method-brand-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.pay-banking-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background-color: var(--bg-elevated);
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.qr-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}

.pay-instruction-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background-color: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.pay-instruction-note .material-symbols-rounded {
  font-size: 1.15rem;
  color: #38bdf8;
  flex-shrink: 0;
  margin-top: 1px;
}

.payment-visual-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  min-height: 205px;
}

/* ==========================================================================
   LÍNEA DE PROGRESO DE 4 PUNTOS CON ICONOS (1. Recibido Tienda -> 2. Bodega -> 3. Carro En Reparto -> 4. Check Entregado)
   ========================================================================== */
.order-timeline-4steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1.15rem 0 0.9rem;
  padding: 0.65rem 0.25rem;
}

.order-timeline-line-bg {
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 4px;
  background-color: var(--bg-elevated);
  border-radius: var(--radius-pill);
  z-index: 1;
}

.order-timeline-line-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #38bdf8 0%, #22c55e 100%);
  transition: width 0.45s var(--ease-out-expo);
}

.timeline-point {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
}

.timeline-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 2px solid var(--border-strong);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.timeline-point.is-done .timeline-icon-circle {
  background-color: #14532d;
  border-color: #22c55e;
  color: #4ade80;
}

.timeline-point.is-current .timeline-icon-circle {
  background-color: #0c4a6e;
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
}

.timeline-label-title {
  font-size: 0.77rem;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1.2;
}

.timeline-point.is-done .timeline-label-title {
  color: var(--text-primary);
}

.timeline-point.is-current .timeline-label-title {
  color: #38bdf8;
}

.timeline-label-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ==========================================================================
   GESTOR Y SELECTOR DE DIRECCIONES EN VIVO DENTRO DEL CARRITO
   ========================================================================== */
.cart-live-address-box {
  margin-bottom: 0.9rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cart-addr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.cart-addr-actions-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cart-addr-select {
  flex: 1;
  padding: 0.52rem 0.7rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 0;
}

.cart-addr-mini-btn {
  padding: 0.48rem 0.65rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.cart-addr-mini-btn:hover {
  border-color: var(--brand-red);
}

.cart-quick-addr-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-subtle);
}

.cart-quick-input {
  padding: 0.48rem 0.65rem;
  border-radius: 8px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.78rem;
  width: 100%;
}

/* ==========================================================================
   VISTA ERROR 404 Y DRAWER CARRITO
   ========================================================================== */
.error-404-view {
  min-height: calc(100vh - 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 2.5rem;
}

.error-404-card {
  max-width: 440px;
  width: 100%;
  text-align: center;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl, 22px);
  padding: 2.1rem 1.7rem 1.85rem;
  box-shadow: var(--shadow-lg);
  animation: adminInlineEditReveal 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.native-alert-404-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.95rem;
  background-color: rgba(224, 26, 44, 0.12);
  color: var(--brand-red, #e01a2c);
}

.native-alert-404-icon .material-symbols-rounded {
  font-size: 2.25rem;
}

.error-404-badge {
  display: inline-block;
  padding: 0.24rem 0.78rem;
  border-radius: var(--radius-pill);
  background-color: rgba(224, 26, 44, 0.1);
  border: 1px solid rgba(224, 26, 44, 0.22);
  color: var(--brand-red, #e01a2c);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.65rem;
}

.error-404-card h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.55rem;
}

.error-404-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.52;
  margin: 0 0 1.45rem;
}

.native-alert-404-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.native-alert-404-primary,
.native-alert-404-secondary {
  width: 100%;
  justify-content: center;
  font-weight: 700;
  padding: 0.82rem 1.2rem;
}

.error-404-icon {
  font-size: 3rem;
  color: var(--brand-red, #e01a2c);
  margin-bottom: 0.65rem;
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(5, 6, 8, 0.65);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cart-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(440px, calc(100vw - 2rem));
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: 210;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 2rem));
  transition: transform 0.38s var(--ease-out-expo);
  overflow: hidden;
}

.cart-drawer.is-open {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 1.25rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-drawer-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
}

.icon-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.15rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.cart-item-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-price {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 700;
}

.cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 700;
}

.cart-direct-qty-input {
  width: 62px;
  padding: 0.2rem 0.35rem;
  border-radius: 7px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
}

.cart-drawer-footer {
  padding: 1.25rem 1.4rem;
  border-top: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.cart-summary-row strong {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
}

.cart-summary-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.btn-checkout {
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 280;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  border-left: 4px solid var(--brand-red);
  border-top: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  font-size: 0.86rem;
  font-weight: 600;
}

.site-footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: 3rem 2rem 1.75rem;
}

.footer-container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.footer-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.footer-description {
  margin-top: 0.65rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
  max-width: 460px;
}

.db-status-pill {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.db-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22c55e;
}

.footer-links-col h4 {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.footer-links-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links-col a {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.footer-bottom {
  max-width: 1440px;
  margin: 1.4rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.load-more-container {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

.btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.85rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ==========================================================================
   OPTIMIZACIÓN PARA TELÉFONOS MÓVILES Y TABLETS (SIN OVERFLOW, CON MENÚ HAMBURGER Y BUSCADOR ESTILO CHORILLANO)
   ========================================================================== */
@media (max-width: 1080px) {
  .wide-auth-container,
  .wide-map-workspace,
  .wide-support-card,
  .spacious-checkout-layout,
  .staff-layout,
  .driver-route-wrapper,
  .trust-strip,
  .footer-container {
    grid-template-columns: 1fr;
  }

  .staff-sidebar,
  .sticky-payment-card {
    position: static;
  }

  /* En móvil/tablet el menú del panel operativo se esconde por defecto tras la flecha del perfil */
  .staff-sidebar .staff-nav-card {
    display: none;
  }

  .staff-sidebar.is-expanded .staff-nav-card {
    display: block;
    animation: fadeInDown 0.24s ease-out;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  /* Control de contención de desbordamiento horizontal */
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .header-container {
    grid-template-columns: auto 1fr auto;
    padding: 0.65rem 0.9rem;
    gap: 0.5rem;
  }

  /* Activador de menú lateral en vista móvil */
  .header-mobile-left {
    display: flex;
    grid-column: 1 / 2;
    grid-row: 1;
  }

  /* Ocultamiento de controles de escritorio en vista móvil */
  .header-nav-left,
  .desktop-search-only {
    display: none !important;
  }

  /* Alineación central de identidad de marca */
  .header-brand-center {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: center;
  }

  .header-actions-right {
    grid-column: 3 / 4;
    grid-row: 1;
    gap: 0.4rem;
  }

  /* Buscador móvil continuo bajo cabecera */
  .mobile-search-bar-row {
    display: block;
  }

  .brand-name {
    font-size: 1.26rem;
    letter-spacing: 0.08em;
  }

  .brand-tagline {
    font-size: 0.54rem;
    letter-spacing: 0.16em;
  }

  .action-icon-btn,
  .user-avatar-btn {
    width: 39px;
    height: 39px;
  }

  .main-content,
  .staff-workspace {
    padding: 1.1rem 0.95rem 3rem;
  }

  .surface-card,
  .staff-main-panel,
  .wide-auth-container,
  .wide-auth-card {
    padding: 1.25rem;
  }

  .hero-carousel {
    height: 390px;
  }

  .carousel-slide-overlay {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.4rem 1.15rem 2.5rem;
    gap: 0.9rem;
  }

  .category-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .category-pill {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .products-grid,
  .admin-charts-grid {
    grid-template-columns: 1fr;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .payment-methods-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .order-timeline-4steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  .order-timeline-line-bg {
    display: none;
  }

  .wide-canvas {
    height: 340px !important;
  }
}


/* ==========================================================================
   REFINAMIENTOS:
   1. PANEL LATERAL CON BORDES BLANCOS CONSISTENTES Y ROL EN 1 SOLA LÍNEA
   2. BARRA DE PEDIDOS SIEMPRE VERDE Y TARJETAS SEPARADAS + COLAPSABLES CON VISTA DIRECTA DE ETAPA
   3. PIN DEL USUARIO EN MAPAS CON ROJO DANILLANOS (#e01a2c)
   4. PASARELA DE PAGOS EN 3 PASOS ANIMADOS (DERECHA A IZQUIERDA) + CHECKMARK + FACTURA GRÁFICA + RETORNO EN 10S
   ========================================================================== */

/* Disposición del panel lateral de personal */
@media (min-width: 1081px) {
  .staff-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

.staff-profile-card,
.staff-profile-card:hover,
.staff-profile-card:focus,
.staff-profile-card:focus-visible,
.staff-nav-card {
  outline: none !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: var(--shadow-sm);
}

html[data-theme='dark'] .staff-profile-card,
html[data-theme='dark'] .staff-profile-card:hover,
html[data-theme='dark'] .staff-profile-card:focus,
html[data-theme='dark'] .staff-profile-card:focus-visible,
html[data-theme='dark'] .staff-nav-card {
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
}

.staff-avatar-circle,
.staff-menu-toggle-arrow {
  border: 1.5px solid #ffffff !important;
}

.staff-role-badge {
  display: inline-block;
  white-space: nowrap !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.05em !important;
  padding: 0.22rem 0.62rem !important;
  border: 1px solid #ffffff !important;
  line-height: 1.2;
}

/* Barra de progreso y tarjetas de estado de pedidos */
.order-timeline-line-fill {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%) !important;
}

.timeline-point.is-done .timeline-icon-circle,
.timeline-point.is-current .timeline-icon-circle {
  background-color: rgba(22, 163, 74, 0.18) !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
}

.timeline-point.is-current .timeline-icon-circle {
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22) !important;
}

.timeline-point.is-done .timeline-label-title {
  color: var(--text-primary) !important;
}

.timeline-point.is-current .timeline-label-title {
  color: #22c55e !important;
}

.customer-orders-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.customer-orders-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.customer-order-accordion {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.customer-order-accordion:hover {
  border-color: rgba(34, 197, 94, 0.45);
}

.customer-order-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--bg-surface);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.customer-order-header:hover {
  background-color: var(--bg-elevated);
}

.customer-order-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 220px;
  flex: 1;
}

.customer-order-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.customer-order-meta-line {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Vista directa cuando está colapsado: muestra exactamente en qué parte del pedido va + mini barra verde */
.customer-order-direct-stage {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.direct-stage-info-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.direct-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.36rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.42);
  color: #22c55e;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.direct-stage-badge.is-cancelled {
  background-color: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.42);
  color: #ef4444;
}

.direct-stage-mini-bar-bg {
  width: 145px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  overflow: hidden;
}

.direct-stage-mini-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  transition: width 0.35s ease;
}

.customer-order-chevron {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.28s var(--ease-out-expo);
}

.customer-order-accordion.is-expanded .customer-order-chevron {
  transform: rotate(180deg);
}

.history-delivery-date {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.36rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.history-delivery-date .material-symbols-rounded {
  color: var(--text-muted);
}

.customer-order-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s ease;
  border-top: 1px solid transparent;
  background-color: var(--bg-card);
}

.customer-order-accordion.is-expanded .customer-order-body {
  grid-template-rows: 1fr;
  border-top-color: var(--border-subtle);
}

.customer-order-body-content {
  overflow: hidden;
  min-height: 0;
  padding: 0 1.5rem;
  transition: padding 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.28s ease;
  opacity: 0;
}

.customer-order-accordion.is-expanded .customer-order-body-content {
  padding: 1.15rem 1.65rem 1.65rem;
  opacity: 1;
}

/* ==========================================================================
   FACTURA EMULADA EN PAPEL TÉRMICO (DIENTES DE SIERRA ARRIBA Y ABAJO - POS)
   Exclusiva para el Historial de Compras (Toma el mismo ancho de la barra)
   ========================================================================== */
:root {
  --thermal-paper-bg: #eceff2;
  --thermal-ink: #111827;
  --thermal-border: #d5dae1;
}

[data-theme="dark"] {
  --thermal-paper-bg: #1c222e;
  --thermal-ink: #f1f5f9;
  --thermal-border: #334155;
}

.emulated-thermal-receipt {
  width: 100%;
  max-width: 100%;
  margin: 1.35rem 0 1.15rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.09));
  font-family: 'Courier New', Courier, 'SFMono-Regular', monospace;
  color: var(--thermal-ink);
  transition: all 0.25s ease;
}

.thermal-sawtooth {
  width: 100%;
  height: 9px;
  overflow: hidden;
  line-height: 0;
  display: block;
}

.thermal-sawtooth svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--thermal-paper-bg);
}

.thermal-receipt-body {
  background-color: var(--thermal-paper-bg);
  color: var(--thermal-ink);
  padding: 1.25rem 1.75rem 1.5rem;
  border-left: 1px solid var(--thermal-border);
  border-right: 1px solid var(--thermal-border);
}

.thermal-header-center {
  text-align: center;
}

.thermal-store-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  margin-bottom: 2px;
}

.thermal-store-sub {
  font-size: 0.74rem;
  opacity: 0.85;
  line-height: 1.38;
}

.thermal-divider-dashed {
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.82rem;
  opacity: 0.5;
  text-align: center;
  margin: 0.65rem 0;
  letter-spacing: 2px;
  user-select: none;
}

.thermal-divider-dotted {
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.82rem;
  opacity: 0.45;
  text-align: center;
  margin: 0.45rem 0;
  letter-spacing: 2px;
  user-select: none;
}

.thermal-meta-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.thermal-meta-col.thermal-text-right {
  text-align: right;
}

.thermal-customer-box {
  font-size: 0.82rem;
  line-height: 1.55;
}

.thermal-items-header {
  display: grid;
  grid-template-columns: 48px 1fr 100px 105px;
  font-size: 0.77rem;
  font-weight: 800;
  opacity: 0.9;
  text-transform: uppercase;
}

.thermal-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.thermal-item-row {
  display: grid;
  grid-template-columns: 48px 1fr 100px 105px;
  align-items: baseline;
  font-size: 0.82rem;
  line-height: 1.35;
}

.thermal-item-row .col-unit,
.thermal-items-header .col-unit {
  text-align: right;
  padding-right: 0.75rem;
}

.thermal-item-row .col-total,
.thermal-items-header .col-total {
  text-align: right;
}

.thermal-totals-table {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  max-width: 340px;
  margin-left: auto;
}

.thermal-total-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.thermal-total-line.thermal-big-total {
  font-size: 1.05rem;
  font-weight: 800;
  border-top: 1px dashed var(--thermal-border);
  padding-top: 0.45rem;
  margin-top: 0.25rem;
}

.thermal-barcode-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 0.85rem;
  gap: 0.45rem;
}

.thermal-simulated-barcode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 40px;
  width: 240px;
}

.thermal-simulated-barcode span {
  display: inline-block;
  height: 100%;
  background-color: var(--thermal-ink);
}

.thermal-simulated-barcode span:nth-child(odd) { width: 2px; }
.thermal-simulated-barcode span:nth-child(even) { width: 1.5px; }
.thermal-simulated-barcode span:nth-child(3n) { width: 3.5px; }
.thermal-simulated-barcode span:nth-child(4n) { width: 1px; }
.thermal-simulated-barcode span:nth-child(5n) { width: 4px; }

.thermal-cufe-code {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.85;
  word-break: break-all;
}

.thermal-resolution-text {
  font-size: 0.68rem;
  opacity: 0.75;
  line-height: 1.45;
  text-transform: uppercase;
}

/* Marcador de geolocalización personalizado con identidad corporativa */
.danillanos-red-pin-icon {
  background: transparent;
  border: none;
}

.danillanos-red-pin-marker {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 0;
  background: #e01a2c;
  border: 3px solid #ffffff;
  transform: rotate(-45deg);
  box-shadow: 0 8px 18px rgba(224, 26, 44, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.danillanos-red-pin-inner {
  transform: rotate(45deg);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #e01a2c;
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.danillanos-red-pin-pulse {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  border: 2px solid rgba(224, 26, 44, 0.65);
  animation: redPinPulse 1.9s infinite ease-out;
  pointer-events: none;
}

@keyframes redPinPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

.danillanos-hq-pin-marker {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background-color: #111318;
  border: 2px solid #ffffff;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

/* Asistente por pasos (Wizard) para pasarela de pagos */
.checkout-wizard-container {
  width: 100%;
  max-width: 980px;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-sizing: border-box;
}

.checkout-wizard-header-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.5rem 2rem;
}

.checkout-wizard-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.checkout-wizard-line-bg {
  position: absolute;
  top: 25px;
  left: 16.6%;
  right: 16.6%;
  height: 5px;
  background-color: var(--bg-elevated);
  border-radius: var(--radius-pill);
  z-index: 1;
}

.checkout-wizard-line-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  transition: width 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.wizard-step-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.42rem;
  background: transparent;
  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;
}

.step-text-mobile {
  display: none;
}

.wizard-step-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 2px solid var(--border-strong);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.32s ease;
  flex-shrink: 0;
}

.wizard-step-node.is-done .wizard-step-icon,
.wizard-step-node.is-current .wizard-step-icon {
  background-color: rgba(22, 163, 74, 0.18);
  border-color: #22c55e;
  color: #22c55e;
}

.wizard-step-node.is-current .wizard-step-icon {
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.2);
}

.wizard-step-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-muted);
  max-width: 100%;
  word-break: break-word;
}

.wizard-step-node.is-done .wizard-step-title {
  color: var(--text-primary);
}

.wizard-step-node.is-current .wizard-step-title {
  color: #22c55e;
}

.wizard-step-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Contenedor deslizante para transición de fases del checkout */
.checkout-wizard-viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-sizing: border-box;
}

.checkout-wizard-track {
  display: flex;
  width: 400%;
  max-width: 400%;
  min-width: 400%;
  align-items: flex-start;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}

.checkout-wizard-slide {
  width: 25%;
  max-width: 25%;
  min-width: 0;
  flex: 0 0 25%;
  padding: 0.15rem;
  box-sizing: border-box;
  overflow: hidden;
}

.wizard-step-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 2.1rem;
}

.wizard-step-actions {
  margin-top: 1.65rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wizard-step2-address-pill {
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.84rem;
}

/* Vista de confirmación final con animación vectorial y factura digital */
.invoice-success-hero {
  text-align: center;
  margin-bottom: 1.5rem;
}

.animated-checkmark-circle {
  width: 84px;
  height: 84px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.08);
}

.animated-checkmark-svg {
  width: 58px;
  height: 58px;
}

.animated-checkmark-ring {
  stroke: #22c55e;
  stroke-width: 3.5;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
}

.animated-checkmark-check {
  stroke: #22c55e;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}

.animated-checkmark-circle.is-animating .animated-checkmark-ring {
  animation: strokeDrawRing 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.animated-checkmark-circle.is-animating .animated-checkmark-check {
  animation: strokeDrawCheck 0.45s cubic-bezier(0.65, 0, 0.45, 1) 0.45s forwards;
}

@keyframes strokeDrawRing {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes strokeDrawCheck {
  100% {
    stroke-dashoffset: 0;
  }
}

.invoice-success-pill {
  display: inline-block;
  padding: 0.28rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}

.invoice-success-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
}

.invoice-success-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.invoice-redirect-banner {
  margin-bottom: 1.65rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background-color: var(--bg-elevated);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.invoice-redirect-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: 0.86rem;
  margin-bottom: 0.65rem;
}

.invoice-redirect-progress-bg {
  width: 100%;
  height: 7px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-card);
  overflow: hidden;
}

.invoice-redirect-progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  transition: width 1s linear;
}

/* Representación gráfica de la factura electrónica emitida */
#danillanosVisualInvoice.danillanos-visual-invoice,
#danillanosVisualInvoice {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  max-width: 680px;
  margin: 0 auto;
}

.danillanos-visual-invoice {
  background-color: #ffffff;
  color: #0f172a;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  max-width: 760px;
  margin: 0 auto;
}

.invoice-top-ribbon {
  background: linear-gradient(135deg, #111318 0%, #1e232e 100%);
  color: #ffffff;
  padding: 1.65rem 2rem;
  border-bottom: 4px solid #e01a2c;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.invoice-brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.invoice-brand-sub {
  font-size: 0.75rem;
  color: #cbd5e1;
  margin-top: 2px;
}

.invoice-number-box {
  text-align: right;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.invoice-number-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  display: block;
}

.invoice-number-val {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #4ade80;
}

.invoice-body-pad {
  padding: 1.75rem 2rem;
}

.invoice-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px dashed #cbd5e1;
}

.invoice-meta-box {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: 0.82rem;
  color: #334155;
}

.invoice-meta-box strong {
  color: #0f172a;
}

.invoice-meta-heading {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 0.35rem;
  display: block;
}

.invoice-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  font-size: 0.84rem;
}

.invoice-items-table th {
  text-align: left;
  padding: 0.65rem 0.75rem;
  background-color: #f1f5f9;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.invoice-items-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
}

.invoice-totals-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: 14px;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
}

.invoice-total-big {
  font-family: 'Outfit', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: #0f172a;
}

.invoice-barcode-footer {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 2px dashed #cbd5e1;
  text-align: center;
  color: #64748b;
  font-size: 0.76rem;
}

@media (max-width: 768px) {
  /* Contenedor del Wizard de Pagos en Móvil */
  .checkout-wizard-container {
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .checkout-wizard-header-card {
    padding: 0.85rem 0.65rem !important;
    border-radius: var(--radius-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .checkout-wizard-steps {
    gap: 0.2rem !important;
    width: 100% !important;
  }

  .checkout-wizard-line-bg {
    top: 19px !important;
    left: 14% !important;
    right: 14% !important;
    height: 3px !important;
  }

  .wizard-step-node {
    gap: 0.28rem !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .wizard-step-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .wizard-step-icon .material-symbols-rounded {
    font-size: 1.15rem !important;
  }

  .wizard-step-title {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    text-align: center;
    max-width: 100%;
    letter-spacing: -0.01em;
  }

  .step-text-desktop {
    display: none !important;
  }

  .step-text-mobile {
    display: inline !important;
    font-weight: 800 !important;
    font-size: 0.74rem !important;
  }

  .wizard-step-sub {
    display: none !important;
  }

  .checkout-wizard-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .checkout-wizard-track {
    width: 400% !important;
    max-width: 400% !important;
    min-width: 400% !important;
    box-sizing: border-box !important;
  }

  .checkout-wizard-slide {
    width: 25% !important;
    max-width: 25% !important;
    min-width: 0 !important;
    flex: 0 0 25% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .wizard-step-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .card-step-header {
    gap: 0.65rem !important;
    margin-bottom: 1rem !important;
  }

  .card-step-header > div {
    min-width: 0 !important;
    flex: 1 !important;
  }

  .step-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
  }

  .card-step-header h3 {
    font-size: 1.12rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.25 !important;
  }

  .card-step-header .card-helper-text {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }

  .address-select-row {
    gap: 0.45rem !important;
  }

  .address-select-row select,
  #checkoutAddressSelect {
    max-width: calc(100% - 50px) !important;
    font-size: 0.8rem !important;
    padding: 0 0.6rem !important;
    height: 46px !important;
  }

  .btn-icon-manage {
    width: 44px !important;
    height: 46px !important;
  }

  .checkout-map-canvas {
    height: 250px !important;
  }

  .zone-live-indicator {
    padding: 0.75rem 0.85rem !important;
    gap: 0.6rem !important;
    font-size: 0.78rem !important;
  }

  .zone-live-indicator .material-symbols-rounded {
    font-size: 1.3rem !important;
  }

  .zone-live-indicator > div {
    min-width: 0 !important;
    flex: 1 !important;
  }

  .zone-live-indicator strong {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  .zone-live-indicator p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    margin-top: 0.15rem !important;
  }

  .wizard-step-actions {
    flex-direction: column-reverse !important;
    gap: 0.65rem !important;
    margin-top: 1.35rem !important;
    padding-top: 1rem !important;
    width: 100% !important;
  }

  .wizard-step-actions .btn-primary,
  .wizard-step-actions .btn-secondary,
  .wizard-step-actions button,
  .wizard-step-actions a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.86rem !important;
    box-sizing: border-box !important;
  }

  /* Paso 2: Resumen del Pedido */
  .wizard-step2-address-pill {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
    padding: 0.75rem 0.85rem !important;
    font-size: 0.8rem !important;
  }

  .wizard-step2-address-pill .cart-addr-mini-btn {
    align-self: flex-start !important;
  }

  .checkout-item-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 0.8rem 0.85rem !important;
  }

  .checkout-item-left {
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .checkout-item-img {
    width: 48px !important;
    height: 48px !important;
  }

  .checkout-item-row .bulk-qty-box {
    align-self: flex-end !important;
  }

  .checkout-summary-breakdown {
    margin: 1.15rem 0 !important;
    padding: 0.85rem !important;
  }

  .summary-line {
    font-size: 0.82rem !important;
  }

  .summary-line.total-line {
    font-size: 1.05rem !important;
  }

  /* Paso 3: Métodos de Pago */
  .payment-methods-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
  }

  .payment-method-card {
    padding: 0.75rem 0.45rem !important;
    gap: 0.45rem !important;
    font-size: 0.75rem !important;
  }

  .pay-logo {
    width: 38px !important;
    height: 38px !important;
  }

  .payment-visual-box {
    padding: 1rem 0.85rem !important;
  }

  /* Paso 4: Factura Gráfica y Redirección */
  .danillanos-visual-invoice {
    border-radius: 14px !important;
  }

  .invoice-top-ribbon {
    padding: 1.1rem 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .invoice-brand-title {
    font-size: 1.35rem !important;
  }

  .invoice-number-box {
    width: 100% !important;
    text-align: left !important;
    padding: 0.5rem 0.75rem !important;
  }

  .invoice-body-pad {
    padding: 1rem 0.85rem !important;
  }

  .invoice-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .invoice-items-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .invoice-totals-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  .invoice-redirect-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  .invoice-redirect-top a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .customer-order-direct-stage {
    width: 100%;
    justify-content: space-between;
  }

  .direct-stage-info-box {
    align-items: flex-start;
  }
}


/* ==========================================================================
   ACTUALIZACIÓN INTEGRAL DE INTERFAZ:
   1. ELIMINAR NOTIFICACIONES LATERALES FLOTANTES (.toast-container)
   2. PANELES LATERAL Y PRINCIPAL FLUIDOS CON EL FONDO + EXPANSIÓN 100% EN ESCRITORIO
   3. PUNTOS CLAVE DE PROGRESO CON FONDO 100% SÓLIDO E ICONO BLANCO (LA BARRA NO ATRAVIESA EL ICONO)
   4. VENTANAS SEPARADAS EN PERFIL (PEDIDOS, DIRECCIONES/EMPRESA, HISTORIAL, SOPORTE CON MINICHAT)
   5. ADMIN: GESTIÓN DE CATÁLOGO (CREAR, EDITAR, ELIMINAR) Y ROLES/ESTADO DE EMPLEADOS
   6. ENTREGADOR MINIMALISTA ESTILO RAPPI VERTICAL (PROGRESO + MAPA + PUNTOS CONECTADOS DE ARRIBA A ABAJO)
   7. CONTRASTE EN MODO OSCURO Y ADAPTACIÓN MÓVIL COMPLETA
   ========================================================================== */

/* Ajustes de visibilidad de componentes superpuestos */
.toast-container,
.toast-item {
  display: none !important;
}

/* 2. Paneles fluidos con el fondo (sin bordes blancos/negros contrastantes) y expansión en computador */
.staff-profile-card,
.staff-profile-card:hover,
.staff-profile-card:focus,
.staff-profile-card:focus-visible,
.staff-nav-card,
.staff-main-panel {
  outline: none !important;
  border: 1px solid var(--border-subtle) !important;
  background-color: var(--bg-surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

html[data-theme='dark'] .staff-profile-card,
html[data-theme='dark'] .staff-profile-card:hover,
html[data-theme='dark'] .staff-profile-card:focus,
html[data-theme='dark'] .staff-profile-card:focus-visible,
html[data-theme='dark'] .staff-nav-card,
html[data-theme='dark'] .staff-main-panel {
  border: 1px solid var(--border-subtle) !important;
}

.staff-avatar-circle,
.staff-menu-toggle-arrow,
.staff-role-badge {
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

/* En computador, al cerrar Opciones Directas el panel grande se expande a todo el ancho y el perfil queda arriba */
.staff-layout {
  transition: grid-template-columns 0.3s ease;
}

.staff-layout.is-desktop-expanded {
  grid-template-columns: 1fr !important;
  gap: 1.25rem;
}

.staff-layout.is-desktop-expanded .staff-sidebar {
  position: static;
  width: 100%;
}

.staff-layout.is-desktop-expanded .staff-profile-card {
  width: 100%;
  padding: 1rem 1.5rem;
}

.staff-layout.is-desktop-expanded .staff-nav-card {
  display: none !important;
}

/* 3. Puntos clave de las barras de progreso con FONDO 100% SÓLIDO e icono contrastado para que la barra verde NO los atraviese */
.timeline-icon-circle,
.wizard-step-icon {
  position: relative;
  z-index: 3;
  background-color: var(--bg-surface) !important;
  border: 2px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] .timeline-icon-circle,
html[data-theme='dark'] .wizard-step-icon {
  background-color: #181c24 !important;
  border-color: #2d3545 !important;
  color: #9ca5b4 !important;
}

html[data-theme='light'] .timeline-icon-circle,
html[data-theme='light'] .wizard-step-icon {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

.timeline-point.is-done .timeline-icon-circle,
.timeline-point.is-current .timeline-icon-circle,
.wizard-step-node.is-done .wizard-step-icon,
.wizard-step-node.is-current .wizard-step-icon {
  background-color: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.timeline-point.is-current .timeline-icon-circle,
.wizard-step-node.is-current .wizard-step-icon {
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25) !important;
}

/* Pestañas de navegación de cuenta con indicador deslizante */
.customer-profile-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 0.55rem;
  overflow: hidden;
}

.customer-tab-slider {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius-lg, 14px);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
  will-change: transform, width, height;
}

.customer-tab-btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.2s ease;
}

.customer-tab-btn:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-primary);
}

[data-theme="light"] .customer-tab-btn:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: #000000;
}

.customer-tab-btn.active {
  color: var(--text-primary);
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.customer-tab-btn .material-symbols-rounded {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.customer-tab-btn.active .material-symbols-rounded {
  color: var(--brand-red);
  transform: scale(1.08);
}

.customer-tab-count {
  padding: 0.14rem 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 800;
  transition: background-color 0.2s ease;
}

.company-summary-card {
  padding: 1.45rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.company-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
}

.company-card-header-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

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

.edit-profile-dialog {
  max-width: 540px;
  width: 100%;
}

.my-orders-list {
  margin-top: 1rem;
}

.orders-filter-toolbar {
  margin-bottom: 2rem;
}

/* Módulo interactivo de mensajería para soporte técnico */
.support-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 1.5rem;
  align-items: start;
}

.customer-tickets-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.85rem;
}

.ticket-minichat-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ticket-minichat-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.minichat-messages-box {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.minichat-bubble {
  max-width: 86%;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  font-size: 0.83rem;
  line-height: 1.4;
}

.minichat-bubble.is-cliente {
  align-self: flex-end;
  background-color: rgba(224, 26, 44, 0.16);
  border: 1px solid rgba(224, 26, 44, 0.35);
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
}

.minichat-bubble.is-soporte {
  align-self: flex-start;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.minichat-bubble-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 2px;
  font-weight: 700;
}

.minichat-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.minichat-input-row .modal-input {
  flex: 1;
  padding: 0.62rem 0.9rem;
  font-size: 0.84rem;
}

/* Formularios administrativos para inventario y personal */
.admin-catalog-toolbar {
  margin-bottom: 1.15rem;
}

.admin-catalog-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.admin-catalog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.admin-catalog-row-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 220px;
  flex: 1;
}

.admin-catalog-thumb {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.admin-catalog-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-user-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.admin-user-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.driver-assign-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  margin-top: 0.35rem;
}

.driver-assign-select {
  padding: 0.52rem 0.85rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 700;
}

/* Vista de entregador con lista vertical de paradas */
.driver-rappi-progress-card {
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  margin-bottom: 1.15rem;
}

.driver-rappi-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.driver-rappi-bar-bg {
  width: 100%;
  height: 10px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  overflow: hidden;
}

.driver-rappi-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  transition: width 0.4s ease;
}

.driver-minimal-map-card {
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.driver-minimal-map-card .driver-map-box {
  height: 310px;
  border-radius: var(--radius-md);
  margin-bottom: 0.85rem;
}

.driver-minimal-map-card .driver-external-nav-bar {
  margin-bottom: 0;
  padding: 0.75rem 0.95rem;
}

.btn-gmaps-official {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 800;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.btn-gmaps-official:hover {
  border-color: #22c55e;
  transform: translateY(-1px);
}

/* Guía vertical de hitos para la ruta de entrega */
.driver-vertical-stops-timeline {
  display: flex;
  flex-direction: column;
}

.driver-vstop-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.85rem;
  align-items: stretch;
}

.driver-vstop-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.driver-vstop-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bg-surface);
  border: 2.5px solid var(--text-muted);
  margin-top: 1.1rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.driver-vstop-item.is-active-stop .driver-vstop-dot {
  background-color: #16a34a;
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
}

.driver-vstop-line {
  width: 2px;
  flex: 1;
  background-color: var(--border-strong);
  margin: 4px 0;
}

.driver-vstop-item:last-child .driver-vstop-line {
  display: none;
}

.driver-vstop-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 0.9rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.driver-vstop-item.is-active-stop .driver-vstop-card {
  border-color: rgba(34, 197, 94, 0.45);
}

.driver-vstop-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.driver-vstop-header:hover {
  background-color: var(--bg-elevated);
}

.driver-vstop-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-primary);
}

.driver-vstop-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.driver-vstop-price {
  font-family: 'Outfit', sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.driver-vstop-body {
  display: none;
  padding: 0.85rem 1.25rem 1.2rem;
  border-top: 1px solid var(--border-subtle);
  background-color: var(--bg-surface);
}

.driver-vstop-item.is-open .driver-vstop-body {
  display: block;
}

/* Ajustes de legibilidad y contraste para temas oscuros */
html[data-theme='dark'] select.modal-input option,
html[data-theme='dark'] .cart-addr-select option,
html[data-theme='dark'] .driver-assign-select option {
  background-color: #181c24;
  color: #f3f5f8;
}

html[data-theme='dark'] .danillanos-visual-invoice {
  background-color: #161920;
  border-color: #2b3242;
  color: #f3f5f8;
}

html[data-theme='dark'] .invoice-meta-box,
html[data-theme='dark'] .invoice-totals-row {
  background-color: #1d222c;
  border-color: #2b3242;
  color: #cbd5e1;
}

html[data-theme='dark'] .invoice-meta-box strong,
html[data-theme='dark'] .invoice-total-big {
  color: #f8fafc;
}

html[data-theme='dark'] .invoice-items-table th {
  background-color: #202632;
  color: #cbd5e1;
}

html[data-theme='dark'] .invoice-items-table td {
  border-bottom-color: #2b3242;
  color: #e2e8f0;
}

@media (max-width: 900px) {
  .customer-profile-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .support-workspace-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .customer-profile-tabs {
    grid-template-columns: 1fr;
  }

  .admin-catalog-row,
  .admin-user-card,
  .driver-vstop-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .wizard-step-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wizard-step-actions .btn-primary,
  .wizard-step-actions .btn-secondary {
    width: 100%;
  }

  .edit-profile-dialog {
    padding: 1.35rem 1.25rem;
    border-radius: var(--radius-xl);
  }

  .modal-actions-row {
    flex-direction: column-reverse;
  }

  .modal-actions-row button {
    width: 100%;
  }
}


/* ==========================================================================
   CORRECCIONES VISUALES Y FUNCIONALES ADICIONALES:
   1. BOTÓN ACTUALIZAR (.btn-refresh-staff / .btn-outline-sm) ESTILIZADO Y CLARO EN MODO OSCURO
   2. CERO TEXTO NEGRO EN FONDO NEGRO (.customer-order-header, .order-id-badge, botones)
   3. FOTO DE PERFIL CIRCULAR SIN APLASTARSE EN MÓVIL (flex-shrink: 0 + aspect-ratio: 1/1)
   4. ADAPTACIÓN MÓVIL ESTRICTA DEL PANEL OPERATIVO Y PERFIL (SIN CORTES NI OVERFLOW)
   5. HISTORIAL DE PEDIDOS Y FACTURAS CON FILTROS Y BUSCADOR PARA TODOS LOS ROLES
   6. CANCELACIÓN DE PEDIDO DEL CLIENTE ANTES DE ENVÍO + VISOR DE FACTURA EN MODAL
   ========================================================================== */

/* Estilos para botón de refresco de datos */
.btn-refresh-staff,
.btn-outline-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.62rem 1.2rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary) !important;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

html[data-theme='dark'] .btn-refresh-staff,
html[data-theme='dark'] .btn-outline-sm {
  background-color: #232834;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8fafc !important;
}

html[data-theme='light'] .btn-refresh-staff,
html[data-theme='light'] .btn-outline-sm {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a !important;
}

.btn-refresh-staff:hover,
.btn-outline-sm:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--brand-red) !important;
  transform: translateY(-1px);
}

.btn-refresh-staff .material-symbols-rounded,
.btn-outline-sm .material-symbols-rounded {
  font-size: 1.12rem;
  color: var(--brand-red);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-refresh-staff:hover .material-symbols-rounded,
.btn-outline-sm:hover .material-symbols-rounded {
  transform: rotate(180deg);
}

/* 2. Garantía de contraste: ningún encabezado de pedido ni botón con texto negro sobre fondo negro */
.customer-order-header,
.customer-order-title-row,
.order-id-badge,
.driver-vstop-header,
.driver-vstop-title,
.driver-vstop-price,
.staff-order-top,
.staff-order-top strong,
.wizard-step-node {
  color: var(--text-primary) !important;
}

.invoice-number-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

html[data-theme='dark'] .invoice-barcode-code {
  color: #f1f5f9 !important;
}

/* Normalización de relación de aspecto para fotografía de perfil */
.logged-avatar-large {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1;
}

.staff-avatar-circle {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1;
}

.user-avatar-btn,
.action-icon-btn {
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1;
}

.logged-profile-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  flex: 1;
}

.logged-profile-text-box {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

/* Barra de herramientas para filtrado de registros */
.role-history-block {
  margin-top: 2.25rem;
  padding-top: 1.85rem;
  border-top: 1px solid var(--border-subtle);
}

.role-history-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.role-history-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--text-primary);
}

.orders-filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  margin-bottom: 1.2rem;
}

.orders-filter-toolbar.compact-filter-toolbar {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.filter-search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
}

.filter-search-box .material-symbols-rounded {
  position: absolute;
  left: 0.9rem;
  font-size: 1.15rem;
  color: var(--text-muted);
  pointer-events: none;
}

.filter-search-box .modal-input {
  padding-left: 2.65rem;
  background-color: var(--bg-surface);
}

.filter-selects-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 0.65rem;
  width: 100%;
}

.filter-results-meta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* 5. Acciones del Cliente en Pedidos en Progreso (Cancelar antes de envío, Contactar a Soporte, Ver Factura) */
.customer-order-actions-bar {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.customer-order-actions-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.cust-inline-cancel-box {
  margin-top: 0.9rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  border: 1px solid rgba(239, 68, 68, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* ==========================================================================
   MODALES FLOTANTES GLOBALES (EDICIÓN DE PERFIL, DATOS COMERCIALES)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background-color: rgba(6, 8, 12, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
  animation: fadeInModalBackdrop 0.22s ease-out;
}

@keyframes fadeInModalBackdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-card,
.password-modal-dialog,
.edit-profile-dialog,
.invoice-modal-dialog {
  border-radius: 28px !important;
  overflow: hidden;
}

.modal-card {
  width: min(540px, 100%);
  max-height: 92vh;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 28px !important;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin: auto;
  animation: scaleUpModalCard 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleUpModalCard {
  from {
    transform: scale(0.93) translateY(12px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.edit-profile-dialog {
  max-width: 520px;
  width: 100%;
  padding: 1.85rem 2.15rem;
  position: relative;
  box-sizing: border-box;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.modal-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
}

.modal-title-wrap .modal-title-icon {
  font-size: 1.85rem;
  color: var(--brand-red);
  margin-top: 2px;
  flex-shrink: 0;
}

.modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.modal-subtitle {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

.modal-header .icon-close-btn {
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}

.modal-header .icon-close-btn:hover {
  background-color: var(--bg-card);
  color: var(--brand-red);
}

.modal-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Ventana modal de visualización de comprobante */
.invoice-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 320;
  background-color: rgba(6, 8, 12, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.invoice-modal-dialog {
  width: min(820px, 100%);
  max-height: 90vh;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.invoice-modal-top {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bg-card);
}

.invoice-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
}

/* 7. Adaptación Móvil y Tablet Completa (Panel Operativo, Perfil, Historiales y Tarjetas) */
.staff-layout,
.staff-main-panel,
.staff-sidebar,
.staff-view-section {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1080px) {
  .staff-layout,
  .staff-layout.is-desktop-expanded {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.15rem;
  }

  .staff-sidebar {
    position: static !important;
    width: 100%;
  }

  .staff-sidebar .staff-nav-card {
    display: none;
  }

  .staff-sidebar.is-expanded .staff-nav-card {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .staff-workspace {
    padding: 0.9rem 0.75rem 2.5rem !important;
  }

  .staff-main-panel {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg);
  }

  .staff-panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .staff-panel-header h2 {
    font-size: 1.32rem;
    line-height: 1.22;
  }

  .admin-kpi-grid,
  .admin-charts-grid,
  .filter-selects-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .logged-profile-banner {
    padding: 1.25rem 1.15rem;
    gap: 1rem;
  }

  .logged-avatar-large {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    font-size: 1.55rem;
  }

  .logged-profile-left {
    gap: 0.9rem;
    width: 100%;
  }

  .logged-profile-left .page-hero-title {
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .logged-profile-actions {
    width: 100%;
  }

  .logged-profile-actions .btn-primary,
  .logged-profile-actions .btn-secondary {
    flex: 1;
    min-width: 135px;
  }

  .customer-order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
  }

  .customer-order-header-left {
    min-width: 0;
    width: 100%;
  }

  .customer-order-direct-stage {
    width: 100%;
    justify-content: space-between;
  }

  .customer-order-body {
    padding: 0;
  }

  .customer-order-body-content {
    padding: 0 1rem;
  }

  .customer-order-accordion.is-expanded .customer-order-body-content {
    padding: 0.75rem 1rem 1.25rem;
  }

  .customer-order-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .customer-order-actions-btns {
    width: 100%;
  }

  .customer-order-actions-btns button {
    flex: 1;
  }
}

/* ==========================================================================
   ANIMACIÓN DESLIZANTE DE AUTENTICACIÓN Y OPTIMIZACIÓN MÓVIL
   ========================================================================== */

/* Transición horizontal para pestañas de autenticación */
.auth-tabs {
  position: relative;
  overflow: hidden;
}

.auth-tab-slider {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0.35rem;
  width: calc(50% - 0.55rem);
  border-radius: var(--radius-pill);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transform: translate3d(0%, 0, 0);
  transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
  pointer-events: none;
}

.auth-tabs.is-register-mode .auth-tab-slider {
  transform: translate3d(calc(100% + 0.4rem), 0, 0);
}

.auth-tabs .auth-tab {
  position: relative;
  z-index: 2;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: color 0.3s ease;
}

.auth-forms-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: height 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-forms-track {
  display: flex;
  width: 200%;
  align-items: flex-start;
  transform: translate3d(0%, 0, 0);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.wide-auth-card.is-register-mode .auth-forms-track {
  transform: translate3d(-50%, 0, 0);
}

.auth-form-panel {
  width: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0.1rem 0.15rem;
  opacity: 0.35;
  transform: scale(0.97);
  transition:
    opacity 0.36s ease,
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-form-panel.is-active {
  opacity: 1;
  transform: scale(1);
}

.auth-inline-feedback {
  background-color: rgba(224, 26, 44, 0.1);
  color: var(--brand-red, #e01a2c);
  border: 1px solid rgba(224, 26, 44, 0.28);
  border-radius: 12px;
  padding: 0.65rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.35rem;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.4;
  box-sizing: border-box;
  animation: fadeInAuthFeedback 0.2s ease-out;
}

@keyframes fadeInAuthFeedback {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optimización para dispositivos móviles de alta densidad (360px - 430px) */
@media (max-width: 768px) {
  /* Encabezado compacto en dispositivos móviles */
  .header-mobile-left .mobile-quick-profile-btn {
    display: none !important;
  }

  .header-container {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding: 0.5rem 0.65rem !important;
    gap: 0.35rem !important;
    align-items: center !important;
  }

  .brand-link {
    padding: 0.1rem 0.2rem !important;
    gap: 0.3rem !important;
    max-width: 100%;
  }

  .brand-name {
    font-size: 1.1rem !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.05 !important;
  }

  .brand-name::after {
    width: 6px !important;
    height: 6px !important;
    margin-left: 3px !important;
    flex-shrink: 0 !important;
  }

  .brand-tagline {
    font-size: 0.47rem !important;
    letter-spacing: 0.11em !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
  }

  .header-actions-right {
    gap: 0.28rem !important;
  }

  .action-icon-btn,
  .user-avatar-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 0.88rem !important;
  }

  .action-icon-btn .material-symbols-rounded,
  .user-avatar-btn .material-symbols-rounded,
  .theme-icon-dark,
  .theme-icon-light {
    font-size: 1.08rem !important;
  }

  .cart-badge {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 0.62rem !important;
    top: -3px !important;
    right: -3px !important;
  }

  .mobile-search-bar-row {
    padding: 0.42rem 0.7rem 0.52rem !important;
  }

  .mobile-search-box {
    padding: 0.16rem 0.2rem 0.16rem 0.7rem !important;
    border-radius: 9px !important;
  }

  .mobile-search-input {
    height: 32px !important;
    font-size: 0.82rem !important;
  }

  .mobile-search-submit-btn {
    width: 36px !important;
    height: 32px !important;
    border-radius: 7px !important;
  }

  /* Proporciones tipográficas y espaciados para pantallas móviles */
  .main-content {
    padding: 0.75rem 0.7rem 2.25rem !important;
  }

  .spacious-page {
    gap: 1.35rem !important;
  }

  /* Comportamiento del carrusel con soporte para gestos táctiles */
  .hero-section {
    margin-bottom: 1.05rem !important;
  }

  .hero-carousel {
    height: 278px !important;
    border-radius: 16px !important;
    touch-action: pan-y !important;
  }

  .carousel-track {
    touch-action: pan-y !important;
  }

  /* Ocultar botones de flecha en móvil (reemplazados por deslizamiento táctil con el dedo) */
  .carousel-arrow,
  .carousel-arrow-prev,
  .carousel-arrow-next {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .carousel-slide-overlay {
    padding: 0.8rem 0.9rem 1.65rem !important;
    gap: 0.42rem !important;
    background: linear-gradient(
      180deg,
      rgba(10, 11, 14, 0.05) 0%,
      rgba(10, 11, 14, 0.5) 40%,
      rgba(10, 11, 14, 0.94) 100%
    ) !important;
  }

  .slide-caption-left {
    gap: 0.26rem !important;
    max-width: 100% !important;
  }

  .slide-badge {
    font-size: 0.56rem !important;
    padding: 0.18rem 0.52rem !important;
    letter-spacing: 0.05em !important;
  }

  .slide-title {
    font-size: 1.12rem !important;
    line-height: 1.18 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .slide-description {
    font-size: 0.74rem !important;
    line-height: 1.32 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .slide-price-tag {
    margin-top: 0.05rem !important;
    gap: 0.35rem !important;
  }

  .slide-price-label {
    font-size: 0.64rem !important;
  }

  .slide-price-value {
    font-size: 1.08rem !important;
  }

  .slide-cta-btn {
    padding: 0.46rem 0.9rem !important;
    font-size: 0.76rem !important;
    gap: 0.32rem !important;
    align-self: flex-start !important;
  }

  .slide-cta-btn .material-symbols-rounded {
    font-size: 1rem !important;
  }

  .carousel-dots {
    bottom: 0.4rem !important;
    padding: 0.22rem 0.55rem !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) scale(0.84) !important;
  }

  /* Franja de beneficios corporativos */
  .trust-strip {
    gap: 0.55rem !important;
    margin-bottom: 1.25rem !important;
  }

  .trust-item {
    padding: 0.72rem 0.85rem !important;
    gap: 0.65rem !important;
    border-radius: 14px !important;
  }

  .trust-icon-box {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 1.1rem !important;
  }

  .trust-text h3 {
    font-size: 0.84rem !important;
  }

  .trust-text p {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  .section-eyebrow {
    font-size: 0.64rem !important;
    letter-spacing: 0.08em !important;
  }

  .page-hero-title {
    font-size: 1.3rem !important;
    line-height: 1.18 !important;
  }

  .page-hero-desc {
    font-size: 0.8rem !important;
    line-height: 1.38 !important;
  }

  .section-title {
    font-size: 1.22rem !important;
    line-height: 1.2 !important;
  }

  .section-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .surface-card,
  .wide-auth-container,
  .wide-auth-card {
    padding: 0.95rem 0.85rem !important;
    border-radius: 16px !important;
  }

  .wide-auth-container {
    gap: 1rem !important;
  }

  /* Grilla de productos responsiva */
  .category-pill {
    padding: 0.44rem 0.8rem !important;
    font-size: 0.76rem !important;
  }

  .product-card {
    border-radius: 14px !important;
  }

  .product-img-wrapper {
    height: 165px !important;
  }

  .product-body {
    padding: 0.85rem !important;
  }

  .product-title {
    font-size: 0.92rem !important;
  }

  .product-desc {
    font-size: 0.74rem !important;
    margin-bottom: 0.6rem !important;
  }

  .product-price-current {
    font-size: 1.1rem !important;
  }

  .btn-add-product {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.78rem !important;
  }
}


/* ==========================================================================
   ACTUALIZACIONES DE SOPORTE, TICKETS COLAPSABLES Y PUNTOS ROJOS DE NOTIFICACIÓN
   ========================================================================== */

/* Cabecera del panel de atención al cliente */
.support-card-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.support-card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--text-primary);
}

.btn-toggle-new-ticket {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn-toggle-new-ticket:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.38);
}

/* Formulario desplegable para radicación de tickets */
.new-ticket-dropdown-container {
  margin-top: 1.5rem;
  margin-bottom: 1.75rem;
  background-color: var(--bg-surface-elevated, var(--bg-surface));
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-xl, 1.25rem);
  padding: 2.25rem 2.5rem; /* Espaciado interior expandido */
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.4);
  animation: slideDownTicketMenu 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 640px) {
  .new-ticket-dropdown-container {
    padding: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
  }
}

@keyframes slideDownTicketMenu {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.new-ticket-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border-subtle);
}

.new-ticket-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.new-ticket-icon {
  font-size: 2rem;
  color: var(--brand-red);
}

.new-ticket-title {
  margin: 0;
  font-size: 1.3rem;
  font-family: var(--font-heading);
  color: var(--text-primary);
}

/* Acordeón de tickets para agentes de soporte */
.ticket-minichat-card {
  transition: all 0.2s ease;
}

.ticket-minichat-card.is-collapsed {
  padding: 0.95rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.ticket-minichat-card.is-collapsed:hover {
  border-color: var(--border-default);
  background: var(--bg-surface-elevated);
}

.ticket-minichat-card.is-collapsed .ticket-minichat-header {
  border-bottom: none;
  padding-bottom: 0;
}

.ticket-minichat-header.clickable-header {
  cursor: pointer;
  user-select: none;
}

.ticket-minichat-header.clickable-header:focus-visible {
  outline: 2px solid var(--brand-red);
  border-radius: var(--radius-sm);
}

.btn-ticket-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s, transform 0.15s;
}

.btn-ticket-expand:hover {
  color: var(--text-primary);
  background: var(--bg-surface-elevated);
}

/* Indicador visual de novedades y notificaciones pendientes */
.ticket-unread-dot {
  width: 8px;
  height: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background-color: var(--brand-red, #ef4444);
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45);
  animation: pulseRedDot 2s infinite ease-in-out;
  flex-shrink: 0;
}

.notification-red-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--brand-red, #ef4444);
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45);
  animation: pulseRedDot 2s infinite ease-in-out;
  flex-shrink: 0;
  margin-left: auto;
}

.staff-nav-option .notification-red-dot {
  margin-left: auto;
}

.order-novelty-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  font-size: 0.74rem;
  font-weight: 700;
  animation: pulseRedDot 2.5s infinite ease-in-out;
}


/* ==========================================================================
   HEADER CORNER LOGO & CHAT IMAGE ATTACHMENTS / COLLAPSIBLE STYLES
   ========================================================================== */

/* Alineación de identidad de marca en vista de perfil */
body[data-page="perfil"] .header-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.header-brand-left {
  display: flex;
  align-items: center;
  justify-self: start;
}

body[data-page="perfil"] .brand-text-wrapper,
.header-brand-left .brand-text-wrapper {
  align-items: flex-start !important;
  text-align: left !important;
}

/* Controles para adjuntar evidencias fotográficas en el chat */
.chat-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.chat-attach-btn:hover {
  background: var(--bg-surface-elevated);
  color: var(--brand-red);
  border-color: var(--border-default);
  transform: scale(1.05);
}

.minichat-input-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}

.chat-draft-preview-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  background: var(--bg-surface-elevated, #1f2533);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md);
  margin-bottom: 0.35rem;
  animation: slideDownFade 0.2s ease-out;
}

.chat-draft-preview-box {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.chat-draft-preview-box img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border-default);
}

.chat-draft-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}

.chat-draft-remove-btn .material-symbols-rounded {
  font-size: 0.85rem;
}

.chat-draft-remove-btn:hover {
  transform: scale(1.18);
}

.chat-draft-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.chat-bubble-attachment {
  margin-top: 0.55rem;
}

.chat-bubble-image {
  max-width: 260px;
  max-height: 200px;
  border-radius: var(--radius-md);
  object-fit: cover;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.chat-bubble-image:hover {
  transform: scale(1.02);
  opacity: 0.95;
}


/* ==========================================================================
   DROPDOWNS PERSONALIZADOS FLUIDOS (LENGUAJE HEADER / SEARCH BAR)
   ========================================================================== */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  font-family: inherit;
}

.custom-select-wrapper select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
}

.custom-select-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.68rem 1.15rem;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    transform 0.22s ease;
  user-select: none;
  -webkit-user-select: none;
  min-height: 44px;
  box-sizing: border-box;
}

/* Variante de botón tipo píldora */
.custom-select-pill .custom-select-trigger {
  border-radius: var(--radius-pill);
  padding: 0.52rem 1.05rem;
  font-size: 0.84rem;
  font-weight: 700;
}

.custom-select-trigger:hover {
  background-color: var(--bg-surface);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.custom-select-wrapper.is-open .custom-select-trigger,
.custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(224, 26, 44, 0.18);
  background-color: var(--bg-surface);
}

.custom-select-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.custom-select-arrow {
  font-size: 1.25rem;
  color: var(--text-secondary);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  flex-shrink: 0;
}

.custom-select-wrapper:hover .custom-select-arrow {
  color: var(--brand-red);
}

.custom-select-wrapper.is-open .custom-select-arrow {
  transform: rotate(180deg);
  color: var(--brand-red);
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 290px;
  overflow-y: auto;
  background-color: var(--bg-dropdown, #141823);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg, 16px);
  padding: 0.45rem;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.2s;
}

.custom-select-wrapper.is-open .custom-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.68rem 0.95rem;
  border-radius: var(--radius-md, 10px);
  color: var(--text-primary);
  font-size: 0.87rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.15s ease;
  min-height: 42px;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.custom-select-option:last-child {
  margin-bottom: 0;
}

.custom-select-option:hover {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  transform: translateX(2px);
}

.custom-select-option.is-selected {
  background-color: rgba(224, 26, 44, 0.14);
  color: var(--brand-red);
  font-weight: 700;
}

.custom-select-option-text {
  flex: 1;
  white-space: normal;
  word-break: break-word;
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

.custom-select-check {
  font-size: 1.15rem;
  color: var(--brand-red);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.16s ease, transform 0.16s ease;
  flex-shrink: 0;
}

.custom-select-option.is-selected .custom-select-check {
  opacity: 1;
  transform: scale(1);
}

.custom-select-wrapper.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* ==========================================================================
   ANIMACIONES DE SALIDA Y CIERRE FLUIDO (MODALES, MENÚS Y PUNTOS ROJOS)
   ========================================================================== */
.modal-backdrop.is-closing {
  animation: fadeOutModalBackdrop 0.22s ease-in forwards !important;
  pointer-events: none;
}

.modal-backdrop.is-closing .modal-card {
  animation: scaleDownModalCard 0.22s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
}

@keyframes fadeOutModalBackdrop {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scaleDownModalCard {
  from {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  to {
    transform: scale(0.92) translateY(12px);
    opacity: 0;
  }
}

/* Animación de apertura para formulario de vinculación de empleados */
#adminEmployeeFormCard:not(.hidden) {
  animation: expandEmployeeCard 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

#adminEmployeeFormCard.is-closing {
  animation: collapseEmployeeCard 0.22s ease-in forwards;
}

@keyframes expandEmployeeCard {
  from {
    opacity: 0;
    transform: translateY(-12px) scaleY(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes collapseEmployeeCard {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scaleY(0.96);
  }
}

/* Animación de lectura para indicadores de notificación */
.ticket-unread-dot,
.order-live-pulse-dot {
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticket-unread-dot.is-read,
.order-live-pulse-dot.is-read {
  opacity: 0 !important;
  transform: scale(0) !important;
  pointer-events: none;
}


/* ==========================================================================
   BOTÓN DE ENVÍO CIRCULAR PARA CHAT Y EFECTOS HOVER DE TICKETS
   ========================================================================== */
.chat-send-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background-color: var(--brand-red);
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(224, 26, 44, 0.32);
  transition: transform 0.22s var(--ease-spring), background-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.chat-send-btn:hover {
  background-color: var(--brand-red-hover);
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(224, 26, 44, 0.45);
}

.chat-send-btn:active {
  transform: scale(0.94);
}

.chat-send-btn .material-symbols-rounded {
  font-size: 1.35rem;
  margin-left: 2px;
}

/* Resaltado interactivo para filas de tickets */
.ticket-minichat-card {
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.2s ease;
}

.ticket-minichat-card:hover,
.ticket-minichat-card.is-collapsed:hover {
  border-color: rgba(34, 197, 94, 0.45) !important;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.12);
}

/* Estado condicional para confirmación de entrega sin evidencia */
.btn-confirm-order.is-disabled-no-photo,
.btn-confirm-order:disabled {
  background-color: #374151 !important;
  color: #9ca3af !important;
  border: 1px solid #4b5563 !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none;
}


/* ==========================================================================
   DROPDOWN FLUIDO EN CARRITO Y TABLA DE USUARIOS + ESPACIOS INLINE
   ========================================================================== */
.cart-addr-actions-row .custom-select-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
}

.cart-addr-actions-row .custom-select-trigger {
  min-height: 38px;
  height: 38px;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
}

.cart-addr-actions-row .custom-select-menu {
  max-height: 220px;
  z-index: 1200;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
}

.admin-user-row .custom-select-wrapper {
  min-width: 165px;
  width: auto;
  position: relative;
}

.admin-user-row .custom-select-trigger {
  min-height: 38px;
  height: 38px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.admin-user-row .custom-select-menu {
  z-index: 1200;
  max-height: 240px;
}

/* Despliegue animado para formulario de georreferenciación de domicilios */
#addressRegistrationWorkspace {
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
}

#addressRegistrationWorkspace:not(.hidden) {
  animation: slideDownAddressWorkspace 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDownAddressWorkspace {
  from {
    opacity: 0;
    transform: translateY(-14px) scaleY(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Campos editables en línea para información de cuenta */
.company-inline-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.85rem;
  margin-top: 0.35rem;
}

.company-inline-edit-grid .modal-input {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.95rem;
  font-size: 0.88rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.company-inline-edit-grid .modal-input:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(224, 26, 44, 0.18);
  outline: none;
}

/* Estado deshabilitado para el botón de checkout cuando el carrito está vacío */
.btn-checkout-drawer.is-disabled,
#btnGoToCheckoutPage.is-disabled,
#btnGoToCheckoutPage[aria-disabled="true"] {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  background-color: #374151 !important;
  color: #9ca3af !important;
  border-color: #4b5563 !important;
  box-shadow: none !important;
}


/* ==========================================================================
   SCROLLBAR ELEGANTE Y VISIBLE PARA TODOS LOS DROPDOWNS CON SCROLL
   ========================================================================== */
.custom-select-menu {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(224, 26, 44, 0.7) rgba(255, 255, 255, 0.08) !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.custom-select-menu::-webkit-scrollbar {
  width: 6px !important;
}

.custom-select-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  margin: 4px 0 !important;
}

.custom-select-menu::-webkit-scrollbar-thumb {
  background: rgba(224, 26, 44, 0.7) !important;
  border-radius: 6px !important;
}

.custom-select-menu::-webkit-scrollbar-thumb:hover {
  background: var(--brand-red) !important;
}

/* Selector de domicilios optimizado para el panel lateral del carrito */
.cart-addr-actions-row .custom-select-menu {
  max-height: 175px !important;
  width: max(100%, 270px) !important;
  max-width: 320px !important;
  z-index: 1300 !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.82rem !important;
  padding: 0.45rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  overflow-y: auto !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55) !important;
}

.cart-addr-actions-row .custom-select-option {
  min-height: 38px !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.8rem !important;
  border-radius: var(--radius-sm) !important;
  gap: 0.5rem !important;
  margin-bottom: 5px !important;
}

.cart-addr-actions-row .custom-select-option:last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================================
   DROPDOWNS EN MODO CLARO (RESALTADO CON TEXTO NEGRO NÍTIDO)
   ========================================================================== */
[data-theme="light"] .custom-select-menu,
html[data-theme='light'] .custom-select-menu {
  background-color: #ffffff !important;
  border-color: rgba(18, 20, 26, 0.16) !important;
  box-shadow: 0 16px 36px rgba(15, 18, 26, 0.14) !important;
}

[data-theme="light"] .custom-select-trigger,
html[data-theme='light'] .custom-select-trigger {
  background-color: #ffffff !important;
  color: #14171f !important;
  border-color: rgba(18, 20, 26, 0.16) !important;
}

[data-theme="light"] .custom-select-label,
html[data-theme='light'] .custom-select-label {
  color: #14171f !important;
}

[data-theme="light"] .custom-select-option,
html[data-theme='light'] .custom-select-option {
  color: #14171f !important;
  background-color: transparent;
}

[data-theme="light"] .custom-select-option-text,
html[data-theme='light'] .custom-select-option-text,
[data-theme="light"] .custom-select-option .custom-select-option-text,
html[data-theme='light'] .custom-select-option .custom-select-option-text {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Resaltado continuo para filas del menú de selección */
[data-theme="light"] .custom-select-option:hover,
html[data-theme='light'] .custom-select-option:hover,
[data-theme="light"] .custom-select-option:focus,
html[data-theme='light'] .custom-select-option:focus {
  background-color: #e5e9f2 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .custom-select-option:hover .custom-select-option-text,
html[data-theme='light'] .custom-select-option:hover .custom-select-option-text,
[data-theme="light"] .custom-select-option:focus .custom-select-option-text,
html[data-theme='light'] .custom-select-option:focus .custom-select-option-text {
  color: #000000 !important;
  font-weight: 700 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Opción seleccionada: fondo en toda la pastilla con bordes redondeados, texto rojo sin recuadro interno */
[data-theme="light"] .custom-select-option.is-selected,
html[data-theme='light'] .custom-select-option.is-selected {
  background-color: rgba(224, 26, 44, 0.1) !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .custom-select-option.is-selected .custom-select-option-text,
html[data-theme='light'] .custom-select-option.is-selected .custom-select-option-text {
  color: #dc2626 !important;
  font-weight: 700 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Interacción sobre opción seleccionada */
[data-theme="light"] .custom-select-option.is-selected:hover,
html[data-theme='light'] .custom-select-option.is-selected:hover {
  background-color: rgba(224, 26, 44, 0.16) !important;
  color: #b91c1c !important;
}

[data-theme="light"] .custom-select-option.is-selected:hover .custom-select-option-text,
html[data-theme='light'] .custom-select-option.is-selected:hover .custom-select-option-text {
  color: #b91c1c !important;
  font-weight: 700 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ==========================================================================
   BOTÓN DE LÁPIZ MORFABLE (CIRCULAR GRIS <-> EXPANDIDO ROJO GUARDAR CAMBIOS)
   ========================================================================== */
.btn-profile-pencil-round {
  height: 40px;
  min-height: 40px;
  width: 40px;
  min-width: 40px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition:
    width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    min-width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s var(--ease-spring);
}

.btn-profile-pencil-round:hover {
  background-color: var(--bg-surface);
  border-color: var(--brand-red);
  color: var(--brand-red);
  transform: translateY(-1px);
}

.btn-profile-pencil-round .btn-pencil-label {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Botón de confirmación para guardado de cambios en perfil */
.btn-profile-pencil-round.is-editing {
  width: 175px;
  min-width: 175px;
  border-radius: var(--radius-pill);
  padding: 0 1.15rem;
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #ffffff;
  gap: 0.45rem;
  box-shadow: 0 4px 14px rgba(224, 26, 44, 0.32);
}

.btn-profile-pencil-round.is-editing:hover {
  background-color: var(--brand-red-hover);
  border-color: var(--brand-red-hover);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(224, 26, 44, 0.45);
}

.btn-profile-pencil-round.is-editing .btn-pencil-label {
  display: inline;
  opacity: 1;
}

/* Botón circular de cancelación para edición en línea */
.btn-profile-cancel-edit {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.btn-profile-cancel-edit:hover {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
  transform: translateY(-1px);
}

/* Transiciones suaves entre estados de lectura y edición */
#companyStaticGrid:not(.hidden) {
  animation: fadeInProfileGrid 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

#inlineProfileForm:not(.hidden) {
  animation: fadeInProfileGrid 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInProfileGrid {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   ESPACIADO EXACTO Y SIMÉTRICO PARA VENTANAS DE PERFIL
   (Distancia idéntica entre banner-pestañas y pestañas-contenido = 1.5rem)
   ========================================================================== */
body[data-page="perfil"] .spacious-page {
  gap: 0 !important;
}

body[data-page="perfil"] #cuenta-section {
  margin-bottom: 0 !important;
}

body[data-page="perfil"] .customer-profile-tabs {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

body[data-page="perfil"] [data-profile-window] {
  margin-top: 0 !important;
}

body[data-page="perfil"] [data-profile-window] .block-header {
  margin-bottom: 1.25rem !important;
}

body[data-page="perfil"] [data-profile-window] .block-header .section-title {
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
}


/* ==========================================================================
   SISTEMA UNIFICADO DE CONSISTENCIA ESCRITORIO <-> MÓVIL (UI/UX COMPACTO Y LIMPIO)
   ========================================================================== */

/* 1. Etiquetas adaptativas y componentes compartidos (Escritorio por defecto) */
.btn-label-mobile,
.tl-mobile-only {
  display: none;
}

.btn-label-desktop,
.tl-desktop-only {
  display: inline;
}

.product-price-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.customer-order-actions-note {
  font-size: 0.79rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Tarjeta de Usuario y Badges en el Menú Lateral Móvil (Consistente con Escritorio) */
.mobile-drawer-user-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.35rem;
  border-radius: 14px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mobile-drawer-user-card:hover {
  border-color: var(--brand-red);
}

.mobile-drawer-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: rgba(224, 26, 44, 0.14);
  color: var(--brand-red);
  border: 1.5px solid rgba(224, 26, 44, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 0.95rem;
  overflow: hidden;
}

.mobile-drawer-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mobile-drawer-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mobile-drawer-user-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-drawer-user-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-drawer-user-chevron {
  font-size: 1.15rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mobile-nav-link {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-nav-link-accent {
  background-color: rgba(224, 26, 44, 0.1) !important;
  color: var(--brand-red) !important;
  font-weight: 700 !important;
}

.mobile-nav-right-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.mobile-nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 0.45rem;
  border-radius: 999px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.mobile-nav-pill-red {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #ffffff;
}

.mobile-nav-divider {
  height: 1px;
  background-color: var(--border-subtle);
  margin: 0.5rem 0.4rem;
}

.mobile-nav-logout {
  color: #ef4444 !important;
}

/* Tarjetas de Información Comercial y Seguridad (Mi Cuenta) */
.company-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.company-card-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.btn-add-addr-toggle {
  padding: 0.5rem 0.95rem;
  font-size: 0.84rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.company-static-cell {
  min-width: 0;
}

.company-static-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.company-static-value {
  display: block;
  font-size: 0.92rem;
  color: var(--text-primary);
  word-break: break-word;
}

.doc-split-grid {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0.5rem;
}

.security-summary-card {
  margin-bottom: 1.25rem;
}

.security-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.security-card-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 240px;
  min-width: 0;
}

.security-card-icon-badge {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: rgba(224, 26, 44, 0.12);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-card-text {
  min-width: 0;
  flex: 1;
}

.security-card-title {
  font-size: 1rem;
  display: block;
  color: var(--text-primary);
}

.security-card-desc {
  margin: 0.18rem 0 0;
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.38;
}

.security-card-actions {
  flex-shrink: 0;
}

.security-pwd-btn {
  padding: 0.56rem 1.05rem;
  font-size: 0.85rem;
  border-radius: var(--radius-pill);
}

/* Prevención global de desbordamiento horizontal en formularios Auth y Selectores */
.wide-auth-container,
.wide-auth-info,
.wide-auth-card,
.auth-forms-viewport,
.auth-form-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.address-select-row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.address-select-row .custom-select-wrapper {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: calc(100% - 52px);
}

/* 2. Ajustes para Tabletas y Móviles (<= 1080px): Auth sin recortes y Buscador Integrado al Tema */
@media (max-width: 1080px) {
  .wide-auth-container {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden;
  }

  /* Ocultar buscador de productos en Perfil y Pagos (igual que en escritorio) */
  body[data-page="perfil"] .mobile-search-bar-row,
  body[data-page="pagos"] .mobile-search-bar-row {
    display: none !important;
  }

  /* Buscador móvil armónico con el tema claro/oscuro (reemplaza la franja negra rígida) */
  .mobile-search-bar-row {
    background-color: var(--bg-header) !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-bottom: none !important;
    padding: 0.42rem 0.85rem 0.55rem !important;
  }

  .mobile-search-box {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 999px !important;
    padding: 0.15rem 0.22rem 0.15rem 0.85rem !important;
    box-shadow: var(--shadow-sm) !important;
  }

  .mobile-search-box:focus-within {
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 0 3px rgba(224, 26, 44, 0.14) !important;
  }

  .mobile-search-input {
    color: var(--text-primary) !important;
    background: transparent !important;
  }

  .mobile-search-input::placeholder {
    color: var(--text-muted) !important;
  }

  .mobile-search-submit-btn {
    border-radius: 999px !important;
    background-color: var(--brand-red) !important;
    color: #ffffff !important;
  }
}

/* 3. Experiencia Móvil Completa Consistente con Escritorio (<= 768px) */
@media (max-width: 768px) {
  .btn-label-desktop,
  .tl-desktop-only,
  .tab-label-extra {
    display: none !important;
  }

  .btn-label-mobile,
  .tl-mobile-only {
    display: inline !important;
  }

  /* Header idéntico y centrado en todas las páginas (incluyendo perfil.html) */
  body[data-page="perfil"] header .header-container,
  body[data-page="pagos"] header .header-container,
  header .header-container {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    justify-content: initial !important;
    align-items: center !important;
    padding: 0.48rem 0.65rem !important;
    gap: 0.35rem !important;
  }

  body[data-page="perfil"] .header-brand-left,
  .header-brand-left {
    justify-self: center !important;
  }

  body[data-page="perfil"] .brand-text-wrapper,
  .header-brand-left .brand-text-wrapper {
    align-items: center !important;
    text-align: center !important;
  }

  .mobile-search-bar-row {
    padding: 0.35rem 0.7rem 0.48rem !important;
  }

  .mobile-search-input {
    height: 30px !important;
    font-size: 0.8rem !important;
  }

  .mobile-search-submit-btn {
    width: 32px !important;
    height: 30px !important;
  }

  .mobile-search-submit-btn .material-symbols-rounded {
    font-size: 1.05rem !important;
  }

  /* Menú Hamburguesa compacto y proporcionado */
  .mobile-nav-drawer {
    width: min(84vw, 315px) !important;
  }

  .mobile-nav-header {
    padding: 0.85rem 1rem !important;
  }

  .mobile-nav-body {
    padding: 0.75rem 0.8rem 1.5rem !important;
    gap: 0.18rem !important;
  }

  .mobile-nav-section-label {
    font-size: 0.66rem !important;
    margin: 0.65rem 0.45rem 0.25rem !important;
    letter-spacing: 0.07em !important;
  }

  .mobile-nav-link {
    padding: 0.56rem 0.7rem !important;
    font-size: 0.84rem !important;
    border-radius: 10px !important;
    gap: 0.65rem !important;
  }

  .mobile-nav-link .material-symbols-rounded {
    font-size: 1.18rem !important;
  }

  /* Carrusel Principal: recorte limpio de barra de progreso y proporciones nítidas */
  .hero-carousel {
    height: 248px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  .slide-title {
    font-size: 1.04rem !important;
  }

  .slide-description {
    font-size: 0.72rem !important;
  }

  .slide-price-value {
    font-size: 1rem !important;
  }

  .slide-cta-btn {
    padding: 0.4rem 0.82rem !important;
    font-size: 0.74rem !important;
  }

  /* Tira de Beneficios (.trust-strip): tarjetas compactas y proporcionadas */
  .trust-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.48rem !important;
    margin-bottom: 1.1rem !important;
  }

  .trust-item {
    padding: 0.6rem 0.78rem !important;
    gap: 0.65rem !important;
    border-radius: 13px !important;
    align-items: center !important;
  }

  .trust-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
  }

  .trust-icon .material-symbols-rounded {
    font-size: 1.15rem !important;
  }

  .trust-title {
    font-size: 0.82rem !important;
    line-height: 1.22 !important;
    margin-bottom: 1px !important;
  }

  .trust-desc {
    font-size: 0.71rem !important;
    line-height: 1.3 !important;
  }

  /* Encabezados de sección consistentes */
  .section-eyebrow {
    font-size: 0.62rem !important;
    padding: 0.22rem 0.55rem !important;
    gap: 0.28rem !important;
    margin-bottom: 0.35rem !important;
  }

  .section-eyebrow .material-symbols-rounded {
    font-size: 0.88rem !important;
  }

  .section-title,
  .page-hero-title {
    font-size: 1.16rem !important;
    line-height: 1.2 !important;
  }

  .section-subtitle,
  .page-hero-desc {
    font-size: 0.76rem !important;
    line-height: 1.36 !important;
  }

  /* Catálogo en Cuadrícula de 2 Columnas (cercano a escritorio, sin tarjetas gigantes) */
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.58rem !important;
  }

  .product-card {
    border-radius: 14px !important;
    min-width: 0 !important;
  }

  .product-image-wrap {
    height: 128px !important;
  }

  .product-category-tag {
    top: 0.45rem !important;
    left: 0.45rem !important;
    padding: 0.16rem 0.45rem !important;
    font-size: 0.58rem !important;
  }

  .product-body {
    padding: 0.65rem 0.65rem 0.7rem !important;
    gap: 0.32rem !important;
  }

  .product-title {
    font-size: 0.82rem !important;
    line-height: 1.24 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.02em;
  }

  .product-desc {
    font-size: 0.68rem !important;
    line-height: 1.28 !important;
    margin-bottom: 0.25rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-footer {
    padding-top: 0.42rem !important;
    gap: 0.42rem !important;
  }

  .product-price-label {
    font-size: 0.58rem !important;
  }

  .product-price {
    font-size: 0.96rem !important;
    line-height: 1.15 !important;
  }

  .product-actions-row {
    gap: 0.32rem !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .bulk-qty-box {
    padding: 2px !important;
    border-radius: 999px !important;
    gap: 1px !important;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
  }

  .bulk-qty-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 0.88rem !important;
  }

  .bulk-qty-input {
    width: 28px !important;
    height: 24px !important;
    font-size: 0.76rem !important;
    padding: 0 !important;
  }

  .btn-add-product {
    padding: 0.42rem 0.6rem !important;
    min-height: 30px !important;
    height: 30px !important;
    font-size: 0.74rem !important;
    border-radius: 999px !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
  }

  .btn-add-product .material-symbols-rounded {
    font-size: 1rem !important;
  }

  /* Vista de Invitado (Iniciar Sesión / Crear Cuenta) sin desbordamiento derecho */
  .wide-auth-container {
    padding: 0.95rem 0.8rem !important;
    gap: 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .wide-auth-info .section-eyebrow {
    display: inline-flex !important;
  }

  .wide-auth-benefits {
    display: none !important;
  }

  .wide-auth-card {
    padding: 0.85rem 0.72rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .auth-tabs {
    padding: 0.26rem !important;
    margin-bottom: 0.85rem !important;
  }

  .auth-tab {
    padding: 0.48rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  .btn-google-oauth {
    padding: 0.58rem 0.85rem !important;
    font-size: 0.82rem !important;
    min-height: 40px !important;
  }

  .auth-divider {
    margin: 0.7rem 0 !important;
    font-size: 0.74rem !important;
  }

  .auth-form .form-row-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.65rem !important;
  }

  .auth-form label,
  .form-group label {
    font-size: 0.76rem !important;
    margin-bottom: 0.25rem !important;
  }

  .modal-input {
    padding: 0.56rem 0.8rem !important;
    font-size: 0.84rem !important;
    min-height: 38px !important;
  }

  .auth-form .btn-primary.btn-full {
    padding: 0.62rem 1rem !important;
    font-size: 0.86rem !important;
    min-height: 40px !important;
  }

  /* Banner de Perfil Activo (#loggedProfileBanner): compacto y botones en una sola fila */
  .logged-profile-banner {
    padding: 0.9rem 0.9rem !important;
    gap: 0.75rem !important;
    border-radius: 16px !important;
  }

  .logged-profile-left {
    gap: 0.7rem !important;
    align-items: center !important;
  }

  .logged-avatar-large {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.15rem !important;
  }

  .logged-profile-left .page-hero-title {
    font-size: 1.06rem !important;
    margin-bottom: 1px !important;
  }

  .logged-profile-text-box .page-hero-desc {
    font-size: 0.73rem !important;
    word-break: break-word !important;
  }

  .logged-user-extra {
    font-size: 0.69rem !important;
    margin-top: 1px !important;
  }

  .logged-profile-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  .logged-profile-actions .btn-primary,
  .logged-profile-actions .btn-secondary {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 0.44rem 0.55rem !important;
    min-height: 34px !important;
    font-size: 0.76rem !important;
    border-radius: 999px !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  .logged-profile-actions .material-symbols-rounded {
    font-size: 1rem !important;
  }

  /* Barra de 4 Pestañas Horizontal Deslizante en Móvil (igual que en escritorio) */
  body[data-page="perfil"] .customer-profile-tabs {
    margin-top: 0.85rem !important;
    margin-bottom: 1rem !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.22rem !important;
    padding: 0.28rem !important;
    border-radius: 14px !important;
  }

  .customer-tab-btn {
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.16rem !important;
    padding: 0.45rem 0.2rem !important;
    min-height: 52px !important;
    border-radius: 11px !important;
    font-size: 0.68rem !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  .customer-tab-btn .material-symbols-rounded {
    font-size: 1.15rem !important;
  }

  .customer-tab-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .customer-tab-count {
    position: absolute !important;
    top: 3px !important;
    right: 4px !important;
    min-width: 16px !important;
    height: 15px !important;
    padding: 0 4px !important;
    font-size: 0.56rem !important;
    line-height: 15px !important;
    margin-left: 0 !important;
  }

  .customer-tab-btn .tab-notification-dot {
    position: absolute !important;
    top: 4px !important;
    left: 6px !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
  }

  /* Timeline de 4 Pasos Conectada Horizontalmente en Móvil (NO 4 íconos sueltos) */
  .order-timeline-4steps {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.15rem !important;
    padding: 6px 0 4px !important;
    margin: 0.65rem 0 0.45rem !important;
  }

  .order-timeline-line-bg {
    display: block !important;
    position: absolute !important;
    top: 22px !important;
    left: 12.5% !important;
    right: 12.5% !important;
    height: 3px !important;
    z-index: 1 !important;
  }

  .timeline-point {
    gap: 0.22rem !important;
    min-width: 0 !important;
  }

  .timeline-icon-circle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .timeline-icon-circle .material-symbols-rounded {
    font-size: 1.05rem !important;
  }

  .timeline-label-title {
    font-size: 0.64rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .timeline-label-sub {
    font-size: 0.56rem !important;
    line-height: 1.1 !important;
  }

  /* Acordeón de Pedido, Botones de Acción y Recibo Térmico en Móvil */
  .customer-order-header {
    padding: 0.8rem 0.85rem !important;
    gap: 0.55rem !important;
  }

  .customer-order-title-row {
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
  }

  .customer-order-title-row strong {
    font-size: 0.92rem !important;
  }

  .customer-order-submeta {
    font-size: 0.72rem !important;
    line-height: 1.32 !important;
  }

  .customer-order-accordion.is-expanded .customer-order-body-content {
    padding: 0.55rem 0.8rem 0.95rem !important;
  }

  .order-item-chip {
    font-size: 0.7rem !important;
    padding: 0.22rem 0.52rem !important;
  }

  .customer-order-actions-bar {
    gap: 0.55rem !important;
    padding-top: 0.65rem !important;
    margin-top: 0.65rem !important;
  }

  .customer-order-actions-note {
    font-size: 0.72rem !important;
  }

  .customer-order-actions-btns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.38rem !important;
    width: 100% !important;
  }

  .customer-order-actions-btns button {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 0.42rem 0.45rem !important;
    min-height: 34px !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
    gap: 0.24rem !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  .customer-order-actions-btns button .material-symbols-rounded {
    font-size: 0.96rem !important;
  }

  /* Recibo Térmico sin desbordamiento en pantallas estrechas */
  .emulated-thermal-receipt {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .thermal-receipt-body {
    padding: 0.85rem 0.68rem 1rem !important;
    font-size: 0.7rem !important;
  }

  .thermal-brand-title {
    font-size: 0.96rem !important;
  }

  .thermal-items-header,
  .thermal-item-row {
    grid-template-columns: 28px minmax(0, 1fr) 62px 68px !important;
    gap: 4px !important;
    font-size: 0.66rem !important;
  }

  .thermal-simulated-barcode {
    width: min(200px, 85%) !important;
    height: 32px !important;
  }

  /* Tarjetas de Mi Cuenta (Información Comercial + Seguridad + Direcciones) */
  .company-card-header {
    gap: 0.6rem !important;
    align-items: center !important;
  }

  .company-card-title {
    font-size: 0.94rem !important;
  }

  .company-card-actions {
    gap: 0.4rem !important;
  }

  .btn-add-addr-toggle {
    padding: 0.38rem 0.72rem !important;
    min-height: 34px !important;
    font-size: 0.75rem !important;
    gap: 0.28rem !important;
  }

  .btn-add-addr-toggle .material-symbols-rounded {
    font-size: 0.98rem !important;
  }

  .btn-profile-pencil-round {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .btn-profile-pencil-round.is-editing {
    width: auto !important;
    min-width: 124px !important;
    padding: 0 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .btn-profile-cancel-edit {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .company-static-label {
    font-size: 0.66rem !important;
  }

  .company-static-value {
    font-size: 0.82rem !important;
  }

  .security-card-inner {
    gap: 0.7rem !important;
  }

  .security-card-icon-badge {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
  }

  .security-card-icon-badge .material-symbols-rounded {
    font-size: 1.15rem !important;
  }

  .security-card-title {
    font-size: 0.9rem !important;
  }

  .security-card-desc {
    font-size: 0.74rem !important;
  }

  .security-card-actions {
    width: 100%;
  }

  .security-pwd-btn {
    width: 100%;
    justify-content: center;
    padding: 0.46rem 0.85rem !important;
    min-height: 36px !important;
    font-size: 0.78rem !important;
  }

  /* Pasarela de Pagos (pagos.html): fila de dirección sin salirse y píldoras deslizables */
  .address-select-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .address-select-row .custom-select-wrapper {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: calc(100% - 46px) !important;
  }

  .address-select-row .custom-select-trigger {
    min-height: 40px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  .btn-icon-manage {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .meta-municipalities-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.38rem !important;
    padding-bottom: 0.35rem !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .meta-municipalities-bar::-webkit-scrollbar {
    display: none;
  }

  .municipality-pill {
    flex-shrink: 0 !important;
    padding: 0.34rem 0.7rem !important;
    font-size: 0.73rem !important;
  }

  .wizard-footer-actions button,
  .wizard-footer-actions a {
    padding: 0.52rem 0.9rem !important;
    font-size: 0.8rem !important;
    min-height: 38px !important;
  }

  /* Soporte y Tickets en Móvil */
  .support-card-header-bar {
    gap: 0.7rem !important;
    padding-bottom: 0.85rem !important;
  }

  .support-card-title {
    font-size: 1.05rem !important;
  }

  .btn-toggle-new-ticket {
    padding: 0.48rem 0.9rem !important;
    font-size: 0.78rem !important;
    border-radius: 999px !important;
  }

  /* Modales y Pop-ups proporcionados en Móvil */
  .modal-card {
    padding: 1.15rem 1rem !important;
    border-radius: 18px !important;
    width: calc(100vw - 1.5rem) !important;
    max-width: 420px !important;
  }

  .modal-footer-btns,
  .modal-actions {
    gap: 0.5rem !important;
  }

  .modal-footer-btns button,
  .modal-actions button {
    padding: 0.52rem 0.85rem !important;
    font-size: 0.8rem !important;
    min-height: 38px !important;
  }

  /* Panel Operativo (panel.html) en Móvil: KPIs en 2 columnas y filas limpias */
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .kpi-card {
    padding: 0.8rem 0.75rem !important;
    border-radius: 14px !important;
  }

  .kpi-value {
    font-size: 1.18rem !important;
  }

  .admin-user-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
    padding: 0.85rem !important;
  }

  .admin-user-row .custom-select-wrapper {
    width: 100% !important;
  }
}

/* 4. Teléfonos Compactos (<= 480px): Botón de carrito icónico para que "- 1 +" y Carrito quepan en 1 fila */
@media (max-width: 480px) {
  .btn-add-product .btn-add-label {
    display: none !important;
  }

  .btn-add-product {
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}


/* Garantía global de ocultación: ningún selector responsivo con !important debe mostrar nodos .hidden */
.hidden,
[hidden],
body[data-page="perfil"] .customer-profile-tabs.hidden,
body[data-page="perfil"] .logged-profile-banner.hidden,
body[data-page="perfil"] [data-profile-window].hidden,
.btn-label-desktop.hidden,
.btn-label-mobile.hidden,
.tab-notification-dot.hidden {
  display: none !important;
}


/* ==========================================================================
   SISTEMA DE DESCUENTOS PROMOCIONALES (TIENDA, CARRITO Y PANEL ADMIN)
   ========================================================================== */

/* Píldora "Ofertas" en catálogo de tienda */
.category-pill-ofertas {
  border-color: rgba(224, 26, 44, 0.35);
}

.ofertas-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(224, 26, 44, 0.14);
  color: var(--brand-red, #e01a2c);
}

.category-pill-ofertas.active .ofertas-pill-count {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

/* Insignia de porcentaje en tarjetas de producto */
.product-card.has-active-discount {
  border-color: rgba(224, 26, 44, 0.32);
}

.product-discount-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #e01a2c 0%, #b91c1c 100%);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(224, 26, 44, 0.35);
}

.product-promo-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.product-promo-meta-pill .material-symbols-rounded {
  font-size: 0.88rem;
}

.product-promo-meta-pill.is-time {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .product-promo-meta-pill.is-time {
  color: #fbbf24;
}

.product-promo-meta-pill.is-units {
  background: rgba(224, 26, 44, 0.12);
  color: var(--brand-red, #e01a2c);
  border: 1px solid rgba(224, 26, 44, 0.28);
}

.product-price-current.is-discounted-price {
  color: var(--brand-red, #e01a2c);
}

/* Chips de descuento en buscador, carrito y pasarela */
.inline-discount-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.42rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: rgba(224, 26, 44, 0.14);
  color: var(--brand-red, #e01a2c);
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
}

.inline-old-price {
  text-decoration: line-through;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85em;
}

/* Barra de filtro y filas en Gestión de Catálogo (panel.html) */
.admin-catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.admin-catalog-toolbar > .modal-input {
  flex: 1 1 280px;
}

.admin-catalog-filter-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-elevated);
  padding: 0.28rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
}

.admin-cat-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-cat-filter-btn.active {
  background: var(--brand-red, #e01a2c);
  color: #ffffff;
}

.admin-cat-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(224, 26, 44, 0.14);
  color: var(--brand-red, #e01a2c);
}

.admin-cat-filter-btn.active .admin-cat-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.admin-catalog-row.has-active-discount {
  border-color: rgba(224, 26, 44, 0.34);
  background: linear-gradient(90deg, rgba(224, 26, 44, 0.04) 0%, transparent 60%);
}

.admin-catalog-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.admin-discount-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-red, #e01a2c);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
}

.admin-discount-cond-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.52rem;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 700;
}

.btn-admin-discount {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(224, 26, 44, 0.35);
  background: rgba(224, 26, 44, 0.08);
  color: var(--brand-red, #e01a2c);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-admin-discount:hover {
  background: rgba(224, 26, 44, 0.16);
  transform: translateY(-1px);
}

.btn-admin-discount.is-active {
  background: var(--brand-red, #e01a2c);
  border-color: var(--brand-red, #e01a2c);
  color: #ffffff;
}

/* Bloque de Descuento dentro del formulario Crear / Editar Producto */
.admin-form-discount-section {
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.admin-form-discount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.admin-form-discount-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

.admin-form-discount-title .material-symbols-rounded {
  font-size: 1.1rem;
  color: var(--brand-red, #e01a2c);
}

.admin-form-price-preview {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.68rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.admin-form-price-preview.is-active {
  background: rgba(224, 26, 44, 0.12);
  border-color: rgba(224, 26, 44, 0.32);
  color: var(--brand-red, #e01a2c);
}

/* Modal Rápido de Descuento Promocional */
.quick-discount-modal-card {
  max-width: 540px;
  width: 100%;
  padding: 1.6rem 1.65rem;
  border-radius: 22px;
}

.quick-discount-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.quick-discount-header-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.quick-discount-icon-circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  background: rgba(224, 26, 44, 0.12);
  color: var(--brand-red, #e01a2c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-discount-header h3 {
  font-size: 1.06rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.quick-discount-header p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0.18rem 0 0;
}

.discount-preview-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  margin-bottom: 0.9rem;
}

.discount-preview-col {
  display: flex;
  flex-direction: column;
}

.discount-preview-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.discount-preview-base {
  font-size: 0.98rem;
  color: var(--text-secondary);
}

.discount-preview-final {
  font-size: 1.18rem;
  color: var(--brand-red, #e01a2c);
  font-weight: 800;
}

.discount-preview-arrow {
  color: var(--text-muted);
  font-size: 1.25rem;
}

.discount-preview-badge {
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.discount-preview-badge.is-active {
  background: var(--brand-red, #e01a2c);
  border-color: var(--brand-red, #e01a2c);
  color: #ffffff;
}

.discount-pct-number-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.discount-pct-number {
  width: 82px !important;
  text-align: center;
  font-weight: 800;
  padding: 0.42rem 0.5rem !important;
}

.discount-pct-symbol {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.discount-range-slider {
  width: 100%;
  accent-color: var(--brand-red, #e01a2c);
  margin: 0.55rem 0 0.45rem;
  cursor: pointer;
}

.discount-preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.discount-preset-chip {
  padding: 0.32rem 0.68rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.discount-preset-chip:hover {
  border-color: rgba(224, 26, 44, 0.4);
  color: var(--text-primary);
}

.discount-preset-chip.active {
  background: var(--brand-red, #e01a2c);
  border-color: var(--brand-red, #e01a2c);
  color: #ffffff;
}

.discount-mode-section-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.discount-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.discount-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.68rem 0.72rem;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}

.discount-mode-card .material-symbols-rounded {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.discount-mode-card strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
}

.discount-mode-card span:not(.material-symbols-rounded) {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.25;
}

.discount-mode-card.active {
  border-color: var(--brand-red, #e01a2c);
  background: rgba(224, 26, 44, 0.08);
}

.discount-mode-card.active .material-symbols-rounded {
  color: var(--brand-red, #e01a2c);
}

.discount-units-helper {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.quick-discount-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 768px) {
  .product-discount-badge {
    top: 0.45rem;
    left: 0.45rem;
    padding: 0.22rem 0.5rem;
    font-size: 0.66rem;
  }

  .product-promo-meta-pill {
    font-size: 0.65rem;
    padding: 0.16rem 0.46rem;
  }

  .discount-mode-grid {
    grid-template-columns: 1fr;
  }

  .discount-mode-card {
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
  }

  .quick-discount-modal-card {
    padding: 1.2rem 1.05rem;
    max-height: 90vh;
    overflow-y: auto;
  }

  .discount-preview-box {
    flex-wrap: wrap;
    padding: 0.7rem 0.8rem;
  }

  .admin-catalog-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .admin-catalog-actions button {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* Despliegue en línea del formulario Editar directamente debajo de cada fila del catálogo */
#adminCatalogTopFormSlot > .admin-catalog-form-card:not(.hidden) {
  margin-bottom: 1.35rem;
}

.admin-catalog-item-wrap {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-catalog-item-wrap.is-editing {
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.admin-catalog-item-wrap.is-editing > .admin-catalog-row {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-color: rgba(224, 26, 44, 0.42);
  border-bottom-color: var(--border-subtle);
}

.admin-catalog-form-card.is-inline-drawer {
  margin: 0 !important;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--radius-lg, 18px) !important;
  border-bottom-right-radius: var(--radius-lg, 18px) !important;
  border-color: rgba(224, 26, 44, 0.42) !important;
  background-color: var(--bg-card);
  padding: 1.35rem 1.4rem;
}

/* Al editar en línea debajo de un producto, el único botón de cierre es '^ Cerrar' en la fila superior */
.admin-catalog-form-card.is-inline-drawer #btnCancelCatalogForm {
  display: none !important;
}

.admin-catalog-form-card.is-expanding-inline {
  animation: adminInlineEditReveal 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

@keyframes adminInlineEditReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-secondary.is-editing-active {
  background: rgba(224, 26, 44, 0.12) !important;
  border-color: rgba(224, 26, 44, 0.38) !important;
  color: var(--brand-red, #e01a2c) !important;
}

@media (max-width: 768px) {
  .admin-catalog-form-card.is-inline-drawer {
    padding: 1rem 0.95rem;
  }
}