:root {
  /* RestauranteApp DEMO — light por defecto
     Logo/primario #C34024 · Header cálido apetitoso (misma familia cromática) */
  --color-primary: #C34024;
  --color-primary-dark: #A8321E;
  --color-primary-light: #F5E6E2;
  --color-secondary: #E87A32;
  --color-secondary-light: #FFF4ED;
  --color-success: #2E7D32;
  --color-warning: #F9A825;
  --color-accent-contrast: #C34024;
  --color-accent-contrast-dark: #A8321E;
  --color-bg: #FAFAFA;
  --color-text: #2C2C2C;
  --color-text-muted: #6B6B6B;
  --color-surface: #FFFFFF;
  --color-border: #E0E0E0;
  --color-header: #C34024;
  --color-footer: #F5E6E2;
  --color-footer-text: #2C2C2C;
  --color-footer-muted: #5A5A5A;
  --color-chrome-text: #ffffff;
  --color-chrome-muted: rgba(255, 255, 255, 0.9);
  --color-footer-link: #A8321E;
  --color-row-odd: #FFFFFF;
  --color-row-even: #F5E6E2;
  --color-row-bar-odd: #C34024;
  --color-desc: #6B6B6B;
  --color-input-bg: #FFFFFF;
  --color-modal-bg: #FFFFFF;
  --color-drawer: #FFFFFF;
  --color-sticky: #C34024;
  --color-glow: rgba(195, 64, 36, 0.2);
  --color-card: #FFFFFF;
  --color-alert-bg: #FFF4ED;
  --color-alert-text: #A8321E;
  --color-alert-border: #E87A32;
  --color-on-accent: #FFFFFF;
  --color-price: #C34024;
  --color-hairline: rgba(44, 44, 44, 0.12);
  --color-ficha: #FFFFFF;
  --color-ficha-border: #F5E6E2;
  --shadow-ficha: 0 8px 18px rgba(195, 64, 36, 0.12);
  --color-panel: #FFFFFF;
  --color-block: #F5E6E2;
  --color-scrollbar-track: #F5E6E2;
  --color-scrollbar-thumb: rgba(195, 64, 36, 0.35);
  --scrollbar-size: 5px;
  --color-btn-ghost: #FFFFFF;
  --color-btn-ghost-border: #E0E0E0;
  --color-qty: #2C2C2C;
  --color-demo-bg: #FBBF24;
  --color-demo-text: #5C2A16;
  --shadow-header: 0 2px 12px rgba(195, 64, 36, 0.28);
  --radius: 0.9rem;
  --tap: 48px;
  --font-ui: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: "Fredoka", "Nunito", sans-serif;
  --font-head: "Oswald", "Nunito", sans-serif;
  color-scheme: light;
}

html[data-theme="dark"] {
  --color-primary: #C34024;
  --color-primary-dark: #A8321E;
  --color-primary-light: #F5E6E2;
  --color-secondary: #E87A32;
  --color-secondary-light: #FFF4ED;
  --color-accent-contrast: #C34024;
  --color-accent-contrast-dark: #A8321E;
  --color-bg: #1a1210;
  --color-text: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.68);
  --color-surface: #241816;
  --color-border: #C34024;
  --color-header: #C34024;
  --color-footer: #140e0c;
  --color-footer-text: rgba(255, 255, 255, 0.92);
  --color-footer-muted: rgba(255, 255, 255, 0.72);
  --color-chrome-text: #ffffff;
  --color-chrome-muted: rgba(255, 255, 255, 0.82);
  --color-footer-link: #E87A32;
  --color-row-odd: #2a1c18;
  --color-row-even: #321f1a;
  --color-row-bar-odd: #E0E0E0;
  --color-desc: rgba(255, 255, 255, 0.88);
  --color-input-bg: #2a1c18;
  --color-modal-bg: #241816;
  --color-drawer: #241816;
  --color-sticky: #C34024;
  --color-glow: rgba(195, 64, 36, 0.28);
  --color-card: rgba(36, 24, 22, 0.88);
  --color-alert-bg: rgba(195, 64, 36, 0.75);
  --color-alert-text: #FFFFFF;
  --color-alert-border: #E87A32;
  --color-on-accent: #FFFFFF;
  --color-price: #E87A32;
  --color-hairline: rgba(255, 255, 255, 0.08);
  --color-ficha: #2a1c18;
  --color-ficha-border: rgba(195, 64, 36, 0.35);
  --shadow-ficha: 0 10px 22px rgba(0, 0, 0, 0.42);
  --color-panel: rgba(36, 24, 22, 0.72);
  --color-block: rgba(26, 18, 16, 0.85);
  --color-scrollbar-track: #2a1c18;
  --color-scrollbar-thumb: rgba(255, 255, 255, 0.28);
  --color-btn-ghost: #2a1c18;
  --color-btn-ghost-border: rgba(255, 255, 255, 0.25);
  --color-qty: #FFFFFF;
  --color-demo-bg: #FBBF24;
  --color-demo-text: #5C2A16;
  --shadow-header: 0 2px 12px rgba(195, 64, 36, 0.35);
  color-scheme: dark;
}

/* Compat: reglas antiguas html[data-theme="light"] siguen válidas (light = :root) */
html[data-theme="light"] {
  color-scheme: light;
}

.icon-theme-sun,
.icon-theme-moon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.icon-theme-sun svg,
.icon-theme-moon svg {
  display: block;
}

.icon-theme-moon { display: none; }
html[data-theme="light"] .icon-theme-sun { display: none; }
html[data-theme="light"] .icon-theme-moon { display: inline-flex; }
html:not([data-theme="dark"]) .icon-theme-sun { display: none; }
html:not([data-theme="dark"]) .icon-theme-moon { display: inline-flex; }
html[data-theme="dark"] .icon-theme-sun { display: inline-flex; }
html[data-theme="dark"] .icon-theme-moon { display: none; }
html[data-work="ops"][data-work-theme="light"] .icon-theme-sun { display: none; }
html[data-work="ops"][data-work-theme="light"] .icon-theme-moon { display: inline-flex; }
html[data-work="ops"][data-work-theme="dark"] .icon-theme-sun { display: inline-flex; }
html[data-work="ops"][data-work-theme="dark"] .icon-theme-moon { display: none; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--color-text);
  background: var(--color-bg);
  /* Reduce zoom por doble toque en iOS/Android (POS / móvil). */
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

a, button, [role="button"], label, summary {
  touch-action: manipulation;
}

/*
  iPhone/iPad: si el input tiene < 16px, Safari hace zoom al enfocar.
  En táctil forzamos 16px mínimo para mantener el zoom de la pantalla.
*/
@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

.app-shell {
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

.app-header,
.app-footer {
  flex-shrink: 0;
  width: 100%;
  z-index: 40;
}

.app-header {
  background: var(--color-header);
  color: var(--color-chrome-text);
  border-bottom: 1px solid var(--color-primary);
  box-shadow: var(--shadow-header);
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: nowrap;
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
  padding-bottom: 0.55rem;
}

.shell-inner {
  width: min(72rem, calc(100% - 1.5rem));
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.app-scroll-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse 42% 30% at 0% 0%, var(--color-glow), transparent 62%),
    radial-gradient(ellipse 38% 26% at 100% 0%, var(--color-glow), transparent 58%),
    var(--color-bg);
}

.app-shell ::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.app-shell ::-webkit-scrollbar-track {
  background: transparent;
}

.app-shell ::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 999px;
  border: 0;
  min-height: 2rem;
}

.app-shell ::-webkit-scrollbar-thumb:hover,
.app-shell ::-webkit-scrollbar-thumb:active {
  background: var(--color-scrollbar-thumb);
  filter: brightness(0.85);
  border-radius: 999px;
  border: 0;
}

.app-shell ::-webkit-scrollbar-button,
.app-shell ::-webkit-scrollbar-button:single-button,
.app-shell ::-webkit-scrollbar-button:vertical:start:decrement,
.app-shell ::-webkit-scrollbar-button:vertical:end:increment {
  display: none;
  width: 0;
  height: 0;
}

.app-shell ::-webkit-scrollbar-corner {
  background: transparent;
}

.app-footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
  font-size: 0.74rem;
  border-top: 1px solid rgba(195, 64, 36, 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  padding-right: var(--app-scroll-gutter, 0px);
}

.app-footer-inner {
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem 0.75rem;
  min-height: 2.25rem;
  padding: 0.35rem 0;
  box-sizing: border-box;
}

.footer-left,
.footer-center,
.footer-credit {
  min-width: 0;
}

.footer-left {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
}

.footer-center {
  justify-self: center;
  text-align: center;
  white-space: nowrap;
}

.footer-credit {
  justify-self: end;
  text-align: right;
}

.footer-version,
.footer-app-name,
.footer-copy-word,
.footer-copy-symbol,
.footer-dev-by {
  color: var(--color-footer-muted);
}

.footer-mks-full,
.footer-mks-short {
  color: var(--color-footer-text);
  font-weight: 700;
}

.footer-link,
.footer-brand-link,
.app-footer a {
  color: var(--color-footer-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.app-footer a:hover,
.app-footer a:focus-visible {
  color: var(--color-primary-dark);
}

.footer-copy-symbol,
.footer-mks-short { display: none; }

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.header-brand-ico {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: block;
}

.header-brand-logo {
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.logo-on-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  padding: 18%;
}

.header-brand-logo-wrap {
  width: 3.55rem;
  height: 3.55rem;
  padding: 0.55rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.header-brand-logo-wrap .header-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-brand-text {
  min-width: 0;
}

.header-brand-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.brand-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-chrome-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: auto;
}

.brand-sub {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--color-chrome-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  padding: 0.18rem 0.42rem;
  border-radius: 0.35rem;
  color: var(--color-demo-text);
  background: var(--color-demo-bg);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.demo-badge__short { display: none; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.header-user {
  font-size: 0.75rem;
  color: var(--color-chrome-muted);
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-header-action {
  min-height: var(--tap);
  padding: 0 0.85rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--color-chrome-text);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}

.btn-header-action:hover { background: rgba(195, 64, 36, 0.18); }
.btn-header-action:active { transform: scale(0.98); }

.btn-header-icon {
  position: relative;
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--color-chrome-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-header-icon:hover { background: rgba(195, 64, 36, 0.18); }
.btn-header-icon:active { transform: scale(0.98); }

.btn-header-acceso {
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-color: var(--color-primary);
}

.btn-header-acceso:hover { background: #ffaa33; filter: none; }

.btn-header-pedido {
  width: var(--tap);
  min-width: var(--tap);
  padding: 0;
  gap: 0;
}

/* Solo icono + badge; el texto "Pedido" no se muestra en ninguna resolución. */
.header-pedido-label {
  display: none;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1;
}

.header-pedido-badge {
  position: absolute;
  top: -0.28rem;
  right: -0.28rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #C62828;
  color: #ffffff;
  border: 2px solid var(--color-header);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.05rem;
  text-align: center;
}

.nav-burger {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--color-chrome-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-burger-bars,
.nav-burger-bars::before,
.nav-burger-bars::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  position: relative;
  content: "";
}

.nav-burger-bars::before { position: absolute; top: -6px; }
.nav-burger-bars::after { position: absolute; top: 6px; }

.header-drawer {
  display: none;
  background: var(--color-drawer);
  padding: 0.65rem 0.75rem 0.85rem;
  border-top: 1px solid rgba(195, 64, 36, 0.35);
}

.drawer-user {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--color-chrome-text);
}

.header-drawer .btn-block {
  margin-top: 0.35rem;
}

.btn-pedido-drawer {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-pedido-drawer .header-pedido-badge {
  position: static;
  transform: none;
  top: auto;
  right: auto;
  border-color: #000;
  min-width: 1.35rem;
  height: 1.35rem;
  line-height: 1.15rem;
}

.home-menu {
  padding-bottom: 0.5rem;
}

.home-hero {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 0 1rem;
  min-height: clamp(14rem, 38vw, 22rem);
  border-radius: 1.15rem;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

.home-hero--studio {
  grid-template-columns: 1fr;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.9, 0.28, 1),
    transform 4.2s cubic-bezier(0.2, 0.7, 0.25, 1);
  will-change: opacity, transform;
  pointer-events: none;
}

.home-hero-bg-img.is-active {
  opacity: 1;
  transform: scale(1.02);
  z-index: 1;
  animation: homeHeroPulse 4.2s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(20, 10, 8, 0.55) 0%, rgba(20, 10, 8, 0.72) 55%, rgba(20, 10, 8, 0.88) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(195, 64, 36, 0.35), transparent 62%);
  pointer-events: none;
}

.home-hero-center {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: min(28rem, 92%);
  text-align: center;
  padding: 1.35rem 0.75rem 1.5rem;
}

.home-logo-wrap {
  width: clamp(7.25rem, 20vw, 11.5rem);
  height: clamp(7.25rem, 20vw, 11.5rem);
  padding: 1rem;
  margin: 0 auto 0.85rem;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.35),
    0 14px 36px rgba(0, 0, 0, 0.45);
  animation: homeLogoPop 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.home-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  margin: 0;
}

.home-hero-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFF4ED;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  animation: homeFadeUp 0.7s ease 0.15s both;
}

.home-elige {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 4.8vw, 2.85rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: #FFFFFF;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
  animation: homeFadeUp 0.75s ease 0.25s both;
}

.home-hero-lead {
  margin: 0.55rem 0 0;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 600;
  color: rgba(255, 244, 237, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: homeFadeUp 0.8s ease 0.35s both;
}

@keyframes homeHeroPulse {
  from { transform: scale(1.1) translate3d(1.4%, -0.6%, 0); }
  to { transform: scale(1.02) translate3d(-0.8%, 0.8%, 0); }
}

@keyframes homeHeroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.2%, 1%, 0); }
}

@keyframes homeLogoPop {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes homeFadeUp {
  from { opacity: 0; transform: translateY(0.55rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* picks Res/Pollo retirados del DEMO */
.home-pick { display: none; }

.home-grid {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.home-grid > .home-panel,
.home-side {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.home-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  min-width: 0;
  order: 1;
}

.home-grid > .home-panel {
  order: 2;
}

.home-side {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  order: 3;
  padding: 0;
}

.home-side .home-panel {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.home-photo {
  margin: 0;
  min-width: 0;
}

.home-photo-slot {
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, #2a1612 0%, #140e0c 100%);
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(195, 64, 36, 0.18);
  border: 1px solid rgba(245, 230, 226, 0.12);
}

.home-photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.45s ease;
}

.home-photo-slot:hover img {
  transform: scale(1.05);
}

.home-panel {
  border: 1px solid var(--color-primary);
  border-radius: 15px;
  padding: 0.7rem 0.75rem 0.55rem;
  background: var(--color-panel);
  box-sizing: border-box;
}

.home-cat-slot {
  height: 3.35rem;
  margin: 0 0 0.45rem;
}

.home-cat-slot img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.home-panel-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.home-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: burger;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  box-sizing: border-box;
}

ol.home-list,
ul.home-list {
  padding-inline: 0;
  margin-inline: 0;
}

.home-list li {
  margin-bottom: 0;
  border-radius: 0.55rem;
  overflow: hidden;
}

.home-list:not(.home-list--plain) li {
  counter-increment: burger;
}

.home-list:not(.home-list--plain) .home-item-top span::before {
  content: counter(burger) ". ";
  color: var(--color-price);
}

.home-list > li:nth-child(odd) .home-item-btn,
.home-list > li:nth-child(odd).home-item--locked {
  background: var(--color-row-odd);
  box-shadow: inset 4px 0 0 var(--color-row-bar-odd);
}

.home-list > li:nth-child(even) .home-item-btn,
.home-list > li:nth-child(even).home-item--locked {
  background: var(--color-row-even);
  box-shadow: inset 4px 0 0 var(--color-primary);
}

.home-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.home-item-top strong {
  color: var(--color-price);
  flex-shrink: 0;
}

.home-item-top em {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #000;
  background: var(--color-primary);
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.25rem;
}

.home-list p {
  margin: 0.15rem 0 0;
  font-size: 0.74rem;
  color: var(--color-desc);
  line-height: 1.35;
  text-transform: uppercase;
}

.home-item-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.65rem 0.5rem 0.85rem;
  border: 1px solid var(--color-hairline);
  border-radius: 0.55rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-item-btn:hover {
  border-color: var(--color-primary);
  filter: brightness(1.12);
}

.home-item-btn:active { transform: scale(0.99); }

.home-item-btn:focus-visible {
  outline: 2px solid #ffe082;
  outline-offset: 2px;
}

.home-item--locked {
  opacity: 1;
  padding: 0.5rem 0.65rem 0.5rem 0.85rem;
  border: 1px solid var(--color-hairline);
  border-radius: 0.55rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0 0.65rem;
}

.chip {
  min-height: var(--tap);
  padding: 0 0.75rem;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
}

.chip.is-on {
  background: var(--color-primary);
  color: var(--color-on-accent);
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.5rem 0 0.7rem;
}

.qty-row strong {
  min-width: 2rem;
  text-align: center;
  font-size: 1.25rem;
}

.protein-choice {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}

.variant-pick-label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}

.complemento-checks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.complemento-check {
  align-items: flex-start;
}

.ticket-item .ticket-extra {
  display: block;
  padding-left: 0.5rem;
  opacity: 0.9;
}

.admin-tipo-radios {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.protein-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.35rem;
  min-height: var(--tap);
  padding: 0.28rem 0.22rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.65rem;
  background: #000;
  color: var(--color-primary);
  cursor: pointer;
}

.protein-pick img {
  display: block;
  width: 100%;
  height: 4.1rem;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
}

.protein-pick.is-active {
  background: rgba(195, 64, 36, 0.16);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.protein-pick:hover { filter: brightness(1.08); }
.protein-pick:active { transform: scale(0.98); }

.pedido-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.1rem;
  border-bottom: 1px solid rgba(195, 64, 36, 0.28);
}

.pedido-line-main {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  flex: 1 1 auto;
}

.pedido-line-qty {
  flex-shrink: 0;
  min-width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  background: var(--color-primary);
  color: #000;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pedido-line-info {
  min-width: 0;
  flex: 1 1 auto;
}

.pedido-line-subtotal {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  padding-top: 0.15rem;
}

.pedido-list-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.65rem;
  padding: 0.85rem 0.15rem 0.25rem;
  border-top: 2px solid rgba(195, 64, 36, 0.45);
}

.pedido-list-envio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.55rem;
  padding: 0.15rem 0.15rem 0;
  font-size: 0.92rem;
  color: #5C4A32;
}

.pedido-list-envio strong {
  font-weight: 700;
  color: #1A1208;
}

.pedido-list-total-label {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Modal home es crema (#FFF8F0); no usar --color-text (blanco en dark). */
  color: #1A1208;
}

.pedido-list-total-amt {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: #8B6914;
  white-space: nowrap;
}

.pedido-line-info strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.25;
  color: #1A1208;
}

.pedido-line-meta {
  display: block;
  margin-top: 0.18rem;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9A3412;
}

.pedido-line p {
  margin: 0.22rem 0 0;
  color: #5C4636;
  font-size: 0.84rem;
  line-height: 1.35;
}

.pedido-line-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.1rem;
}

.pedido-line-actions .btn-icon {
  min-width: var(--tap);
  min-height: var(--tap);
  color: #1A1208;
}

.pedido-list-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

/* Confirmaciones: icono + texto breve, misma fila, extremos */
.confirm-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-top: 0.85rem;
  width: 100%;
}

.confirm-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-ficha, #fff);
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.confirm-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  display: block;
}

.confirm-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-ficha, #1c1c1c));
}

.confirm-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent, #1A1208);
}

.confirm-btn--primary:hover {
  filter: brightness(1.05);
  background: var(--color-primary);
}

.confirm-btn--danger {
  border-color: #C62828;
  color: #FFCDD2;
  background: #3A1515;
}

.confirm-btn--danger:hover {
  filter: brightness(1.08);
  background: #3A1515;
}

.confirm-btn--wa {
  background: #25D366;
  border-color: #1EBE57;
  color: #FFFFFF;
}

.confirm-btn--wa:hover {
  filter: brightness(1.06);
  background: #25D366;
}

html[data-work="ops"][data-work-theme="light"] .confirm-btn--wa {
  background: #25D366;
  border-color: #128C7E;
  color: #FFFFFF;
}

.confirm-btn[hidden] {
  display: none !important;
}

.confirm-btn:disabled,
.confirm-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  pointer-events: none;
}

.confirm-btn.is-sending,
.confirm-btn.is-sending:disabled {
  opacity: 1;
  cursor: wait;
  pointer-events: none;
}

.confirm-actions .confirm-btn--primary {
  margin-left: auto;
}

.confirm-actions--end {
  justify-content: flex-end;
}

.confirm-actions--end .confirm-btn--primary {
  margin-left: 0;
}

html[data-work="ops"][data-work-theme="light"] .confirm-btn--danger {
  background: #FFEBEE;
  border-color: #C62828;
  color: #B71C1C;
}

.pedido-list-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.75rem;
  align-items: stretch;
}

.pedido-list-footer #btnPedidoLimpiar {
  justify-self: stretch;
}

.pedido-list-footer #btnPedidoWhatsapp {
  justify-self: stretch;
  grid-column: 2;
}

.pedido-list-footer #btnPedidoLimpiar[hidden] {
  display: none !important;
}

/* z-index de modales: ver reglas .modal.modal--* junto a .modal */

.modal-dialog--confirm { width: min(22rem, 100%); }

/* HOME · Pedido recibido (post-envío) */
.modal-dialog--pedido-espera {
  width: min(24rem, 100%);
  text-align: center;
}

.pedido-espera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.pedido-espera-hero {
  margin: 0.1rem 0 0.15rem;
  width: min(12.5rem, 72%);
  aspect-ratio: 1 / 1;
  border-radius: 0.85rem;
  overflow: hidden;
  background: #FFF1DC;
  border: 1px solid rgba(195, 64, 36, 0.45);
  box-shadow: 0 8px 22px rgba(26, 18, 8, 0.12);
}

.pedido-espera-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pedido-espera-lead {
  margin: 0.15rem 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 3.6vw, 1.28rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #1A1208;
}

.pedido-espera-folio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  margin: 0.2rem 0 0.15rem;
  padding: 0.7rem 0.85rem 0.8rem;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #FFF7E0 0%, #FFE8A8 100%);
  border: 2px solid #C34024;
  box-shadow: 0 0 0 3px rgba(195, 64, 36, 0.18);
  box-sizing: border-box;
}

.pedido-espera-folio-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A3412;
}

.pedido-espera-folio-val {
  font-family: var(--font-head);
  font-size: clamp(1.55rem, 6vw, 1.95rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #1A1208;
}

.pedido-espera-text {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  color: #3D2A1C;
}

.pedido-espera-text strong {
  color: #9A3412;
}

.pedido-espera-hint {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: #6B5344;
}

.pedido-espera-hint strong {
  color: #BF360C;
}

.pedido-espera .confirm-actions {
  margin-top: 0.45rem;
  width: 100%;
}

.confirm-pedido {
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  background: #FFFFFF;
  border: 1px solid #C9D0D6;
  color: #1C2228;
  font-size: 0.92rem;
  line-height: 1.25;
  word-break: break-word;
}

.confirm-pedido-folio {
  display: block;
  margin-top: 0.12rem;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C2410C;
}

.confirm-wa-callout {
  margin: 0 0 0.6rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.55rem;
  border-width: 2px;
  border-style: solid;
  line-height: 1.3;
}

.confirm-wa-callout-kicker {
  display: block;
  margin-bottom: 0.28rem;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.confirm-wa-callout-body {
  display: block;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.confirm-wa-callout--repartidor {
  background: #E3F2FD;
  border-color: #1565C0;
  color: #0D47A1;
}

.confirm-wa-callout--repartidor .confirm-wa-callout-kicker {
  color: #1565C0;
}

.confirm-wa-callout--cliente {
  background: #E8F5E9;
  border-color: #2E7D32;
  color: #1B5E20;
}

.confirm-wa-callout--cliente .confirm-wa-callout-kicker {
  color: #2E7D32;
}

#posActionConfirmModal #posActionConfirmText {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.modal-dialog--client {
  width: min(44rem, calc(100% - 0.75rem));
  max-width: calc(100vw - 0.75rem);
  max-height: min(94dvh, 58rem);
  overflow-x: hidden;
  box-sizing: border-box;
}

.pos-client-facts {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pos-client-facts p {
  margin: 0 0 0.28rem;
  font-size: 0.88rem;
  line-height: 1.3;
}

.pos-client-facts p:last-child {
  margin-bottom: 0;
}

.pos-client-map-wrap {
  margin: 0.35rem 0 0.55rem;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.pos-client-map {
  height: min(42dvh, 22rem);
  margin-top: 0.35rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.pos-client-map .leaflet-container {
  width: 100% !important;
  max-width: 100%;
}

.pos-client-nopin {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.82rem;
  color: #5C4636;
}

.pos-client-send {
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(47, 53, 59, 0.12);
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.pos-client-send .protein-kicker {
  margin-bottom: 0.4rem;
}

.pos-client-send .dom-chip-row {
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
  max-width: 100%;
}

.pos-client-send .confirm-btn {
  width: auto;
  margin-left: auto;
  display: inline-flex;
}

.pos-client-actions {
  margin-top: 0.65rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 0.15rem 0.15rem;
}

.pos-client-actions .confirm-btn {
  flex: 0 1 auto;
  max-width: 42%;
}

.pos-client-actions .confirm-btn--wa {
  margin-left: 0;
  margin-right: 0;
}

.pos-client-actions .confirm-btn--primary {
  margin-left: auto;
}

.pos-client-actions .confirm-btn[hidden] {
  display: none !important;
}

.pos-client-wa {
  margin: 0.15rem 0 0.45rem;
  min-width: 0;
  max-width: 100%;
}

.pos-client-wa-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}

.pos-client-wa-text {
  margin: 0 !important;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pos-client-wa-edit {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--color-border);
  border-radius: 0.45rem;
  background: var(--color-ficha);
  color: var(--color-text);
}

.pos-client-wa-form {
  margin-top: 0.4rem;
}

.pos-client-wa-field {
  margin-bottom: 0;
}

.pos-client-wa-edit-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
}

.pos-client-wa-edit-row input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.pos-client-wa-save {
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  min-width: 2.45rem;
  min-height: 2.45rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.45rem;
  background: var(--color-primary);
  color: var(--color-on-accent, #1A1208);
}

.pos-client-wa-save:hover {
  filter: brightness(1.05);
}

#posClientAlert {
  margin: 0.35rem 0;
}

#posClientDataModal {
  overflow-x: hidden;
}

#posClientDataModal .modal-dialog {
  overflow-x: hidden;
}

.home-wa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  width: 100%;
  min-height: var(--tap);
  margin: 0;
  border: 0;
  border-radius: 15px;
  background: var(--color-primary);
  color: var(--color-on-accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.8vw, 1.28rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

.home-wa-title {
  display: block;
}

.home-wa-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.home-wa-ico {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.pedido-sticky {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding-right: var(--app-scroll-gutter, 0px);
  z-index: 35;
  background: var(--color-sticky);
  border-top: 1px solid var(--color-primary);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.pedido-sticky-inner {
  box-sizing: border-box;
}

.pedido-sticky[hidden] {
  display: none !important;
}

.menu-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  z-index: 32;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  margin: 0;
  padding: 0.4rem 1.25rem 0.28rem;
  border: 2px solid #fff;
  border-radius: 1.15rem;
  background: var(--color-primary);
  color: #000;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 4.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 0 0 6px rgba(195, 64, 36, 0.28);
  animation: menuCueBounce 0.7s ease-in-out infinite;
}

.menu-scroll-cue-label {
  display: block;
}

.menu-scroll-cue-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: inherit;
}

.menu-scroll-cue-hand svg {
  display: block;
}

@keyframes menuCueBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    filter: brightness(1);
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.45),
      0 0 0 6px rgba(195, 64, 36, 0.28);
  }
  50% {
    transform: translateX(-50%) translateY(0.55rem);
    filter: brightness(1.18);
    box-shadow:
      0 10px 28px rgba(195, 64, 36, 0.55),
      0 0 0 14px rgba(195, 64, 36, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-scroll-cue {
    animation: none;
  }

  .home-hero-bg-img,
  .home-hero-bg-img.is-active {
    animation: none;
    transition: opacity 0.2s ease;
    transform: none;
  }
}

.home-wa:hover { filter: brightness(1.08); }

/* Flotante ventas MKS — interesados en RestauranteApp (solo menú público) */
.mks-sales-fab {
  position: fixed;
  right: max(0.85rem, env(safe-area-inset-right, 0px));
  bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.55rem 0.95rem 0.55rem 0.7rem;
  border-radius: 999px;
  background: #25D366;
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(37, 211, 102, 0.28);
  animation: mksSalesFabPulse 2.4s ease-in-out infinite;
}

.mks-sales-fab[hidden] {
  display: none !important;
}

.mks-sales-fab:hover,
.mks-sales-fab:focus-visible {
  filter: brightness(1.06);
  color: #ffffff;
  outline: none;
}

.mks-sales-fab__ico {
  flex-shrink: 0;
  display: block;
}

.mks-sales-fab__txt {
  white-space: nowrap;
}

html[data-work] .mks-sales-fab {
  display: none !important;
}

/* Grabación promocional: ?modo=mks oculta badge DEMO del header y flotante MKS; no omite sesión demo */
html[data-modo="mks"] .demo-badge,
html[data-modo="mks"] .mks-sales-fab {
  display: none !important;
}

@keyframes mksSalesFabPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(37, 211, 102, 0.28); }
  50% { transform: scale(1.04); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), 0 0 0 6px rgba(37, 211, 102, 0.18); }
}

@media (max-width: 420px) {
  .mks-sales-fab {
    bottom: calc(6.1rem + env(safe-area-inset-bottom, 0px));
    padding: 0.55rem 0.75rem 0.55rem 0.65rem;
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mks-sales-fab {
    animation: none;
  }
}

.screen {
  display: block;
  padding: 0.75rem 0 1rem;
}

.screen[hidden],
.header-nav[hidden],
.nav-burger[hidden],
.header-drawer[hidden],
.header-user[hidden],
.drawer-user[hidden],
.btn-header-action[hidden],
.btn-header-icon[hidden],
.btn-icon[hidden],
.floating-tip[hidden],
.header-pedido-badge[hidden],
.home-wa[hidden],
.pedido-sticky[hidden],
.header-drawer .btn[hidden],
.form-alert[hidden],
.empty-msg[hidden],
.modal[hidden],
.hint-overlay[hidden],
.menu-scroll-cue[hidden],
#footerTerminos[hidden],
#inboxLoadedNote[hidden],
#consumoLoadedNote[hidden],
#posClientMapWrap[hidden],
#posClientSendWrap[hidden],
#posClientNoPin[hidden],
#posEnvioModal[hidden],
#posEnvioRechazoModal[hidden],
#posCocinaModal[hidden],
#pedidoDomicilioBox[hidden],
#pedidoDomListWrap[hidden],
#pedidoDomNuevoBox[hidden],
.pedido-map[hidden],
#inboxBadge[hidden],
.ops-badge[hidden],
.inbox-toast[hidden],
.inbox-confirm-banner[hidden],
#kitchenPrintPack[hidden],
#btnInboxPrintAllKitchen[hidden],
#btnInboxDetailPrint[hidden],
#btnInboxDetailLoad[hidden],
#btnInboxDetailResend[hidden],
#btnInboxDetailListo[hidden],
#btnInboxDetailCancel[hidden],
#btnConsumoListo[hidden],
#btnConsumoImprimir[hidden],
#btnEnvioListo[hidden],
#btnEnvioWhatsapp[hidden],
#btnEnvioPagado[hidden],
#btnEnvioRechazado[hidden],
#posEnvioAssignWrap[hidden],
#btnAceptarPedido[hidden],
#btnAceptarCancelar[hidden],
#btnPosActionAlt[hidden] {
  display: none !important;
}

.screen--center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 1.25rem;
}

#screen-login.screen--center {
  align-items: center;
  justify-content: center;
  min-height: 100%;
  min-height: calc(100dvh - 7.5rem);
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.screen-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-card {
  width: min(28rem, 100%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.75rem 0.85rem;
}

.login-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
  width: 100%;
}

.login-action-btn {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.5rem;
  background: #000;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.login-action-btn:hover {
  background: rgba(195, 64, 36, 0.18);
}

.login-action-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-accent, #1A1208);
  border-color: var(--color-primary);
}

.login-action-btn--primary:hover {
  filter: brightness(1.05);
  background: var(--color-primary);
}

#posActionConfirmModal .confirm-actions {
  margin-top: 0.85rem;
}

.login-hint {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  color: var(--color-text-muted);
}

/* Credenciales visibles solo con SesionID demo activa */
.login-demo-access {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.7rem 0.7rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-block) 88%, transparent);
}

.login-demo-access-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #c34024);
}

.login-demo-access-title {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
}

.login-demo-access-clave {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  color: var(--color-text);
}

.login-demo-access-clave strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

.login-demo-access-users {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.login-demo-user-btn {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.login-demo-user-btn:hover,
.login-demo-user-btn:focus-visible {
  border-color: var(--color-primary, #c34024);
  outline: none;
}

.block-card {
  background: var(--color-block);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin-bottom: 0.65rem;
}

.block-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  margin-bottom: 0.65rem;
}

.field > span,
.field-kicker,
.protein-kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.42rem;
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-primary);
}

.field > span::before,
.field-kicker::before,
.protein-kicker::before,
.kpi-label::before {
  content: "";
  flex-shrink: 0;
  width: 0.3rem;
  height: 0.92em;
  border-radius: 999px;
  background: linear-gradient(180deg, #E87A32 0%, #C34024 52%, #A8321E 100%);
  box-shadow: 0 0 10px rgba(195, 64, 36, 0.5);
}

.field-kicker {
  margin: 0 0 0.42rem;
}

.field em {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--color-text-muted);
}

.field input,
.field select,
.field textarea {
  min-height: var(--tap);
  padding: 0 0.7rem;
  border: 1px solid rgba(195, 64, 36, 0.45);
  border-radius: 0.45rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-input-bg);
  box-sizing: border-box;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.35rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1.4 0.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.75rem 0.5rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.client-grid {
  display: grid;
  gap: 0.15rem 0.65rem;
}

.protein-picker {
  margin-bottom: 0.75rem;
}

.protein-kicker {
  display: flex;
  justify-content: center;
  align-self: stretch;
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
}

.protein-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.protein-btn {
  min-height: var(--tap);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font-weight: 800;
  cursor: pointer;
}

.protein-btn.is-active {
  background: var(--color-primary);
  color: var(--color-on-accent);
}

.protein-btn:hover { filter: brightness(1.08); }

.catalog-section {
  margin-bottom: 0.7rem;
}

.catalog-section:last-child {
  margin-bottom: 0;
}

.catalog-section-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  padding: 0.5rem 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: #000;
  min-width: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.product-emoji {
  font-size: 2.5rem;
  line-height: 1;
}

.product-card h3 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.product-desc {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--color-text-muted);
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-badge {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  background: var(--color-primary);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
}

.product-price {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-price);
}

.btn-add {
  min-height: var(--tap);
  min-width: var(--tap);
  width: 100%;
  border: 0;
  border-radius: 0.45rem;
  background: var(--color-primary);
  color: #000;
  font-size: 1.35rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-add:hover { filter: brightness(1.08); }
.btn-add:active { transform: scale(0.97); }

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.cart-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-hairline);
}

.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.btn-qty {
  width: 2.1rem;
  height: 2.1rem;
  min-height: 2.1rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.35rem;
  background: #000;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  margin: 0.35rem 0 0.55rem;
}

.cart-total-row strong {
  color: var(--color-primary);
}

.form-alert {
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.4rem;
  background: var(--color-alert-bg);
  border: 1px solid var(--color-alert-border);
  color: var(--color-alert-text);
  font-size: 0.85rem;
  font-weight: 700;
}

.btn {
  min-height: var(--tap);
  padding: 0 0.95rem;
  border: 0;
  border-radius: 0.5rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  filter: none;
  transform: none;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color: #000;
}

.btn-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid var(--color-primary);
}

.btn-ghost {
  background: #141414;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-block { width: 100%; }

.ticket-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
}

.ticket-print-pack {
  width: min(80mm, 100%);
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.7rem 0.55rem 0.85rem;
  box-sizing: border-box;
}

.ticket-sheet {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  border: 1px solid #d8d8d8;
  border-radius: 0;
  padding: 0.7rem 0.65rem 0.8rem;
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.ticket-copy-label {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
  color: #333;
}

.ticket-kitchen-who {
  margin: 0 0 0.12rem;
  font-size: 1.02rem;
  font-weight: 800;
  color: #111;
}

.ticket-kitchen-banner {
  display: block;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1.15;
  margin: 0 0 0.45rem;
  padding: 0.4rem 0.25rem;
  border: 2.5px solid #111;
  background: #111;
  color: #fff;
  text-transform: uppercase;
}

.ticket-solicitado-banner {
  display: block;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.15;
  margin: 0 0 0.4rem;
  padding: 0.35rem 0.25rem;
  border: 2px solid #111;
  background: #fff;
  color: #111;
  text-transform: uppercase;
}

.ticket-copy-label--solicitado {
  letter-spacing: 0.14em;
}

.ticket-kitchen-mod {
  margin: 0.2rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111;
}

.ticket-order--kitchen {
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.ticket-lines--kitchen th,
.ticket-lines--kitchen td {
  vertical-align: top;
}

.ticket-kitchen-qty {
  width: 2.4rem;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1.1;
  padding-top: 0.15rem !important;
}

.ticket-kitchen-name {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
}

.ticket-kitchen-desc {
  display: block;
  margin-top: 0.08rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #444;
}

.ticket-kitchen-extra {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #111;
}

.ticket-kitchen-note {
  display: block;
  margin-top: 0.28rem;
  padding: 0.2rem 0.25rem;
  border: 1.5px dashed #111;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111;
  background: #f3f3f3;
}

.ticket-kitchen-row + .ticket-kitchen-row td {
  border-top: 1px solid #ccc;
  padding-top: 0.45rem;
}

.ticket-foot--kitchen {
  margin-top: 0.55rem;
  font-weight: 700;
}

.ticket-sheet--kitchen {
  margin-top: 0.15rem;
}

.ticket-kitchen-phone {
  margin: 0 0 0.18rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #111;
}

.ticket-head { text-align: center; margin: 0; }
.ticket-brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
  text-transform: uppercase;
}
.ticket-tagline {
  margin: 0.12rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}
.ticket-order {
  margin: 0.15rem 0 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #111;
}
.ticket-meta {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  color: #333;
}
.ticket-client {
  font-size: 0.78rem;
}
.ticket-client p {
  margin: 0 0 0.12rem;
}
.ticket-client p:last-child {
  margin-bottom: 0;
}

.ticket-rule {
  border: 0;
  border-top: 1px dashed #888;
  margin: 0.4rem 0;
}

.ticket-lines {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ticket-lines th,
.ticket-lines td {
  padding: 0.18rem 0.12rem;
  vertical-align: top;
  border: 0;
  color: #111;
  font-weight: 600;
}

.ticket-lines thead th {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px dashed #888;
  padding-bottom: 0.22rem;
}

.ticket-qty {
  width: 2.1rem;
  text-align: center;
}
.ticket-item {
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ticket-item small {
  display: block;
  margin-top: 0.08rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #444;
}
.ticket-amt {
  width: 4.6rem;
  text-align: right;
  white-space: nowrap;
}

.ticket-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.ticket-table th,
.ticket-table td {
  padding: 0.4rem 0.3rem;
  text-align: left;
  border-bottom: 1px solid #d7ccc8;
  color: #000;
}

.data-table th,
.data-table td {
  padding: 0.4rem 0.3rem;
  text-align: left;
  border-bottom: 1px solid rgba(195, 64, 36, 0.28);
}

.data-table th {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.ticket-table th:nth-child(2),
.ticket-table td:nth-child(2),
.ticket-table th:nth-child(3),
.ticket-table td:nth-child(3),
.ticket-table th:nth-child(4),
.ticket-table td:nth-child(4) {
  text-align: right;
}

.ticket-totals {
  margin: 0;
  font-size: 0.78rem;
}

.ticket-tot-row,
.ticket-totals p {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.12rem 0;
}

.ticket-tot-row--grand {
  margin-top: 0.28rem;
  padding-top: 0.22rem;
  border-top: 1px dashed #888;
  font-size: 0.92rem;
  font-weight: 800;
}

.ticket-foot {
  margin: 0.45rem 0 0;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #444;
}

.ticket-cut {
  margin: 0.45rem 0;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.ticket-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin: 0;
  padding: 0.5rem 0.55rem max(0.5rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: var(--color-surface);
  border-top: 1px solid var(--color-hairline);
}

.ticket-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  font-size: 0.78rem;
  padding: 0.5rem 0.28rem;
}

.ticket-actions .pos-pay {
  min-height: 2.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  align-items: end;
  margin-bottom: 0.7rem;
}

.field--compact {
  margin: 0;
  min-width: 8.5rem;
  flex: 1 1 8.5rem;
}

/* Campos cortos (números, km, montos): caben en una celda del grid */
.field--narrow {
  min-width: 0;
}

.field--wide,
.field--span-2 {
  min-width: 0;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.kpi-card {
  background: #000;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 0.55rem 0.6rem;
}

.kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.kpi-label::before {
  height: 0.78em;
  width: 0.26rem;
}

.kpi-value {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary);
}

.table-wrap { overflow-x: auto; }

.data-table .btn-icon {
  min-height: var(--tap);
  min-width: var(--tap);
}

.btn-icon {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.15rem;
  cursor: pointer;
  border-radius: 0.4rem;
}

.btn-icon:hover { background: rgba(195, 64, 36, 0.18); }

.empty-msg {
  margin: 0.7rem 0 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.chart-wrap {
  position: relative;
  min-height: 12rem;
  height: 16rem;
}

.chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

[data-tip]::after {
  display: none !important;
  content: none !important;
}

.floating-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5000;
  max-width: min(16rem, calc(100vw - 1rem));
  padding: 0.32rem 0.55rem;
  border-radius: 0.4rem;
  background: #1A1208;
  color: #FFF8F0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

.floating-tip.is-show {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  .floating-tip.only-hover { display: none; }
}

.hint-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.hint-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hint-overlay-card {
  position: relative;
  width: min(24rem, 100%);
  max-height: min(88dvh, 44rem);
  overflow: auto;
  background: #FFF8F0;
  color: #1A1208;
  border: 1px solid var(--color-primary);
  border-radius: 1.05rem;
  padding: 0.85rem 0.85rem 1.15rem;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(195, 64, 36, 0.35);
}

.hint-overlay-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 0.75rem;
  border-radius: 0.75rem;
  background: #000;
}

.hint-overlay-kicker {
  margin: 0 0 0.25rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A3412;
}

.hint-overlay-card h2 {
  margin: 0 0 0.45rem;
  font-family: var(--font-head);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hint-overlay-card p {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.hint-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--tap);
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.hint-check input {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

/* Debe ir después de .modal: la regla base pisa z-index si va antes en el archivo */
.modal.modal--front {
  z-index: 100;
}

/* Sesión demo obligatoria: por encima del boot loader y sin cerrar */
.modal.modal--blocking {
  z-index: 100001;
}

.modal-dialog--demo-sesion {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(26.5rem, 100%);
  max-height: min(88dvh, 40rem);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 1.25rem;
  background: transparent;
  color: #fff8f0;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  isolation: isolate;
}

#demoSesionModal .modal-backdrop {
  background: rgba(8, 6, 4, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.demo-sesion-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.demo-sesion-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(1.04);
}

.demo-sesion-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 6, 4, 0.12) 0%,
      rgba(8, 6, 4, 0.22) 42%,
      rgba(8, 6, 4, 0.58) 100%
    ),
    linear-gradient(135deg, rgba(195, 64, 36, 0.18) 0%, transparent 48%);
}

.demo-sesion-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(88dvh, 40rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1rem 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
}

.demo-sesion-content::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

.demo-sesion-content::-webkit-scrollbar-track,
.demo-sesion-content::-webkit-scrollbar-corner {
  background: transparent !important;
}

.demo-sesion-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.38) !important;
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 1.5rem;
  box-shadow: none !important;
}

.demo-sesion-content::-webkit-scrollbar-thumb:hover,
.demo-sesion-content::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.52) !important;
}

.demo-sesion-content::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.demo-sesion-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.demo-sesion-brand-logo-wrap {
  flex-shrink: 0;
  display: inline-flex;
  padding: 0.22rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.demo-sesion-brand-logo {
  display: block;
  width: 2.65rem;
  height: 2.65rem;
}

.demo-sesion-brand-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.demo-sesion-brand-name {
  margin: 0;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.demo-sesion-brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(195, 64, 36, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.demo-sesion-title {
  margin: 0;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

html.demo-session-pending .app-shell,
html.demo-session-pending .mks-sales-fab {
  visibility: hidden;
  pointer-events: none;
}

html.demo-session-pending #homeHintOverlay,
html.demo-session-pending #menuScrollCue {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.demo-session-pending #homeHintOverlay:not([hidden]) {
  display: none !important;
}

#demoSesionModal .demo-sesion-explain.pedido-aviso,
#demoSesionModal .demo-sesion-explain {
  margin: 0;
  padding: 0.6rem 0.72rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.demo-sesion-explain .pedido-aviso-kicker {
  color: #ffe8e0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.demo-sesion-explain .pedido-aviso-text {
  margin-bottom: 0.45rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.demo-sesion-explain .pedido-aviso-text strong {
  color: #fff;
  font-weight: 800;
}

.demo-sesion-explain .pedido-aviso-text:last-child {
  margin-bottom: 0;
}

#demoSesionModal #formDemoSesion .field {
  margin-bottom: 0.5rem;
}

#demoSesionModal #formDemoSesion .field > span {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

#demoSesionModal #formDemoSesion .field > span::before {
  background: linear-gradient(180deg, #ffc4b0 0%, #C34024 100%);
  box-shadow: 0 0 10px rgba(195, 64, 36, 0.55);
}

#demoSesionModal #formDemoSesion .field--glass input {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

#demoSesionModal #formDemoSesion .field--glass input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

#demoSesionModal #formDemoSesion .field--glass input:focus {
  outline: none;
  border-color: rgba(255, 220, 200, 0.75);
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 0 3px rgba(195, 64, 36, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.18);
}

#demoSesionModal #formDemoSesion .form-alert {
  margin: 0.15rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: 0.55rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  background: rgba(160, 32, 16, 0.72);
  border: 1px solid rgba(255, 200, 180, 0.45);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

#demoSesionModal .confirm-actions {
  margin-top: 0.35rem;
}

#demoSesionModal .demo-sesion-confirm-box {
  margin: 0 0 0.55rem;
}

#demoSesionModal .demo-sesion-confirm-summary {
  margin: 0 0 0.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#demoSesionModal .demo-sesion-confirm-summary > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#demoSesionModal .demo-sesion-confirm-summary dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 240, 230, 0.78);
}

#demoSesionModal .demo-sesion-confirm-summary dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  word-break: break-word;
}

#demoSesionModal .demo-sesion-confirm-wa {
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

#demoSesionModal #btnDemoSesionContinuar:disabled,
#demoSesionModal #btnDemoSesionCorregir:disabled {
  opacity: 0.78;
  cursor: wait;
}

@media (max-height: 640px) {
  .demo-sesion-content {
    padding: 0.85rem 0.9rem 0.95rem;
    gap: 0.45rem;
  }

  .demo-sesion-explain .pedido-aviso-text {
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .demo-sesion-title {
    font-size: 1.15rem;
  }
}

.modal.modal--ask {
  z-index: 110;
}

.modal.modal--stack-top {
  z-index: 120;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-dialog {
  position: relative;
  width: min(32rem, 100%);
  max-height: min(80dvh, 40rem);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #FFF8F0;
  color: #1A1208;
  border: 1px solid var(--color-primary);
  border-radius: 1.05rem;
  padding: 0.85rem 0.9rem 1rem;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(195, 64, 36, 0.35);
  /* Scrollbar iOS: fina, dentro del radio del modal (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 18, 8, 0.28) transparent;
}

/* Scrollbar iOS en cualquier modal (anula .app-shell ::-webkit-scrollbar) */
.app-shell .modal .modal-dialog,
.app-shell .modal .modal-dialog .modal-body,
.modal .modal-dialog,
.modal .modal-dialog .modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 18, 8, 0.4) transparent;
}

.app-shell .modal .modal-dialog::-webkit-scrollbar,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar,
.modal .modal-dialog::-webkit-scrollbar,
.modal .modal-dialog .modal-body::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.app-shell .modal .modal-dialog::-webkit-scrollbar-track,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-track,
.app-shell .modal .modal-dialog::-webkit-scrollbar-corner,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-corner,
.modal .modal-dialog::-webkit-scrollbar-track,
.modal .modal-dialog .modal-body::-webkit-scrollbar-track,
.modal .modal-dialog::-webkit-scrollbar-corner,
.modal .modal-dialog .modal-body::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Solo la barrita (thumb fino). Sin borde que la coma en 5px. */
.app-shell .modal .modal-dialog::-webkit-scrollbar-thumb,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-thumb,
.modal .modal-dialog::-webkit-scrollbar-thumb,
.modal .modal-dialog .modal-body::-webkit-scrollbar-thumb {
  background: rgba(26, 18, 8, 0.4) !important;
  background-clip: border-box !important;
  border: 0 !important;
  border-radius: 999px !important;
  filter: none !important;
  min-height: 2rem;
  box-shadow: none !important;
}

.app-shell .modal .modal-dialog::-webkit-scrollbar-thumb:hover,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-thumb:hover,
.app-shell .modal .modal-dialog::-webkit-scrollbar-thumb:active,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-thumb:active,
.modal .modal-dialog::-webkit-scrollbar-thumb:hover,
.modal .modal-dialog .modal-body::-webkit-scrollbar-thumb:hover,
.modal .modal-dialog::-webkit-scrollbar-thumb:active,
.modal .modal-dialog .modal-body::-webkit-scrollbar-thumb:active {
  background: rgba(26, 18, 8, 0.55) !important;
  filter: none !important;
  border: 0 !important;
}

/* Quitar flechas / pads de los extremos (Windows Chrome) */
.app-shell .modal .modal-dialog::-webkit-scrollbar-button,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-button,
.modal .modal-dialog::-webkit-scrollbar-button,
.modal .modal-dialog .modal-body::-webkit-scrollbar-button,
.app-shell .modal .modal-dialog::-webkit-scrollbar-button:single-button,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-button:single-button,
.app-shell .modal .modal-dialog::-webkit-scrollbar-button:vertical:start:decrement,
.app-shell .modal .modal-dialog::-webkit-scrollbar-button:vertical:end:increment,
.app-shell .modal .modal-dialog::-webkit-scrollbar-button:vertical:start:increment,
.app-shell .modal .modal-dialog::-webkit-scrollbar-button:vertical:end:decrement,
.app-shell .modal .modal-dialog::-webkit-scrollbar-button:horizontal:start:decrement,
.app-shell .modal .modal-dialog::-webkit-scrollbar-button:horizontal:end:increment,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-button:vertical:start:decrement,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-button:vertical:end:increment,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-button:vertical:start:increment,
.app-shell .modal .modal-dialog .modal-body::-webkit-scrollbar-button:vertical:end:decrement {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.modal-head h2 {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  color: var(--color-primary);
}

#pedidoAddTitle {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1A1208;
}

/* HOME · armar producto: compacto, dentro del viewport; scroll solo si hace falta */
#pedidoAddModal.modal {
  padding: max(0.55rem, env(safe-area-inset-top, 0px))
    max(0.7rem, env(safe-area-inset-right, 0px))
    max(0.55rem, env(safe-area-inset-bottom, 0px))
    max(0.7rem, env(safe-area-inset-left, 0px));
}

#pedidoAddModal .modal-dialog--pedido-add {
  display: flex;
  flex-direction: column;
  width: min(26rem, calc(100vw - 1.4rem));
  max-height: calc(
    100dvh - max(1.1rem, env(safe-area-inset-top, 0px)) - max(1.1rem, env(safe-area-inset-bottom, 0px))
  );
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.65rem 1rem 0.75rem;
}

#pedidoAddModal .modal-head {
  flex-shrink: 0;
  margin-bottom: 0.15rem;
}

#pedidoAddModal #pedidoAddTitle {
  font-size: clamp(0.95rem, 3.5vw, 1.28rem);
  line-height: 1.15;
}

#pedidoAddModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-size: 0.78rem;
  padding-right: 0.15rem;
  box-sizing: border-box;
}

#pedidoAddModal .pedido-detail {
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  padding: 0 0 0.4rem;
}

#pedidoAddModal .pedido-thumb {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 0.5rem;
}

#pedidoAddModal .pedido-detail-desc {
  margin: 0 0 0.18rem;
  font-size: 0.78rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#pedidoAddModal .pedido-detail-price {
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

#pedidoAddModal .field-kicker {
  margin-top: 0.28rem;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

#pedidoAddModal .protein-choice {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.85rem;
  width: 100%;
  margin-bottom: 0.28rem;
  padding: 0;
  box-sizing: border-box;
}

#pedidoAddModal .protein-pick {
  width: 4.2rem;
  min-height: 3.8rem;
  padding: 0.2rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
}

#pedidoAddModal .protein-pick--ico {
  width: 4.35rem;
}

#pedidoAddModal .protein-pick img {
  height: 3.15rem;
  width: auto;
}

#pedidoAddModal .qty-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0.2rem 0 0.32rem;
  padding: 0;
  box-sizing: border-box;
}

#pedidoAddModal .qty-row .qty-input,
#pedidoAddModal .qty-input {
  width: 4.25rem;
  min-width: 4.25rem;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.25rem 0.35rem;
  border: 1px solid rgba(26, 18, 8, 0.22);
  border-radius: 0.45rem;
  background: #fff;
  color: #1A1208;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  box-sizing: border-box;
  -moz-appearance: textfield;
  appearance: textfield;
}

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

#pedidoAddModal .qty-row strong {
  flex: 0 0 auto;
  min-width: 2rem;
  text-align: center;
  font-size: 1.1rem;
}

#pedidoAddModal .chip-row {
  gap: 0.22rem;
  margin: 0.2rem 0 0.32rem;
}

#pedidoAddModal .chip {
  min-height: 1.85rem;
  padding: 0 0.45rem;
  font-size: 0.62rem;
}

#pedidoAddModal .field {
  gap: 0.2rem;
  margin-bottom: 0.35rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#pedidoAddModal .field > span {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

#pedidoAddModal .field input,
#pedidoAddModal .field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#pedidoAddModal .field input {
  min-height: 2.1rem;
  padding: 0.32rem 0.45rem;
  font-size: 0.8rem;
}

#pedidoAddModal .complemento-checks {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 0.1rem;
}

#pedidoAddModal .modal-dialog .btn-qty {
  width: 2.1rem;
  height: 2.1rem;
  min-height: 2.1rem;
  font-size: 1.1rem;
  flex: 0 0 auto;
}

#pedidoAddModal #pedAddConfirm {
  min-height: 2.35rem;
  margin-top: 0.1rem;
  font-size: 0.88rem;
  width: 100%;
  box-sizing: border-box;
}

#pedidoAddModal .form-alert {
  margin: 0.15rem 0 0.2rem;
  font-size: 0.75rem;
}

@media (max-height: 720px) {
  #pedidoAddModal .modal-dialog--pedido-add {
    padding: 0.5rem 0.85rem 0.6rem;
  }

  #pedidoAddModal .pedido-detail-desc {
    -webkit-line-clamp: 1;
  }

  #pedidoAddModal .pedido-thumb {
    width: 2.75rem;
    height: 2.75rem;
  }

  #pedidoAddModal .protein-pick img {
    height: 2.2rem;
  }

  #pedidoAddModal .chip {
    min-height: 1.65rem;
    font-size: 0.58rem;
  }
}

.pedido-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 0.95rem;
  padding: 0.15rem 0 0.85rem;
  border-bottom: 1px solid rgba(195, 64, 36, 0.4);
}

.pedido-detail-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.pedido-thumb {
  position: relative;
  flex-shrink: 0;
  width: 4.6rem;
  height: 4.6rem;
  padding: 0;
  border: 1px solid rgba(26, 18, 8, 0.16);
  border-radius: 0.65rem;
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}

.pedido-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pedido-thumb-zoom {
  position: absolute;
  right: 0.22rem;
  bottom: 0.22rem;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
}

.pedido-detail-desc {
  margin: 0 0 0.4rem;
  font-size: clamp(1rem, 3vw, 1.28rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1A1208;
}

.pedido-detail-price {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.55rem, 4.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #9A3412;
}

.photo-zoom {
  z-index: 120;
}

.photo-zoom .modal-backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.photo-zoom-dialog {
  position: relative;
  width: min(42rem, calc(100% - 1.4rem));
  margin: auto;
  padding: 0.55rem 0.55rem 0.7rem;
}

.photo-zoom-bar {
  display: flex;
  justify-content: flex-end;
}

.photo-zoom-bar .btn-icon {
  color: #fff;
}

.photo-zoom #photoZoomImg {
  display: block;
  width: 100%;
  max-height: min(78dvh, 36rem);
  object-fit: contain;
  border-radius: 0.7rem;
  background: #111;
}

.modal-head-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}

.modal-head .btn-icon { color: #1A1208; }
.modal-body { font-size: 0.82rem; }
.modal-body .ticket-table th,
.modal-body .ticket-table td {
  color: inherit;
  border-bottom-color: rgba(195, 64, 36, 0.28);
}

.modal-dialog .login-hint,
.modal-dialog .empty-msg {
  color: #5C4636;
}

.pedido-aviso,
.pedido-nota {
  margin: 0 0 0.7rem;
  padding: 0.7rem 0.75rem 0.75rem;
  border-radius: 0.7rem;
}

.pedido-aviso {
  background: #FFF1DC;
  border: 1px solid rgba(230, 81, 0, 0.35);
}

.pedido-aviso-kicker,
.pedido-nota-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pedido-aviso-kicker {
  color: #9A3412;
}

.pedido-aviso-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1A1208;
}

.pedido-nota {
  background: #FFE0B2;
  border: 2px solid #A8321E;
  box-shadow: 0 0 0 3px rgba(195, 64, 36, 0.18);
}

.pedido-nota-kicker {
  color: #A8321E;
}

.pedido-nota-text {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.45;
  color: #4A1C00;
}

.pedido-nota-text strong {
  color: #BF360C;
}

/* HOME · Datos para el pedido: padding + scroll sin clipping a la derecha */
#pedidoNombreModal.modal {
  padding: max(0.55rem, env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    max(0.55rem, env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
}

#pedidoNombreModal .modal-dialog--pedido-datos {
  display: flex;
  flex-direction: column;
  width: min(32rem, calc(100vw - 1.5rem));
  max-height: calc(
    100dvh - max(1.1rem, env(safe-area-inset-top, 0px)) - max(1.1rem, env(safe-area-inset-bottom, 0px))
  );
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.85rem 0;
}

#pedidoNombreModal .modal-head {
  flex-shrink: 0;
  padding: 0 1.15rem 0.35rem;
  box-sizing: border-box;
}

#pedidoNombreModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.15rem 1.15rem 0.85rem;
  box-sizing: border-box;
}

#pedidoNombreModal .pedido-aviso,
#pedidoNombreModal .pedido-nota,
#pedidoNombreModal form,
#pedidoNombreModal .field,
#pedidoNombreModal .entrega-row,
#pedidoNombreModal .confirm-actions,
#pedidoNombreModal .complemento-checks,
#pedidoNombreModal .dom-chip-row,
#pedidoNombreModal .pedido-map,
#pedidoNombreModal .pedido-enterado {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#pedidoNombreModal .field input,
#pedidoNombreModal .field textarea,
#pedidoNombreModal .btn-block {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#pedidoNombreModal .confirm-actions {
  padding-right: 0.1rem;
  gap: 0.65rem;
}

#pedidoNombreModal .confirm-btn {
  max-width: calc(50% - 0.35rem);
}

.modal-dialog .pedido-enterado {
  margin: 0 0 0.85rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(230, 81, 0, 0.4);
  border-radius: 0.55rem;
  background: #FFF1DC;
  color: #1A1208;
  font-size: 0.9rem;
  line-height: 1.35;
}

#pedidoNombreModal .pedido-enterado--foot {
  margin: 0.35rem 0 0.55rem;
  align-items: flex-start;
}

.modal-dialog .field > span,
.modal-dialog .field-kicker {
  color: #9A3412;
}

.modal-dialog .field > span::before,
.modal-dialog .field-kicker::before {
  background: linear-gradient(180deg, #E87A32 0%, #A8321E 100%);
  box-shadow: 0 0 8px rgba(230, 81, 0, 0.28);
}

.modal-dialog .field em {
  color: #8A6A52;
}

.pedido-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0 0.55rem;
  text-align: center;
}

.pedido-empty-img {
  display: block;
  width: min(22rem, 100%);
  height: auto;
  border-radius: 0.85rem;
}

.pedido-empty-text {
  margin: 0;
  max-width: 22rem;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 3.2vw, 1.28rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #1A1208;
}

.pedido-empty-hint {
  margin: 0;
  max-width: 22rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: #5C4636;
}

.modal-dialog .chip {
  color: #1A1208;
  background: #fff;
}

.modal-dialog .chip.is-on {
  background: var(--color-primary);
  color: #000;
}

.modal-dialog .field input,
.modal-dialog .field select,
.modal-dialog .field textarea {
  background: #fff;
  color: #1A1208;
  border-color: rgba(195, 64, 36, 0.55);
}

.modal-dialog .btn-secondary,
.modal-dialog .btn-ghost {
  color: #1A1208;
}

.modal-dialog .btn-ghost {
  background: #fff;
  border-color: rgba(26, 18, 8, 0.22);
}

.modal-dialog .btn-qty {
  background: #fff;
  color: #1A1208;
}

html[data-work="ops"] {
  --tap: 36px;
  /* Ficha producto Caja: 150×150px fijos (px CSS = independiente del DPI); solo wrap */
  --pos-tile: 150px;
  --pos-gap: 0.28rem;
}

.ops-wide {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.28rem 0.5rem 0.35rem;
  box-sizing: border-box;
}

html[data-work="ops"] .app-header-inner,
html[data-work="ops"] .app-footer-inner {
  width: 100%;
  max-width: none;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  box-sizing: border-box;
}

html[data-work="ops"] .app-header-inner {
  padding-top: max(0.28rem, env(safe-area-inset-top, 0px));
  padding-bottom: 0.28rem;
  gap: 0.4rem;
}

html[data-work="ops"] .header-brand-ico {
  width: 2.75rem;
  height: 2.35rem;
}

html[data-work="ops"] .brand-title {
  font-size: 0.82rem;
}

html[data-work="ops"] .brand-sub {
  font-size: 0.68rem;
}

html[data-work="ops"] .app-footer-inner {
  min-height: 1.85rem;
}

html[data-work="ops"] .app-footer {
  font-size: 0.68rem;
}

html[data-work="ops"] .app-scroll:has(#screen-sales:not([hidden])),
html[data-work="ops"] .app-scroll:has(#screen-ticket:not([hidden])) {
  overflow: hidden;
}

html[data-work="ops"] #screen-sales:not([hidden]),
html[data-work="ops"] #screen-admin:not([hidden]),
html[data-work="ops"] #screen-ticket:not([hidden]) {
  height: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

html[data-work="ops"] #screen-admin:not([hidden]) {
  overflow: auto;
}

html[data-work="ops"] #screen-sales .ops-wide,
html[data-work="ops"] #screen-admin .ops-wide {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

html[data-work="ops"] #screen-sales .ops-wide {
  padding-bottom: 0.4rem;
}

.sales-layout {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  min-height: 0;
}

.sales-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  flex-shrink: 0;
}

.sales-nav-btn {
  min-height: 2.35rem;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.28rem;
  padding: 0.22rem 0.18rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.sales-nav-ico {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.sales-nav-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-nav-txt--short {
  display: none;
}

@media (max-width: 1100px) {
  .sales-nav-txt--full {
    display: none;
  }
  .sales-nav-txt--short {
    display: inline;
  }
}

.sales-nav-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.sales-nav-btn .ops-badge {
  flex-shrink: 0;
  margin-left: 0;
}

.sales-nav-btn.is-active .ops-badge {
  background: #fff;
  color: #C62828;
}

.sales-panel {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

#salesPanelInbox:not([hidden]),
#salesPanelConsumos:not([hidden]),
#salesPanelEnvios:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.sales-panel--mostrador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0.55rem;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.sales-panel[hidden],
.sales-panel--mostrador[hidden] {
  display: none !important;
}

.pos-board {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.pos-banner {
  flex-shrink: 0;
  margin-bottom: 0;
}

.pos-banner--compact {
  padding: 0.38rem 0.6rem 0.42rem;
}

#inboxLoadedNote.pos-banner--compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
}

.pos-banner-eye {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  border: 1px solid var(--color-ficha-border, rgba(195, 64, 36, 0.35));
  border-radius: 0.45rem;
  background: var(--color-ficha, #1c1c1c);
  color: var(--color-primary);
  align-self: center;
}

.pos-banner-eye:hover {
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-ficha, #1c1c1c));
}

.pos-banner-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

.pos-banner-client {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-banner-meta {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-folio-badge {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.65rem;
  border: none;
  border-radius: 0.4rem;
  background: #C2410C;
  color: #FFF8F0;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: none;
}

.pos-folio-badge[hidden] {
  display: none !important;
}

.pos-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
  gap: 0.38rem;
  align-items: stretch;
  flex-shrink: 0;
  padding: 0.4rem 0.5rem 0.38rem;
  background: var(--color-block);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.pos-toolbar .block-title,
.pos-menu .block-title {
  margin-bottom: 0.22rem;
}

.pos-cuenta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

.pos-cuenta-head .block-title {
  margin-bottom: 0;
}

.pos-cuenta-tools {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
}

.pos-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pos-order-badge--local {
  background: var(--color-primary);
  color: var(--color-on-accent);
}

.pos-order-badge--online {
  background: #1565C0;
  color: #ffffff;
}

.pos-nueva-orden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  min-height: 1.85rem;
  color: var(--color-text);
}

.pos-toolbar .field {
  margin-bottom: 0;
}

.pos-toolbar .protein-picker {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pos-toolbar .protein-kicker {
  justify-content: flex-start;
}

.pos-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.35rem 0.4rem 0.4rem;
  background: var(--color-block);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.pos-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.pos-menu-head .block-title {
  margin: 0;
}

.sales-inbox { min-width: 0; height: 100%; display: flex; flex-direction: column; margin-bottom: 0; overflow: hidden; }
.sales-main { min-width: 0; }
.pos-ticket {
  display: flex;
  flex-direction: column;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0.45rem 0.5rem 0.55rem;
  background: var(--color-block);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.pos-ticket .cart-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 0.45rem;
}

.pos-ticket-foot {
  flex-shrink: 0;
  padding-top: 0.35rem;
  padding-bottom: 0.55rem;
  border-top: 1px solid var(--color-hairline);
}

.pos-ticket-foot .pos-pay {
  margin-top: 0.35rem;
}

.pos-pay {
  min-height: 2.5rem;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-work="ops"] .cart-total-row {
  margin: 0.12rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-work="ops"] .cart-total-row strong {
  font-family: var(--font-head);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.sales-cart {
  min-width: 0;
}

.inbox-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
}

.pedidos-board {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.envios-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  flex: 1 1 auto;
}

.envios-board--3col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.envios-board--1col {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.envios-board--3col .inbox-section {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.envios-board--3col .inbox-section-title {
  overflow-wrap: anywhere;
}

.envios-board--3col .inbox-item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.inbox-section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.inbox-section-head-row .inbox-section-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.envio-link-btn {
  flex-shrink: 0;
  padding: 0.12rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.envio-link-btn:hover,
.envio-link-btn:focus-visible {
  color: var(--color-text);
}

.envio-link-btn--multi {
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #1565C0;
  background: #1565C0;
  color: #fff;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: none;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.28);
}

.envio-link-btn--multi:hover,
.envio-link-btn--multi:focus-visible {
  background: #0d47a1;
  border-color: #0d47a1;
  color: #fff;
}

.envio-bulk-bar {
  margin: 0 0 0.45rem;
  padding: 0.38rem 0.42rem 0.42rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(21, 101, 192, 0.45);
  background: rgba(21, 101, 192, 0.12);
  box-shadow: inset 3px 0 0 #1565C0;
}

.envio-bulk-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.28rem;
}

.envio-bulk-count {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}

.envio-bulk-kicker {
  margin: 0 0 0.28rem;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.inbox-section--por-enviar .dom-chip-row {
  gap: 0.28rem;
}

.inbox-section--por-enviar .dom-chip-row .chip {
  font-size: 0.68rem;
  padding: 0.22rem 0.48rem;
}

.inbox-item--selectable {
  align-items: center;
  gap: 0.32rem;
}

.inbox-item--selected {
  border-color: rgba(21, 101, 192, 0.55);
  box-shadow: inset 4px 0 0 #1565C0, 0 0 0 1px rgba(21, 101, 192, 0.22);
  background: rgba(21, 101, 192, 0.08);
}

.envio-select-toggle {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--color-hairline);
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.envio-select-toggle.is-on {
  border-color: #1565C0;
  background: #1565C0;
  color: #fff;
}

.envio-select-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.inbox-item--selectable .inbox-item-main {
  cursor: pointer;
}

.pedidos-online {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.45rem 0.45rem 0.5rem;
  background: rgba(21, 101, 192, 0.22);
  border: 1px solid #1565C0;
  border-radius: 0.7rem;
  box-shadow: inset 4px 0 0 #1565C0;
}

.pedidos-online-kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #90CAF9;
}

.inbox-sections--online {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inbox-section--prep {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.inbox-section--prep .inbox-section-title {
  overflow-wrap: anywhere;
}

.inbox-section--prep .inbox-list {
  overflow-x: hidden;
  overflow-y: auto;
}

.inbox-section--prep .inbox-item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.inbox-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.28rem 0.28rem 0.32rem;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: 0.7rem;
}

.inbox-section-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.envio-group {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0 0 0.55rem;
}

.envio-repartidor-panel {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.38rem 0.42rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-hairline);
  border-radius: 0.55rem;
}

.envio-repartidor-panel:last-child {
  margin-bottom: 0.15rem;
}

.envio-repartidor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.12rem;
}

.envio-repartidor-title {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.envio-repartidor-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.btn-envio-todo {
  flex-shrink: 0;
  padding: 0.3rem 0.55rem;
  border: none;
  border-radius: 0.45rem;
  background: #2E7D32;
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35);
}

.btn-envio-todo:hover,
.btn-envio-todo:focus-visible {
  background: #388E3C;
}

.btn-envio-todo:active {
  transform: translateY(1px);
}

.envio-group:last-child {
  margin-bottom: 0.15rem;
}

.envio-group-title {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0 0 0.28rem;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Conteo por repartidor: neutro; el rojo queda solo en el total del panel (inbox-section-title). */
.envio-group-title .ops-badge,
.envio-repartidor-title .ops-badge {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-muted);
  font-weight: 700;
}

.inbox-section--confirm {
  border-color: #C62828;
  box-shadow: inset 0 0 0 1px rgba(198, 40, 40, 0.28);
}

#btnInboxPrintAllKitchen {
  flex-shrink: 0;
  margin-top: 0.45rem;
}

.ops-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #C62828;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}

.ops-badge--sm {
  min-width: 1.15rem;
  height: 1.15rem;
  font-size: 0.65rem;
}

.product-photo {
  display: block;
  width: 100%;
  height: 4.6rem;
  object-fit: cover;
  border-radius: 0.45rem;
  background: #111;
}

.product-card-name {
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.admin-layout {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  min-height: 100%;
}

html[data-work="ops"] .client-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.95fr);
}

html[data-work="ops"] .catalog-section {
  margin-bottom: 0.48rem;
}

html[data-work="ops"] .catalog-section-title {
  margin-bottom: 0.28rem;
}

/* Caja: 150×150px fijo; no crece ni encoge — solo wrap */
html[data-work="ops"] #screen-sales .product-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: var(--pos-gap);
  width: 100%;
}

html[data-work="ops"] #screen-sales .product-card {
  background: var(--color-surface);
  flex: 0 0 var(--pos-tile);
  width: var(--pos-tile);
  height: var(--pos-tile);
  max-width: var(--pos-tile);
  min-width: var(--pos-tile);
  box-sizing: border-box;
  padding: 0.18rem 0.16rem 0.2rem;
  gap: 0.06rem;
  border-radius: 0.5rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

html[data-work="ops"] #screen-sales .product-card:active {
  transform: scale(0.97);
}

html[data-work="ops"] #screen-sales .product-photo {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  border-radius: 0.35rem;
}

html[data-work="ops"] #screen-sales .product-card-name {
  flex: 0 0 auto;
  font-size: clamp(0.54rem, 2.2cqi, 0.72rem);
  line-height: 1.08;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html[data-work="ops"] #screen-sales .product-price {
  flex: 0 0 auto;
  font-size: clamp(0.65rem, 2.5cqi, 0.9rem);
  margin-top: 0;
  align-self: center;
  text-align: center;
}

html[data-work="ops"] #screen-sales .product-badge {
  flex: 0 0 auto;
  font-size: 0.48rem;
  padding: 0.03rem 0.28rem;
}

html[data-work="ops"] #screen-sales .pos-menu {
  container-type: inline-size;
}

html[data-work="ops"] .protein-btn {
  border-radius: 0.55rem;
  min-height: 2.4rem;
}

html[data-work="ops"] .protein-btn img {
  height: 1.45rem;
}

html[data-work="ops"] .field input,
html[data-work="ops"] .field select,
html[data-work="ops"] .field textarea {
  border-color: var(--color-border);
}

html[data-work="ops"] .btn-qty {
  background: var(--color-input-bg);
  color: var(--color-text);
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
}

html[data-work="ops"] #screen-ticket:not([hidden]) {
  overflow: hidden;
}

html[data-work="ops"] .ticket-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

html[data-work="ops"] .ticket-actions {
  flex-direction: row;
  flex-wrap: nowrap;
  background: var(--color-surface, var(--color-bg));
}

html[data-work="ops"] .ticket-actions .btn {
  flex: 1 1 0;
  min-width: 0;
}

.protein-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.protein-btn img {
  height: 2rem;
  width: auto;
}

.cart-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cart-row-main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.cart-row-qty {
  flex-shrink: 0;
  min-width: 1.6rem;
  font-weight: 800;
  font-family: var(--font-head);
}

.cart-row-info {
  min-width: 0;
}

.cart-row-name {
  font-weight: 800;
  line-height: 1.2;
}

html[data-work="ops"] .cart-row {
  min-height: 2.3rem;
  padding: 0.28rem 0.32rem;
  border-bottom: 0;
  border-radius: 0.4rem;
  cursor: pointer;
}

html[data-work="ops"] .cart-row.is-alt {
  background: rgba(127, 140, 150, 0.14);
}

html[data-work="ops"] .cart-row.cart-row--original {
  background: rgba(195, 64, 36, 0.14);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

html[data-work="ops"] .cart-del {
  width: 2.1rem;
  height: 2.1rem;
  min-height: 2.1rem;
  border-color: var(--color-border);
  color: var(--color-text);
}

.pos-servicio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.32rem;
  margin: 0 0 0.4rem;
}

.pos-servicio-btn {
  min-height: 2.35rem;
  padding: 0.22rem 0.18rem;
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: uppercase;
  cursor: pointer;
}

.pos-servicio-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
}

.pos-servicio-btn:disabled {
  opacity: 0.58;
  cursor: default;
}

.pos-online-name {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  font-weight: 800;
}

.pos-line-subtotal {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.95rem;
}

.pos-line-subtotal strong {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--color-primary);
}

html[data-work="ops"] .pedido-thumb {
  border-color: var(--color-border);
}

html[data-work="ops"] .pedido-detail {
  border-bottom-color: var(--color-hairline);
}

html[data-work="ops"] .modal-dialog {
  padding: 0.55rem 0.65rem 0.65rem;
}

html[data-work="ops"] .modal-head h2 {
  font-size: 0.92rem;
}

html[data-work="ops"] #posAddTitle {
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}

html[data-work="ops"] .modal-dialog--touch {
  width: min(36rem, calc(100% - 1rem));
  max-height: min(92dvh, 52rem);
  padding: 0.6rem 0.7rem 0.7rem;
}

html[data-work="ops"] .modal-dialog--client {
  width: min(46rem, calc(100% - 0.7rem));
  max-width: calc(100vw - 0.7rem);
  max-height: min(95dvh, 60rem);
  overflow-x: hidden;
}

html[data-work="ops"] .pos-client-nopin {
  color: var(--color-text-muted);
}

html[data-work="ops"] .modal-dialog--touch .protein-pick {
  width: 4.2rem;
  min-width: 4.2rem;
  min-height: 4.2rem;
}

html[data-work="ops"] .modal-dialog--touch .protein-pick img {
  height: 3.1rem;
}

html[data-work="ops"] .modal-dialog--touch .btn-qty {
  width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  font-size: 1.15rem;
}

html[data-work="ops"] .modal-dialog--touch .qty-row strong {
  min-width: 1.8rem;
  font-size: 1.25rem;
}

html[data-work="ops"] .modal-dialog--touch .chip {
  min-height: 2.1rem;
  padding: 0.22rem 0.55rem;
  font-size: 0.76rem;
}

.cart-note {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.cart-extra {
  margin: 0.12rem 0 0;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.btn-note {
  min-height: 2rem;
  padding: 0 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 0.35rem;
  background: transparent;
  color: var(--color-text);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.inbox-toast {
  position: fixed;
  right: 1rem;
  bottom: 4.5rem;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: min(22rem, calc(100% - 2rem));
  padding: 0.85rem 2.35rem 0.9rem 0.9rem;
  border-radius: 0.75rem;
  background: #1B3A2F;
  color: #F3FFF8;
  border: 1px solid #4CAF7A;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.inbox-toast[hidden] { display: none !important; }

.inbox-toast-close {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #F3FFF8;
  font-size: 1.45rem;
  line-height: 1;
}

.inbox-toast-close:hover {
  background: rgba(0, 0, 0, 0.28);
}

.inbox-toast.is-shake {
  animation: inboxToastShake 0.55s ease-in-out;
}

@keyframes inboxToastShake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-7px) rotate(-0.6deg); }
  24% { transform: translateX(7px) rotate(0.6deg); }
  36% { transform: translateX(-6px) rotate(-0.4deg); }
  48% { transform: translateX(6px) rotate(0.4deg); }
  60% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
  84% { transform: translateX(-2px); }
}

.inbox-confirm-banner {
  position: fixed;
  top: calc(3.55rem + env(safe-area-inset-top, 0px));
  right: 0.75rem;
  z-index: 125;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: min(22rem, calc(100% - 1.5rem));
  padding: 0.85rem 2.35rem 0.9rem 0.9rem;
  border-radius: 0.75rem;
  background: #C62828;
  color: #FFFFFF;
  border: 1px solid #FF8A80;
  box-shadow: 0 12px 32px rgba(198, 40, 40, 0.55);
  animation: inboxConfirmPulse 1.4s ease-in-out infinite;
}

.inbox-confirm-close {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.45rem;
  line-height: 1;
}

.inbox-confirm-close:hover {
  background: rgba(0, 0, 0, 0.28);
}

.inbox-confirm-banner strong {
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.inbox-confirm-banner span {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

.inbox-confirm-banner .btn-ghost {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.22);
}

@keyframes inboxConfirmPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.72), 0 12px 32px rgba(198, 40, 40, 0.45);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(198, 40, 40, 0), 0 12px 32px rgba(198, 40, 40, 0.45);
  }
}

#kitchenPrintPack {
  display: none;
}

.print-tipo-checks {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.35rem 0 0.65rem;
}

.order-detail-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.32rem;
  margin-top: 0.55rem;
}

.order-action {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.05rem;
  padding: 0.28rem 0.15rem 0.22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  border: 1px solid var(--color-ficha-border);
  border-radius: 0.55rem;
  background: var(--color-ficha);
  color: var(--color-text);
  box-shadow: var(--shadow-ficha);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.order-action svg {
  width: 1.32rem;
  height: 1.32rem;
  flex-shrink: 0;
}

.order-action span {
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
}

.order-action--accent {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
}

.order-action--wa {
  background: #25D366;
  border-color: #1EBE57;
  color: #FFFFFF;
}

.order-action--wa:hover {
  filter: brightness(1.06);
  background: #25D366;
}

.order-action--danger {
  background: #3A1515;
  border-color: #C62828;
  color: #FFCDD2;
}

html[data-work="ops"][data-work-theme="light"] .order-action--danger {
  background: #FFEBEE;
  border-color: #C62828;
  color: #B71C1C;
}

.order-action[hidden] {
  display: none !important;
}

.order-action:active {
  transform: scale(0.97);
}

.order-detail {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.order-detail-hero {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-ficha);
}

.order-detail-avatar {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-accent);
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.order-detail-hero-main {
  min-width: 0;
  flex: 1 1 auto;
}

.order-detail-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.order-detail-phone {
  margin: 0.18rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.order-detail-estado {
  flex-shrink: 0;
  max-width: 7.5rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: rgba(195, 64, 36, 0.16);
  color: var(--color-primary);
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}

.order-detail-estado--ACEPTADO {
  background: rgba(198, 40, 40, 0.18);
  color: #E57373;
}

.order-detail-estado--EN_PREPARACION,
.order-detail-estado--COCINA {
  background: rgba(195, 64, 36, 0.2);
  color: var(--color-primary);
}

.order-detail-estado--COTIZADO {
  background: rgba(21, 101, 192, 0.18);
  color: #64B5F6;
}

.order-detail-estado--EXPIRADO {
  background: var(--color-hairline);
  color: var(--color-text-muted);
}

.order-detail-estado--COMPLETADA,
.order-detail-estado--COMPLETADO {
  background: rgba(46, 125, 50, 0.16);
  color: #2E7D32;
}

.order-detail-estado--CANCELADO {
  background: rgba(198, 40, 40, 0.16);
  color: #C62828;
}

.order-detail-meta {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-hairline);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--color-panel, #fff) 92%, transparent);
}

.order-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.55rem 0.85rem;
  margin: 0;
}

.order-detail-meta-grid > div {
  min-width: 0;
}

.order-detail-meta-grid dt {
  margin: 0 0 0.12rem;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.order-detail-meta-grid dd {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;
}

.order-detail-discount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  padding: 0.55rem 0.75rem;
  border: 1px dashed rgba(198, 40, 40, 0.35);
  border-radius: 0.55rem;
  background: rgba(198, 40, 40, 0.06);
  font-size: 0.84rem;
}

.order-detail-discount strong {
  color: #C62828;
  font-variant-numeric: tabular-nums;
}

.order-detail-discount-code {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.order-detail-pagos {
  border: 1px solid var(--color-hairline);
  border-radius: 0.55rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-panel, #fff) 96%, transparent);
}

.order-detail-pagos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.order-detail-pagos-table th,
.order-detail-pagos-table td {
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--color-hairline);
  text-align: left;
}

.order-detail-pagos-table th {
  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.order-detail-pagos-table tfoot th {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-panel, #fff));
  color: var(--color-text);
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
}

.order-detail-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-detail-pagos-note {
  margin: 0;
  padding: 0.45rem 0.65rem 0.55rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.order-detail-foot--iva {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--color-hairline);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--color-panel, #fff) 94%, transparent);
}

#orderModal.modal--order-detail .modal-dialog--order-detail,
.modal-dialog--order-detail {
  width: min(42rem, calc(100vw - 1.25rem));
  max-height: min(90dvh, 52rem);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #F8F9FA;
  color: #1E293B;
  border-color: #CBD5E1;
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(148, 163, 184, 0.35);
}

#orderModal.modal--order-detail .modal-head,
.modal-dialog--order-detail .modal-head {
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
  border-radius: 0.65rem 0.65rem 0 0;
}

#orderModal.modal--order-detail .modal-head h2,
.modal-dialog--order-detail .modal-head h2 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A;
}

#orderModal.modal--order-detail .modal-body,
.modal-dialog--order-detail .modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  font-size: 0.84rem;
}

#orderModal.modal--order-detail .order-detail-hero,
.modal-dialog--order-detail .order-detail-hero {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: none;
}

#orderModal.modal--order-detail .order-detail-meta,
#orderModal.modal--order-detail .order-detail-pagos,
#orderModal.modal--order-detail .order-detail-foot--iva,
.modal-dialog--order-detail .order-detail-meta,
.modal-dialog--order-detail .order-detail-pagos,
.modal-dialog--order-detail .order-detail-foot--iva {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

#orderModal.modal--order-detail .order-detail-items,
.modal-dialog--order-detail .order-detail-items {
  border-color: #E2E8F0;
  background: #FFFFFF;
}

#orderModal.modal--order-detail .admin-order-cancel-box,
.modal-dialog--order-detail .admin-order-cancel-box {
  margin-top: 0.15rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(198, 40, 40, 0.25);
  border-radius: 0.55rem;
  background: rgba(198, 40, 40, 0.06);
}

/* Detalle pedido (concentrado / ventas): paleta clara fija — legible con tema oscuro en caja */
#orderModal.modal--order-detail .modal-head .btn-icon,
.modal-dialog--order-detail .modal-head .btn-icon {
  color: #475569;
}

#orderModal.modal--order-detail .order-detail-name,
.modal-dialog--order-detail .order-detail-name {
  color: #0F172A;
}

#orderModal.modal--order-detail .order-detail-phone,
.modal-dialog--order-detail .order-detail-phone {
  color: #475569;
}

#orderModal.modal--order-detail .order-detail-kicker,
.modal-dialog--order-detail .order-detail-kicker {
  color: #C2410C;
}

#orderModal.modal--order-detail .order-detail-meta-grid dt,
.modal-dialog--order-detail .order-detail-meta-grid dt {
  color: #64748B;
}

#orderModal.modal--order-detail .order-detail-meta-grid dd,
.modal-dialog--order-detail .order-detail-meta-grid dd {
  color: #1E293B;
}

#orderModal.modal--order-detail .order-detail-discount-code,
.modal-dialog--order-detail .order-detail-discount-code {
  color: #64748B;
}

#orderModal.modal--order-detail .order-detail-pagos-table th,
.modal-dialog--order-detail .order-detail-pagos-table th {
  background: #F1F5F9;
  color: #475569;
  border-bottom-color: #E2E8F0;
}

#orderModal.modal--order-detail .order-detail-pagos-table td,
.modal-dialog--order-detail .order-detail-pagos-table td {
  color: #1E293B;
  border-bottom-color: #E2E8F0;
}

#orderModal.modal--order-detail .order-detail-pagos-table tfoot th,
.modal-dialog--order-detail .order-detail-pagos-table tfoot th {
  background: #FEF3C7;
  color: #0F172A;
}

#orderModal.modal--order-detail .order-detail-pagos-note,
.modal-dialog--order-detail .order-detail-pagos-note {
  color: #64748B;
}

#orderModal.modal--order-detail .order-detail-empty,
.modal-dialog--order-detail .order-detail-empty {
  color: #64748B;
}

#orderModal.modal--order-detail .order-detail-foot,
.modal-dialog--order-detail .order-detail-foot {
  color: #64748B;
}

#orderModal.modal--order-detail .order-line.order-line--head,
#orderModal.modal--order-detail .order-line--head,
.modal-dialog--order-detail .order-line.order-line--head,
.modal-dialog--order-detail .order-line--head {
  background: #F1F5F9;
  color: #64748B;
  border-bottom-color: #E2E8F0;
}

#orderModal.modal--order-detail .order-line,
.modal-dialog--order-detail .order-line {
  border-bottom-color: #E2E8F0;
  color: #1E293B;
}

#orderModal.modal--order-detail .order-line-name,
.modal-dialog--order-detail .order-line-name {
  color: #0F172A;
}

#orderModal.modal--order-detail .order-line-note,
.modal-dialog--order-detail .order-line-note {
  color: #64748B;
}

#orderModal.modal--order-detail .order-line-amt,
.modal-dialog--order-detail .order-line-amt {
  color: #9A3412;
}

#orderModal.modal--order-detail .order-line-qty,
.modal-dialog--order-detail .order-line-qty {
  background: #F1F5F9;
  color: #0F172A;
}

#orderModal.modal--order-detail .order-chip,
.modal-dialog--order-detail .order-chip {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #1E293B;
}

#orderModal.modal--order-detail .order-chip--entrega,
.modal-dialog--order-detail .order-chip--entrega {
  border-color: #A8321E;
  color: #9A3412;
}

#orderModal.modal--order-detail .order-detail-addr,
.modal-dialog--order-detail .order-detail-addr {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #1E293B;
}

#orderModal.modal--order-detail .order-detail-envio,
.modal-dialog--order-detail .order-detail-envio {
  color: #64748B;
}

#orderModal.modal--order-detail .order-detail-envio strong,
.modal-dialog--order-detail .order-detail-envio strong {
  color: #1E293B;
}

#orderModal.modal--order-detail .order-detail-total span,
.modal-dialog--order-detail .order-detail-total span {
  color: #64748B;
}

#orderModal.modal--order-detail .order-detail-total strong,
.modal-dialog--order-detail .order-detail-total strong {
  color: #0F172A;
}

.order-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.order-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--color-ficha-border);
  background: var(--color-ficha);
  font-size: 0.75rem;
  font-weight: 800;
}

.order-chip--entrega {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.order-detail-addr {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.7rem;
  border: 1px dashed var(--color-ficha-border);
  background: var(--color-surface);
  font-size: 0.88rem;
  line-height: 1.35;
}

.order-detail-totals {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.order-detail-envio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.order-detail-envio strong {
  font-weight: 700;
  color: var(--color-text);
}

.order-detail-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.6rem;
  background: var(--color-primary);
  color: var(--color-on-accent);
}

.order-detail-total span {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.order-detail-total strong {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.order-detail-kicker {
  margin: 0.15rem 0 0;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.order-detail-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-ficha-border);
  border-radius: 0.75rem;
  background: var(--color-ficha);
}

.order-line--head {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 4.6rem;
  gap: 0.45rem;
  padding: 0.28rem 0.55rem;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.order-line--head span:last-child {
  text-align: right;
}

.order-line {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 4.6rem;
  gap: 0.45rem;
  align-items: center;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.order-line:last-child {
  border-bottom: 0;
}

.order-line.order-line--head {
  background: var(--color-surface);
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.order-line-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.55rem;
  background: var(--color-surface);
  font-weight: 800;
  font-size: 0.95rem;
}

.order-line-body {
  min-width: 0;
}

.order-line-name {
  margin: 0;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.25;
  word-break: break-word;
}

.order-line-note {
  margin: 0.18rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.order-line-amt {
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
  text-align: right;
  color: var(--color-price);
}

.order-detail-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.order-detail-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

html[data-work="ops"][data-work-theme="light"] .order-detail-estado--ACEPTADO {
  color: #C62828;
}

html[data-work="ops"][data-work-theme="light"] .order-detail-estado--COTIZADO {
  color: #1565C0;
}

html[data-work="ops"][data-work-theme="dark"] {
  color-scheme: dark;
  --color-primary: #C34024;
  --color-primary-dark: #A8321E;
  --color-secondary: #C34024;
  --color-bg: #161A1F;
  --color-text: #E8EDF2;
  --color-text-muted: #9AA6B2;
  --color-surface: #1E242C;
  --color-border: #33404C;
  --color-header: #12161B;
  --color-footer: #12161B;
  --color-footer-text: #E8EDF2;
  --color-footer-muted: rgba(232, 237, 242, 0.75);
  --color-chrome-text: #E8EDF2;
  --color-chrome-muted: rgba(232, 237, 242, 0.75);
  --color-footer-link: #C34024;
  --color-input-bg: #12161B;
  --color-modal-bg: #1E242C;
  --color-drawer: #1A2026;
  --color-sticky: #12161B;
  --color-glow: rgba(195, 64, 36, 0.14);
  --color-card: #1E242C;
  --color-alert-bg: rgba(180, 80, 0, 0.80);
  --color-alert-text: #FFFFFF;
  --color-alert-border: #C34024;
  --color-on-accent: #FFFFFF;
  --color-price: #C34024;
  --color-hairline: #2A333C;
  --color-ficha: #2C3540;
  --color-ficha-border: #455463;
  --shadow-ficha: 0 10px 22px rgba(0, 0, 0, 0.45);
  --color-panel: #1E242C;
  --color-block: #1E242C;
  --color-btn-ghost: #12161B;
  --color-btn-ghost-border: #3A4652;
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.4);
}

html[data-work="ops"][data-work-theme="dark"] .product-card {
  background: #12161B;
}

html[data-work="ops"][data-work-theme="dark"] .btn-primary {
  color: #000000;
}

html[data-work="ops"][data-work-theme="dark"] .btn-ghost {
  background: #12161B;
  color: #E8EDF2;
}

html[data-work="ops"][data-work-theme="dark"] .modal-backdrop {
  background: rgba(8, 12, 16, 0.62);
}

html[data-work="ops"][data-work-theme="light"] .product-card {
  background: #FFFFFF;
  color: #2F353B;
}

/* Caja lado a lado (cuenta 260px derecha): scroll en menú y en renglones de cuenta */
@media (min-width: 521px) {
  html[data-work="ops"] .app-scroll:has(#screen-sales:not([hidden]) #salesPanelMostrador:not([hidden])) {
    overflow: hidden;
  }

  html[data-work="ops"] #screen-sales:not([hidden]):has(#salesPanelMostrador:not([hidden])) {
    height: 100%;
    min-height: 0;
  }

  html[data-work="ops"] #screen-sales:not([hidden]) .sales-layout:has(#salesPanelMostrador:not([hidden])) {
    height: 100%;
    min-height: 0;
  }

  html[data-work="ops"] .sales-panel--mostrador:not([hidden]) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-board,
  html[data-work="ops"] .sales-panel--mostrador .pos-ticket {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-ticket .cart-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* iPad / tablet vertical: caja en 2 columnas (menú izq · cuenta der), menú compacto */
@media (max-width: 960px) and (min-width: 521px) {
  html[data-work="ops"] .app-scroll:has(#screen-sales:not([hidden]) #salesPanelMostrador:not([hidden])) {
    overflow: hidden;
  }

  html[data-work="ops"] #screen-sales:not([hidden]):has(#salesPanelMostrador:not([hidden])) {
    height: 100%;
    min-height: 0;
  }

  html[data-work="ops"] #screen-sales:not([hidden]) .sales-layout:has(#salesPanelMostrador:not([hidden])) {
    height: 100%;
    min-height: 0;
  }

  html[data-work="ops"] .sales-panel--mostrador:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 0.3rem;
    height: 100%;
    min-height: 0;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-board,
  html[data-work="ops"] .sales-panel--mostrador .pos-ticket {
    height: 100%;
    min-height: 0;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-menu {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.22rem 0.28rem 0.28rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-menu .block-title {
    margin-bottom: 0.1rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  html[data-work="ops"] .sales-panel--mostrador .catalog-section {
    margin-bottom: 0.26rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .catalog-section-title {
    margin-bottom: 0.14rem;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-ticket {
    padding: 0.28rem 0.32rem 0.38rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-cuenta-head {
    margin-bottom: 0.18rem;
    gap: 0.28rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-cuenta-head .block-title {
    font-size: 0.74rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-order-badge {
    min-height: 1.28rem;
    padding: 0.08rem 0.34rem;
    font-size: 0.54rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-nueva-orden {
    width: 1.65rem;
    height: 1.65rem;
    min-height: 1.65rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .cart-row {
    min-height: 2rem;
    padding: 0.2rem 0.24rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .cart-row-qty {
    min-width: 1.35rem;
    font-size: 0.82rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .cart-row-info {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  html[data-work="ops"] .sales-panel--mostrador .cart-row-name {
    font-weight: 800;
  }

  html[data-work="ops"] .sales-panel--mostrador .cart-extra {
    font-size: 0.62rem;
    font-weight: 400;
  }

  html[data-work="ops"] .sales-panel--mostrador .cart-note {
    font-size: 0.62rem;
    font-weight: 400;
  }

  html[data-work="ops"] .sales-panel--mostrador .cart-total-row {
    margin: 0.08rem 0 0.22rem;
    font-size: 0.68rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .cart-total-row strong {
    font-size: 1.05rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-ticket-foot {
    padding-top: 0.2rem;
    padding-bottom: 0.28rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .protein-kicker {
    font-size: 0.56rem;
    margin-bottom: 0.1rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-servicio {
    gap: 0.18rem;
    margin-bottom: 0.28rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-servicio-btn {
    min-height: 2rem;
    font-size: 0.58rem;
    padding: 0.14rem 0.1rem;
    border-radius: 0.45rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .field {
    margin-bottom: 0.28rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .field > span {
    font-size: 0.56rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .field input {
    min-height: 1.85rem;
    padding: 0.28rem 0.38rem;
    font-size: 0.78rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-pay {
    min-height: 2.05rem;
    font-size: 0.74rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-banner--compact {
    padding: 0.35rem 0.5rem;
    gap: 0.4rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-banner-eye {
    width: 2.1rem;
    height: 2.1rem;
    min-width: 2.1rem;
    min-height: 2.1rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-banner-client {
    font-size: 0.95rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-banner-meta {
    font-size: 0.66rem;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-folio-badge {
    font-size: 0.78rem;
    padding: 0.28rem 0.5rem;
  }

  .sales-nav-btn {
    min-height: 2rem;
    font-size: 0.58rem;
    gap: 0.22rem;
    padding: 0.18rem 0.14rem;
  }

  .sales-nav-ico {
    width: 0.95rem;
    height: 0.95rem;
  }

  html[data-work="ops"] .ops-wide {
    padding: 0.18rem 0.32rem 0.24rem;
  }
}

@media (max-width: 960px) {
  html[data-work="ops"] .app-scroll:has(#screen-sales:not([hidden]) #salesPanelInbox:not([hidden])),
  html[data-work="ops"] .app-scroll:has(#screen-sales:not([hidden]) #salesPanelConsumos:not([hidden])),
  html[data-work="ops"] .app-scroll:has(#screen-sales:not([hidden]) #salesPanelEnvios:not([hidden])) {
    overflow: hidden;
  }

  html[data-work="ops"] #screen-sales:not([hidden]):has(#salesPanelInbox:not([hidden])),
  html[data-work="ops"] #screen-sales:not([hidden]):has(#salesPanelConsumos:not([hidden])),
  html[data-work="ops"] #screen-sales:not([hidden]):has(#salesPanelEnvios:not([hidden])) {
    height: 100%;
    min-height: 0;
  }

  html[data-work="ops"] #screen-sales:not([hidden]) .sales-layout:has(#salesPanelInbox:not([hidden])),
  html[data-work="ops"] #screen-sales:not([hidden]) .sales-layout:has(#salesPanelConsumos:not([hidden])),
  html[data-work="ops"] #screen-sales:not([hidden]) .sales-layout:has(#salesPanelEnvios:not([hidden])) {
    height: 100%;
    min-height: 0;
  }

  .pos-toolbar {
    grid-template-columns: 1fr;
  }
  .inbox-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pedidos-board {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
  }
  .envios-board:not(.envios-board--3col) {
    grid-template-columns: 1fr;
  }
  .inbox-section--prep {
    max-height: none;
  }
  .inbox-sections--online {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  /* Caja apilada (menú arriba · cuenta abajo): un solo scroll en app-scroll */
  html[data-work="ops"] .app-scroll:has(#screen-sales:not([hidden]) #salesPanelMostrador:not([hidden])) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html[data-work="ops"] #screen-sales:not([hidden]):has(#salesPanelMostrador:not([hidden])) {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  html[data-work="ops"] #screen-sales:not([hidden]) .sales-layout:has(#salesPanelMostrador:not([hidden])) {
    height: auto;
    min-height: 0;
  }

  html[data-work="ops"] .sales-panel--mostrador:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-board {
    height: auto;
    min-height: 0;
    overflow: visible;
    flex-shrink: 0;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-menu {
    overflow: visible;
    flex: 0 0 auto;
    min-height: 0;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-ticket {
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    overflow: visible;
  }

  html[data-work="ops"] .sales-panel--mostrador .pos-ticket .cart-list {
    overflow: visible;
    flex: 0 0 auto;
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .inbox-sections,
  .inbox-sections--online,
  .envios-board--3col {
    grid-template-columns: 1fr;
  }

  .envios-board--3col {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
}

html[data-work="ops"][data-work-theme="light"] {
  color-scheme: light;
  --color-primary: #5E6B76;
  --color-primary-dark: #4A545E;
  --color-secondary: #5E6B76;
  --color-bg: #E8EAED;
  --color-text: #2F353B;
  --color-text-muted: #667078;
  --color-surface: #F4F5F7;
  --color-border: #D0D5DA;
  --color-header: #4D565F;
  --color-footer: #4D565F;
  --color-footer-text: #F3F5F7;
  --color-footer-muted: rgba(243, 245, 247, 0.82);
  --color-chrome-text: #F3F5F7;
  --color-chrome-muted: rgba(243, 245, 247, 0.82);
  --color-footer-link: #FFD08A;
  --color-input-bg: #FFFFFF;
  --color-modal-bg: #F4F5F7;
  --color-drawer: #434C54;
  --color-sticky: #4D565F;
  --color-glow: transparent;
  --color-card: #FFFFFF;
  --color-alert-bg: #FFE0B2;
  --color-alert-text: #6D3B00;
  --color-alert-border: #C2410C;
  --color-on-accent: #FFFFFF;
  --color-price: #2F353B;
  --color-hairline: #E2E6EA;
  --color-ficha: #FFFFFF;
  --color-ficha-border: #C9D0D6;
  --shadow-ficha: 0 10px 22px rgba(47, 53, 59, 0.18);
  --color-panel: #FFFFFF;
  --color-block: #FFFFFF;
  --color-btn-ghost: #FFFFFF;
  --color-btn-ghost-border: #C9D0D6;
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.12);
}

html[data-work="ops"][data-work-theme="light"] .pedidos-online {
  background: #E3F2FD;
  border-color: #1565C0;
  box-shadow: inset 4px 0 0 #1565C0;
}

html[data-work="ops"][data-work-theme="light"] .pedidos-online-kicker {
  color: #0D47A1;
}

html[data-work="ops"] .brand-title {
  color: var(--color-chrome-text);
}

html[data-work="ops"] .header-brand-logo {
  background: transparent;
}

html[data-work="ops"] .btn-primary {
  color: #fff;
}

html[data-work="ops"] .btn-secondary {
  color: var(--color-text);
}

html[data-work="ops"] .btn-ghost {
  background: #fff;
  color: var(--color-text);
  border-color: var(--color-btn-ghost-border);
}

html[data-work="ops"] .btn-header-icon {
  color: var(--color-chrome-text);
}

html[data-work="ops"] .btn-header-action {
  color: var(--color-chrome-text);
}

html[data-work="ops"] .field > span::before,
html[data-work="ops"] .kpi-label::before {
  background: linear-gradient(180deg, #9AA7B2 0%, #6B7782 100%);
  box-shadow: none;
}

html[data-work="ops"] .kpi-card {
  background: #F4F5F7;
}

html[data-work="ops"] .kpi-value {
  color: #3A434C;
}

html[data-work="ops"] .data-table th,
html[data-work="ops"] .data-table td {
  border-bottom-color: #E2E6EA;
  color: #2F353B;
}

html[data-work="ops"] .block-card {
  box-shadow: 0 1px 2px rgba(47, 53, 59, 0.06);
}

html[data-work="ops"] .modal-dialog {
  background: #F7F8FA;
  color: #2F353B;
  border-color: #D0D5DA;
  box-shadow: 0 16px 40px rgba(47, 53, 59, 0.18);
}

html[data-work="ops"][data-work-theme="dark"] .order-detail {
  color: #2F353B;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-hero,
html[data-work="ops"][data-work-theme="dark"] .order-detail-addr,
html[data-work="ops"][data-work-theme="dark"] .order-detail-items {
  background: #FFFFFF;
  border-color: #C9D0D6;
  color: #2F353B;
  box-shadow: none;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-name,
html[data-work="ops"][data-work-theme="dark"] .order-line-name {
  color: #1C2228;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-phone,
html[data-work="ops"][data-work-theme="dark"] .order-line-note,
html[data-work="ops"][data-work-theme="dark"] .order-detail-empty,
html[data-work="ops"][data-work-theme="dark"] .order-detail-foot {
  color: #4A545E;
}

html[data-work="ops"][data-work-theme="dark"] .order-chip {
  background: #FFFFFF;
  border-color: #C9D0D6;
  color: #1C2228;
}

html[data-work="ops"][data-work-theme="dark"] .order-chip--entrega {
  color: #C2410C;
  border-color: #A8321E;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-kicker {
  color: #C2410C;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-estado {
  background: #FFE8CC;
  color: #C2410C;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-estado--ACEPTADO {
  background: #FFEBEE;
  color: #B71C1C;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-estado--EN_PREPARACION,
html[data-work="ops"][data-work-theme="dark"] .order-detail-estado--COCINA {
  background: #FFE8CC;
  color: #C2410C;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-estado--COTIZADO {
  background: #E3F2FD;
  color: #0D47A1;
}

html[data-work="ops"][data-work-theme="dark"] .order-detail-estado--EXPIRADO {
  background: #EEF1F4;
  color: #4A545E;
}

html[data-work="ops"][data-work-theme="dark"] .order-line,
html[data-work="ops"][data-work-theme="dark"] .order-line--head {
  border-bottom-color: #E2E6EA;
}

html[data-work="ops"][data-work-theme="dark"] .order-line.order-line--head {
  background: #EEF1F4;
  color: #4A545E;
}

html[data-work="ops"][data-work-theme="dark"] .order-line-qty {
  background: #EEF1F4;
  color: #1C2228;
}

html[data-work="ops"][data-work-theme="dark"] .order-line-amt {
  color: #C2410C;
}

html[data-work="ops"] .modal-head h2,
html[data-work="ops"] .modal-head .btn-icon {
  color: #2F353B;
}

html[data-work="ops"] .modal-backdrop {
  background: rgba(47, 53, 59, 0.32);
}

/* Caja · Mi concentrado (vendedor) — acceso contraseña */
#posConcentradoAuthModal .modal-dialog--concentrado-auth {
  width: min(26rem, calc(100% - 1rem));
}

#posConcentradoAuthModal .conc-gate-intro {
  margin-bottom: 0.65rem;
}

#posConcentradoAuthModal .conc-gate-kicker {
  margin: 0 0 0.2rem;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748B;
}

#posConcentradoAuthModal .conc-gate-hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #1E293B;
}

#posConcentradoAuthModal .modal-dialog--concentrado-auth .modal-head h2 {
  color: #0F172A;
}

/* Caja · Mi concentrado — reporte compacto (móvil primero) */
#posConcentradoReportModal {
  align-items: stretch;
  justify-content: center;
  padding: 0.35rem;
}

#posConcentradoReportModal .modal-dialog--concentrado-report {
  width: min(72rem, calc(100vw - 0.7rem));
  max-width: none;
  height: min(calc(100dvh - 0.7rem), 100%);
  max-height: calc(100dvh - 0.7rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 0.55rem;
  background: #F8F9FA;
  color: #1E293B;
  border-color: #CBD5E1;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(148, 163, 184, 0.3);
}

#posConcentradoReportModal .modal-dialog--concentrado-report .modal-head {
  flex-shrink: 0;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
  border-radius: 0.55rem 0.55rem 0 0;
}

#posConcentradoReportModal .modal-dialog--concentrado-report .modal-head h2 {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #334155;
}

#posConcentradoReportModal .modal-dialog--concentrado-report .modal-head .btn-icon,
#posConcentradoAuthModal .modal-dialog--concentrado-auth .modal-head .btn-icon {
  color: #64748B;
}

#posConcentradoReportModal .modal-dialog--concentrado-report .conc-modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.65rem 0.55rem;
  gap: 0.45rem;
}

#posConcentradoReportModal .conc-report {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#posConcentradoReportModal .conc-report-head,
#posConcentradoReportModal .conc-filter,
#posConcentradoReportModal .conc-tabs,
#posConcentradoReportModal .conc-report-foot {
  flex-shrink: 0;
}

#posConcentradoReportModal .conc-panel.is-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Meta vendedor + KPIs en una sola franja */
#posConcentradoReportModal .conc-report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.45rem;
  background: #FFFFFF;
}

#posConcentradoReportModal .conc-report-meta {
  min-width: 0;
  flex: 1 1 10rem;
}

#posConcentradoReportModal .conc-report-vendor {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #0F172A;
  line-height: 1.2;
}

#posConcentradoReportModal .conc-report-period {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  font-weight: 400;
  color: #64748B;
  line-height: 1.25;
}

#posConcentradoReportModal .conc-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  flex: 0 0 auto;
}

#posConcentradoReportModal .conc-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.4rem;
  background: #F8FAFC;
}

#posConcentradoReportModal .conc-kpi-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748B;
  line-height: 1.2;
}

#posConcentradoReportModal .conc-kpi-value {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0F172A;
  line-height: 1.2;
}

/* Filtro: fechas + actualizar en una fila */
#posConcentradoReportModal .conc-filter {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.45rem;
  background: #FFFFFF;
  color-scheme: light;
}

#posConcentradoReportModal .conc-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.4rem 0.45rem;
  align-items: end;
}

#posConcentradoReportModal .conc-filter .field {
  margin: 0;
  gap: 0.18rem;
}

#posConcentradoReportModal .conc-filter .field > span,
#posConcentradoAuthModal .field > span {
  color: #64748B;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}

#posConcentradoReportModal .conc-filter .field > span::before,
#posConcentradoAuthModal .field > span::before {
  display: none;
}

#posConcentradoReportModal .conc-filter .field--datetime {
  min-width: 0;
}

#posConcentradoReportModal .conc-filter .field--datetime input,
#posConcentradoAuthModal .field input {
  max-width: 100%;
  width: 100%;
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #1E293B;
  color-scheme: light;
  -webkit-appearance: auto;
  appearance: auto;
}

#posConcentradoReportModal .conc-filter .field--datetime input {
  min-height: 2rem;
  height: 2rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 0.35rem;
}

#posConcentradoReportModal .conc-filter .field--datetime input::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  width: 0.95rem;
  height: 0.95rem;
  margin-inline-start: 0.1rem;
  padding: 0;
  filter: none;
}

#posConcentradoReportModal .conc-filter-go {
  align-self: end;
  min-height: 2rem;
  height: 2rem;
  padding: 0 0.65rem;
  gap: 0.3rem;
  font-size: 0.78rem;
}

#posConcentradoReportModal .conc-filter .form-alert {
  margin: 0.35rem 0 0;
}

#posConcentradoReportModal .conc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin: 0;
}

#posConcentradoReportModal .conc-tab {
  min-height: 1.9rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid #CBD5E1;
  border-radius: 0.35rem;
  background: #FFFFFF;
  color: #64748B;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
}

#posConcentradoReportModal .conc-tab.is-active {
  background: #FEF3C7;
  border-color: #A8321E;
  color: #0F172A;
}

#posConcentradoReportModal .conc-panel[hidden] {
  display: none !important;
}

#posConcentradoReportModal .conc-table-wrap {
  flex: 1;
  min-height: 6rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.45rem;
  overflow: auto;
  max-height: none;
  background: #FFFFFF;
}

#posConcentradoReportModal .conc-table {
  width: 100%;
}

#posConcentradoReportModal .conc-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #F1F5F9;
  color: #475569;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #E2E8F0;
  padding: 0.35rem 0.45rem;
}

#posConcentradoReportModal .conc-table td {
  border-bottom: 1px solid #EEF2F6;
  font-size: 0.78rem;
  color: #1E293B;
  padding: 0.35rem 0.45rem;
}

#posConcentradoReportModal .conc-table tbody tr:nth-child(even) {
  background: #F8FAFC;
}

#posConcentradoReportModal .conc-table tfoot .conc-tfoot th {
  position: sticky;
  bottom: 0;
  background: #E2E8F0;
  color: #0F172A;
  font-weight: 700;
  padding: 0.35rem 0.45rem;
}

#posConcentradoReportModal .conc-table .conc-num,
#posConcentradoReportModal .conc-table tfoot .conc-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#posConcentradoReportModal .conc-table .conc-col-action {
  width: 2.2rem;
  padding-left: 0.25rem;
  padding-right: 0.1rem;
  text-align: center;
  vertical-align: middle;
}

#posConcentradoReportModal .conc-table .conc-col-action .btn-icon {
  margin: 0 auto;
}

#posConcentradoReportModal .conc-report-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding-top: 0.35rem;
  border-top: 1px solid #E2E8F0;
}

#posConcentradoReportModal .conc-report-foot .confirm-btn {
  min-height: 2rem;
  height: 2rem;
  padding: 0 0.7rem;
  gap: 0.3rem;
  font-size: 0.78rem;
}

#posConcentradoReportModal .conc-modal-body.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.72;
}

#posConcentradoReportModal .conc-modal-body.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-panel, #fff) 35%, transparent);
}

#posConcentradoReportModal .conc-empty {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: #64748B;
  text-align: center;
}

@media (max-width: 560px) {
  #posConcentradoReportModal .conc-filter-row {
    grid-template-columns: 1fr 1fr;
  }

  #posConcentradoReportModal .conc-filter-go {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  #posConcentradoReportModal .conc-report-head {
    flex-direction: column;
    align-items: stretch;
  }

  #posConcentradoReportModal .conc-kpis {
    width: 100%;
  }

  #posConcentradoReportModal .conc-kpi {
    flex: 1 1 calc(50% - 0.2rem);
  }
}

html[data-work="ops"] #posConcentradoAuthModal .modal-dialog--concentrado-auth,
html[data-work="ops"] #posConcentradoReportModal .modal-dialog--concentrado-report {
  background: #F7F8FA;
  color: #2F353B;
  border-color: #D0D5DA;
  box-shadow: 0 16px 40px rgba(47, 53, 59, 0.18);
}

html[data-work="ops"] #posConcentradoAuthModal .modal-head h2,
html[data-work="ops"] #posConcentradoAuthModal .modal-head .btn-icon,
html[data-work="ops"] #posConcentradoReportModal .modal-head h2,
html[data-work="ops"] #posConcentradoReportModal .modal-head .btn-icon {
  color: #2F353B;
}

html[data-work="ops"] #posConcentradoAuthModal .conc-gate-hint,
html[data-work="ops"] #posConcentradoAuthModal .conc-gate-kicker,
html[data-work="ops"] #posConcentradoAuthModal .field > span,
html[data-work="ops"] #posConcentradoReportModal .conc-report-vendor {
  color: #2F353B;
}

html[data-work="ops"] #posConcentradoReportModal .conc-report-period,
html[data-work="ops"] #posConcentradoReportModal .field > span,
html[data-work="ops"] #posConcentradoReportModal .conc-kpi-label {
  color: #5C6772;
}

html[data-work="ops"] #posConcentradoAuthModal .field input,
html[data-work="ops"] #posConcentradoReportModal .field input {
  background: #FFFFFF;
  border-color: #C9D0D6;
  color: #1C2228;
  color-scheme: light;
}

html[data-work="ops"] #posConcentradoReportModal .conc-filter,
html[data-work="ops"] #posConcentradoReportModal .conc-kpi {
  background: #FFFFFF;
  border-color: #D0D5DA;
  color-scheme: light;
}

html[data-work="ops"] #posConcentradoReportModal .conc-tab {
  color: #667078;
  border-color: #D0D5DA;
}

html[data-work="ops"] #posConcentradoReportModal .conc-tab.is-active {
  background: #EEF1F4;
  border-color: #5E6B76;
  color: #2F353B;
}

html[data-work="ops"] #posConcentradoReportModal .conc-kpi-value {
  color: #2F353B;
}

html[data-work="ops"] #posConcentradoReportModal .conc-table-wrap {
  border-color: #D0D5DA;
  background: #FFFFFF;
}

html[data-work="ops"] #posConcentradoReportModal .conc-table th {
  background: #EEF1F4;
  color: #3A434C;
  border-bottom-color: #D0D5DA;
}

html[data-work="ops"] #posConcentradoReportModal .conc-table td,
html[data-work="ops"] #posConcentradoReportModal .conc-table tfoot th {
  color: #2F353B;
  border-bottom-color: #E2E6EA;
}

html[data-work="ops"] #posConcentradoReportModal .conc-table tbody tr:nth-child(even) {
  background: #F7F8FA;
}

html[data-work="ops"] #posConcentradoReportModal .conc-table tfoot .conc-tfoot th {
  background: #EEF1F4;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .modal-dialog--concentrado-auth,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .modal-dialog--concentrado-report {
  background: #F8F9FA;
  color: #1E293B;
  border-color: #CBD5E1;
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(148, 163, 184, 0.35);
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .modal-head,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .modal-dialog--concentrado-report .modal-head {
  background: #FFFFFF;
  border-bottom-color: #E2E8F0;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .modal-head h2,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .modal-head .btn-icon,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .modal-dialog--concentrado-report .modal-head h2,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .modal-dialog--concentrado-report .modal-head .btn-icon,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-report-vendor,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-kpi-value {
  color: #0F172A;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .conc-gate-hint,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .conc-gate-kicker,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .field > span,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-report-period,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .field > span,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-kpi-label,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-empty {
  color: #64748B;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .field input,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .field input {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #1E293B;
  color-scheme: light;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-filter,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-kpi {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color-scheme: light;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-tab {
  background: #FFFFFF;
  color: #64748B;
  border-color: #CBD5E1;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-tab.is-active {
  background: #FEF3C7;
  border-color: #A8321E;
  color: #0F172A;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-table-wrap {
  border-color: #E2E8F0;
  background: #FFFFFF;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-table th {
  background: #F1F5F9;
  color: #475569;
  border-bottom-color: #E2E8F0;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-table td,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-table tfoot th {
  color: #1E293B;
  border-bottom-color: #EEF2F6;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-table tbody tr:nth-child(even) {
  background: #F8FAFC;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .conc-table tfoot .conc-tfoot th {
  background: #E2E8F0;
  color: #0F172A;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .confirm-btn,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .confirm-btn {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #1E293B;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .confirm-btn:hover,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .confirm-btn:hover {
  background: #F1F5F9;
}

html[data-work="ops"][data-work-theme="dark"] #posConcentradoAuthModal .confirm-btn--primary,
html[data-work="ops"][data-work-theme="dark"] #posConcentradoReportModal .confirm-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
}

html[data-work="ops"][data-work-theme="dark"] #orderModal.modal--order-detail .modal-dialog--order-detail {
  background: #F8F9FA;
  color: #1E293B;
  border-color: #CBD5E1;
}

html[data-work="ops"][data-work-theme="dark"] #orderModal.modal--order-detail .modal-head {
  background: #FFFFFF;
  border-bottom-color: #E2E8F0;
}

html[data-work="ops"][data-work-theme="dark"] #orderModal.modal--order-detail .modal-head h2,
html[data-work="ops"][data-work-theme="dark"] #orderModal.modal--order-detail .modal-head .btn-icon {
  color: #0F172A;
}

html[data-work="ops"][data-work-theme="dark"] #orderModal.modal--order-detail .modal-head .btn-icon {
  color: #475569;
}

html[data-theme="light"] .home-list {
  color: #1A1208;
}

html[data-theme="light"] .home-item-btn:hover {
  filter: none;
}

html[data-theme="light"]:not([data-work="ops"]) .product-card {
  background: #FFFCF7;
  color: #1A1208;
}

@media (max-width: 767px) {
  .header-user { display: none; }
}

@media (max-width: 490px) {
  /* Iconos del header (tema, carrito, acceso, etc.) permanecen visibles. */
  .header-user {
    display: none !important;
  }

  .brand-sub { display: none; }

  .demo-badge__full { display: none; }
  .demo-badge__short { display: inline; }
}

@media (min-width: 768px) {
  .nav-burger,
  .header-drawer { display: none !important; }

  .client-grid {
    grid-template-columns: 1.2fr 1fr 0.9fr;
  }

  .ticket-actions {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .ticket-actions .btn { flex: 1 1 0; min-width: 0; }

  .header-tools .btn-header-action {
    min-width: 8.5rem;
  }

  .home-hero {
    grid-template-columns: 1fr;
    min-height: clamp(16rem, 32vw, 24rem);
  }

  .home-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 0.55rem;
  }

  .home-photos,
  .home-grid > .home-panel,
  .home-side {
    order: 0;
  }

  .home-photos {
    grid-template-columns: 1fr;
  }

  .product-card h3 { font-size: 0.78rem; }
}

@media (max-width: 720px) {
  .app-footer { font-size: 0.68rem; }
  .footer-dev-by { display: none; }
  .footer-version,
  .footer-link,
  .footer-credit { font-size: 0.62rem; }
}

@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr; }

  .home-hero {
    grid-template-columns: 1fr;
    min-height: clamp(13rem, 52vw, 18rem);
  }

  .home-hero-center {
    width: min(26rem, 94%);
    padding: 1.1rem 0.6rem 1.25rem;
  }
}

@media (max-width: 479px) {
  .shell-inner {
    width: 100%;
    padding-left: max(0.55rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.55rem, env(safe-area-inset-right, 0px));
  }

  .home-elige { letter-spacing: 0.08em; }
}

@media (max-width: 425px) {
  .footer-app-name,
  .footer-copy-word,
  .footer-mks-full { display: none; }
  .footer-copy-symbol,
  .footer-mks-short { display: inline; }
}

@media (max-width: 360px) {
  .demo-badge__full { display: none; }
  .demo-badge__short { display: inline; }
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.1rem 0.1rem 0.4rem;
}

.inbox-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.32rem 0.4rem 0.32rem 0.48rem;
  border: 1px solid var(--color-ficha-border);
  border-radius: var(--radius);
  background: var(--color-ficha);
  box-shadow: inset 4px 0 0 var(--color-primary), var(--shadow-ficha);
  position: relative;
  z-index: 1;
}

.inbox-item--tap {
  cursor: pointer;
}

.inbox-item-main {
  min-width: 0;
  flex: 1 1 auto;
}

.inbox-item .btn {
  flex-shrink: 0;
  min-height: 1.9rem;
  padding: 0 0.42rem;
  font-size: 0.68rem;
}

.inbox-listo {
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: var(--color-primary);
  color: var(--color-on-accent);
}

.inbox-listo:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-accent);
}

.inbox-who {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text);
  word-break: break-word;
}

.inbox-phone {
  margin: 0.08rem 0 0;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.inbox-id-line {
  margin: 0.22rem 0 0;
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

.inbox-item-main .inbox-meta {
  margin: 0.18rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.inbox-estado {
  display: inline-block;
  margin-left: 0.35rem;
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.inbox-meta {
  word-break: break-word;
}

.consumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr));
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  align-content: start;
  padding: 0.2rem 0.25rem 0.65rem;
}

.consumo-grid .cart-empty {
  grid-column: 1 / -1;
}

.consumo-ficha {
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.5rem 0.5rem;
  border: 1px solid var(--color-ficha-border);
  border-radius: 0.85rem;
  background: var(--color-ficha);
  color: var(--color-text);
  box-shadow: inset 4px 0 0 var(--color-primary), var(--shadow-ficha);
  cursor: pointer;
  text-align: center;
  position: relative;
  z-index: 1;
}

.consumo-ficha:active {
  transform: scale(0.97);
}

.consumo-ficha strong {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  word-break: break-word;
}

.consumo-ficha-total {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

/* Ficha con items en preparación */
.consumo-ficha--pending {
  border-color: #C2410C;
  box-shadow: inset 4px 0 0 #C2410C, var(--shadow-ficha);
}

.consumo-ficha-prep {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C2410C;
  background: rgba(194, 65, 12, 0.12);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
}

.consumo-pending-label {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C2410C;
}

.consumo-pending-total {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.consumo-pending-total strong {
  color: #C2410C;
  font-weight: 800;
}

.envio-ficha-meta {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

#posEnvioAssignWrap {
  margin-top: 0.75rem;
}

.inbox-notes {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
}

.entrega-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
}

.chip-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--tap);
  padding: 0 0.6rem;
  border: 1px solid rgba(195, 64, 36, 0.55);
  border-radius: 999px;
  background: #fff;
  color: #1A1208;
  font-weight: 800;
  cursor: pointer;
}

.chip-radio:has(input:checked) {
  background: var(--color-primary);
  color: #000;
  border-color: var(--color-primary);
}

.chip-radio input {
  margin: 0;
}

.dom-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
}

.dom-chip-row .chip {
  max-width: 100%;
  text-align: center;
}

.pedido-map {
  display: block;
  width: 100%;
  height: 220px;
  margin-top: 0.5rem;
  border: 1px solid rgba(195, 64, 36, 0.45);
  border-radius: 0.45rem;
  background: #fff;
  overflow: hidden;
  z-index: 1;
}

.pedido-map .leaflet-pane,
.pedido-map .leaflet-top,
.pedido-map .leaflet-bottom,
.pedido-map .leaflet-control {
  z-index: 2;
}

/* Fog of war: capa no interactiva para que el pin/clics pasen al mapa */
.map-coverage-fog,
.map-coverage-ring {
  pointer-events: none;
}

.param-envio-map {
  height: 260px;
}

.pedido-pin-status {
  margin: 0.45rem 0 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid var(--color-hairline);
  font-weight: 600;
  line-height: 1.35;
}

.pedido-pin-status--info {
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(195, 64, 36, 0.35);
}

.pedido-pin-status--ok {
  color: #BBF7D0;
  background: rgba(22, 101, 52, 0.35);
  border-color: rgba(74, 222, 128, 0.55);
}

.pedido-pin-status--bad {
  color: #FECACA;
  background: rgba(127, 29, 29, 0.38);
  border-color: rgba(248, 113, 113, 0.55);
}

.pedido-coverage-legend {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

html[data-theme="light"] .pedido-pin-status--info {
  color: #475569;
  background: #F8FAFC;
}

html[data-theme="light"] .pedido-pin-status--ok {
  color: #166534;
  background: #DCFCE7;
  border-color: #86EFAC;
}

html[data-theme="light"] .pedido-pin-status--bad {
  color: #991B1B;
  background: #FEE2E2;
  border-color: #FCA5A5;
}

.cart-envio-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.68));
}

.cart-envio-line strong {
  font-weight: 600;
  color: inherit;
}

.field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  resize: vertical;
}

.aceptar-card {
  width: min(26rem, 100%);
  padding: 0 0 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-block);
  box-shadow: 0 8px 28px var(--color-glow);
  overflow: hidden;
}

.aceptar-card--motivate {
  text-align: center;
}

.aceptar-hero {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0a0a0a;
}

.aceptar-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.aceptar-kicker {
  margin: 0.85rem 1rem 0.2rem !important;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.aceptar-progress {
  position: relative;
  height: 0.28rem;
  margin: 0.55rem 1rem 0.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  overflow: hidden;
}

.aceptar-progress[hidden] {
  display: none !important;
}

.aceptar-progress-burst {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-primary) 55%, #fff) 35%,
    var(--color-primary) 50%,
    color-mix(in srgb, var(--color-primary) 55%, #fff) 65%,
    transparent 100%
  );
  animation: aceptar-sweep 1.55s ease-in-out infinite;
}

@keyframes aceptar-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
  .aceptar-progress-burst {
    animation: none;
    left: 0;
    width: 100%;
    opacity: 0.85;
    transform: none;
  }
}

.aceptar-title {
  margin: 0 1rem 0.35rem;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 4.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--color-text);
}

.aceptar-lead {
  margin: 0 1.1rem 0.75rem !important;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.aceptar-facts {
  margin: 0 1rem 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-align: left;
}

.aceptar-facts p {
  margin: 0 0 0.35rem !important;
  font-size: 0.88rem;
  line-height: 1.35;
}

.aceptar-facts p:last-child {
  margin-bottom: 0 !important;
}

.aceptar-facts strong {
  color: var(--color-primary);
  font-size: 1.05rem;
}

.aceptar-folio {
  margin-bottom: 0.55rem !important;
}

.aceptar-motivo {
  margin-bottom: 0.55rem !important;
}

.aceptar-total {
  margin-top: 0.65rem !important;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.aceptar-items {
  margin: 0;
}

.aceptar-items-kicker {
  margin: 0 0 0.4rem !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.aceptar-items-empty {
  margin: 0 !important;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.aceptar-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.aceptar-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.aceptar-item-qty {
  flex: 0 0 auto;
  min-width: 1.35rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-primary);
  line-height: 1.25;
}

.aceptar-item-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.aceptar-item-name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--color-text);
}

.aceptar-item-extra {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.aceptar-item-note {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-muted);
  font-style: italic;
}

.aceptar-card .form-alert {
  margin: 0 1rem 0.55rem;
}

.aceptar-cta-wrap {
  padding: 0 1rem;
}

.aceptar-cta {
  width: 100%;
  min-height: 2.85rem;
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.aceptar-cta[hidden] {
  display: none !important;
}

.aceptar-secondary {
  margin: 0.35rem 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aceptar-cancel-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body, inherit);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  opacity: 0.78;
  cursor: pointer;
  padding: 0.4rem 0.35rem;
  margin: 0;
}

.aceptar-cancel-link:hover {
  color: #E57373;
  opacity: 1;
}

.aceptar-cancel-link[hidden] {
  display: none !important;
}

.aceptar-actions #btnAceptarPedido[hidden],
.aceptar-actions #btnAceptarCancelar[hidden] {
  display: none !important;
}

.aceptar-entrega-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 1rem;
}

.aceptar-entrega-actions .confirm-btn {
  text-decoration: none;
  min-width: 7.5rem;
  justify-content: center;
}

@page {
  size: 80mm auto;
  margin: 0;
}

@media print {
  html, body {
    width: 80mm;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff;
    color: #000000;
  }

  .app-shell,
  .app-scroll {
    display: block !important;
    width: 80mm;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff;
  }

  .app-header,
  .app-footer,
  .pedido-sticky,
  .hint-overlay,
  .menu-scroll-cue,
  .no-print,
  .nav-burger,
  .header-drawer,
  .ticket-actions,
  #screen-home,
  #screen-login,
  #screen-sales,
  #screen-admin,
  #screen-aceptar,
  .modal,
  .inbox-toast,
  .inbox-confirm-banner,
  .floating-tip {
    display: none !important;
  }

  html.kitchen-print .app-shell,
  html.kitchen-print #screen-ticket,
  html.kitchen-print #screen-ticket:not([hidden]),
  html[data-work="ops"].kitchen-print #screen-ticket,
  html[data-work="ops"].kitchen-print #screen-ticket:not([hidden]),
  html.kitchen-print .ticket-stage,
  html.kitchen-print .ticket-print-pack {
    display: none !important;
  }

  html.kitchen-print #kitchenPrintPack,
  html.kitchen-print #kitchenPrintPack[hidden] {
    display: block !important;
    width: 80mm;
    max-width: 80mm;
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #111111;
  }

  html[data-work="ops"] #screen-ticket:not([hidden]),
  #screen-ticket {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .ticket-stage,
  html[data-work="ops"] .ticket-stage {
    display: block;
    width: 80mm;
    height: auto !important;
    overflow: visible !important;
    padding: 0;
    align-items: stretch;
  }

  .ticket-print-pack {
    width: 80mm;
    max-width: 80mm;
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
    padding: 0;
    margin: 0;
  }

  .ticket-sheet {
    width: 80mm;
    max-width: 80mm;
    margin: 0;
    padding: 2mm 3mm 4mm;
    border: 0;
    box-shadow: none;
    background: #ffffff;
    color: #111111;
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-before: avoid;
    break-before: avoid;
    page-break-after: avoid;
    break-after: avoid;
  }

  .ticket-sheet--kitchen {
    display: block !important;
    /* Rollo térmico continuo: NO forzar salto de página entre cliente y cocina. */
    page-break-before: avoid !important;
    break-before: avoid !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-top: 2mm;
  }

  .ticket-sheet--kitchen[hidden],
  .ticket-cut[hidden] {
    display: none !important;
  }

  .ticket-cut {
    margin: 2mm 0;
    color: #111;
    page-break-before: avoid;
    page-break-after: avoid;
    break-before: avoid;
    break-after: avoid;
  }

  .ticket-print-pack {
    page-break-inside: auto;
    break-inside: auto;
  }

  .ticket-copy-label {
    display: block !important;
    color: #111;
  }

  .ticket-kitchen-banner {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
  }

  .ticket-brand,
  .ticket-order,
  .ticket-meta,
  .ticket-client,
  .ticket-lines th,
  .ticket-lines td,
  .ticket-totals,
  .ticket-foot {
    color: #111111;
  }
}

/* --- Admin full-width hub (producción) --- */
.admin-layout--full { width: 100%; max-width: none; }
.admin-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin-bottom: 0.35rem;
}
.admin-topbar .screen-title { flex: 1; margin: 0; }
.admin-nav {
  --admin-hub-gap: 0.5rem;
  --admin-hub-tile-h: 5.35rem;
  --admin-hub-bar-h: 2.85rem;
  width: min(100%, 32rem);
  margin: 0 auto 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--admin-hub-gap);
}
.admin-hub-sucursal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem 0.75rem;
  min-height: var(--admin-hub-bar-h);
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--admin-border, var(--color-ficha-border));
  border-radius: 10px;
  background: var(--admin-surface, var(--color-ficha));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  box-sizing: border-box;
}
.admin-hub-sucursal__label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.admin-hub-sucursal__select {
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  margin: 0;
  padding: 0.35rem 1.85rem 0.35rem 0.55rem;
  border: 1px solid var(--admin-field-input-border, var(--color-ficha-border));
  border-radius: 8px;
  background: var(--admin-field-input-bg, var(--color-surface));
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--admin-field-inset, inset 0 1px 2px rgba(15, 23, 42, 0.06));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-hub-sucursal__select:focus {
  outline: none;
  border-color: var(--admin-accent, var(--color-primary));
  box-shadow: var(--admin-field-inset, inset 0 1px 2px rgba(15, 23, 42, 0.06)), 0 0 0 2px var(--admin-accent-soft, rgba(37, 99, 235, 0.12));
}
.admin-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-hub-gap);
  width: 100%;
}
.admin-hub--sub {
  margin: 0.5rem auto 0;
  max-width: 32rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-hub-gap, 0.5rem);
}
.admin-hub-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: var(--admin-hub-tile-h);
  padding: 0.65rem 0.45rem;
  border: 1px solid var(--admin-border, var(--color-ficha-border));
  border-radius: 10px;
  background: var(--admin-surface, var(--color-ficha));
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.admin-hub-btn:hover,
.admin-hub-btn:focus-visible {
  border-color: var(--admin-accent, var(--color-primary));
  background: var(--admin-surface-hover, var(--color-surface));
  outline: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.admin-hub-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: var(--admin-icon-bg, rgba(255, 255, 255, 0.06));
  color: var(--admin-icon-fg, var(--color-text-muted));
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-hub-btn:hover .admin-hub-ico,
.admin-hub-btn:focus-visible .admin-hub-ico {
  background: var(--admin-accent-soft, rgba(37, 99, 235, 0.12));
  color: var(--admin-accent, var(--color-primary));
}
.admin-hub-svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}
.admin-hub-label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text);
}
@media (max-width: 360px) {
  .admin-nav {
    --admin-hub-tile-h: 4.85rem;
  }
  .admin-hub-label {
    font-size: 0.74rem;
  }
}
.admin-panel { margin-top: 0; width: 100%; }

.param-groups {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.param-group {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  overflow: hidden;
}

.param-group__head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.param-group__head::-webkit-details-marker,
.param-group__head::marker {
  display: none;
  content: "";
}

.param-group__chev {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--color-text-muted, #9CA3AF);
  transition: transform 0.18s ease;
}

.param-group[open] > .param-group__head .param-group__chev {
  transform: rotate(90deg);
}

.param-group__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.param-group__title {
  font-family: var(--font-ui, inherit);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.param-group__desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text-muted, #9CA3AF);
}

.param-group__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-hairline, rgba(255, 255, 255, 0.08));
}

.param-group__body > .field:first-child,
.param-group__body > .hint-check:first-child,
.param-group__body > #paramDescuentos:first-child {
  margin-top: 0.85rem;
}

.param-group__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.param-descuentos {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.param-descuentos .desc-row {
  position: relative;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--admin-border, var(--color-ficha-border));
  border-radius: 8px;
  background: var(--admin-surface, transparent);
}

.param-descuentos .desc-row .hint-check {
  align-self: flex-end;
  margin-bottom: 0.35rem;
}

.param-descuentos .desc-row--new {
  border-style: dashed;
  border-color: var(--admin-accent, #2563EB);
  background: rgba(37, 99, 235, 0.04);
}

.desc-row__badge {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-accent, #2563EB);
}

.desc-row__del {
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 0.2rem;
  color: #B91C1C;
}

.desc-row__del:hover,
.desc-row__del:focus-visible {
  color: #991B1B;
  background: rgba(185, 28, 28, 0.08);
}

.desc-row__del-spacer {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.desc-row__max {
  margin: 0.15rem 0 0;
}

html[data-work="admin"] .param-group {
  border-color: var(--admin-border);
  background: var(--admin-surface);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

html[data-work="admin"][data-work-theme="dark"] .param-group {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html[data-work="admin"] .param-group__head:hover {
  background: var(--admin-surface-hover, rgba(37, 99, 235, 0.04));
}

html[data-work="admin"] .param-group__body {
  border-top-color: var(--admin-border);
}

html[data-work="admin"] .param-group__chev {
  color: var(--admin-accent);
}

.admin-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.admin-cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.admin-cat-toolbar .block-title { flex: 1; min-width: 0; margin: 0; }

html[data-work="admin"] .admin-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.8rem;
}

html[data-work="admin"] .admin-add-svg {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Botones Admin: icono + texto, tamaño mínimo, una sola línea */
html[data-work="admin"] .btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  height: auto;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  max-width: 100%;
}

html[data-work="admin"] .btn-ico svg {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

html[data-work="admin"] .admin-form-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
  flex-wrap: nowrap;
}

html[data-work="admin"] .admin-form-actions .btn-ico {
  flex: 0 0 auto;
}

html[data-work="admin"] .admin-cat-toolbar {
  flex-wrap: nowrap;
}

html[data-work="admin"] .admin-topbar #btnAdminBack.btn-ico {
  margin-right: 0.35rem;
}
.admin-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1.25rem; }
.admin-list-row {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.65rem 0.85rem; border-radius: 10px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.admin-list-row > span:first-child { flex: 1; min-width: 8rem; }
.admin-list-actions { display: flex; gap: 0.35rem; }
.btn-icon[data-tip] { position: relative; z-index: 1; }
.floating-tip { z-index: 9999; }
.pos-pago-row { display: flex; gap: 0.5rem; align-items: end; margin-bottom: 0.5rem; }
.pos-pago-row .field { flex: 1; }

/* --- Admin: ambiente empresarial (separado de Home / Caja RestauranteApp) --- */
html[data-work="admin"] {
  --tap: 44px;
  --admin-accent: #E53935;
  --admin-accent-dark: #C62828;
  --admin-accent-soft: rgba(229, 57, 53, 0.12);
  --admin-border: #D1D5DB;
  --admin-surface: #FFFFFF;
  --admin-surface-hover: #F8FAFC;
  --admin-icon-bg: #F1F5F9;
  --admin-icon-fg: #475569;
  --color-primary: #E53935;
  --color-primary-dark: #C62828;
  --color-secondary: #FB8C00;
  --color-bg: #EEF1F5;
  --color-text: #1E293B;
  --color-text-muted: #64748B;
  --color-surface: #FFFFFF;
  --color-border: #CBD5E1;
  --color-header: #334155;
  --color-footer: #334155;
  --color-footer-text: #F8FAFC;
  --color-footer-muted: rgba(248, 250, 252, 0.82);
  --color-chrome-text: #F8FAFC;
  --color-chrome-muted: rgba(248, 250, 252, 0.82);
  --color-footer-link: #BFDBFE;
  --color-input-bg: #FFFFFF;
  --color-modal-bg: #FFFFFF;
  --admin-field-shell: #E8EEF5;
  --admin-field-shell-top: #F4F7FB;
  --admin-field-shell-border: #B8C5D6;
  --admin-field-input-bg: #FFFFFF;
  --admin-field-input-border: #CBD5E1;
  --admin-field-inset: inset 0 1px 2px rgba(15, 23, 42, 0.07);
  --admin-field-shell-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --color-drawer: #334155;
  --color-sticky: #334155;
  --color-glow: transparent;
  --color-card: #FFFFFF;
  --color-alert-bg: #FEF3C7;
  --color-alert-text: #92400E;
  --color-alert-border: #F59E0B;
  --color-on-accent: #FFFFFF;
  --color-price: #1E293B;
  --color-hairline: #E2E8F0;
  --color-ficha: #FFFFFF;
  --color-ficha-border: #CBD5E1;
  --shadow-ficha: 0 1px 3px rgba(15, 23, 42, 0.08);
  --color-panel: #FFFFFF;
  --color-block: #FFFFFF;
  --color-btn-ghost: #FFFFFF;
  --color-btn-ghost-border: #CBD5E1;
  --color-scrollbar-track: #E5E7EB;
  --color-scrollbar-thumb: #9CA3AF;
  --shadow-header: 0 1px 0 rgba(15, 23, 42, 0.12);
}

html[data-work="admin"][data-work-theme="dark"] {
  color-scheme: dark;
  --admin-primary: #EF5350;
  --admin-primary-dark: #E53935;
  --admin-primary-soft: rgba(239, 83, 80, 0.2);
  /* Nav seleccionado: no rojo (rojo = urgente). */
  --admin-nav-active: #38BDF8;
  --admin-nav-active-soft: rgba(56, 189, 248, 0.18);
  /* Dashboard: sin rojo (evita sensación de alarma). */
  --admin-dash-accent: #FBBF24;
  --admin-dash-accent-soft: rgba(251, 191, 36, 0.18);
  --admin-dash-series: #38BDF8;
  --admin-dash-series-fill: rgba(56, 189, 248, 0.16);
  --admin-dash-avg: #C4B5FD;
  --admin-dash-ok: #4ADE80;
  --admin-dash-cancel: #F59E0B;
  --admin-dash-label: #E2E8F0;
  --admin-page-bg: #0F172A;
  --admin-chrome-bg: #1E293B;
  --admin-chrome-border: #475569;
  --admin-chrome-text: #F1F5F9;
  --admin-muted: #CBD5E1;
  --admin-table-head-bg: #334155;
  --admin-table-row-alt: rgba(255, 255, 255, 0.04);
  --admin-table-row-hover: #334155;
  --admin-input-bg: #0B1220;
  --admin-input-border: #64748B;
  --admin-input-text: #F8FAFC;
  --admin-label: #CBD5E1;
  --admin-link-hover-bg: #243044;
  --admin-accent: #EF5350;
  --admin-accent-dark: #E53935;
  --admin-accent-soft: rgba(239, 83, 80, 0.2);
  --admin-border: #475569;
  --admin-surface: #1E293B;
  --admin-surface-hover: #243044;
  --admin-icon-bg: #334155;
  --admin-icon-fg: #CBD5E1;
  --color-primary: #EF5350;
  --color-primary-dark: #E53935;
  --color-secondary: #FB8C00;
  --color-bg: #0F172A;
  --color-text: #F1F5F9;
  --color-text-muted: #CBD5E1;
  --color-surface: #1E293B;
  --color-border: #475569;
  --color-header: #111827;
  --color-footer: #111827;
  --color-footer-text: #F1F5F9;
  --color-footer-muted: rgba(241, 245, 249, 0.75);
  --color-footer-link: #93C5FD;
  --color-input-bg: #0B1220;
  --color-modal-bg: #1E293B;
  --admin-field-shell: #121A27;
  --admin-field-shell-top: #172033;
  --admin-field-shell-border: #64748B;
  --admin-field-input-bg: #0B1220;
  --admin-field-input-border: #64748B;
  --admin-field-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --admin-field-shell-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --color-drawer: #1E293B;
  --color-ficha: #1E293B;
  --color-ficha-border: #475569;
  --color-panel: #1E293B;
  --color-block: #1E293B;
  --color-btn-ghost: #1E293B;
  --color-btn-ghost-border: #64748B;
  --color-hairline: #475569;
  --color-on-accent: #FFFFFF;
  --color-scrollbar-track: #1E293B;
  --color-scrollbar-thumb: #64748B;
  --shadow-ficha: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html[data-work="admin"] .app-header-inner,
html[data-work="admin"] .app-footer-inner {
  width: 100%;
  max-width: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

html[data-work="admin"] .app-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-header);
}

html[data-work="admin"] .brand-title {
  font-family: var(--font-ui);
  color: var(--color-chrome-text);
  font-weight: 700;
}

html[data-work="admin"] .header-brand-logo {
  background: transparent;
}

html[data-work="admin"] #screen-admin:not([hidden]) {
  height: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html[data-work="admin"] #screen-admin .ops-wide {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0;
}

html[data-work="admin"] .admin-panel {
  padding-bottom: 1.25rem;
}

/* Grid formularios Admin: máx. ~2–3 campos por fila, gap 16px; inputs alineados abajo */
html[data-work="admin"] .param-group__body,
html[data-work="admin"] form.block-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
  gap: 1rem;
  align-items: end;
}

html[data-work="admin"] form.block-card {
  padding: 1.1rem 1.15rem 1.25rem;
}

html[data-work="admin"] .param-group__body > .login-hint,
html[data-work="admin"] .param-group__body > .field-kicker,
html[data-work="admin"] .param-group__body > .hint-check,
html[data-work="admin"] .param-group__body > #paramDescuentos,
html[data-work="admin"] .param-group__body > #paramEnvioFields,
html[data-work="admin"] form.block-card > .login-hint,
html[data-work="admin"] form.block-card > .field-kicker,
html[data-work="admin"] form.block-card > .admin-tipo-radios,
html[data-work="admin"] form.block-card > #prodCompBasesWrap,
html[data-work="admin"] form.block-card > .admin-upload-row,
html[data-work="admin"] form.block-card > .form-alert,
html[data-work="admin"] form.block-card > .admin-form-actions,
html[data-work="admin"] form.block-card > input[type="hidden"],
html[data-work="admin"] .field--wide,
html[data-work="admin"] .field:has(textarea) {
  grid-column: 1 / -1;
}

@media (min-width: 520px) {
  html[data-work="admin"] .field--span-2 {
    grid-column: span 2;
  }
}

html[data-work="admin"] .admin-envio-grid {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: stretch;
}

html[data-work="admin"] .admin-envio-map-col {
  min-width: 0;
  width: 100%;
}

html[data-work="admin"] .admin-envio-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

html[data-work="admin"] .admin-envio-map-col .field-kicker,
html[data-work="admin"] .admin-envio-map-col .login-hint {
  margin-bottom: 0.35rem;
}

html[data-work="admin"] .admin-envio-map-toolbar .field-kicker {
  margin: 0;
}

html[data-work="admin"] .admin-envio-side {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem 1.1rem;
  min-width: 0;
}

html[data-work="admin"] .admin-envio-side .field {
  width: auto;
  max-width: 8.5rem;
  margin-bottom: 0;
}

html[data-work="admin"] .admin-envio-side .hint-check--inline {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--admin-control-h, 2.5rem);
  margin: 0;
  padding: 0 0.15rem;
  white-space: nowrap;
}

html[data-work="admin"] .param-group__body .field,
html[data-work="admin"] .block-card .field {
  width: 100%;
  max-width: none;
  min-width: 0;
}

html[data-work="admin"] .filter-row .field,
html[data-work="admin"] .filter-row .field--narrow,
html[data-work="admin"] .filter-row .field--wide,
html[data-work="admin"] .filter-row .field--span-2 {
  max-width: none;
}

html[data-work="admin"] .admin-body-wrap {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  padding-bottom: 0.75rem;
}

html[data-work="admin"] .admin-topbar {
  margin-bottom: 0.15rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-hairline);
  gap: 0.4rem 0.75rem;
}

html[data-work="admin"] .admin-topbar .screen-title {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text);
  line-height: 1.25;
}

html[data-work="admin"] .admin-topbar .btn {
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}

html[data-work="admin"] .admin-topbar .btn.btn-ico {
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}

/* File upload + drag & drop (Admin) */
html[data-work="admin"] .admin-upload-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.65rem 0 0.25rem;
}

html[data-work="admin"] .file-drop {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  max-width: 300px;
  min-width: 0;
  flex: 0 1 300px;
}

html[data-work="admin"] .file-drop__label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

html[data-work="admin"] .file-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

html[data-work="admin"] .file-drop__zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0.65rem 0.5rem;
  border: 1.5px dashed var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-hover);
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  overflow: hidden;
}

html[data-work="admin"] .file-drop__zone:hover,
html[data-work="admin"] .file-drop__zone:focus-visible {
  border-color: var(--admin-accent);
  color: var(--admin-accent-dark);
  outline: none;
}

html[data-work="admin"] .file-drop.is-dragover .file-drop__zone {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  color: var(--admin-accent-dark);
}

html[data-work="admin"] .file-drop.has-file .file-drop__zone {
  border-style: solid;
  border-color: var(--admin-accent);
  color: var(--color-text);
}

html[data-work="admin"] .file-drop.has-preview .file-drop__zone {
  padding: 0;
  justify-content: flex-end;
  color: #fff;
  background: #0F172A;
}

html[data-work="admin"] .file-drop__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  z-index: 0;
  background: #0F172A;
}

html[data-work="admin"] .file-drop__preview[hidden] {
  display: none;
}

html[data-work="admin"] .file-drop.has-preview .file-drop__ico {
  display: none;
}

html[data-work="admin"] .file-drop.has-preview .file-drop__text,
html[data-work="admin"] .file-drop.has-preview .file-drop__name {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0.28rem 0.45rem;
  background: rgba(17, 24, 39, 0.62);
  color: #fff;
  opacity: 1;
}

html[data-work="admin"] .file-drop.has-preview .file-drop__text {
  padding-bottom: 0.05rem;
}

html[data-work="admin"] .file-drop.has-preview .file-drop__name {
  padding-top: 0;
  padding-bottom: 0.35rem;
}

html[data-work="admin"] .file-drop__ico {
  opacity: 0.85;
}

html[data-work="admin"] .file-drop__text {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

html[data-work="admin"] .file-drop__name {
  font-size: 0.72rem;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}

@media (max-width: 520px) {
  html[data-work="admin"] .file-drop {
    flex: 1 1 100%;
    max-width: 300px;
  }
}

html[data-work="admin"] .admin-panel {
  max-width: 72rem;
  margin-inline: auto;
  margin-top: 0;
  padding-top: 0.15rem;
}

html[data-work="admin"] .admin-panel > .block-title:first-child,
html[data-work="admin"] .admin-panel > .admin-cat-toolbar:first-child {
  margin-top: 0;
  margin-bottom: 0.45rem;
}

html[data-work="admin"] .block-title {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}

html[data-work="admin"] .admin-cat-toolbar {
  margin-bottom: 0.35rem;
  gap: 0.5rem;
}

html[data-work="admin"] .filter-row {
  margin-bottom: 1rem;
  gap: 0.75rem;
  align-items: flex-end;
}

html[data-work="admin"] .param-group__body {
  padding: 0 1rem 1.1rem;
}

html[data-work="admin"] .param-groups {
  margin-top: 0.25rem;
  gap: 0.85rem;
}

html[data-work="admin"] .param-group__head {
  padding: 0.75rem 1rem;
}

html[data-work="admin"] .login-hint {
  margin-bottom: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.35;
}

@media (max-width: 720px) {
  html[data-work="admin"] .admin-envio-side {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-work="admin"] .admin-envio-side .field {
    max-width: none;
    width: 100%;
  }

  html[data-work="admin"] .field--span-2 {
    grid-column: 1 / -1;
  }
}

html[data-work="admin"] .admin-list {
  margin: 0.45rem 0 0.75rem;
  gap: 0.4rem;
}

html[data-work="admin"] .admin-dash-grid {
  gap: 0.75rem;
}

html[data-work="admin"] .block-card {
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
}

html[data-work="admin"] .block-card,
html[data-work="admin"] .kpi-card {
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-surface);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

html[data-work="admin"][data-work-theme="dark"] .block-card,
html[data-work="admin"][data-work-theme="dark"] .kpi-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html[data-work="admin"] .kpi-value {
  color: var(--color-text);
  font-family: var(--font-ui);
}

html[data-work="admin"] .kpi-label {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: 0.02em;
}

html[data-work="admin"] .kpi-label::before {
  display: none;
}

/* Campo Admin: label arriba + control — guía uniforme de inputs */
html[data-work="admin"] .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  min-width: 0;
}

html[data-work="admin"] .filter-row,
html[data-work="admin"] .admin-filter-bar {
  gap: 0.75rem 0.75rem;
  align-items: flex-end;
}

html[data-work="admin"] .filter-row .field,
html[data-work="admin"] .admin-filter-bar .field {
  margin-bottom: 0;
  flex: 0 1 auto;
  width: auto;
  min-width: 9.5rem;
}

html[data-work="admin"] .field--compact {
  flex: 0 1 auto;
  width: auto;
  min-width: 9.5rem;
  margin: 0;
}

html[data-work="admin"] .field--narrow {
  max-width: 7.5rem;
}

html[data-work="admin"] .field:focus-within {
  border: none;
  box-shadow: none;
}

html[data-work="admin"] .field > span {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--admin-label, #374151);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

html[data-work="admin"] .field > span::before {
  display: none;
}

html[data-work="admin"] .field input,
html[data-work="admin"] .field select,
html[data-work="admin"] .field textarea,
html[data-work="admin"] .admin-sidebar-sucursal__select {
  box-sizing: border-box;
  width: 100%;
  height: var(--admin-control-h, 2.5rem);
  min-height: var(--admin-control-h, 2.5rem);
  max-height: var(--admin-control-h, 2.5rem);
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--admin-input-text, #1F2937);
  border: 1px solid var(--admin-input-border, #D1D5DB);
  border-radius: 6px;
  background-color: var(--admin-input-bg, #FFFFFF);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* date/time: no quitar appearance — oculta la flecha/calendario nativo */
html[data-work="admin"] .field input[type="date"],
html[data-work="admin"] .field input[type="time"],
html[data-work="admin"] .field input[type="datetime-local"] {
  -webkit-appearance: auto;
  appearance: auto;
  min-width: 12rem;
  padding-inline-end: 0.4rem;
}

html[data-work="admin"] .field input[type="date"]::-webkit-calendar-picker-indicator,
html[data-work="admin"] .field input[type="time"]::-webkit-calendar-picker-indicator,
html[data-work="admin"] .field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  width: 1.1rem;
  height: 1.1rem;
  margin-inline-start: 0.15rem;
}

html[data-work="admin"] .admin-filter-bar .field:has(input[type="date"]),
html[data-work="admin"] .filter-row .field:has(input[type="date"]),
html[data-work="admin"] .admin-filter-bar .field:has(input[type="datetime-local"]),
html[data-work="admin"] .filter-row .field:has(input[type="datetime-local"]) {
  min-width: 12rem;
}

html[data-work="admin"] .field textarea {
  height: auto;
  min-height: 5rem;
  max-height: none;
  padding: 8px 12px;
  resize: vertical;
  line-height: 1.4;
}

html[data-work="admin"] .field input::placeholder,
html[data-work="admin"] .field textarea::placeholder {
  color: #9CA3AF;
  font-size: 0.875rem;
  opacity: 1;
}

html[data-work="admin"] .field input:hover,
html[data-work="admin"] .field select:hover,
html[data-work="admin"] .field textarea:hover,
html[data-work="admin"] .admin-sidebar-sucursal__select:hover {
  border-color: #9CA3AF;
}

html[data-work="admin"] .field input:focus,
html[data-work="admin"] .field select:focus,
html[data-work="admin"] .field textarea:focus,
html[data-work="admin"] .admin-sidebar-sucursal__select:focus {
  outline: none;
  border-color: var(--admin-primary, #E53935);
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
}

html[data-work="admin"] .field input:disabled,
html[data-work="admin"] .field select:disabled,
html[data-work="admin"] .field textarea:disabled {
  background: #F3F4F6;
  color: #9CA3AF;
  opacity: 0.6;
  cursor: not-allowed;
}

html[data-work="admin"] .field.is-error input,
html[data-work="admin"] .field.is-error select,
html[data-work="admin"] .field.is-error textarea,
html[data-work="admin"] .field input.is-error,
html[data-work="admin"] .field select.is-error,
html[data-work="admin"] .field textarea.is-error {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

html[data-work="admin"] .field__error {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: #EF4444;
  line-height: 1.3;
}

html[data-work="admin"] .field input[type="number"] {
  max-width: 7.5rem;
  -moz-appearance: textfield;
}

html[data-work="admin"] .field input[type="number"]::-webkit-outer-spin-button,
html[data-work="admin"] .field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

html[data-work="admin"] .field input[type="date"] {
  width: auto;
  max-width: 10rem;
  min-width: 9.5rem;
}

html[data-work="admin"] .field input[type="search"] {
  padding-left: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239CA3AF'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.55rem 50%;
  background-size: 1rem 1rem;
}

html[data-work="admin"] .field select,
html[data-work="admin"] .admin-sidebar-sucursal__select {
  padding-right: 2.25rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.4 0.6L6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.7rem auto;
}

html[data-work="admin"] .hint-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-label, #374151);
  cursor: pointer;
}

html[data-work="admin"] .hint-check input[type="checkbox"],
html[data-work="admin"] .hint-check input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--admin-primary, #E53935);
  cursor: pointer;
  border: 1px solid #D1D5DB;
}

html[data-work="admin"] .admin-tipo-radios {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0;
}

html[data-work="admin"] .param-envio-map,
html[data-work="admin"] #paramEnvioFields .pedido-map {
  border: 1px solid var(--admin-input-border, #D1D5DB);
  border-radius: 6px;
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 0;
  height: min(280px, 48vw);
  min-height: 200px;
  width: 100%;
}

html[data-work="admin"][data-work-theme="dark"] .field input::placeholder,
html[data-work="admin"][data-work-theme="dark"] .field textarea::placeholder {
  color: #94A3B8;
}

html[data-work="admin"][data-work-theme="dark"] .field input:disabled,
html[data-work="admin"][data-work-theme="dark"] .field select:disabled,
html[data-work="admin"][data-work-theme="dark"] .field textarea:disabled {
  background: #1E293B;
  color: #64748B;
}

html[data-work="admin"][data-work-theme="dark"] .field select,
html[data-work="admin"][data-work-theme="dark"] .admin-sidebar-sucursal__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23CBD5E1' d='M1.4 0.6L6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
}

html[data-work="admin"][data-work-theme="dark"] .field input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394A3B8'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

html[data-work="admin"] .param-descuentos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

html[data-work="admin"] .param-descuentos .desc-row {
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0 0 1rem;
  margin-bottom: 0.35rem;
  border: none;
  border-bottom: 1px solid var(--admin-chrome-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-work="admin"] .param-descuentos .desc-row .hint-check,
html[data-work="admin"] .param-descuentos .desc-row .desc-row__del,
html[data-work="admin"] .param-descuentos .desc-row .desc-row__del-spacer {
  align-self: flex-end;
  margin-bottom: 0.35rem;
}

html[data-work="admin"] .param-descuentos .desc-row--new {
  border-bottom-style: dashed;
  border-bottom-color: var(--admin-accent);
  background: transparent;
}

html[data-work="admin"] .app-scroll {
  background: var(--color-bg);
}

html[data-work="admin"] .data-table th {
  background: var(--admin-icon-bg);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--admin-border);
}

html[data-work="admin"] .data-table td {
  border-bottom: 1px solid var(--color-hairline);
}

html[data-work="admin"] .admin-list-row {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-work="admin"] .btn-primary {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: var(--color-on-accent, #FFFFFF);
  font-family: var(--font-ui);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(229, 57, 53, 0.25);
}

html[data-work="admin"] .btn-primary:hover,
html[data-work="admin"] .btn-primary:focus-visible {
  background: var(--admin-primary-dark);
  border-color: var(--admin-primary-dark);
}

html[data-work="admin"] .btn-primary:active {
  transform: scale(0.97);
}

html[data-work="admin"] .btn-secondary,
html[data-work="admin"] .btn-ghost {
  font-family: var(--font-ui);
  font-weight: 600;
}

html[data-work="admin"] .btn-ghost {
  background: var(--color-btn-ghost);
  border-color: var(--admin-border);
  color: var(--color-text);
}

html[data-work="admin"] .btn-ghost:hover,
html[data-work="admin"] .btn-ghost:focus-visible {
  background: var(--admin-surface-hover);
  border-color: var(--admin-accent);
  color: var(--admin-accent-dark);
}

html[data-work="admin"][data-work-theme="dark"] .btn-ghost {
  background: var(--color-btn-ghost);
  color: var(--color-text);
  border-color: var(--admin-border);
}

html[data-work="admin"][data-work-theme="dark"] .btn-ghost:hover,
html[data-work="admin"][data-work-theme="dark"] .btn-ghost:focus-visible {
  background: var(--admin-surface-hover);
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}

html[data-work="admin"] .admin-body-wrap.is-loading > :not(.data-loader) {
  visibility: hidden;
  pointer-events: none;
}

/* --- Admin shell: header fijo + sidebar + módulos a altura completa --- */
html[data-work="admin"] {
  --admin-primary: #E53935;
  --admin-primary-dark: #C62828;
  --admin-primary-soft: rgba(229, 57, 53, 0.12);
  /* Nav seleccionado: no rojo (rojo = urgente). */
  --admin-nav-active: #1D4ED8;
  --admin-nav-active-soft: rgba(37, 99, 235, 0.12);
  --admin-secondary: #FB8C00;
  --admin-page-bg: #F8F9FA;
  --admin-chrome-bg: #FFFFFF;
  --admin-chrome-border: #E0E0E0;
  --admin-chrome-text: #212529;
  --admin-muted: #6C757D;
  --admin-table-head-bg: #F8F9FA;
  --admin-table-row-alt: #F8F9FA;
  --admin-table-row-hover: #EEF1F5;
  --admin-input-bg: #FFFFFF;
  --admin-input-border: #D1D5DB;
  --admin-input-text: #1F2937;
  --admin-label: #374151;
  --admin-link-hover-bg: #F8F9FA;
  --admin-sidebar-w: 240px;
  --admin-header-h: 64px;
  --admin-space: 1.25rem;
  --admin-control-h: 2.5rem;
  --color-scrollbar-track: #E5E7EB;
  --color-scrollbar-thumb: #9CA3AF;
}

html[data-work="admin"][data-work-theme="light"] .admin-shell-theme .icon-theme-sun { display: none; }
html[data-work="admin"][data-work-theme="light"] .admin-shell-theme .icon-theme-moon { display: inline-flex; }
html[data-work="admin"][data-work-theme="dark"] .admin-shell-theme .icon-theme-sun { display: inline-flex; }
html[data-work="admin"][data-work-theme="dark"] .admin-shell-theme .icon-theme-moon { display: none; }

html[data-work="admin"] .app-header {
  display: none;
}

html[data-work="admin"] .app-footer {
  display: block;
  flex-shrink: 0;
  background: var(--color-footer);
  color: var(--color-footer-text);
  border-top: 1px solid var(--color-hairline);
  z-index: 40;
}

html[data-work="admin"] .app-footer a {
  color: var(--color-footer-link);
}

html[data-work="admin"] .app-footer-inner {
  min-height: 2rem;
  padding-left: var(--admin-space, 1.25rem);
  padding-right: var(--admin-space, 1.25rem);
}

html[data-work="admin"] .app-scroll-wrap {
  overflow: hidden;
}

html[data-work="admin"] #screen-admin:not([hidden]) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

html[data-work="admin"] .admin-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--admin-page-bg);
}

html[data-work="admin"] .admin-shell-header {
  flex: 0 0 var(--admin-header-h);
  height: var(--admin-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 var(--admin-space);
  background: var(--admin-chrome-bg);
  border-bottom: 1px solid var(--admin-chrome-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  z-index: 50;
  overflow: hidden;
}

html[data-work="admin"] .admin-shell-menu {
  display: none;
  color: var(--admin-chrome-text);
  background: transparent;
  border: none;
}

html[data-work="admin"] .admin-shell-back {
  flex-shrink: 0;
}

html[data-work="admin"] .admin-shell-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

html[data-work="admin"] .admin-shell-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--admin-chrome-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-work="admin"] .admin-shell-header-start,
html[data-work="admin"] .admin-shell-header-end {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

html[data-work="admin"] .admin-shell-header-end {
  flex-shrink: 0;
}

html[data-work="admin"] .admin-shell-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

html[data-work="admin"] .admin-shell-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--admin-primary-soft);
  color: var(--admin-primary);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
}

html[data-work="admin"] .admin-shell-user-name {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-chrome-text);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-work="admin"] .admin-shell-theme,
html[data-work="admin"] .admin-shell-logout {
  color: var(--admin-chrome-text);
  background: transparent;
  border: none;
}

html[data-work="admin"] .admin-shell-theme:hover,
html[data-work="admin"] .admin-shell-theme:focus-visible,
html[data-work="admin"] .admin-shell-logout:hover,
html[data-work="admin"] .admin-shell-logout:focus-visible {
  color: var(--admin-primary);
  outline: none;
}

html[data-work="admin"] .admin-shell-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

html[data-work="admin"] .admin-sidebar {
  flex: 0 0 var(--admin-sidebar-w);
  width: var(--admin-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--admin-chrome-bg);
  border-right: 1px solid var(--admin-chrome-border);
  overflow: hidden;
}

html[data-work="admin"] .admin-sidebar-group-label {
  margin: 0.65rem 0.5rem 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--admin-muted);
}

html[data-work="admin"] .admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: var(--admin-control-h);
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--admin-chrome-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

html[data-work="admin"] .admin-sidebar-link:hover,
html[data-work="admin"] .admin-sidebar-link:focus-visible {
  background: var(--admin-link-hover-bg);
  outline: none;
}

html[data-work="admin"] .admin-sidebar-link.is-active {
  background: var(--admin-nav-active-soft, var(--admin-primary-soft));
  color: var(--admin-nav-active, var(--admin-primary));
}

html[data-work="admin"] .admin-sidebar-link--sub {
  padding-left: 1.35rem;
  font-weight: 500;
  font-size: 0.84rem;
}

html[data-work="admin"] .admin-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

html[data-work="admin"] .admin-sidebar-foot {
  flex-shrink: 0;
  padding: 0.75rem 0.65rem;
  border-top: 1px solid var(--admin-chrome-border);
}

html[data-work="admin"] .admin-sidebar-sucursal__label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--admin-muted);
}

html[data-work="admin"] .admin-sidebar-sucursal__select {
  width: 100%;
}

html[data-work="admin"] .admin-sidebar-backdrop {
  display: none;
}

html[data-work="admin"] .admin-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: var(--admin-space);
  background: var(--admin-page-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

html[data-work="admin"] .admin-main::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

html[data-work="admin"] .admin-main::-webkit-scrollbar-track {
  background: transparent;
}

html[data-work="admin"] .admin-main::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 999px;
  border: 0;
  min-height: 2rem;
}

html[data-work="admin"] .admin-body-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding-bottom: 0.75rem;
  min-height: 0;
}

html[data-work="admin"] .admin-panel[hidden] {
  display: none !important;
}

html[data-work="admin"] .admin-panel.admin-module:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

html[data-work="admin"] .admin-body-wrap > .admin-panel:not([hidden]):not(.admin-module) {
  flex: 0 0 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  overflow: visible;
}

html[data-work="admin"] .admin-td-actions {
  text-align: center;
  white-space: nowrap;
}

html[data-work="admin"] .admin-module-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

html[data-work="admin"] .admin-module-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--admin-chrome-text);
}

html[data-work="admin"] .admin-table-scroll {
  flex: 0 0 auto;
  min-height: 0;
  /* overflow visible: evita scroll vertical anidado (y sticky thead respeta .admin-main) */
  overflow: visible;
  border: 1px solid var(--admin-chrome-border);
  border-radius: 10px;
  background: var(--admin-chrome-bg);
}

html[data-work="admin"] .admin-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--admin-table-head-bg);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--admin-muted);
  border-bottom: 1px solid var(--admin-chrome-border);
}

html[data-work="admin"] .admin-list-actions .btn-icon[data-tip],
html[data-work="admin"] .admin-td-actions .btn-icon[data-tip],
html[data-work="admin"] .admin-data-table .btn-icon[data-tip] {
  z-index: 0;
}

html[data-work="admin"] .admin-data-table td {
  color: var(--color-text);
  border-bottom: 1px solid var(--admin-chrome-border);
}

html[data-work="admin"] .admin-data-table tbody tr:nth-child(even) {
  background: var(--admin-table-row-alt);
}

html[data-work="admin"] .admin-data-table tbody tr:hover {
  background: var(--admin-table-row-hover);
}

html[data-work="admin"] .admin-filter-bar {
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
  overflow: visible;
  align-items: flex-end;
}

html[data-work="admin"] .admin-filter-bar .field {
  flex: 0 1 auto;
  min-width: 9.5rem;
}

html[data-work="admin"] .admin-filter-bar .field--filter-wide {
  min-width: 14rem;
  flex: 1 1 14rem;
  max-width: 22rem;
}

html[data-work="admin"] .admin-module-body {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: visible;
}

/* Sin scroll anidado: el scroll vertical vive solo en .admin-main */
html[data-work="admin"] .admin-module-body--scroll,
html[data-work="admin"] .admin-module-body--table {
  overflow: visible;
}

html[data-work="admin"] .admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

html[data-work="admin"] .admin-th-actions {
  width: 5.5rem;
  text-align: center;
}

html[data-work="admin"] .admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

html[data-work="admin"] .admin-badge--base {
  background: rgba(76, 175, 80, 0.15);
  color: #2E7D32;
}

html[data-work="admin"] .admin-badge--variante {
  background: rgba(33, 150, 243, 0.15);
  color: #1565C0;
}

html[data-work="admin"] .admin-badge--complemento {
  background: rgba(108, 117, 125, 0.15);
  color: #495057;
}

html[data-work="admin"][data-work-theme="dark"] .admin-badge--base {
  background: rgba(76, 175, 80, 0.28);
  color: #A5D6A7;
}

html[data-work="admin"][data-work-theme="dark"] .admin-badge--variante {
  background: rgba(33, 150, 243, 0.28);
  color: #90CAF9;
}

html[data-work="admin"][data-work-theme="dark"] .admin-badge--complemento {
  background: rgba(148, 163, 184, 0.25);
  color: #E2E8F0;
}

html[data-work="admin"] .block-title,
html[data-work="admin"] .login-hint,
html[data-work="admin"] .empty-msg {
  color: var(--color-text-muted);
}

html[data-work="admin"] .block-title {
  color: var(--color-text);
}

html[data-work="admin"] .admin-sidebar-ico {
  flex-shrink: 0;
  opacity: 0.9;
  color: inherit;
}

html[data-work="admin"] .admin-sidebar-sucursal {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* --- Dashboard POS: KPIs + charts + recientes --- */
html[data-work="admin"] .admin-dash {
  gap: 1.35rem;
}

html[data-work="admin"] .admin-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  flex-shrink: 0;
}

html[data-work="admin"] .admin-kpi-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem 1rem 1.15rem;
  background: var(--admin-chrome-bg, #FFFFFF);
  border: 1px solid var(--admin-chrome-border, #E0E0E0);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-width: 0;
}

html[data-work="admin"] .admin-kpi-card__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--admin-dash-accent, var(--admin-primary, #E53935));
}

html[data-work="admin"] .admin-kpi-card__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--admin-dash-accent-soft, var(--admin-primary-soft, rgba(229, 57, 53, 0.12)));
  color: var(--admin-dash-accent, var(--admin-primary, #E53935));
  line-height: 1;
}

html[data-work="admin"] .admin-kpi-card__ico svg {
  display: block;
}

html[data-work="admin"] .admin-kpi-warn {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: #FB8C00;
  font-weight: 700;
  margin-left: 0.2rem;
}

html[data-work="admin"] .admin-kpi-card__body {
  min-width: 0;
  flex: 1 1 auto;
}

html[data-work="admin"] .admin-kpi-card__value {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--admin-chrome-text, #212529);
  letter-spacing: -0.01em;
}

html[data-work="admin"] .admin-kpi-card__value--sm {
  font-size: 1rem;
  line-height: 1.3;
  word-break: break-word;
}

html[data-work="admin"] .admin-kpi-card__meta {
  margin: 0.15rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--admin-chrome-text, #212529);
  opacity: 0.88;
}

html[data-work="admin"] .admin-kpi-card__label {
  margin: 0.2rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--admin-muted, #6C757D);
}

html[data-work="admin"] .admin-kpi-card.is-warn {
  border-color: #FB8C00;
}

html[data-work="admin"] .admin-kpi-card.is-warn .admin-kpi-card__accent {
  background: #FB8C00;
}

html[data-work="admin"] .admin-dash-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  flex-shrink: 0;
}

html[data-work="admin"] .admin-dash-charts--row2 {
  margin-top: 0;
}

html[data-work="admin"] .admin-dash-chart-card {
  margin: 0;
  padding: 1rem 1.15rem 1.1rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

html[data-work="admin"] .admin-dash-chart-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--admin-chrome-text, #212529);
}

html[data-work="admin"] .admin-dash-chart-sub {
  margin: -0.35rem 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted, #6B7280);
}

html[data-work="admin"] .admin-dash-chart-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 100%;
  min-width: 0;
}

html[data-work="admin"] .admin-dash-chart-wrap--tall {
  height: 300px;
}

html[data-work="admin"] .admin-dash-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem 0.85rem;
  min-height: 1.35rem;
  padding: 0 0 0.4rem;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

html[data-work="admin"] .admin-dash-chart-legend[hidden] {
  display: none;
}

html[data-work="admin"] .admin-dash-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-muted, #6B7280);
}

html[data-work="admin"] .admin-dash-chart-legend-swatch {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 3px;
}

html[data-work="admin"] .admin-dash-chart-legend-swatch--line {
  height: 3px;
  border-radius: 2px;
}

html[data-work="admin"] .admin-dash-chart-legend-swatch--dashed {
  width: 0.875rem;
  height: 0;
  border-radius: 0;
  border-top: 2.25px dashed currentColor;
  background: transparent !important;
}

html[data-work="admin"] .admin-dash-chart-wrap > canvas {
  flex: 1 1 auto;
  min-height: 0;
  width: 100% !important;
  height: auto !important;
  display: block;
}

html[data-work="admin"] .admin-dash-chart-card--pedidos {
  background:
    linear-gradient(165deg, rgba(76, 175, 80, 0.06) 0%, transparent 42%),
    linear-gradient(195deg, rgba(229, 57, 53, 0.05) 0%, transparent 48%),
    var(--admin-surface, #fff);
}

html[data-work="admin"][data-work-theme="dark"] .admin-dash-chart-card--pedidos {
  background:
    linear-gradient(165deg, rgba(74, 222, 128, 0.1) 0%, transparent 45%),
    linear-gradient(195deg, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
    var(--admin-surface, #1E293B);
}

/* Light: acento KPI del dash = primary rojo de marca Admin. */
html[data-work="admin"][data-work-theme="light"] {
  --admin-dash-accent: var(--admin-primary, #E53935);
  --admin-dash-accent-soft: var(--admin-primary-soft, rgba(229, 57, 53, 0.12));
}

html[data-work="admin"] .admin-order-cancel-box {
  margin: 0.65rem 0 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(229, 57, 53, 0.28);
  background: rgba(229, 57, 53, 0.06);
}

html[data-work="admin"] .admin-order-cancel-box p {
  margin: 0 0 0.45rem;
}

html[data-work="admin"] .admin-order-cancel-box p:last-child {
  margin-bottom: 0;
}

html[data-work="admin"] .admin-dash-recent {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 0 0 auto;
  min-height: 0;
}

html[data-work="admin"] .admin-dash-recent-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

html[data-work="admin"] .admin-dash-search {
  min-width: 12rem;
  margin: 0;
}

html[data-work="admin"] .admin-dash-table-scroll {
  height: auto;
  max-height: none;
  flex: 0 0 auto;
}

html[data-work="admin"] .admin-status {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

html[data-work="admin"] .admin-status--ok {
  background: rgba(76, 175, 80, 0.16);
  color: #2E7D32;
}

html[data-work="admin"] .admin-status--warn {
  background: rgba(251, 140, 0, 0.18);
  color: #E65100;
}

html[data-work="admin"] .admin-status--bad {
  background: rgba(244, 67, 54, 0.16);
  color: #C62828;
}

html[data-work="admin"][data-work-theme="dark"] .admin-status--ok {
  background: rgba(76, 175, 80, 0.28);
  color: #A5D6A7;
}

html[data-work="admin"][data-work-theme="dark"] .admin-status--warn {
  background: rgba(251, 140, 0, 0.28);
  color: #FFCC80;
}

html[data-work="admin"][data-work-theme="dark"] .admin-status--bad {
  background: rgba(244, 67, 54, 0.28);
  color: #EF9A9A;
}

html[data-work="admin"] .kpi-row--4 {
  flex-shrink: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

html[data-work="admin"] .kpi-row--4 .kpi-card {
  padding: 1rem 1.15rem;
}

html[data-work="admin"] .kpi-row--4 .kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
}

html[data-work="admin"] .kpi-value--text {
  font-size: 1rem !important;
  line-height: 1.3;
  word-break: break-word;
}

@media (max-width: 992px) {
  html[data-work="admin"] .admin-dash-kpis,
  html[data-work="admin"] .kpi-row--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  html[data-work="admin"] .admin-shell-menu {
    display: inline-flex;
  }

  html[data-work="admin"] .admin-shell-user-name {
    display: none;
  }

  html[data-work="admin"] .admin-sidebar {
    position: fixed;
    top: var(--admin-header-h);
    left: 0;
    bottom: 0;
    z-index: 45;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
  }

  html[data-work="admin"] .admin-sidebar.is-open {
    transform: translateX(0);
  }

  html[data-work="admin"] .admin-sidebar-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: var(--admin-header-h) 0 0 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.35);
  }

  html[data-work="admin"] .admin-filter-bar {
    gap: 0.85rem 1rem;
  }

  html[data-work="admin"] .admin-dash-charts {
    grid-template-columns: 1fr;
  }

  html[data-work="admin"] .admin-dash-chart-wrap {
    height: 240px;
  }

  html[data-work="admin"] .kpi-row--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-work="admin"] .admin-main {
    padding: 0.85rem;
  }
}

@media (max-width: 576px) {
  html[data-work="admin"] .admin-dash-kpis {
    grid-template-columns: 1fr;
  }

  html[data-work="admin"] .admin-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-work="admin"] .admin-filter-bar .field,
  html[data-work="admin"] .admin-filter-bar .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  html[data-work="admin"] .admin-shell-title {
    font-size: 1rem;
  }

  html[data-work="admin"] .admin-module-title {
    font-size: 1.125rem;
  }
}

.data-loader {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2.5rem;
  background: color-mix(in srgb, var(--color-bg, #f3f4f6) 88%, transparent);
  box-sizing: border-box;
}

.data-loader[hidden] {
  display: none !important;
}

.data-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--admin-border, #D1D5DB);
  background: var(--admin-surface, #fff);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.data-loader-text {
  margin: 0;
  font-family: var(--font-ui, inherit);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted, #6B7280);
}

.data-loader-dots {
  display: flex;
  gap: 0.35rem;
}

.data-loader-dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--admin-accent, #2563EB);
  animation: bootDot 0.9s ease-in-out infinite;
}

.data-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.data-loader-dots span:nth-child(3) { animation-delay: 0.3s; }

html[data-work="admin"][data-work-theme="dark"] .data-loader {
  background: rgba(15, 23, 42, 0.72);
}

html[data-work="admin"][data-work-theme="dark"] .data-loader-card {
  background: #1E293B;
  border-color: #334155;
}

/* --- Boot / menú loading splash --- */
.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.boot-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-loader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.5rem;
  max-width: 20rem;
  text-align: center;
}
.boot-loader-glow {
  position: absolute;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 248, 220, 0.28) 28%,
    rgba(195, 64, 36, 0.16) 52%,
    transparent 72%
  );
  animation: bootGlow 2.2s ease-in-out infinite;
  pointer-events: none;
}
.boot-loader-logo-wrap {
  position: relative;
  z-index: 1;
  width: min(46vw, 10.5rem);
  height: min(46vw, 10.5rem);
  padding: 1rem;
  animation: bootFloat 2.8s ease-in-out infinite;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.28),
    0 12px 32px rgba(0, 0, 0, 0.4);
}
.boot-loader-logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
}
.boot-loader-text {
  margin: 0.35rem 0 0;
  font-family: Nunito, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #FFF3C4;
  letter-spacing: 0.02em;
  animation: bootFadeText 1.6s ease-in-out infinite;
}
.boot-loader-dots {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
.boot-loader-dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #C34024;
  animation: bootDot 1.1s ease-in-out infinite;
}
.boot-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.boot-loader-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bootFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}
@keyframes bootPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes bootGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes bootFadeText {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
@keyframes bootDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-5px); opacity: 1; }
}

html[data-theme="light"] .boot-loader {
  background: #111111;
}


/* --- Overlay global Procesando (cloud / mutaciones) --- */
.app-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.app-busy-overlay[hidden] {
  display: none !important;
}
.app-busy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  min-width: min(16rem, 92vw);
  max-width: 22rem;
  padding: 1.35rem 1.5rem 1.15rem;
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  text-align: center;
}
.app-busy-spinner {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 3px solid rgba(229, 57, 53, 0.2);
  border-top-color: var(--color-primary, #E53935);
  animation: app-busy-spin 0.75s linear infinite;
}
@keyframes app-busy-spin {
  to { transform: rotate(360deg); }
}
.app-busy-msg {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.app-busy-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin-top: 0.15rem;
}
.app-busy-actions[hidden] {
  display: none !important;
}
.app-busy-hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted, #64748b);
  font-weight: 500;
}
html.app-is-busy {
  cursor: progress;
}