#terminal-clean-token-card,
.square-token-group {
  display: none !important;
}

/* ============================================================
   FUENTE LOCAL ? funciona sin internet
   ============================================================ */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }

/* ============================================================
   VARIABLES & RESET
   ============================================================ */
:root {
  /* ?? Light theme (default) ?? */
  --bg:          #ffffff;
  --bg-tint:     #f0f2f5;   /* gris suave para separadores / admin / modales */
  --surface:     #ffffff;
  --card:        #ffffff;
  --card-hover:  #f8f9ff;
  --card-active: #f0f2f7;
  --border:      rgba(0,0,0,0.07);
  --border-mid:  rgba(0,0,0,0.13);

  --input-bg:    #f8fafc;
  --input-focus: #ffffff;

  --accent:      #ff5a1f;
  --accent-dim:  rgba(255,90,31,0.10);
  --accent-glow: rgba(255,90,31,0.25);

  --teal:        #0099b8;
  --gold:        #d97706;
  --purple:      #7c3aed;
  --green:       #16a34a;
  --red:         #dc2626;

  --text:        #1e293b;
  --text-muted:  #64748b;
  --text-dim:    #94a3b8;

  /* semantic tints */
  --tint-yellow:      #fffbeb;
  --tint-yellow-mid:  #fef3c7;
  --tint-yellow-text: #92400e;
  --tint-yellow-brd:  #f59e0b;
  --tint-red:         #fee2e2;
  --tint-red-text:    #991b1b;
  --tint-green:       #dcfce7;
  --tint-green-text:  #166534;
  --tint-green-brd:   #86efac;
  --tint-blue:        #eff6ff;
  --tint-blue-text:   #1d4ed8;
  --tint-gray:        #f8f9fa;
  --tint-gray-mid:    #f0f2f7;

  --white: #ffffff;
  --black: #000000;

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  --shadow:    0 4px 24px rgba(0,0,0,0.10);
  --shadow-sm: 0 2px 8px  rgba(0,0,0,0.07);
  --transition: 180ms ease;

  --header-h: 70px;
  --cat-h:    68px;
  --search-h: 60px;
  --cart-w:   360px;

  --img-bg:   #ffffff;

  --app-safe-top:    env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left:   env(safe-area-inset-left, 0px);
  --app-safe-right:  env(safe-area-inset-right, 0px);
}

/* ?? Dark theme ?? */
body.dark {
  --bg:          #0f1117;
  --bg-tint:     #0f1117;
  --surface:     #1a1d27;
  --card:        #1e2130;
  --card-hover:  #252838;
  --card-active: #252838;
  --border:      rgba(255,255,255,0.07);
  --border-mid:  rgba(255,255,255,0.14);

  --input-bg:    #252838;
  --input-focus: #2e3245;

  --accent:      #ff6b35;
  --accent-dim:  rgba(255,107,53,0.15);
  --accent-glow: rgba(255,107,53,0.30);

  --teal:        #22d3ee;
  --gold:        #fbbf24;
  --purple:      #a78bfa;
  --green:       #4ade80;
  --red:         #f87171;

  --text:        #f1f5f9;
  --text-muted:  #94a3b8;
  --text-dim:    #64748b;

  --tint-yellow:      #2d2206;
  --tint-yellow-mid:  #3d2f08;
  --tint-yellow-text: #fbbf24;
  --tint-yellow-brd:  #d97706;
  --tint-red:         #2d0a0a;
  --tint-red-text:    #fca5a5;
  --tint-green:       #052e16;
  --tint-green-text:  #4ade80;
  --tint-green-brd:   #166534;
  --tint-blue:        #0c1445;
  --tint-blue-text:   #93c5fd;
  --tint-gray:        #252838;
  --tint-gray-mid:    #1e2130;

  --white: #1e2130;
  --black: #f1f5f9;

  --shadow:    0 4px 24px rgba(0,0,0,0.40);
  --shadow-sm: 0 2px 8px  rgba(0,0,0,0.30);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  /* Comportarse como app nativa: nada de selección de texto ni el "cuadro
     amarillo"/menú de copiar al mantener presionado (WebView Android). */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Excepción: SÍ permitir seleccionar/editar en campos de texto y en lo que
   marquemos explícitamente como seleccionable (ej. IDs para copiar). */
input, textarea, [contenteditable="true"], [contenteditable=""], .selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  color-scheme: light;
}
body.dark {
  color-scheme: dark;
}
/* Nunca dejar que el WebView/Android pinte el splash amarillo detrás */
html, body, #app {
  background-color: var(--bg, #ffffff);
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: inherit;
  transition: transform var(--transition), opacity var(--transition), background var(--transition), box-shadow var(--transition);
  user-select: none;
}

button:active {
  transform: scale(0.95);
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  background: var(--input-bg);
  background-color: var(--input-bg);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  color-scheme: inherit;
}

/* Listas nativas del <select>: nunca heredar el crema del Estudio ni el acento. */
select option,
select optgroup {
  background: var(--card);
  background-color: var(--card);
  color: var(--text);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--input-focus);
  background-color: var(--input-focus);
}

input::placeholder {
  color: var(--text-dim);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.5);
}

/* ============================================================
   SCREENS
   ============================================================ */
#app {
  height: 100%;
  min-height: 0;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100vw;
  overflow: hidden;
}

/* ============================================================
   POS HEADER
   ============================================================ */
.pos-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Pill de estado de impresora en el header */
.printer-header-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.php-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.printer-header-pill.printer-online {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.3);
  color: #15803d;
}

.printer-header-pill.printer-online .php-dot {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.3);
  animation: printer-pulse 2s infinite;
}

.printer-header-pill.printer-offline {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: var(--text-muted);
}

.printer-header-pill.printer-offline .php-dot {
  background: #9ca3af;
}

.printer-header-pill:hover {
  opacity: 0.8;
  transform: scale(1.04);
}

@keyframes printer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50%       { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

body.dark .printer-header-pill.printer-online {
  background: rgba(74,222,128,0.15);
  border-color: rgba(74,222,128,0.3);
  color: #4ade80;
}

body.dark .printer-header-pill.printer-offline {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}

.brand-logo {
  font-size: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff8a5b 0%, #ff5a1f 50%, #e03e00 100%);
  border-radius: 13px;
  overflow: hidden;
  box-shadow:
    0 6px 18px rgba(255,90,31,0.38),
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -2px 8px rgba(200,30,0,0.25) inset;
}
.brand-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.brand-logo.has-custom-logo {
  background: var(--input-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  padding: 3px;
}
.or-rest-logo {
  width: 28px; height: 28px;
  object-fit: contain;
  border-radius: 8px;
  vertical-align: middle;
  margin-right: 6px;
}

.brand-text h1 {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.brand-text p {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: 3px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.brand-text p::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.6);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}


.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80; /* por encima de header-actions: el OK del aviso debe ser clicable */
  pointer-events: none;
}

.order-badge {
  --ob-w: 96px;
  --ob-w-grace: min(380px, 42vw);
  position: relative;
  pointer-events: auto;
  background: linear-gradient(135deg, #ff8a5b 0%, #ff5a1f 100%);
  border: none;
  border-radius: 999px;
  padding: 8px 18px 7px;
  display: block;
  width: var(--ob-w);
  height: 46px;
  box-sizing: border-box;
  box-shadow:
    0 8px 22px rgba(255,90,31,0.32),
    0 1px 0 rgba(255,255,255,0.3) inset;
  /* width lo anima WAAPI; no pelear con transition */
  transition: background .35s ease, box-shadow .35s ease;
  cursor: default;
  overflow: hidden;
  z-index: 81;
}

.order-badge:hover:not(.is-grace):not(.is-collapsing) {
  transform: translateY(-1px);
}

.order-badge-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  box-sizing: border-box;
}

.order-badge-normal {
  flex-direction: column;
  gap: 0;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}

.order-badge-grace {
  flex-direction: row;
  opacity: 0;
  transform: scale(0.86);
  pointer-events: none;
  z-index: 2;
  visibility: hidden;
}

.order-badge.is-grace {
  width: var(--ob-w-grace);
  height: 48px;
  padding: 0 8px 0 14px;
  background: linear-gradient(105deg, #c2410c 0%, #dc2626 50%, #b45309 100%);
  box-shadow: 0 10px 28px rgba(185, 28, 28, 0.38);
  z-index: 90;
}
.order-badge.is-grace .order-badge-normal {
  opacity: 0;
  transform: scale(0.75);
  pointer-events: none;
  visibility: hidden;
  z-index: 1;
}
.order-badge.is-grace .order-badge-grace {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  visibility: visible;
  z-index: 3;
}

.order-badge.is-grace.is-collapsing {
  /* WAAPI controla el width; solo estado visual */
  background: linear-gradient(135deg, #ff8a5b 0%, #ff5a1f 100%);
  box-shadow:
    0 8px 22px rgba(255,90,31,0.32),
    0 1px 0 rgba(255,255,255,0.3) inset;
}

.order-badge .obg-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.order-badge .obg-marquee {
  display: inline-block;
  white-space: nowrap;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  animation: obg-scroll 16s linear infinite;
}
@keyframes obg-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}
.order-badge .obg-ack {
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: #9a3412;
  font-weight: 900;
  font-size: 0.78rem;
  padding: 8px 14px;
  min-width: 44px;
  min-height: 36px;
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.order-badge .obg-ack:active { transform: scale(0.94); }

.order-label {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.88);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

.order-num {
  font-size: 1.28rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

@media (max-width: 900px) {
  .order-badge { --ob-w-grace: min(320px, 48vw); }
  .order-badge .obg-marquee { font-size: 0.7rem; }
}
@media (max-width: 720px) {
  .order-badge { --ob-w-grace: min(260px, 52vw); }
  .order-badge .obg-marquee { font-size: 0.64rem; }
  .order-badge .obg-ack { font-size: 0.64rem; padding: 6px 9px; }
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.theme-btn, .fullscreen-btn {
  background: var(--card-active);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-btn:hover, .fullscreen-btn:hover {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--border-mid);
  transform: translateY(-1px);
}

.admin-btn {
  background: var(--card-active);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  border-radius: 12px;
  padding: 0 18px;
  height: 42px;
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--transition);
}

.admin-btn:hover {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,90,31,0.12);
}

/* ============================================================
   POS LAYOUT
   ============================================================ */
.pos-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ============================================================
   PRODUCTS PANEL
   ============================================================ */
.products-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  min-width: 0;
}

.products-top-bar {
  height: var(--search-h);
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 5;
}

.products-top-bar .search-wrap {
  flex: 1;
}

/* ---- Control de tama?o de tarjetas ---- */
.card-size-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.size-step-btn {
  color: var(--text-muted);
  font-size: 1rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.size-step-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
  user-select: none;
}
.size-step-btn:hover  { background: var(--card-hover); color: var(--accent); }
.size-step-btn:active { transform: scale(0.9); }

.img-bg-btn {
  background: none;
  border: none;
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  line-height: 1;
  border: 2px solid transparent;
  transition: all var(--transition);
}
.img-bg-btn:hover { background: var(--card-hover); transform: scale(1.1); }

/* Slider personalizado ? m?s fluido */
#card-size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, var(--border-mid) 50%);
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: none; /* evitar lag */
}

#card-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(255,90,31,0.45), 0 0 0 3px rgba(255,90,31,0.15);
  border: 2.5px solid var(--surface);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
#card-size-slider::-webkit-slider-thumb:hover  { transform: scale(1.15); }
#card-size-slider::-webkit-slider-thumb:active { transform: scale(1.25); cursor: grabbing; }

#card-size-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
  border: 2.5px solid var(--surface);
  box-shadow: 0 2px 8px rgba(255,90,31,0.45);
}
#card-size-slider:focus { box-shadow: none; border: none; }

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

.search-wrap input {
  padding: 11px 16px 11px 40px;
  border-radius: 999px;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  font-size: 0.92rem;
  font-weight: 500;
  width: 100%;
  color: var(--text);
  transition: all var(--transition);
}
.search-wrap input:hover {
  background: var(--card-hover);
  border-color: var(--border-mid);
}
.search-wrap input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
  outline: none;
}

/* ============================================================
   CATEGORIES BAR
   ============================================================ */
.categories-bar {
  height: var(--cat-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.categories-bar::-webkit-scrollbar { display: none; }

/* ??? Category pills: modern design with icon bubble ?????????????????????? */
.category-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.category-btn .cat-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cat-color, #64748b);
  color: #fff;
  border-radius: 50%;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: all var(--transition);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--cat-color, #64748b) 35%, transparent);
}

.category-btn .cat-name {
  letter-spacing: -0.2px;
}

.category-btn:hover {
  background: var(--card-hover);
  border-color: var(--cat-color, var(--border-mid));
  transform: translateY(-1px);
}

.category-btn:hover .cat-icon {
  transform: scale(1.08);
}

.category-btn.active {
  font-weight: 800;
  color: #1e293b !important;
  background: var(--card, #ffffff) !important;
  border: 1.5px solid var(--cat-color, var(--accent)) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cat-color, var(--accent)) 22%, transparent) !important;
}

.category-btn.active .cat-name,
.products-top-bar .category-btn.active .cat-name,
.pos-cat-rail .category-btn.active .cat-name {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Activa: el círculo del ícono se queda IGUAL que en reposo (color sólido de la categoría) */
.category-btn.active .cat-icon {
  background: var(--cat-color, #64748b) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--cat-color, #64748b) 35%, transparent) !important;
}

body.dark .category-btn {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
body.dark .category-btn:hover {
  background: rgba(255,255,255,0.06);
}

/* ============================================================
   PRODUCTS GRID
   ============================================================ */
.products-grid {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w, 160px), 1fr));
  /* grid-auto-rows: auto ? cada fila se ajusta al contenido natural de las cards.
     Las cards definen su propio min-height; el grid no impone alturas. */
  grid-auto-rows: auto;
  gap: 12px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.products-grid::-webkit-scrollbar { width: 5px; }
.products-grid::-webkit-scrollbar-track { background: transparent; }
.products-grid::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }

/* Fade suave en los bordes del scroll de productos: las tarjetas se difuminan
   al entrar/salir del área visible para que no se corte de golpe. Aplica
   tanto en POS clásico como en POS con tema personalizado.
   Tamaño contenido (16px) para que NO invada las tarjetas grandes. */
.products-grid {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 16px,
    #000 calc(100% - 16px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 16px,
    #000 calc(100% - 16px),
    transparent 100%
  );
}
/* Mismo efecto para el carrito (lista de items) — al hacer scroll en órdenes
   largas las primeras y últimas líneas se difuminan suavemente. */
.cart-items {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
}

.no-products {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-card {
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
  position: relative;
  display: block;            /* simple block ? no flex; alto = imagen + info naturalmente */
  height: auto;
  min-height: var(--card-min-h, 230px);
  /* Permitir SOLO scroll vertical nativo sobre las tarjetas. Evita que el
     navegador entre en estados de gesto ambiguos (causa de congelamientos al
     mantener presionado y arrastrar repetidamente en WebView de Android). */
  touch-action: pan-y;
}

.product-card:hover {
  background: var(--card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-mid);
}

.product-card:active {
  transform: scale(0.96);
}

.product-card.long-pressing {
  transform: scale(0.985);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.18), var(--shadow-sm);
}

.product-card.in-cart {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(22,163,74,0.25), var(--shadow-sm);
}

.product-img-wrap {
  position: relative;
  width: 100%;
  /* Altura controlada por variable. Al cambiar tama?o con slider, esta var crece. */
  height: var(--card-img-h, 150px);
  background: var(--img-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-img-wrap img.product-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
  opacity: 0;
  transition: opacity .18s ease;
  box-sizing: border-box;
}
.product-img-wrap img.product-img.is-loaded { opacity: 1; }

/* ============================================================
   PRODUCT DETAILS MODAL ? opened by long press on product card
   ============================================================ */
.product-details-modal {
  z-index: 33000;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.dark .product-details-modal {
  background: rgba(0, 0, 0, 0.82);
}

.product-details-box {
  width: min(620px, 96vw);
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.35);
  position: relative;
  display: flex;
  flex-direction: column;
}

#product-details-content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-details-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.pd-hero {
  min-height: 150px;
  background: var(--img-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.pd-hero img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  padding: 12px 46px 10px;
  display: block;
}

.pd-placeholder {
  width: 100%;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.pd-special-badge {
  position: absolute;
  right: 18px;
  bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28);
}

.pd-body {
  padding: 16px 18px 18px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pd-kicker {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.pd-body h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1.1;
}

.pd-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.pd-price {
  font-size: 1.45rem;
  font-weight: 950;
  color: var(--accent);
}

.pd-special-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: #c2410c;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 999px;
  padding: 6px 10px;
}

.pd-lang-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  margin: 2px 0 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-active);
}

.pd-lang-tab {
  border: 0;
  border-radius: 999px;
  padding: 7px 13px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.pd-lang-tab.active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.pd-lang-panel {
  display: none;
}

.pd-lang-panel.is-active {
  display: block;
}

.pd-block {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
}

.pd-label {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.pd-text {
  color: var(--text);
  font-size: 0.93rem;
  line-height: 1.42;
  white-space: normal;
}

.pd-empty {
  color: var(--text-muted);
  font-style: italic;
}

.pd-mods-block {
  padding-bottom: 4px;
}

.pd-mods-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pd-mod-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-active);
  padding: 10px 11px;
}

.pd-mod-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.pd-mod-head strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
}

.pd-mod-head span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.pd-mod-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pd-mod-options li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 750;
}

.pd-opt-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pd-opt-price {
  color: var(--accent);
  font-weight: 900;
}

.pd-opt-type {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.pd-opt-empty {
  color: var(--text-muted) !important;
  font-style: italic;
}

@media (max-height: 760px) {
  .product-details-box { max-height: calc(100dvh - 14px); width: min(680px, 98vw); }
  .pd-hero,
  .pd-placeholder { min-height: 112px; }
  .pd-hero img { height: 112px; padding: 8px 44px; }
  .pd-body { padding: 12px 16px 14px; }
  .pd-body h2 { font-size: 1.25rem; }
  .pd-block { margin-top: 8px; padding-top: 8px; }
  .pd-mod-group { padding: 8px 9px; }
  .pd-mods-list { gap: 7px; }
}

@media (min-width: 700px) {
  .product-details-box {
    width: min(720px, 94vw);
  }
  .product-details-box .pd-lang-panel.is-active {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0 14px;
  }
  .product-details-box .pd-mods-block {
    grid-column: 1 / -1;
  }
}

.product-placeholder {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .18s ease;
}
.product-img-wrap.image-ready .product-placeholder { opacity: 0; }

.placeholder-emoji {
  font-size: clamp(1.4rem, 5cqw, 2.8rem);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}

.qty-badge {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  background: var(--green);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  animation: pop 0.2s ease;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.qty-badge.qty-badge-updated {
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(22,163,74,0.45);
}

@keyframes pop {
  0% { transform: scale(0.5); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.product-info {
  padding: 10px 10px 14px;
  background: var(--card);
  transition: background var(--transition);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* SIN flex / sin altura fija ? el alto es exactamente lo que el contenido necesita
     (nombre 1-2 l?neas + hint opcional + precio + padding). */
}

.product-card:hover .product-info {
  background: var(--card-hover);
}

.product-card.in-cart .product-info {
  /* Seleccionado debe verse limpio: solo borde verde + badge de cantidad.
     No pintar franja verde detr?s del nombre/precio. */
  background: var(--card) !important;
}

.product-card.in-cart:hover .product-info {
  background: var(--card-hover) !important;
}

.product-name {
  font-size: var(--card-info-font, 12px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.18;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.product-price {
  font-size: var(--card-price-font, 13px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   CART PANEL
   ============================================================ */
.cart-panel {
  width: var(--cart-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.cart-panel.cart-pulse {
  box-shadow: inset 2px 0 0 rgba(22, 163, 74, 0.42);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cart-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.cart-header-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ??? Modal "?Para Aqu? o Para Llevar?" ??? */
.order-type-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  padding: 16px;
  backdrop-filter: blur(4px);
  animation: ot-fade-in 0.18s ease;
}
.order-type-modal.show { display: flex; }
@keyframes ot-fade-in { from { opacity: 0 } to { opacity: 1 } }
.order-type-modal-card {
  background: #fff;
  border-radius: 22px;
  width: min(420px, 100%);
  padding: 24px 22px 22px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.28);
  animation: ot-pop-in 0.22s cubic-bezier(.4,1.4,.6,1);
}
@keyframes ot-pop-in { from { transform: scale(0.92); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.order-type-modal-title {
  text-align: center;
  font-size: 1.18rem;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 4px;
}
.order-type-modal-sub {
  text-align: center;
  color: #6b7280;
  font-size: 0.92rem;
  margin-bottom: 18px;
}
.order-type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.order-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.order-type-option:hover {
  border-color: #ff5a1f;
  background: #fff8f3;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255,90,31,0.15);
}
.order-type-option.active,
.order-type-option:active {
  border-color: #ff5a1f;
  background: #ff5a1f;
  color: #fff;
}
.order-type-option .oto-icon {
  font-size: 2.4rem;
  line-height: 1;
}
.order-type-option .oto-label {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.order-type-modal-cancel {
  width: 100%;
  padding: 11px;
  background: transparent;
  border: none;
  color: #6b7280;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s;
}
.order-type-modal-cancel:hover { background: #f3f4f6; color: #1f2937; }

/* ??? Pill del tipo de orden dentro del header del modal de pago ??? */
.pay-order-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  background: #fff8f3;
  border: 2px solid #ff5a1f;
  color: #c2410c;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.pay-order-type-pill:hover { background: #ff5a1f; color: #fff; transform: translateY(-1px); }
.pay-order-type-pill[data-order-type="llevar"] {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1e40af;
}
.pay-order-type-pill[data-order-type="llevar"]:hover { background: #2563eb; color: #fff; }

/* ??? Pill mostrando tipo de orden activo en cards de Cola ??? */
.order-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #fff8f3;
  border: 1.5px solid #ff5a1f;
  color: #c2410c;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.order-type-pill:hover { background: #ff5a1f; color: #fff; }
.order-type-pill.is-llevar { border-color: #2563eb; color: #1e40af; background: #eff6ff; }
.order-type-pill.is-llevar:hover { background: #2563eb; color: #fff; }
.order-type-pill .otp-icon { font-size: 0.95rem; }

.review-order-btn {
  background: rgba(255,90,31,0.12);
  color: var(--accent);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1.5px solid rgba(255,90,31,0.3);
  transition: all 0.15s;
}
.review-order-btn:hover:not(:disabled) { background: rgba(255,90,31,0.22); }
.review-order-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.clear-btn {
  background: rgba(239,68,68,0.12);
  color: var(--red);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(239,68,68,0.25);
}

.clear-btn:hover {
  background: rgba(239,68,68,0.2);
}

/* ?? Modal confirmaci?n post-pago ?? */
.order-confirm-box {
  width: min(520px, 94vw);
  text-align: center;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ocm-top-row { width: 100%; text-align: left; margin-bottom: 2px; }
.ocm-success-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34,197,94,0.16), rgba(255,90,31,0.10));
  border: 1.5px solid rgba(34,197,94,0.25);
}
.ocm-check {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(34,197,94,0.28);
}
.ocm-success-copy { flex: 1; min-width: 0; }
.ocm-order-num {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -1px;
  line-height: 0.92;
}
.ocm-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 2px;
  font-weight: 800;
}
.ocm-help-text {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

/* ?tems en el modal post-pago */
.ocm-items {
  width: 100%;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border-mid);
  border-radius: 16px;
  padding: 8px 10px;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2px;
  overflow: hidden;
}
.ocm-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 5px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.ocm-items-head strong {
  color: var(--text);
  font-size: 0.88rem;
}
.ocm-items-head span {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
}
.ocm-items-list {
  width: 100%;
}
.ocm-item-block {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ocm-item-block:last-child { border-bottom: none; }
.ocm-item-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.82rem;
}
/* Cantidades naranjas en todos los contextos */
.qty-accent { color: var(--accent); font-weight: 900; }
.ocm-item-qty   { color: var(--accent); font-weight: 900; flex-shrink: 0; min-width: 20px; }
.ocm-item-name  { flex: 1; color: var(--text); font-weight: 800; text-align: left; }
.ocm-item-price { color: var(--text-muted); font-size: 0.82rem; flex-shrink: 0; }
.ocm-mod-row {
  display: flex; gap: 5px;
  font-size: 0.72rem; line-height: 1.35;
  padding-left: 4px; color: var(--text-muted);
}
.ocm-mod-group { font-weight: 800; color: var(--text); flex-shrink: 0; }
.ocm-mod-row   { flex-direction: column; }
.ocm-mod-opt   { color: var(--text-muted); font-size: 0.72rem; padding-left: 10px; line-height: 1.35; }
.ocm-mod-opt .qty-accent { color: var(--accent); }
.ocm-mod-more  { color: var(--accent); font-weight: 800; }
.ocm-mod-note  { font-size: 0.72rem; color: var(--text-muted); font-style: italic; padding-left: 4px; text-align: left; }
.ocm-view-full-btn {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,90,31,0.28);
  background: rgba(255,90,31,0.10);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}
.ocm-view-full-btn:hover { background: rgba(255,90,31,0.16); }

/* Totales */
.ocm-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0;
  background: transparent;
  border: none;
}
.ocm-money-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,90,31,0.06));
  border: 1.5px solid var(--border-mid);
}
.ocm-money-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.ocm-money-row span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
}
.ocm-money-row strong {
  font-size: 1rem;
  font-weight: 950;
  color: var(--text);
  white-space: nowrap;
}
.ocm-money-total {
  background: rgba(255,90,31,0.10);
  border: 1px solid rgba(255,90,31,0.22);
}
.ocm-money-total span,
.ocm-money-total strong { color: var(--accent); }
.ocm-money-total strong { font-size: 1.4rem; }
.ocm-money-change {
  background: rgba(34,197,94,0.13);
  border: 1px solid rgba(34,197,94,0.28);
}
.ocm-money-change span,
.ocm-money-change strong { color: var(--green); }
.ocm-money-change strong { font-size: 1.25rem; }

/* Estado impresi?n */
.ocm-print-status {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 2px;
  min-height: 20px;
  padding: 5px 8px;
  background: transparent;
  border-radius: 10px;
}
.ocm-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
.ocm-cmd-btn,
.ocm-print-btn,
.ocm-receipt-btn,
.ocm-drawer-btn,
.ocm-new-btn {
  width: 100%;
  min-height: 56px;
  padding: 12px 10px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.15s;
}
.ocm-receipt-btn {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  border: none;
  box-shadow: 0 5px 18px rgba(249,115,22,0.28);
}
.ocm-receipt-btn:hover { box-shadow: 0 7px 24px rgba(249,115,22,0.42); transform: translateY(-1px); }
.ocm-cmd-btn {
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border-mid);
}
.ocm-cmd-btn:hover { border-color: var(--accent); color: var(--accent); }
.ocm-print-btn {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  border: none;
  box-shadow: 0 5px 18px rgba(59,130,246,0.35);
}
.ocm-print-btn:hover { box-shadow: 0 7px 24px rgba(59,130,246,0.5); transform: translateY(-1px); }
.ocm-new-btn {
  grid-column: 1 / -1;
  min-height: 62px;
  background: linear-gradient(135deg, var(--green), #15803d);
  color: #fff;
  border: none;
  font-size: 1.08rem;
  box-shadow: 0 5px 18px rgba(34,197,94,0.3);
}
.ocm-new-btn:hover { box-shadow: 0 7px 24px rgba(34,197,94,0.45); transform: translateY(-1px); }
.ocm-drawer-btn {
  background: #fff;
  color: #92400e;
  border: 2px solid #f59e0b;
}
.ocm-drawer-btn:hover { background: #fef3c7; transform: translateY(-1px); }
body.dark .ocm-drawer-btn { background: rgba(245,158,11,0.08); color: #fbbf24; border-color: rgba(245,158,11,0.4); }
body.dark .ocm-drawer-btn:hover { background: rgba(245,158,11,0.15); }

.full-order-overlay { z-index: 13000; }
.full-order-box {
  width: min(520px, 94vw);
  max-height: min(760px, 92vh);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.full-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,90,31,0.10), rgba(34,197,94,0.08));
}
.full-order-head p {
  margin: 0 0 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.72rem;
  font-weight: 900;
}
.full-order-head h3 {
  margin: 0;
  color: var(--accent);
  font-size: 2rem;
  line-height: 1;
}
.full-order-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
}
.full-order-list {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
}
.full-order-list .ocm-item-block {
  padding: 9px 0;
}
.full-order-list .ocm-item-row {
  font-size: 0.95rem;
}
.full-order-list .ocm-mod-row,
.full-order-list .ocm-mod-opt,
.full-order-list .ocm-mod-note {
  font-size: 0.82rem;
  line-height: 1.55;
}
.full-order-back {
  margin: 0 16px 16px;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--green), #15803d);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}
.full-order-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 18px;
}

@media (max-width: 430px) {
  .order-confirm-box { padding: 22px 18px; }
  .ocm-success-card { align-items: flex-start; gap: 12px; padding: 14px; }
  .ocm-check { width: 52px; height: 52px; font-size: 1.6rem; }
}

/* ?? Bot?n de Cola en header ?? */
.queue-header-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,183,0,0.12);
  border: 1.5px solid rgba(255,183,0,0.35);
  color: #ffb700;
  border-radius: var(--r-md);
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.queue-header-btn:hover { background: rgba(255,183,0,0.22); }
.queue-badge-dot {
  background: #ffb700;
  color: #000;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  font-size: 0.7rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ?? Modal QR ?? */
.qr-modal-box {
  width: min(340px, 94vw);
  padding: 0;
  overflow: hidden;
  text-align: center;
}
.qr-top {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.qr-check {
  font-size: 2.5rem;
  margin-bottom: 8px;
  animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.qr-top h2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
}
.qr-hint-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.qr-canvas-wrap {
  padding: 20px;
  display: flex;
  justify-content: center;
  background: #fff;
}
.qr-canvas-wrap canvas {
  border-radius: 12px;
  display: block;
}
.qr-optional {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 8px 20px 0;
  font-style: italic;
}
.qr-close-btn {
  width: calc(100% - 32px);
  margin: 12px 16px 16px;
  padding: 13px;
  background: var(--card-active);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.qr-close-btn:hover { background: var(--card); }

/* ?? Modal Cola de ?rdenes ?? */
.oq-box {
  width: min(480px, 96vw);
  max-height: min(80dvh, 80vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.oq-box .modal-header { padding: 18px 20px 14px; flex-shrink: 0; }
.oq-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.oq-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 32px 16px;
  line-height: 1.6;
}
.oq-empty small {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  opacity: 0.75;
}
.oq-toggle-history-btn {
  display: block;
  margin: 14px auto 4px;
  padding: 10px 18px;
  background: transparent;
  border: 1px dashed var(--border-color, rgba(148,163,184,0.35));
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.oq-toggle-history-btn:hover {
  background: rgba(148,163,184,0.12);
  color: var(--text-color, #e2e8f0);
  border-color: rgba(148,163,184,0.5);
}
.oq-toggle-history-btn:active { transform: scale(0.97); }
.oq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 2px solid var(--border-mid);
  background: var(--card);
  transition: border-color 0.2s;
}
.oq-item.oq-ready {
  border-color: rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.06);
}
/* Estructura ?tem de cola */
.oq-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.oq-item-header { display: flex; align-items: baseline; gap: 8px; }
.oq-num {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.oq-item.oq-ready .oq-num { color: var(--green); }
.oq-time { font-size: 0.72rem; color: var(--text-muted); }
.oq-item-lines { display: flex; flex-direction: column; gap: 2px; }
.oq-item-line {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}
.oq-item-muted { color: var(--text-muted); }
.oq-item-note { color: var(--text-muted); font-style: italic; font-size: 0.78rem; }
.oq-item-block { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.oq-item-block:last-child { border-bottom: none; }
.oq-mod-line {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-left: 10px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}
.oq-mod-group { font-weight: 800; color: var(--text); margin-bottom: 1px; }
.oq-mod-opt   { padding-left: 10px; color: var(--text-muted); line-height: 1.6; }
.oq-item.oq-done .oq-item-line { color: var(--text-muted); }

/* Columna de botones */
.oq-btn-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  flex-shrink: 0;
}
.oq-print-cmd-btn {
  padding: 7px 10px;
  background: transparent;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
}
.oq-print-cmd-btn:hover { border-color: var(--accent); color: var(--accent); }
.oq-ready-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--green), #15803d);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(34,197,94,0.3);
  transition: all 0.15s;
}
.oq-ready-btn:hover { box-shadow: 0 5px 18px rgba(34,197,94,0.45); transform: translateY(-1px); }
.oq-deliver-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(59,130,246,0.3);
  transition: all 0.15s;
}
.oq-deliver-btn:hover { box-shadow: 0 5px 18px rgba(59,130,246,0.45); transform: translateY(-1px); }
.oq-item.oq-done {
  opacity: 0.45;
}
.oq-item.oq-done .oq-num { color: var(--text-muted); }
.oq-status-delivered {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.oq-status-done {
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 800;
  background: rgba(34,197,94,0.12);
  border: 1.5px solid rgba(34,197,94,0.35);
  border-radius: var(--r-md);
  padding: 8px 14px;
  white-space: nowrap;
}

/* ?? Modal Revisi?n de Orden ?? */
.order-review-box {
  width: min(440px, 96vw);
  max-height: min(85dvh, 85vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.or-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}
.or-restaurant {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.or-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.or-header > div { display: flex; flex-direction: column; }
.or-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}
.or-item {
  padding: 12px 20px;
}
.or-item-sep {
  border-bottom: 1px solid var(--border);
}
.or-item-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.or-item-qty {
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 28px;
}
.or-item-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.or-item-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  flex-shrink: 0;
}
.or-item-mods {
  margin-top: 6px;
  padding-left: 36px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.or-mod-line {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.8rem;
  padding: 2px 0;
}
.or-mod-label {
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
}
.or-mod-opt {
  color: var(--text);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.7;
  padding-left: 8px;
}
.or-mod-qty {
  color: var(--accent);
  font-weight: 900;
}
.or-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.or-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.or-total-row span:first-child { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.or-total-amt {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -1px;
}
.or-confirm-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--green), #15803d);
  color: #fff;
  border: none;
  border-radius: var(--r-lg);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(34,197,94,0.3);
  transition: all 0.15s;
}
.or-confirm-btn:hover { box-shadow: 0 6px 24px rgba(34,197,94,0.45); transform: translateY(-1px); }
.or-edit-btn {
  width: 100%;
  padding: 11px;
  background: var(--card-active);
  color: var(--text-muted);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.or-edit-btn:hover { background: var(--card); color: var(--text); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  min-height: 0;
}

.cart-items::-webkit-scrollbar { width: 4px; }
.cart-items::-webkit-scrollbar-track { background: transparent; }
.cart-items::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }

.empty-cart {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-dim);
  padding: 40px 20px;
  text-align: center;
}

.empty-cart-icon {
  font-size: 3.5rem;
  opacity: 0.3;
}

.empty-cart p {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.empty-cart small {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ============================================================
   CART ITEM ? dise?o limpio: tap = editar, sin botones +/- visibles
   ============================================================ */
.cart-item {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.cart-item.cart-item-enter {
  animation: cartItemIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
}

.cart-item.cart-line-updated {
  border-color: rgba(22, 163, 74, .42);
  box-shadow: 0 3px 12px rgba(22, 163, 74, .10);
}
.cart-item:hover {
  border-color: var(--accent-dim2, #ffd2b5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.cart-item:active {
  transform: scale(0.985);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

@keyframes cartItemIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.cart-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cart-item-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.cart-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cart-qty-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), #ff3d00);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 2px 9px;
  min-width: 32px;
  border-radius: 50px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(255,107,0,0.28);
}

.cart-unit-price {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}
.cart-unit-price::before {
  content: '·';
  margin-right: 4px;
  opacity: 0.45;
}

.cart-note-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,193,7,0.18);
  border: 1px solid rgba(255,193,7,0.4);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
}

.cart-item-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cart-item-subtotal {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cart-item-remove {
  background: rgba(239,68,68,0.08);
  color: rgba(239,68,68,0.65);
  font-size: 0.72rem;
  border-radius: 50%;
  line-height: 1;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  transition: all 0.12s ease;
  flex-shrink: 0;
}
.cart-item-remove:hover {
  color: #fff;
  background: var(--red, #ef4444);
  border-color: var(--red, #ef4444);
  transform: scale(1.08);
}
.cart-item-remove:active { transform: scale(0.92); }

.cart-edit-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  opacity: 0.8;
  font-style: italic;
}

/* Bot?n editar ?tem con builder */
.cart-edit-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  background: var(--card-active);
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease !important;
}
.cart-edit-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* Cart Footer */
.cart-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cart-subtotal-row span:first-child {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.item-count-badge {
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-xl);
  border: 1px solid var(--accent-glow);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.cart-total-row span:first-child {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cart-total-amount {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -1px;
}

.checkout-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--accent), #ff8c3a);
  color: #fff;
  border-radius: var(--r-lg);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 24px rgba(255,90,31,0.35);
  border: none;
}

.checkout-btn:hover:not(:disabled) {
  box-shadow: 0 8px 32px rgba(255,90,31,0.5);
  transform: translateY(-1px);
}

.checkout-btn:disabled {
  background: var(--card);
  color: var(--text-dim);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* Opaco de verdad: si es semitransparente se ve el crema del POS detrás */
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
  padding: 12px;
}
body.dark .modal-overlay {
  background: rgba(0, 0, 0, 0.78);
}

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

.modal-box {
  background: var(--card);
  border: 1px solid var(--border-mid);
  border-radius: 26px;
  box-shadow: var(--shadow), 0 0 60px rgba(0,0,0,0.6);
  animation: slideUp 0.2s ease;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
}

.modal-icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.close-btn {
  background: var(--card-active);
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-mid);
  flex-shrink: 0;
}

.close-btn:hover {
  background: rgba(220,38,38,0.08);
  color: var(--red);
  border-color: rgba(220,38,38,0.3);
}

/* ============================================================
   PIN MODAL
   ============================================================ */
/* ============================================================
   PIN MODAL ? dise?o moderno y fluido
   ============================================================ */
.modal-overlay {
  /* GPU layer para que la apertura no provoque layout */
  will-change: opacity;
}

.pin-box {
  width: min(360px, 94vw);
  text-align: center;
  border-radius: 28px;
  overflow: hidden;
  /* Entrada con spring suave */
  animation: pinBoxIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.12);
}

@keyframes pinBoxIn {
  from { opacity: 0; transform: scale(0.88) translateY(18px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.pin-header {
  padding: 32px 28px 22px;
  background: linear-gradient(160deg, var(--accent) 0%, #ff3d00 100%);
  position: relative;
  overflow: hidden;
}
.pin-header::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}
.pin-header::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.pin-icon {
  font-size: 2.8rem;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  display: block;
  position: relative; z-index: 1;
}

.pin-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: #fff;
  position: relative; z-index: 1;
}

.pin-header p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.82);
  position: relative; z-index: 1;
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 26px 24px 10px;
  background: var(--card);
}

.pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--border-mid);
  border: 2px solid var(--border-mid);
  /* Transici?n cort?sima para que el dot responda al instante */
  transition: transform 90ms cubic-bezier(0.34,1.56,0.64,1),
              background 70ms ease,
              box-shadow 80ms ease;
  display: block;
  will-change: transform, background;
}

.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,107,0,0.2), 0 2px 10px rgba(255,107,0,0.45);
  transform: scale(1.25);
}

.pin-error {
  color: #ef4444;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 24px 4px;
  background: var(--card);
  animation: pinShake 0.32s cubic-bezier(0.36,0.07,0.19,0.97) both;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pin-error::before { content: '⚠'; font-size: 0.9rem; }

@keyframes pinShake {
  0%  { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

/* ============================================================
   NUMPAD (shared)
   ============================================================ */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 20px 24px;
  background: var(--card);
}

.numpad-btn {
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 800;
  border: 2px solid var(--border-mid);
  min-height: 62px;
  /* Transici?n SOLO de salida del pressed. Al presionar, los estilos
     :active/.pressed entran al instante (transition: none en ese estado). */
  transition: background 90ms ease, transform 90ms ease, box-shadow 90ms ease, border-color 90ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  will-change: transform, background, box-shadow;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.numpad-btn:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}

/* Estado presionado: muy visible y INSTANT?NEO al tap */
.numpad-btn:active,
.numpad-btn.pressed {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(0.92);
  box-shadow:
    0 0 0 4px rgba(255, 107, 0, 0.22),
    0 6px 18px rgba(255, 107, 0, 0.35),
    inset 0 2px 4px rgba(0, 0, 0, 0.18);
  /* sin transition para que el feedback aparezca al instante */
  transition: none;
}

.numpad-cancel {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #ef4444 !important;
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.22) !important;
  letter-spacing: 0.01em;
}
.numpad-cancel:active {
  background: rgba(239,68,68,0.18) !important;
  border-color: rgba(239,68,68,0.5) !important;
}

.numpad-del {
  color: var(--text-muted) !important;
  font-size: 1.3rem !important;
}
.numpad-del:active {
  color: var(--text) !important;
}

/* ============================================================
   PAYMENT MODAL ? sin scroll, se adapta a cualquier pantalla
   ============================================================ */
/* ?? Payment modal: step-by-step layout ?? */
.payment-box {
  width: min(460px, 96vw);
  /* Sin height fijo: el modal se adapta al contenido de cada paso.
     Paso m?todo (3 botones): chico y compacto.
     Paso tarjeta/dividido-tarjeta (m?s contenido): crece hasta 98dvh.
     Si el contenido no cabe, .card-step-content hace scroll interno. */
  max-height: 98vh;
  max-height: 98dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cabecera del modal de pago */
.pay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 2vh, 18px) 16px clamp(8px, 1.5vh, 14px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}
.pay-header-center {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.pay-header-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.pay-header-total {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -1px;
  line-height: 1;
}
.pay-back-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card-active);
  border: 1.5px solid var(--border-mid);
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  padding-bottom: 2px;
}
.pay-back-btn:hover { background: var(--card); }

/* Contenedor de pasos */
.pay-steps-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Cada paso ocupa todo el espacio */
.pay-step {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  display: flex;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.pay-step[style*="display: flex"],
.pay-step.pay-step-in {
  overflow: hidden;
}
.pay-step.pay-step-in {
  opacity: 1;
  transform: translateX(0);
}

/* ?? PASO 1: elegir m?todo ?? */
.pay-step-hint {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 14px 0 10px;
  font-weight: 600;
}
.pay-method-big-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 20px 18px;
  flex: 0 0 auto;
  align-content: center;
}
/* Tres botones: cash, card, split */
.pay-method-big-grid:has(.pay-method-big-btn:nth-child(3)) {
  grid-template-columns: 1fr 1fr 1fr;
}
.pay-method-big-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 12px;
  border-radius: var(--r-xl, 20px);
  border: 2.5px solid var(--border-mid);
  background: var(--card);
  cursor: pointer;
  transition: all 0.18s ease;
}
.pay-method-big-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,90,31,0.2);
}
.pay-method-big-btn.card:hover {
  border-color: var(--teal);
  background: rgba(0,153,184,0.10);
  box-shadow: 0 8px 24px rgba(0,153,184,0.2);
}
.pmb-icon {
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  line-height: 1;
}
.pmb-label {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 800;
  color: var(--text);
}

/* ?? PASO 2a: efectivo ?? */
#pay-step-cash {
  display: none;
}

/* ?? PASO 2b: tarjeta ? REDISE?O LIMPIO ??
   Como .payment-box ahora tiene max-height (no height fijo), el modal
   se adapta al contenido de cada paso. card-step-content no necesita
   forzar flex:1 1 0 ? solo asegura un max-height del viewport como
   ?ltima l?nea de defensa por si el contenido fuera enorme. */
.card-step-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 16px 14px;
  gap: 10px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  /* S?lo aparece scroll si el contenido es realmente m?s alto que el modal */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.28) transparent;
}
.card-step-content::-webkit-scrollbar {
  width: 10px;
}
.card-step-content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.28);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.card-step-content::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,0,0.42);
  background-clip: padding-box;
}
body.dark .card-step-content {
  scrollbar-color: rgba(255,255,255,0.28) transparent;
}
body.dark .card-step-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.28);
  background-clip: padding-box;
}
.card-step-content > .card-amount-badge,
.card-step-content > #square-scheme-section,
.card-step-content > #square-scheme-section-split,
.card-step-content > #terminal-section,
.card-step-content > #terminal-section-split {
  width: 100%;
}
.card-step-content #square-scheme-section,
.card-step-content #square-scheme-section-split {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Hero card del monto a cobrar (redise?ado, igual para card y split-card) */
.card-amount-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  align-self: stretch;
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.10) 0%, rgba(0, 153, 184, 0.10) 100%);
  border: 1.5px solid rgba(0, 122, 255, 0.28);
  color: var(--teal);
  border-radius: 16px;
  padding: 14px 16px;
  letter-spacing: -1px;
  font-weight: 900;
  /* el monto real ya viene como texto en el div, no se rompe */
}
.card-amount-badge::before {
  content: '??';
  font-size: 1.4rem;
  margin-bottom: 2px;
  line-height: 1;
  letter-spacing: 0;
}
.card-amount-badge::after {
  content: 'a cobrar con tarjeta';
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
  color: var(--text-muted);
  margin-top: 2px;
}
body.dark .card-amount-badge {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.18) 0%, rgba(0, 153, 184, 0.18) 100%);
  border-color: rgba(0, 122, 255, 0.45);
}

/* Mini-resumen del pago dividido (paso Tarjeta-dividido) */
.split-summary-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 153, 184, 0.06);
  border: 1px solid rgba(0, 153, 184, 0.18);
  margin-bottom: 0;
}
.split-summary-mini .ssm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.split-summary-mini .ssm-row.ssm-divider {
  height: 1px;
  background: rgba(0, 153, 184, 0.18);
  padding: 0;
  margin: 2px 0;
}
.split-summary-mini .ssm-row.ssm-total {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--teal);
}
body.dark .split-summary-mini {
  background: rgba(0, 153, 184, 0.10);
  border-color: rgba(0, 153, 184, 0.28);
}
.card-amount-badge {
  /* Font-size del monto principal (el texto interno del div); los pseudo
     elementos ::before y ::after de abajo a?aden icono y subt?tulo. */
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1.1;
}

/* legacy: mantener compatibilidad */
.payment-total-amount { display: none; }

/* ?? Breadcrumb de pasos ?? */
.pay-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 20px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pay-breadcrumb::-webkit-scrollbar { display: none; }
.pay-crumb {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  padding: 3px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.pay-crumb:hover { color: var(--text); background: var(--card-active); }
.pay-crumb.active { color: var(--accent); cursor: default; }
.pay-crumb.active:hover { background: transparent; color: var(--accent); }
.pay-crumb-sep { font-size: 0.75rem; color: var(--text-dim); user-select: none; }

/* ?? Bot?n "Ver Cambio ?" en efectivo ?? */
.pay-cash-next {
  background: linear-gradient(135deg, var(--accent), #c0420c) !important;
}
.pay-cash-next:disabled {
  background: var(--card-active) !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
}
.pay-cash-next:not(:disabled):hover {
  box-shadow: 0 8px 28px rgba(255,90,31,0.45) !important;
}

/* ?? Bot?n atr?s especial (volver a la orden) ?? */
.pay-back-btn.pay-back-to-cart {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  width: auto;
  padding: 0 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ?? PASO 3: Cambio ?? */
.pay-change-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: clamp(16px, 3vh, 28px) 20px clamp(12px, 2vh, 20px);
  gap: clamp(10px, 2vh, 18px);
  width: 100%;
}
.pay-change-summary {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pay-cs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}
.pay-cs-row span:first-child { color: var(--text-muted); font-weight: 500; }
.pay-cs-row span:last-child  { color: var(--text); font-weight: 700; }
.pay-change-big-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: -6px;
}
.pay-change-big-amount {
  font-size: clamp(2.6rem, 12vw, 4rem);
  font-weight: 900;
  color: var(--green);
  letter-spacing: -2px;
  line-height: 1;
  text-align: center;
  animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.pay-cash-receipt-status {
  width: 100%;
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.24);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes popIn {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.pay-finish-btn {
  /* width: auto + margin lateral hace que el bot?n quede centrado y NO
     toque los bordes redondeados del modal. align-self: stretch heredado
     de pay-step (display:flex column) hace que respete el margen lateral. */
  width: auto;
  background: linear-gradient(135deg, var(--green), #15803d) !important;
  font-size: clamp(1rem, 3vw, 1.2rem) !important;
  box-shadow: 0 6px 24px rgba(34,197,94,0.35) !important;
  margin: 4px 16px 16px !important;
  border-radius: 14px !important;
  flex-shrink: 0;
  min-height: 56px;
}
.pay-finish-btn:hover {
  box-shadow: 0 8px 32px rgba(34,197,94,0.5) !important;
  transform: translateY(-1px);
}

.cash-input-section {
  padding: 14px 16px 6px;
  flex-shrink: 0;
  text-align: center;
}

.cash-input-section label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  font-weight: 700;
  text-align: center;
}

.cash-display {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 800;
  color: var(--text);
  background: var(--card-active);
  border: 2px solid var(--border-mid);
  border-radius: 14px;
  padding: 12px 18px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.change-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(6px, 1vh, 10px) 20px;
  background: rgba(34,197,94,0.08);
  border-top: 1px solid rgba(34,197,94,0.2);
  border-bottom: 1px solid rgba(34,197,94,0.2);
  animation: fadeIn 0.15s ease;
  flex-shrink: 0;
}

.change-row span:first-child {
  font-size: 0.82rem;
  color: var(--green);
  font-weight: 600;
}

.change-value {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 900;
  color: var(--green);
}

.quick-cash-row {
  display: flex;
  gap: 8px;
  padding: clamp(8px, 1.5vh, 14px) 14px clamp(6px, 1vh, 10px);
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.quick-btn {
  flex: 1;
  min-width: 0;
  background: rgba(34,197,94,0.09);
  border: 2px solid rgba(34,197,94,0.28);
  border-radius: var(--r-lg);
  color: #15803d;
  font-size: clamp(0.85rem, 2.8vw, 1.1rem);
  font-weight: 800;
  padding: clamp(12px, 2.2vh, 18px) 2px;
  text-align: center;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(34,197,94,0.1);
}

.quick-btn:hover {
  background: rgba(34,197,94,0.17);
  border-color: rgba(34,197,94,0.45);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(34,197,94,0.2);
}

.quick-btn:active {
  transform: scale(0.93);
}

.quick-btn.selected {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 4px 18px rgba(22,163,74,0.45);
  transform: translateY(-1px);
}

.quick-btn.quick-btn-disabled,
.quick-btn:disabled {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: rgba(0,0,0,0.25) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  opacity: 0.5;
  pointer-events: none;
}

body.dark .quick-btn.quick-btn-disabled,
body.dark .quick-btn:disabled {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.2) !important;
}

.exact-btn {
  background: rgba(0,212,212,0.08) !important;
  border-color: rgba(0,212,212,0.35) !important;
  color: #0891b2 !important;
  box-shadow: 0 1px 4px rgba(0,212,212,0.1) !important;
}

.exact-btn:hover {
  background: rgba(0,212,212,0.16) !important;
}

.exact-btn.selected {
  background: #0891b2 !important;
  border-color: #0891b2 !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(8,145,178,0.4) !important;
}

body.dark .quick-btn {
  background: rgba(74,222,128,0.1);
  border-color: rgba(74,222,128,0.25);
  color: #4ade80;
}

body.dark .quick-btn:hover {
  background: rgba(74,222,128,0.2);
  border-color: rgba(74,222,128,0.4);
}

body.dark .quick-btn.selected {
  background: #16a34a;
  border-color: #22c55e;
  color: #fff;
  box-shadow: 0 4px 18px rgba(34,197,94,0.5);
}

/* El numpad crece para llenar el espacio que queda */
.payment-numpad {
  flex: 1;
  min-height: 0;
  padding: 4px 16px 8px;
  display: flex;
  flex-direction: column;
}

.payment-numpad.numpad {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  display: grid;
  flex: 1;
  min-height: 0;
  gap: 7px;
}

.confirm-payment-btn {
  width: calc(100% - 28px);
  margin: clamp(4px, 0.8vh, 10px) 14px clamp(8px, 1.5vh, 18px);
  display: block;
  padding: clamp(12px, 2vh, 18px);
  background: linear-gradient(135deg, var(--green), #16a34a);
  color: #fff;
  border-radius: var(--r-lg);
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  font-weight: 800;
  box-shadow: 0 6px 24px rgba(34,197,94,0.3);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.confirm-payment-btn:hover:not(:disabled) {
  box-shadow: 0 8px 32px rgba(34,197,94,0.45);
  transform: translateY(-1px);
}

.confirm-payment-btn:disabled {
  background: var(--card-active);
  color: var(--text-dim);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   PRODUCT FORM MODAL
   ============================================================ */
.form-box {
  width: 500px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.required {
  color: var(--accent);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.price-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.price-symbol {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 1rem;
}

.price-input-wrap input {
  padding-left: 28px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 24px;
}

.product-ai-details-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 107, 0, 0.20);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(255,107,0,0.13), transparent 34%),
    var(--surface);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.paid-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.paid-head strong {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
}

.paid-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.paid-generate-btn {
  flex-shrink: 0;
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  background: linear-gradient(135deg, var(--accent), #ff3d00);
  color: #fff;
  font-weight: 900;
  font-size: 0.86rem;
  box-shadow: 0 8px 18px rgba(255, 107, 0, 0.22);
  cursor: pointer;
}

.product-ai-details-card textarea {
  min-height: 58px;
  resize: vertical;
}

.paid-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.paid-chip {
  border: 1px solid rgba(255, 107, 0, 0.22);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 107, 0, 0.07);
  color: #c2410c;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.paid-chip-strong {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

.paid-status {
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 0.8rem;
  font-weight: 700;
}

.paid-status-ok {
  background: rgba(34, 197, 94, 0.10);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.20);
}

.paid-status-warn {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.product-details-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-active);
}

.pdt-tab {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.pdt-tab.active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.product-details-lang-panel {
  display: none;
}

.product-details-lang-panel.is-active {
  display: grid;
}

.product-details-lang-panel .form-group {
  grid-column: 1 / -1;
}

.product-ai-prompt-modal {
  z-index: 34500;
}

.paip-box {
  width: min(780px, 96vw);
  max-height: calc(100dvh - 28px);
  border-radius: 26px;
  overflow: hidden;
}

.paip-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.paip-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paip-note {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.18);
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.paip-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.paip-textarea {
  width: 100%;
  min-height: 150px;
  border: 1.5px solid var(--border-mid);
  border-radius: 16px;
  padding: 12px;
  background: var(--input-focus);
  color: var(--text);
  font: 600 0.86rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
  outline: none;
}

.paip-textarea:focus {
  border-color: var(--accent);
  background: var(--card);
}

.paip-prompt {
  min-height: 260px;
}

.paip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.image-input-options {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.img-option-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--card-active);
  border: 1.5px solid var(--border-mid);
  color: var(--text-muted);
  transition: all var(--transition);
}

.img-option-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.img-option-btn:hover:not(.active) {
  background: #e2e8f0;
  color: var(--text);
}

.file-upload-zone {
  display: block;
  position: relative;       /* necesario para que el input cubra toda el ?rea */
  border: 2px dashed var(--border-mid);
  border-radius: var(--r-md);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--card-active);
  text-align: center;
  overflow: hidden;         /* recorta el input al borde redondeado */
}

.file-upload-zone:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-dim);
  color: var(--accent);
}
.upload-icon svg { display: block; }
.upload-icon--loaded {
  background: rgba(34,197,94,0.12);
  color: var(--green);
}

.upload-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

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

.file-upload-zone.has-image {
  border-color: var(--green);
  background: rgba(34,197,94,0.06);
}

.url-warning {
  font-size: 0.72rem;
  color: var(--gold);
  margin-top: 6px;
  line-height: 1.4;
}

.image-preview-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--green);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-preview-wrap img {
  max-height: 140px;
  max-width: 100%;
  object-fit: contain;
}

.remove-img-btn {
  background: rgba(239,68,68,0.1);
  color: var(--red);
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 16px;
  width: 100%;
  border-top: 1px solid rgba(239,68,68,0.2);
  transition: background var(--transition);
}

.remove-img-btn:hover {
  background: rgba(239,68,68,0.2);
}

.toggle-group {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-mid);
  border-radius: 14px;
  transition: 0.25s;
  cursor: pointer;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: var(--card);
  border-radius: 50%;
  transition: 0.25s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--green);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(24px);
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}

/* Formulario moderno de producto */
.product-form-box {
  width: min(840px, 96vw);
  max-height: min(92vh, 900px);
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-form-hero {
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 18px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(135deg, #ff5a1f, #f97316 58%, #ef4444);
  color: #fff;
  border-bottom: none;
  flex-shrink: 0;
}
.product-form-hero h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -0.04em;
}
.product-form-hero p {
  margin: 5px 0 0;
  max-width: 560px;
  color: rgba(255,255,255,0.84);
  font-size: 0.88rem;
  line-height: 1.4;
  font-weight: 600;
}
.product-form-hero .close-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.24);
}
.pfh-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  font-size: 1.6rem;
}
.pfh-kicker {
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  font-weight: 900;
}
.product-modern-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 0;
  background: linear-gradient(180deg, rgba(255,107,0,0.04), transparent 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1;
}
.product-modern-form::-webkit-scrollbar { width: 8px; }
.product-modern-form::-webkit-scrollbar-track { background: transparent; }
.product-modern-form::-webkit-scrollbar-thumb {
  background: rgba(255,107,0,0.32);
  border-radius: 999px;
}
.product-form-guide {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.product-form-step-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms, background 140ms, color 140ms, box-shadow 140ms;
}
.product-form-step-btn:not(.active):hover {
  border-color: rgba(255,90,31,0.35);
  color: var(--accent);
  background: var(--accent-dim);
}
.product-form-step-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 12px rgba(255,90,31,0.3);
}
.product-form-step-btn strong {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--border-mid);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  flex-shrink: 0;
  transition: background 140ms, color 140ms;
}
.product-form-step-btn.active strong {
  background: rgba(255,255,255,0.28);
  color: #fff;
}
.product-form-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 -4px;
  padding: 0 2px;
}
.product-form-section-title span {
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.product-form-section-title small {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: right;
}
.product-modern-form > .form-group,
.product-modern-form .form-row,
.product-settings-grid,
.modifier-editor-section {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 10px 28px rgba(15,23,42,0.06);
}
.product-modern-form .form-row {
  align-items: start;
}
.product-modern-form input,
.product-modern-form select,
.product-modern-form textarea {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 800;
}
.product-modern-form textarea {
  resize: vertical;
  min-height: 74px;
  line-height: 1.35;
  font-weight: 650;
}
.product-category-picker {
  position: relative;
}
.product-category-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1.5px solid color-mix(in srgb, var(--cat-color, #ff5a1f) 30%, var(--border-mid));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cat-color, #ff5a1f) 9%, transparent), rgba(20,184,166,0.05)),
    var(--input-bg);
  color: var(--text);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
}
.pc-trigger-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cat-color, #ff5a1f) 16%, var(--card));
}
.pc-trigger-name {
  flex: 1;
  text-align: left;
}
.pc-trigger-chevron {
  color: var(--text-muted);
  font-size: 1rem;
}
.product-category-picker.open .pc-trigger-chevron {
  transform: rotate(180deg);
}
.product-category-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 40;
  padding: 7px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 18px 46px rgba(15,23,42,.20);
  max-height: 250px;
  overflow-y: auto;
}
.product-category-option {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  font-weight: 850;
  cursor: pointer;
}
.product-category-option:hover,
.product-category-option.active {
  background: color-mix(in srgb, var(--cat-color, #ff5a1f) 13%, var(--card));
}
.pco-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--cat-color, #ff5a1f) 16%, var(--card));
}
.pco-name { flex: 1; text-align: left; }
.pco-check {
  color: var(--accent);
  font-weight: 950;
}
.category-select-hint {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
}
.product-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.product-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cat-color) 28%, var(--border));
  background: color-mix(in srgb, var(--cat-color) 10%, var(--card));
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.product-category-chip:hover { transform: translateY(-1px); }
.product-category-chip.active {
  background: var(--cat-color);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cat-color) 35%, transparent);
}
.product-image-section .file-upload-zone {
  min-height: 68px;
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255,107,0,0.06), rgba(20,184,166,0.06));
}
.product-bg-section #ibg-preview-box {
  min-height: 68px;
  border-radius: 18px !important;
}
.product-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.product-toggle-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.toggle-help {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.product-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 4px -22px 0;
  padding: 14px 22px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 24px rgba(15,23,42,0.08);
}
.product-form-actions .btn-primary,
.product-form-actions .btn-secondary {
  min-height: 48px;
  border-radius: 16px;
  font-weight: 950;
}

body.dark .product-modern-form > .form-group,
body.dark .product-modern-form .form-row,
body.dark .product-settings-grid,
body.dark .modifier-editor-section,
body.dark .product-form-step-btn,
body.dark .product-toggle-card {
  background: var(--card);
  border-color: var(--border-mid);
}
body.dark .product-form-guide {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(17, 24, 39, 0.90));
}

@media (max-width: 680px) {
  .product-form-hero { padding: 18px; }
  .product-form-box {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }
  .product-modern-form { padding: 14px; padding-bottom: 0; }
  .product-form-guide,
  .product-settings-grid,
  .form-row { grid-template-columns: 1fr; }
  .product-form-section-title { align-items: flex-start; flex-direction: column; gap: 2px; }
  .product-form-section-title small { text-align: left; }
  .product-form-actions { margin: 4px -14px 0; padding: 12px 14px; }
}

/* ============================================================
   QTY SELECTOR MODAL
   ============================================================ */
.qty-modal-overlay {
  align-items: flex-end !important;
  padding: 0 !important;
}
@media (min-width: 480px) {
  .qty-modal-overlay { align-items: center !important; }
}

.qty-box {
  width: 100%;
  max-width: 440px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  max-height: 100dvh;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: qtyBoxIn 0.26s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes qtyBoxIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
@media (min-width: 480px) {
  .qty-box {
    border-radius: 28px;
    max-height: 92dvh;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  }
}

.qty-close-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card-active);
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.12s ease;
}
.qty-close-btn:hover {
  background: var(--card-hover);
  color: var(--text);
  transform: rotate(90deg);
}

.qty-modal-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 1.6vh, 18px) 20px clamp(8px, 1.4vh, 14px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.qty-img-wrap {
  width: clamp(46px, 6.5vh, 60px);
  height: clamp(46px, 6.5vh, 60px);
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--card-active);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

.qty-img-wrap > div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}

.qty-product-info {
  flex: 1;
  min-width: 0;
}

.qty-product-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.qty-product-price {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Banner de subtotal moderno */
.qty-subtotal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 1.4vh, 12px) 22px;
  background: linear-gradient(135deg, rgba(255,107,0,0.08), rgba(255,61,0,0.04));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.qty-subtotal-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.qty-subtotal-value {
  font-size: clamp(1.15rem, 2.4vh, 1.4rem);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.qty-big-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 24px);
  padding: clamp(10px, 2vh, 22px) 24px clamp(6px, 1.2vh, 12px);
  flex-shrink: 0;
}

.qty-big-btn {
  width: clamp(46px, 7vh, 60px);
  height: clamp(46px, 7vh, 60px);
  border-radius: 50%;
  font-size: clamp(1.4rem, 3vh, 1.9rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  flex-shrink: 0;
}

.qty-big-btn.minus {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border: 2px solid rgba(239,68,68,0.25);
}
.qty-big-btn.minus:hover {
  background: rgba(239,68,68,0.22);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(239,68,68,0.25);
}
.qty-big-btn.minus:active { transform: scale(0.92); }

.qty-big-btn.plus {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 2px solid rgba(34,197,94,0.25);
}
.qty-big-btn.plus:hover {
  background: rgba(34,197,94,0.22);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(34,197,94,0.25);
}
.qty-big-btn.plus:active { transform: scale(0.92); }

/* Secci?n de nota */
.qty-note-section {
  padding: 0 24px clamp(4px, 1vh, 8px);
  flex-shrink: 0;
}
.qty-note-input {
  width: 100%;
  padding: clamp(8px, 1.4vh, 11px) 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 0.88rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--card-active);
  outline: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.qty-note-input::placeholder { color: var(--text-muted); font-style: italic; }
.qty-note-input:focus {
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}

/* Bot?n "C" suave (clear/cancel) en numpad */
.numpad-clear-soft {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--text-muted) !important;
}
.numpad-clear-soft:active {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}

.qty-display-wrap {
  position: relative;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-big-display {
  font-size: clamp(2.4rem, 6vh, 3.8rem);
  font-weight: 900;
  color: var(--text);
  min-width: 100px;
  text-align: center;
  letter-spacing: -2px;
  line-height: 1;
  cursor: pointer;
  border-bottom: 3px solid var(--border-mid);
  padding-bottom: 2px;
  transition: border-color 0.15s ease !important;
}
.qty-big-display:hover { border-color: var(--accent); }
.qty-direct-input {
  display: none;
  font-size: clamp(2.4rem, 6vh, 3.8rem);
  font-weight: 900;
  color: var(--text);
  width: 120px;
  text-align: center;
  letter-spacing: -2px;
  border: none;
  border-bottom: 3px solid var(--accent);
  background: transparent;
  outline: none;
  font-family: inherit;
  padding: 0;
}
.qty-direct-input::-webkit-inner-spin-button,
.qty-direct-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.qty-quick-row {
  display: flex;
  gap: 6px;
  padding: clamp(4px, 0.8vh, 8px) 22px clamp(6px, 1.2vh, 12px);
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.qty-quick-row::-webkit-scrollbar { display: none; }

.qty-quick-btn {
  background: rgba(34,197,94,0.08);
  border: 1.5px solid rgba(34,197,94,0.25);
  color: #15803d;
  border-radius: 50px;
  padding: clamp(5px, 0.9vh, 7px) 14px;
  font-size: 0.82rem;
  font-weight: 800;
  min-width: 44px;
  text-align: center;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.qty-quick-btn:hover {
  background: rgba(34,197,94,0.17);
  border-color: rgba(34,197,94,0.45);
  transform: translateY(-1px);
}

.qty-quick-btn.active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 3px 12px rgba(22,163,74,0.4);
}

.qty-quick-btn:active { transform: scale(0.94); }

body.dark .qty-quick-btn {
  background: rgba(74,222,128,0.1);
  border-color: rgba(74,222,128,0.22);
  color: #4ade80;
}
body.dark .qty-quick-btn.active {
  background: #16a34a;
  border-color: #22c55e;
  color: #fff;
}

.qty-quick-clear {
  background: rgba(239,68,68,0.07) !important;
  border-color: rgba(239,68,68,0.25) !important;
  color: #dc2626 !important;
}
.qty-quick-clear:hover {
  background: rgba(239,68,68,0.16) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

.qty-numpad {
  padding: clamp(2px, 0.6vh, 6px) 22px clamp(6px, 1.2vh, 12px) !important;
  gap: clamp(6px, 1vh, 10px) !important;
  flex-shrink: 0;
}
.qty-numpad .numpad-btn {
  min-height: clamp(40px, 7vh, 62px);
  font-size: clamp(1.05rem, 2.5vh, 1.5rem);
  border-radius: clamp(10px, 1.6vh, 16px);
  padding: 0;
}

.confirm-qty-btn {
  display: block;
  width: calc(100% - 44px);
  margin: clamp(2px, 0.6vh, 6px) 22px clamp(10px, 1.8vh, 22px);
  padding: clamp(13px, 2.1vh, 18px);
  background: #16a34a;
  color: #fff;
  border-radius: 16px;
  font-size: clamp(0.95rem, 2vh, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(22,163,74,0.38), 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-align: center;
  border: none;
  flex-shrink: 0;
}

.confirm-qty-btn:hover {
  background: #15803d;
  box-shadow: 0 8px 24px rgba(22,163,74,0.5);
  transform: translateY(-2px);
}
.confirm-qty-btn:active { transform: scale(0.98); }

.confirm-qty-btn.remove-mode {
  background: #dc2626;
  box-shadow: 0 4px 16px rgba(220,38,38,0.38);
}

.confirm-qty-btn.remove-mode:hover {
  background: #b91c1c;
  box-shadow: 0 8px 24px rgba(220,38,38,0.5);
}

/* Cart qty clickable */
.cart-item-qty {
  cursor: pointer;
  border-radius: var(--r-sm);
  padding: 2px 6px;
  transition: background var(--transition);
}

.cart-item-qty:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Etiqueta "Plato 1", "Plato 2" */
.line-num-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(168,85,247,0.18);
  color: #c084fc;
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: var(--r-xl);
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

/* ============================================================
   CONFIRM DELETE MODAL
   ============================================================ */
.confirm-box {
  width: 340px;
  text-align: center;
  padding: 32px 28px;
}

.confirm-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.confirm-box h2 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.confirm-box p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #ff8c3a);
  color: #fff;
  border-radius: var(--r-md);
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 4px 16px rgba(255,90,31,0.3);
  white-space: nowrap;
}

.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(255,90,31,0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--card-active);
  color: var(--text-muted);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 12px 22px;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
}

.btn-secondary:hover {
  background: #e2e8f0;
  color: var(--text);
}

.btn-danger {
  background: linear-gradient(135deg, var(--red), #dc2626);
  color: #fff;
  border-radius: var(--r-md);
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 4px 16px rgba(239,68,68,0.3);
}

.btn-danger:hover {
  box-shadow: 0 6px 24px rgba(239,68,68,0.45);
}

/* ============================================================
   ADMIN SCREEN
   ============================================================ */
/* ============================================================
   ADMIN HEADER ? moderno con gradiente sutil
   ============================================================ */
.admin-header {
  height: 64px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--card) 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.admin-header h1 {
  font-size: 1.05rem;
  font-weight: 800;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.admin-header h1::before {
  content: none;
}

.admin-header-spacer { width: 130px; }

.kiosk-launch-btn {
  background: linear-gradient(135deg, #ff8c42, #ff3d00);
  border: none; border-radius: 50px; color: #fff;
  font-family: inherit; font-size: 0.82rem; font-weight: 800;
  padding: 9px 18px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255,61,0,0.32);
  transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.12s ease;
  display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.01em;
}
.kiosk-launch-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(255,61,0,0.42);
}
.kiosk-launch-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(255,61,0,0.25);
}

.back-btn {
  background: var(--card-active);
  border: 1.5px solid var(--border-mid);
  color: var(--text-muted);
  border-radius: 50px;
  padding: 9px 18px;
  font-size: 0.84rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.back-btn:hover {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--border-mid);
  transform: translateX(-2px);
}
.back-btn:active { transform: scale(0.97); }

/* ============================================================
   ADMIN TABS ? pill style
   ============================================================ */
.admin-tabs-bar {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  gap: 6px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs-bar::-webkit-scrollbar { display: none; }

.admin-tab {
  padding: 9px 18px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  transition: all 0.16s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.admin-tab:hover {
  color: var(--text);
  background: var(--card-hover);
  border-color: var(--border-mid);
  transform: translateY(-1px);
}

.admin-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #ff3d00);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255,107,0,0.32);
  transform: translateY(-1px);
}

.admin-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--bg-tint, #f0f2f5);
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.admin-content::-webkit-scrollbar { width: 6px; }
.admin-content::-webkit-scrollbar-track { background: transparent; }
.admin-content::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }

/* Admin Toolbar */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.admin-toolbar .search-wrap {
  flex: 1;
  max-width: 400px;
}

.add-product-btn {
  padding: 12px 22px;
  font-size: 0.88rem;
}

/* Admin Products Grid */
/* ?? Admin products: misma grid que el POS ?? */
.admin-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w, 140px), 1fr));
  gap: 12px;
  padding: 4px 2px;
}

.admin-product-card {
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  overflow: visible;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
  cursor: default;
}

.admin-product-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.admin-product-card.unavailable {
  opacity: 0.55;
}

/* Zona de imagen ? misma proporci?n que POS */
.admin-product-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  background: var(--img-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.admin-product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.admin-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

/* Info debajo de la imagen */
.admin-product-details {
  padding: 7px 9px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.admin-product-name {
  font-size: clamp(0.72rem, 1.6vw, 0.88rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-product-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.category-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-xl);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.admin-product-price {
  font-size: clamp(0.82rem, 1.8vw, 1rem);
  font-weight: 800;
  color: var(--accent);
}

.admin-product-status {
  font-size: 0.68rem;
  font-weight: 600;
}
.admin-product-status.available     { color: var(--green); }
.admin-product-status.not-available { color: var(--red); }

/* Botones Editar / Eliminar al pie de la card */
.admin-product-actions {
  display: flex;
  gap: 6px;
  padding: 0 8px 8px;
}
.admin-product-actions .btn-edit,
.admin-product-actions .btn-delete {
  flex: 1;
  padding: 6px 4px;
  font-size: 0.72rem;
  border-radius: 10px;
  text-align: center;
}

/* Handle de arrastre ? peque?o, esquina superior izquierda */
.drag-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(0,0,0,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: grab;
  line-height: 1;
  touch-action: none;
  backdrop-filter: blur(2px);
  transition: background 0.15s;
}
.drag-handle:active { cursor: grabbing; background: rgba(0,0,0,0.38); }

.btn-edit {
  background: rgba(255,183,0,0.12);
  color: var(--gold);
  border: 1.5px solid rgba(255,183,0,0.3);
  border-radius: var(--r-md);
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.btn-edit:hover {
  background: rgba(255,183,0,0.25);
}

.btn-delete {
  background: rgba(239,68,68,0.08);
  color: var(--red);
  border: 1.5px solid rgba(239,68,68,0.2);
  border-radius: var(--r-md);
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.btn-delete:hover {
  background: rgba(239,68,68,0.18);
}

.no-products-msg {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
  font-size: 0.9rem;
}

/* ============================================================
   REPORTS
   ============================================================ */

/* ---- Historial de cierres ---- */
.history-bar {
  padding: 16px 20px 8px;
  border-bottom: 1px solid var(--border);
}

.history-bar-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.history-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.history-strip::-webkit-scrollbar { height: 4px; }
.history-strip::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 4px; }

.history-card {
  flex-shrink: 0;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  min-width: 110px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.history-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(255,90,31,0.15);
  transform: translateY(-2px);
}

.history-card:active { transform: scale(0.97); }

.hc-day {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.hc-date {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
}

.hc-total {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 2px;
}

.hc-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

.report-filters {
  margin-bottom: 20px;
}

.date-filter-group {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}

.date-filter-group .form-group {
  min-width: 140px;
}

.date-filter-group input[type="date"] {
  font-size: 0.88rem;
}

.report-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}

.report-header-card {
  background: linear-gradient(135deg, #fff7f3, #fff);
  border: 1.5px solid rgba(255,90,31,0.2);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.report-header-info h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.report-header-info p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.export-btn {
  background: linear-gradient(135deg, var(--teal), #0097a7);
  color: #fff;
  border-radius: var(--r-md);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 4px 16px rgba(0,212,212,0.2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.export-btn:hover {
  box-shadow: 0 6px 24px rgba(0,212,212,0.35);
  transform: translateY(-1px);
}

.report-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.report-section {
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.report-section-header {
  padding: 12px 20px;
  border-bottom: 2px solid var(--border-mid);
  background: var(--card-active);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.2px;
}

.items-table {
  width: 100%;
}

.items-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  align-items: center;
}

.items-row:last-child { border-bottom: none; }

.items-row.header {
  background: var(--card-active);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.items-row.footer {
  background: rgba(255,90,31,0.06);
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--accent);
  border-top: 2px solid rgba(255,90,31,0.3);
}

.items-row span:nth-child(2),
.items-row span:nth-child(3) {
  text-align: right;
}

/* Negritas para datos de productos en el reporte */
.item-name-bold { font-weight: 700; color: var(--text); }
.item-qty-bold  { font-weight: 800; color: var(--text); text-align: right; }
.item-amt-bold  { font-weight: 800; color: var(--text); text-align: right; }

/* Filas agrupadas del reporte */
.items-row.group-row.has-vars {
  cursor: pointer;
  transition: background 0.15s;
}
.items-row.group-row.has-vars:hover {
  background: rgba(255,90,31,0.07);
}
.grp-count {
  font-size: 0.72rem; font-weight: 600;
  color: var(--accent); opacity: 0.8;
  margin-left: 6px;
  background: rgba(255,90,31,0.1);
  border-radius: 20px; padding: 1px 7px;
}
.grp-arrow {
  font-size: 0.7rem; margin-left: 6px;
  color: var(--accent); vertical-align: middle;
}
.variant-group {
  background: rgba(0,0,0,0.03);
  border-left: 3px solid rgba(255,90,31,0.25);
  margin-left: 12px;
}
.items-row.variant-row {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 5px 12px;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.variant-detail {
  color: var(--text-muted);
  white-space: normal;
  line-height: 1.4;
}
body.dark .variant-group {
  background: rgba(255,255,255,0.02);
}
body.dark .items-row.variant-row {
  border-bottom-color: rgba(255,255,255,0.05);
}

/* Totales de modificadores (ingredientes) */
.mod-total-group {
  padding: 10px 14px 6px;
  border-bottom: 1px solid rgba(255,90,31,0.1);
}
.mod-total-group:last-child { border-bottom: none; }
.mod-total-group-name {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--accent); opacity: 0.7;
  margin-bottom: 6px;
}
.mod-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
}
.mod-total-name {
  font-size: 0.84rem; color: var(--text-muted);
}
.mod-total-qty {
  font-size: 0.9rem; font-weight: 800;
}

.orders-list {
  overflow-x: auto;
}

.order-row {
  display: grid;
  grid-template-columns: 70px 120px 1fr 90px 40px;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  align-items: center;
}

.order-row-print { text-align: center; }

.order-reprint-btn {
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 3px 6px;
  color: var(--text-muted);
  transition: background 0.15s;
}
.order-reprint-btn:hover { background: var(--card-active); }

.order-row:last-child { border-bottom: none; }

.order-row.header {
  background: var(--card-active);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.order-row-num {
  font-weight: 800;
  color: var(--accent);
}

.order-row-time {
  color: var(--text-muted);
}

.order-row-items {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.78rem;
}

.order-row-total {
  font-weight: 800;
  color: var(--text);
  text-align: right;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  white-space: nowrap;
  animation: slideUp 0.2s ease;
}

.toast.success {
  background: var(--green);
  color: #fff;
}

.toast.error {
  background: var(--red);
  color: #fff;
}

/* ============================================================
   ARRANQUE INTELIGENTE
   ============================================================ */
.startup-health-alert {
  position: fixed;
  top: 86px;
  right: 18px;
  z-index: 9998;
  width: min(430px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(245, 158, 11, 0.32);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  animation: slideUp 0.2s ease;
}

.startup-health-error {
  border-color: rgba(239, 68, 68, 0.35);
}

.sha-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff7ed;
  font-size: 1.35rem;
}

.startup-health-error .sha-icon {
  background: #fef2f2;
}

.sha-body {
  min-width: 0;
}

.sha-body strong {
  display: block;
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 4px;
}

.sha-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.sha-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sha-btn {
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 8px 12px;
  cursor: pointer;
}

.sha-btn-primary {
  background: linear-gradient(135deg, var(--accent), #ff3d00);
  color: #fff;
  border-color: transparent;
}

.sha-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: var(--card-active);
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   PRINT BUTTON
   ============================================================ */
.report-btn-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.img-export-btn {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  border-radius: var(--r-md);
  padding: 12px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: box-shadow var(--transition), transform var(--transition);
}

.img-export-btn:hover {
  box-shadow: 0 6px 20px rgba(124,58,237,0.38);
  transform: translateY(-1px);
}

.print-btn {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
  border-radius: var(--r-md);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.print-btn:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  transform: translateY(-1px);
}

/* ============================================================
   GOOGLE DRIVE SETTINGS TAB
   ============================================================ */
.gdrive-setup-card {
  max-width: 640px;
  margin: 28px auto;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-xl);
  padding: 32px 36px;
  box-shadow: var(--shadow);
}

.gdrive-logo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.gdrive-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}

.gdrive-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.gdrive-connected-badge {
  font-size: 0.95rem;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 2px;
}

.gdrive-email-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Pasos de configuraci?n */
.gdrive-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.gdrive-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text);
}

.gdrive-step strong { display: block; font-weight: 700; margin-bottom: 2px; }
.gdrive-step p  { color: var(--text-muted); margin-top: 3px; font-size: 0.82rem; }
.gdrive-step a  { color: #4285f4; text-decoration: underline; }

.step-num {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Bloque de c?digo Apps Script */
.gdrive-code-block {
  background: #1e293b;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 4px;
}

.gdrive-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: #0f172a;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
}

.btn-copy-code {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-copy-code:hover { background: rgba(255,255,255,0.2); }

#script-code-block {
  margin: 0;
  padding: 14px 16px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.77rem;
  line-height: 1.55;
  color: #e2e8f0;
  white-space: pre;
  overflow-x: auto;
}

/* Estado activo */
.gdrive-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(22,163,74,0.08);
  border: 1.5px solid rgba(22,163,74,0.25);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #16a34a;
}

.btn-gdrive-clear {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-gdrive-clear:hover { background: #ef4444; color: #fff; }

/* Bot?n guardar / activar */
.btn-gdrive-connect {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #4285f4;
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 13px 22px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}
.btn-gdrive-connect:hover {
  box-shadow: 0 6px 20px rgba(66,133,244,0.38);
  transform: translateY(-1px);
}

/* ============================================================
   PRINT STYLES ? RECIBO T?RMICO 80mm (Star TSP100III)
   ============================================================ */
#print-receipt {
  display: none;
}

@media print {
  @page {
    size: 80mm auto;
    margin: 2mm 3mm;
  }

  /* Quitar overflow:hidden del body para que la impresora vea el alto real */
  html, body {
    height: auto !important;
    overflow: visible !important;
  }

  /* IMPORTANTE: display:none saca la app del flujo del documento
     (visibility:hidden la ocultaba visualmente pero segu?a ocupando espacio,
      causando que la impresora corriera papel infinitamente) */
  #app {
    display: none !important;
  }

  /* Solo mostrar el recibo ? sin position:fixed para que el
     documento mida exactamente el alto del contenido */
  #print-receipt {
    display: block !important;
    width: 72mm;
    margin: 0;
    padding: 0;
  }

  /* Estructura del recibo */
  .rcpt {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    color: #000;
    background: var(--card);
    line-height: 1.5;
    width: 100%;
  }

  .rcpt-center  { text-align: center; }
  .rcpt-bold    { font-weight: bold; }

  .rcpt-title {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }

  .rcpt-divider {
    border: none;
    border-top: 1px dashed #000;
    margin: 3px 0;
  }

  .rcpt-divider2 {
    border: none;
    border-top: 2px solid #000;
    margin: 3px 0;
  }

  .rcpt-divider-thin {
    border: none;
    border-top: 1px dotted #999;
    margin: 2px 0;
  }

  /* L?neas con dos o tres columnas */
  .rline {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 10.5px;
    gap: 4px;
  }

  .rline span:first-child { flex: 1; }
  .rline span:nth-child(2) { text-align: right; min-width: 30px; }
  .rline span:nth-child(3) { text-align: right; min-width: 48px; }

  .rline-hdr {
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
  }

  .rline-total {
    font-weight: bold;
    font-size: 11px;
  }

  .rline-order span:first-child  { min-width: 30px; flex: 0; }
  .rline-order span:nth-child(2) { flex: 1; text-align: center; font-size: 10px; }
  .rline-order span:nth-child(3) { min-width: 50px; text-align: right; font-weight: bold; }

  .rline-items {
    font-size: 9.5px;
    color: #444;
    padding-left: 6px;
    padding-bottom: 2px;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rline-sub {
    font-size: 9.5px;
    color: #555;
    padding-left: 4px;
  }

  /* Peque?o espacio para el corte autom?tico de la Star TSP100III
     Solo 6mm ? lo suficiente para que el cutter alcance la ?ltima l?nea */
  .rcpt-feed {
    height: 6mm;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --cart-w: 300px;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w, 145px), 1fr));
    grid-auto-rows: auto;
    gap: 10px;
    padding: 12px;
  }

  .brand-text h1 { font-size: 1rem; }
}

@media (max-width: 700px) {
  :root {
    --cart-w: 260px;
    --header-h: 60px;
  }

  .pos-layout {
    flex-direction: column;
  }

  .products-panel {
    height: 60vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .cart-panel {
    width: 100%;
    height: 40vh;
    flex-direction: row;
    overflow: hidden;
  }

  .cart-items {
    flex: 1;
  }

  .cart-footer {
    width: 220px;
    border-top: none;
    border-left: 1px solid var(--border);
  }
}

@media (orientation: portrait) and (min-width: 600px) {
  :root { --cart-w: 280px; }
}

/* ============================================================
   SCROLLBAR (global)
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }

/* ============================================================
   SPECIALS ? product card badge & cart highlight
   ============================================================ */

/* Pulsing glow border ? usando ::after acelerado por GPU para no causar
   repaints en el scroll (antes box-shadow en el card causaba lag). */
.has-special-card {
  position: relative;
}
/* Nota: el ::after para borde y la animaci?n del card se controlan
   en los FINAL OVERRIDES al final del archivo (sp-soft-glow, etc.) */
.has-special-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: none;
  opacity: 0;
  z-index: 1;
}

/* Shimmer sweep ? only over the image area */
@keyframes sp-shimmer {
  0%   { transform: translateX(-120%) skewX(-12deg); }
  60%  { transform: translateX(220%)  skewX(-12deg); }
  100% { transform: translateX(220%)  skewX(-12deg); }
}
.sp-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 3;
}
.sp-shimmer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: sp-shimmer 2.4s ease-in-out infinite;
}

/* Badge "?? Especial" en esquina inferior derecha de la imagen ? peque?ito, discreto */
.sp-corner-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 5px 2px 3px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 1px 4px rgba(220,38,38,.4);
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  animation: sp-corner-pulse 2s ease-in-out infinite;
  text-transform: uppercase;
}
.sp-corner-badge .sp-cb-icon {
  font-size: .58rem;
  line-height: 1;
}
.sp-corner-badge .sp-cb-text { line-height: 1; }

@keyframes sp-corner-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(220,38,38,.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(249,115,22,.6);
  }
}

@media (max-width: 600px) {
  .sp-corner-badge {
    font-size: 0.45rem;
    padding: 2px 4px 2px 3px;
  }
  .sp-corner-badge .sp-cb-icon { font-size: .52rem; }
}

/* Subtle hint line between name and price */
.product-special-hint {
  font-size: 0.7rem;
  font-weight: 800;
  color: #d97706;
  line-height: 1.1;
  margin-bottom: 3px;
  letter-spacing: -.005em;
}

/* Cuando hay especial: nombre (hasta 2 l?neas) + hint + precio.
   Mismo padding/comportamiento que cards normales ? la imagen sigue siendo
   aspect-ratio 1:1 (no se achica). */
.product-card.has-special-card .product-info {
  padding: 10px 10px 14px !important;
  overflow: visible !important;
}
.product-card.has-special-card .product-special-hint {
  margin-bottom: 0;
  line-height: 1.15;
}
.product-card.has-special-card .product-price {
  line-height: 1.2;
}

/* Cart item with discount */
.cart-item.has-special {
  background: linear-gradient(135deg, #fffbeb, #fff7ed);
  border-left: 3px solid #f59e0b !important;
}
.special-disc-tag {
  font-weight: 800;
  color: #b45309;
  margin-left: 6px;
}

/* ============================================================
   SPECIAL FORM MODAL
   ============================================================ */
.sp-modal-box {
  max-width: 920px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.sp-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.sp-modal-icon { font-size: 2.2rem; line-height: 1; }
.sp-modal-title { font-size: 1.15rem; font-weight: 800; }
.sp-modal-sub   { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

.sp-form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-full { grid-column: 1 / -1; }

/* Selector visual: producto → grupos → opciones exactas */
.sp-product-search {
  width: 100%;
  margin: 5px 0 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-mid);
  border-radius: 11px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  box-sizing: border-box;
}
.sp-product-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 205px;
  padding: 3px;
  overflow-y: auto;
}
.sp-product-choice {
  display: grid;
  grid-template-columns: 48px 1fr 22px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1.5px solid var(--border-mid);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sp-product-choice:hover { border-color: #f59e0b; }
.sp-product-choice.is-selected {
  border-color: #f59e0b;
  background: var(--tint-yellow);
  box-shadow: 0 0 0 2px rgba(245,158,11,.12);
}
.sp-product-choice-img {
  display: grid;
  place-items: center;
  width: 46px;
  height: 42px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--surface);
  font-size: 1.35rem;
}
.sp-product-choice-img img { width: 100%; height: 100%; object-fit: contain; }
.sp-product-choice-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.sp-product-choice-copy b { overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.sp-product-choice-copy small { color: var(--text-muted); font-size: .64rem; }
.sp-product-choice > i { color: #d97706; font-size: 1rem; font-style: normal; font-weight: 950; text-align: center; }
#sp-scope-builder {
  padding: 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: 15px;
  background: color-mix(in srgb, var(--card) 88%, #f59e0b 12%);
}
.sp-scope-title { margin-bottom: 9px; font-size: .82rem; font-weight: 900; }
.sp-scope-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sp-scope-mode button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  border: 1.5px solid var(--border-mid);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sp-scope-mode button.is-selected { border-color: #f59e0b; background: var(--tint-yellow); box-shadow: 0 0 0 2px rgba(245,158,11,.12); }
.sp-scope-mode button:disabled { opacity: .45; cursor: not-allowed; }
.sp-scope-mode b { font-size: .78rem; }
.sp-scope-mode small { color: var(--text-muted); font-size: .65rem; }
.sp-scope-instructions {
  margin: 10px 0 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(59,130,246,.10);
  color: #1d4ed8;
  font-size: .68rem;
  font-weight: 700;
}
.sp-scope-group {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.sp-scope-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.sp-scope-group-head strong { font-size: .74rem; }
.sp-scope-group-head small { color: var(--text-muted); font-size: .6rem; }
.sp-scope-options { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-scope-option {
  display: inline-grid;
  grid-template-columns: 27px auto 18px;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1.5px solid var(--border-mid);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.15;
  cursor: pointer;
}
.sp-scope-option.is-selected { border-color: #f59e0b; background: var(--tint-yellow); color: #92400e; }
.sp-scope-option-visual {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface);
}
.sp-scope-option-visual img { width: 100%; height: 100%; object-fit: contain; }
.sp-scope-option-visual span { font-weight: 900; }
.sp-scope-option i { color: #d97706; font-style: normal; font-weight: 950; }
.sp-scope-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--tint-green);
}
.sp-scope-summary.is-specific { background: var(--tint-yellow); }
.sp-scope-summary > span { font-size: 1.1rem; }
.sp-scope-summary div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.sp-scope-summary small { color: var(--text-muted); font-size: .56rem; font-weight: 900; letter-spacing: .06em; }
.sp-scope-summary strong { font-size: .7rem; line-height: 1.3; }
.special-scope-badge {
  display: inline-flex;
  max-width: 100%;
  margin: 2px 0 7px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--tint-green);
  color: var(--tint-green-text);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.3;
}
.special-scope-badge.is-specific { background: var(--tint-yellow); color: var(--tint-yellow-text); }
@media (max-width: 760px) {
  .sp-product-picker { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sp-modal-box { width: 100%; padding: 18px; }
  .sp-product-picker, .sp-scope-mode { grid-template-columns: 1fr; }
}

/* Type selector cards */
.sp-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.sp-type-opt { display: block; cursor: pointer; }
.sp-type-opt input[type="radio"] { display: none; }
.sp-type-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 2px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 12px;
  background: var(--card);
  transition: all var(--transition);
}
.sp-type-opt input:checked + .sp-type-card {
  border-color: var(--tint-yellow-brd);
  background: var(--tint-yellow);
  box-shadow: 0 0 0 1px #f59e0b;
}
.sp-type-icon { font-size: 1.4rem; line-height: 1; }
.sp-type-lbl  { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.sp-type-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }

/* Preview box */
.sp-preview {
  background: var(--card-active);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-top: 16px;
}
.sp-preview:empty { display: none; }
.sp-prev-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.sp-prev-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.88rem;
}
.sp-prev-row:last-child { border-bottom: none; }
.sp-prev-row.special { background: var(--tint-yellow); border-radius: 6px; padding: 7px 8px; }
.sp-prev-price { font-weight: 800; }
.sp-prev-price.fire   { color: #d97706; }
.sp-prev-price.strike { text-decoration: line-through; color: var(--text-muted); }
.sp-prev-limit { margin-top: 10px; display: flex; gap: 6px; }
.sp-prev-tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-xl);
}
.sp-prev-tag.limit    { background: var(--tint-red); color: var(--tint-red-text); }
.sp-prev-tag.no-limit { background: var(--tint-green); color: var(--tint-green-text); }

/* ============================================================
   IMAGE BACKGROUND ? individual selector in form
   ============================================================ */
.img-bg-individual-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.img-bg-presets-mini {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.ibg-preset {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid var(--border-mid);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.ibg-preset:hover { transform: scale(1.12); }

/* ============================================================
   REPORT QUICK BUTTONS
   ============================================================ */
.report-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.rq-btn {
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  color: var(--text-muted);
  border-radius: var(--r-md);
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.rq-btn:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  color: var(--text);
}
.rq-btn.weekend {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(245,158,11,0.35);
}
.rq-btn.weekend:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245,158,11,0.45);
}

/* ============================================================
   ORDERS LIST ? collapsible
   ============================================================ */
.orders-toggle-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orders-toggle-header:hover { opacity: 0.8; }
.orders-toggle-icon {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

/* ============================================================
   DRAG & DROP ? admin products
   ============================================================ */
.admin-product-card.dragging {
  opacity: 0.45;
  box-shadow: 0 0 0 2px var(--primary);
}
.special-badge-mini { font-size: 0.75rem; }

/* ============================================================
   SPECIALS TAB
   ============================================================ */
.special-card {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  overflow: hidden;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.special-card.active {
  border-color: var(--tint-yellow-brd);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}

.special-status-strip {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.special-status-strip.on  { background: linear-gradient(180deg,#f59e0b,#ef4444); color:#fff; }
.special-status-strip.off { background: var(--card-active); color: var(--text-muted); }

.special-card-body {
  flex: 1;
  padding: 14px 16px;
  min-width: 0;
}

.special-name {
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 8px;
}

.special-product-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.special-prod-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--card);
  border: 1px solid var(--border);
}
.special-prod-emoji { font-size: 1.4rem; }
.special-prod-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}

.special-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.special-desc strong { color: var(--text); font-weight: 800; }

.special-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 12px 14px;
  justify-content: center;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  min-width: 110px;
}
.btn-special-toggle {
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: 0.82rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.btn-special-toggle.on  { background: var(--tint-yellow-mid); color: var(--tint-yellow-text); border-color: var(--tint-yellow-brd); }
.btn-special-toggle.off { background: var(--tint-green); color: var(--tint-green-text); border-color: var(--tint-green-brd); }
.btn-special-toggle.on:hover  { background: var(--tint-yellow-mid); }
.btn-special-toggle.off:hover { background: var(--tint-green); }

/* ============================================================
   SPECIALS — PROGRAMACIÓN (schedule por fecha/día/hora)
   ============================================================ */
.sp-sched-section {
  margin-top: 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg);
  background: var(--accent-dim);
}
.sp-sched-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.sp-sched-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
}
.sp-sched-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 3px;
}

/* Toggle switch */
.sp-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.sp-switch input { opacity: 0; width: 0; height: 0; }
.sp-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border-mid);
  border-radius: 999px;
  transition: background var(--transition);
}
.sp-switch-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform var(--transition);
}
.sp-switch input:checked + .sp-switch-slider {
  background: linear-gradient(135deg, var(--accent), #ff3d00);
}
.sp-switch input:checked + .sp-switch-slider::before {
  transform: translateX(20px);
}

.sp-sched-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-sched-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sp-sched-body .form-group { margin: 0; }
.sp-sched-body input[type="date"],
.sp-sched-body input[type="time"] {
  width: 100%;
}

/* Day chips */
.sp-day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.sp-day-chip {
  flex: 1 0 auto;
  min-width: 44px;
  padding: 9px 4px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.sp-day-chip:hover { border-color: var(--accent); color: var(--accent); }
.sp-day-chip.on {
  background: linear-gradient(135deg, var(--accent), #ff3d00);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* Schedule summary on admin cards */
.special-sched {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

/* "Programada pero inactiva ahora" status */
.special-card.scheduled {
  border-color: var(--border-mid);
  box-shadow: 0 0 0 3px rgba(148,163,184,0.12);
}
.special-status-strip.scheduled {
  background: linear-gradient(180deg,#64748b,#475569);
  color: #fff;
}

body.dark .sp-sched-section { background: var(--card-active); border-color: var(--border-mid); }
body.dark .sp-day-chip { background: var(--card); border-color: var(--border-mid); }

/* ============================================================
   DARK MODE ? overrides for hardcoded colors
   ============================================================ */
body.dark input,
body.dark select,
body.dark textarea {
  background: var(--input-bg);
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--border-mid);
}
body.dark select option,
body.dark select optgroup {
  background: var(--card);
  background-color: var(--card);
  color: var(--text);
}
body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  background: var(--input-focus);
  background-color: var(--input-focus);
}
body.dark .admin-product-img-wrap,
body.dark .sp-prod-img {
  background: #0f1117;
  border-color: var(--border-mid);
}
body.dark .product-placeholder {
  opacity: 0.85;
}
/* img-bg is user-controlled, keep as-is in dark mode */
body.dark .admin-placeholder {
  opacity: 0.9;
}
/* Report sections */
body.dark .report-card {
  background: var(--card);
  border-color: var(--border-mid);
}
body.dark .report-section {
  background: var(--card);
}
body.dark .report-section-header {
  background: var(--card-active);
  color: var(--text);
}
body.dark .items-row.header,
body.dark .order-row.header {
  background: var(--card-active);
  color: var(--text-muted);
}
body.dark .items-row.footer {
  background: var(--card-active);
}
/* History cards */
body.dark .history-card {
  background: var(--card);
  border-color: var(--border-mid);
}
body.dark .hc-total { color: var(--accent); }
/* Special card */
body.dark .special-card { background: var(--card); }
body.dark .special-card.active { background: var(--tint-yellow); }
body.dark .sp-modal-box { background: var(--surface); }
body.dark .sp-type-card { background: var(--card); border-color: var(--border-mid); }
body.dark .sp-type-opt input:checked + .sp-type-card { background: var(--tint-yellow); }
body.dark .sp-preview { background: var(--card-active); border-color: var(--border-mid); }
body.dark .sp-prev-row.special { background: var(--tint-yellow); }
/* Modals */
body.dark .modal-box,
body.dark .qty-box {
  background: var(--surface);
  color: var(--text);
}
body.dark .qty-numpad-btn {
  background: var(--card-active);
  color: var(--text);
  border-color: var(--border-mid);
}
body.dark .qty-numpad-btn:hover { background: var(--card-hover); }
body.dark .qty-numpad-btn.zero  { background: var(--card); }
body.dark .qty-numpad-btn.clear { background: rgba(220,38,38,0.15); color: var(--red); }
body.dark .qty-numpad-btn.backspace { background: rgba(245,158,11,0.15); color: var(--gold); }
body.dark .qty-display { background: var(--card-active); color: var(--text); }
/* PIN modal */
body.dark .pin-dot { background: var(--border-mid); }
body.dark .pin-dot.filled { background: var(--accent); }
body.dark .pin-btn { background: var(--card-active); color: var(--text); }
body.dark .pin-btn:hover { background: var(--card-hover); }
/* Payment modal */
body.dark .payment-modal { background: var(--surface); }

/* Comprimir header dentro del payment modal */
/* (payment-box modal-header ya reemplazado por .pay-header) */
body.dark .payment-amount-display { background: var(--card-active); color: var(--text); }
body.dark .payment-numpad-btn { background: var(--card-active); color: var(--text); border-color: var(--border-mid); }
/* Cart */
body.dark .cart-panel { background: var(--surface); border-color: var(--border); }
body.dark .cart-item { border-color: var(--border); }
body.dark .cart-item.has-special { background: var(--tint-yellow); border-color: var(--tint-yellow-brd) !important; }
/* Buttons */
body.dark .btn-secondary { background: var(--card-active); color: var(--text-muted); border-color: var(--border-mid); }
body.dark .btn-secondary:hover { background: var(--card-hover); }
body.dark .rq-btn { background: var(--card); border-color: var(--border-mid); color: var(--text-muted); }
body.dark .rq-btn:hover { background: var(--card-hover); color: var(--text); }
body.dark .admin-btn { background: var(--card-active); border-color: var(--border-mid); color: var(--text-muted); }
body.dark .fullscreen-btn { background: var(--card-active); border-color: var(--border-mid); }
body.dark .category-btn { background: var(--card); border-color: var(--border-mid); color: var(--text-muted); }
/* Dark mode: la categoría activa mantiene fondo oscuro (card oscuro) con
   contorno fino del color de la categoría. El texto debe quedarse BLANCO
   para que siga siendo legible — sobreescribe la regla base que ponía dark. */
body.dark .category-btn.active { color: #ffffff !important; }
body.dark .category-btn.active .cat-name { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
body.dark .pos-cat-rail .category-btn.active { color: #ffffff !important; }
body.dark .pos-cat-rail .category-btn.active .cat-name { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
/* Checkout button unchanged (already accent color) */
/* Admin tabs */
body.dark .admin-tab { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); color: var(--text-muted); }
body.dark .admin-tab:hover { background: rgba(255,255,255,0.1); color: var(--text); }
body.dark .admin-tab.active { color: #fff; background: linear-gradient(135deg, var(--accent), #ff3d00); border-color: transparent; }
/* Product cards */
body.dark .product-card { background: var(--card); border-color: var(--border-mid); }
body.dark .product-card:hover { background: var(--card-hover); }
body.dark .product-info { background: var(--card); }
body.dark .product-name { color: var(--text); }
body.dark .product-price { color: var(--accent); }
/* Search */
body.dark .search-bar { background: var(--surface); border-color: var(--border); }
body.dark .search-input { background: var(--card-active); color: var(--text); }
body.dark .search-input::placeholder { color: var(--text-dim); }
/* Admin products */
body.dark .admin-product-card { background: var(--card); border-color: var(--border-mid); }
body.dark .admin-product-card:hover { border-color: var(--accent); }
body.dark .admin-product-name { color: var(--text); }
/* GDrive card */
body.dark .gdrive-setup-card { background: var(--card); border-color: var(--border-mid); }
body.dark .gdrive-code-block { background: var(--card-active); border-color: var(--border-mid); color: var(--text); }
/* Form */
body.dark .form-group label { color: var(--text-muted); }
body.dark .image-input-options .img-tab { background: var(--card-active); color: var(--text-muted); border-color: var(--border-mid); }
body.dark .img-tab.active { background: var(--card); color: var(--text); }
body.dark .file-upload-zone { background: var(--card-active); border-color: var(--border-mid); }
body.dark .upload-text { color: var(--text); }
body.dark .upload-sub  { color: var(--text-muted); }
body.dark .url-warning { background: var(--tint-yellow); color: var(--tint-yellow-text); }
/* Toast */
body.dark .toast { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
body.dark .startup-health-alert {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-mid);
  box-shadow: var(--shadow);
}
body.dark .sha-icon,
body.dark .startup-health-error .sha-icon {
  background: var(--card-active);
}
body.dark .sha-btn {
  background: var(--card-active);
  color: var(--text);
  border-color: var(--border-mid);
}
body.dark .sha-btn-primary {
  background: linear-gradient(135deg, var(--accent), #ff3d00);
  color: #fff;
  border-color: transparent;
}
/* Confirm modal */
body.dark .confirm-modal { background: var(--surface); }
/* Pos header */
body.dark .pos-header { background: var(--surface); border-color: var(--border); }
body.dark .brand-name  { color: var(--text); }
body.dark .brand-sub   { color: var(--text-muted); }
body.dark .order-status-badge { background: var(--card-active); }
/* Products top bar / card size */
body.dark .card-size-control { background: var(--surface); border-color: var(--border); }
/* Category bar */
body.dark .categories-bar { background: var(--surface); border-color: var(--border); }
/* Admin header */
body.dark .admin-header { background: linear-gradient(135deg, var(--surface), var(--card)); border-color: var(--border); }
body.dark .admin-tabs-bar { background: var(--surface); border-color: var(--border); }
body.dark .admin-toolbar { background: var(--surface); border-color: var(--border); }
/* No-products message */
body.dark .no-products-msg { color: var(--text-muted); }
/* Scrollbar */
body.dark ::-webkit-scrollbar-thumb { background: var(--border-mid); }

/* Transición del lienzo. Los componentes ya declaran sus propias transiciones;
   animar cada nodo globalmente causaba destellos durante los re-renders. */
body {
  transition: background-color 250ms ease, border-color 250ms ease, color 150ms ease !important;
}
/* But don't animate animations themselves */
/* Permitir transici?n de box-shadow para el efecto glow suave */
body.dark .has-special-card,
.has-special-card { transition: box-shadow 0.3s ease !important; }

/* ============================================================
   PAYMENT METHOD SELECTOR
   ============================================================ */
.card-square-hint {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--tint-green);
  border: 1.5px solid var(--tint-green-brd);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.card-square-icon { font-size: 1.8rem; flex-shrink: 0; }
.card-square-hint strong { display: block; font-size: 0.95rem; color: var(--tint-green-text); margin-bottom: 4px; }
.card-square-hint p { font-size: 0.82rem; color: var(--tint-green-text); margin: 0; line-height: 1.4; }
.card-confirm-btn {
  width: 100%;
  margin-top: 0;
  background: var(--teal) !important;
}
.card-confirm-btn:hover { background: #007a95 !important; }

body.dark .pay-method-big-btn { background: var(--card); border-color: var(--border-mid); }
body.dark .pay-method-big-btn:hover { border-color: var(--accent); background: var(--accent-dim); }

/* ============================================================
   SQUARE POS ? CARD STEP UI
   ============================================================ */
/* Status compacto: una sola l?nea con dot pulsante a la izquierda */
.square-launch-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 122, 255, 0.06);
  border: 1px solid rgba(0, 122, 255, 0.22);
  border-radius: 10px;
  padding: 7px 11px;
  margin: 0;
  transition: background 0.25s, border-color 0.25s;
}
.square-launch-status .sls-icon {
  /* lo convertimos en un dot pulsante: ocultamos el emoji original y
     dibujamos un c?rculo con CSS */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #007aff;
  font-size: 0;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.55);
}
.square-launch-status .sls-text { flex: 1; min-width: 0; }
.square-launch-status .sls-text strong {
  display: inline;
  font-size: 0.85rem;
  color: #005dc1;
  font-weight: 700;
}
.square-launch-status .sls-text p {
  display: inline;
  font-size: 0.78rem;
  color: #005dc1;
  margin: 0 0 0 4px;
  line-height: 1.3;
  opacity: 0.85;
}

/* Estado: lanzando ? dot pulsa con halo */
.square-launch-status.sls-launching {
  background: rgba(0, 122, 255, 0.10);
  border-color: rgba(0, 122, 255, 0.40);
}
.square-launch-status.sls-launching .sls-icon {
  animation: sls-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes sls-dot-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.55); }
  50%     { box-shadow: 0 0 0 6px rgba(0, 122, 255, 0); }
}
.square-launch-status.sls-success .sls-icon { background: #1b7c35; }
.square-launch-status.sls-warning .sls-icon { background: #d97706; }

/* Estado: ?xito */
.square-launch-status.sls-success {
  background: rgba(52, 199, 89, 0.10);
  border-color: rgba(52, 199, 89, 0.50);
}
.square-launch-status.sls-success .sls-text strong,
.square-launch-status.sls-success .sls-text p { color: #1b7c35; }

/* Estado: advertencia / error */
.square-launch-status.sls-warning {
  background: rgba(255, 159, 10, 0.10);
  border-color: rgba(255, 159, 10, 0.50);
}
.square-launch-status.sls-warning .sls-text strong,
.square-launch-status.sls-warning .sls-text p { color: #a35a00; }

/* Bot?n grande "Abrir Square con $X.XX" */
/* Bot?n primario: "Abrir Square" ? el monto ya se muestra grande arriba */
.square-launch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #007aff 0%, #0052cc 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 122, 255, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.square-launch-btn .slb-icon { font-size: 1.15rem; line-height: 1; }
.square-launch-btn .slb-label { font-weight: 800; }
/* slb-amount tiene atributo `hidden` por defecto. JS lo sigue actualizando
   pero no se ve ? el monto se muestra en el hero card de arriba. */
.square-launch-btn:hover  { filter: brightness(1.05); }
.square-launch-btn:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0, 122, 255, 0.28); }
.square-launch-btn span   { font-weight: 800; }

/* Hint: "?No abri? Square? ? instala desde App Store" */
.square-install-hint {
  background: rgba(255, 159, 10, 0.08);
  border: 1.5px solid rgba(255, 159, 10, 0.40);
  border-radius: var(--r-md);
  padding: 9px 12px;
  margin-bottom: 4px;
}
.square-install-hint strong { display: block; font-size: 0.88rem; color: #a35a00; margin-bottom: 2px; }
.square-install-hint p      { font-size: 0.75rem; color: #a35a00; margin: 0 0 6px; line-height: 1.35; }
.square-install-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #007aff;
  color: #fff !important;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
}
.square-install-link:hover { filter: brightness(1.06); }

/* Fallback manual: "Ya cobr?, confirmar manualmente" */
/* Secci?n de emergencia (Efectivo / Zelle) ? discreta, en el footer */
.card-manual-fallback {
  border-top: 1px dashed var(--border-mid);
  padding-top: 10px;
  margin-top: 4px;
}
.card-manual-fallback .cmf-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.3;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.emergency-pay-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.emergency-pay-actions button {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 0.88rem;
  padding: 6px 8px;
}
.zelle-confirm-btn {
  background: linear-gradient(135deg, #16a34a, #0f766e) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.24);
}

.zelle-qr-modal {
  z-index: 31000;
}
.zelle-qr-box {
  width: min(390px, 94vw);
  max-height: 92dvh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border-radius: 24px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0,0,0,0.26);
  text-align: center;
}
.zelle-qr-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--card-active);
  color: var(--text);
  font-weight: 900;
}
.zelle-qr-icon {
  font-size: 2rem;
}
.zelle-qr-box h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
}
.zelle-qr-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.35;
}
.zelle-qr-amount {
  width: 100%;
  padding: 12px;
  border-radius: 18px;
  background: rgba(22, 163, 74, 0.10);
  border: 1.5px solid rgba(22, 163, 74, 0.30);
  color: #16a34a;
  font-size: 2rem;
  font-weight: 950;
}
.zelle-qr-canvas-wrap {
  background: #fff;
  padding: 10px;
  border-radius: 18px;
  display: inline-flex;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.zelle-qr-fallback {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  word-break: break-word;
}
.zelle-qr-fallback strong {
  font-size: 0.92rem;
}
.zelle-qr-fallback span {
  color: var(--text-muted);
  font-weight: 800;
}
.zelle-qr-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
  position: sticky;
  bottom: -20px;
  background: var(--surface);
  padding-top: 10px;
}
.zelle-qr-actions button {
  min-height: 50px;
  border-radius: 16px;
  font-weight: 900;
}

@media (max-height: 700px) {
  .zelle-qr-box {
    gap: 8px;
    padding: 14px;
  }
  .zelle-qr-icon,
  .zelle-qr-note {
    display: none;
  }
  .zelle-qr-amount {
    font-size: 1.55rem;
    padding: 9px;
  }
  .zelle-qr-canvas-wrap canvas {
    width: 150px !important;
    height: 150px !important;
  }
}

/* ============================================================
   SQUARE POS ? AJUSTES
   ============================================================ */
.square-status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--tint-neutral, rgba(0,0,0,0.04));
  border: 1.5px solid var(--border-mid);
  font-size: 0.88rem;
  color: var(--text);
}
.square-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(150, 150, 150, 0.18);
}
.square-status-dot.ok  { background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.22); }
.square-status-dot.off { background: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22); }
.square-status-text code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.78rem;
}
.square-help-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent);
  padding: 6px 0;
}
.square-help-steps {
  margin: 8px 0 0;
  padding-left: 22px;
}
.square-help-steps li {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 4px;
}
.square-help-steps code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.78rem;
}
.square-help-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.45;
}
.settings-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* Dark mode adjustments */
body.dark .square-launch-status .sls-text strong,
body.dark .square-launch-status .sls-text p { color: #6db3ff; }
body.dark .square-launch-status.sls-success .sls-text strong,
body.dark .square-launch-status.sls-success .sls-text p { color: #5ed97e; }
body.dark .square-launch-status.sls-warning .sls-text strong,
body.dark .square-launch-status.sls-warning .sls-text p { color: #ffb85c; }
body.dark .square-install-hint strong,
body.dark .square-install-hint p { color: #ffb85c; }
body.dark .square-status-card   { background: rgba(255,255,255,0.04); }

/* ============================================================
   SQUARE CALLBACK SCREEN ? pantalla en Safari post-cobro
   ============================================================ */
#sq-callback-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  z-index: 99999;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
.sqcb-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
.sqcb-ok  { border-top: 6px solid #34c759; }
.sqcb-fail { border-top: 6px solid #ff9f0a; }
.sqcb-icon { font-size: 4rem; margin-bottom: 16px; line-height: 1; }
.sqcb-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #111;
  margin: 0 0 12px;
}
.sqcb-amount {
  font-size: 2.8rem;
  font-weight: 900;
  color: #34c759;
  margin-bottom: 4px;
  letter-spacing: -1px;
}
.sqcb-order {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 16px;
  font-weight: 600;
}
.sqcb-msg {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  margin: 0 0 24px;
}
.sqcb-error-code {
  font-size: 0.78rem;
  background: rgba(255,159,10,0.12);
  color: #a35a00;
  border-radius: 8px;
  padding: 6px 12px;
  display: inline-block;
  margin-bottom: 12px;
  font-weight: 700;
}
.sqcb-instruction {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f0f2f5;
  border-radius: 16px;
  padding: 16px 20px;
  text-align: left;
  margin-bottom: 20px;
}
.sqcb-inst-icon { font-size: 2rem; flex-shrink: 0; }
.sqcb-instruction span { font-size: 0.92rem; color: #333; line-height: 1.4; }
.sqcb-instruction strong { color: #ff5a1f; }
.sqcb-close-hint {
  font-size: 0.75rem;
  color: #bbb;
  margin-top: 8px;
}

/* ============================================================
   REPORT PAYMENT BREAKDOWN
   ============================================================ */
.report-payment-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.report-pay-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1.5px solid;
}
.report-pay-card.cash {
  background: rgba(22,163,74,0.07);
  border-color: rgba(22,163,74,0.3);
}
.report-pay-card.card {
  background: rgba(0,153,184,0.07);
  border-color: rgba(0,153,184,0.3);
}
.report-pay-card.zero  { opacity: 0.5; }
.report-pay-card.split {
  background: rgba(168,85,247,0.07);
  border-color: rgba(168,85,247,0.3);
}
.rpay-icon { font-size: 1.6rem; }
.rpay-amount { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.rpay-label  { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.order-pay-badge {
  display: inline-flex;
  font-size: 0.75rem;
  margin-left: 4px;
}
.order-pay-badge.cash { color: var(--green); }
.order-pay-badge.card { color: var(--teal); }

/* ============================================================
   BACKUP / RESTORE
   ============================================================ */
.backup-section {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.backup-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}
.backup-section p {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.backup-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-backup-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-backup-import {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.backup-import-wrap { position: relative; }
.backup-import-wrap input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ============================================================
   SETTINGS SECTIONS (PIN + Restaurant Name)
   ============================================================ */
.settings-section {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.settings-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.settings-section p {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.cart-special-detail {
  margin-top: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(249, 115, 22, .25);
  border-radius: 9px;
  background: rgba(255, 237, 213, .72);
  color: #9a3412;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.25;
}
body.dark .cart-special-detail {
  background: rgba(154, 52, 18, .20);
  border-color: rgba(251, 146, 60, .32);
  color: #fdba74;
}

.sp-complex-help {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.4;
}
.sp-complex-preview {
  margin: 8px 0 10px;
  padding: 9px 11px;
  border: 1px solid rgba(59, 130, 246, .24);
  border-radius: 10px;
  background: rgba(219, 234, 254, .58);
  color: #1e3a8a;
  font-size: .78rem;
  line-height: 1.4;
}
body.dark .sp-complex-preview {
  background: rgba(30, 58, 138, .22);
  color: #bfdbfe;
}

/* ============================================================
   AJUSTES — REJILLA DE TARJETAS (Negocio) + MODAL ADAPTATIVO
   ============================================================ */
.settings-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 20px;
}
.settings-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  cursor: pointer;
  min-height: 124px;
  font: inherit;
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.settings-card:hover,
.settings-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  outline: none;
}
.settings-card:active { transform: translateY(0); }
.settings-card-icon { font-size: 1.85rem; line-height: 1; }
.settings-card-title { font-size: 0.98rem; font-weight: 800; color: var(--text); }
.settings-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.dark .settings-card { background: var(--card); border-color: var(--border-mid); }
body.dark .settings-card:hover,
body.dark .settings-card:focus-visible { border-color: var(--accent); background: var(--accent-dim); }

/* Modal adaptativo: el ancho se elige por tamaño de contenido (size-*),
   la altura crece hasta 90vh con scroll interno. */
.settings-card-box {
  width: min(560px, 92vw);
  max-width: 94vw;
}
.settings-card-box.size-sm { width: min(440px, 92vw); }
.settings-card-box.size-md { width: min(560px, 92vw); }
.settings-card-box.size-lg { width: min(760px, 92vw); }
.settings-card-box.size-xl { width: min(1100px, 94vw); }
.settings-card-box.size-payment {
  width: min(940px, 96vw);
  height: min(760px, 90dvh);
  max-height: 90dvh;
}
.settings-card-modal-header { padding: 18px 22px 14px; }
.settings-card-modal-header h2 { font-size: 1.1rem; font-weight: 800; }
.settings-card-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-card-back-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
}
.settings-card-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.settings-card-modal-body {
  flex: 1;
  min-height: 0;
  padding: 20px 24px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Las secciones reales heredan el "chrome" del modal: sin doble borde/título. */
.settings-card-modal-body > .settings-section,
.settings-card-modal-body > .backup-section {
  margin: 0 !important;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.settings-card-modal-body > .settings-section > h3:first-child,
.settings-card-modal-body > .backup-section > h3:first-child { display: none; }

@media (max-width: 520px) {
  .settings-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 14px;
  }
  .settings-card { min-height: 108px; padding: 14px 13px; }
  .settings-card-modal-body { padding: 16px 16px 20px; }
}
.settings-field-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.settings-field-row input {
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}
.settings-field-row input:focus { outline: none; border-color: var(--accent); background: var(--input-focus); }

/* ?? Branding (logo + nombre) ?? */
.branding-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 600px) {
  .branding-grid { grid-template-columns: 1fr; gap: 18px; }
}
.branding-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.branding-logo-col { min-width: 180px; }
.branding-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.branding-logo-preview {
  width: 96px; height: 96px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff8a5b 0%, #ff5a1f 50%, #e03e00 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255, 90, 31, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
  position: relative;
  transition: transform 0.2s;
}
.branding-logo-preview:hover { transform: scale(1.04); }
.branding-logo-preview img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.branding-logo-preview .branding-logo-emoji {
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
.branding-logo-preview.has-image {
  background: var(--input-bg);
  border: 1.5px solid var(--border-mid);
}
.branding-logo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-branding-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--accent), #ff8c00);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(255, 90, 31, 0.3);
}
.btn-branding-upload:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 90, 31, 0.4); }
.btn-branding-upload:active { transform: scale(0.97); }
.btn-branding-remove {
  padding: 9px 14px;
  background: transparent;
  border: 1.5px solid var(--border-mid);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.btn-branding-remove:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.06); }
.branding-hint {
  font-size: 0.76rem !important;
  color: var(--text-muted);
  margin: 4px 0 0 !important;
  line-height: 1.5;
  max-width: 320px;
}
.branding-name-col { min-width: 0; }

.branding-theme-card {
  margin-top: 18px;
  padding: 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: 18px;
  background: var(--input-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.theme-switch-buttons {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--card-active);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.theme-switch-buttons button {
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.theme-switch-buttons button.active {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  box-shadow: 0 5px 16px rgba(239,68,68,0.25);
}
@media (max-width: 760px) {
  .branding-theme-card {
    align-items: stretch;
    flex-direction: column;
  }
  .theme-switch-buttons {
    width: 100%;
  }
  .theme-switch-buttons button {
    flex: 1;
  }
}

.branding-bg-card {
  margin-top: 18px;
  padding: 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: 18px;
  background: var(--input-bg);
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 16px;
  align-items: center;
}
.branding-bg-preview {
  min-height: 132px;
  border-radius: 16px;
  border: 1.5px dashed var(--border-mid);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,213,79,0.95), transparent 40%),
    linear-gradient(135deg, #ffd54f, #ff9800);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.branding-bg-preview.has-image {
  border-style: solid;
  border-color: var(--accent);
}
.branding-bg-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: rgba(43,24,16,0.72);
  font-weight: 900;
}
.branding-bg-placeholder span { font-size: 2rem; }
.branding-bg-info { min-width: 0; }
@media (max-width: 760px) {
  .branding-bg-card { grid-template-columns: 1fr; }
  .branding-bg-preview { min-height: 150px; }
}

/* ?? Gesti?n de categor?as ?? */
.cat-manager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  transition: border-color 0.15s;
}
.cat-row:hover { border-color: var(--border-mid); }
.cat-row-emoji {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.cat-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cat-row-name {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  width: 100%;
  padding: 2px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.15s;
}
.cat-row-name:focus {
  border-bottom-color: var(--accent);
}
.cat-row-name[readonly] { opacity: 0.5; cursor: not-allowed; }
.cat-row-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}
.cat-color-picker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  padding: 0;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
  overflow: hidden;
}
.cat-color-picker:disabled { opacity: 0.3; cursor: not-allowed; }
.cat-row-del {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(220,38,38,0.08);
  border: 1.5px solid rgba(220,38,38,0.2);
  color: var(--red);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.cat-row-del:hover:not(:disabled) { background: rgba(220,38,38,0.18); }
.cat-row-del:disabled { opacity: 0.3; cursor: not-allowed; }
.cat-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cat-add-row input[type="text"] {
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
}
.cat-add-row input[type="text"]:focus { outline: none; border-color: var(--accent); }
.cat-color-picker-inline {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  padding: 2px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}

/* ?? Toggle switch de ajustes ?? */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-toggle-label {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
  flex: 1;
}
.pm-vis-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.pm-visibility-section .settings-toggle-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.pm-visibility-section .settings-toggle-row:last-of-type {
  border-bottom: none;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  display: block;
  width: 52px;
  height: 28px;
  background: var(--border-mid);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s;
  position: relative;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--accent);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(24px);
}

.btn-settings-save {
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.pin-change-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.pin-change-grid label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 4px; }
.pin-change-grid input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
  font-family: monospace;
  letter-spacing: 0.2em;
}
.pin-change-grid input:focus { outline: none; border-color: var(--accent); background: var(--input-focus); }

body.dark .backup-section,
body.dark .settings-section { background: var(--card); border-color: var(--border-mid); }
body.dark .settings-field-row input,
body.dark .pin-change-grid input { background: var(--card-active); border-color: var(--border-mid); color: var(--text); }


/* ============================================================
   CART ITEM NOTES
   ============================================================ */
.cart-item-mods {
  font-size: 0.73rem;
  color: var(--teal);
  margin-top: 1px;
  font-weight: 500;
}
.cart-item-mods span { display: inline; }

/* ?? Cart item con modificadores ?? */
.cart-item-mod {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 12px 14px;
}
.cart-item-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cart-item-top-row .cart-item-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}
/* Fila de precio total + bot?n editar */
.cart-item-mod-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 2px;
}
.ci-total-price {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--accent);
}
/* Bot?n editar grande y f?cil de tocar */
.cart-mod-edit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease !important;
  white-space: nowrap;
  min-height: 42px;
}
.cart-mod-edit-btn:hover { background: #e04400; transform: scale(1.02); }
.cart-mod-edit-btn:active { transform: scale(0.96); }

/* Resumen de modificadores ? chips horizontales por grupo */
.ci-mod-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ci-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ci-line-label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 44px;
}
.ci-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ci-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 3px;
  background: var(--card-active);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.ci-mini-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ci-mini-letter {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ci-qty-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent);
  margin-right: 1px;
}

/* ?? Modal confirmar eliminar ?tem ?? */
.remove-item-box {
  width: min(360px, 92vw);
  padding: 32px 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.remove-item-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 4px;
  animation: wobble 0.4s ease;
}
@keyframes wobble {
  0%   { transform: rotate(0deg) scale(0.5); opacity: 0; }
  50%  { transform: rotate(-8deg) scale(1.15); }
  75%  { transform: rotate(5deg) scale(0.95); }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
.remove-item-name {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}
.remove-item-msg {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.remove-item-btns {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}
.remove-item-btns button {
  flex: 1;
  padding: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--r-lg);
  min-height: 48px;
}
.remove-keep-btn {
  background: var(--card-active) !important;
  border: 2px solid var(--border-mid) !important;
  color: var(--text) !important;
}
.remove-keep-btn:hover { background: var(--card) !important; }
.remove-confirm-btn {
  background: linear-gradient(135deg, var(--red), #b91c1c) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(220,38,38,0.35) !important;
}
.remove-confirm-btn:hover { box-shadow: 0 6px 24px rgba(220,38,38,0.5) !important; transform: translateY(-1px); }

/* ?? Modal confirmaci?n propio de la app ?? */
#app-confirm-modal {
  z-index: 37000 !important;
}

#unsaved-changes-modal {
  z-index: 38000 !important;
}

.app-confirm-box {
  width: min(380px, 92vw);
  padding: 28px 24px 22px;
  border-radius: 26px;
  text-align: center;
}

.app-confirm-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(255,90,31,0.12);
  font-size: 1.65rem;
}

.app-confirm-title {
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.app-confirm-message {
  margin: 8px 0 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

.app-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.app-confirm-actions button {
  min-height: 48px;
  border-radius: 16px;
  font-weight: 900;
}

/* ?? Modal detalle ?tem del carrito ?? */
.cart-detail-box {
  width: min(460px, 94vw);
  max-height: min(600px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.cart-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}
.cart-detail-header-info { flex: 1; }
.cart-detail-product-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}
.cart-detail-price-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 900;
}
.cart-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cd-group {}
.cd-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cd-group-opts { display: flex; flex-direction: column; gap: 6px; }
.cd-opt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card-active);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.cd-opt-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.cd-opt-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--card);
  border: 2px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dim);
  flex-shrink: 0;
}
.cd-opt-name {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.cd-opt-qty {
  font-size: 0.75rem;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 5px;
  font-weight: 700;
}
.cd-opt-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.cd-note {
  padding: 10px 12px;
  background: rgba(0,153,184,0.08);
  border: 1px solid rgba(0,153,184,0.2);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--teal);
}
.cart-detail-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-detail-footer button { flex: 1; padding: 12px; font-size: 0.9rem; font-weight: 700; }

.cart-note-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 0.72rem;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}
.cart-note-btn:hover { color: var(--accent); background: var(--accent-dim); }
.cart-note-btn.has-note { color: var(--teal); }
.cart-item-note-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 5px 8px;
  border: 1.5px solid var(--border-mid);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.8rem;
  font-family: inherit;
}
.cart-item-note-input:focus { outline: none; border-color: var(--teal); }
.cart-item-note-display {
  font-size: 0.75rem;
  color: var(--teal);
  font-style: italic;
  margin-top: 2px;
  padding-left: 2px;
}
body.dark .cart-item-note-input { background: var(--card-active); border-color: var(--border-mid); color: var(--text); }

/* ============================================================
   MODIFIER BADGE ON PRODUCT CARDS
   ============================================================ */
.modifier-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.78rem;
  background: rgba(15, 23, 42, .85);
  color: #fff;
  border-radius: 8px;
  padding: 4px 7px;
  backdrop-filter: blur(4px);
  z-index: 3;
  border: 1.5px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.quick-tap-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.85rem;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  border-radius: 999px;
  padding: 0;
  z-index: 3;
  line-height: 1;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(245, 158, 11, .55), 0 0 0 1px rgba(0,0,0,.04);
  text-shadow: 0 1px 2px rgba(180, 83, 9, .5);
}

/* ============================================================
   MODIFIER GROUPS EDITOR (Admin Form)
   ============================================================ */
.modifier-editor-section {
  border-top: none;
  padding-top: 14px;
  margin-top: 0;
}
.modifier-template-panel {
  padding: 12px;
  margin: 0 0 14px;
  border: 1px solid rgba(255,107,0,0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,107,0,0.09), rgba(20,184,166,0.08));
}
.modifier-template-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.modifier-template-head strong {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
}
.modifier-template-head span {
  display: block;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}
.btn-manage-templates {
  border: 1px solid rgba(255,107,0,0.30);
  background: var(--card);
  color: var(--accent);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.modifier-template-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 94px;
  overflow-y: auto;
  padding-right: 3px;
}
.modifier-template-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.modifier-template-chip:hover { transform: translateY(-1px); border-color: var(--accent); }
.modifier-template-chip.active {
  background: linear-gradient(135deg, var(--accent), #ff8a3d);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(255,107,0,0.24);
}
.mtc-name { font-size: 0.84rem; }
.mtc-meta {
  font-size: 0.68rem;
  opacity: 0.75;
  font-weight: 800;
}
.modifier-template-badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(20,184,166,0.14);
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 900;
}
.modifier-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.btn-add-modifier-group {
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.modifier-empty-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 10px 0 4px;
}
.modifier-group-card {
  background: linear-gradient(180deg, var(--surface), var(--card));
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.05);
}
.modifier-group-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.product-mod-group-drag-handle,
.product-mod-option-drag-handle {
  width: 34px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: linear-gradient(180deg, var(--card), var(--input-bg));
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  touch-action: none;
  flex-shrink: 0;
}
.product-mod-group-drag-handle:hover,
.product-mod-option-drag-handle:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 6px 16px rgba(255,90,31,.14);
}
.modifier-group-name-input {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-sm);
  background: var(--input-focus);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
}
.modifier-group-name-input:focus { outline: none; border-color: var(--accent); }
.modifier-group-delete {
  padding: 6px 10px;
  background: var(--tint-red);
  color: var(--red);
  border: none;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 700;
}
.modifier-group-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--input-bg) 78%, transparent);
}
.mod-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
}
.mod-toggle input[type=checkbox] { cursor: pointer; accent-color: var(--accent); }
.modifier-options-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.modifier-option-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.modifier-option-row.list-row-dragging,
.modifier-group-card.list-row-dragging {
  opacity: .45;
  outline: 2px dashed rgba(255,90,31,.36);
}

/* ── Reordenar grupos de modificadores: preview compacto + placeholder ── */
/* Mientras se arrastra un grupo, la tarjeta fuente se colapsa a una barra
   delgada (placeholder) para que solo se vea dónde va a caer, no la "ventanota". */
.modifier-group-card.mod-group-drag-collapsed {
  overflow: hidden;
  opacity: 1;
  outline: none;
  padding: 8px 10px !important;
  border: 2px dashed var(--accent, #ff5a1f);
  background: var(--tint-accent, rgba(255,90,31,.08));
  box-shadow: none;
  transition: background 140ms ease;
}
.modifier-group-card.mod-group-drag-collapsed > * { pointer-events: none; }
.modifier-group-card.mod-group-drag-collapsed .modifier-group-toggles,
.modifier-group-card.mod-group-drag-collapsed .modifier-options-list,
.modifier-group-card.mod-group-drag-collapsed .btn-add-mod-option,
.modifier-group-card.mod-group-drag-collapsed .modifier-group-delete,
.modifier-group-card.mod-group-drag-collapsed .modifier-template-badge {
  display: none !important;
}
.modifier-group-card.mod-group-drag-collapsed .modifier-group-header {
  margin-bottom: 0;
}
.modifier-group-card.mod-group-drag-collapsed .modifier-group-name-input {
  opacity: .7;
}

/* Píldora flotante que sigue al dedo/cursor: solo el nombre del grupo. */
.list-drag-pill {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 26000;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 70vw;
  padding: 9px 15px 9px 11px;
  border-radius: 999px;
  background: var(--accent, #ff5a1f);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: .01em;
  box-shadow: 0 16px 40px rgba(0,0,0,.34), 0 0 0 3px rgba(255,255,255,.18);
  transform: scale(1.04);
  white-space: nowrap;
  will-change: left, top;
}
.list-drag-pill-grip {
  font-size: 1rem;
  line-height: 1;
  opacity: .85;
}
.list-drag-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

/* Evita selección de texto y scroll-touch mientras se arrastra cualquier fila. */
body.is-list-dragging {
  -webkit-user-select: none;
  user-select: none;
  cursor: grabbing;
}
body.is-list-dragging .product-mod-group-drag-handle,
body.is-list-dragging .product-mod-option-drag-handle { cursor: grabbing; }
.modifier-option-name {
  flex: 1;
  padding: 6px 9px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-sm);
  background: var(--input-focus);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}
.modifier-option-name:focus { outline: none; border-color: var(--teal); }
.modifier-option-price-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.modifier-option-price {
  width: 64px;
  padding: 6px 8px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-sm);
  background: var(--input-focus);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  text-align: right;
}
.modifier-option-price:focus { outline: none; border-color: var(--teal); }
.modifier-option-del {
  padding: 5px 8px;
  background: none;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
}
.modifier-option-del:hover { background: var(--tint-red); color: var(--red); border-color: var(--red); }
.btn-add-mod-option {
  padding: 9px 12px;
  background: none;
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  width: 100%;
  margin-top: 2px;
}
.btn-add-mod-option:hover { border-color: var(--accent); color: var(--accent); }

/* Admin numeric keypad */
.admin-number-pad-modal {
  z-index: 36000;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(8px);
}
.admin-number-pad-box {
  width: min(360px, 92vw);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15,23,42,.32);
  padding: 16px;
}
.anp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 950;
}
.anp-head button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card-active);
  color: var(--text-muted);
}
.anp-display {
  min-height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,90,31,.08), rgba(20,184,166,.07));
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 2rem;
  font-weight: 950;
  margin-bottom: 12px;
}
.anp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.anp-grid button {
  min-height: 54px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 950;
  box-shadow: var(--shadow-sm);
}
.anp-grid button.anp-muted {
  font-size: .9rem;
  color: var(--text-muted);
  background: var(--card-active);
}
.anp-grid button.anp-apply {
  grid-column: span 1;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #ff7a2f);
  border-color: transparent;
}

body.dark .modifier-group-card { background: var(--card-active); border-color: var(--border-mid); }
body.dark .modifier-group-name-input,
body.dark .modifier-option-name,
body.dark .modifier-option-price { background: var(--card); border-color: var(--border-mid); color: var(--text); }
body.dark .modifier-template-panel,
body.dark .template-card {
  background: linear-gradient(135deg, rgba(255,107,0,0.12), rgba(20,184,166,0.10));
  border-color: rgba(255,255,255,0.10);
}
body.dark .modifier-template-chip,
body.dark .btn-manage-templates,
body.dark .template-name-input,
body.dark .template-add-row input,
body.dark .template-add-row select,
body.dark .template-card select {
  background: var(--card);
  color: var(--text);
  border-color: var(--border-mid);
}

.modifier-templates-box {
  width: min(760px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.template-add-row {
  display: grid;
  grid-template-columns: 1fr 190px 120px;
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px dashed var(--border-mid);
}
.template-add-row input,
.template-add-row select,
.template-card select,
.template-name-input {
  min-height: 42px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
.modifier-templates-list {
  overflow-y: auto;
  padding-right: 4px;
}
.template-card {
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 10px 28px rgba(15,23,42,0.06);
  transition: transform 140ms ease, border-color 140ms ease;
}
.template-card:hover { border-color: rgba(255,107,0,0.30); transform: translateY(-1px); }
.template-card.list-row-dragging {
  opacity: 0.25;
  transform: scale(0.99);
  border-color: var(--accent);
}
.template-card-head {
  display: grid;
  grid-template-columns: 32px 1fr auto 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.template-name-input {
  font-size: 1rem;
  font-weight: 900;
}
.template-order-btns {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.template-order-btns button,
.template-delete-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 9px;
  font-weight: 900;
  cursor: pointer;
}
.template-order-btns button {
  width: 28px;
  height: 22px;
  font-size: 0.65rem;
}
.template-order-btns button:disabled { opacity: .35; cursor: not-allowed; }
.template-delete-btn {
  width: 36px;
  height: 36px;
}
.template-delete-btn:hover { background: rgba(239,68,68,0.12); color: var(--red); border-color: rgba(239,68,68,0.35); }
.template-card-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.template-card-controls .mod-type-select { min-width: 180px; }
.template-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 9px;
}
.template-option-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  align-items: center;
}
.template-option-row .modifier-option-name { flex: 1 1 auto; min-width: 0; }
.template-option-row .modifier-option-price-wrap { flex: 0 0 92px; }
.template-option-row .modifier-option-del { flex: 0 0 34px; }
.template-option-drag-handle {
  flex: 0 0 28px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-mid, #444);
  background: var(--card-active, rgba(255,255,255,0.03));
  color: var(--text-dim, #888);
  cursor: grab;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  transition: background .15s, color .15s, border-color .15s;
}
.template-option-drag-handle:hover { background: var(--tint-accent, rgba(255,140,0,0.12)); color: var(--accent, #ff8c00); border-color: var(--accent, #ff8c00); }
.template-option-drag-handle:active { cursor: grabbing; }
.template-option-row.list-row-dragging { opacity: .35; }
.template-options { min-height: 8px; }
.modifier-option-type-override {
  flex: 0 0 168px;
  height: 38px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border-mid, #444);
  background: var(--card-active, rgba(255,255,255,0.03));
  color: var(--text-dim, #aaa);
  font-size: 0.9rem;
  cursor: pointer;
}
.modifier-option-type-override.has-override {
  border-color: var(--accent, #ff8c00);
  color: var(--accent, #ff8c00);
  background: var(--tint-accent, rgba(255,140,0,0.08));
  font-weight: 600;
}

/* ============================================================
   MODERN SELECT (custom dropdown for admin)
   ============================================================ */
.modern-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 180px;
  font-family: inherit;
}
.modern-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border, rgba(0,0,0,0.10));
  background: var(--card, #fff);
  color: var(--text, #1a1a1a);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.modern-select-trigger:hover {
  border-color: rgba(255,107,0,0.45);
  box-shadow: 0 6px 18px rgba(255,107,0,0.10);
}
.modern-select.open > .modern-select-trigger {
  border-color: var(--accent, #ff6b00);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.18);
}
.ms-trig-icon {
  flex: 0 0 auto;
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}
.ms-trig-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
}
.ms-trig-chevron {
  flex: 0 0 auto;
  font-size: 1.05rem;
  color: var(--text-muted, #777);
  transition: transform .18s ease;
  transform: translateY(-1px);
}
.modern-select.open .ms-trig-chevron { transform: rotate(180deg) translateY(1px); }

.modern-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 36500;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 16px;
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.10));
  box-shadow: 0 18px 44px rgba(15,23,42,0.18);
  max-height: 320px;
  overflow-y: auto;
  animation: ms-menu-pop 140ms cubic-bezier(.2,.8,.2,1);
}
.modern-select-menu[hidden] { display: none !important; }
@keyframes ms-menu-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modern-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text, #1a1a1a);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.modern-select-option:hover {
  background: rgba(255,107,0,0.10);
  color: var(--accent, #ff6b00);
}
.modern-select-option.active {
  background: linear-gradient(135deg, rgba(255,107,0,0.14), rgba(20,184,166,0.10));
  color: var(--accent, #ff6b00);
  font-weight: 800;
}
.ms-opt-icon {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.ms-opt-label { flex: 1 1 auto; font-size: 0.95rem; }
.ms-opt-check { flex: 0 0 18px; color: var(--accent, #ff6b00); font-weight: 900; }

/* Variants */
.modern-select.mod-type-modern-select { min-width: 210px; max-width: 100%; }
.modern-select.mod-opt-type-modern-select { min-width: 168px; flex: 0 0 168px; }
.modern-select.mod-opt-type-modern-select .modern-select-trigger {
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.88rem;
}
.modern-select.mod-opt-type-modern-select.has-override > .modern-select-trigger {
  border-color: var(--accent, #ff6b00);
  background: rgba(255,107,0,0.08);
  color: var(--accent, #ff6b00);
}
.modern-select.template-add-type-select { width: 100%; min-width: 0; }
.modern-select.template-add-type-select .modern-select-trigger { min-height: 46px; }

/* Dark theme support */
body.dark .modern-select-trigger {
  background: var(--card, #1d1d1d);
  border-color: var(--border-mid, #333);
  color: var(--text, #f1f1f1);
}
body.dark .modern-select-menu {
  background: var(--card, #1d1d1d);
  border-color: var(--border-mid, #333);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
body.dark .modern-select-option { color: var(--text, #f1f1f1); }
body.dark .modern-select-option:hover { background: rgba(255,107,0,0.18); }
body.dark .modern-select-option.active {
  background: linear-gradient(135deg, rgba(255,107,0,0.28), rgba(20,184,166,0.18));
  color: #ffb070;
}

/* ============================================================
   POLISH: Modal Plantillas de Opciones
   ============================================================ */
.modifier-templates-box {
  width: min(820px, 96vw);
  max-height: min(92vh, 920px);
  border-radius: 24px;
  padding: 18px 18px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  box-shadow: 0 30px 80px rgba(15,23,42,0.30);
}
.modifier-templates-box .modal-header-row {
  flex-shrink: 0;
  margin-bottom: 4px;
}
.modifier-templates-box .modal-title { font-size: 1.15rem; font-weight: 900; }
.modifier-templates-box .modal-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
.modifier-templates-box .template-add-row {
  grid-template-columns: 1fr minmax(190px, 220px) auto;
  border-radius: 18px;
  padding: 10px;
}
.modifier-templates-box .template-add-row .btn-primary {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 800;
}
.modifier-templates-box .modifier-templates-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  margin-right: -4px;
}
.modifier-templates-box .template-card {
  border-radius: 18px;
  padding: 12px 14px;
}
.modifier-templates-box .template-card-controls .modern-select { min-width: 200px; }

@media (max-width: 600px) {
  .modifier-templates-box { padding: 12px; border-radius: 18px; }
  .modifier-templates-box .template-add-row { grid-template-columns: 1fr; }
  .modifier-templates-box .template-card-controls .modern-select { width: 100%; min-width: 0; }
  .modern-select.mod-opt-type-modern-select { flex: 1 1 100%; min-width: 0; order: 20; }
}

/* Hide native selects that we replace with modern-select (defensive) */
.template-card-controls > select.mod-type-select,
.modifier-group-toggles > .mod-type-selector > select.mod-type-select { display: none; }

/* Overlay de drag&drop para importar respaldo */
#backup-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
#backup-drop-overlay.show {
  display: flex;
  opacity: 1;
}
#backup-drop-overlay .bdo-card {
  pointer-events: none;
  background: var(--card-bg, #1f2433);
  border: 3px dashed var(--accent, #ff8c00);
  border-radius: 24px;
  padding: 44px 56px;
  text-align: center;
  color: var(--text, #fff);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  max-width: 440px;
}
#backup-drop-overlay .bdo-icon { font-size: 4rem; margin-bottom: 12px; }
#backup-drop-overlay .bdo-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
#backup-drop-overlay .bdo-sub { font-size: 1rem; color: var(--text-dim, #aaa); }

/* Tarjeta destacada del c?digo de 6 d?gitos */
.backup-code-card {
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 2px solid var(--accent, #ff8c00);
  border-radius: 14px;
  background: var(--tint-accent, rgba(255, 140, 0, 0.08));
}
.backup-code-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.bcc-badge {
  background: var(--accent, #ff8c00);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.backup-code-card .bcc-desc { margin: 0 0 12px; color: var(--text-dim, #aaa); font-size: 0.95rem; }
.backup-code-card .backup-btn-row { gap: 10px; }
.backup-code-card .btn-primary { flex: 1 1 auto; min-width: 200px; }

.backup-manual-details {
  margin-top: 14px;
  border: 1px solid var(--border-mid, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 8px 14px;
  background: var(--card-active, rgba(255,255,255,0.02));
}
.backup-manual-details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
  list-style: none;
  color: var(--text-dim, #aaa);
}
.backup-manual-details summary::-webkit-details-marker { display: none; }
.backup-manual-details[open] summary { color: var(--text, #fff); }

/* Modal compartir c?digo */
.share-code-box, .import-code-box {
  width: min(440px, 92vw);
  max-width: 440px;
  /* Espacio interno para que el contenido NO quede pegado a las orillas */
  padding: 20px 22px 22px;
  /* Tarjeta elevada: mismo look que la notificación de inicio
     (.startup-health-alert): borde sutil + sombra suave + esquinas redondeadas */
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}
body.dark .share-code-box, body.dark .import-code-box {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-mid);
  box-shadow: var(--shadow);
}
.share-code-display {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(3px, 1.2vw, 9px);
  margin: 14px 0 14px;
  color: var(--accent, #ff8c00);
  background: var(--card-active, rgba(255,255,255,0.04));
  border: 2px dashed var(--accent, #ff8c00);
  border-radius: 18px;
  padding: 24px 16px;
  user-select: all;
  cursor: text;
}
.share-code-display .scd-digit {
  font-family: 'Menlo', 'SF Mono', monospace;
  /* Códigos de 10 caracteres: tamaño más compacto para que quepan en una línea */
  font-size: clamp(1.15rem, 5.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  min-width: 0.85ch;
  text-align: center;
  flex: 0 0 auto;
}
.share-code-meta {
  margin: 0 4px 16px;
  font-size: 0.92rem;
  color: var(--text-dim, #aaa);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-code-actions, .import-code-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.share-code-actions .btn-primary,
.share-code-actions .btn-secondary,
.import-code-actions .btn-primary,
.import-code-actions .btn-secondary { flex: 1 1 160px; min-width: 140px; }

/* Modal recibir c?digo */
.import-code-input-row { margin: 18px 0 12px; display: flex; justify-content: center; }
#import-code-input {
  width: 100%;
  max-width: 420px;
  font-family: 'Menlo', 'SF Mono', monospace;
  /* Códigos de 10 caracteres: tamaño compacto para que quepan completos */
  font-size: clamp(1.3rem, 4.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 18px;
  background: var(--card-active, rgba(255,255,255,0.04));
  border: 2px solid var(--border-mid, rgba(255,255,255,0.15));
  border-radius: 14px;
  color: var(--text, #fff);
  outline: none;
  transition: border-color .15s;
}
#import-code-input:focus { border-color: var(--accent, #ff8c00); }
.import-code-status { margin: 12px 0 0; text-align: center; font-size: 0.95rem; min-height: 1.2em; color: var(--text-dim, #aaa); }
.import-code-status.err { color: var(--red, #ff5050); }

/* ?? SYNC ? banner de actualizaci?n entrante (siempre arriba) */
.sync-inbox-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99998;
  background: linear-gradient(135deg, #ff8c00, #ff5a1f);
  color: #fff;
  padding: 12px 18px;
  display: none;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(-100%);
  transition: transform .25s ease;
  font-family: inherit;
}
.sync-inbox-banner.show { display: flex; transform: translateY(0); }
.sync-inbox-banner .sib-icon { font-size: 2rem; flex-shrink: 0; }
.sync-inbox-banner .sib-msg { flex: 1 1 auto; min-width: 0; }
.sync-inbox-banner .sib-title { font-weight: 700; font-size: 1.05rem; }
.sync-inbox-banner .sib-sub { font-size: 0.88rem; opacity: 0.92; margin-top: 2px; }
.sync-inbox-banner .sib-apply {
  background: #fff;
  color: #d04400;
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .1s, box-shadow .15s;
}
.sync-inbox-banner .sib-apply:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.sync-inbox-banner .sib-apply:active { transform: translateY(0); }
.sync-inbox-banner .sib-dismiss {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
.sync-inbox-banner .sib-dismiss:hover { background: rgba(255,255,255,0.28); }
@media (max-width: 640px) {
  .sync-inbox-banner { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .sync-inbox-banner .sib-apply { flex: 1 1 100%; }
}

/* Fallback legacy (si no hay order-badge): no se usa en POS actual */
.license-grace-bar { display: none !important; }

/* Tarjeta "esta tableta es" */
.sync-self-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 14px 0 12px;
  background: var(--card-active, rgba(255,255,255,0.04));
  border: 1px solid var(--border-mid, rgba(255,255,255,0.08));
  border-radius: 12px;
}
.sync-self-card .ssc-label { color: var(--text-dim, #aaa); font-size: 0.92rem; }
.sync-self-card .ssc-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 1.1rem; }

/* Lista de tabletas */
.sync-devices-list { display: flex; flex-direction: column; gap: 8px; }
.sync-empty { padding: 18px; text-align: center; color: var(--text-dim, #aaa); background: var(--card-active, rgba(255,255,255,0.03)); border-radius: 12px; }
.sync-device-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--border-mid, rgba(255,255,255,0.08));
  border-radius: 12px;
}
.sync-device-row.is-me {
  border-color: var(--accent, #ff8c00);
  background: var(--tint-accent, rgba(255,140,0,0.06));
}
.sync-device-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sync-device-name { font-weight: 600; font-size: 1.02rem; flex: 1 1 auto; min-width: 0; }
.sync-device-meta { font-size: 0.85rem; color: var(--text-dim, #aaa); flex: 0 0 auto; }
.sync-me-badge {
  font-size: 0.72rem;
  background: var(--accent, #ff8c00);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sync-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.sync-dot.online  { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
.sync-dot.offline { background: #6b7280; }
.sync-device-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.sync-device-actions .btn-primary,
.sync-device-actions .btn-secondary {
  padding: 8px 12px;
  font-size: 0.92rem;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .sync-device-row { flex-wrap: wrap; }
  .sync-device-actions { flex: 1 1 100%; justify-content: flex-end; }
}
@media (max-width: 720px) {
  .modifier-option-type-override { flex: 1 1 100%; order: 20; }
}

/* Builder ? secciones mixtas dentro de un grupo */
.builder-mixed-grid { display: flex; flex-direction: column; gap: 16px; }
.builder-mix-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--border-mid, rgba(255,255,255,0.08));
}
.builder-mix-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-dim, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.builder-mix-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.builder-mix-body.builder-toggle-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-mix-body.builder-qty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.modifier-option-url-btn,
.modifier-option-img-clear {
  flex: 0 0 32px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-mid, #444);
  background: var(--card-active, rgba(255,255,255,0.04));
  color: var(--text-dim, #aaa);
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.modifier-option-url-btn:hover { background: var(--tint-accent, rgba(255,140,0,0.12)); color: var(--accent, #ff8c00); border-color: var(--accent, #ff8c00); }
.modifier-option-img-clear:hover { background: var(--tint-red, rgba(255,80,80,0.12)); color: var(--red, #ff5050); border-color: var(--red, #ff5050); }

@media (max-width: 640px) {
  .modifier-template-head,
  .template-card-controls { flex-direction: column; align-items: stretch; }
  .template-add-row { grid-template-columns: 1fr; }
  .template-card-head { grid-template-columns: 32px 1fr 34px; }
  .template-order-btns { display: none; }
  .template-option-row { flex-wrap: wrap; }
  .template-option-row .modifier-option-name { flex: 1 1 100%; order: 10; }
  .template-option-row .modifier-option-price-wrap { flex: 1 1 auto; order: 11; }
  .template-option-row .modifier-option-del { order: 12; }
}

/* ============================================================
   BUILDER MODAL ? PANTALLA COMPLETA
   ============================================================ */
.builder-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg-tint, #f0f2f5);
}

.builder-fullscreen {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ?? Panel principal (opciones) ?? */
.builder-main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-tint, #f0f2f5);
}

/* ?? Barra de acciones INFERIOR del builder ??
   Atr?s / Hacer otro igual / Siguiente ? Agregar al carrito.
   Vive abajo del panel principal para que el cajero siempre
   tenga las acciones a la mano sin buscar arriba. */
.builder-bottom-bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 18px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
  z-index: 5;
}
.builder-bottom-btn {
  flex: 1;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  letter-spacing: -0.01em;
}
.builder-bottom-btn:active { transform: translateY(1px); }
.builder-bottom-btn:disabled,
.builder-bottom-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.builder-bottom-arrow {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}
.builder-bottom-icon {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

/* Atr?s ? secundario */
.builder-bottom-back {
  flex: 0 0 auto;
  min-width: 130px;
  background: var(--card);
  color: var(--text);
  border-color: var(--border-mid);
}
.builder-bottom-back:hover:not(:disabled) {
  border-color: var(--text);
  background: var(--card-hover);
}

/* Hacer otro igual ? secundario punteado */
.builder-bottom-another {
  flex: 1 1 auto;
  background: rgba(255,140,0,0.06);
  color: var(--accent);
  border: 2px dashed var(--accent);
}
.builder-bottom-another:hover {
  background: rgba(255,140,0,0.14);
  border-style: solid;
}

/* Siguiente / Agregar al carrito ? primario */
.builder-bottom-next {
  flex: 1 1 auto;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(255,90,31,0.30);
}
.builder-bottom-next:hover {
  background: var(--accent-hover, #ea580c);
  border-color: var(--accent-hover, #ea580c);
}
.builder-bottom-next.is-add {
  background: var(--green, #22c55e);
  border-color: var(--green, #22c55e);
  box-shadow: 0 6px 18px rgba(34,197,94,0.32);
}
.builder-bottom-next.is-add:hover {
  background: #14803c;
  border-color: #14803c;
}

/* Quitamos las flechas del topbar ? la navegaci?n vive abajo */
.builder-nav-arrow { display: none !important; }

/* En pantallas chicas, los botones bajan en altura para que el grid
   tenga m?s espacio, pero siguen siendo t?ctiles (?48px). */
@media (max-width: 700px) {
  .builder-bottom-bar { padding: 10px 12px; gap: 8px; }
  .builder-bottom-btn { min-height: 50px; font-size: 0.92rem; }
  .builder-bottom-back { min-width: 96px; }
  .builder-bottom-another .builder-bottom-label { font-size: 0.86rem; }
}

/* Top bar */
.builder-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.builder-topbar-back {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builder-topbar-back:hover { background: var(--tint-red); color: var(--red); border-color: var(--red); }
.builder-topbar-info { flex: 1; min-width: 0; }
.builder-topbar-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder-topbar-step {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Progress bar */
.builder-progress-wrap {
  height: 5px;
  background: var(--border);
  flex-shrink: 0;
}
.builder-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff8c00);
  transition: width 0.35s cubic-bezier(.4,0,.2,1);
  border-radius: 0 3px 3px 0;
}

/* Step title */
.builder-step-title {
  padding: 18px 20px 10px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.builder-step-help {
  margin: -4px 20px 10px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(20,184,166,0.10);
  border: 1px solid rgba(20,184,166,0.22);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  flex-shrink: 0;
}

/* Opciones grid ? tarjetas grandes */
.builder-options-grid {
  display: grid;
  /* Sin "1fr" ? cada columna usa EXACTAMENTE --builder-card-w para que el card
     completo (imagen 4:3 + footer + botones) crezca/encoja al pulsar +/?. */
  grid-template-columns: repeat(auto-fill, var(--builder-card-w, 160px));
  gap: calc(14px * var(--builder-card-scale, 1));
  padding: 4px 20px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  align-content: start;
  justify-content: start;
  overflow-anchor: none;
}

.builder-option-card {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--border-mid);
  border-radius: 18px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease !important;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.builder-option-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,90,31,0.15);
}
.builder-option-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,90,31,0.15), 0 4px 16px rgba(255,90,31,0.2);
}

/* Imagen: proporci?n 4:3, llena la card */
.builder-opt-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--card-active);
  position: relative;
  flex-shrink: 0;
}
.builder-opt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.2s ease !important;
}
/* Fade-in suave al cargar/decodar (evita el "brinco"/pop). El JS añade
   is-loaded en onload y a las que ya estaban en caché. */
.builder-opt-img.is-loaded { opacity: 1; }
.builder-option-card:hover .builder-opt-img { transform: scale(1.04); }
.builder-opt-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--text-dim);
  background: linear-gradient(135deg, var(--card-active), var(--card));
  letter-spacing: -0.02em;
}

/* Footer de la card: nombre + precio */
.builder-opt-footer {
  padding: 10px 12px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.builder-opt-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  flex: 1;
}
.builder-opt-price {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}

/* Checkmark de seleccionado */
.builder-opt-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(255,90,31,0.4);
  animation: pop-in 0.15s cubic-bezier(.4,0,.2,1);
}
@keyframes pop-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Footer de navegaci?n (en m?vil, visible abajo del main panel) */
.builder-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
@media (min-width: 700px) {
  .builder-footer { display: none; }
}

.builder-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.builder-qty-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: all 0.15s ease !important;
}
.builder-qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.builder-qty-display {
  font-size: 1.3rem;
  font-weight: 900;
  min-width: 28px;
  text-align: center;
  color: var(--text);
}
.builder-nav-btns { display: flex; gap: 8px; align-items: center; }
.builder-back-btn { padding: 10px 18px; font-size: 0.9rem; }
.builder-next-btn { padding: 12px 22px; font-size: 0.95rem; font-weight: 700; }
.builder-add-btn  { background: var(--green) !important; }
.builder-add-btn:hover { background: #14803c !important; }

/* ?? FAB Siguiente flotante ?? */
.builder-fab-next {
  position: absolute;
  bottom: 24px;
  right: 24px;
  padding: 16px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 24px rgba(255,90,31,0.4);
  z-index: 10;
  transition: all 0.15s ease !important;
  animation: fab-pop 0.2s cubic-bezier(.4,0,.2,1);
}
.builder-fab-next:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 32px rgba(255,90,31,0.5); }
.builder-fab-add { background: var(--green) !important; box-shadow: 0 6px 24px rgba(34,197,94,0.4) !important; }
@keyframes fab-pop {
  from { transform: scale(0.6) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
/* El main panel necesita position:relative para el FAB */
.builder-main-panel { position: relative; }

/* ?? Bot?n "Hacer otro igual" ?? */
.builder-add-another-btn {
  width: 100%;
  padding: 12px;
  border: 2px dashed var(--border-mid);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease !important;
}
.builder-add-another-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ?? Tipo toggle: pills grandes ?? */
.builder-toggle-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  align-content: start;
}
.builder-toggle-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2.5px solid var(--border-mid);
  border-radius: 16px;
  background: var(--card);
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease !important;
  font-size: inherit;
}
.builder-toggle-pill:hover { border-color: var(--accent); background: var(--accent-dim); }
.builder-toggle-pill.selected { border-color: var(--accent); background: var(--accent-dim); }
.tog-img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
.tog-name { font-size: 0.85rem; font-weight: 700; color: var(--text); text-align: center; }
.tog-price { font-size: 0.75rem; color: var(--accent); font-weight: 700; }
.tog-check {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px; background: var(--accent); color: #fff;
  border-radius: 50%; font-size: 0.7rem; display: flex;
  align-items: center; justify-content: center; font-weight: 900;
}

/* ?? Tipo quantity: tarjetas con stepper ?? */
.builder-qty-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}
.builder-qty-option-card {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--border-mid);
  border-radius: 18px;
  background: var(--card);
  overflow: hidden;
  transition: all 0.15s ease !important;
}
.builder-qty-option-card.selected { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,31,0.12); }
.builder-qty-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;          /* altura fija: evita salto al cambiar entre + Agregar y stepper */
  padding: 0 12px 10px;
  gap: 10px;
  flex-shrink: 0;
}
.builder-qty-stepper.bqs-empty {
  padding: 0 10px 10px;
}
.builder-qty-step-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  background: var(--card-active);
  color: var(--text);
  font-size: 1.3rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s ease !important;
}
.builder-qty-step-btn:hover { border-color: var(--accent); color: var(--accent); }
.builder-qty-step-minus { border-color: rgba(239,68,68,0.3); color: var(--red); }
.builder-qty-step-minus:hover { border-color: var(--red); background: rgba(239,68,68,0.1); color: var(--red); }
.builder-qty-step-count {
  font-size: 1.4rem; font-weight: 900; color: var(--text);
  min-width: 32px; text-align: center;
}
/* Bot?n "+ Agregar" cuando qty es 0 */
.builder-qty-add-btn {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 2px dashed var(--border-mid);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
.builder-qty-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ?? Admin: selector tipo de grupo ?? */
.mod-type-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mod-type-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.mod-type-select {
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
}

/* ?? Flechas de navegaci?n en topbar ?? */
.builder-topbar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.builder-nav-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease !important;
  line-height: 1;
}
.builder-nav-arrow:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.builder-nav-next { background: var(--accent); color: #fff; border-color: var(--accent); font-size: 1.8rem; }
.builder-nav-next:hover { background: #e04400; border-color: #e04400; color: #fff; }
.builder-nav-add     { background: var(--green) !important; border-color: var(--green) !important; font-size: 1.2rem !important; }
.builder-nav-forward { background: var(--surface); border-color: var(--accent); color: var(--accent); }

/* ?? Panel derecho: tarjetas visuales (op-card) ?? */
.op-card {
  margin: 0 12px 10px;
  border-radius: 14px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  background: var(--card);
  transition: all 0.15s ease !important;
}
.op-card.done { border-color: rgba(34,197,94,0.35); cursor: pointer; }
.op-card.done:hover { border-color: var(--green); background: rgba(34,197,94,0.06); }
.op-card.current { border-color: var(--accent); background: rgba(255,90,31,0.07); }
.op-card.pending { opacity: 0.45; }

.op-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.op-card-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.op-optional {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}
.op-card-step-price {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent);
}
.op-card-thumbs {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}
.op-card-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid var(--border-mid);
  flex-shrink: 0;
}
.op-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-active);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dim);
}
.op-card-sel {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.op-card.done .op-card-sel { color: var(--green); }
.op-card-empty {
  font-size: 0.83rem;
  color: var(--text-dim);
  font-style: italic;
}
.op-card.current .op-card-empty { color: var(--accent); font-style: normal; }
.op-card-edit-hint {
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 5px;
  text-align: right;
}

/* ?? Panel derecho: orden ?? */
.builder-order-panel {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow: hidden;
}
@media (max-width: 699px) {
  .builder-order-panel { display: none; }
}

.builder-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.builder-order-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.builder-order-price {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--accent);
}

.builder-order-steps {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.order-step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 0;
  transition: background 0.12s ease !important;
  cursor: default;
}
.order-step-row.done   { cursor: pointer; }
.order-step-row.current { background: var(--accent-dim); }
.order-step-row.done:hover { background: var(--card-active); }

.order-step-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
}
.order-step-row.done    .order-step-icon { background: var(--green); color: #fff; }
.order-step-row.current .order-step-icon { background: var(--accent); color: #fff; font-size: 0.6rem; }
.order-step-row.pending .order-step-icon { background: var(--border); color: var(--text-dim); }

.order-step-info { flex: 1; min-width: 0; }
.order-step-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.order-step-sel {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-step-row.pending .order-step-sel { color: var(--text-dim); font-style: italic; }

.order-step-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border-mid);
}

.builder-order-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.builder-order-footer .builder-qty-row { justify-content: center; }
.builder-order-footer .builder-next-btn { width: 100%; justify-content: center; text-align: center; display: block; }

body.dark .builder-overlay { background: var(--bg); }
body.dark .builder-main-panel { background: var(--bg); }
body.dark .builder-order-panel { background: var(--surface); border-color: var(--border-mid); }
body.dark .builder-option-card { background: var(--card); border-color: var(--border-mid); }
body.dark .builder-option-card.selected { border-color: var(--accent); }
body.dark .builder-qty-btn { background: var(--card); border-color: var(--border-mid); }
body.dark .builder-topbar { background: var(--surface); border-color: var(--border-mid); }
body.dark .order-step-row.current { background: rgba(255,90,31,0.12); }

/* ??????????????????????????????????????????
   PAGO DIVIDIDO
   ?????????????????????????????????????????? */
.pay-method-big-btn.split { border-color: var(--border-mid); }
.pay-method-big-btn.split:hover {
  border-color: #a855f7;
  background: rgba(168,85,247,0.1);
  box-shadow: 0 8px 24px rgba(168,85,247,0.2);
}
.split-remain-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(168,85,247,0.10);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 14px;
  margin: 0 16px 8px;
  font-size: 0.92rem;
  font-weight: 700;
  flex-shrink: 0;
}
.split-remain-val {
  font-size: 1.2rem;
  font-weight: 900;
  color: #a855f7;
}
body.dark .split-remain-row {
  background: rgba(168,85,247,0.14);
  border-color: rgba(168,85,247,0.40);
}

/* ??????????????????????????????????????????
   DESCUENTO EN CARRITO
   ?????????????????????????????????????????? */
.cart-discount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.cart-discount-label {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f59e0b;
}
.cart-discount-amt {
  font-size: 0.9rem;
  font-weight: 800;
  color: #f59e0b;
}
.cart-discount-clear {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.cart-discount-clear:hover { color: var(--accent); }

.cart-action-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.disc-toggle-btn {
  background: rgba(245,158,11,0.1);
  border: 1.5px solid rgba(245,158,11,0.25);
  border-radius: var(--r-md);
  color: #f59e0b;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.disc-toggle-btn:hover {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.5);
}
#checkout-btn {
  flex: 1;
}

/* ??????????????????????????????????????????
   MODAL DE DESCUENTO
   ?????????????????????????????????????????? */
.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.disc-box {
  max-width: 400px;
  width: 90%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.disc-subtotal-row {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}
.disc-subtotal-val {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text);
  margin-left: 6px;
}
.disc-quick-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.disc-quick-btn {
  background: rgba(245,158,11,0.1);
  border: 1.5px solid rgba(245,158,11,0.25);
  border-radius: 50px;
  color: #f59e0b;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.disc-quick-btn:hover {
  background: rgba(245,158,11,0.2);
  border-color: #f59e0b;
  transform: scale(1.04);
}
.disc-custom-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.disc-type-toggle {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.disc-type-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
}
.disc-type-lbl input { accent-color: var(--accent); }
.disc-input {
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  padding: 12px 16px;
  text-align: center;
  width: 100%;
  outline: none;
}
.disc-input:focus { border-color: var(--accent); }
.disc-actions {
  display: flex;
  gap: 10px;
}
.disc-clear-btn {
  background: transparent;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  flex: 1;
  transition: all 0.15s;
}
.disc-clear-btn:hover { border-color: var(--accent); color: var(--accent); }
.disc-apply-btn {
  background: var(--accent);
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 12px 20px;
  cursor: pointer;
  flex: 2;
  transition: opacity 0.15s;
}
.disc-apply-btn:hover { opacity: 0.9; }

/* ??????????????????????????????????????????
   ADMIN: MODO SALIDA (KDS / PRINT)
   ?????????????????????????????????????????? */
.output-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 500px) {
  .output-mode-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.output-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid var(--border-mid);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.output-mode-card input[type="radio"] { display: none; }
.output-mode-card:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255,90,31,0.07);
}
.om-icon { font-size: 1.6rem; }
.om-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text);
}
.om-desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}
.settings-action-btn {
  border-radius: var(--r-md);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.settings-action-btn:hover { opacity: 0.85; }

.munbyn-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 8px;
}
.munbyn-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.munbyn-check-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.update-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 3px 12px rgba(0,122,255,0.35);
}
.update-app-btn:hover  { opacity: 0.88; }
.update-app-btn:active { transform: scale(0.97); }
.update-app-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.app-update-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.app-update-card > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
}
.app-update-card strong {
  display: block;
  color: var(--text);
  font-size: 0.84rem;
  margin-bottom: 4px;
}
.app-update-card span {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.app-update-status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
}
.app-update-checking { background: rgba(0,122,255,0.10); color: #0077ff; }
.app-update-ok { background: rgba(34,197,94,0.12); color: #16a34a; }
.app-update-available { background: rgba(245,158,11,0.12); color: #b45309; }
.app-update-error { background: rgba(239,68,68,0.12); color: #dc2626; }
@media (max-width: 520px) {
  .app-update-card { grid-template-columns: 1fr; }
}

/* ============================================================
   SQUARE TERMINAL ? secci?n de cobro directo
   ============================================================ */

/* Spinner giratorio */
@keyframes terminal-spin {
  to { transform: rotate(360deg); }
}
@keyframes terminal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0.4); }
  50%       { box-shadow: 0 0 0 14px rgba(52,199,89,0); }
}

.terminal-waiting-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 20px 20px;
  background: linear-gradient(135deg, rgba(52,199,89,0.06) 0%, rgba(0,122,255,0.06) 100%);
  border: 2px solid rgba(52,199,89,0.25);
  border-radius: 18px;
  margin-bottom: 16px;
  animation: terminal-pulse 2s infinite;
}

.terminal-spinner-ring {
  width: 54px;
  height: 54px;
  border: 5px solid rgba(52,199,89,0.15);
  border-top-color: #34c759;
  border-radius: 50%;
  animation: terminal-spin 0.9s linear infinite;
  flex-shrink: 0;
}

.terminal-waiting-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a7a32;
  margin: 0;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .terminal-waiting-title { color: #34c759; }
}

.terminal-waiting-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

/* Fase actual de la espera (PENDING / IN_PROGRESS) ? reemplaza el banner
   gen?rico mientras el cobro sigue activo. */
.terminal-wait-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  text-align: center;
}
.twp-icon { font-size: 1.6rem; line-height: 1; }
.twp-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text, #111);
  letter-spacing: 0.2px;
}
.twp-sub {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 280px;
}
body.dark .twp-title { color: #f1f1f1; }

/* Tarjeta de resultado (success / error / canceled).
   IMPORTANTE: NO poner max-height + overflow:auto aqu?. Eso causa scroll
   interno dentro del cuadro rojo de error y corta los botones Reintentar/
   C?digo. El padre (.card-step-content) ya hace scroll si hace falta. */
.terminal-result-wrap {
  margin-bottom: 6px;
  width: 100%;
  border-radius: 18px;
}

.terminal-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 14px;
  border-radius: 16px;
  text-align: center;
}
.terminal-result-card .trc-icon { font-size: 1.6rem; line-height: 1; margin: 0; }
.terminal-result-card strong    { font-size: 0.95rem; font-weight: 800; margin: 0; }
.terminal-result-card p         { font-size: 0.78rem; color: var(--muted); margin: 0 0 4px; line-height: 1.3; }
.terminal-compact-card {
  gap: 6px;
  padding: 12px 14px;
}
.terminal-compact-card .trc-icon { font-size: 1.6rem; }
.terminal-compact-card strong { font-size: 0.95rem; }
.terminal-compact-card > p { font-size: 0.76rem; line-height: 1.3; max-width: 340px; }

.terminal-success-card {
  background: rgba(52,199,89,0.1);
  border: 2px solid rgba(52,199,89,0.4);
}
.terminal-success-card strong { color: #1a7a32; }
@media (prefers-color-scheme: dark) {
  .terminal-success-card strong { color: #34c759; }
}

.terminal-error-card {
  background: rgba(255,59,48,0.08);
  border: 2px solid rgba(255,59,48,0.3);
}
.terminal-error-card strong { color: #c0392b; }

.terminal-canceled-card {
  background: rgba(255,149,0,0.08);
  border: 2px solid rgba(255,149,0,0.3);
}
.terminal-canceled-card strong { color: #a05e00; }
@media (prefers-color-scheme: dark) {
  .terminal-canceled-card strong { color: #ff9500; }
}

/* Bot?n Reintentar */
.retry-terminal-btn {
  margin-top: 10px;
  padding: 10px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.retry-terminal-btn:hover { opacity: 0.85; }
.terminal-emergency-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.terminal-emergency-actions .retry-terminal-btn {
  margin-top: 0;
  min-height: 48px;
  padding: 9px 10px;
  border-radius: 14px;
  font-size: 0.84rem;
}
.terminal-cash-btn {
  background: var(--card-active);
  color: var(--text);
  border: 1px solid var(--border-mid);
}
.terminal-zelle-btn {
  background: linear-gradient(135deg, #16a34a, #0f766e);
}
.terminal-square-app-btn {
  display: block;
  width: 100%;
  margin: 4px 0 2px;
  min-height: 48px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: 1000;
  font-size: 0.95rem;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}
.terminal-square-app-btn:active {
  transform: scale(0.985);
}

/* Confirmaci?n manual de Square: 2 botones grandes (reabrir + s? cobr?) */
.square-manual-confirm {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.square-manual-confirm .smc-head,
.square-manual-confirm .smc-amount { display: none; }

.square-app-picker {
  display: none;
  margin-top: 6px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
}
.square-app-picker .sap-title {
  margin: 0 0 10px;
  font-weight: 1000;
  font-size: 0.86rem;
  color: var(--text);
}
.square-app-picker .sap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.square-app-picker .sap-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  min-height: 56px;
}
.square-app-picker .sap-btn:active {
  transform: scale(0.985);
  border-color: var(--accent);
}
.square-app-picker .sap-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.square-app-picker .sap-name {
  font-size: 0.8rem;
  line-height: 1.15;
}
.square-app-picker .sap-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}
@media (max-width: 480px) {
  .square-app-picker .sap-grid { grid-template-columns: 1fr; }
}
/* Acciones del manual confirm: dos botones uno encima del otro,
   anchos completos, f?ciles de tocar en tableta */
.square-manual-confirm .smc-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.square-manual-confirm .smc-reopen,
.square-manual-confirm .smc-btn {
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 1000;
  font-size: 1rem;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
}
.square-manual-confirm .smc-reopen {
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border-mid);
}
.square-manual-confirm .smc-btn {
  background: linear-gradient(135deg, #16a34a, #0f766e);
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.28);
}
.square-manual-confirm .smc-btn:active {
  transform: scale(0.985);
}
.terminal-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}
.terminal-secondary-actions .retry-terminal-btn {
  margin-top: 0;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  background: var(--card-active);
  color: var(--text);
  border: 1px solid var(--border-mid);
}
.terminal-keep-waiting-btn {
  background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(16,185,129,0.10)) !important;
  color: #047857 !important;
  border-color: rgba(34,197,94,0.45) !important;
  font-weight: 800 !important;
}
.terminal-cancel-hard-btn {
  background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(220,38,38,0.10)) !important;
  color: #b91c1c !important;
  border-color: rgba(239,68,68,0.45) !important;
  font-weight: 800 !important;
}
body.dark .terminal-keep-waiting-btn { color: #6ee7b7 !important; background: rgba(34,197,94,0.18) !important; }
body.dark .terminal-cancel-hard-btn  { color: #fca5a5 !important; background: rgba(239,68,68,0.18) !important; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.terminal-help-details {
  width: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
}
.terminal-help-details summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--text-muted);
  list-style-position: inside;
}
.terminal-help-details .terminal-recovery-note {
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.3;
}

#terminal-section,
#terminal-section-split {
  width: 100%;
}

#terminal-section .card-manual-fallback,
#terminal-section-split .card-manual-fallback {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 -8px 18px rgba(0,0,0,0.04);
}

@media (max-height: 760px) {
  .payment-box {
    max-height: 96dvh;
    width: min(430px, 98vw);
  }
  .pay-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pay-header-total {
    font-size: 1.45rem;
  }
  .pay-breadcrumb {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .terminal-result-card {
    padding: 12px;
  }
  .terminal-compact-card .trc-icon {
    display: none;
  }
  .terminal-waiting-wrap {
    padding: 10px 12px;
    gap: 6px;
    margin-bottom: 8px;
  }
  .terminal-spinner-ring {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }
  .terminal-waiting-sub {
    display: none;
  }
  .terminal-waiting-title {
    font-size: 0.92rem;
  }
  .terminal-result-wrap {
    margin-bottom: 6px;
  }
  .card-step-content {
    gap: 8px;
    padding: 8px 12px;
  }
  .btn-cancel-terminal {
    padding: 8px;
    margin-bottom: 8px;
    font-size: 0.82rem;
  }
  .card-amount-badge {
    padding: 10px 14px;
  }
  .cab-amount {
    font-size: 1.9rem !important;
  }
}

/* Tablet portrait / pantallas entre 760-900px */
@media (max-height: 900px) {
  .terminal-waiting-wrap {
    padding: 16px 16px;
    gap: 10px;
    margin-bottom: 12px;
  }
  .terminal-spinner-ring {
    width: 40px;
    height: 40px;
  }
}

/* Bot?n Cancelar pago */
.btn-cancel-terminal {
  display: block;
  width: 100%;
  padding: 11px;
  margin-bottom: 14px;
  background: transparent;
  border: 2px solid rgba(255,59,48,0.45);
  border-radius: 14px;
  color: #c0392b;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-cancel-terminal:hover {
  background: rgba(255,59,48,0.08);
}

/* ============================================================
   BUILDER MODERNO ? experiencia mas simple para armar orden
   ============================================================ */
.builder-overlay {
  background:
    radial-gradient(circle at 10% 10%, rgba(255,90,31,0.16), transparent 34%),
    radial-gradient(circle at 76% 0%, rgba(255,140,0,0.12), transparent 28%),
    var(--bg);
}

.builder-fullscreen {
  gap: 16px;
  padding: 16px;
}

.builder-main-panel,
.builder-order-panel {
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 22px 70px rgba(0,0,0,0.18);
}

.builder-main-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 180px),
    var(--surface);
}

.builder-topbar {
  padding: 18px 20px 14px;
  background: transparent;
  border-bottom: 0;
}

.builder-topbar-back,
.builder-nav-arrow {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-mid);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

/* Mantener el bot?n "Siguiente" naranja con flecha blanca visible
   (este selector espec?fico vence al gen?rico de arriba) */
.builder-topbar-nav .builder-nav-arrow.builder-nav-next {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  font-size: 1.8rem;
}
.builder-topbar-nav .builder-nav-arrow.builder-nav-next:hover {
  background: #e04400 !important;
  border-color: #e04400 !important;
}
/* Flecha "atr?s" ? asegurar contraste tambi?n */
.builder-topbar-nav .builder-nav-arrow {
  color: var(--text);
}
.builder-topbar-nav .builder-nav-arrow:not(.builder-nav-next):hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.builder-topbar-back {
  font-size: 1.05rem;
}

.builder-topbar-name {
  font-size: 1.22rem;
  letter-spacing: -0.03em;
}

.builder-topbar-step {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.builder-topbar-hint {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.builder-progress-wrap {
  height: 10px;
  margin: 0 20px;
  border-radius: 999px;
  background: var(--card-active);
  overflow: hidden;
}

.builder-progress-bar {
  border-radius: 999px;
  box-shadow: 0 0 18px var(--accent-glow);
}

.builder-step-title {
  padding: 22px 24px 12px;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.builder-options-grid,
.builder-qty-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 18px;
  padding: 8px 24px 28px;
}

.builder-option-card,
.builder-qty-option-card {
  border: 1px solid var(--border-mid);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

.builder-option-card:hover,
.builder-qty-option-card:hover {
  border-color: rgba(255,90,31,0.55);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(255,90,31,0.18);
}

.builder-option-card.selected,
.builder-qty-option-card.selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--card), var(--accent-dim));
  box-shadow:
    0 0 0 4px var(--accent-dim),
    0 18px 42px rgba(255,90,31,0.25);
}

.builder-opt-img-wrap {
  margin: 10px 10px 0;
  width: calc(100% - 20px);
  border-radius: 18px;
  background: #fff;
}

.builder-opt-img {
  object-fit: contain;
  padding: 4px;
}

.builder-opt-footer {
  padding: 14px 16px 16px;
  align-items: center;
}

.builder-opt-name {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.builder-opt-price {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--accent-dim);
  font-size: 0.78rem;
}

.builder-opt-check,
.tog-check {
  background: linear-gradient(135deg, var(--accent), #ff9a3d);
  box-shadow: 0 8px 22px rgba(255,90,31,0.38);
}

.builder-toggle-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
}

.builder-toggle-pill {
  min-height: 118px;
  border: 1px solid var(--border-mid);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

.builder-toggle-pill.selected {
  color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

.builder-qty-stepper {
  padding: 0 14px 14px;
}

.builder-qty-add-btn {
  height: 42px;
  border-style: solid;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
}

.builder-order-panel {
  width: 340px;
  background:
    linear-gradient(180deg, var(--surface), rgba(255,90,31,0.05)),
    var(--surface);
  border-left: 1px solid var(--border);
}

.builder-order-header {
  padding: 24px 22px 18px;
  border-bottom: 0;
}

.builder-order-title,
.builder-order-subtitle {
  display: block;
}

.builder-order-title {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.builder-order-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.builder-order-price {
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--accent-dim);
  font-size: 1.28rem;
}

.builder-order-steps {
  padding: 4px 14px 10px;
}

.op-card {
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
}

.op-card.current {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.op-card.done {
  border-color: rgba(34,197,94,0.38);
}

.op-card.pending {
  opacity: 0.58;
}

.op-card-group-label {
  font-size: 0.75rem;
  font-weight: 900;
}

.op-card-empty {
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--card-active);
  font-style: normal;
}

.op-card.current .op-card-empty {
  background: rgba(255,90,31,0.12);
  font-weight: 800;
}

.op-card-sel {
  font-size: 0.95rem;
  font-weight: 800;
}

.builder-order-footer {
  padding: 16px 20px 20px;
  border-top: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04));
}

.builder-order-footer .builder-next-btn {
  min-height: 54px;
  border-radius: 18px;
  font-size: 1rem;
  box-shadow: 0 14px 30px var(--accent-glow);
}

body.dark .builder-main-panel,
body.dark .builder-order-panel {
  box-shadow: 0 22px 70px rgba(0,0,0,0.45);
}

body.dark .builder-opt-img-wrap {
  background: #fff;
}

@media (max-width: 900px) {
  .builder-fullscreen {
    gap: 10px;
    padding: 10px;
  }

  .builder-order-panel {
    width: 300px;
  }

  .builder-options-grid,
  .builder-qty-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    padding-inline: 16px;
  }
}

@media (max-width: 699px) {
  .builder-fullscreen {
    padding: 0;
  }

  .builder-main-panel {
    border-radius: 0;
    border: 0;
  }

  .builder-topbar-hint {
    display: none;
  }

  .builder-step-title {
    padding-inline: 18px;
    font-size: 1.35rem;
  }
}

/* Ajuste fino: tarjetas parejas y controles sin recorte */
.builder-fullscreen {
  gap: 12px;
  padding: 12px;
}

.builder-main-panel,
.builder-order-panel {
  border-radius: 22px;
}

.builder-topbar {
  padding: 14px 18px 10px;
}

.builder-topbar-back,
.builder-nav-arrow {
  width: 44px;
  height: 44px;
}

.builder-progress-wrap {
  height: 7px;
  margin: 0 18px;
}

.builder-step-title {
  padding: 16px 20px 10px;
  font-size: clamp(1.28rem, 2.2vw, 1.72rem);
  letter-spacing: -0.04em;
}

.builder-options-grid,
.builder-qty-grid {
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)) !important;
  gap: 14px;
  padding: 6px 20px 20px;
}

.builder-option-card,
.builder-qty-option-card {
  height: 178px;
  border-radius: 18px;
  overflow: hidden;
}

.builder-opt-img-wrap {
  height: 86px;
  aspect-ratio: auto;
  margin: 8px 8px 0;
  width: calc(100% - 16px);
  border-radius: 14px;
}

.builder-opt-placeholder {
  font-size: 2rem;
}

.builder-opt-footer {
  min-height: 42px;
  padding: 9px 12px 6px;
  gap: 8px;
}

.builder-opt-name {
  font-size: 0.86rem;
  line-height: 1.15;
}

.builder-opt-price {
  padding: 3px 7px;
  font-size: 0.72rem;
}

.builder-qty-stepper {
  height: 42px;
  padding: 0 10px 10px;
  gap: 8px;
}

.builder-qty-step-btn {
  width: 34px;
  height: 34px;
  font-size: 1.05rem;
}

.builder-qty-step-count {
  font-size: 1.12rem;
  min-width: 24px;
}

.builder-qty-add-btn {
  height: 34px;
  font-size: 0.78rem;
}

.builder-toggle-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
}

.builder-toggle-pill {
  min-height: 96px;
  border-radius: 18px;
  padding: 12px 10px;
}

.builder-order-panel {
  width: 320px;
}

.builder-order-header {
  padding: 20px 18px 12px;
}

.builder-order-steps {
  padding: 2px 12px 8px;
}

.op-card {
  margin-bottom: 10px;
  border-radius: 16px;
  padding: 12px;
}

.op-card-thumbs {
  margin-bottom: 6px;
}

.op-card-thumb {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.op-card-empty {
  padding: 9px 10px;
}

.op-card-sel {
  font-size: 0.88rem;
  line-height: 1.25;
}

.builder-order-footer {
  padding: 14px 16px 16px;
}

.builder-order-footer .builder-next-btn {
  min-height: 48px;
  border-radius: 15px;
}

@media (max-width: 900px) {
  .builder-options-grid,
  .builder-qty-grid {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)) !important;
  }

  .builder-option-card,
  .builder-qty-option-card {
    height: 166px;
  }

  .builder-opt-img-wrap {
    height: 78px;
  }

  .builder-order-panel {
    width: 292px;
  }
}

/* ============================================================
   CAJERO SIMPLE ? orden actual y hold de ?rdenes
   ============================================================ */
.cart-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 180px),
    var(--surface);
  border-left: 1px solid var(--border);
}

.cart-header {
  padding: 16px;
  border-bottom: 0;
}

.cart-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.held-orders-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.35);
  color: #f59e0b;
  font-size: 0.74rem;
  font-weight: 900;
}

.cart-header-btns {
  gap: 8px;
}

.review-order-btn,
.clear-btn {
  min-height: 34px;
  border-radius: 12px;
  font-weight: 900;
}

.held-orders-tray {
  margin: 0 12px 10px;
  padding: 12px;
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(245,158,11,0.13), rgba(255,90,31,0.07)),
    var(--card);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

.held-orders-title {
  margin-bottom: 9px;
  color: #f59e0b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.held-orders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.held-order-card {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.held-order-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(245,158,11,0.24);
  color: var(--text);
  text-align: left;
}

.held-order-main:hover {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.14);
}

.held-order-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 900;
}

.held-order-meta {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.held-order-delete {
  width: 38px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,0.24);
  background: rgba(239,68,68,0.1);
  color: var(--red);
  font-size: 1.05rem;
  font-weight: 900;
}

.held-order-delete:hover {
  background: var(--red);
  color: #fff;
}

.cart-items {
  padding: 0 12px 10px;
}

.empty-cart {
  margin: 8px 0;
  border: 1px dashed var(--border-mid);
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
}

.cart-item {
  border-radius: 18px;
  padding: 13px;
  border-color: var(--border);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), transparent),
    var(--card);
}

.cart-item-name {
  font-size: 0.92rem;
}

.cart-item-subtotal,
.ci-total-price {
  color: var(--text);
}

.cart-qty-pill {
  box-shadow: none;
}

.cart-item-remove {
  width: 28px;
  height: 28px;
}

.cart-footer {
  margin: 0 12px 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,90,31,0.06), transparent),
    var(--card);
  box-shadow: 0 16px 34px rgba(0,0,0,0.12);
}

.cart-total-row {
  align-items: center;
  margin-bottom: 12px;
}

.cart-total-amount {
  font-size: 2.15rem;
}

.cart-action-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
}

.disc-toggle-btn,
.hold-order-btn,
.checkout-btn {
  min-height: 50px;
  border-radius: 16px;
}

.hold-order-btn {
  padding: 0 14px;
  border: 1.5px solid rgba(245,158,11,0.32);
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.hold-order-btn:hover:not(:disabled) {
  background: rgba(245,158,11,0.2);
  border-color: #f59e0b;
}

.hold-order-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.checkout-btn {
  padding: 0 18px;
  font-size: 1rem;
}

body.dark .held-orders-tray,
body.dark .cart-footer {
  box-shadow: 0 16px 34px rgba(0,0,0,0.28);
}

@media (max-width: 1050px) {
  .cart-action-row {
    grid-template-columns: 1fr 1fr;
  }

  #checkout-btn {
    grid-column: 1 / -1;
  }
}

/* Hold compacto: solo ocupa espacio cuando se abre el modal */
.held-orders-open-btn {
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 12px;
  background: rgba(245,158,11,0.14);
  color: #f59e0b;
  font-size: 0.8rem;
  font-weight: 900;
}

.held-orders-open-btn:hover {
  background: rgba(245,158,11,0.22);
}

.hold-name-box,
.held-orders-box,
.incident-box {
  width: min(430px, 92vw);
  padding: 22px;
  border-radius: 24px;
}

.hold-name-input {
  margin-top: 18px;
  min-height: 52px;
  border-radius: 18px;
  font-size: 1rem;
  font-weight: 800;
}

.hold-name-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.hold-name-quick button {
  padding: 9px 12px;
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 999px;
  background: rgba(245,158,11,0.1);
  color: #f59e0b;
  font-size: 0.82rem;
  font-weight: 900;
}

.hold-name-quick button:hover {
  background: rgba(245,158,11,0.18);
  border-color: #f59e0b;
}

.hold-name-save {
  width: 100%;
  min-height: 50px;
  border-radius: 16px;
}

.modal-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.held-orders-box .held-orders-list {
  margin-top: 18px;
  max-height: 50vh;
  overflow-y: auto;
}

.empty-held-orders {
  padding: 28px 14px;
  border: 1px dashed var(--border-mid);
  border-radius: 18px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 700;
}

.incident-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 18px 0 12px;
}

.incident-option {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 13px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  text-align: left;
}

.incident-option span {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--card-active);
  font-size: 1.15rem;
}

.incident-option strong {
  font-size: 0.94rem;
  font-weight: 900;
}

.incident-option small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.incident-option.selected {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.12);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.08);
}

.incident-note {
  min-height: 96px;
  resize: vertical;
  border-radius: 18px;
}

.incident-warning {
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 16px;
  background: rgba(245,158,11,0.1);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

.incident-save-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
}

.incident-btn {
  min-height: 50px;
  padding: 0 14px;
  border: 1.5px solid rgba(245,158,11,0.3);
  border-radius: 16px;
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.incident-btn:hover {
  background: rgba(245,158,11,0.2);
  border-color: #f59e0b;
}

/* Refresh visual visible del POS ? modo claro */
#pos-screen {
  background: var(--bg);
}

.pos-header {
  margin: 10px 12px 0;
  width: calc(100% - 24px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.pos-layout {
  gap: 12px;
  padding: 12px;
}

.products-panel {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  overflow: hidden;
}

/* Modo oscuro: restaurar los fondos oscuros con el look premium */
body.dark #pos-screen {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,90,31,0.14), transparent 28%),
    radial-gradient(circle at 70% 4%, rgba(34,211,238,0.09), transparent 26%),
    var(--bg);
}
body.dark .pos-header {
  background: rgba(26,29,39,0.84);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 42px rgba(0,0,0,0.16);
}
body.dark .products-panel {
  background: rgba(15,17,23,0.58);
}

.products-top-bar {
  padding: 10px 12px;
  border-bottom: 0;
  background: var(--surface);
  height: auto;
  position: relative;
}
/* Si la zona del centro (Productos) tiene fondo personalizado del Studio,
   la barra de búsqueda usa un fondo sólido del propio tema para que no
   se vea translúcida ni se confunda con la imagen de fondo. */
body.studio-themed:not(.dark) .products-top-bar {
  background: var(--studio-card, var(--card, #ffffff)) !important;
}
body.studio-themed.dark .products-top-bar {
  background: var(--surface) !important;
}
/* Sombra/fade muy sutil bajo la barra de búsqueda para suavizar la
   transición con las tarjetas. Reducido para no invadir productos. */
.products-top-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(
    to bottom,
    var(--surface) 0%,
    transparent 100%
  );
}
body.studio-themed:not(.dark) .products-top-bar::after {
  background: linear-gradient(
    to bottom,
    var(--studio-card, var(--card, #fff)) 0%,
    transparent 100%
  );
}
/* En modo oscuro, el fade usa el color real del panel oscuro para que se
   integre y no aparezca una banda clara invasiva sobre las tarjetas. */
body.dark .products-top-bar::after {
  background: linear-gradient(
    to bottom,
    rgba(26,29,39,0.95) 0%,
    transparent 100%
  );
}

.search-wrap input {
  border-radius: 18px;
  min-height: 44px;
}

.categories-bar {
  padding: 8px 12px 12px;
  gap: 10px;
}

.category-btn {
  min-height: 44px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w, 154px), 1fr));
  grid-auto-rows: auto;
  gap: 12px;
  padding: 10px 12px 14px;
}

.product-card {
  border-width: 1px;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}

.product-card:hover {
  transform: translateY(-3px);
}

.product-img-wrap {
  /* Mantener aspect-ratio del CSS principal ? no forzar margin ni flex */
  margin: 0;
  width: 100%;
}

.product-info {
  padding: 10px 12px 14px;
  border-top: 0;
}

.product-name {
  font-size: 0.78rem;
  font-weight: 900;
}

.product-price {
  margin-top: 3px;
  font-size: 0.84rem;
}

.cart-panel {
  border-radius: 24px;
  border: 1px solid var(--border);
}

.cart-action-row {
  grid-template-columns: auto auto 1fr;
}

body.dark .pos-header {
  background: rgba(26,29,39,0.86);
}

@media (max-width: 1050px) {
  .cart-action-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   POS COMPACTO ? menos iconos, mas espacio para productos
   ============================================================ */
.theme-btn,
.fullscreen-btn,
.card-size-control {
  display: none !important;
}

.pos-header {
  height: 58px;
  min-height: 58px;
  margin: 8px 10px 0;
  width: calc(100% - 20px);
  padding: 0 14px;
  border-radius: 18px;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 20px;
}

.brand-text h1 {
  font-size: 1rem;
}

.brand-text p {
  margin-top: 2px;
  font-size: 0.66rem;
}

.order-badge {
  --ob-w: 88px;
  --ob-w-grace: min(360px, 40vw);
  padding: 6px 14px 5px;
  width: var(--ob-w);
  height: 42px;
  border-radius: 999px;
}
.order-badge.is-grace {
  padding: 0 8px 0 12px;
  width: var(--ob-w-grace);
  height: 46px;
}

.order-label {
  font-size: 0.52rem;
  letter-spacing: 1.4px;
}

.order-num {
  font-size: 1.16rem;
}

.header-actions {
  gap: 7px;
}

.queue-header-btn {
  min-width: 42px;
  height: 38px;
  padding: 0 10px;
  border-radius: 13px;
  gap: 5px;
}

.queue-header-btn .queue-badge-dot {
  min-width: 19px;
  height: 19px;
  font-size: 0.68rem;
}

.admin-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 13px;
  font-size: 0.86rem;
}

.pos-layout {
  gap: 10px;
  padding: 10px;
}

.products-panel,
.cart-panel {
  border-radius: 20px;
}

.products-top-bar {
  padding: 8px 10px 6px;
  gap: 0;
}

.products-top-bar .search-wrap {
  width: 100%;
}

.search-wrap input {
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 0.88rem;
}

.categories-bar {
  padding: 7px 10px 8px;
  gap: 8px;
}

.category-btn {
  min-height: 40px;
  padding: 6px 13px 6px 8px;
}

.category-btn .cat-icon {
  width: 27px;
  height: 27px;
}

.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w, 142px), 1fr));
  grid-auto-rows: auto;
  gap: 10px;
  padding: 9px 10px 12px;
}

.product-img-wrap {
  margin: 0;
  width: 100%;
}

.product-info {
  padding: 9px 10px 13px;
}

.product-card {
  border-radius: 18px;
}

.cart-header {
  padding: 13px 14px 10px;
}

.cart-items {
  padding: 0 10px 8px;
}

.cart-footer {
  margin: 0 10px 10px;
}

/* Herramientas agrupadas: no se pierden, no ocupan barra principal */
.tools-btn {
  width: 38px;
  height: 34px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card-active);
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 900;
}
.tools-btn:hover {
  background: var(--card-hover);
  color: var(--text);
}

.tools-box {
  width: min(420px, 92vw);
  padding: 22px;
  border-radius: 24px;
}
.tools-box.tools-box-modern {
  width: min(560px, 94vw);
  max-height: 92dvh;
  overflow-y: auto;
  padding: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(255,90,31,.08), transparent 32%),
    var(--surface);
}
.tools-modern-header {
  align-items: center;
  padding-bottom: 4px;
}
.tools-header-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--accent), #f97316);
  box-shadow: 0 10px 24px rgba(255,90,31,.24);
  position: relative;
}
.tools-header-mark::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 4px dotted #fff;
  border-radius: 50%;
}
.tools-header-mark span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.tools-header-copy { flex: 1; min-width: 0; }
.tools-health-hero {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(20,184,166,.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 15% 0, rgba(34,197,94,.18), transparent 36%),
    linear-gradient(135deg, rgba(15,118,110,.12), rgba(37,99,235,.08));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15,118,110,.08);
}
.tools-health-orb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #0f766e, #22c55e);
  box-shadow: 0 8px 22px rgba(15,118,110,.24);
}
.tools-health-orb i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.18);
  animation: toolsHealthPulse 1.8s ease-in-out infinite;
}
@keyframes toolsHealthPulse {
  50% { transform: scale(.82); box-shadow: 0 0 0 10px rgba(255,255,255,.08); }
}
.tools-health-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tools-health-copy small {
  color: #0f766e;
  font-size: .67rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
body.dark .tools-health-copy small { color: #5eead4; }
.tools-health-copy strong { margin-top: 2px; font-size: 1rem; font-weight: 950; }
.tools-health-copy em {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .73rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.tools-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.tool-action {
  min-height: 86px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
}
.tool-action:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text);
}
.tool-action span { font-size: 1.3rem; }
.tool-action strong { font-size: 0.8rem; }

.tool-action-wide.tool-card-size {
  background: linear-gradient(135deg, rgba(255,90,31,.10), rgba(249,115,22,.06));
  border-color: rgba(255,90,31,.28);
}
.tool-action-wide.tool-card-size > span {
  display: inline-flex;
  margin: 0;
  color: inherit;
}
.tools-box .card-size-control {
  display: flex !important;
  width: 100%;
  justify-content: space-between;
  padding: 8px 10px;
}
.tools-box #card-size-slider {
  flex: 1;
  width: auto;
}

.card-size-preview-bar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 900;
  width: min(760px, calc(100vw - 28px));
  transform: translateX(-50%);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  box-shadow: 0 18px 55px rgba(15,23,42,.24), 0 0 0 1px rgba(255,255,255,.35) inset;
  animation: cspEnter .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes cspEnter {
  from { opacity: 0; transform: translate(-50%, 14px) scale(.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.csp-copy {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 135px;
}
.csp-copy strong { font-size: .88rem; font-weight: 950; }
.csp-kicker {
  color: var(--accent);
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.card-size-preview-bar .card-size-control {
  display: flex !important;
  flex: 1;
  min-width: 180px;
}
.card-size-preview-bar input[type="range"] {
  flex: 1;
  min-width: 100px;
}
.csp-actions { display: flex; gap: 8px; }
.csp-actions button {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 13px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 950;
  cursor: pointer;
}
.csp-cancel {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.csp-save {
  border: 0;
  background: linear-gradient(135deg, var(--accent), #f97316);
  color: #fff;
  box-shadow: 0 7px 18px rgba(255,90,31,.22);
}
body.card-size-preview-active #pos-screen {
  filter: none !important;
}
body.card-size-preview-active .modal-overlay {
  display: none !important;
}
@media (max-width: 680px) {
  .card-size-preview-bar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 9px;
  }
  .csp-control { grid-column: 1 / -1; grid-row: 2; }
  .csp-actions { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .card-size-preview-bar,
  .tools-health-orb i { animation: none; }
}

/* Ajuste de espacio vertical: menos header/imagen, mas productos visibles */
.pos-header {
  height: 52px;
  min-height: 52px;
  margin-top: 6px;
  border-radius: 16px;
}
.order-badge {
  padding: 5px 14px 4px;
}
.queue-header-btn,
.admin-btn {
  height: 34px;
}
.pos-layout {
  gap: 8px;
  padding: 8px 10px 10px;
}
.products-top-bar {
  padding: 7px 10px 5px;
}
.search-wrap input {
  min-height: 38px;
}
.categories-bar {
  padding: 6px 10px 7px;
}
.category-btn {
  min-height: 38px;
}
.products-grid {
  grid-auto-rows: auto;
}
.product-img-wrap {
  /* Mantener aspect-ratio cuadrado heredado del CSS principal ? no forzar height fijo */
  margin: 0;
  width: 100%;
}
.product-info {
  padding: 8px 9px 12px;
}

/* Layout cajero eficiente: header y filtros en una sola l?nea ?til */
.pos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;   /* necesario para que header-center quede absoluto en el centro */
}

/* Número de orden: centrado exacto; z-index alto para que OK del aviso no quede tapado */
.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 80;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.order-badge {
  min-width: 70px;
  box-shadow: 0 6px 18px rgba(255,90,31,0.24);
}

.products-top-bar {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(280px, 1.28fr);
  align-items: center;
  gap: 10px;
}

.products-top-bar .search-wrap {
  min-width: 0;
}

.products-top-bar .categories-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: transparent;
  scrollbar-width: thin;
}

.products-top-bar .categories-bar::-webkit-scrollbar {
  height: 3px;
}

.products-top-bar .categories-bar::-webkit-scrollbar-track {
  background: transparent;
}

.products-top-bar .categories-bar::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 99px;
}

.products-top-bar .category-btn {
  min-height: 36px;
  padding: 5px 12px 5px 7px;
  flex: 0 0 auto;
}

.products-top-bar .category-btn .cat-icon {
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
}

.products-top-bar .category-btn .cat-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.products-grid {
  padding-top: 8px;
}

@media (max-width: 1050px) {
  .products-top-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .products-top-bar .categories-bar {
    padding-bottom: 2px;
  }
}

/* Badges de producto separados para que no se encimen */
.qty-badge {
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  font-size: 0.72rem;
  z-index: 4;
}

.quick-tap-badge {
  top: auto;
  right: 6px;
  bottom: 6px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  z-index: 3;
}

.modifier-badge {
  top: 6px;
  left: 6px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* Categor?as primero: b?squeda compacta expandible */
.products-top-bar {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}

.pos-search-wrap {
  position: relative;
  width: 38px;
  min-width: 38px;
  height: 38px;
  flex-shrink: 0;
  /* El wrapper NUNCA cambia de tama?o en el flex ? solo el input se expande en absoluto */
}

.search-toggle-btn,
.search-close-btn {
  position: absolute;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.search-toggle-btn {
  left: 0;
}

.search-close-btn {
  right: 0;
  opacity: 0;
  pointer-events: none;
  color: var(--red);
}

.pos-search-wrap input {
  position: absolute;
  left: 0;          /* expande hacia la DERECHA, sin tapar el n?mero de orden */
  top: 0;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 8px 38px 8px 40px;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition:
    width 280ms cubic-bezier(.22,1,.36,1),
    opacity 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.pos-search-wrap.search-expanded input {
  width: min(310px, 38vw);
  opacity: 1;
  pointer-events: auto;
}

.pos-search-wrap.search-expanded .search-toggle-btn {
  border-color: transparent;
  background: transparent;
}

.pos-search-wrap.search-expanded .search-close-btn {
  opacity: 1;
  pointer-events: auto;
}

.products-top-bar .categories-bar {
  scrollbar-width: none;
}

.products-top-bar .categories-bar::-webkit-scrollbar {
  display: none;
}

.products-top-bar .category-btn .cat-name {
  max-width: 180px;
}

@media (max-width: 1050px) {
  .products-top-bar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .header-actions .pos-search-wrap.search-expanded input {
    width: min(220px, 44vw);
  }
}

/* Categor?as con ancho completo; b?squeda vive arriba en el header */
.products-top-bar {
  display: block;
  padding: 7px 10px;
}

.products-top-bar .categories-bar {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.products-top-bar .category-btn {
  min-height: 35px;
  padding: 5px 10px 5px 6px;
}

.products-top-bar .category-btn .cat-icon {
  width: 24px;
  height: 24px;
}

.products-top-bar .category-btn .cat-name {
  max-width: 128px;
  font-size: 0.82rem;
}

/* Panel de orden colapsable para dar todo el ancho a productos */
.pos-layout {
  position: relative;
}

.cart-panel {
  transition: width 180ms ease, opacity 140ms ease, transform 180ms ease;
}

.pos-layout.cart-collapsed .cart-panel {
  width: 0 !important;
  min-width: 0;
  opacity: 0;
  transform: translateX(18px);
  pointer-events: none;
  border: 0;
  margin: 0;
}

.collapse-cart-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-active);
  color: var(--text-muted);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}

.collapse-cart-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.cart-peek-btn {
  position: absolute;
  right: 14px;
  bottom: 16px;
  z-index: 40;
  min-width: 172px;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: 22px;
  border: 1.5px solid rgba(255,90,31,0.35);
  background:
    linear-gradient(135deg, rgba(255,90,31,0.92), rgba(255,140,58,0.92));
  color: #fff;
  box-shadow: 0 16px 44px rgba(255,90,31,0.35);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.cart-peek-title {
  font-size: 0.82rem;
  font-weight: 900;
}

.cart-peek-count {
  font-size: 0.72rem;
  opacity: 0.86;
  font-weight: 700;
}

.cart-peek-btn strong {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 1.2rem;
  font-weight: 900;
}

/* Pesta?a clara para reabrir orden sin tapar productos */
.cart-peek-btn {
  top: 50%;
  right: 0;
  bottom: auto;
  transform: translateY(-50%);
  min-width: 74px;
  width: 74px;
  min-height: 178px;
  padding: 14px 8px;
  border-radius: 22px 0 0 22px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.cart-peek-btn:hover {
  transform: translateY(-50%) translateX(-4px) scale(1.02);
}

.cart-peek-arrow {
  position: static;
  transform: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  box-shadow: none;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.cart-peek-title,
.cart-peek-count,
.cart-peek-btn strong {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.cart-peek-title {
  font-size: 0.78rem;
}

.cart-peek-count {
  font-size: 0.7rem;
}

.cart-peek-btn strong {
  position: static;
  font-size: 1.04rem;
}

/* Animaciones refinadas: orden colapsable y b?squeda */
.cart-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cart-title-row h3 {
  margin: 0;
}

.collapse-cart-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  transform-origin: center;
  transition:
    transform 180ms cubic-bezier(.2,.9,.2,1.2),
    background 180ms ease,
    box-shadow 180ms ease;
}

.collapse-cart-btn:hover {
  transform: translateX(2px) scale(1.06);
  box-shadow: 0 10px 24px rgba(255,90,31,0.18);
}

.cart-panel {
  transform-origin: right center;
  transition:
    width 260ms cubic-bezier(.22,1,.36,1),
    opacity 180ms ease,
    transform 260ms cubic-bezier(.22,1,.36,1);
}

.pos-layout.cart-collapsed .cart-panel {
  transform: translateX(34px) scaleX(0.94);
}

.cart-peek-btn {
  right: 12px;
  top: 74px;
  bottom: auto;
  min-width: 158px;
  min-height: 58px;
  animation: cartPeekIn 260ms cubic-bezier(.2,.9,.2,1.25) both;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.cart-peek-btn:hover {
  transform: translateX(-4px) scale(1.03);
  filter: brightness(1.04);
  box-shadow: 0 18px 50px rgba(255,90,31,0.44);
}

.cart-peek-arrow {
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 42px;
  border-radius: 999px 0 0 999px;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: -8px 8px 22px rgba(255,90,31,0.22);
}

@keyframes cartPeekIn {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.pos-search-wrap {
  /* Sin transici?n de ancho: el wrapper es fijo, solo el input se anima */
  transition: filter 180ms ease;
}

.search-toggle-btn,
.search-close-btn {
  transition:
    transform 180ms ease,
    opacity 160ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.pos-search-wrap.search-expanded .search-toggle-btn {
  transform: rotate(-8deg) scale(0.92);
}

.pos-search-wrap.search-expanded .search-close-btn {
  transform: rotate(0deg) scale(1);
}

.pos-search-wrap.search-collapsed .search-close-btn {
  transform: rotate(90deg) scale(0.8);
}

/* Tarjetas: imagen + info naturalmente apiladas */
.products-grid {
  grid-auto-rows: auto;
}

.product-img-wrap {
  /* Aspect-ratio heredado del CSS principal ? no forzar height ni margin */
  margin: 0;
  width: 100%;
}

.product-img-wrap img.product-img {
  padding: 4px;
}

.product-info {
  padding: 8px 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: flex-start;
}

.product-name {
  font-size: 0.8rem;
  line-height: 1.12;
}

.product-price {
  margin-top: 2px;
  font-size: 0.86rem;
}

.header-actions .pos-search-wrap {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

.header-actions .search-toggle-btn,
.header-actions .search-close-btn,
.header-actions .pos-search-wrap input {
  height: 34px;
  min-height: 34px;
}

.header-actions .search-toggle-btn,
.header-actions .search-close-btn {
  width: 34px;
  border-radius: 11px;
}

.header-actions .pos-search-wrap input {
  padding: 7px 34px 7px 36px;
  border-radius: 11px;
}

.header-actions .pos-search-wrap.search-expanded input {
  width: min(290px, 34vw);
}

/* Bot?n "Abrir orden" ? p?ldora limpia arriba-derecha */
.cart-peek-btn,
.pos-layout .cart-peek-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  bottom: auto;
  left: auto;
  transform: none;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, #ff6a3d 0%, #ff8a4c 100%);
  color: #fff;
  box-shadow:
    0 8px 22px rgba(255, 90, 31, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 50;
  animation: cartPeekPop 220ms cubic-bezier(.2,.9,.2,1.25) both;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.cart-peek-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 12px 28px rgba(255, 90, 31, 0.42),
    0 3px 8px rgba(0, 0, 0, 0.14);
  filter: brightness(1.04);
}

.cart-peek-btn:active {
  transform: translateY(0) scale(0.98);
}

.cart-peek-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1rem;
  line-height: 1;
}

.cart-peek-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}

.cart-peek-meta strong,
.cart-peek-btn strong {
  position: static;
  right: auto;
  bottom: auto;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
}

.cart-peek-meta .cart-peek-count,
.cart-peek-btn .cart-peek-count {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.92);
}

/* Ocultar elementos antiguos si quedaran */
.cart-peek-btn .cart-peek-arrow,
.cart-peek-btn .cart-peek-title {
  display: none !important;
}

@keyframes cartPeekPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Cuando est? colapsado, el panel de productos puede usar todo el ancho */
.pos-layout.cart-collapsed .products-panel {
  position: relative;
}

/* ============================================================
   INCIDENCIAS ? modal + admin + reporte
   ============================================================ */
.incident-box {
  width: min(520px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
}

.incident-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.incident-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.incident-field label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.incident-opt {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.incident-field-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}

.incident-input-sm {
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
}

.incident-input-sm:focus {
  outline: none;
  border-color: #f59e0b;
  background: rgba(245,158,11,0.06);
}

.incident-amount-wrap {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  min-height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.incident-amount-wrap:focus-within {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.06);
}

.incident-amount-prefix {
  font-weight: 900;
  color: var(--text-muted);
  font-size: 1rem;
}

.incident-amount-input {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
  min-height: 44px;
  padding: 0;
}

.incident-amount-input:focus {
  outline: none;
}

.incident-amount-cart {
  padding: 7px 11px;
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: 10px;
  background: rgba(245,158,11,0.1);
  color: #f59e0b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.incident-amount-cart:hover {
  background: rgba(245,158,11,0.2);
  border-color: #f59e0b;
}

.incident-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  font-weight: 600;
}

/* Pesta?a Incidencias en Admin */
.incidents-admin-wrap {
  padding: 14px 16px;
}

.incidents-admin-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.incidents-admin-header > div:first-child {
  flex: 1;
  min-width: 160px;
}

.incidents-admin-title {
  font-size: 0.98rem;
  font-weight: 900;
  margin: 0;
}

.incidents-admin-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 2px 0 0;
  line-height: 1.35;
}

.incidents-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.incidents-filter label {
  font-size: 0.67rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.incidents-filter input[type="date"] {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 0.8rem;
  width: 128px;
}

.incidents-filter .btn-primary {
  height: 30px;
  padding: 0 12px;
  font-size: 0.8rem;
  border-radius: 8px;
  white-space: nowrap;
}

/* Grid de stats de incidencias */
.incidents-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.inc-stat {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
}

.inc-stat-value {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.inc-stat-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.inc-stat-total  { border-color: rgba(148,163,184,0.35); background: rgba(148,163,184,0.08); }
.inc-stat-refund { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.inc-stat-refund .inc-stat-value { color: #ef4444; }
.inc-stat-repo   { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }
.inc-stat-repo .inc-stat-value { color: #f59e0b; }
.inc-stat-queja  { border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.08); }
.inc-stat-queja .inc-stat-value { color: #818cf8; }

/* Lista de incidencias — grid de tarjetas compactas */
.incidents-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* Tarjeta individual de incidencia */
.inc-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 11px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s, transform 0.12s;
  user-select: none;
}
.inc-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.inc-card:active { transform: scale(0.98); }

.inc-card-devolucion { border-left: 3px solid #ef4444; }
.inc-card-reposicion { border-left: 3px solid #f59e0b; }
.inc-card-queja      { border-left: 3px solid #818cf8; }

.inc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inc-card-amount {
  font-size: 0.92rem !important;
  padding: 2px 9px !important;
}
.inc-card-order {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--text-muted);
}
.inc-card-note {
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.inc-card-items {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inc-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.inc-card-who  { font-size: 0.74rem; color: var(--text-muted); font-weight: 700; }
.inc-card-method { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.inc-card-time { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; }
.inc-card-pending-dot { margin-left: 4px; font-size: 0.8rem; }

/* ── Incident Detail Modal ─────────────────────────── */
.idd-box {
  width: min(480px, 95vw);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
}
.idd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.idd-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.idd-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.idd-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
}
.idd-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  min-width: 70px;
  padding-top: 2px;
  flex-shrink: 0;
}
.idd-note {
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text);
  font-weight: 600;
}
.idd-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.idd-item-chip {
  background: var(--card-active);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.idd-pending {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #d97706;
}
.idd-actions {
  display: flex;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.idd-cancel-btn {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.idd-delete-btn {
  flex: 2;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(239,68,68,0.3);
}
.idd-delete-btn:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); }

.inc-row {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}

.inc-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}

.inc-type-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.inc-badge-reposicion { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.35); }
.inc-badge-devolucion { background: rgba(239,68,68,0.15);  color: #ef4444; border: 1px solid rgba(239,68,68,0.35); }
.inc-badge-queja      { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.35); }

.inc-tag {
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--card-active);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
}

.inc-time {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-left: auto;
}

.inc-amount {
  font-weight: 900;
  font-size: 0.92rem;
  padding: 3px 10px;
  border-radius: 10px;
}

.inc-amount.refund { color: #ef4444; background: rgba(239,68,68,0.1); }
.inc-amount.cost   { color: #f59e0b; background: rgba(245,158,11,0.1); }
.inc-amount.muted  { color: var(--text-muted); background: transparent; font-weight: 700; }

.inc-del-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.28);
  background: rgba(239,68,68,0.08);
  color: #ef4444;
  font-size: 0.95rem;
}

.inc-del-btn:hover {
  background: rgba(239,68,68,0.18);
}

.inc-row-body {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inc-note {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.45;
  font-weight: 600;
  white-space: pre-wrap;
}

.inc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
}

.inc-items {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-style: italic;
}

.incidents-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  border: 1px dashed var(--border-mid);
  border-radius: 18px;
  color: var(--text-muted);
  gap: 6px;
}

/* Resumen de incidencias dentro del reporte */
.report-incidents-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 14px;
  background: rgba(245,158,11,0.06);
  margin-bottom: 12px;
}

.rinc-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.rinc-line strong {
  font-weight: 900;
}

.rinc-line .rinc-minus {
  color: #ef4444;
}

.rinc-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(245,158,11,0.35);
  font-size: 0.95rem;
}

.rinc-total strong {
  color: #f59e0b;
  font-size: 1.05rem;
}

/* Stats grid del reporte ? cuando hay ventas netas, 4 columnas */
.report-stats-grid.has-net {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.stat-card-net {
  border-color: rgba(245,158,11,0.38) !important;
  background: rgba(245,158,11,0.08) !important;
}

.stat-card-net .stat-value {
  color: #f59e0b !important;
}

.stat-delta-sub {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 2px;
}

/* ============================================================
   REPORTE ? fixes de modo oscuro + rangos r?pidos mejorados
   ============================================================ */
.report-header-card {
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text);
}

body.dark .report-header-card {
  background: var(--card) !important;
  border-color: var(--border-mid) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.report-header-info h3 {
  color: var(--text);
}

.report-header-info p {
  color: var(--text-muted);
}

/* Barra de periodos r?pidos */
.quick-ranges-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  margin-bottom: 12px;
}

body.dark .quick-ranges-bar {
  background: rgba(255,255,255,0.02);
  border-color: var(--border-mid);
}

.quick-ranges-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-ranges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-ranges-grid .rq-btn {
  flex: 0 1 auto;
  white-space: nowrap;
}

/* Tarjeta del d?a actual resaltada */
.history-card.is-today {
  border-color: var(--accent) !important;
  background: var(--accent-dim);
  box-shadow: 0 6px 18px rgba(255,90,31,0.18);
}

.hc-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  background: var(--card-active);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hc-tag.today {
  background: var(--accent);
  color: #fff;
}

/* ============================================================
   SETTINGS ? sub-navegaci?n con grupos
   ============================================================ */
.settings-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 14px;
  margin: 0 0 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

body.dark .settings-subnav {
  background: rgba(30,33,48,0.85);
  border-color: var(--border-mid);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.settings-subnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  min-height: 40px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.settings-subnav-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.settings-subnav-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255,90,31,0.28);
  transform: translateY(-1px);
}

.settings-subnav-btn span {
  font-weight: 800;
}

.settings-group {
  animation: settingsFadeIn 220ms ease;
}

@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* En mobile, ajustar padding y que los botones no se vean apretados */
@media (max-width: 720px) {
  .settings-subnav {
    padding: 12px 12px 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .settings-subnav::-webkit-scrollbar { display: none; }
  .settings-subnav-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 0.82rem;
  }
}

/* ============================================================
   ORDER LOOKUP MODAL (b?squeda por n?mero de orden)
   ============================================================ */
.order-lookup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background 160ms, transform 120ms, border-color 160ms;
  white-space: nowrap;
}
.order-lookup-btn:hover {
  background: var(--accent-soft, rgba(255,90,31,0.1));
  border-color: var(--accent);
  transform: translateY(-1px);
}
body.dark .order-lookup-btn { background: var(--card); color: var(--text); }

.order-lookup-box {
  max-width: 560px;
  width: 94vw;
  padding: 24px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.order-lookup-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 10px 16px;
  transition: border-color 160ms;
}
.order-lookup-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,90,31,0.15);
}
.ol-hash {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text-muted);
  line-height: 1;
}
.order-lookup-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 4px;
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
  min-width: 0;
}

.order-lookup-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ol-key {
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 800;
  padding: 16px 0;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 100ms, background 160ms, border-color 160ms;
}
.ol-key:hover { background: var(--surface); border-color: var(--accent); }
.ol-key:active { transform: scale(0.96); }
.ol-key-soft { color: var(--text-muted); }
.ol-key-del { color: var(--danger, #ef4444); }

.order-lookup-result {
  min-height: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.ol-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 18px 8px;
  font-size: 0.9rem;
}
.ol-order-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ol-order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.ol-order-number {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent);
}
.ol-order-date { font-size: 0.82rem; color: var(--text-muted); }
.ol-order-total {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
}
.ol-order-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--text);
  max-height: 180px;
  overflow-y: auto;
}
.ol-order-items li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.ol-order-items li:last-child { border-bottom: 0; }
.ol-order-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ol-action-btn {
  flex: 1;
  min-width: 120px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms, background 160ms;
}
.ol-action-btn:hover { background: var(--surface); transform: translateY(-1px); }
.ol-action-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ol-action-btn.primary:hover { background: #e44a10; }
.ol-not-found {
  text-align: center;
  color: var(--danger, #ef4444);
  padding: 18px 8px;
  font-weight: 700;
}

/* ============================================================
   REFUND BANNER (A REGRESAR en el carrito)
   ============================================================ */
.refund-banner {
  margin: 0 12px 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 2px solid #ef4444;
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(239,68,68,0.25);
  animation: refundBannerIn 240ms ease;
}
body.dark .refund-banner {
  background: linear-gradient(135deg, rgba(239,68,68,0.22) 0%, rgba(239,68,68,0.12) 100%);
  border-color: #ef4444;
}
.refund-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.refund-banner-label {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #991b1b;
}
body.dark .refund-banner-label { color: #fca5a5; }
.refund-banner-close {
  border: 0;
  background: transparent;
  color: #991b1b;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
  padding: 2px 6px;
  border-radius: 6px;
}
body.dark .refund-banner-close { color: #fca5a5; }
.refund-banner-close:hover { opacity: 1; background: rgba(153,27,27,0.12); }
.refund-banner-amount {
  font-size: 1.8rem;
  font-weight: 900;
  color: #991b1b;
  line-height: 1;
  margin-bottom: 2px;
}
body.dark .refund-banner-amount { color: #fecaca; }
.refund-banner-method {
  font-size: 0.85rem;
  font-weight: 700;
  color: #7f1d1d;
  margin-bottom: 10px;
}
body.dark .refund-banner-method { color: #fda4af; }
.refund-banner-done {
  width: 100%;
  border: 0;
  background: #ef4444;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms, transform 120ms;
}
.refund-banner-done:hover { background: #dc2626; transform: translateY(-1px); }

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

/* Incident modal - refund method chips */
.incident-refund-methods {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inc-refund-method {
  flex: 1;
  min-width: 110px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, transform 120ms;
}
.inc-refund-method:hover { background: var(--surface); border-color: var(--accent); }
.inc-refund-method.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.incident-clear-cart {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 0.86rem;
  color: var(--text);
  cursor: pointer;
  margin-top: 4px;
}
.incident-clear-cart input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.incident-clear-cart span { line-height: 1.3; }

/* ============================================================
   SWIPE-TO-REMOVE en items del carrito
   ============================================================ */
.cart-item-swipe-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 8px;
  will-change: max-height, opacity;
}
.cart-item-swipe-wrap:last-child { margin-bottom: 0; }

.cart-item-swipe-wrap .cart-item {
  position: relative;
  z-index: 2;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  margin-bottom: 0 !important;
}

.cart-swipe-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: 14px;
}
.cart-swipe-bg-left  {
  left: 0;
  justify-content: flex-start;
}
.cart-swipe-bg-right {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(270deg, #ef4444 0%, #dc2626 100%);
}
.cart-swipe-bg span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.15);
  transform: scale(0.9);
  transition: transform 140ms ease;
}
.cart-item-swipe-wrap.is-ready .cart-swipe-bg span {
  transform: scale(1.08);
  background: rgba(0,0,0,0.3);
}
.cart-item-swipe-wrap.is-swiping .cart-item {
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
body.dark .cart-swipe-bg {
  background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
}
body.dark .cart-swipe-bg-right {
  background: linear-gradient(270deg, #dc2626 0%, #991b1b 100%);
}

/* ============================================================
   REFUND MODE ? el carrito se transforma en vista de devoluci?n
   ============================================================ */
.cart-panel.refund-mode {
  box-shadow: inset 0 0 0 2px #ef4444, 0 6px 24px rgba(239,68,68,0.18);
  border-radius: 18px;
}
.cart-panel.refund-mode .cart-title-row h3 {
  color: #dc2626;
}
/* Oculta las acciones normales y muestra las de devoluci?n */
.cart-panel.refund-mode .cart-action-row { display: none !important; }
.cart-refund-action-row { display: none; }
.cart-panel.refund-mode .cart-refund-action-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Oculta la fila de descuento en modo devoluci?n */
.cart-panel.refund-mode #cart-discount-row { display: none !important; }
/* Oculta banner flotante en modo devoluci?n (redundante) */
.cart-panel.refund-mode #refund-banner { display: none !important; }

.refund-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(239,68,68,0.14), rgba(239,68,68,0.06));
  border: 1.5px solid rgba(239,68,68,0.35);
  border-radius: 14px;
  margin-bottom: 10px;
}
.rf-header-left { display: flex; align-items: center; gap: 10px; }
.rf-header-icon { font-size: 1.7rem; }
.rf-header-title {
  font-weight: 900;
  font-size: 1rem;
  color: #991b1b;
  letter-spacing: 0.2px;
}
.rf-header-sub {
  font-size: 0.78rem;
  color: #7f1d1d;
  opacity: 0.85;
}
body.dark .rf-header-title { color: #fecaca; }
body.dark .rf-header-sub   { color: #fca5a5; }
.refund-order-badge {
  background: #111827;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  white-space: nowrap;
}
body.dark .refund-order-badge { background: #374151; }

.refund-reason-bar {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 12px;
  background: var(--surface);
  border-left: 3px solid #ef4444;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 0.84rem;
}
.refund-reason-label {
  font-weight: 800;
  color: #991b1b;
  flex-shrink: 0;
}
body.dark .refund-reason-label { color: #fca5a5; }
.refund-reason-text {
  color: var(--text);
  opacity: 0.9;
  line-height: 1.35;
}

.refund-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.refund-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--card);
  border: 1.5px solid rgba(239,68,68,0.25);
  border-radius: 14px;
  gap: 12px;
  animation: refundItemIn 220ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes refundItemIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.dark .refund-line {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.35);
}

.refund-line-main { flex: 1; min-width: 0; }
.refund-line-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 4px;
}
.refund-line-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.rf-mod-group {
  background: var(--surface);
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.rf-mod-group small {
  font-weight: 700;
  margin-right: 4px;
  opacity: 0.7;
}
.refund-line-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-qty-pill {
  background: #ef4444;
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
}
.rf-unit {
  color: var(--text-muted);
  font-size: 0.82rem;
}
.refund-line-amount {
  font-weight: 900;
  font-size: 1.1rem;
  color: #dc2626;
  white-space: nowrap;
}
body.dark .refund-line-amount { color: #fca5a5; }

.refund-no-items {
  text-align: center;
  padding: 30px 16px;
  color: var(--text-muted);
}
.refund-no-items-icon {
  font-size: 2.4rem;
  margin-bottom: 8px;
}
.refund-no-items p {
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.refund-no-items small { font-size: 0.86rem; }

/* Total en modo devoluci?n */
.refund-total-amt {
  color: #dc2626;
  font-weight: 900;
}
body.dark .refund-total-amt { color: #fca5a5; }

/* Chips de m?todo de devoluci?n */
.refund-action-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rf-chip {
  flex: 1;
  min-width: 90px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, transform 120ms;
}
.rf-chip:hover { background: var(--surface); border-color: #ef4444; }
.rf-chip.active {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* Botones de acci?n del modo devoluci?n */
.refund-action-buttons {
  display: flex;
  gap: 8px;
}
.refund-complete-btn {
  flex: 1;
  border: 0;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  padding: 14px 12px;
  border-radius: 14px;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(22,163,74,0.35);
  transition: transform 120ms, box-shadow 160ms, filter 160ms;
}
.refund-complete-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(22,163,74,0.45);
  filter: brightness(1.06);
}
.refund-complete-btn:active { transform: translateY(0); }

.refund-cancel-btn {
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.refund-cancel-btn:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #ef4444;
}
body.dark .refund-cancel-btn:hover {
  background: rgba(239,68,68,0.2);
  color: #fecaca;
}

/* ============================================================
   INCIDENT WIZARD ? modal paso a paso
   ============================================================ */
.incident-wizard {
  max-width: 560px;
  width: 96vw;
  max-height: 92vh;
  padding: 0;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.incident-wizard-header {
  position: relative;
  padding: 16px 20px 12px;
  background: linear-gradient(135deg, rgba(255,90,31,0.1) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
body.dark .incident-wizard-header {
  background: linear-gradient(135deg, rgba(255,90,31,0.15) 0%, transparent 100%);
}
.incident-wizard-header .close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

.incident-wizard-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.iw-brand-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(255,90,31,0.3));
}
.iw-brand-text {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #ff5a1f 0%, #ff7f42 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff5a1f;
}

.incident-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 40px 12px;
}
.inc-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.inc-step-dot span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
.inc-step-dot small {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.3px;
}
.inc-step-dot.active span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,90,31,0.35);
  transform: scale(1.08);
}
.inc-step-dot.active small {
  color: var(--accent);
  font-weight: 800;
}
.inc-step-dot.done span {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.inc-step-dot.done span::before {
  content: '✓';
}
.inc-step-dot.done span > * { display: none; }
.inc-step-line {
  flex: 0 0 40px;
  height: 2px;
  background: var(--border);
  margin-bottom: 18px;
  transition: background 200ms;
}
.inc-step-line.done { background: #16a34a; }

.incident-wizard-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.2px;
}

.incident-wizard-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  min-height: 280px;
  position: relative;
}

.inc-step {
  display: none;
  animation: incStepIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.inc-step.active { display: block; }
@keyframes incStepIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Opciones de tipo (step 1) en grid 1 columna m?s prominente */
.incident-wizard-body .incident-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}

/* Atajo de buscar orden en step 1 */
.incident-lookup-shortcut {
  margin-top: 18px;
}
.inc-lookup-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.inc-lookup-divider::before,
.inc-lookup-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.inc-lookup-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.04));
  border: 2px solid rgba(59,130,246,0.3);
  border-radius: 14px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
  text-align: left;
}
.inc-lookup-btn strong {
  font-weight: 900;
  color: #3b82f6;
}
body.dark .inc-lookup-btn strong { color: #60a5fa; }
.inc-lookup-btn small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
.inc-lookup-btn:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.08));
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(59,130,246,0.15);
}

/* Footer del wizard */
.incident-wizard-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.wiz-btn {
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 13px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 160ms ease;
}
.wiz-btn:hover { background: var(--surface); transform: translateY(-1px); }
.wiz-back {
  flex: 0 0 auto;
}
.wiz-primary {
  flex: 1;
  background: linear-gradient(135deg, var(--accent) 0%, #e44a10 100%);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(255,90,31,0.3);
}
.wiz-primary:hover {
  background: linear-gradient(135deg, #e44a10 0%, #c53d0d 100%);
  box-shadow: 0 6px 18px rgba(255,90,31,0.4);
}
.wiz-save {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-color: #16a34a;
  box-shadow: 0 4px 14px rgba(22,163,74,0.3);
}
.wiz-save:hover {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  box-shadow: 0 6px 18px rgba(22,163,74,0.4);
}

/* Preview de resumen en step 3 */
.incident-summary-preview {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 0.86rem;
}
.incident-summary-preview h4 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 800;
}
.incident-summary-preview .sp-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dotted var(--border);
}
.incident-summary-preview .sp-row:last-child { border-bottom: 0; }
.incident-summary-preview .sp-label { color: var(--text-muted); }
.incident-summary-preview .sp-val { font-weight: 800; color: var(--text); }

/* Ajustes responsive del wizard */
@media (max-width: 520px) {
  .incident-steps-indicator { gap: 4px; }
  .inc-step-line { flex: 0 0 24px; }
  .inc-step-dot span { width: 28px; height: 28px; font-size: 0.78rem; }
  .inc-step-dot small { font-size: 0.62rem; }
}

/* ============================================================
   BOT?N "COLA" EN EL CARRITO (reemplaza Incidencia)
   ============================================================ */
.queue-btn-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px solid #f59e0b;
  background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.04));
  color: #b45309;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background 160ms, transform 120ms, border-color 160ms;
}
body.dark .queue-btn-cart {
  background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(245,158,11,0.1));
  color: #fbbf24;
}
.queue-btn-cart:hover {
  background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(245,158,11,0.12));
  transform: translateY(-1px);
}
.queue-btn-cart .qb-label { letter-spacing: 0.2px; }
.queue-btn-cart .qb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(245,158,11,0.4);
  animation: qbPulse 1.8s ease-in-out infinite;
}
@keyframes qbPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* ============================================================
   FILTRO DE FECHA EN LOOKUP
   ============================================================ */
/* ── Tabs: Por número / Ver lista del día ── */
.ol-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--card-active, #f0f2f7);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 10px;
}
.ol-mode-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 160ms ease;
  font-family: inherit;
}
.ol-mode-tab .olt-icon { font-size: 1.05rem; }
.ol-mode-tab:hover { color: var(--text); }
.ol-mode-tab.active {
  background: var(--card, #fff);
  color: var(--accent, #ff5a1f);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
@media (max-width: 480px) {
  .ol-mode-tab .olt-text { font-size: 0.78rem; }
  .ol-mode-tab { padding: 8px 6px; }
}

/* ── Modo lista: filtros y tarjetas ── */
.ol-list-filter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 10px 0 8px;
}
.ol-list-search {
  padding: 10px 14px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 160ms ease;
}
.ol-list-search:focus {
  border-color: var(--accent, #ff5a1f);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}
.ol-list-sort {
  padding: 10px 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.ol-list-container {
  max-height: min(60vh, 540px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.ol-list-container::-webkit-scrollbar { width: 5px; }
.ol-list-container::-webkit-scrollbar-thumb { background: var(--border-mid, #cbd5e1); border-radius: 99px; }
.ol-list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 6px 10px;
  border-bottom: 1px dashed var(--border, #e2e8f0);
  font-size: 0.86rem;
  color: var(--text-muted, #64748b);
  margin-bottom: 4px;
}
.ol-list-header .ol-list-total {
  font-size: 0.95rem;
  color: var(--text);
}
.ol-list-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: var(--card, #fff);
  text-align: left;
  cursor: pointer;
  transition: all 160ms ease;
  font-family: inherit;
  color: var(--text);
}
.ol-list-item:hover {
  border-color: var(--accent, #ff5a1f);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.ol-list-item .oli-num {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--accent, #ff5a1f);
  line-height: 1;
}
.ol-list-item .oli-time {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
  font-weight: 600;
}
.ol-list-item .oli-items {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ol-list-item .oli-total {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.ol-list-item .oli-pay {
  font-size: 1.1rem;
  text-align: right;
  margin-top: 2px;
}
.ol-list-back {
  align-self: flex-start;
  padding: 8px 14px;
  background: transparent;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 140ms ease;
}
.ol-list-back:hover {
  border-color: var(--accent, #ff5a1f);
  color: var(--accent, #ff5a1f);
}

/* Tablet vertical: compactar */
@media (max-width: 720px) {
  .ol-list-item {
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .ol-list-item .oli-num { font-size: 1.1rem; }
  .ol-list-item .oli-items { font-size: 0.82rem; }
  .ol-list-filter { grid-template-columns: 1fr; }
}

.ol-date-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.ol-date-input-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.ol-date-chip {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-size: 0.86rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms ease;
}
.ol-date-chip:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.ol-date-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(255,90,31,0.25);
}
.ol-date-chip-pick {
  font-size: 0.82rem;
}

/* Sugerencia cuando no hay resultados */
.ol-suggest {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 12px;
  font-size: 0.86rem;
  color: var(--text);
}
body.dark .ol-suggest {
  background: rgba(59,130,246,0.14);
}
.ol-suggest strong { color: #3b82f6; }
body.dark .ol-suggest strong { color: #60a5fa; }
.ol-suggest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ol-suggest-item {
  padding: 6px 12px;
  background: var(--card);
  border: 1.5px solid rgba(59,130,246,0.35);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: all 140ms;
}
.ol-suggest-item:hover {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
  transform: translateY(-1px);
}

/* Footer con bot?n de incidencia sin orden */
.ol-footer-actions {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.ol-no-order-btn {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 1.5px dashed #f59e0b;
  color: #b45309;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 160ms ease;
}
body.dark .ol-no-order-btn {
  border-color: #fbbf24;
  color: #fbbf24;
}
.ol-no-order-btn:hover {
  background: rgba(245,158,11,0.1);
  border-style: solid;
}

/* ============================================================
   PANEL DE AYUDA REEMBOLSO A TARJETA (Square)
   ============================================================ */
.incident-refund-methods {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inc-refund-method {
  flex: 1;
  min-width: 110px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  transition: all 160ms;
  font-size: 0.78rem;
}
.inc-refund-method strong {
  font-size: 0.92rem;
  font-weight: 800;
}
.inc-refund-method small {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}
.inc-refund-method:hover {
  border-color: var(--accent);
  background: var(--surface);
}
.inc-refund-method.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(255,90,31,0.14), rgba(255,90,31,0.04));
  box-shadow: 0 4px 12px rgba(255,90,31,0.15);
}
.inc-refund-method.active small { color: var(--text); }

.incident-card-refund-help {
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.04));
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  animation: iconFadeIn 240ms ease;
}
body.dark .incident-card-refund-help {
  background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(245,158,11,0.08));
}
.icrh-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.icrh-icon { font-size: 1.6rem; }
.icrh-header strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #b45309;
  margin-bottom: 2px;
}
body.dark .icrh-header strong { color: #fbbf24; }
.icrh-header small {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.icrh-steps {
  margin: 0 0 12px 22px;
  padding: 0;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.6;
}
.icrh-steps li { margin-bottom: 2px; }
.icrh-steps strong { font-weight: 800; color: #b45309; }
body.dark .icrh-steps strong { color: #fbbf24; }
.icrh-open-square {
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid #f59e0b;
  color: #b45309;
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 140ms;
}
body.dark .icrh-open-square {
  background: rgba(255,255,255,0.08);
  color: #fbbf24;
}
.icrh-open-square:hover {
  background: #f59e0b;
  color: #fff;
  transform: translateY(-1px);
}
.icrh-status {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.45;
}
body.dark .icrh-status {
  background: rgba(0,0,0,0.2);
}
.icrh-status strong { color: #b45309; font-weight: 800; }
body.dark .icrh-status strong { color: #fbbf24; }

/* ============================================================
   ALERTA DE REEMBOLSOS PENDIENTES EN SQUARE (dashboard incidencias)
   ============================================================ */
.refund-pending-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 12px 20px 16px;
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(245,158,11,0.06));
  border: 1.5px solid #f59e0b;
  border-radius: 14px;
  cursor: pointer;
  transition: all 160ms;
  animation: rpaBlink 2.4s ease-in-out infinite;
}
@keyframes rpaBlink {
  0%, 100% { box-shadow: 0 2px 8px rgba(245,158,11,0.15); }
  50%      { box-shadow: 0 4px 16px rgba(245,158,11,0.35); }
}
.refund-pending-alert:hover { transform: translateY(-1px); }
.rpa-icon { font-size: 1.8rem; }
.rpa-text {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.45;
}
.rpa-text strong { display: block; color: #b45309; font-weight: 800; margin-bottom: 2px; }
body.dark .rpa-text strong { color: #fbbf24; }
.rpa-text small { color: var(--text-muted); font-size: 0.78rem; }
.rpa-arrow { font-size: 1.4rem; color: #b45309; font-weight: 900; }
body.dark .rpa-arrow { color: #fbbf24; }

/* ============================================================
   DESGLOSE DE DEVOLUCIONES POR M?TODO
   ============================================================ */
.refund-breakdown {
  margin: 0 20px 16px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.rb-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.rb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.rb-chip {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.rb-chip .rb-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.rb-chip .rb-amount {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ef4444;
}
.rb-chip small {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 3px;
}
.rb-chip.rb-cash  { border-left: 3px solid #22c55e; }
.rb-chip.rb-card  { border-left: 3px solid #3b82f6; }
.rb-chip.rb-other { border-left: 3px solid #a855f7; }

/* ============================================================
   BADGES DE M?TODO Y ESTADO EN LISTA DE INCIDENCIAS
   ============================================================ */
.inc-method-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
}
.inc-method-efectivo { border-color: #22c55e; color: #16a34a; }
.inc-method-tarjeta  { border-color: #3b82f6; color: #2563eb; }
.inc-method-otro     { border-color: #a855f7; color: #9333ea; }
body.dark .inc-method-efectivo { color: #4ade80; }
body.dark .inc-method-tarjeta  { color: #60a5fa; }
body.dark .inc-method-otro     { color: #c084fc; }

.inc-pending-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(245,158,11,0.18);
  color: #b45309;
  border: 1px solid #f59e0b;
  animation: incPending 1.8s ease-in-out infinite;
}
body.dark .inc-pending-badge { color: #fbbf24; background: rgba(245,158,11,0.28); }
@keyframes incPending {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.inc-tx-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(34,197,94,0.12);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.4);
  font-family: 'SF Mono', Consolas, monospace;
}
body.dark .inc-tx-badge { color: #4ade80; background: rgba(34,197,94,0.2); }

.inc-pending-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.inc-confirm-btn,
.inc-open-square-btn {
  padding: 8px 14px;
  border: 1.5px solid;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 140ms;
}
.inc-confirm-btn {
  border-color: #22c55e;
  background: rgba(34,197,94,0.1);
  color: #16a34a;
}
.inc-confirm-btn:hover { background: #22c55e; color: #fff; }
body.dark .inc-confirm-btn { color: #4ade80; }
body.dark .inc-confirm-btn:hover { color: #fff; }
.inc-open-square-btn {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
}
.inc-open-square-btn:hover { border-color: var(--accent); background: var(--surface); }

/* Row resaltada cuando est? pendiente */
.inc-row.inc-row-pending-square {
  border-left: 3px solid #f59e0b !important;
  background: linear-gradient(to right, rgba(245,158,11,0.06), transparent);
}

/* ============================================================
   CUADRE DE CAJA EN REPORTE (por m?todo)
   ============================================================ */
.report-reconcile { border-left: 4px solid #3b82f6; }
.report-reconcile-intro {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.reconcile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .reconcile-grid { grid-template-columns: 1fr; }
}
.reconcile-col {
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
}
.reconcile-cash { border-color: rgba(34,197,94,0.5); }
.reconcile-card { border-color: rgba(59,130,246,0.5); }
.rec-col-head {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.rec-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.9rem;
}
.rec-line strong { font-weight: 800; }
.rec-line.rec-minus { color: #ef4444; }
.rec-line.rec-minus strong { color: #ef4444; }
.rec-line.rec-final {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 2px solid var(--border);
  font-size: 1rem;
  font-weight: 900;
}
.rec-line.rec-final strong { font-size: 1.1rem; }
.reconcile-cash .rec-final strong { color: #16a34a; }
.reconcile-card .rec-final strong { color: #2563eb; }
body.dark .reconcile-cash .rec-final strong { color: #4ade80; }
body.dark .reconcile-card .rec-final strong { color: #60a5fa; }
.rec-pending {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(245,158,11,0.14);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #b45309;
  text-align: center;
}
body.dark .rec-pending { color: #fbbf24; }

.rinc-line small.rinc-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}
.rinc-line.rinc-warning {
  background: rgba(245,158,11,0.12);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px 0;
}
.rinc-line.rinc-warning strong { color: #b45309; }
body.dark .rinc-line.rinc-warning strong { color: #fbbf24; }

/* ============================================================
   ADMIN PRODUCTOS ? Sticky header con filtro de categor?as
   ============================================================ */
.admin-products-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-tint, #f0f2f5);
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.dark .admin-products-sticky {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.admin-products-sticky .admin-toolbar {
  padding: 0;
  background: transparent;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.admin-products-sticky .search-wrap { flex: 1; min-width: 0; }

.manage-cats-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 140ms;
  touch-action: manipulation;
}
.manage-cats-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.admin-products-sticky .add-product-btn { flex-shrink: 0; }

/* Chips de filtro por categor?a */
.admin-cat-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.admin-cat-filter::-webkit-scrollbar { height: 6px; }
.admin-cat-filter::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

.admin-cat-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 160ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.admin-cat-chip:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.admin-cat-chip.active {
  background: rgba(255,107,0,0.09);
  color: #1e293b;
  border-color: #ff6b00;
  box-shadow: 0 0 0 2.5px #ff6b00, 0 4px 14px rgba(255,107,0,0.18);
}
.admin-cat-chip .acc-emoji { font-size: 1rem; }
.admin-cat-chip .acc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 7px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}
.admin-cat-chip.active .acc-count {
  background: rgba(255,107,0,0.13);
  color: #1e293b;
}
body.dark .admin-cat-chip .acc-count { background: rgba(255,255,255,0.1); }

.admin-products-count {
  padding: 10px 20px 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ============================================================
   ADMIN ? acabado profesional tablet
   Fondo solido, barras opacas y textos sin salirse de tarjetas.
   ============================================================ */
#admin-screen {
  background: #eef2f7;
}
body.dark #admin-screen {
  background: var(--bg);
}

#admin-screen .admin-header {
  height: 58px;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08);
  z-index: 90;
}

#admin-screen .admin-header h1 {
  font-size: 1rem;
  color: #0f172a;
}

#admin-screen .back-btn,
#admin-screen .kiosk-launch-btn {
  height: 38px;
  min-width: 132px;
  justify-content: center;
}

#admin-screen .admin-tabs-bar {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.06);
  padding: 8px 16px 9px;
  position: relative;
  z-index: 80;
}

#admin-screen .admin-tab {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.10);
  color: #475569;
  padding: 8px 16px;
  font-size: 0.82rem;
}

#admin-screen .admin-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), #ff3d00);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.32);
}

#admin-screen .admin-tab:active:not(.active) {
  color: #0f172a;
  background: #e2e8f0;
}

body.dark #admin-screen .admin-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), #ff3d00);
}

body.dark #admin-screen .admin-tab:active:not(.active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.14);
}

/* Modo noche admin: estos selectores necesitan m?s especificidad porque
   el acabado tablet fuerza blanco en #admin-screen .admin-header/bar. */
body.dark #admin-screen .admin-header {
  background: linear-gradient(135deg, var(--surface), var(--card)) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
}

body.dark #admin-screen .admin-header h1 {
  color: var(--text) !important;
}

body.dark #admin-screen .admin-tabs-bar {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.24) !important;
}

body.dark #admin-screen .admin-tab {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-muted) !important;
}

body.dark #admin-screen .admin-tab:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--text) !important;
}

#products-tab-content.admin-content {
  padding: 0;
  background: #eef2f7;
}

body.dark #products-tab-content.admin-content {
  background: var(--bg) !important;
}

#products-tab-content .admin-products-sticky {
  top: 0;
  background: #eef2f7;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  padding: 12px 18px 10px;
  z-index: 70;
}

body.dark #products-tab-content .admin-products-sticky {
  background: var(--bg) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

#products-tab-content .admin-toolbar {
  margin-bottom: 9px;
}

#products-tab-content .search-wrap input {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  min-height: 42px;
}

#products-tab-content .manage-cats-btn,
#products-tab-content .add-product-btn {
  min-height: 42px;
  white-space: nowrap;
}

#products-tab-content .admin-cat-filter {
  padding-bottom: 2px;
}

#products-tab-content .admin-cat-chip {
  max-width: 190px;
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.11);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

#products-tab-content .admin-cat-chip .acc-name {
  min-width: 0;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#products-tab-content .admin-cat-chip.active,
#products-tab-content .admin-cat-chip.active:hover {
  background: rgba(255, 107, 0, 0.09) !important;
  border-color: #ff6b00 !important;
  color: #1e293b !important;
  box-shadow: 0 0 0 2.5px #ff6b00, 0 4px 14px rgba(255,107,0,0.20) !important;
}

#products-tab-content .admin-cat-chip.active .acc-name,
#products-tab-content .admin-cat-chip.active .acc-count,
#products-tab-content .admin-cat-chip.active .acc-emoji {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
}

#products-tab-content .admin-cat-chip.active .acc-count {
  background: rgba(255, 107, 0, 0.14) !important;
}

#products-tab-content #admin-products-list {
  padding: 0 18px 22px;
}

#products-tab-content .admin-products-grid {
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 14px;
  padding: 6px 0 0;
}

#products-tab-content .admin-product-card {
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.11);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

#products-tab-content .admin-product-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

#products-tab-content .admin-product-img-wrap {
  border-radius: 18px 18px 0 0;
}

#products-tab-content .admin-product-details {
  min-width: 0;
  padding: 8px 10px 6px;
}

#products-tab-content .admin-product-name {
  min-height: 34px;
  font-size: 0.82rem;
  line-height: 1.22;
  font-weight: 850;
  word-break: normal;
  overflow-wrap: anywhere;
}

#products-tab-content .admin-product-meta {
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

#products-tab-content .category-tag {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.58rem;
  line-height: 1.1;
  padding: 3px 7px;
}

#products-tab-content .admin-product-price {
  font-size: 0.95rem;
  line-height: 1.1;
}

#products-tab-content .admin-product-actions {
  padding: 0 9px 9px;
  min-width: 0;
}

#products-tab-content .admin-product-actions .btn-edit,
#products-tab-content .admin-product-actions .btn-delete {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modo noche Admin ? Productos. El acabado tablet define blancos con
   selectores espec?ficos; este bloque los vuelve a tema oscuro. */
body.dark #products-tab-content .admin-toolbar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

body.dark #products-tab-content .search-wrap,
body.dark #products-tab-content .search-wrap input {
  background: var(--card-active) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

body.dark #products-tab-content .search-wrap input::placeholder {
  color: var(--text-muted) !important;
}

body.dark #products-tab-content .admin-cat-filter {
  background: transparent !important;
}

body.dark #products-tab-content .admin-cat-chip {
  background: var(--card-active) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
}

body.dark #products-tab-content .admin-cat-chip:hover {
  background: var(--card-hover) !important;
  border-color: var(--accent) !important;
}

body.dark #products-tab-content .admin-cat-chip.active {
  background: rgba(255,107,0,0.14) !important;
  border-color: #ff6b00 !important;
  color: #1e293b !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.32) !important;
}

body.dark #products-tab-content .admin-cat-chip .acc-count {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-muted) !important;
}

body.dark #products-tab-content .admin-cat-chip.active .acc-count {
  background: rgba(255,107,0,0.18) !important;
  color: #1e293b !important;
}

body.dark #products-tab-content .admin-products-count {
  color: var(--text-muted) !important;
}

body.dark #products-tab-content .admin-product-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
}

body.dark #products-tab-content .admin-product-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34) !important;
}

body.dark #products-tab-content .admin-product-details,
body.dark #products-tab-content .admin-product-actions {
  background: transparent !important;
}

body.dark #products-tab-content .admin-product-name,
body.dark #products-tab-content .admin-product-price {
  color: var(--text) !important;
}

body.dark #products-tab-content .admin-product-meta,
body.dark #products-tab-content .admin-product-status {
  color: var(--text-muted) !important;
}

body.dark #products-tab-content .category-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-muted) !important;
}

body.dark #products-tab-content .btn-edit {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text) !important;
}

body.dark #products-tab-content .btn-edit:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

body.dark #products-tab-content .btn-delete {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
}

/* ============================================================
   QTY MODAL V2 ? selector de cantidad premium para cajero
   ============================================================ */
.qty-modal-overlay {
  align-items: center !important;
  padding: 16px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(15, 23, 42, 0.78) !important;
}
body.dark .qty-modal-overlay {
  background: rgba(0, 0, 0, 0.82) !important;
}

.qty-box {
  width: min(460px, 96vw) !important;
  max-width: 460px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 106, 61, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.98));
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.30),
    0 8px 22px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

body.dark .qty-box {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 106, 61, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(26,29,39,0.98), rgba(15,17,23,0.98));
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.qty-modal-top {
  padding: 16px 18px 12px !important;
  border-bottom: 0 !important;
  gap: 12px !important;
}

.qty-img-wrap {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

.qty-product-name {
  font-size: 1.12rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.35px;
}

.qty-product-price {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 90, 31, 0.10);
  color: var(--accent) !important;
  font-weight: 900 !important;
  font-size: 0.74rem !important;
}

.qty-close-btn {
  width: 38px !important;
  height: 38px !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.dark .qty-close-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

.qty-subtotal-banner {
  margin: 0 18px 14px;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 90, 31, 0.18) !important;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 106, 61, 0.13), rgba(245, 158, 11, 0.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}

.qty-subtotal-label {
  font-size: 0.68rem !important;
  font-weight: 950 !important;
}

.qty-subtotal-value {
  font-size: 1.42rem !important;
  font-weight: 1000 !important;
}

.qty-big-controls {
  position: relative;
  margin: 0 18px 14px;
  padding: 14px !important;
  gap: 12px !important;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.36)),
    var(--card);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.70);
}

body.dark .qty-big-controls {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
    var(--card);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 18px 36px rgba(0,0,0,0.32);
}

.qty-big-controls::before {
  content: 'Cantidad';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 1000;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  border: 1px solid var(--border);
}

.qty-big-btn {
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
  font-size: 2rem !important;
  font-weight: 1000 !important;
  border: 0 !important;
}

.qty-big-btn.minus {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.20);
}

.qty-big-btn.plus {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(34,197,94,0.30);
}

.qty-display-wrap {
  min-width: 128px !important;
  padding: 0 4px;
}

.qty-big-display,
.qty-direct-input {
  min-width: 128px !important;
  width: 128px !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 4.15rem !important;
  font-weight: 1000 !important;
  letter-spacing: -4px !important;
  color: var(--text) !important;
  line-height: 0.95 !important;
}

.qty-note-section {
  padding: 0 18px 12px !important;
}

.qty-note-input {
  min-height: 44px;
  border-radius: 16px !important;
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.qty-quick-row {
  justify-content: stretch !important;
  gap: 8px !important;
  padding: 0 18px 12px !important;
  overflow: visible !important;
}

.qty-quick-btn {
  flex: 1 1 0;
  min-width: 0 !important;
  height: 42px;
  padding: 0 10px !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.qty-quick-btn:hover,
.qty-quick-btn.active {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 0 6px 14px rgba(255,90,31,0.14) !important;
}

.qty-quick-clear {
  flex: 1.45 1 0;
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.20) !important;
  color: #dc2626 !important;
}

.qty-numpad {
  margin: 0 18px 12px;
  padding: 10px !important;
  gap: 8px !important;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.07);
}

body.dark .qty-numpad {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.qty-numpad .numpad-btn {
  min-height: 50px !important;
  border-radius: 16px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 1.22rem !important;
  font-weight: 950 !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05);
}

.qty-numpad .numpad-btn:hover {
  background: var(--card-hover) !important;
  border-color: var(--accent) !important;
}

.qty-numpad .numpad-clear-soft {
  color: #f59e0b !important;
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.22) !important;
}

.qty-numpad .numpad-del {
  color: #ef4444 !important;
  background: rgba(239,68,68,0.10) !important;
  border-color: rgba(239,68,68,0.22) !important;
}

.confirm-qty-btn {
  width: calc(100% - 36px) !important;
  min-height: 58px;
  margin: 0 18px 18px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  font-size: 1rem !important;
  font-weight: 1000 !important;
  box-shadow:
    0 14px 32px rgba(34,197,94,0.34),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

.confirm-qty-btn:hover {
  background: linear-gradient(135deg, #15803d, #16a34a) !important;
}

.confirm-qty-btn.remove-mode {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  box-shadow: 0 14px 32px rgba(239,68,68,0.30) !important;
}

@media (max-height: 760px) {
  .qty-box {
    max-height: 96dvh !important;
  }
  .qty-img-wrap {
    width: 54px !important;
    height: 54px !important;
  }
  .qty-big-controls {
    margin-bottom: 10px;
    padding: 12px !important;
  }
  .qty-big-btn {
    width: 54px !important;
    height: 54px !important;
  }
  .qty-big-display,
  .qty-direct-input {
    font-size: 3.35rem !important;
  }
  .qty-numpad .numpad-btn {
    min-height: 42px !important;
  }
  .confirm-qty-btn {
    min-height: 52px;
  }
}

/* Cantidades V2.1: sin accesos r?pidos, numpad m?s grande y claro. */
.qty-quick-row {
  display: none !important;
}

.qty-numpad {
  margin-top: 2px !important;
  padding: 12px !important;
  gap: 10px !important;
}

.qty-numpad .numpad-btn {
  min-height: 64px !important;
  border-radius: 18px !important;
  font-size: 1.62rem !important;
}

.qty-numpad .numpad-clear-soft {
  font-size: 1.22rem !important;
}

.qty-numpad .numpad-del {
  font-size: 1.35rem !important;
}

@media (max-height: 760px) {
  .qty-numpad .numpad-btn {
    min-height: 52px !important;
    font-size: 1.38rem !important;
  }
}

@media (max-width: 900px) {
  #products-tab-content .admin-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
  }
  #products-tab-content .admin-cat-chip {
    max-width: 170px;
  }
  #products-tab-content .admin-cat-chip .acc-name {
    max-width: 105px;
  }
}

/* ============================================================
   MODAL GESTIONAR CATEGOR?AS
   ============================================================ */
.manage-cats-box {
  width: 92vw;
  max-width: 620px;
}
.manage-cats-add {
  display: grid;
  grid-template-columns: 1fr 70px 110px;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.manage-cats-add input {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  font-size: 0.9rem;
}
.manage-cats-add input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
}
.manage-cats-add button {
  padding: 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9rem;
}
.manage-cats-list {
  overflow-y: auto;
  max-height: 60vh;
  padding-right: 4px;
}
/* mc-row styles now in the redesign block near end of file */
.mc-row-order { display: none; } /* legacy, hidden */
.mc-order-btn { display: none; } /* legacy, hidden */
.template-drag-handle {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,107,0,0.25);
  border-radius: 9px;
  background: rgba(255,107,0,0.10);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 900;
  cursor: grab;
  touch-action: none;
}
.template-drag-handle:active { cursor: grabbing; }
.mc-emoji-input,
.mc-name-input {
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}
.mc-emoji-input {
  text-align: center;
  font-size: 1.3rem;
}
.mc-name-input:focus,
.mc-emoji-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
}
.mc-color-input {
  width: 40px;
  height: 36px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}
.mc-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.mc-color-input::-webkit-color-swatch { border-radius: 6px; border: none; }
.mc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
}
.mc-delete-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 120ms;
  touch-action: manipulation;
}
.mc-delete-btn:hover {
  background: rgba(239,68,68,0.14);
  border-color: #ef4444;
}
.mc-delete-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .manage-cats-add { grid-template-columns: 1fr; }
  .mc-row { grid-template-columns: 36px 46px 1fr 36px 36px 36px; gap: 6px; }
  .mc-emoji-input { font-size: 1.1rem; padding: 6px; }
  .mc-color-input { width: 32px; height: 32px; }
}

/* ============================================================
   REPORTES ? Compactaci?n: menos espacio desperdiciado
   ============================================================ */
#reports-tab-content .history-bar {
  padding: 10px 20px 6px;
}
#reports-tab-content .history-bar-title {
  font-size: 0.72rem;
  margin-bottom: 6px;
}
#reports-tab-content .report-filters {
  margin-bottom: 12px;
  padding: 0 20px;
}
#reports-tab-content .quick-ranges-bar {
  padding: 10px 12px;
  margin-bottom: 8px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#reports-tab-content .quick-ranges-label {
  font-size: 0.68rem;
  margin: 0;
  flex-shrink: 0;
}
#reports-tab-content .quick-ranges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
#reports-tab-content .rq-btn {
  padding: 6px 10px !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
}
#reports-tab-content .date-filter-group {
  padding: 10px 12px;
  gap: 8px;
  align-items: center;
}
#reports-tab-content .date-filter-group .form-group {
  min-width: 120px;
  flex: 1;
}
#reports-tab-content .date-filter-group label {
  font-size: 0.7rem;
  margin-bottom: 2px;
}
#reports-tab-content .date-filter-group input[type="date"] {
  padding: 6px 8px;
  font-size: 0.85rem;
}
#reports-tab-content .date-filter-group .btn-primary {
  padding: 8px 14px;
  font-size: 0.85rem;
  height: auto;
  align-self: flex-end;
}

/* Header del reporte compacto */
#reports-tab-content .report-header-card {
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 14px;
}
#reports-tab-content .report-header-info h3 {
  font-size: 1.1rem;
  margin: 0 0 2px;
}
#reports-tab-content .report-header-info p {
  font-size: 0.78rem;
  margin: 0;
}
#reports-tab-content .report-btn-group {
  gap: 6px;
}
#reports-tab-content .report-btn-group button {
  padding: 7px 12px;
  font-size: 0.82rem;
}

/* Stats cards compactos */
#reports-tab-content .report-stats-grid {
  gap: 10px;
  margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
#reports-tab-content .stat-card {
  padding: 12px 14px;
  border-radius: 12px;
  text-align: left;
}
#reports-tab-content .stat-value {
  font-size: 1.3rem;
  margin-bottom: 1px;
}
#reports-tab-content .stat-label {
  font-size: 0.7rem;
}
#reports-tab-content .stat-delta-sub {
  font-size: 0.66rem;
}

/* Desglose de pagos compacto */
#reports-tab-content .report-payment-breakdown {
  gap: 8px;
  margin-bottom: 12px;
}
#reports-tab-content .report-pay-card {
  padding: 10px 12px;
}
#reports-tab-content .rpay-icon { font-size: 1.3rem; }
#reports-tab-content .rpay-amount {
  font-size: 1.05rem;
  font-weight: 900;
}
#reports-tab-content .rpay-label {
  font-size: 0.72rem;
}

/* Secciones del reporte */
#reports-tab-content .report-section {
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
}
#reports-tab-content .report-section-header {
  font-size: 0.88rem;
  margin-bottom: 8px;
}
#reports-tab-content .items-table { font-size: 0.85rem; }
#reports-tab-content .items-row { padding: 8px 12px; }
#reports-tab-content .items-row.header,
#reports-tab-content .items-row.footer { padding: 7px 12px; font-size: 0.78rem; }
#reports-tab-content .item-name-bold,
#reports-tab-content .item-qty-bold,
#reports-tab-content .item-amt-bold { font-size: 0.9rem; }

/* Cuadre por m?todo */
#reports-tab-content .report-reconcile { padding: 12px 14px; }
#reports-tab-content .reconcile-col { padding: 10px 12px; }
#reports-tab-content .rec-col-head { font-size: 0.88rem; }
#reports-tab-content .rec-line { padding: 4px 0; font-size: 0.85rem; }
#reports-tab-content .rec-line.rec-final { font-size: 0.92rem; padding-top: 6px; }
#reports-tab-content .rec-line.rec-final strong { font-size: 1rem; }

/* Incidencias resumen compacto */
#reports-tab-content .report-incidents-summary { gap: 6px; padding: 8px; }
#reports-tab-content .rinc-line { padding: 5px 8px; font-size: 0.85rem; }
#reports-tab-content .rinc-total { font-size: 0.95rem; padding: 8px 10px; }
#reports-tab-content .rinc-line small.rinc-sub { font-size: 0.66rem; }

@media (max-width: 720px) {
  #reports-tab-content .quick-ranges-bar { flex-direction: column; align-items: stretch; }
  #reports-tab-content .quick-ranges-grid { justify-content: center; }
  #reports-tab-content .report-header-card { flex-direction: column; align-items: flex-start; gap: 8px; }
  #reports-tab-content .report-btn-group { flex-wrap: wrap; width: 100%; }
}

/* ============================================================
   INCIDENCIAS ? Compactaci?n y mejor organizaci?n
   ============================================================ */
#incidents-tab-content .admin-toolbar {
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
#incidents-tab-content .admin-toolbar h3 {
  font-size: 1rem;
  margin: 0 0 2px;
}
#incidents-tab-content .admin-toolbar p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}
#incidents-tab-content .date-filter-group {
  padding: 8px 12px;
  gap: 8px;
  margin: 10px 20px;
  align-items: flex-end;
}
#incidents-tab-content .date-filter-group label {
  font-size: 0.7rem;
  margin-bottom: 2px;
}
#incidents-tab-content .date-filter-group input[type="date"] {
  padding: 6px 8px;
  font-size: 0.85rem;
}
#incidents-tab-content .incidents-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}
#incidents-tab-content .inc-stat {
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
}
#incidents-tab-content .inc-stat-value {
  font-size: 1.15rem;
  margin-bottom: 2px;
}
#incidents-tab-content .inc-stat-label { font-size: 0.68rem; }

#incidents-tab-content .refund-pending-alert {
  margin: 0 0 8px;
  padding: 10px 14px;
}
#incidents-tab-content .refund-breakdown {
  margin: 0 0 10px;
  padding: 10px 12px;
}
#incidents-tab-content .rb-title { font-size: 0.72rem; margin-bottom: 6px; }
#incidents-tab-content .rb-chip { padding: 8px 10px; }
#incidents-tab-content .rb-chip .rb-amount { font-size: 1rem; }

#incidents-tab-content .incidents-list {
  padding: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
#incidents-tab-content .inc-row {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
}
#incidents-tab-content .inc-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
#incidents-tab-content .inc-row-body {
  font-size: 0.85rem;
}
#incidents-tab-content .inc-note {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 4px;
}
#incidents-tab-content .inc-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
#incidents-tab-content .inc-type-badge {
  padding: 3px 8px;
  font-size: 0.72rem;
}
#incidents-tab-content .inc-tag {
  padding: 2px 7px;
  font-size: 0.72rem;
}
#incidents-tab-content .inc-time {
  font-size: 0.72rem;
  margin-left: auto;
  color: var(--text-muted);
}
#incidents-tab-content .inc-amount {
  font-size: 0.92rem;
  font-weight: 800;
}
#incidents-tab-content .inc-del-btn {
  width: 30px;
  height: 30px;
  font-size: 0.9rem;
}
#incidents-tab-content .inc-pending-actions {
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
}
#incidents-tab-content .inc-confirm-btn,
#incidents-tab-content .inc-open-square-btn {
  padding: 6px 10px;
  font-size: 0.78rem;
}

#incidents-tab-content .incidents-empty {
  padding: 30px 20px;
  margin: 0 20px;
}

/* ============================================================
   MODAL BUSCAR ORDEN ? Compactado para evitar scroll / overlap
   ============================================================ */
.order-lookup-box {
  padding: 18px !important;
  gap: 10px !important;
  max-width: 480px !important;
  max-height: min(92vh, 820px);
  display: flex;
  flex-direction: column;
}
.order-lookup-box .modal-header-row { margin-bottom: 2px; }
.order-lookup-box .modal-title { font-size: 1.1rem; }
.order-lookup-box .modal-subtitle { font-size: 0.78rem; line-height: 1.3; }

.order-lookup-box .ol-date-filter {
  gap: 5px;
  margin-bottom: 0;
}
.order-lookup-box .ol-date-chip {
  padding: 7px 10px;
  font-size: 0.82rem;
  border-radius: 10px;
}

.order-lookup-box .order-lookup-input-wrap {
  padding: 6px 12px;
  border-radius: 12px;
}
.order-lookup-box .ol-hash { font-size: 1.7rem; }
.order-lookup-box .order-lookup-input {
  font-size: 1.9rem;
  letter-spacing: 3px;
}

.order-lookup-box .order-lookup-numpad { gap: 6px; }
.order-lookup-box .ol-key {
  padding: 10px 0;
  font-size: 1.15rem;
  border-radius: 11px;
  min-height: 0;
}

.order-lookup-box .order-lookup-result {
  min-height: 60px;
  padding: 10px;
  border-radius: 12px;
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 260px;
}

.order-lookup-box .ol-empty {
  padding: 10px 8px;
  font-size: 0.85rem;
}
.ol-empty-icon {
  font-size: 1.6rem;
  margin-bottom: 4px;
  opacity: 0.6;
}
.ol-empty-text { margin-bottom: 8px; line-height: 1.35; }

.ol-no-order-link {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed #f59e0b;
  color: #b45309;
  font-weight: 700;
  font-size: 0.78rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}
body.dark .ol-no-order-link {
  border-color: #fbbf24;
  color: #fbbf24;
}
.ol-no-order-link:hover {
  background: rgba(245, 158, 11, 0.12);
  border-style: solid;
}
.ol-no-order-link:active { transform: scale(0.97); }

/* Card de orden en el resultado */
.order-lookup-box .ol-order-card { gap: 6px; }
.order-lookup-box .ol-order-number { font-size: 1.25rem; }
.order-lookup-box .ol-order-total { font-size: 1.1rem; }
.order-lookup-box .ol-order-date { font-size: 0.72rem; }
.order-lookup-box .ol-order-items {
  font-size: 0.8rem;
  gap: 2px;
  max-height: 120px;
}
.order-lookup-box .ol-order-items li { padding: 3px 0; }
.order-lookup-box .ol-order-actions {
  gap: 6px;
  margin-top: 4px;
}
.order-lookup-box .ol-action-btn {
  min-width: 0;
  padding: 9px 8px;
  font-size: 0.82rem;
  border-radius: 10px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ocultar el viejo footer (reemplazado por link integrado) */
.ol-footer-actions { display: none !important; }

/* En pantallas peque?as (m?vil vertical) ? a?n m?s compacto */
@media (max-height: 780px) {
  .order-lookup-box { padding: 14px !important; gap: 8px !important; }
  .order-lookup-box .ol-key { padding: 8px 0; font-size: 1.05rem; }
  .order-lookup-box .order-lookup-input { font-size: 1.6rem; }
  .order-lookup-box .order-lookup-result { max-height: 200px; }
}

/* ============================================================
   WIZARD INCIDENCIA ? Banner de contexto y campos bloqueados
   ============================================================ */
.incident-context-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.14), rgba(250, 204, 21, 0.1));
  border: 1px solid rgba(249, 115, 22, 0.45);
  border-radius: 12px;
  margin: 0 0 12px;
  animation: icbFadeIn 220ms ease;
}
body.dark .incident-context-banner {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(249, 115, 22, 0.12));
  border-color: rgba(251, 191, 36, 0.5);
}
@keyframes icbFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.icb-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.icb-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.icb-text strong {
  font-size: 0.95rem;
  color: var(--accent, #f97316);
  font-weight: 800;
}
.icb-text small {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.icb-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.icb-clear:hover {
  background: rgba(239, 68, 68, 0.22);
  color: #ef4444;
}

.incident-input-locked {
  background: rgba(148, 163, 184, 0.1) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
  font-weight: 700;
}
body.dark .incident-input-locked {
  background: rgba(71, 85, 105, 0.25) !important;
}

/* ============================================================
   MODO REORDENAR ? bot?n en Herramientas + estado activo
   ============================================================ */
.tool-action-wide {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  margin-top: 10px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.1));
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  border-radius: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, transform 140ms ease, border-color 150ms ease;
}
body.dark .tool-action-wide {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.14));
  border-color: rgba(167, 139, 250, 0.45);
}
.tool-action-wide:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(59, 130, 246, 0.18));
  border-color: rgba(139, 92, 246, 0.6);
  transform: translateY(-1px);
}
.tool-action-wide:active { transform: scale(0.98); }

.tool-repair-btn {
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(20,184,166,0.10));
  border-color: rgba(20,184,166,0.40);
}
.tool-repair-btn:hover {
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(20,184,166,0.16));
  border-color: rgba(20,184,166,0.65);
}
.tool-repair-btn .tra-text strong {
  color: #0f766e;
}
body.dark .tool-repair-btn .tra-text strong {
  color: #5eead4;
}

.hm-repair-main-btn {
  width: 100%;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 12px 14px;
  margin: 12px 0 4px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #16a34a, #0f766e);
  color: #fff;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 10px 24px rgba(15,118,110,0.24);
}
.hm-repair-main-btn span {
  font-size: 0.96rem;
  font-weight: 950;
}
.hm-repair-main-btn small {
  font-size: 0.74rem;
  font-weight: 750;
  opacity: 0.88;
}

.repair-app-modal {
  z-index: 32000;
}
.repair-box {
  width: min(780px, 96vw);
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0,0,0,0.32);
}
.repair-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(34,197,94,0.16), transparent 34%),
    linear-gradient(135deg, rgba(15,118,110,0.12), rgba(37,99,235,0.08));
  border-bottom: 1px solid var(--border);
}
.repair-header-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #0f766e, #22c55e);
  box-shadow: 0 12px 28px rgba(15,118,110,.25);
  position: relative;
  overflow: hidden;
}
.repair-header-mark::before,
.repair-header-mark::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 999px;
}
.repair-header-mark::before { width: 26px; height: 7px; }
.repair-header-mark::after { width: 7px; height: 26px; }
.repair-header-mark span {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 13px;
}
.repair-header-copy { flex: 1; min-width: 0; }
.repair-kicker {
  margin-bottom: 4px;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.repair-header h3 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 950;
}
.repair-header p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}
.repair-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  color: var(--text);
  font-size: 1rem;
  font-weight: 950;
}
body.dark .repair-close {
  background: rgba(15,23,42,0.55);
}
.repair-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
.repair-loading {
  padding: 28px 14px;
  border-radius: 18px;
  background: var(--card);
  color: var(--text-muted);
  text-align: center;
  font-weight: 900;
}
.repair-loading strong,
.repair-loading small { display: block; }
.repair-loading strong { margin-top: 14px; color: var(--text); font-size: 1rem; }
.repair-loading small { margin-top: 5px; font-size: .76rem; font-weight: 700; }
.repair-scanner {
  width: min(300px, 80%);
  height: 7px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--card-active);
  overflow: hidden;
}
.repair-scanner span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #22c55e);
  animation: repairScan 1.15s ease-in-out infinite alternate;
}
@keyframes repairScan {
  from { transform: translateX(-10%); }
  to { transform: translateX(190%); }
}
.repair-summary {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 17px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.repair-summary strong {
  font-size: 0.95rem;
  font-weight: 950;
}
.repair-summary span {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
}
.repair-summary-ok { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.32); }
.repair-summary-warn { background: rgba(245,158,11,0.13); border-color: rgba(245,158,11,0.34); }
.repair-summary-bad { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.32); }
.repair-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.repair-card {
  display: flex;
  gap: 11px;
  padding: 12px;
  border-radius: 17px;
  background: var(--card);
  border: 1px solid var(--border);
}
.repair-card-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  border-radius: 12px;
  background: var(--card-active);
}
.repair-card-body {
  min-width: 0;
  flex: 1;
}
.repair-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.repair-card-body strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 950;
}
.repair-card-body p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.repair-state {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--card-active);
  color: var(--text-muted);
  font-size: .61rem;
  font-weight: 900;
  white-space: nowrap;
}
.repair-ok .repair-state { color: #15803d; background: rgba(34,197,94,.12); }
.repair-warn .repair-state { color: #b45309; background: rgba(245,158,11,.14); }
.repair-bad .repair-state { color: #b91c1c; background: rgba(239,68,68,.12); }
.repair-inferred .repair-state { color: #6d28d9; background: rgba(139,92,246,.12); }
.repair-ok { border-left: 5px solid #22c55e; }
.repair-warn { border-left: 5px solid #f59e0b; }
.repair-bad { border-left: 5px solid #ef4444; }
.repair-info { border-left: 5px solid #94a3b8; }
.repair-inferred { border-left: 5px solid #8b5cf6; }
.repair-evidence {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 7px;
}
.repair-evidence summary {
  color: var(--text-muted);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 850;
}
.repair-evidence div {
  margin-top: 5px;
  padding: 5px 7px;
  border-radius: 8px;
  background: var(--card-active);
  color: var(--text);
  font: 700 .67rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.repair-evidence time {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 700;
}
.repair-chip-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}
.repair-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.repair-chip span {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #94a3b8;
}
.repair-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .66rem;
  white-space: nowrap;
}
.repair-chip-ok span { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.13); }
.repair-chip-warn span { background: #f59e0b; }
.repair-chip-bad span { background: #ef4444; }
.repair-chip-inferred span { background: #8b5cf6; }
.repair-mini-btn {
  margin-top: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
}
.repair-guide {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.20);
}
.repair-guide strong {
  display: block;
  margin-bottom: 7px;
  font-size: 0.88rem;
  font-weight: 950;
}
.repair-guide ol {
  margin: 0;
  padding-left: 18px;
}
.repair-guide li {
  margin: 5px 0;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.35;
}
.repair-protections {
  margin-top: 12px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(15,118,110,0.08);
  border: 1px solid rgba(15,118,110,0.22);
}
.repair-protections > strong {
  display: block;
  margin-bottom: 9px;
  color: #0f766e;
  font-size: 0.88rem;
  font-weight: 950;
}
.repair-protection-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.repair-protection {
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.32;
}
.repair-danger-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(239,68,68,0.08);
  color: #b91c1c;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.35;
}
body.dark .repair-danger-note {
  color: #fca5a5;
}
.repair-footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: .7fr .9fr 1.3fr;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.repair-footer button {
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  font-family: inherit;
  font-weight: 950;
}
.repair-secondary {
  background: var(--card-active);
  color: var(--text);
}
.repair-retest {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border) !important;
}
.repair-primary {
  background: linear-gradient(135deg, #16a34a, #0f766e);
  color: #fff;
  box-shadow: 0 9px 22px rgba(15,118,110,0.22);
}
.repair-primary:disabled {
  opacity: 0.65;
  box-shadow: none;
}

@media (max-height: 720px) {
  .repair-header {
    padding: 14px;
  }
  .repair-header p {
    display: none;
  }
  .repair-body {
    padding: 12px;
  }
  .repair-card {
    padding: 10px;
  }
  .repair-footer {
    padding: 10px 12px 12px;
  }
}
@media (max-width: 700px) {
  .repair-box { width: min(560px, 96vw); }
  .repair-cards { grid-template-columns: 1fr; }
  .repair-chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .repair-header-mark { width: 46px; height: 46px; flex-basis: 46px; }
  .repair-footer { grid-template-columns: 1fr 1fr; }
  .repair-primary { grid-column: 1 / -1; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .repair-scanner span { animation: none; width: 100%; }
}

.tool-exit-btn {
  margin-top: 6px;
  background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(220,38,38,0.05));
  border-color: rgba(239,68,68,0.3);
}
body.dark .tool-exit-btn {
  background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(220,38,38,0.12));
  border-color: rgba(239,68,68,0.4);
}
.tool-exit-btn:hover {
  background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(220,38,38,0.12));
  border-color: rgba(239,68,68,0.6);
  transform: translateY(-1px);
}
.tool-exit-btn .tra-text strong { color: #dc2626; }
.tra-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.tra-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.tra-text strong {
  font-size: 0.98rem;
  font-weight: 800;
}
.tra-text small {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}
.tra-chevron {
  font-size: 1.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Banner superior cuando el modo est? activo */
.rearrange-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
  color: #fff;
  border-bottom: 3px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
  animation: rbSlideDown 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 100;
}
@keyframes rbSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.rb-icon {
  font-size: 1.8rem;
  animation: rbPulse 1.4s ease infinite;
  flex-shrink: 0;
}
@keyframes rbPulse {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.08); }
}
.rb-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.rb-text strong { font-size: 1.02rem; font-weight: 800; }
.rb-text small  { font-size: 0.82rem; opacity: 0.92; margin-top: 2px; }
.rb-text small strong { font-weight: 700; background: rgba(255,255,255,0.2); padding: 1px 6px; border-radius: 6px; }
.rb-cancel {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 140ms ease;
  flex-shrink: 0;
}
.rb-cancel:hover { background: rgba(255, 255, 255, 0.28); }
.rb-target-switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 14px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.24);
  flex-shrink: 0;
}
.rb-target-switch button {
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,0.82);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.rb-target-switch button.active {
  background: #fff;
  color: #4c1d95;
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}
.rb-target-switch button:not(.active):hover {
  background: rgba(255,255,255,0.14);
}

/* Cuando el modo est? activo ? estilo de los product-cards */
body.rearrange-products .product-card {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  animation: productWobble 2.6s ease-in-out infinite;
  border: 2px dashed rgba(139, 92, 246, 0.5) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.pos-drag-handle {
  display: none;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,0.30);
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,243,255,0.94));
  color: #6d28d9;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(88,28,135,0.22), inset 0 1px 0 rgba(255,255,255,0.8);
  cursor: grab;
  /* IMPORTANTE: touch-action: none SOLO en el handle. As? el handle inicia
     drag pero el resto de la categor?a/producto permite scroll normal. */
  touch-action: none;
  pointer-events: auto;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
/* Hit-area extendida invisible alrededor del handle (m?s f?cil de agarrar) */
.pos-drag-handle::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 18px;
}
.pos-drag-handle:active {
  cursor: grabbing;
  transform: scale(0.94);
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
}
body.rearrange-products .product-card .product-drag-handle,
body.rearrange-categories .pos-cat-rail .category-btn:not([data-cat-name="Todos"]) .cat-drag-handle {
  display: inline-flex;
  animation: dragHandlePulse 1.6s ease-in-out infinite;
}
/* Handle de categor?as: posici?n ajustada al riel vertical estrecho */
.pos-cat-rail .cat-drag-handle {
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  border-radius: 8px;
}
body.rearrange-products .product-card .product-drag-handle:hover,
body.rearrange-categories .pos-cat-rail .category-btn .cat-drag-handle:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 12px 26px rgba(88,28,135,0.28), inset 0 1px 0 rgba(255,255,255,0.9);
}
body.dark .pos-drag-handle {
  background: linear-gradient(135deg, rgba(30,41,59,0.96), rgba(49,46,129,0.88));
  color: #c4b5fd;
  border-color: rgba(196,181,253,0.22);
}
@keyframes dragHandlePulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(88,28,135,0.20), 0 0 0 0 rgba(139,92,246,0.20); }
  50% { box-shadow: 0 10px 28px rgba(88,28,135,0.30), 0 0 0 7px rgba(139,92,246,0.08); }
}
body.rearrange-products .product-card:nth-child(odd) {
  animation-delay: -1.3s;
}
@keyframes productWobble {
  0%, 100% { transform: rotate(-0.6deg); }
  50%      { transform: rotate(0.6deg); }
}

/* Desactivar animaci?n para la que se est? arrastrando */
body.rearrange-products .product-card.dragging {
  animation: none;
  box-shadow: 0 24px 60px rgba(139, 92, 246, 0.5), 0 10px 25px rgba(0,0,0,0.3) !important;
  border-color: rgba(139, 92, 246, 1) !important;
  opacity: 0.94;
}

/* Placeholder que ocupa el hueco durante el drag */
.product-card-placeholder {
  background: rgba(139, 92, 246, 0.12);
  border: 2px dashed rgba(139, 92, 246, 0.55);
  border-radius: 16px;
  animation: placeholderPulse 1.2s ease infinite;
  box-sizing: border-box;
}
body.dark .product-card-placeholder {
  background: rgba(139, 92, 246, 0.18);
}
.category-card-placeholder {
  min-height: 64px;
  width: 100% !important;
  border-radius: 18px;
}
@keyframes placeholderPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9;  }
}

/* Deshabilitar click a cart mientras se reordena (visual feedback) */
body.rearrange-active .cart-item,
body.rearrange-products .categories-bar,
body.rearrange-categories .products-grid,
body.rearrange-active .products-top-bar {
  opacity: 0.65;
  pointer-events: none;
}

/* En modo reordenar: solo borde discontinuo + handle visible.
   NO ponemos `touch-action: none` aqu? ? eso bloquear?a el scroll del riel.
   La cardno arrastra al deslizar; SOLO el handle ? inicia el drag. */
body.rearrange-categories .pos-cat-rail .category-btn:not(.cat-queue-btn):not([data-cat-name="Todos"]) {
  user-select: none;
  -webkit-user-select: none;
  border: 2px dashed rgba(139, 92, 246, 0.55) !important;
}
body.rearrange-categories .pos-cat-rail .category-btn[data-cat-name="Todos"],
body.rearrange-categories .pos-cat-rail .cat-queue-btn {
  opacity: 0.55;
  border-style: solid !important;
}
body.rearrange-categories .pos-cat-rail .category-btn.dragging {
  box-shadow: 0 24px 60px rgba(139, 92, 246, 0.5), 0 10px 25px rgba(0,0,0,0.3) !important;
  border-color: rgba(139, 92, 246, 1) !important;
  opacity: 0.96;
}

/* Riel mantiene su tama?o normal en rearrange ? la usuaria pidi? que no
   se agranden las categor?as para no perder ?tems abajo. */
body.rearrange-categories .pos-cat-rail {
  border-color: rgba(139, 92, 246, 0.38);
  box-shadow: 0 16px 36px rgba(88, 28, 135, 0.16);
}

/* Bot?n "Cobrar" transformado en "Guardar cambios" */
.checkout-btn.checkout-btn-rearrange {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35) !important;
  animation: saveBtnPulse 1.8s ease infinite;
}
.checkout-btn.checkout-btn-rearrange:hover {
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  transform: translateY(-1px);
}
@keyframes saveBtnPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35); }
  50%      { box-shadow: 0 6px 22px rgba(139, 92, 246, 0.7); }
}

/* ============================================================
   BARRA DE B?SQUEDA DE PRODUCTOS ? ahora al lado de categor?as
   ============================================================ */
.products-top-bar {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.products-top-bar .categories-bar {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border-bottom: 0 !important;
  padding-left: 12px;
  padding-right: 12px;
}

/* Separador vertical en el header entre la b?squeda de productos
   y el resto de botones, para que visualmente no se confundan
   con "Buscar / Devolver". */
.header-actions .header-divider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Asegurar que la b?squeda en el header aparezca primero (izquierda) */
.header-actions .pos-search-wrap {
  margin-right: 2px;
}

/* Bot?n "?" de centro de ayuda en el header */
.help-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease, color 140ms ease;
}
.help-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.1));
  border-color: rgba(59, 130, 246, 0.45);
  color: #3b82f6;
}
body.dark .help-btn:hover { color: #60a5fa; }
.help-btn:active { transform: scale(0.94); }

/* ============================================================
   MODAL CENTRO DE AYUDA ? dise?o moderno
   ============================================================ */
.hm-box {
  width: min(500px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}

/* Header con gradiente oscuro */
.hm-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 22px 20px 20px;
  border-radius: 24px 24px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.hm-header-content {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hm-header-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.hm-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #f1f5f9;
  letter-spacing: -0.3px;
}
.hm-subtitle {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
}
.hm-close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #94a3b8;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}
.hm-close:hover { background: rgba(255,255,255,0.14); color: #f1f5f9; }

/* Body con scroll */
.hm-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Etiqueta de secci?n */
.hm-section-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Grid de acciones r?pidas 2x2 */
.hm-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.hm-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
  font-family: inherit;
}
.hm-quick-card:hover { background: var(--card-hover); border-color: var(--accent); transform: translateY(-1px); }
.hm-quick-card:active { transform: scale(0.97); }
.hm-qc-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.hm-qc-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

.hm-diagnostic-panel {
  margin: 12px 0 2px;
  padding: 14px;
  border: 1.5px solid rgba(59, 130, 246, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06));
}
.hm-diag-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.hm-diag-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--card);
  font-size: 1.35rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}
.hm-diag-title {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
}
.hm-diag-sub,
.hm-diag-loading {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.hm-diag-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}
.hm-diag-ok {
  color: #15803d;
  background: rgba(34, 197, 94, 0.13);
}
.hm-diag-warn {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}
.hm-diag-summary {
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--card);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 10px;
}
.hm-diag-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.hm-diag-line {
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
}
body.dark .hm-diag-line { background: rgba(15, 23, 42, 0.32); }
.hm-diag-line-ok { border-left: 4px solid #22c55e; }
.hm-diag-line-warn { border-left: 4px solid #f59e0b; }
.hm-diag-line-bad { border-left: 4px solid #ef4444; }
.hm-diag-line-tip { border-left: 4px solid #3b82f6; color: #2563eb; }
.hm-diag-line-info { border-left: 4px solid #94a3b8; color: var(--text-muted); }
.hm-diag-questions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hm-diag-question {
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 13px;
}
.hm-diag-question strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.35;
}
.hm-diag-question-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hm-diag-question-actions button,
.hm-diag-action {
  border: 0;
  border-radius: 11px;
  padding: 9px 10px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}
.hm-diag-question-actions button:nth-child(2) {
  background: rgba(100, 116, 139, 0.18);
  color: var(--text);
}
.hm-diag-answer {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.hm-diag-answer strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.88rem;
}
.hm-diag-answer p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}
.hm-diag-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.hm-diag-action {
  width: 100%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.hm-diag-close {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.hm-wizard-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--card);
}
.hm-wizard-loading strong {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
}
.hm-wizard-loading span {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 2px;
}
.hm-wizard-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hm-wizard-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hm-wizard-back {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(100, 116, 139, 0.14);
  color: var(--text);
  font-weight: 900;
  flex-shrink: 0;
}
.hm-wizard-back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.hm-live-card {
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
}
.hm-live-card strong {
  display: block;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 4px;
}
.hm-live-card p {
  margin: 0;
  color: var(--text);
  font-size: 0.83rem;
  line-height: 1.35;
  font-weight: 700;
}
.hm-live-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.hm-live-line {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.32;
}
.hm-live-ok { border-left: 3px solid #22c55e; }
.hm-live-warn { border-left: 3px solid #f59e0b; }
.hm-live-bad { border-left: 3px solid #ef4444; }
.hm-live-info { border-left: 3px solid #94a3b8; }
.hm-wizard-question {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(37, 99, 235, 0.18);
}
.hm-wizard-question h4 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}
.hm-wizard-question p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.42;
}
.hm-wizard-tip {
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}
.hm-wizard-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.hm-wizard-choice {
  width: 100%;
  padding: 12px 13px;
  border-radius: 13px;
  background: #2563eb;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.18);
}
.hm-wizard-choice:nth-child(even) {
  background: #334155;
}
.hm-wizard-checklist {
  padding: 12px;
  border-radius: 15px;
  background: var(--card);
  border: 1px solid var(--border);
}
.hm-wizard-check-title,
.hm-wizard-solution span,
.hm-wizard-tried span,
.hm-wizard-diagnosis span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.hm-wizard-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.35;
}
.hm-wizard-check + .hm-wizard-check {
  border-top: 1px solid var(--border);
}
.hm-wizard-check input {
  width: 19px;
  height: 19px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #2563eb;
}
.hm-wizard-diagnosis,
.hm-wizard-solution,
.hm-wizard-tried {
  padding: 12px;
  border-radius: 15px;
  background: var(--card);
  border: 1px solid var(--border);
}
.hm-wizard-diagnosis strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.35;
}
.hm-wizard-solution ol,
.hm-wizard-tried ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 650;
}
.hm-wizard-solution li,
.hm-wizard-tried li {
  margin: 4px 0;
}
.hm-wizard-report-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hm-wizard-report-actions button {
  min-height: 42px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}
.hm-wizard-report-actions button:first-child {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.22);
}
.hm-wizard-report-actions button:nth-child(2) {
  background: #2563eb;
}
.hm-wizard-report-actions button:nth-child(3) {
  background: #16a34a;
}
.hm-wizard-report-actions button:nth-child(4) {
  background: #7c3aed;
}

/* Campos del formulario */
.hm-field { margin-bottom: 10px; }
.hm-field-row { margin-bottom: 10px; }

.hm-textarea {
  width: 100%;
  min-height: 100px;
  padding: 13px 14px;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}
.hm-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  background: var(--card);
}
.hm-textarea::placeholder { color: var(--text-muted); opacity: 0.7; }

.hm-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}
.hm-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  background: var(--card);
}
.hm-input::placeholder { color: var(--text-muted); opacity: 0.7; }

/* Info autom?tica ? chips */
.hm-auto-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--card-active);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.hm-auto-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 6px rgba(34,197,94,0.5);
}
.hm-auto-content {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Bot?n enviar */
.hm-send-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 0.97rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(59,130,246,0.3);
  transition: transform 140ms ease, box-shadow 160ms ease, opacity 140ms ease;
  font-family: inherit;
  margin-bottom: 12px;
}
.hm-send-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(59,130,246,0.4); }
.hm-send-btn:active:not(:disabled) { transform: translateY(0); }
.hm-send-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Fila de tel?fono */
.hm-phone-row {
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hm-phone-row strong {
  color: var(--text);
  font-size: 0.85rem;
}

/* Estado sin configurar */
.hm-setup-notice {
  text-align: center;
  padding: 16px 8px 8px;
}
.hm-setup-icon { font-size: 2.4rem; margin-bottom: 8px; }
.hm-setup-title { font-size: 1rem; font-weight: 900; color: var(--text); margin-bottom: 6px; }
.hm-setup-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  background: var(--card-active);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}
.hm-setup-sub strong { color: var(--text); }

/* Contacto visible (sin llamar/SMS porque la tableta no tiene SIM) */
.hm-emergency {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.hm-emergency-call,
.hm-emergency-sms {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 120ms ease, opacity 140ms ease;
  cursor: pointer;
}
.hm-emergency-call { background: #dcfce7; color: #15803d; }
.hm-emergency-sms  { background: #dbeafe; color: #1d4ed8; }
body.dark .hm-emergency-call { background: rgba(34,197,94,0.15); color: #4ade80; }
body.dark .hm-emergency-sms  { background: rgba(59,130,246,0.15); color: #60a5fa; }
.hm-emergency-call:hover, .hm-emergency-sms:hover { transform: translateY(-1px); opacity: 0.85; }
.hm-phone-only {
  display: block;
}
.hm-phone-only-card {
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.06), rgba(59, 130, 246, 0.07));
  border: 1px solid rgba(15, 23, 42, 0.10);
  text-align: center;
}
.hm-phone-only-card span,
.hm-phone-only-card small {
  display: block;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}
.hm-phone-only-card strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.2px;
}

/* ============================================================
   SECCI?N SOPORTE ? Admin ? Ajustes ? Avanzado
   ============================================================ */
.support-setup-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06));
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 14px;
  padding: 16px;
  margin-top: 10px;
}
body.dark .support-setup-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.1));
  border-color: rgba(96, 165, 250, 0.35);
}
.ssc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
}
.ssc-header:first-child { margin-top: 0; }
.ssc-num {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3b82f6;
  color: #fff;
  font-weight: 800;
  border-radius: 50%;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.ssc-header strong { font-size: 0.95rem; color: var(--text); }
.ssc-body {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 10px 34px;
  line-height: 1.45;
}
.ssc-body a {
  color: #3b82f6;
  font-weight: 700;
  text-decoration: none;
}
.ssc-body a:hover { text-decoration: underline; }
.support-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px 34px;
}
/* Variante simplificada: sin sangr?a ni numeraci?n */
.support-inputs-simple { margin-left: 0; }
.ssc-actions-simple { margin-left: 0; }
.support-inputs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.support-inputs label span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.support-input {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.support-input:focus {
  outline: 0;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.ssc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: 34px;
}
.ssc-actions button { font-size: 0.85rem; padding: 8px 14px; }
.support-status {
  margin: 10px 0 0 34px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.support-status-ok {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #065f46;
}
body.dark .support-status-ok { color: #6ee7b7; }
.support-status-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #991b1b;
}
body.dark .support-status-error { color: #fca5a5; }
.support-status-info {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #1e40af;
}
body.dark .support-status-info { color: #93c5fd; }
.support-status-ok strong,
.support-status-error strong,
.support-status-info strong { font-weight: 800; }

/* Nota de ayuda bajo el formulario de soporte */
.support-hint {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.5;
}
body.dark .support-hint {
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
}
.support-hint em {
  font-style: normal;
  font-weight: 700;
  color: #b45309;
}
body.dark .support-hint em { color: #fcd34d; }

/* ============================================================
   CAJ?N DE DINERO ? settings en Admin
   ============================================================ */
.drawer-settings {
  margin-top: 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 12px;
}
body.dark .drawer-settings {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(59, 130, 246, 0.1));
  border-color: rgba(167, 139, 250, 0.35);
}
.drawer-settings h4 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  color: var(--text);
}
.drawer-hint,
.drawer-note {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.drawer-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 0.78rem;
}
.drawer-note em {
  font-style: normal;
  font-weight: 700;
  color: #b45309;
}
body.dark .drawer-note em { color: #fcd34d; }

.drawer-selects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
}
.drawer-select-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-select-row span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.drawer-select {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.drawer-select:focus {
  outline: 0;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}



/* ============================================================
   TERMINAL SQUARE ? Diagn?stico en Admin
   ============================================================ */
.terminal-settings-section {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.06), rgba(0, 200, 255, 0.04));
  border: 1.5px solid rgba(0, 122, 255, 0.20);
  border-radius: 14px;
  padding: 16px 18px;
}
.terminal-settings-section h3 { color: #0077ff; margin-top: 0; }

/* ── Panel "Método de cobro activo" (auto-detección, visible al dueño) ── */
.card-method-section {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.07), rgba(0, 122, 255, 0.05));
  border: 1.5px solid rgba(124, 58, 237, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
}
.card-method-section h3 { color: #6d28d9; margin-top: 0; }
.card-method-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 10px;
}
.card-method-status .cm-status-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  font-size: 0.92rem;
  color: var(--text);
}
.card-method-status .cm-status-text #cm-status-label { font-weight: 850; }
.cm-eyebrow {
  color: var(--text-muted);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.cm-refresh-btn {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}
.cm-status-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #999; flex-shrink: 0;
}
.cm-status-dot.cm-ok   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.22); }
.cm-status-dot.cm-warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.22); }

.cm-pref-block { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cm-pref-label { font-weight: 700; font-size: 0.88rem; color: var(--text); }
.cm-pref-block select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 0.9rem;
}

.cm-method-grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) { .cm-method-grid { grid-template-columns: 1fr; } }
.cm-method-card {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 15px;
  background: var(--card);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cm-method-card.is-ready { border-color: rgba(34, 197, 94, .38); }
.cm-method-card.has-warning { border-color: rgba(245, 158, 11, .38); }
.cm-method-card.is-active-method {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12), 0 12px 26px rgba(71, 36, 135, .10);
}
.cm-method-card.is-active-method::after {
  content: 'EN USO';
  position: absolute;
  right: -31px;
  top: 13px;
  width: 112px;
  padding: 3px 0;
  transform: rotate(38deg);
  background: #7c3aed;
  color: #fff;
  text-align: center;
  font-size: .59rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.cm-method-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.cm-device-thumb {
  width: 58px;
  height: 48px;
  padding: 3px;
  object-fit: contain;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 11px;
  background: #fff;
}
.cm-method-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-method-head strong { font-size: .9rem; line-height: 1.2; }
.cm-method-head small { color: var(--text-muted); font-size: .7rem; line-height: 1.25; }
.cm-method-badge {
  border-radius: 999px;
  padding: 5px 8px;
  white-space: nowrap;
  font-size: .65rem;
  font-weight: 900;
}
.cm-badge-checking, .cm-badge-standby { color: #1d4ed8; background: #dbeafe; }
.cm-badge-ready { color: #166534; background: #dcfce7; }
.cm-badge-warning { color: #92400e; background: #fef3c7; }
.cm-badge-off { color: #475569; background: #e2e8f0; }
.cm-method-card > p {
  min-height: 38px;
  margin: 12px 0 10px;
  font-size: .76rem;
  line-height: 1.4;
}
.cm-mini-steps {
  display: flex;
  gap: 5px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.cm-mini-steps li {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: .63rem;
  font-weight: 750;
}
.cm-mini-steps li span {
  display: inline-grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2, #f1f5f9);
  color: var(--text);
  font-size: .66rem;
  font-weight: 900;
}
.cm-method-action {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f1f5f9;
  color: #0f172a;
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
  cursor: pointer;
}
.cm-sdk-card .cm-method-action { background: #dcfce7; color: #166534; }
.cm-terminal-card .cm-method-action { background: #dbeafe; color: #1e40af; }
.cm-fallback-help {
  margin-top: 13px;
  border-top: 1px dashed var(--border);
  padding-top: 11px;
}
.cm-fallback-help summary { cursor: pointer; color: var(--text-muted); font-size: .76rem; font-weight: 800; }
.cm-fallback-help p { margin: 8px 0 0; }

/* Guía oficial del aparato real usado por Mobile Payments SDK. */
.sdk-real-guide {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(16, 185, 129, .28);
  border-radius: 15px;
  background: rgba(240, 253, 244, .62);
}
.sdk-real-device {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 185, 129, .20);
}
.sdk-real-device img {
  width: 104px;
  height: 82px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}
.sdk-real-device > div { display: flex; flex-direction: column; gap: 4px; }
.sdk-real-device strong { color: #064e3b; font-size: .92rem; }
.sdk-real-device small { color: #047857; font-size: .72rem; line-height: 1.35; }
.sdk-model-pill {
  width: max-content;
  border-radius: 999px;
  padding: 3px 7px;
  background: #d1fae5;
  color: #047857;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.sdk-real-steps { display: grid; gap: 8px; margin-top: 12px; }
.sdk-real-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  align-items: start;
  border: 1px solid rgba(15, 118, 110, .14);
  border-radius: 11px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .74);
}
.sdk-step-num {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-weight: 950;
  font-size: .75rem;
}
.sdk-real-step > div { display: flex; flex-direction: column; gap: 2px; }
.sdk-real-step strong { color: #134e4a; font-size: .78rem; }
.sdk-real-step small { color: #475569; font-size: .7rem; line-height: 1.38; }
.sdk-step-orange { border-color: rgba(249, 115, 22, .32); background: rgba(255, 247, 237, .82); }
.sdk-step-orange .sdk-step-num { background: #ea580c; }
.sdk-step-green { border-color: rgba(34, 197, 94, .34); background: rgba(240, 253, 244, .90); }
.sdk-step-green .sdk-step-num { background: #16a34a; }
body.dark .sdk-real-guide { background: rgba(6, 78, 59, .20); }
body.dark .sdk-real-step { background: rgba(15, 23, 42, .68); }
body.dark .sdk-real-step small { color: #cbd5e1; }
@media (max-width: 560px) {
  .cm-method-head { grid-template-columns: 52px minmax(0, 1fr); }
  .cm-method-badge { grid-column: 2; width: max-content; }
  .cm-mini-steps { flex-direction: column; }
  .sdk-real-device { grid-template-columns: 82px 1fr; }
  .sdk-real-device img { width: 82px; height: 70px; }
}

/* ── Pagos 2026: panel estable, selector segmentado y pruebas reales ── */
.card-method-section {
  background: transparent;
  border: 0;
  padding: 0;
}
.card-method-section h3 { color: var(--text); }
.cm-intro {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.5;
}
.card-method-status {
  min-height: 76px;
  margin-top: 0;
  padding: 16px 18px;
  border: 1px solid rgba(124, 58, 237, .24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(37,99,235,.07));
}
.card-method-status .cm-status-text #cm-status-label {
  font-size: 1.04rem;
  line-height: 1.25;
}
#cm-status-detail {
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.3;
}
.cm-refresh-btn {
  min-width: 112px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--card);
}
.cm-switch-block {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}
.cm-switch-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}
.cm-switch-heading strong { font-size: .9rem; }
.cm-switch-heading span { color: var(--text-muted); font-size: .7rem; }
.cm-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(100,116,139,.08);
}
.cm-segmented button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cm-segmented button:hover { color: var(--text); background: rgba(255,255,255,.45); }
.cm-segmented button.is-selected,
.cm-segmented button[aria-pressed="true"] {
  border-color: rgba(124,58,237,.25);
  background: var(--card);
  color: #6d28d9;
  box-shadow: 0 5px 16px rgba(51, 35, 92, .12);
}
.cm-segmented button > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.cm-segmented b { font-size: .8rem; line-height: 1.2; }
.cm-segmented small { color: var(--text-muted); font-size: .62rem; line-height: 1.2; }
.cm-seg-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  background: rgba(124,58,237,.10);
  font-weight: 950;
}
.cm-pref-explainer {
  margin: 9px 3px 0;
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.35;
}
.cm-method-grid {
  margin-top: 16px;
  gap: 14px;
}
.cm-method-card {
  min-height: 238px;
  padding: 18px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}
.cm-method-card.is-active-method {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.11), 0 12px 28px rgba(49,32,86,.10);
}
.cm-method-card.is-active-method::after { display: none; }
.cm-method-card.is-selected-method:not(.is-active-method) {
  border-color: rgba(124,58,237,.42);
  background: linear-gradient(180deg, var(--card), rgba(124,58,237,.035));
}
.cm-method-head { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 12px; }
.cm-device-thumb { width: 68px; height: 58px; border-radius: 13px; }
.cm-method-head strong { font-size: .95rem; }
.cm-method-head small { font-size: .71rem; }
.cm-method-badge { padding: 6px 10px; font-size: .68rem; }
.cm-live-status {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: start;
  min-height: 70px;
  margin: 17px 0 15px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.cm-live-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148,163,184,.15);
}
.cm-live-dot.tone-ready { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.16); }
.cm-live-dot.tone-warning { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.16); }
.cm-live-dot.tone-off { background: #94a3b8; }
.cm-live-status strong { display: block; font-size: .82rem; line-height: 1.25; }
.cm-live-status p {
  min-height: 0;
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: .71rem;
  line-height: 1.38;
}
.cm-method-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: auto;
}
.cm-method-action,
.cm-test-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 11px;
  padding: 9px 10px;
  font: inherit;
  font-size: .74rem;
  font-weight: 900;
  cursor: pointer;
}
.cm-test-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.cm-test-btn:hover { border-color: #7c3aed; color: #6d28d9; }
.cm-method-action { border: 0; }
.cm-test-result {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.35;
}
.cm-test-result.is-testing { color: #1d4ed8; background: #dbeafe; }
.cm-test-result.is-ok { color: #166534; background: #dcfce7; }
.cm-test-result.is-warn { color: #92400e; background: #fef3c7; }
.cm-test-result.is-bad { color: #991b1b; background: #fee2e2; }
.cm-simple-note {
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(100,116,139,.08);
  color: var(--text-muted);
  font-size: .7rem;
  line-height: 1.4;
}
body.dark .cm-segmented button:hover { background: rgba(255,255,255,.05); }
body.dark .cm-segmented button.is-selected,
body.dark .cm-segmented button[aria-pressed="true"] { color: #c4b5fd; }

@media (max-width: 760px) {
  .settings-card-box.size-payment { width: 96vw; height: 92dvh; max-height: 92dvh; }
  .cm-segmented { grid-template-columns: 1fr; }
  .cm-segmented button { justify-content: flex-start; min-height: 46px; }
  .cm-switch-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .cm-method-grid { grid-template-columns: 1fr; }
  .cm-method-card { min-height: 226px; }
}
@media (max-width: 500px) {
  .settings-card-modal-body { padding: 14px; }
  .card-method-status { align-items: flex-start; flex-wrap: wrap; }
  .cm-refresh-btn { width: 100%; }
  .cm-method-head { grid-template-columns: 58px minmax(0, 1fr); }
  .cm-device-thumb { width: 58px; height: 50px; }
  .cm-method-badge { grid-column: 2; }
}

/* ── Configuración limpia de SDK y Terminal ── */
.settings-card-modal-body > .square-settings-section > :not(h3):not(.sdk-clean-setup) {
  display: none !important;
}
.payment-setup-clean { color: var(--text); }
.psc-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 108px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(37,99,235,.05));
}
.psc-hero img {
  width: 112px;
  height: 78px;
  object-fit: contain;
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 14px;
  background: #fff;
}
.psc-hero-copy { min-width: 0; }
.psc-kicker {
  display: block;
  margin-bottom: 4px;
  color: #7c3aed;
  font-size: .63rem;
  font-weight: 950;
  letter-spacing: .09em;
}
.psc-hero h4 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.psc-hero p { margin: 5px 0 0; color: var(--text-muted); font-size: .76rem; line-height: 1.4; }
.psc-status {
  padding: 7px 11px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 900;
}
.psc-status.is-checking { color: #1d4ed8; background: #dbeafe; }
.psc-status.is-ok { color: #166534; background: #dcfce7; }
.psc-status.is-warn { color: #92400e; background: #fef3c7; }
.psc-status.is-bad { color: #991b1b; background: #fee2e2; }
.psc-visual-guide-btn {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(124,58,237,.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(37,99,235,.06));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.psc-visual-guide-btn.is-terminal {
  border-color: rgba(37,99,235,.30);
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.06));
}
.psc-visual-guide-btn:hover {
  transform: translateY(-1px);
  border-color: #7c3aed;
  box-shadow: 0 8px 22px rgba(49,32,86,.10);
}
.psc-vg-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #7c3aed;
  color: #fff;
  font-size: .78rem;
}
.is-terminal .psc-vg-icon { background: #2563eb; }
.psc-visual-guide-btn > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.psc-visual-guide-btn strong { font-size: .78rem; }
.psc-visual-guide-btn small { color: var(--text-muted); font-size: .65rem; line-height: 1.3; }
.psc-vg-arrow { color: #7c3aed; font-size: 1.15rem; font-weight: 950; }
.is-terminal .psc-vg-arrow { color: #2563eb; }
.psc-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.psc-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  min-height: 170px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.psc-step-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #7c3aed;
  color: #fff;
  font-size: .82rem;
  font-weight: 950;
}
.psc-step-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.psc-step h5,
.psc-choice h5,
.psc-terminal-test h5 { margin: 1px 0 4px; font-size: .88rem; line-height: 1.25; }
.psc-step p,
.psc-choice p,
.psc-terminal-test p { margin: 0 0 11px; color: var(--text-muted); font-size: .71rem; line-height: 1.42; }
.psc-step a { color: #2563eb; font-weight: 800; }
.psc-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin: 2px 0 10px;
}
.psc-field-grid label { min-width: 0; }
.psc-field-grid label > span { display: block; margin-bottom: 4px; font-size: .68rem; font-weight: 850; }
.psc-field-grid input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--text);
  font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  box-sizing: border-box;
}
.psc-field-grid small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .58rem; }
.psc-primary-btn,
.psc-secondary-btn,
.psc-test-btn {
  min-height: 39px;
  padding: 9px 15px;
  border-radius: 10px;
  font: inherit;
  font-size: .73rem;
  font-weight: 900;
  cursor: pointer;
}
.psc-primary-btn { border: 0; background: #7c3aed; color: #fff; }
.psc-secondary-btn { border: 1px solid var(--border); background: var(--card); color: var(--text); }
.psc-test-btn { border: 1px solid #2563eb; background: #eff6ff; color: #1d4ed8; }
.psc-step .psc-primary-btn { margin-top: auto; }
.psc-primary-btn:disabled,
.psc-secondary-btn:disabled,
.psc-test-btn:disabled { opacity: .55; cursor: wait; }
.psc-result {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: .71rem;
  font-weight: 750;
  line-height: 1.4;
}
.psc-result.is-testing { color: #1d4ed8; background: #dbeafe; }
.psc-result.is-ok { color: #166534; background: #dcfce7; }
.psc-result.is-warn { color: #92400e; background: #fef3c7; }
.psc-result.is-bad { color: #991b1b; background: #fee2e2; }
.psc-advanced {
  margin-top: 14px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.psc-advanced summary {
  padding: 11px 0;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}
.psc-advanced-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 12px;
}
.psc-advanced button {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.psc-advanced button.is-danger { color: #b91c1c; border-color: rgba(220,38,38,.28); }
.terminal-clean-setup .psc-hero {
  background: linear-gradient(135deg, rgba(37,99,235,.09), rgba(14,165,233,.05));
}
.terminal-clean-setup .psc-kicker { color: #2563eb; }
.terminal-clean-setup .ts-status-row {
  max-width: 230px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--card);
  font-size: .69rem;
  line-height: 1.25;
}
.psc-credential-banner {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(320px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 15px;
  background: rgba(255,251,235,.75);
}
.psc-credential-banner h5 { margin: 0 0 3px; font-size: .84rem; }
.psc-credential-banner p { margin: 0; color: var(--text-muted); font-size: .68rem; }
.psc-credential-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.psc-credential-fields label > span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: .61rem;
  font-weight: 800;
}
.psc-credential-fields input {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: 700 .74rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  box-sizing: border-box;
}
.psc-credential-action {
  display: flex;
  min-width: 105px;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.psc-credential-action > span {
  color: var(--text-muted);
  font-size: .6rem;
  font-weight: 800;
  text-align: center;
}
.psc-credential-action > span.is-ok { color: #166534; }
.psc-credential-action > span.is-warn { color: #b45309; }
body.dark .psc-credential-banner { background: rgba(120,53,15,.16); }
.terminal-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.psc-choice {
  min-height: 175px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.psc-choice.is-primary { border-color: rgba(37,99,235,.32); }
.psc-choice-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .07em;
}
.psc-choice-tag.is-muted { color: #475569; background: #e2e8f0; }
.psc-choice .psc-primary-btn,
.psc-choice .psc-secondary-btn { width: 100%; }
.psc-terminal-test {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 15px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}
.psc-terminal-test p { margin-bottom: 0; }
.psc-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 12px;
  cursor: pointer;
}
.psc-check-row input { width: 18px; height: 18px; margin-top: 1px; }
.psc-check-row span { display: flex; flex-direction: column; gap: 2px; }
.psc-check-row strong { font-size: .75rem; }
.psc-check-row small { color: var(--text-muted); font-size: .66rem; line-height: 1.35; }
body.dark .psc-test-btn { background: rgba(37,99,235,.16); color: #93c5fd; }

@media (max-width: 720px) {
  .psc-hero { grid-template-columns: 82px 1fr; }
  .psc-hero img { width: 82px; height: 64px; }
  .psc-status,
  .terminal-clean-setup .ts-status-row { grid-column: 2; width: max-content; max-width: 100%; }
  .psc-steps,
  .terminal-choice-grid { grid-template-columns: 1fr; }
  .psc-field-grid { grid-template-columns: 1fr; }
  .psc-credential-banner { grid-template-columns: 1fr; align-items: stretch; }
  .psc-credential-fields { grid-template-columns: 1fr; }
  .psc-credential-action { align-items: flex-start; }
}
@media (max-width: 480px) {
  .psc-hero { grid-template-columns: 66px 1fr; padding: 13px; gap: 12px; }
  .psc-hero img { width: 66px; height: 56px; }
  .psc-step { grid-template-columns: 30px 1fr; padding: 12px; }
  .psc-step-num { width: 28px; height: 28px; }
  .psc-terminal-test { grid-template-columns: 1fr; }
  .psc-terminal-test .psc-test-btn { width: 100%; }
}

.cm-connect-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.cm-connect-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.cm-connect-btn .cm-connect-icon { font-size: 1.4rem; flex-shrink: 0; }
.cm-connect-btn .cm-connect-text { display: flex; flex-direction: column; gap: 2px; }
.cm-connect-btn .cm-connect-text strong { font-size: 0.9rem; }
.cm-connect-btn .cm-connect-text small { font-size: 0.76rem; color: var(--text-muted); line-height: 1.3; }
.cm-connect-sdk { border-color: rgba(16,185,129,0.40); background: rgba(16,185,129,0.06); }
.cm-connect-terminal { border-color: rgba(0,122,255,0.40); background: rgba(0,122,255,0.06); }

.terminal-status-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text);
  margin-top: 10px;
}
.terminal-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #999;
}
.terminal-status-dot.terminal-status-ok   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.22); }
.terminal-status-dot.terminal-status-warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.22); }
.terminal-status-dot.terminal-status-err  { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.22); }

.terminal-diag-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tdr-loading {
  padding: 14px;
  text-align: center;
  color: var(--text-muted);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.tdr-header {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 1.02rem;
  font-weight: 800;
  text-align: center;
}
.tdr-header.tdr-ok  { background: rgba(34,197,94,0.12);  color: #16a34a; border: 1px solid rgba(34,197,94,0.28); }
.tdr-header.tdr-err { background: rgba(239,68,68,0.12); color: #dc2626; border: 1px solid rgba(239,68,68,0.28); }

.tdr-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
}
.tdr-card strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 0.95rem; }
.tdr-card.tdr-err  { border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.06); }
.tdr-card.tdr-warn { border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.06); }

.tdr-card ul, .tdr-card ol { margin: 4px 0 0; padding-left: 20px; }
.tdr-card li { margin-bottom: 4px; line-height: 1.4; }

.tdr-kv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  flex-wrap: wrap;
}
.tdr-kv span {
  color: var(--text-muted);
  font-size: 0.80rem;
  min-width: 90px;
}
.tdr-kv code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--text);
  border: 1px solid var(--border);
  word-break: break-all;
}

.tdr-device {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tdr-device + .tdr-device { margin-top: 6px; }
.tdr-device.tdr-device-match {
  border-color: rgba(34,197,94,0.50);
  background: rgba(34,197,94,0.07);
}
.tdr-id-row { flex-wrap: nowrap; }
.tdr-id {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdr-copy {
  flex-shrink: 0;
  padding: 4px 8px;
  background: rgba(0,122,255,0.12);
  color: #0077ff;
  border: 1px solid rgba(0,122,255,0.35);
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
}
.tdr-copy:hover { background: rgba(0,122,255,0.20); }
.tdr-badge {
  margin-top: 6px;
  display: inline-block;
  padding: 3px 8px;
  background: rgba(34,197,94,0.15);
  color: #16a34a;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}
.tdr-hint {
  font-size: 0.80rem;
  color: var(--text-muted);
  margin: 4px 0 6px;
}
.tdr-steps ol { padding-left: 22px; }
.tdr-steps li { margin-bottom: 6px; }

/* -- Terminal: Secci?n de emparejamiento -- */
.terminal-pair-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.tps-title {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
  margin: 0 0 4px;
}
.tps-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.btn-pair-terminal {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #0077ff, #00b4ff);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.btn-pair-terminal:disabled { opacity: 0.5; }
.btn-pair-terminal:active   { opacity: 0.8; }

.pair-result { margin-top: 12px; }
.pair-ok {
  background: rgba(34,197,94,0.08);
  border: 1.5px solid rgba(34,197,94,0.35);
  border-radius: 12px;
  padding: 16px;
}
.pair-code-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-align: center;
}
.pair-code {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 10px;
  text-align: center;
  color: #16a34a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 10px 0;
  background: rgba(34,197,94,0.12);
  border-radius: 10px;
  margin-bottom: 8px;
}
.pair-expiry {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 10px;
}
.pair-steps {
  padding-left: 20px;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.pair-steps li { margin-bottom: 2px; }
.pair-err {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 10px;
  padding: 12px;
  font-size: 0.88rem;
  color: #dc2626;
}

/* -- Terminal: input Device ID -- */
.terminal-device-input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 0;
  transition: border-color 140ms ease;
}
.terminal-device-input:focus {
  outline: 0;
  border-color: #0077ff;
  box-shadow: 0 0 0 3px rgba(0,119,255,0.15);
}

/* ============================================================
   TERMINAL SQUARE ? UI simplificada en Admin
   ============================================================ */
.ts-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
  font-size: 0.88rem;
  color: var(--text);
}
.ts-status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: #999;
  transition: background 250ms ease;
}
.ts-status-dot.ts-ok   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.22); }
.ts-status-dot.ts-warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.22); }
.ts-status-dot.ts-err  { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.22); }

.ts-main-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #0077ff, #00b4ff);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 150ms ease, transform 80ms ease;
}
.ts-main-btn:active   { transform: scale(0.98); opacity: 0.85; }
.ts-main-btn:disabled { opacity: 0.5; }

.ts-main-btn-secondary {
  background: rgba(120,120,130,0.15);
  color: var(--text);
  border: 1.5px solid var(--border);
}

/* Flujo primario: registro con c?digo */
.ts-primary-flow {
  padding: 16px;
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(0,180,255,0.06));
  border: 2px solid rgba(34,197,94,0.3);
  border-radius: 14px;
  margin: 14px 0 10px;
}
.ts-primary-title {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}
.ts-primary-desc {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.ts-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.ts-divider::before,
.ts-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* C?digo de emparejamiento */
.ts-pair-card {
  background: var(--card);
  border: 2px solid rgba(0,180,255,0.35);
  border-radius: 14px;
  padding: 16px;
}
.ts-pair-label {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ts-pair-code {
  text-align: center;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.25em;
  color: #00b4ff;
  padding: 14px 8px;
  background: rgba(0,180,255,0.08);
  border-radius: 12px;
  margin-bottom: 14px;
  text-shadow: 0 0 12px rgba(0,180,255,0.4);
  white-space: nowrap;
  overflow: hidden;
}
.ts-pair-steps {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
}
.ts-pair-steps li { margin-bottom: 6px; }
.ts-pair-steps strong { color: var(--text); }

.ts-pair-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: rgba(245,158,11,0.1);
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #f59e0b;
}
.ts-pair-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(245,158,11,0.3);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: ts-spin 0.8s linear infinite;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }

.ts-pair-loading {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
}
.ts-pair-err {
  padding: 14px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px;
  color: #ef4444;
  font-weight: 600;
  font-size: 0.9rem;
}
.ts-pair-success {
  padding: 16px;
  background: rgba(34,197,94,0.1);
  border: 2px solid rgba(34,197,94,0.4);
  border-radius: 12px;
  color: #22c55e;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

.ts-list-title {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.ts-device-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  transition: border-color 200ms ease;
}
.ts-device-card.ts-device-active {
  border-color: #22c55e;
  background: rgba(34,197,94,0.06);
}
.ts-device-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.ts-device-icon { font-size: 1.6rem; flex-shrink: 0; }
.ts-device-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.ts-device-model {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.ts-device-status {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.ts-use-btn {
  flex-shrink: 0;
  padding: 10px 16px;
  background: #0077ff;
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease;
}
.ts-use-btn:active { background: #005fcc; }
.ts-device-active-badge {
  flex-shrink: 0;
  padding: 8px 14px;
  background: rgba(34,197,94,0.15);
  color: #16a34a;
  font-weight: 800;
  font-size: 0.88rem;
  border-radius: 10px;
  white-space: nowrap;
}
.ts-err-card {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.30);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}

/* -- Terminal: resultado de prueba -- */
.ts-test-loading { padding:12px; font-size:0.88rem; color:var(--text-muted); text-align:center; }
.ts-test-ok {
  background:rgba(34,197,94,0.10); border:1.5px solid rgba(34,197,94,0.35);
  border-radius:10px; padding:12px 14px; font-size:0.88rem; color:var(--text); line-height:1.6;
}
.ts-test-err {
  background:rgba(239,68,68,0.08); border:1.5px solid rgba(239,68,68,0.35);
  border-radius:10px; padding:12px 14px; font-size:0.88rem; color:var(--text); line-height:1.6;
}
.ts-test-err code { font-size:0.80rem; word-break:break-all; display:block; margin-top:6px; color:#dc2626; }
.ts-fix {
  margin-top:8px; background:rgba(255,149,0,0.08); border:1px solid rgba(255,149,0,0.30);
  border-radius:10px; padding:10px 12px; font-size:0.84rem; color:var(--text); line-height:1.5;
}
.ts-fix a { color:#0077ff; }
.ts-test-raw { margin-top:8px; }
.ts-test-raw details summary { font-size:0.80rem; color:var(--text-muted); cursor:pointer; }
.ts-test-raw pre { font-size:0.72rem; overflow-x:auto; white-space:pre-wrap; word-break:break-all;
  background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px; margin-top:4px; }

/* ??????????????????????????????????????????
   MODAL DE ACTUALIZACI?N (reemplaza al banner)
   ?????????????????????????????????????????? */
.update-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: welcome-fade-in 0.2s ease-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.update-modal-box {
  background:
    radial-gradient(circle at top left, rgba(34,197,94,0.18), transparent 36%),
    var(--surface, #fff);
  border: 1px solid rgba(34,197,94,0.18);
  border-radius: 24px;
  padding: 30px 26px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  text-align: center;
}
.update-modal-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  background: linear-gradient(135deg, #22c55e, #0077ff);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,119,255,0.25);
  animation: welcome-logo-float 2.5s ease-in-out infinite;
}
.update-modal-title {
  font-size: 1.45rem;
  font-weight: 900;
  margin: 0 0 6px;
  color: var(--text, #111);
}
.update-modal-version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,122,255,0.10);
  color: #0077ff;
  font-size: 0.78rem;
  font-weight: 800;
}
.update-modal-body {
  font-size: 0.95rem;
  color: var(--text, #333);
  line-height: 1.55;
  margin: 0 0 22px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
}
.update-modal-body strong { color: #22c55e; }
.update-modal-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.update-modal-now {
  padding: 15px;
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(34,197,94,0.28);
  transition: transform 80ms ease;
}
.update-modal-now:active  { transform: scale(0.97); }
.update-modal-now:disabled{ opacity: 0.6; }
.update-modal-later {
  padding: 12px;
  background: transparent;
  color: var(--text-muted, #888);
  border: 1.5px solid var(--border, #ddd);
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.update-modal-later:active { opacity: 0.7; }

/* ??????????????????????????????????????????
   BANNER DE ACTUALIZACI?N (fallback / legacy)
   ?????????????????????????????????????????? */
.update-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #0077ff 0%, #22c55e 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  animation: update-slide-in 0.35s ease-out;
}
@keyframes update-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.update-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.update-banner-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  animation: update-pulse 1.4s ease-in-out infinite;
}
@keyframes update-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.update-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.update-banner-text strong {
  font-size: 1rem;
  font-weight: 800;
}
.update-banner-text span {
  font-size: 0.82rem;
  opacity: 0.92;
  margin-top: 1px;
}
.update-banner-btn {
  background: rgba(255,255,255,0.95);
  color: #0077ff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 80ms ease, background 150ms ease;
  flex-shrink: 0;
}
.update-banner-btn:active { transform: scale(0.96); background: #fff; }
.update-banner-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 1.6rem;
  width: 36px; height: 36px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 150ms ease;
  flex-shrink: 0;
}
.update-banner-close:hover { background: rgba(255,255,255,0.15); }

/* Dejar espacio al contenido para que no quede tapado por el banner */
body.has-update-banner #app { padding-top: 66px; }

@media (max-width: 500px) {
  .update-banner-text strong { font-size: 0.9rem; }
  .update-banner-text span   { font-size: 0.74rem; }
  .update-banner-btn         { padding: 8px 12px; font-size: 0.82rem; }
  .update-banner-inner       { padding: 10px 12px; gap: 10px; }
}

/* ??????????????????????????????????????????
   PANEL DE AYUDA R?PIDA ? RECONEXI?N
   ?????????????????????????????????????????? */
.help-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: border-color 200ms ease;
}
.help-card-warn {
  border-color: rgba(245,158,11,0.35);
  background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(239,68,68,0.04));
}

.help-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.help-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border-radius: 12px;
}
.help-title-wrap { flex: 1; min-width: 0; }
.help-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}
.help-status {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  transition: color 200ms ease;
}
.help-status.help-ok   { color: #22c55e; font-weight: 700; }
.help-status.help-err  { color: #ef4444; font-weight: 700; }
.help-status.help-warn { color: #f59e0b; font-weight: 700; }

.help-btn {
  width: 100%;
  padding: 13px;
  background: rgba(0,122,255,0.10);
  color: #007aff;
  border: 1.5px solid #007aff;
  border-radius: 11px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 80ms ease, background 150ms ease;
}
.help-btn:active   { transform: scale(0.98); }
.help-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.help-btn-primary  { /* base ya es azul primario */ }
.help-btn-warn {
  background: rgba(245,158,11,0.10);
  color: #d97706;
  border-color: #f59e0b;
}
.help-btn-warn:hover { background: rgba(245,158,11,0.18); }

.help-btn-diagnose {
  margin-top: 8px;
  width: 100%;
  padding: 11px;
  background: rgba(139,92,246,0.10);
  color: #7c3aed;
  border: 1.5px solid #8b5cf6;
  border-radius: 11px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 150ms;
}
.help-btn-diagnose:hover { background: rgba(139,92,246,0.18); }

.help-manual-steps {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
  font-size: 0.85rem;
}
.help-manual-steps summary {
  cursor: pointer;
  padding: 4px 0;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  outline: none;
  user-select: none;
}
.help-manual-steps summary:hover { color: var(--text, #111); }
.help-manual-steps[open] summary { margin-bottom: 6px; color: var(--text, #111); }
.help-manual-steps ol {
  margin: 8px 0 4px 0;
  padding-left: 22px;
  line-height: 1.6;
  color: var(--text, #333);
}
.help-manual-steps ol li { margin-bottom: 4px; }

.help-diagnose-result {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.6;
}
.help-diagnose-line { padding: 2px 0; }
.help-diag-ok   { color: #16a34a; }
.help-diag-warn { color: #d97706; }
.help-diag-err  { color: #dc2626; font-weight: 600; }
.help-diag-tip  { color: #2563eb; font-style: italic; }
.help-diagnose-running { opacity: 0.7; }

.help-steps {
  margin-top: 10px;
  padding-top: 6px;
  font-size: 0.88rem;
  color: var(--text);
}
.help-steps summary {
  cursor: pointer;
  padding: 8px 4px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.85rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.help-steps summary::before {
  content: '▶';
  display: inline-block;
  transition: transform 200ms ease;
  font-size: 0.8rem;
}
.help-steps[open] summary::before { transform: rotate(90deg); }
.help-steps summary::-webkit-details-marker { display: none; }

.help-steps-list {
  margin: 6px 0 0;
  padding-left: 22px;
  line-height: 1.65;
}
.help-steps-list li {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.88rem;
}
.help-steps-list li strong { color: var(--text); font-weight: 700; }

.help-reset-note {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* ?? Secci?n de pasos de troubleshooting en el modal ?? */
.help-troubleshoot {
  margin-top: 20px;
  border-top: 1.5px solid var(--border);
  padding-top: 16px;
}
.help-ts-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.help-ts-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.help-ts-head {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 6px;
}
.help-ts-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.help-ts-steps li { margin-bottom: 3px; }
.help-ts-steps strong { color: var(--text); }
.help-ts-steps em { font-style: italic; color: #0077ff; }

/* ?? Bot?n de acci?n dentro de cada tarjeta de soluci?n ?? */
.help-ts-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  background: var(--primary, #ff6b35);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s, transform 0.12s;
}
.help-ts-btn:hover  { background: var(--primary-dark, #e55a24); transform: translateY(-1px); }
.help-ts-btn:active { transform: translateY(0); }
.help-ts-btn-warn {
  background: #f59e0b;
}
.help-ts-btn-warn:hover { background: #d97706; }
.help-ts-card-warn {
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.05);
}

/* ?? Secci?n de emergencia: llamar / SMS ?? */
.help-emergency {
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(239,68,68,0.07), rgba(245,158,11,0.06));
  border: 1.5px solid rgba(239,68,68,0.25);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
}
.help-emergency-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 14px;
}
.help-emergency-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.help-emergency-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  flex: 1;
  transition: transform 80ms ease, opacity 150ms ease;
}
.help-emergency-btn:active { transform: scale(0.96); opacity: 0.85; }
.help-emergency-call {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 6px 20px rgba(34,197,94,0.35);
}
.help-emergency-sms {
  background: linear-gradient(135deg, #0077ff, #00b4ff);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,119,255,0.35);
}
.help-emergency-note {
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ??????????????????????????????????????????
   PANTALLA DE BIENVENIDA (Splash / Tap to start)
   ?????????????????????????????????????????? */
.welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFC72C; /* Amarillo FoodTrucks */
  isolation: isolate;
  overflow: hidden;
  animation: welcome-fade-in 0.18s ease-out;
}
@keyframes welcome-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.welcome-splash.welcome-fadeout {
  animation: welcome-fade-out 0.85s cubic-bezier(.22,.85,.24,1) forwards;
  pointer-events: none;
  background: #ffbf1f;
  will-change: opacity, filter, transform;
}

/* Mientras la portada está saliendo, el POS debajo aparece con un
   sutil fade-in para que el cruce con el blur se sienta natural y
   nunca se vea blanco entre las dos pantallas. */
body.welcome-exiting #pos-screen,
body.welcome-exiting #admin-screen,
body.welcome-exiting #app {
  animation: pos-reveal 0.7s ease-out forwards;
}
@keyframes pos-reveal {
  0%   { opacity: 0.0; filter: blur(8px); }
  35%  { opacity: 0.0; filter: blur(8px); }
  100% { opacity: 1.0; filter: blur(0); }
}
@keyframes welcome-fade-out {
  0%   { opacity: 1; filter: blur(0); transform: scale(1); }
  50%  { opacity: 1; filter: blur(10px); transform: scale(1.015); }
  85%  { opacity: 1; filter: blur(18px); transform: scale(1.03); }
  100% { opacity: 0; filter: blur(22px); transform: scale(1.04); }
}
.welcome-splash.welcome-fadeout .welcome-content {
  animation: welcome-content-out 0.78s cubic-bezier(.22,.85,.24,1) forwards;
}
.welcome-splash.welcome-fadeout .welcome-bg {
  animation: welcome-bg-out 0.85s cubic-bezier(.22,.85,.24,1) forwards;
}
@keyframes welcome-content-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.01); filter: blur(8px); }
  100% { opacity: 0; transform: translateY(-10px) scale(.99); filter: blur(16px); }
}
@keyframes welcome-bg-out {
  0%   { transform: scale(1); filter: blur(0); opacity: 1; }
  60%  { transform: scale(1.02); filter: blur(10px); opacity: 1; }
  100% { transform: scale(1.05); filter: blur(20px); opacity: 1; }
}

/* Fondo amarillo vibrante con gradiente c?lido tipo FoodTruck */
.welcome-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,179,0,0.9), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(255,140,0,0.5), transparent 60%),
    linear-gradient(135deg, #FFD54F 0%, #FFB300 50%, #FF9800 100%);
  animation: welcome-bg-move 14s ease-in-out infinite alternate;
}
/* Imagen personalizada LIMPIA (como la subió el dueño): sin velos ni oscuridad. */
.welcome-splash.has-custom-bg .welcome-bg {
  background-image: var(--welcome-custom-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: none;
  transform: none;
}
.welcome-splash.has-custom-bg.welcome-fadeout .welcome-bg {
  animation: welcome-bg-out 0.56s cubic-bezier(.22,.85,.24,1) forwards;
}
.welcome-splash.has-custom-bg .welcome-pattern {
  display: none;
}
@keyframes welcome-bg-move {
  from { transform: scale(1)   rotate(0deg); }
  to   { transform: scale(1.08) rotate(1deg); }
}

/* Patr?n de ?conos de comida flotantes ? tipo wallpaper alegre */
.welcome-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.wp-icon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: clamp(2rem, 5vw, 3.4rem);
  opacity: 0.35;
  filter: drop-shadow(0 4px 12px rgba(139,69,19,0.15));
  animation: wp-float 5s ease-in-out infinite;
  animation-delay: var(--d);
  transform-origin: center;
}
@keyframes wp-float {
  0%, 100% { transform: translateY(0)   rotate(-5deg) scale(1); }
  50%      { transform: translateY(-12px) rotate(5deg) scale(1.08); }
}

.welcome-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 30px;
  max-width: 460px;
  animation: welcome-rise 0.62s cubic-bezier(.16,1,.3,1);
}
.welcome-splash.has-custom-bg .welcome-content {
  max-width: 560px;
  padding: 34px 42px;
}
@keyframes welcome-rise {
  from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* C?rculo/logo central con anillo de color */
.welcome-logo-ring {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #fff8e1);
  box-shadow:
    0 24px 60px rgba(139,69,19,0.25),
    0 0 0 6px rgba(255,255,255,0.6),
    0 0 0 12px rgba(255,140,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: welcome-logo-float 2.8s ease-in-out infinite, welcome-logo-pop 0.58s cubic-bezier(.16,1,.3,1);
}
.welcome-splash.has-custom-bg .welcome-logo-ring {
  width: clamp(230px, 24vw, 320px);
  height: clamp(150px, 18vw, 220px);
  margin-bottom: 6px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.welcome-logo-inner {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-splash.has-custom-bg .welcome-logo-inner {
  width: 100%;
  height: 100%;
}
.welcome-logo-inner img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 50%;
}
.welcome-splash.has-custom-bg .welcome-logo-inner img,
.welcome-splash.has-custom-bg .welcome-logo-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.welcome-splash.has-custom-bg .welcome-logo-inner img {
  border-radius: 0;
  animation: welcome-logo-png-drift 3.6s ease-in-out infinite;
}
@keyframes welcome-logo-png-drift {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  50%      { transform: translateY(-6px) rotate(1.5deg) scale(1.025); }
}
.welcome-logo-svg {
  width: 130px;
  height: 130px;
}
@keyframes welcome-logo-float {
  0%, 100% { transform: translateY(0)   rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes welcome-logo-pop {
  0%   { transform: translateY(8px) scale(.96); opacity: 0; filter: blur(8px); }
  100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}
/* Mantener compatibilidad con la clase vieja .welcome-logo si alguien la usa */
.welcome-logo {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 16px;
  animation: welcome-logo-float 2.8s ease-in-out infinite;
}
.welcome-logo img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 26px;
}

.welcome-title {
  font-size: 2.4rem;
  font-weight: 900;
  color: #2b1810;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(255,255,255,0.4);
  font-family: "Fredoka", "Poppins", sans-serif;
}
.welcome-splash.has-custom-bg .welcome-title {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: -0.025em;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.55),
    0 7px 20px rgba(43,24,16,0.18);
  animation: welcome-title-breathe 4.2s ease-in-out infinite;
}
@keyframes welcome-title-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.012); }
}
.welcome-sub {
  font-size: 1rem;
  color: rgba(43,24,16,0.65);
  margin: 0 0 28px;
  font-weight: 600;
}
.welcome-splash.has-custom-bg .welcome-sub {
  display: none;
}

.welcome-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 38px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(135deg, #f84a4a 0%, #d7192b 100%);
  color: #fff;
  border: 3px solid #2b1810;
  border-radius: 100px;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 8px 0 #2b1810,
    0 16px 40px rgba(43,24,16,0.3);
  transition: transform 120ms ease, box-shadow 200ms ease;
  animation: welcome-btn-pulse 2.2s ease-in-out infinite;
  letter-spacing: 0.5px;
}
.welcome-splash.has-custom-bg .welcome-start-btn {
  min-width: min(390px, 88vw);
  justify-content: center;
  border-width: 2.5px;
  box-shadow:
    0 9px 0 #2b1810,
    0 20px 42px rgba(43,24,16,0.32),
    inset 0 1px 0 rgba(255,255,255,0.25);
  animation: welcome-fiesta-button 2.6s ease-in-out infinite;
  margin-top: 20px;
}
@keyframes welcome-fiesta-button {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 9px 0 #2b1810, 0 20px 42px rgba(43,24,16,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 13px 0 #2b1810, 0 26px 52px rgba(215,25,43,0.38), inset 0 1px 0 rgba(255,255,255,0.3);
  }
}
.welcome-start-btn:active {
  transform: translateY(6px);
  box-shadow:
    0 2px 0 #2b1810,
    0 6px 15px rgba(43,24,16,0.3);
}
@keyframes welcome-btn-pulse {
  0%, 100% { box-shadow: 0 8px 0 #2b1810, 0 16px 40px rgba(43,24,16,0.3); }
  50%      { box-shadow: 0 8px 0 #2b1810, 0 20px 50px rgba(229,57,53,0.5); }
}
.welcome-start-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.welcome-start-text {
  letter-spacing: 0.3px;
}

.welcome-hint {
  margin-top: 22px;
  font-size: 0.82rem;
  color: rgba(43,24,16,0.55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.welcome-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.3);
  animation: welcome-dot-blink 1.3s ease-in-out infinite;
}
@keyframes welcome-dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (max-width: 500px) {
  .welcome-logo       { font-size: 4rem; }
  .welcome-logo img   { width: 100px; height: 100px; }
  .welcome-title      { font-size: 1.55rem; }
  .welcome-start-btn  { padding: 15px 28px; font-size: 1.02rem; }
}

/* ============================================================
   TEMA OPCIONAL: Fiesta Taquería
   Se activa solo con body.theme-fiesta. El tema actual no se toca.
   ============================================================ */
body.theme-fiesta #pos-screen {
  background:
    radial-gradient(circle at 8% 10%, rgba(255,197,61,0.28), transparent 28%),
    radial-gradient(circle at 95% 0%, rgba(239,68,68,0.12), transparent 24%),
    radial-gradient(circle at 70% 90%, rgba(22,101,52,0.10), transparent 30%),
    #fff7df;
}
body.theme-fiesta .pos-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,248,226,0.92));
  border-color: #ead29b;
  box-shadow: 0 8px 28px rgba(93,47,14,0.10);
}
body.theme-fiesta .products-panel {
  background:
    radial-gradient(circle at 18% 14%, rgba(245,158,11,0.10), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(22,101,52,0.06), transparent 24%),
    rgba(255,250,235,0.82);
  border-color: #ead29b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}
body.theme-fiesta .search-wrap input {
  background: rgba(255,255,255,0.82);
  border: 1.5px solid #ead29b;
  box-shadow: 0 3px 10px rgba(93,47,14,0.06);
}
body.theme-fiesta .pos-cat-rail {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,248,226,0.68));
  border-color: #ead29b;
}
body.theme-fiesta .pos-cat-rail .category-btn:not(.active) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cat-color, #f59e0b) 24%, #fff8df), #fff4d6);
  border-color: color-mix(in srgb, var(--cat-color, #f59e0b) 58%, #ffffff);
  box-shadow:
    0 8px 18px rgba(93,47,14,0.10),
    inset 0 1px 0 rgba(255,255,255,0.72);
}
body.theme-fiesta .pos-cat-rail .category-btn:not(.active) .cat-icon {
  background: rgba(255,255,255,0.78);
  color: #2b1810;
  border: 2px solid color-mix(in srgb, var(--cat-color, #f59e0b) 74%, #ffffff);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--cat-color, #f59e0b) 34%, transparent);
}
body.theme-fiesta .product-card {
  background:
    linear-gradient(180deg, rgba(255,253,244,0.98), rgba(255,247,222,0.94));
  border: 1.5px solid #ecd5a3;
  border-radius: 18px;
  box-shadow:
    0 10px 22px rgba(93,47,14,0.10),
    inset 0 1px 0 rgba(255,255,255,0.86);
}
body.theme-fiesta .product-card:hover {
  border-color: #f59e0b;
  box-shadow:
    0 14px 30px rgba(93,47,14,0.16),
    0 0 0 2px rgba(245,158,11,0.22);
}
body.theme-fiesta .product-name {
  color: #24140d;
}
body.theme-fiesta .product-price {
  color: #166534;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
body.theme-fiesta .cart-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,253,244,0.96), rgba(255,247,222,0.96));
  border: 1.5px solid #e7c986;
  box-shadow: 0 10px 30px rgba(93,47,14,0.12);
}
body.theme-fiesta .cart-panel::before {
  content: '';
  display: block;
  height: 44px;
  margin: -2px -2px 8px;
  border-radius: 22px 22px 0 0;
  background:
    linear-gradient(90deg, #166534 0 12%, transparent 12% 14%, #f59e0b 14% 26%, transparent 26% 28%, #dc2626 28% 40%, transparent 40% 42%, #f59e0b 42% 54%, transparent 54% 56%, #166534 56% 68%, transparent 68% 70%, #dc2626 70% 82%, transparent 82% 84%, #f59e0b 84% 96%, transparent 96%),
    linear-gradient(180deg, rgba(255,255,255,0.65), transparent);
  opacity: 0.88;
  clip-path: polygon(0 0, 100% 0, 100% 54%, 96% 100%, 92% 54%, 88% 100%, 84% 54%, 80% 100%, 76% 54%, 72% 100%, 68% 54%, 64% 100%, 60% 54%, 56% 100%, 52% 54%, 48% 100%, 44% 54%, 40% 100%, 36% 54%, 32% 100%, 28% 54%, 24% 100%, 20% 54%, 16% 100%, 12% 54%, 8% 100%, 4% 54%, 0 100%);
}
body.theme-fiesta .checkout-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 36%),
    linear-gradient(135deg, #1d6b2e, #064e1f);
  border: 2px solid #083b18;
  box-shadow:
    0 6px 0 #083b18,
    0 16px 28px rgba(6,78,31,0.25);
}
body.theme-fiesta .checkout-btn:hover:not(:disabled) {
  box-shadow:
    0 8px 0 #083b18,
    0 20px 38px rgba(6,78,31,0.32);
}

/* ============================================================
   TEMA OPCIONAL: Taco Trail
   Variante más cercana al diseño visual de referencia.
   ============================================================ */
body.theme-trail {
  --trail-cream: #fff8e6;
  --trail-paper: #fff2cf;
  --trail-ink: #23140c;
  --trail-orange: #ff4b14;
  --trail-gold: #f9b416;
  --trail-green: #0f8f2f;
}
body.theme-trail #pos-screen {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,201,56,0.28), transparent 30%),
    radial-gradient(circle at 92% 86%, rgba(15,143,47,0.10), transparent 25%),
    linear-gradient(135deg, #fff7df, #fff0c4);
  border: 6px solid var(--trail-gold);
  box-sizing: border-box;
}
body.theme-trail .pos-header {
  margin: 6px 8px 0;
  width: calc(100% - 16px);
  min-height: 70px;
  border: 1.5px solid #efd594;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,252,241,0.98), rgba(255,244,210,0.96));
  box-shadow:
    0 8px 22px rgba(94,48,13,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
body.theme-trail .pos-header .brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}
body.theme-trail .pos-header .brand-logo img {
  object-fit: contain;
  border-radius: 0;
}
body.theme-trail .brand-text h1 {
  color: var(--trail-ink);
  font-weight: 950;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
body.theme-trail .top-action-btn,
body.theme-trail .cash-btn,
body.theme-trail .settings-btn,
body.theme-trail .admin-btn {
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border-color: #ecd29a;
  box-shadow: 0 5px 14px rgba(94,48,13,0.08);
}
body.theme-trail .order-number {
  background: linear-gradient(180deg, #ffb51f, var(--trail-orange));
  border: 2px solid rgba(96,42,8,0.18);
  color: #2b1607;
  box-shadow: 0 8px 0 rgba(120,54,9,0.18), 0 18px 28px rgba(255,75,20,0.22);
}
body.theme-trail .pos-layout {
  gap: 10px;
  padding: 8px;
}
body.theme-trail .products-panel {
  border: none;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 8%, rgba(255,194,46,0.12), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(239,68,68,0.05), transparent 24%),
    rgba(255,248,226,0.66);
  box-shadow: inset 0 0 0 1px rgba(236,210,154,0.72);
}
body.theme-trail .products-top-bar {
  padding-top: 8px;
}
body.theme-trail .search-wrap input {
  min-height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  border: 1.5px solid #ecd29a;
  color: var(--trail-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}
body.theme-trail .pos-cat-rail {
  border-radius: 18px;
  border: 1.5px solid #efd594;
  background:
    linear-gradient(180deg, rgba(255,252,241,0.94), rgba(255,244,210,0.92));
  box-shadow: 0 8px 24px rgba(94,48,13,0.10);
}
body.theme-trail .pos-cat-rail::after {
  content: '';
  display: block;
  height: 20px;
  margin: 6px 6px 0;
  border-radius: 0 0 14px 14px;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(249,180,22,0.45) 9px 13px),
    linear-gradient(90deg, rgba(255,75,20,0.18), rgba(15,143,47,0.14));
  clip-path: polygon(0 0, 100% 0, 100% 48%, 95% 100%, 90% 48%, 85% 100%, 80% 48%, 75% 100%, 70% 48%, 65% 100%, 60% 48%, 55% 100%, 50% 48%, 45% 100%, 40% 48%, 35% 100%, 30% 48%, 25% 100%, 20% 48%, 15% 100%, 10% 48%, 5% 100%, 0 48%);
}
body.theme-trail .pos-cat-rail .category-btn:not(.active) {
  min-height: 64px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cat-color, #f9b416) 18%, #fff8e6), #fff4d1);
  border: 1.5px solid color-mix(in srgb, var(--cat-color, #f9b416) 55%, #ffffff);
  box-shadow:
    0 6px 14px rgba(94,48,13,0.10),
    inset 0 1px 0 rgba(255,255,255,0.84);
  color: var(--trail-ink);
}
body.theme-trail .pos-cat-rail .category-btn:not(.active) .cat-icon {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.80);
  border: 2px solid color-mix(in srgb, var(--cat-color, #f9b416) 65%, #fff);
  color: var(--trail-ink);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--cat-color, #f9b416) 30%, transparent);
}
body.theme-trail .pos-cat-rail .category-btn .cat-name {
  font-weight: 950;
  text-transform: none;
  letter-spacing: -0.02em;
}
body.theme-trail .product-card {
  border-radius: 18px;
  border: 1.5px solid #ead29b;
  background:
    radial-gradient(circle at 88% 12%, rgba(249,180,22,0.08), transparent 32%),
    linear-gradient(180deg, rgba(255,253,244,0.99), rgba(255,247,222,0.97));
  box-shadow:
    0 8px 18px rgba(94,48,13,0.11),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
body.theme-trail .product-card:hover {
  transform: translateY(-2px);
  border-color: var(--trail-orange);
  box-shadow:
    0 14px 28px rgba(94,48,13,0.16),
    0 0 0 2px rgba(255,75,20,0.18);
}
body.theme-trail .product-card.has-special-card {
  border-color: var(--trail-orange);
}
body.theme-trail .product-card.has-special-card::before {
  content: '';
  position: absolute;
  inset: 6px auto auto 8px;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #ffb51f 0 32%, transparent 34%);
  opacity: .85;
  pointer-events: none;
}
body.theme-trail .product-name {
  color: var(--trail-ink);
  font-weight: 950;
}
body.theme-trail .product-price {
  color: #d9480f;
  font-weight: 950;
}
body.theme-trail .cart-panel {
  position: relative;
  border-radius: 18px;
  border: 1.5px solid #efd594;
  background:
    linear-gradient(180deg, rgba(255,253,244,0.98), rgba(255,247,222,0.98));
  box-shadow:
    0 8px 24px rgba(94,48,13,0.12),
    inset 0 1px 0 rgba(255,255,255,0.86);
}
body.theme-trail .cart-panel::before {
  content: '';
  display: block;
  height: 46px;
  margin: -1px -1px 8px;
  border-radius: 17px 17px 0 0;
  background:
    linear-gradient(90deg, #f97316 0 11%, transparent 11% 13%, #16a34a 13% 24%, transparent 24% 26%, #dc2626 26% 37%, transparent 37% 39%, #f59e0b 39% 50%, transparent 50% 52%, #16a34a 52% 63%, transparent 63% 65%, #db2777 65% 76%, transparent 76% 78%, #f59e0b 78% 89%, transparent 89%),
    linear-gradient(180deg, rgba(255,255,255,0.58), transparent);
  clip-path: polygon(0 0, 100% 0, 100% 54%, 96% 100%, 92% 54%, 88% 100%, 84% 54%, 80% 100%, 76% 54%, 72% 100%, 68% 54%, 64% 100%, 60% 54%, 56% 100%, 52% 54%, 48% 100%, 44% 54%, 40% 100%, 36% 54%, 32% 100%, 28% 54%, 24% 100%, 20% 54%, 16% 100%, 12% 54%, 8% 100%, 4% 54%, 0 100%);
}
body.theme-trail .cart-empty {
  color: #6b4a22;
}
body.theme-trail .cart-empty::before {
  content: '🚚';
  display: block;
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 6px 10px rgba(94,48,13,0.18));
}
body.theme-trail .cart-total-amount {
  color: #1a130c;
}
body.theme-trail .checkout-btn {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 40%),
    linear-gradient(135deg, #12882f, #08651f);
  border: 2px solid #0b4f1c;
  box-shadow:
    0 6px 0 #0b4f1c,
    0 16px 26px rgba(8,101,31,0.24);
  text-transform: none;
}
body.theme-trail .checkout-btn:hover:not(:disabled) {
  box-shadow:
    0 8px 0 #0b4f1c,
    0 22px 36px rgba(8,101,31,0.30);
}

/* ??????????????????????????????????????????
   PANTALLA COMPLETA ? safe areas (notch, barras)
   ?????????????????????????????????????????? */
html, body {
  /* Evita desbordes horizontales en modo fullscreen */
  overscroll-behavior: none;
}
body {
  /* Respetar notch/c?maras frontales cuando estamos en fullscreen */
  padding-top:    var(--app-safe-top);
  padding-bottom: var(--app-safe-bottom);
  padding-left:   var(--app-safe-left);
  padding-right:  var(--app-safe-right);
}
/* Cuando la app est? realmente en fullscreen (PWA o Fullscreen API)
   quitar los paddings de safe-area porque no hay barras */
@media all and (display-mode: fullscreen) {
  body { padding: 0 !important; }
}
/* En la APK Capacitor (edge-to-edge), SIEMPRE respetar safe-area
   para que las barras de sistema Android no tapen el contenido */
body.capacitor-native {
  --app-safe-top:    env(safe-area-inset-top, 0px);
  --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), 34px);
  --app-safe-left:   env(safe-area-inset-left, 0px);
  --app-safe-right:  env(safe-area-inset-right, 0px);
  padding-top:    var(--app-safe-top) !important;
  padding-bottom: var(--app-safe-bottom) !important;
  padding-left:   var(--app-safe-left) !important;
  padding-right:  var(--app-safe-right) !important;
  background: var(--bg, #f0f2f5);
}

body.capacitor-native .modal-overlay {
  padding-top:    var(--app-safe-top);
  padding-bottom: var(--app-safe-bottom);
  padding-left:   var(--app-safe-left);
  padding-right:  var(--app-safe-right);
}

body.capacitor-native .payment-box {
  max-height: min(760px, calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 16px));
}

/* ============================================================
   BACKUP / RESTORE CONFIG
   ============================================================ */
.cfg-backup-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.04));
  border: 1.5px solid rgba(99,102,241,0.18);
  border-radius: 16px;
  padding: 18px 20px;
}

.cfg-backup-icon {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.cfg-backup-body {
  flex: 1;
  min-width: 0;
}

.cfg-backup-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 5px;
}

.cfg-backup-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 12px;
}

.cfg-backup-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cfg-export-btn, .cfg-import-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.13s ease;
}

.cfg-export-btn {
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 3px 10px rgba(79,70,229,0.3);
}

.cfg-export-btn:hover {
  background: #4338ca;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(79,70,229,0.4);
}

.cfg-import-btn {
  background: rgba(99,102,241,0.1);
  color: #4f46e5;
  border: 1.5px solid rgba(99,102,241,0.3);
}

.cfg-import-btn:hover {
  background: rgba(99,102,241,0.18);
  transform: translateY(-1px);
}

body.dark .cfg-backup-card {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.25);
}

body.dark .cfg-import-btn {
  color: #818cf8;
  border-color: rgba(129,140,248,0.3);
  background: rgba(129,140,248,0.1);
}

/* ============================================================
   INFORMACI?N DEL NEGOCIO ? cuadr?cula de campos en Ajustes
   ============================================================ */
.biz-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .biz-info-grid { grid-template-columns: 1fr; }
}
.biz-info-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.biz-info-field input,
.biz-info-field select {
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 0.88rem;
  background: var(--card-active);
  color: var(--text);
  outline: none;
  transition: border-color 150ms ease;
}
.biz-info-field input:focus,
.biz-info-field select:focus {
  border-color: var(--accent);
  background: var(--card);
}

/* ── Impuesto de venta: "¿Cómo se aplica?" (radio cards) + preview ── */
.tax-mode-block { margin-top: 16px; }
.tax-mode-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tax-mode-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tax-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card-active);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tax-radio-card:hover { border-color: var(--border-mid); }
.tax-radio-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.trc-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  background: var(--card);
  position: relative;
  transition: border-color 0.15s ease;
}
.tax-radio-card input:checked + .trc-check { border-color: var(--accent); }
.tax-radio-card input:checked + .trc-check::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.tax-radio-card input:focus-visible + .trc-check {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.trc-text {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--text);
}
.trc-text strong { font-weight: 800; }
.tax-radio-card:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.tax-preview {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card-active));
  border: 1px solid var(--border);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.tax-preview strong { color: var(--text); font-weight: 800; }
body.dark .tax-radio-card {
  background: var(--card-active);
  border-color: var(--border-mid);
}

/* ??? Lista editable de redes sociales en el Admin ??? */
.social-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-account-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 10px;
}
.social-account-row select,
.social-account-row input {
  height: 36px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 0.88rem;
  background: var(--card);
  color: var(--text);
  outline: none;
}
.social-account-row select { font-weight: 800; }
.social-account-row input:focus,
.social-account-row select:focus { border-color: var(--accent); }
.social-account-del {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: rgba(239,68,68,0.10);
  color: #dc2626;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}
.social-account-del:hover { background: rgba(239,68,68,0.18); }
@media (max-width: 600px) {
  .social-account-row { grid-template-columns: 110px 1fr auto; gap: 6px; padding: 6px; }
  .social-account-row select { padding: 0 6px; font-size: 0.82rem; }
}

/* ============================================================
   EDITOR DE HISTORIAS / ESPECIALES DEL CLIENTE (QR)
   Aparece en Ajustes ? Negocio. Cada fila es una historia
   (imagen o video) que se publicar? en la p?gina de estado.
   ============================================================ */
/* ?? Stories admin ? nuevo layout con slides m?ltiples ?? */
.stories-admin-list { display:flex; flex-direction:column; gap:14px; }
.story-row {
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.story-row.is-inactive { opacity: 0.55; }

/* Tira horizontal de slides */
.story-slides-strip {
  display: flex;
  gap: 8px;
  padding: 12px 12px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  align-items: flex-start;
  background: rgba(0,0,0,0.12);
  border-bottom: 1px solid var(--border);
}

/* Cada slide */
.slide-thumb {
  flex-shrink: 0;
  width: 84px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slide-preview-wrap {
  width: 84px;
  height: 120px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(135deg,#1c1c26,#14141d);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: border-color .15s;
}
.slide-preview-wrap:hover { border-color: var(--accent); }
.slide-preview-wrap img,
.slide-preview-wrap video { width:100%;height:100%;object-fit:cover;display:block; }
.slide-preview-wrap .sp-empty { font-size:1.8rem;opacity:.45; }
.slide-dur-badge {
  position:absolute;
  bottom:4px; left:4px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:.6rem;
  font-weight:900;
  padding:2px 5px;
  border-radius:5px;
}
.slide-x-btn {
  position:absolute;
  top:4px; right:4px;
  width:20px;height:20px;
  border-radius:50%;
  background:rgba(0,0,0,.7);
  border:none;
  color:#fff;
  font-size:.7rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.slide-bottom-row {
  display:flex;
  align-items:center;
  gap:3px;
  margin-top:3px;
}
.slide-type-pill {
  width:28px; height:24px;
  border:1.5px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text-muted);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .12s,border-color .12s,color .12s;
}
.slide-type-pill.active {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.slide-dur-row {
  display:flex;align-items:center;gap:2px;
  font-size:.7rem;color:var(--text-muted);font-weight:700;
  margin-left:auto;
}
.slide-dur-inp {
  width:30px;
  padding:2px 3px;
  border:1.5px solid var(--border);
  border-radius:5px;
  background:var(--surface);
  color:var(--text);
  font-size:.72rem;
  font-weight:800;
  text-align:center;
}
.slide-url-inp {
  width:100%;
  padding:4px 6px;
  border:1.5px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  font-size:.7rem;
  margin-top:3px;
  box-sizing:border-box;
}
.sp-empty-icon {
  font-size:1.5rem;
  color:rgba(255,255,255,.3);
  font-weight:300;
  line-height:1;
}
/* Bot?n "Agregar slide" */
.slide-add-btn {
  flex-shrink:0;
  width:84px;
  height:120px;
  border-radius:9px;
  border:2px dashed var(--border);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:1.3rem;
  transition:border-color .15s,background .15s;
  align-self:flex-start;
}
.slide-add-btn small { font-size:.7rem;font-weight:800;opacity:.7; }
.slide-add-btn:hover { border-color:var(--accent);background:rgba(255,140,0,.06); }

/* Campos compartidos */
.story-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  min-width: 0;
}
.story-fields .sf-full { grid-column: 1 / -1; }
.story-fields label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.story-fields input[type="text"],
.story-fields input[type="url"],
.story-fields input[type="datetime-local"],
.story-fields input[type="number"],
.story-fields select,
.story-fields textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 500;
}
.story-fields textarea { min-height: 50px; resize: vertical; }
.story-fields .sf-toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.story-fields .sf-toggle input { width: auto; }
.story-fields .sf-link-promo span { color: var(--accent); }
.story-fields .sf-link-promo select {
  border-color: var(--accent);
  font-weight: 700;
}
.story-link-badge {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 2px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--accent-dim, rgba(255,87,34,0.10));
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}
body.dark .story-link-badge { background: rgba(255,87,34,0.16); }
.story-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.story-actions button {
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
.story-actions button.is-danger { color: #e02d2d; border-color: rgba(224,45,45,0.35); }
.story-actions button:hover { background: var(--card); }
.story-upload-input { display: none; }

/* ?? Numpad modal: tiempo de espera ?? */
.wait-numpad-sheet {
  background: var(--card);
  border-radius: 20px;
  padding: 0 0 12px;
  width: 280px;
  max-width: 96vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  overflow: hidden;
}
.wnp-header {
  background: var(--accent);
  padding: 18px 20px 14px;
  text-align: center;
}
.wnp-title {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255,255,255,.85);
  margin-bottom: 8px;
}
.wnp-display {
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.wnp-display small {
  font-size: 1rem;
  font-weight: 700;
  opacity: .75;
  margin-left: 4px;
}
.wnp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 16px 4px;
}
.wnp-key {
  height: 56px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .1s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wnp-key:active { transform: scale(.93); background: var(--card-active); }
.wnp-key-del { color: var(--text-muted); font-size: .9rem; }
.wnp-key-ok  {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-size: 1rem;
  font-weight: 900;
}
.wnp-key-ok:active { background: #d06800; }
.story-source-tabs {
  display: flex;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 4px;
}
.story-source-tab {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  border: none;
}
.story-source-tab.is-active {
  background: var(--accent);
  color: #fff;
}
.stories-admin-empty {
  text-align: center;
  padding: 30px 20px;
  border: 2px dashed var(--border);
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}
@media (max-width: 700px) {
  .story-row { grid-template-columns: 70px 1fr; }
  .story-preview { width: 70px; height: 100px; }
  .story-actions { grid-column: 1 / -1; flex-direction: row; }
  .story-actions button { flex: 1; }
  .story-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   BARRA DE B?SQUEDA DE PRODUCTOS ? en el panel de productos
   (ya no est? en el header ? siempre visible, sin animaci?n)
   ============================================================ */
.products-search-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 0 10px;
  height: 34px;
  margin-bottom: 6px;
  transition: border-color 160ms ease;
}
.products-search-row:focus-within {
  border-color: var(--accent);
  background: var(--card);
}
.psr-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-right: 6px;
  opacity: 0.6;
}
.psr-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
  height: 100%;
  padding: 0;
  min-width: 0;
}
.psr-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Products-top-bar ahora apila verticalmente (search arriba, cats abajo) */
.products-top-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  grid-template-columns: none !important;
}

/* ============================================================
   HEADER ACTIONS ? BOTONES UNIFORMES
   Todos los botones del header: mismo alto, mismo borde,
   mismo border-radius y mismo color base.
   ============================================================ */
.header-actions .order-lookup-btn,
.header-actions .help-btn,
.header-actions .tools-btn,
.header-actions .admin-btn {
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  background: var(--card-active);
  color: var(--text-muted);
  border-radius: 11px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
  white-space: nowrap;
}

/* Iconos cuadrados */
.header-actions .help-btn,
.header-actions .tools-btn {
  width: 34px;
  padding: 0;
  border-radius: 11px;  /* override circle del help-btn */
}

/* Botones con texto: padding lateral */
.header-actions .order-lookup-btn {
  padding: 0 12px;
  gap: 6px;
  font-size: 0.84rem;
}

.header-actions .admin-btn {
  padding: 0 14px;
  font-size: 0.84rem;
}

/* Hover uniforme */
.header-actions .order-lookup-btn:hover,
.header-actions .help-btn:hover,
.header-actions .tools-btn:hover,
.header-actions .admin-btn:hover {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(255,90,31,0.12);
}

/* Ocultar el separador ? ya no hace falta con estilo uniforme */
.header-actions .header-divider {
  display: none;
}

/* ============================================================
   CATEGOR?A "COLA" en el riel ? bot?n especial al final del riel
   con badge din?mico mostrando cu?ntas ?rdenes hay activas.
   ============================================================ */
.pos-cat-rail .cat-queue-btn {
  margin-top: 6px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  border-radius: 14px;
}

/* Badge de Cola ? inline al lado del nombre, dentro del bot?n.
   La sidebar tiene overflow:hidden (sin scroll horizontal), as?
   que el badge debe estar dentro del flujo del nombre. */
.cat-queue-btn .cat-queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.2px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  vertical-align: middle;
}

.cat-queue-btn.active .cat-queue-badge,
.cat-queue-btn.has-late-orders .cat-queue-badge,
.cat-queue-btn.has-late-orders.active .cat-queue-badge {
  background: #dc2626;
  color: #fff;
  border-color: #fff;
}

/* ============================================================
   COLA DE ?RDENES INLINE ? panel mostrado en lugar de productos
   cuando se selecciona la categor?a Cola.
   ============================================================ */
.products-grid.grid-queue-mode {
  display: block !important;
  grid-template-columns: none !important;
  grid-auto-rows: auto !important;
  padding: 14px 16px 18px !important;
  overflow-y: auto;
}

.queue-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(255, 90, 31, 0.05));
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 18px;
  margin-bottom: 14px;
}

body.dark .queue-inline-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(255, 90, 31, 0.08));
  border-color: rgba(245, 158, 11, 0.30);
}

.queue-offline-note {
  margin: -6px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.13);
  border: 1px solid rgba(245, 158, 11, 0.30);
  color: #a05e00;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

body.dark .queue-offline-note {
  color: #ffb34d;
  background: rgba(245, 158, 11, 0.16);
}

.ol-offline-note {
  margin: 10px auto 0;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #a05e00;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

body.dark .ol-offline-note {
  color: #ffb34d;
}

.qih-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.qih-emoji {
  font-size: 2rem;
  flex-shrink: 0;
}

.qih-text strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}

.qih-text small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 600;
}

.qih-stats {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.qih-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1.5px solid var(--border);
}

.qih-stat-pending {
  background: rgba(255, 90, 31, 0.10);
  border-color: rgba(255, 90, 31, 0.28);
}

.qih-stat-ready {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.34);
}

.qih-stat-num {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}

.qih-stat-pending .qih-stat-num { color: #ff5a1f; }
.qih-stat-ready .qih-stat-num { color: #22c55e; }

.qih-stat-label {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

/* Grid de tarjetas: en modo compacto las tarjetas son m?s chicas (m?s
   columnas), al expandir UNA toma protagonismo. */
.queue-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch; /* todos los cards igual de altos por fila */
}
@media (min-width: 980px) {
  .queue-inline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1320px) {
  .queue-inline-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.queue-inline-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  min-height: 150px;       /* m?nimo parejo aunque la orden tenga poco texto */
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
  outline: none;
}
.queue-inline-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,90,31,0.22);
}

.queue-inline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  border-color: var(--accent);
}

/* La tarjeta expandida ocupa m?s columnas para mostrar el detalle */
.queue-inline-card.qic-expanded {
  grid-column: 1 / -1;
  cursor: default;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
  border-color: var(--accent);
}

.queue-inline-card.qic-pending {
  border-left: 5px solid #ff5a1f;
}

.queue-inline-card.qic-ready {
  border-left: 5px solid #22c55e;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), var(--card));
}

.queue-inline-card.qic-done {
  opacity: 0.62;
  border-left: 5px solid #94a3b8;
}

.qic-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}

.queue-inline-card.qic-expanded .qic-top {
  border-bottom: 1px dashed var(--border);
}

.qic-num {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1;
}

/* Resumen compacto: # de items + nombres cortos + flecha indicando que
   se puede expandir. */
.qic-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 0;
}

.qic-summary-count {
  flex-shrink: 0;
  background: var(--card-active);
  color: var(--text);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.qic-summary-names {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qic-expand-chevron {
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: transform 200ms ease;
  margin-left: auto;
}

.queue-inline-card.qic-expanded .qic-expand-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Cuando una tarjeta est? expandida, ocultamos el resumen ? el body
   ya muestra todo. */
.queue-inline-card.qic-expanded .qic-summary {
  display: none;
}

.qic-time {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--card-active);
  padding: 4px 8px;
  border-radius: 10px;
}

.qic-status-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.qic-badge-pending {
  background: rgba(255, 90, 31, 0.14);
  color: #ff5a1f;
}

.qic-badge-ready {
  background: rgba(34, 197, 94, 0.18);
  color: #16a34a;
}

.qic-badge-done {
  background: rgba(148, 163, 184, 0.18);
  color: #64748b;
}

.qic-body {
  padding: 10px 14px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.qic-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.qic-item-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.qic-qty {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(255, 90, 31, 0.15);
  color: #ff5a1f;
  font-size: 0.78rem;
  font-weight: 900;
}

.qic-mod-line {
  margin-left: 10px;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.qic-mod-group {
  font-weight: 800;
  margin-right: 4px;
  color: var(--text);
}

.qic-mod-opt {
  display: inline-block;
  margin-right: 6px;
}

.qic-item-note {
  margin-top: 2px;
  margin-left: 10px;
  padding: 4px 8px;
  font-size: 0.74rem;
  color: #b45309;
  background: rgba(245, 158, 11, 0.10);
  border-left: 2px solid #f59e0b;
  border-radius: 4px;
  font-weight: 600;
}

.qic-item-muted {
  font-size: 0.84rem;
  color: var(--text-muted);
  font-style: italic;
}

.qic-footer {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
}

body.dark .qic-footer {
  background: rgba(255, 255, 255, 0.03);
}

.qic-actions {
  display: flex;
  gap: 8px;
}

.qic-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background 140ms ease;
}

.qic-btn:active {
  transform: scale(0.97);
}
.qic-btn:disabled,
.qod-btn:disabled,
.oq-ready-btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
  filter: grayscale(0.2);
  box-shadow: none !important;
  transform: none !important;
}

.qic-btn-ready {
  background: linear-gradient(135deg, #ff6a3d, #ff8a4c);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 90, 31, 0.32);
}
.qic-btn-ready:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 22px rgba(255, 90, 31, 0.42);
}

.qic-btn-deliver {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.30);
}
.qic-btn-deliver:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.42);
}

.qic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d4d4d8;
}
.qic-print-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.qic-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1.5px solid var(--border, #d4d4d8);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  letter-spacing: 0.2px;
}
.qic-btn:hover { transform: translateY(-1px); }
.qic-btn-ready {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  border-color: #1d4ed8;
}
.qic-btn-deliver {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  border-color: #15803d;
}
.qic-btn-print-customer {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
  border-color: #b45309;
}
.qic-btn-print-both {
  background: linear-gradient(135deg, #ff5a1f, #ff8a4f);
  color: #fff;
  border-color: #c2410c;
}

.qic-btn-print {
  flex: 0 0 46px;
  background: var(--card-active);
  border: 1.5px solid var(--border);
  color: var(--text);
}
.qic-btn-print:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.qic-status {
  text-align: center;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 10px 0;
  color: var(--text-muted);
}

.qic-status-done {
  color: #64748b;
}

/* Estado vac?o / mensaje */
.queue-inline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 30px;
  text-align: center;
  background: var(--card);
  border: 2px dashed var(--border);
  border-radius: 20px;
  color: var(--text);
  gap: 8px;
}

.qie-icon {
  font-size: 3.6rem;
  margin-bottom: 8px;
}

.queue-inline-empty h3 {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
}

.queue-inline-empty p {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.4;
}

.qie-toggle-btn {
  margin: 14px auto 0;
  display: block;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card-active);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.qie-toggle-btn:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   CART PEEK BUTTON ? visible SOLO cuando el carrito est? colapsado.
   Antes el bot?n ten?a `style="display:none"` inline y nunca aparec?a,
   dejando al cajero atrapado sin forma de reabrir la orden.
   ============================================================ */
.pos-layout:not(.cart-collapsed) #cart-peek-btn {
  display: none !important;
}
.pos-layout.cart-collapsed #cart-peek-btn {
  display: inline-flex !important;
}

/* ============================================================
   COLLAPSE BUTTON (?) ? junto a "Ver" / "Limpiar" en el header
   y CART PEEK alineado en la MISMA posici?n visual para que el
   cajero siempre toque el mismo punto al abrir/cerrar la orden.
   ============================================================ */

/* ============================================================
   CART HEADER ? sin t?tulo, tres botones de acci?n uniformes
   en naranja s?lido. Misma forma, mismo color, mismo tama?o.
   ============================================================ */
.cart-panel .cart-header.cart-header-no-title {
  padding: 12px 14px;
  justify-content: flex-end;
  gap: 0;
}

.cart-panel .cart-header.cart-header-no-title .cart-header-btns {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* P?ldora base de los botones del header del carrito.
   - cap-primary: NARANJA brillante (solo Ocultar) ? destaca visualmente.
   - cap-neutral: gris/contorneado (Hold, Limpiar) ? secundarios, sin
     competir visualmente con Ocultar. */
.cart-action-pill,
.cart-header-btns .held-orders-open-btn.cart-action-pill,
.cart-header-btns .clear-btn.cart-action-pill,
.cart-header-btns .collapse-cart-btn.cart-action-pill {
  height: 40px;
  min-height: 40px;
  padding: 0 14px 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  max-width: 160px;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.cart-action-pill .cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

.cart-action-pill .cap-text {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1px;
}

/* Badge para mostrar contador (ej: cantidad de ?rdenes en hold) */
.cart-action-pill .cap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  margin-left: 2px;
}

/* ?? PRIMARY (Ocultar) ? naranja s?lido brillante ??????????????????? */
.cart-action-pill.cap-primary {
  background: linear-gradient(135deg, #ff6a3d 0%, #ff8a4c 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 22px rgba(255, 90, 31, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.10);
}

.cart-action-pill.cap-primary .cap-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.cart-action-pill.cap-primary:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 12px 28px rgba(255, 90, 31, 0.42),
    0 3px 8px rgba(0, 0, 0, 0.14);
  filter: brightness(1.06);
}

/* ?? NEUTRAL (Hold, Limpiar) ? gris contorneado ????????????????????? */
.cart-action-pill.cap-neutral {
  background: var(--card-active);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* En tema personalizado, los pills usan el color "card" del tema para verse
   sólidos (no traslúcidos) sobre fondos con imagen. */
body.studio-themed:not(.dark) .cart-action-pill.cap-neutral {
  background: var(--studio-card, var(--card-active, #f0f2f7)) !important;
  border-color: var(--border, #e2e8f0) !important;
}
body.studio-themed.dark .cart-action-pill.cap-neutral {
  background: var(--card-active) !important;
  border-color: var(--border) !important;
}

.cart-action-pill.cap-neutral .cap-icon {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

body.dark .cart-action-pill.cap-neutral {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
body.dark .cart-action-pill.cap-neutral .cap-icon {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.cart-action-pill.cap-neutral:hover:not(:disabled) {
  background: var(--card-hover);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.cart-action-pill.cap-neutral:hover:not(:disabled) .cap-icon {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Limpiar tiene un acento rojo sutil al hover (acci?n destructiva) */
.cart-action-pill.cap-neutral.clear-btn:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red);
}
.cart-action-pill.cap-neutral.clear-btn:hover:not(:disabled) .cap-icon {
  background: rgba(239, 68, 68, 0.14);
  color: var(--red);
}

.cart-action-pill:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

.cart-action-pill:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* En portrait/tablet apretado: solo ?cono, los tres mismos. */
@media (max-width: 1100px) {
  .cart-action-pill .cap-text {
    display: none;
  }
  .cart-action-pill,
  .cart-header-btns .held-orders-open-btn.cart-action-pill,
  .cart-header-btns .clear-btn.cart-action-pill,
  .cart-header-btns .collapse-cart-btn.cart-action-pill {
    padding: 0;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    justify-content: center;
  }
  .cart-action-pill .cap-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    font-size: 0.62rem;
    margin-left: 0;
  }
  .cart-header-btns .cart-action-pill {
    position: relative;
  }
}

/* En vertical hay espacio ?til en el header del carrito: botones m?s tocables. */
@media (max-width: 1100px) and (orientation: portrait) {
  .cart-panel .cart-header.cart-header-no-title .cart-header-btns {
    gap: 10px;
  }

  .cart-action-pill,
  .cart-header-btns .held-orders-open-btn.cart-action-pill,
  .cart-header-btns .clear-btn.cart-action-pill,
  .cart-header-btns .collapse-cart-btn.cart-action-pill {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 52px;
    min-height: 52px;
    flex-basis: 56px;
    border-radius: 18px;
  }

  .cart-action-pill .cap-icon {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
  }

  .cart-action-pill .cap-badge {
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    font-size: 0.68rem;
  }
}

/* Cart peek (al colapsar) alineado a la altura del header del carrito,
   mismo borde derecho que ten?a el bot?n ?. As? al abrir/cerrar el
   cajero toca SIEMPRE el mismo punto en pantalla. */
.pos-layout #cart-peek-btn {
  top: 16px;
  right: 18px;
  height: 40px;
  padding: 0 14px 0 10px;
  border-radius: 14px;
  gap: 8px;
}

.pos-layout #cart-peek-btn .cart-peek-icon {
  width: 26px;
  height: 26px;
  font-size: 0.92rem;
}

.pos-layout #cart-peek-btn .cart-peek-meta strong {
  font-size: 0.92rem;
}

.pos-layout #cart-peek-btn .cart-peek-meta .cart-peek-count {
  font-size: 0.62rem;
}

/* ============================================================
   POS CATEGORY RAIL ? barra LATERAL vertical (r?pida para cajero)
   Reemplaza la barra horizontal superior. Todas las categor?as
   visibles de un vistazo, botones grandes para tocar, y libera
   espacio vertical para mostrar m?s productos.
   ============================================================ */
.pos-cat-rail {
  flex: 0 0 144px;
  width: 144px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  /* SIN scroll horizontal ? solo vertical, contenido contenido. */
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

body.dark .pos-cat-rail {
  background: rgba(15, 17, 23, 0.58);
  border-color: var(--border);
}

/* La barra de categor?as dentro del riel se vuelve VERTICAL.
   Solo scroll vertical, NUNCA horizontal ? los nombres largos
   hacen wrap en .cat-name (line-clamp 2). */
.pos-cat-rail .categories-bar {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  border: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.pos-cat-rail .categories-bar::-webkit-scrollbar {
  width: 4px;
  height: 0;
  display: block;
}
.pos-cat-rail .categories-bar::-webkit-scrollbar-track {
  background: transparent;
}
.pos-cat-rail .categories-bar::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 99px;
}

/* Botones del riel: ancho completo, altos, f?ciles de tocar */
.pos-cat-rail .category-btn {
  width: 100%;
  min-height: 60px;
  padding: 10px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: var(--card);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.pos-cat-rail .category-btn .cat-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cat-color, #64748b);
  color: #fff;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--cat-color, #64748b) 35%, transparent);
  transition: transform 160ms ease;
}

.pos-cat-rail .category-btn .cat-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: -0.1px;
  word-break: break-word;
  hyphens: auto;
}

.pos-cat-rail .category-btn:hover {
  background: var(--card-hover);
  border-color: var(--cat-color, var(--border-mid));
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.pos-cat-rail .category-btn:hover .cat-icon {
  transform: scale(1.06);
}

.pos-cat-rail .category-btn:active {
  transform: translateY(0);
}

.pos-cat-rail .category-btn.active {
  font-weight: 800;
  color: #1e293b !important;
  background: var(--card, #ffffff) !important;
  border: 1.5px solid var(--cat-color, var(--accent)) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cat-color, var(--accent)) 22%, transparent) !important;
}

.pos-cat-rail .category-btn.active .cat-name {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.pos-cat-rail .category-btn.active .cat-icon {
  background: var(--cat-color, #64748b) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--cat-color, #64748b) 35%, transparent) !important;
}

body.dark .pos-cat-rail .category-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
body.dark .pos-cat-rail .category-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Cuando se est? reordenando productos, el riel queda deshabilitado. */
body.rearrange-products .pos-cat-rail {
  opacity: 0.65;
  pointer-events: none;
}

/* La barra superior queda solo con la b?squeda ? sin separador inferior
   y sin grid de 2 columnas, para que el campo ocupe todo el ancho. */
.products-panel > .products-top-bar {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  padding-bottom: 6px;
}

/* ?? Riel responsive ?????????????????????????????????????????????
   El riel SIEMPRE queda vertical a la izquierda (no rompemos el
   side-by-side con el carrito). Solo se hace m?s angosto en pantallas
   chicas y al final solo muestra ?conos para que productos y carrito
   sigan teniendo espacio. */
@media (max-width: 1180px) {
  .pos-cat-rail {
    flex: 0 0 118px;
    width: 118px;
  }
  .pos-cat-rail .category-btn {
    min-height: 54px;
    padding: 8px 6px;
    font-size: 0.72rem;
  }
  .pos-cat-rail .category-btn .cat-icon {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
  }
}

/* Tablet en vertical (~768-900px ancho) ? riel angosto solo ?conos */
@media (max-width: 900px) {
  .pos-cat-rail {
    flex: 0 0 72px;
    width: 72px;
    border-radius: 16px;
  }
  .pos-cat-rail .categories-bar {
    padding: 8px 6px;
    gap: 5px;
  }
  .pos-cat-rail .category-btn {
    min-height: 56px;
    padding: 8px 4px;
    border-radius: 12px;
  }
  .pos-cat-rail .category-btn .cat-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  /* Ocultamos el nombre ? el ?cono y el color ya identifican la categor?a.
     El nombre completo aparece como tooltip al mantener presionado. */
  .pos-cat-rail .category-btn .cat-name {
    display: none;
  }
}

/* M?vil / portrait muy angosto (<640px) ? riel a?n m?s compacto */
@media (max-width: 640px) {
  .pos-cat-rail {
    flex: 0 0 60px;
    width: 60px;
    border-radius: 14px;
  }
  .pos-cat-rail .categories-bar {
    padding: 6px 4px;
    gap: 4px;
  }
  .pos-cat-rail .category-btn {
    min-height: 50px;
    padding: 6px 2px;
  }
  .pos-cat-rail .category-btn .cat-icon {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
  }
}

/* ============================================================
   AJUSTES FINALES ? COBRAR FULL WIDTH + COLA MAESTRO/DETALLE
   ============================================================ */

/* Quitamos Cola/Hold del footer; Cobrar usa todo el espacio. */
.cart-footer .cart-action-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.cart-footer #checkout-btn {
  width: 100%;
  min-height: 56px;
  grid-column: 1 / -1;
  font-size: 1.08rem;
}

/* Fichas compactas de ?rdenes: bonitas, modernas y f?ciles de escanear. */
.queue-inline-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.queue-inline-card {
  min-height: 112px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    var(--card);
}

.queue-inline-card .qic-top {
  padding: 14px 14px 6px;
  gap: 8px;
}

.queue-inline-card .qic-num {
  font-size: 1.9rem;
}

.queue-inline-card .qic-status-badge {
  font-size: 0.64rem;
  padding: 5px 8px;
}

.queue-inline-card .qic-summary {
  padding: 6px 14px 14px;
}

.queue-inline-card .qic-expand-chevron {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Detalle de orden: usa todo el espacio del panel de productos. */
.queue-order-detail {
  min-height: calc(100% - 92px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

.queue-order-detail.qic-pending { border-left: 6px solid #ff5a1f; }
.queue-order-detail.qic-ready { border-left: 6px solid #22c55e; }
.queue-order-detail.qic-done { border-left: 6px solid #94a3b8; opacity: 0.8; }

.qod-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(255,90,31,0.07), rgba(245,158,11,0.04)),
    var(--surface);
}

.qod-back-btn {
  height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--card-active);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.qod-back-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.qod-main-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.qod-num {
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 1000;
  color: var(--text);
  letter-spacing: -1px;
}

.qod-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.qod-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--card-active);
  white-space: nowrap;
}

.qod-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.qod-section-title {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.qod-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qod-item {
  padding: 18px 18px 16px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.qod-item-name {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 1.7rem;       /* ~2? m?s grande que antes */
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.2px;
}

.qod-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,90,31,0.14);
  color: #ff5a1f;
  font-size: 1.1rem;
  font-weight: 1000;
}

.qod-mod-line {
  margin: 12px 0 0 56px;
  color: var(--text);
  font-size: 1.05rem;     /* legible y bien espaciado */
  line-height: 1.45;
}

.qod-mod-group {
  display: inline-block;
  margin-right: 8px;
  color: var(--text);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

.qod-mod-opt {
  display: inline-block;
  margin-right: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.qod-item-note {
  margin: 12px 0 0 56px;
  padding: 10px 14px;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  background: rgba(245,158,11,0.12);
  color: #92400e;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.qod-item-muted {
  padding: 18px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 800;
}

.qod-footer {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.qod-actions {
  /* SIEMPRE en una sola fila ? Cliente, Cocina, Ambos, Avisar Lista
     en ese orden. Avisar Lista al final, un toque m?s grande.
     ! important para ganarle a cualquier override viejo. */
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1.4fr !important;
  gap: 6px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

.qod-btn {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
}

.qod-btn-ready {
  background: linear-gradient(135deg, #ff6a3d, #ff8a4c);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255,90,31,0.32);
}

.qod-btn-deliver {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  box-shadow: 0 10px 24px rgba(34,197,94,0.30);
}

.qod-btn-print {
  min-width: 132px;
  border: 1.5px solid var(--border);
  background: var(--card-active);
  color: var(--text);
}
/* ??? Barra de acciones del detalle de orden ???????????????????????
   Avisar Lista = bot?n GRANDE (primary)
   Cliente / Cocina / Ambos = MISMO TAMA?O los tres
*/
.qod-btn-primary {
  /* Bot?n principal "Avisar Lista" ? un poco m?s grande pero compacto */
  min-height: 56px;
  padding: 0 10px !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  letter-spacing: 0.2px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qod-tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 56px;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 900;
  border: 1.5px solid var(--border, #d4d4d8);
  background: #fff;
  color: var(--text, #1f2937);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  letter-spacing: 0.1px;
  min-width: 0;
  overflow: hidden;
}
.qod-tk-btn .tk-ic { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.qod-tk-btn .tk-lb { font-weight: 900; overflow: hidden; text-overflow: ellipsis; }
.qod-tk-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.qod-tk-customer {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
  border-color: #b45309;
  box-shadow: 0 4px 10px rgba(245,158,11,0.25);
}
.qod-tk-kitchen {
  background: linear-gradient(135deg, #1f2937, #374151);
  color: #fff;
  border-color: #111827;
  box-shadow: 0 4px 10px rgba(31,41,55,0.30);
}
.qod-tk-both {
  background: linear-gradient(135deg, #ff5a1f, #ff8a4f);
  color: #fff;
  border-color: #c2410c;
  box-shadow: 0 4px 10px rgba(255,90,31,0.25);
}
/* Tablet / pantallas medianas ? texto un toque menor pero misma fila */
@media (max-width: 920px) {
  .qod-actions { grid-template-columns: 1fr 1fr 1fr 1.3fr !important; gap: 5px !important; }
  .qod-tk-btn  { font-size: 0.78rem; padding: 0 4px; min-height: 52px; }
  .qod-btn-primary { font-size: 0.9rem !important; padding: 0 8px !important; min-height: 52px; }
  .qod-tk-btn .tk-ic { font-size: 1rem; }
}
/* Tablet vertical / m?vil grande ? solo ?cono en los tickets para
   conservar UNA SOLA FILA y aprovechar el espacio para la lista de
   productos arriba */
@media (max-width: 720px) {
  .qod-actions { grid-template-columns: 1fr 1fr 1fr 1.2fr !important; gap: 5px !important; }
  .qod-tk-btn .tk-lb { display: none; }
  .qod-tk-btn .tk-ic { font-size: 1.3rem; }
  .qod-btn-primary { font-size: 0.85rem !important; }
}
/* M?vil peque?o ? fila ?nica siempre, todo compacto */
@media (max-width: 420px) {
  .qod-actions { grid-template-columns: 1fr 1fr 1fr 1.4fr !important; }
  .qod-btn-primary { padding: 0 6px !important; }
  .qod-tk-btn { padding: 0; }
  .qod-tk-btn .tk-ic { font-size: 1.2rem; }
}

.qod-status {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 900;
}

@media (max-width: 900px) {
  .qod-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .qod-meta {
    justify-content: flex-start;
  }
  /* qod-actions mantiene siempre el grid de 4 columnas (Cliente/Cocina/Ambos/Avisar Lista) */
  .qod-btn-print {
    min-width: 0;
  }
}

/* ============================================================
   MODAL: Checklist de reconexi?n de Terminal Square
   ============================================================ */
.terminal-checklist-modal { z-index: 13500; }
.terminal-checklist-box {
  width: min(560px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 24px;
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.10));
  box-shadow: 0 30px 80px rgba(15,23,42,0.30);
  overflow: hidden;
}
.tch-head {
  position: relative;
  padding: 24px 24px 16px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,107,0,0.10), rgba(59,130,246,0.08));
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.tch-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.10));
  background: var(--card, #fff);
  color: var(--text-muted, #666);
  font-size: 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tch-close:hover { background: var(--card-active, #f5f5f5); color: var(--text, #1a1a1a); }
.tch-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  font-size: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6a3d, #3b82f6);
  color: #fff;
  box-shadow: 0 8px 22px rgba(59,130,246,0.30);
}
.tch-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text, #1a1a1a);
  margin: 0 0 6px;
}
.tch-subtitle {
  font-size: 0.92rem;
  color: var(--text-muted, #666);
  margin: 0;
  line-height: 1.4;
}
.tch-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tch-item {
  display: grid;
  grid-template-columns: 28px 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border, rgba(0,0,0,0.10));
  background: var(--card, #fff);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text, #1a1a1a);
  transition: background .14s ease, border-color .14s ease, transform .08s ease;
}
.tch-item:hover { border-color: rgba(59,130,246,0.40); background: var(--surface, #fafafa); }
.tch-item:active { transform: scale(.99); }
.tch-item.checked {
  border-color: rgba(34,197,94,0.55);
  background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(20,184,166,0.06));
}
.tch-item-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-mid, #ccc);
  background: var(--card, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .14s ease, border-color .14s ease;
}
.tch-item-check-inner {
  font-size: 0.85rem;
  font-weight: 900;
  color: transparent;
}
.tch-item.checked .tch-item-check {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #16a34a;
}
.tch-item.checked .tch-item-check-inner { color: #fff; }
.tch-item-emoji {
  font-size: 1.4rem;
  text-align: center;
  line-height: 1;
}
.tch-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tch-item-text strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text, #1a1a1a);
  line-height: 1.25;
}
.tch-item-text small {
  font-size: 0.78rem;
  color: var(--text-muted, #666);
  font-weight: 500;
  line-height: 1.35;
}
.tch-progress {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted, #666);
  text-align: center;
  padding: 8px 14px 0;
}
.tch-progress span { color: var(--accent, #ff6a3d); font-weight: 900; }
.tch-actions {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 14px 18px 18px;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,0.02));
}
.tch-secondary, .tch-primary {
  min-height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .08s ease, box-shadow .14s ease;
}
.tch-secondary {
  border: 1.5px solid var(--border, rgba(0,0,0,0.10));
  background: var(--card, #fff);
  color: var(--text-muted, #555);
}
.tch-secondary:hover { background: var(--card-active, #f5f5f5); color: var(--text, #1a1a1a); }
.tch-primary {
  border: 0;
  background: linear-gradient(135deg, #ff6a3d, #ff8a4c);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255,107,0,0.25);
}
.tch-primary.all-checked {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 10px 28px rgba(34,197,94,0.35);
}
.tch-primary:active { transform: scale(.98); }
.tch-arrow { font-weight: 900; }

@media (max-width: 600px) {
  .terminal-checklist-box { border-radius: 18px; }
  .tch-actions { grid-template-columns: 1fr; }
  .tch-secondary { order: 2; }
  .tch-primary { order: 1; }
}

body.dark .terminal-checklist-box { background: var(--card, #1d1d1d); border-color: rgba(255,255,255,0.10); }
body.dark .tch-item { background: var(--card, #1d1d1d); border-color: rgba(255,255,255,0.08); }
body.dark .tch-item:hover { background: rgba(255,255,255,0.04); }
body.dark .tch-item.checked { background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(20,184,166,0.10)); }
body.dark .tch-item-check { background: var(--card-active, #2a2a2a); border-color: rgba(255,255,255,0.20); }
body.dark .tch-close { background: var(--card-active, #2a2a2a); border-color: rgba(255,255,255,0.08); color: var(--text, #f1f1f1); }

/* ============================================================
   Alerta de Cola sin popup ? la atenci?n vive en el bot?n.
   ============================================================ */
.queue-late-pill { display: none !important; } /* Por si qued? render viejo */

/* Snooze inline DENTRO de cada tarjeta tardada ? compacto, 4 p?ldoras en fila */
.qic-snooze-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 32px;
  gap: 4px;
  padding: 6px 12px 10px;
  margin-top: auto; /* empuja al fondo del card */
}
.qic-snooze-btn {
  min-height: 28px;
  padding: 3px 0;
  border-radius: 8px;
  border: 1.5px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  color: #b91c1c;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.qic-snooze-btn:hover {
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.60);
}
.qic-snooze-btn:active { transform: scale(.94); }
.qic-snooze-btn.qic-snooze-custom {
  background: var(--card, #fff);
  color: var(--text-muted, #555);
  border-color: var(--border, rgba(0,0,0,0.10));
  font-size: 1rem;
  line-height: 1;
}
body.dark .qic-snooze-btn { color: #fca5a5; background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.45); }
body.dark .qic-snooze-btn.qic-snooze-custom { background: rgba(255,255,255,0.05); color: var(--text, #f1f1f1); border-color: rgba(255,255,255,0.10); }

/* Cuando ya est? snoozeada, calma la tarjeta */
.queue-inline-card.is-snoozed {
  border-color: rgba(148,163,184,0.55) !important;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.18), 0 4px 12px rgba(15,23,42,0.06) !important;
  animation: none !important;
  opacity: 0.85;
}
.qic-snoozed-badge {
  background: linear-gradient(135deg, #94a3b8, #64748b) !important;
}

/* Tarjeta tardada dentro del listado de Cola: pulso suave */
.queue-inline-card.is-late {
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.18), 0 6px 18px rgba(239,68,68,0.18);
  animation: qic-late-pulse 2.4s ease-in-out infinite;
}
@keyframes qic-late-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.18), 0 6px 18px rgba(239,68,68,0.18); }
  50%      { box-shadow: 0 0 0 2px rgba(239,68,68,0.45), 0 10px 26px rgba(239,68,68,0.32); }
}
.qic-late-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #fff;
  box-shadow: 0 3px 10px rgba(239,68,68,0.30);
  vertical-align: middle;
}

/* ============================================================
   Cola button ? atenci?n fuerte cuando hay ?rdenes tardadas
   (la alerta ya NO es un popup; vive aqu? + sonido + vibraci?n)
   ============================================================ */
.cat-queue-btn.has-late-orders,
.cat-queue-btn.has-late-orders.active {
  position: relative;
  /* Solo el glow corre infinito como atenci?n visual continua.
     El SHAKE se dispara cuando suena la alerta (clase .shake-burst),
     para que el ritmo visual coincida con el sonido. */
  animation: cat-queue-late-glow 1.0s ease-in-out infinite;
  border: 3px solid #dc2626 !important;
  background: linear-gradient(135deg, #dc2626 0%, #f97316 100%) !important;
  color: #fff !important;
  z-index: 5;
}

/* Shake de un solo disparo, sincronizado con cada toque del sonido. */
.cat-queue-btn.has-late-orders.shake-burst,
.cat-queue-btn.has-late-orders.active.shake-burst {
  animation:
    cat-queue-late-shake 0.7s cubic-bezier(.36,.07,.19,.97) 1,
    cat-queue-late-glow  1.0s ease-in-out infinite;
}
.cat-queue-btn.has-late-orders .cat-name,
.cat-queue-btn.has-late-orders .cat-emoji,
.cat-queue-btn.has-late-orders svg,
.cat-queue-btn.has-late-orders .icon {
  color: #fff !important;
  fill: #fff !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.20));
}
/* Anillo expansivo doble (efecto sirena) */
.cat-queue-btn.has-late-orders::after,
.cat-queue-btn.has-late-orders::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  border: 2px solid rgba(239,68,68,0.65);
  animation: cat-queue-late-ring 1.8s cubic-bezier(.2,.8,.4,1) infinite;
}
.cat-queue-btn.has-late-orders::before {
  animation-delay: 0.9s; /* segundo anillo desfasado */
  border-color: rgba(245,158,11,0.55);
}
@keyframes cat-queue-late-ring {
  0%   { transform: scale(1);    opacity: 0.95; }
  70%  { opacity: 0.15; }
  100% { transform: scale(1.65); opacity: 0; }
}
@keyframes cat-queue-late-glow {
  0%, 100% { box-shadow: 0 6px 22px rgba(239,68,68,0.65); }
  50%      { box-shadow: 0 18px 42px rgba(239,68,68,0.95), 0 0 0 8px rgba(239,68,68,0.30); }
}
@keyframes cat-queue-late-shake {
  0%, 100%  { transform: translateX(0) rotate(0); }
  6%, 18%   { transform: translateX(-1.4px) rotate(-1.6deg); }
  12%, 24%  { transform: translateX(1.4px) rotate(1.6deg); }
  30%       { transform: translateX(0) rotate(0); }
  /* 30-100% queda quieto para que la sacudida sea cada ?2.4 s, no constante */
}
/* Cuando hay ?rdenes tardadas, el badge SOLO cambia ligeramente de color
   (rojo intenso) ? sin animaci?n propia para que nunca se vea cortado.
   El bot?n ya hace shake + glow + anillos expansivos. */
.cat-queue-badge.badge-late-pulse,
#queue-badge-count-cart.badge-late-pulse {
  background: #dc2626 !important;
  color: #fff !important;
  font-weight: 900 !important;
  border: 3px solid #fff !important;
}

/* Borde pulsante del panel de productos ? REMOVIDO por petici?n del usuario.
   Solo el bot?n Cola hace shake + glow + anillos como alerta visual.
   El elemento .products-panel-late-ring2 se sigue ocultando por si qued?
   alguno en el DOM. */
body.has-late-orders-screen .products-panel-late-ring2 { display: none !important; }

/* ============================================================
   COLA V2 ? dise?o limpio tipo fichas de cocina
   Sobrescribe el dise?o anterior para evitar encimados.
   ============================================================ */
.products-grid.grid-queue-mode {
  padding: 12px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.025), transparent 220px);
}

.products-grid.grid-queue-mode .queue-inline-header {
  min-height: 72px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.products-grid.grid-queue-mode .qih-emoji {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff6a3d, #ff8a4c);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 8px 20px rgba(255,90,31,0.26);
}

.products-grid.grid-queue-mode .qih-text strong {
  font-size: 1.15rem;
  letter-spacing: -0.3px;
}

.products-grid.grid-queue-mode .qih-stats {
  gap: 8px;
}

.products-grid.grid-queue-mode .qih-stat {
  min-width: 88px;
  padding: 8px 12px;
  border-radius: 14px;
  box-shadow: none;
}

.products-grid.grid-queue-mode .qih-mode-btn {
  min-width: 116px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--card-active);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.products-grid.grid-queue-mode .qih-mode-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-1px);
}

.products-grid.grid-queue-mode .qih-mode-btn.is-history {
  background: linear-gradient(135deg, #ff6a3d, #ff8a4c);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(255,90,31,0.22);
}

.products-grid.grid-queue-mode .qih-stat-num {
  font-size: 1.25rem;
}

.products-grid.grid-queue-mode .qih-stat-label {
  font-size: 0.58rem;
  line-height: 1.05;
}

/* Lista de fichas: siempre ordenada y sin elementos encima. */
.products-grid.grid-queue-mode .queue-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.products-grid.grid-queue-mode .queue-inline-card {
  appearance: none;
  width: 100%;
  min-height: 150px;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  text-align: left;
  border: 1.5px solid var(--border);
  border-left-width: 6px;
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(0,0,0,0.06);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.products-grid.grid-queue-mode .queue-inline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

.products-grid.grid-queue-mode .queue-inline-card.qic-pending {
  border-left-color: #ff6a3d;
}

.products-grid.grid-queue-mode .queue-inline-card.qic-ready {
  border-left-color: #22c55e;
  background: linear-gradient(180deg, rgba(34,197,94,0.06), var(--card) 46%);
}

.products-grid.grid-queue-mode .queue-inline-card.qic-done {
  border-left-color: #94a3b8;
  opacity: 0.72;
}

.qic-ticket-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 13px 7px;
}

.products-grid.grid-queue-mode .qic-ticket-num .qic-num {
  font-size: 2rem;
  font-weight: 1000;
  letter-spacing: -1px;
  line-height: 1;
}

.products-grid.grid-queue-mode .qic-ticket-num .qic-time {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--card-active);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.qic-ticket-info {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  align-content: start;
  padding: 3px 13px 9px;
}

.products-grid.grid-queue-mode .qic-status-badge {
  margin: 0;
  justify-self: start;
  max-width: 100%;
  font-size: 0.66rem;
  padding: 5px 9px;
  line-height: 1;
  letter-spacing: 0.35px;
}

.products-grid.grid-queue-mode .qic-summary-count {
  justify-self: end;
  padding: 5px 9px;
  font-size: 0.68rem;
  line-height: 1;
}

.products-grid.grid-queue-mode .qic-summary-names {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-grid.grid-queue-mode .qic-expand-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin: 0;
  border-top: 1px solid var(--border);
  color: var(--accent);
  background: rgba(255,90,31,0.06);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

/* Detalle: layout simple de pantalla completa dentro del panel. */
.products-grid.grid-queue-mode .queue-order-detail {
  min-height: calc(100vh - 210px);
  border-radius: 20px;
  border: 1px solid var(--border);
  border-left-width: 7px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

.products-grid.grid-queue-mode .qod-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--surface);
}

.products-grid.grid-queue-mode .qod-back-btn {
  grid-row: 1 / span 2;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
}

.products-grid.grid-queue-mode .qod-main-title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.products-grid.grid-queue-mode .qod-num {
  font-size: 2.25rem;
}

.products-grid.grid-queue-mode .qod-meta {
  grid-column: 2;
  justify-content: flex-start;
}

.products-grid.grid-queue-mode .qod-content {
  padding: 16px;
}

.products-grid.grid-queue-mode .qod-items {
  gap: 10px;
}

.products-grid.grid-queue-mode .qod-item {
  border-radius: 15px;
  padding: 13px;
  background: var(--surface);
}

.products-grid.grid-queue-mode .qod-footer {
  position: sticky;
  bottom: 0;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
}

/* NOTA: NO sobreescribimos qod-actions aqu? ? el layout de 4 columnas
   (Cliente / Cocina / Ambos / Avisar Lista) est? definido en la regla
   .qod-actions principal y debe respetarse en TODOS los modos. */

.products-grid.grid-queue-mode .qod-btn {
  min-height: 54px;
  border-radius: 16px;
}

/* Detalle de cola: acciones siempre visibles; solo el detalle hace scroll. */
.products-grid.grid-queue-mode.grid-queue-detail-mode {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
}

.products-grid.grid-queue-mode.grid-queue-detail-mode .queue-inline-header,
.products-grid.grid-queue-mode.grid-queue-detail-mode .queue-offline-note {
  flex: 0 0 auto;
}

.products-grid.grid-queue-mode.grid-queue-detail-mode .queue-order-detail {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.products-grid.grid-queue-mode.grid-queue-detail-mode .qod-header,
.products-grid.grid-queue-mode.grid-queue-detail-mode .qod-footer {
  flex: 0 0 auto;
}

.products-grid.grid-queue-mode.grid-queue-detail-mode .qod-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 18px;
}

.products-grid.grid-queue-mode.grid-queue-detail-mode .qod-footer {
  position: relative;
  bottom: auto;
  z-index: 5;
  background: var(--surface);
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
}

/* (Override viejo de 2-cols removido ? usamos siempre el grid de 4 cols) */

@media (max-width: 900px) {
  .products-grid.grid-queue-mode .queue-inline-header {
    align-items: stretch;
    flex-direction: column;
  }
  .products-grid.grid-queue-mode .qih-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .products-grid.grid-queue-mode .qih-mode-btn {
    grid-column: 1 / -1;
    min-height: 42px;
  }
  .products-grid.grid-queue-mode .queue-inline-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .products-grid.grid-queue-mode .queue-inline-card {
    min-height: 138px;
  }
  .products-grid.grid-queue-mode .qic-ticket-info {
    grid-template-columns: 1fr;
  }
  .products-grid.grid-queue-mode .qic-summary-count {
    justify-self: start;
  }
  .products-grid.grid-queue-mode .qod-header {
    grid-template-columns: 1fr;
  }
  .products-grid.grid-queue-mode .qod-back-btn,
  .products-grid.grid-queue-mode .qod-meta {
    grid-column: auto;
    grid-row: auto;
  }
  /* En esta resoluci?n mantenemos el grid de 4 columnas ? los media queries
     principales de .qod-actions (a 920/720/420 px) ya manejan la reducci?n
     de tama?os para que TODO siga cabiendo en una sola fila. */
}

/* Riel de categor?as: conservar scroll t?ctil cuando haga falta, pero
   sin mostrar el mini scrollbar cuando las categor?as caben. */
.pos-cat-rail .categories-bar {
  scrollbar-width: none !important;
}

.pos-cat-rail .categories-bar::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ============================================================
   CIERRE DE TURNO / CORTE DE CAJA
   ============================================================ */
.header-actions .shift-close-btn {
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1.5px solid rgba(245, 158, 11, 0.32);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(255, 90, 31, 0.12));
  color: #92400e;
  border-radius: 11px;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
  white-space: nowrap;
}
.header-actions .shift-close-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18);
}
body.dark .header-actions .shift-close-btn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(255, 90, 31, 0.14));
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.28);
}

.tool-shift-close-btn {
  border-color: rgba(245, 158, 11, 0.28) !important;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 237, 213, 0.92)) !important;
}
body.dark .tool-shift-close-btn {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.36), rgba(124, 45, 18, 0.25)) !important;
}

.shift-close-overlay {
  position: fixed;
  inset: 0;
  z-index: 32000;
  background:
    radial-gradient(circle at top left, rgba(255, 90, 31, 0.10), transparent 34%),
    linear-gradient(135deg, var(--bg), var(--surface));
  color: var(--text);
}
body.dark .shift-close-overlay {
  background:
    radial-gradient(circle at top left, rgba(255, 90, 31, 0.12), transparent 34%),
    linear-gradient(135deg, var(--bg), var(--surface));
}

.shift-close-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shift-close-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: calc(14px + var(--app-safe-top)) 18px 12px;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}
body.dark .shift-close-topbar { background: rgba(26, 29, 39, 0.86); }

.shift-close-back {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1.5px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
}

.shift-close-title-wrap { min-width: 0; }
.shift-close-kicker {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.shift-close-title-wrap h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.08;
}
.shift-close-title-wrap p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.shift-close-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shift-close-ghost,
.shift-close-print,
.shift-close-save,
.shift-clear-count {
  min-height: 42px;
  border-radius: 14px;
  border: 1.5px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
}
.shift-close-print {
  background: var(--tint-blue);
  color: var(--tint-blue-text);
  border-color: rgba(59, 130, 246, 0.24);
}
.shift-close-save {
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(255, 90, 31, 0.22);
}

.shift-close-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
}

.shift-close-main { min-width: 0; }
.shift-close-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 14px;
  margin-bottom: 16px;
}
.shift-close-hero > div {
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
.shift-pill {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.shift-close-hero h3 {
  margin: 12px 0 4px;
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  line-height: 0.95;
}
.shift-close-hero p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 700;
}

.shift-diff-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.shift-diff-card span,
.shift-diff-card small { color: var(--text-muted); font-weight: 800; }
.shift-diff-card strong { font-size: 2rem; line-height: 1; }
.shift-diff-card.ok { border-color: var(--tint-green-brd); background: var(--tint-green); }
.shift-diff-card.ok strong { color: var(--green); }
.shift-diff-card.over { border-color: #f59e0b; background: var(--tint-yellow); }
.shift-diff-card.over strong { color: #b45309; }
.shift-diff-card.short { border-color: #fca5a5; background: var(--tint-red); }
.shift-diff-card.short strong { color: var(--red); }

.shift-close-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr) minmax(280px, 360px);
  gap: 16px;
  align-items: start;
}
.shift-panel,
.shift-summary-card,
.shift-settings-card,
.shift-history-section {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.shift-panel { padding: 16px; }
.shift-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.shift-panel-head h4 {
  margin: 0;
  font-size: 1rem;
}
.shift-panel-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.shift-form-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 13px;
}
.shift-form-row label,
.shift-config-grid label {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--text-muted);
}
.shift-form-row input,
.shift-form-row textarea,
.shift-config-grid input {
  width: 100%;
  border: 1.5px solid var(--border-mid);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 15px;
  padding: 12px 13px;
  font: inherit;
  font-weight: 800;
  outline: none;
}
.shift-form-row textarea { resize: vertical; min-height: 92px; }

.shift-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shift-selector button {
  min-height: 48px;
  border: 1.5px solid var(--border-mid);
  border-radius: 16px;
  background: var(--card);
  color: var(--text-muted);
  font-weight: 900;
  cursor: pointer;
}
.shift-selector button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 18px rgba(255, 90, 31, 0.18);
}

.shift-denom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
}
.shift-denom-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 13px;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  background: linear-gradient(180deg, var(--card), var(--bg-tint));
}
.shift-denom-card.coin { background: linear-gradient(180deg, var(--tint-yellow), var(--card)); }
.shift-denom-label {
  font-size: 1.1rem;
  font-weight: 1000;
  color: var(--text);
}
.shift-denom-card input {
  width: 100%;
  border: 1.5px solid var(--border-mid);
  border-radius: 14px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 900;
  text-align: center;
  padding: 10px 6px;
}
.shift-denom-card small {
  color: var(--text-muted);
  font-weight: 900;
  text-align: right;
}

.shift-summary-panel {
  position: sticky;
  top: 12px;
}
.shift-summary-card {
  padding: 16px;
}
.shift-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.shift-summary-head span {
  font-weight: 1000;
  font-size: 1rem;
}
.shift-summary-head strong {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-tint);
  color: var(--text-muted);
  font-size: 0.75rem;
}
.shift-money-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text-muted);
  font-weight: 800;
}
.shift-money-line strong { color: var(--text); }
.shift-money-line.expected,
.shift-money-line.counted {
  color: var(--text);
  font-size: 1rem;
}
.shift-money-line.diff {
  border-bottom: 0;
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
}
.shift-money-line.diff.ok { background: var(--tint-green); color: var(--green); }
.shift-money-line.diff.over { background: var(--tint-yellow); color: #b45309; }
.shift-money-line.diff.short { background: var(--tint-red); color: var(--red); }
.shift-summary-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.shift-summary-split div {
  display: flex;
  justify-content: space-between;
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--bg-tint);
  font-weight: 900;
}
.shift-summary-split span { color: var(--text-muted); }
.shift-warning {
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  background: var(--tint-yellow);
  color: var(--tint-yellow-text);
  font-size: 0.82rem;
  font-weight: 800;
}

.shift-settings-panel { margin-top: 16px; }
.shift-settings-card { padding: 16px; }
.shift-config-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.shift-config-mode-label {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--text-muted);
}
.shift-config-mode .shift-selector {
  max-width: 280px;
}
.shift-config-mode-help {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.shift-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.shift-config-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.shift-config-denoms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.shift-config-denom {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: var(--bg-tint);
  font-weight: 900;
}
.shift-config-denom small {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 0.72rem;
}
.shift-config-save { margin-top: 14px; }

.shift-history-section {
  padding: 16px;
  align-self: start;
}
.shift-history-list {
  display: grid;
  gap: 10px;
}
.shift-history-empty {
  padding: 18px;
  border-radius: 18px;
  background: var(--bg-tint);
  color: var(--text-muted);
  font-weight: 800;
  text-align: center;
}
.shift-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 13px;
}
.shift-history-card strong,
.shift-history-card span,
.shift-history-card small { display: block; }
.shift-history-card span,
.shift-history-card small { color: var(--text-muted); }
.shift-history-money {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.shift-history-money strong.ok { color: var(--green); }
.shift-history-money strong.over { color: #b45309; }
.shift-history-money strong.short { color: var(--red); }
.shift-history-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shift-history-actions button {
  min-height: 38px;
  border-radius: 13px;
  border: 1.5px solid var(--border-mid);
  background: var(--card-active);
  color: var(--text);
  font-weight: 900;
}
.shift-history-actions .danger {
  background: var(--tint-red);
  color: var(--red);
  border-color: rgba(220, 38, 38, 0.18);
}

.shift-pin-layer {
  position: fixed;
  inset: 0;
  z-index: 32100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.dark .shift-pin-layer {
  background: rgba(0, 0, 0, 0.82);
}
.shift-pin-box {
  position: relative;
  width: min(360px, 92vw);
  border-radius: 28px;
  background: var(--surface);
  color: var(--text);
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
  text-align: center;
}
.shift-pin-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--bg-tint);
  color: var(--text-muted);
  font-weight: 900;
}
.shift-pin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 1.7rem;
}
.shift-pin-box h3 { margin: 12px 0 4px; }
.shift-pin-box p { margin: 0; color: var(--text-muted); font-weight: 700; }
.shift-pin-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 10px;
}
.shift-pin-dots span {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--border-mid);
  background: transparent;
}
.shift-pin-dots span.filled {
  background: var(--accent);
  border-color: var(--accent);
}
.shift-pin-error {
  margin: 6px 0 10px;
  color: var(--red);
  font-weight: 900;
}
.shift-pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.shift-pin-pad button {
  min-height: 56px;
  border-radius: 18px;
  border: 1.5px solid var(--border-mid);
  background: var(--card-active);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 1000;
}

.shift-keypad-layer {
  position: fixed;
  inset: 0;
  z-index: 32150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  /* Cortina opaca: no debe filtrarse el crema/amarillo del POS */
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.dark .shift-keypad-layer {
  background: rgba(0, 0, 0, 0.82);
}

.shift-keypad-box {
  position: relative;
  width: min(350px, 92vw);
  border-radius: 28px;
  background: var(--surface);
  color: var(--text);
  padding: 20px;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.28);
}

.shift-keypad-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--bg-tint);
  color: var(--text-muted);
  font-weight: 1000;
}

.shift-keypad-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.shift-keypad-box h3 {
  margin: 4px 44px 12px 0;
  font-size: 1.2rem;
}

.shift-keypad-value {
  min-height: 68px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--bg-tint), var(--card));
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 1000;
  color: var(--text);
}
.shift-keypad-value.replace-ready {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: rgba(255, 90, 31, 0.45);
  box-shadow: inset 0 0 0 2px rgba(255, 90, 31, 0.12);
}
body.dark .shift-keypad-value.replace-ready {
  background: rgba(255, 90, 31, 0.16);
  border-color: rgba(255, 90, 31, 0.4);
}

.shift-keypad-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.shift-keypad-pad button {
  min-height: 58px;
  border-radius: 18px;
  border: 1.5px solid var(--border-mid);
  background: var(--card-active);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 1000;
  cursor: pointer;
}

.shift-keypad-pad button:active {
  transform: scale(0.98);
  background: var(--accent-dim);
  border-color: var(--accent);
}

.shift-keypad-actions {
  display: grid;
  grid-template-columns: 1fr .68fr 1.2fr;
  gap: 10px;
  margin-top: 14px;
}

.shift-keypad-actions button {
  min-height: 48px;
  border-radius: 16px;
  border: 1.5px solid var(--border-mid);
  font-weight: 1000;
  cursor: pointer;
}

.shift-keypad-cancel {
  background: var(--card);
  color: var(--text-muted);
}

.shift-keypad-dot {
  background: var(--card-active);
  color: var(--text);
  font-size: 1.45rem;
}

.shift-keypad-ok {
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  color: #fff;
  border-color: transparent !important;
}

@media (max-width: 1180px) {
  .shift-close-body {
    grid-template-columns: 1fr;
  }
  .shift-close-grid {
    grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
  }
  .shift-summary-panel {
    grid-column: 1 / -1;
    position: static;
  }
  .shift-summary-split {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .header-actions .shift-close-btn {
    width: 34px;
    padding: 0;
    font-size: 0;
  }
  .header-actions .shift-close-btn::before {
    content: "??";
    font-size: 1rem;
  }
  .shift-close-topbar {
    grid-template-columns: auto 1fr;
  }
  .shift-close-top-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    width: 100%;
  }
  .shift-close-body {
    padding: 12px;
  }
  .shift-close-hero,
  .shift-close-grid,
  .shift-config-grid {
    grid-template-columns: 1fr;
  }
  .shift-summary-split {
    grid-template-columns: 1fr;
  }
  .shift-denom-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

@media (max-width: 560px) {
  .shift-close-top-actions {
    grid-template-columns: 1fr;
  }
  .shift-close-title-wrap h2 {
    font-size: 1.25rem;
  }
  .shift-close-hero > div,
  .shift-panel,
  .shift-summary-card,
  .shift-settings-card,
  .shift-history-section {
    border-radius: 18px;
    padding: 13px;
  }
  .shift-denom-grid,
  .shift-config-denoms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cierre compacto: menos espacio vac?o y menos scroll global */
.shift-close-topbar {
  padding: calc(9px + var(--app-safe-top)) 14px 8px;
  gap: 10px;
}
.shift-close-back {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}
.shift-close-title-wrap h2 {
  font-size: clamp(1.12rem, 2vw, 1.55rem);
}
.shift-close-title-wrap p {
  font-size: 0.78rem;
}
.shift-close-ghost,
.shift-close-print,
.shift-close-save,
.shift-clear-count {
  min-height: 38px;
  padding: 0 11px;
  border-radius: 12px;
  font-size: 0.82rem;
}
.shift-close-report-print {
  background: linear-gradient(135deg, #111827, #374151);
  color: #fff;
  border-color: transparent;
}
body.dark .shift-close-report-print {
  background: linear-gradient(135deg, #f59e0b, #ff5a1f);
  color: #fff;
}
.shift-close-body {
  padding: 10px;
  gap: 10px;
  overflow: hidden;
}
.shift-close-main {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.shift-close-hero {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 10px;
  margin-bottom: 10px;
}
.shift-close-hero > div {
  border-radius: 18px;
  padding: 13px 15px;
}
.shift-pill {
  padding: 4px 8px;
  font-size: 0.65rem;
}
.shift-close-hero h3 {
  margin: 7px 0 2px;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
}
.shift-close-hero p,
.shift-diff-card small {
  font-size: 0.78rem;
}
.shift-diff-card strong {
  font-size: 1.55rem;
}
.shift-close-grid {
  grid-template-columns: minmax(210px, 0.7fr) minmax(330px, 1.25fr) minmax(250px, 0.85fr);
  gap: 10px;
}
.shift-panel,
.shift-summary-card,
.shift-settings-card,
.shift-history-section {
  border-radius: 18px;
}
.shift-panel,
.shift-summary-card,
.shift-settings-card,
.shift-history-section {
  padding: 11px;
}
.shift-panel-head {
  margin-bottom: 9px;
}
.shift-panel-head h4 {
  font-size: 0.94rem;
}
.shift-panel-head p {
  font-size: 0.74rem;
}
.shift-form-row {
  gap: 5px;
  margin-bottom: 9px;
}
.shift-form-row input,
.shift-form-row textarea,
.shift-config-grid input {
  border-radius: 12px;
  padding: 9px 10px;
}
.shift-form-row textarea {
  min-height: 66px;
}
.shift-selector button {
  min-height: 40px;
  border-radius: 13px;
}
.shift-denom-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 7px;
}
.shift-denom-card {
  gap: 5px;
  padding: 8px;
  border-radius: 14px;
}
.shift-denom-label {
  font-size: 0.98rem;
}
.shift-denom-card input {
  border-radius: 11px;
  padding: 7px 4px;
  font-size: 1.05rem;
}
.shift-denom-card small {
  font-size: 0.72rem;
}
.shift-summary-panel {
  top: 0;
}
.shift-summary-head {
  margin-bottom: 7px;
}
.shift-money-line {
  padding: 7px 0;
  font-size: 0.82rem;
}
.shift-money-line.diff {
  margin-top: 5px;
  padding: 9px;
}
.shift-summary-split {
  gap: 6px;
  margin-top: 8px;
}
.shift-summary-split div {
  padding: 8px 9px;
  font-size: 0.78rem;
}
.shift-history-section {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
.shift-history-list {
  gap: 7px;
}
.shift-history-card {
  border-radius: 14px;
  gap: 7px;
  padding: 9px;
}
.shift-history-money,
.shift-history-card small,
.shift-history-card span {
  font-size: 0.78rem;
}
.shift-history-actions {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.shift-history-actions button {
  min-height: 34px;
  border-radius: 11px;
  font-size: 0.76rem;
}

@media (max-width: 1180px) {
  .shift-close-body {
    overflow-y: auto;
  }
  .shift-close-main {
    overflow: visible;
  }
  .shift-history-section {
    position: static;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .shift-close-top-actions {
    grid-template-columns: 1fr 1fr;
  }
  .shift-close-report-print,
  .shift-close-save {
    grid-column: span 1;
  }
  .shift-close-hero {
    grid-template-columns: 1fr 1fr;
  }
  .shift-close-grid {
    gap: 9px;
  }
}

@media (max-width: 560px) {
  .shift-close-hero {
    grid-template-columns: 1fr;
  }
  .shift-close-top-actions {
    grid-template-columns: 1fr;
  }
}

/* Cierre estilo mesa de arqueo: inspirado en apps de cash count, adaptado al POS */
.shift-close-overlay {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 90, 31, 0.10), transparent 28%),
    linear-gradient(135deg, #f5f7fb 0%, #eef2f7 100%);
}
body.dark .shift-close-overlay {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 90, 31, 0.14), transparent 30%),
    linear-gradient(135deg, #0f1117 0%, #171a24 100%);
}
.shift-close-topbar {
  background: rgba(255,255,255,0.72);
  border-bottom: 0;
  box-shadow: none;
}
body.dark .shift-close-topbar { background: rgba(15,17,23,0.74); }
.shift-close-top-summary {
  min-width: 165px;
  justify-self: end;
  display: grid;
  gap: 2px;
  padding: 8px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(148,163,184,.18);
  text-align: right;
}
.shift-close-top-summary span {
  color: var(--text-muted);
  font-size: .66rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.shift-close-top-summary strong {
  font-size: 1.05rem;
  color: var(--text);
}
body.dark .shift-close-top-summary {
  background: rgba(255,255,255,.05);
}
.shift-close-body {
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 12px 14px;
}
.shift-close-main {
  overflow: visible;
}
.shift-close-hero {
  display: none;
}
.shift-close-grid {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(480px, 1fr) minmax(235px, 300px) 78px;
  grid-template-areas:
    "meta count summary rail"
    "history count summary rail";
  align-items: stretch;
  gap: 12px;
  min-height: min(720px, calc(100vh - 84px));
}
.shift-control-panel {
  grid-area: meta;
  overflow: hidden;
}
.shift-count-panel {
  grid-area: count;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.shift-summary-panel {
  grid-area: summary;
  position: static;
}
.shift-action-rail {
  grid-area: rail;
}
.shift-history-section {
  grid-area: history;
  position: static;
  max-height: none;
}
.shift-panel,
.shift-summary-card,
.shift-history-section {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}
body.dark .shift-panel,
body.dark .shift-summary-card,
body.dark .shift-history-section {
  background: rgba(30, 33, 48, 0.9);
  border-color: rgba(255,255,255,0.08);
}
.shift-panel-head {
  margin-bottom: 8px;
}
.shift-panel-head p {
  display: none;
}
.shift-count-panel .shift-panel-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.shift-count-panel .shift-panel-head h4 {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-size: .78rem;
}
.shift-control-panel .shift-panel-head {
  margin: 10px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.shift-control-panel .shift-panel-head h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.shift-meta-hero {
  position: relative;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.35), transparent 36%),
    linear-gradient(135deg, var(--accent), #f59e0b);
  color: #fff;
  box-shadow: 0 18px 34px rgba(255,90,31,.20);
  overflow: hidden;
}
.shift-meta-hero::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.shift-meta-hero span,
.shift-meta-hero small {
  display: block;
  position: relative;
  z-index: 1;
}
.shift-meta-hero span {
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .86;
}
.shift-meta-hero strong {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 1000;
}
.shift-meta-hero small {
  margin-top: 8px;
  font-size: .72rem;
  font-weight: 800;
  opacity: .9;
}
.shift-clear-count {
  min-height: 32px;
  font-size: .72rem;
  padding-inline: 10px;
}
.shift-form-row {
  margin-bottom: 8px;
}
.shift-form-row label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.shift-form-row input,
.shift-form-row textarea {
  min-height: 36px;
  padding: 8px 9px;
  border-radius: 13px;
  font-size: .82rem;
}
.shift-form-row textarea {
  min-height: 58px;
}
.shift-selector {
  grid-template-columns: 1fr;
}
.shift-selector button {
  min-height: 34px;
  border-radius: 12px;
  font-size: .78rem;
}

.shift-denom-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  display: block;
}
.shift-cash-sheet {
  display: grid;
  gap: 5px;
}
.shift-cash-head,
.shift-cash-row {
  display: grid;
  grid-template-columns: 64px minmax(90px, 1fr) minmax(90px, 1fr) minmax(92px, 110px);
  gap: 8px;
  align-items: center;
}
.shift-cash-head {
  padding: 0 2px 4px;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shift-cash-head.coins {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.shift-cash-denom {
  min-height: 42px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.16);
}
body.dark .shift-cash-denom {
  background: rgba(255,255,255,0.05);
}
.shift-cash-denom strong {
  font-size: .9rem;
  line-height: 1;
}
.shift-cash-denom small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 1000;
  text-transform: uppercase;
}
.shift-cash-row input {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1.5px solid rgba(148, 163, 184, 0.18);
  background: rgba(248,250,252,0.78);
  color: var(--text);
  text-align: right;
  padding: 6px 12px;
  font-size: 1rem;
  font-weight: 900;
  outline: none;
}
body.dark .shift-cash-row input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.shift-cash-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,90,31,.11);
}
.shift-cash-entry {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1.5px solid rgba(148, 163, 184, 0.18);
  background: rgba(248,250,252,0.78);
  color: var(--text-dim);
  text-align: right;
  padding: 6px 12px;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}
body.dark .shift-cash-entry {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.shift-cash-entry.has-value {
  color: var(--text);
  background: var(--input-focus);
  border-color: rgba(255, 90, 31, 0.24);
}
.shift-cash-entry:active {
  transform: scale(0.985);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,90,31,.11);
}
.shift-cash-line {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  color: var(--text);
  font-weight: 1000;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: visible;
  letter-spacing: -0.01em;
}
.shift-cash-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 2px 6px;
  color: var(--text-muted);
  font-weight: 1000;
  border-bottom: 1px solid var(--border);
}
.shift-cash-total strong {
  color: var(--text);
  font-size: .98rem;
}

.shift-summary-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px;
  gap: 12px;
}
.shift-sum-section {
  display: grid;
  gap: 8px;
}
.shift-sum-section-title {
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.shift-sum-section-title em {
  font-style: normal;
  font-weight: 800;
  opacity: .75;
  text-transform: none;
  letter-spacing: 0;
}
.shift-sum-section.cash {
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16,185,129,.08), rgba(16,185,129,.02));
  border: 1px solid rgba(16,185,129,.18);
}
.shift-sum-section.cash .shift-sum-section-title { color: #047857; }
.shift-sum-section.other {
  padding: 12px;
  border-radius: 16px;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.16);
}
.shift-sum-section.sales {
  padding-top: 4px;
}
body.dark .shift-sum-section.cash {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.22);
}
body.dark .shift-sum-section.other {
  background: rgba(255,255,255,.04);
}
.shift-summary-total-line.have strong {
  font-size: 1.35rem;
  color: var(--text);
}
.shift-summary-grand.expect strong {
  font-size: 1.45rem;
  color: #0f766e;
}
body.dark .shift-summary-grand.expect strong { color: #5eead4; }
.shift-money-line.compact.muted {
  color: var(--text-muted);
  font-size: .78rem;
}
.shift-money-line.compact.muted strong {
  color: var(--text);
  font-weight: 900;
}
.shift-summary-top {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.shift-summary-total-line,
.shift-summary-grand,
.shift-report-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.shift-summary-total-line span,
.shift-report-row span {
  color: var(--text-muted);
  font-weight: 900;
}
.shift-summary-total-line strong,
.shift-report-row strong {
  font-size: 1.05rem;
}
.shift-summary-grand {
  margin-top: 12px;
}
.shift-summary-grand span,
.shift-summary-grand strong,
.shift-report-row.main span,
.shift-report-row.main strong {
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 1000;
}
.shift-report-box {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.shift-balance-card {
  margin: 18px 0 12px;
  min-height: 84px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(16, 185, 129, .22);
  background: linear-gradient(135deg, rgba(220,252,231,.96), rgba(209,250,229,.82));
  color: #047857;
}
.shift-balance-card small {
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 1000;
}
.shift-balance-card strong {
  font-size: 2.3rem;
  line-height: 1;
  font-weight: 1000;
}
.shift-balance-card.ok {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color: #22c55e;
  color: #15803d;
}
.shift-balance-card.over {
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  border-color: #eab308;
  color: #a16207;
}
.shift-balance-card.short {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: #ef4444;
  color: #b91c1c;
}
.shift-diff-card.ok {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color: #22c55e;
  color: #15803d;
}
.shift-diff-card.over {
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  border-color: #eab308;
  color: #a16207;
}
.shift-diff-card.short {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: #ef4444;
  color: #b91c1c;
}
.shift-balance-card.neutral {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-color: #94a3b8;
  color: #475569;
}
body.dark .shift-balance-card.neutral {
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.35);
  color: #cbd5e1;
}

.shift-close-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 12px;
}
.shift-close-steps button {
  min-height: 42px;
  border-radius: 14px;
  border: 1.5px solid rgba(148,163,184,.22);
  background: rgba(248,250,252,.9);
  color: var(--text-muted);
  font-weight: 900;
  font-size: .82rem;
  cursor: pointer;
}
.shift-close-steps button.active {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: rgba(255,90,31,.45);
  color: #c2410c;
}
body.dark .shift-close-steps button {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
body.dark .shift-close-steps button.active {
  background: rgba(255,90,31,.18);
  color: #fdba74;
}

#shift-view-date {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1.5px solid rgba(148,163,184,.22);
  background: rgba(248,250,252,.9);
  color: var(--text);
  padding: 8px 12px;
  font-weight: 800;
  font-size: .95rem;
}
body.dark #shift-view-date {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
}
.shift-money-line.compact {
  padding: 6px 0;
  font-size: .78rem;
}
.shift-summary-split {
  margin-top: auto;
  padding-top: 12px;
}
.shift-summary-split div {
  border-radius: 12px;
  padding: 7px 9px;
  font-size: .76rem;
}

.shift-action-rail {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: stretch;
  padding: 4px 0;
}
.shift-action-rail button {
  min-height: 66px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.84);
  color: var(--text-muted);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 1000;
  cursor: pointer;
}
body.dark .shift-action-rail button {
  background: rgba(30,33,48,.9);
}
.shift-action-rail button span {
  font-size: 1.18rem;
  line-height: 1;
}
.shift-action-rail button strong {
  font-size: .64rem;
  text-transform: uppercase;
}
.shift-action-rail .rail-ok {
  color: #059669;
}
.shift-action-rail .rail-print {
  min-height: 78px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 18px 34px rgba(15,23,42,.22);
}
body.dark .shift-action-rail .rail-print {
  background: #fff;
  color: #0f172a;
}

.shift-history-section {
  overflow: hidden;
}
.shift-history-list {
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 1180px) {
  .shift-close-grid {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px) 74px;
    grid-template-areas:
      "meta meta rail"
      "count summary rail"
      "history history rail";
    min-height: auto;
  }
  .shift-selector {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .shift-close-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "summary"
      "count"
      "rail"
      "history";
  }
  .shift-action-rail {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: column;
  }
  .shift-action-rail button,
  .shift-action-rail .rail-print {
    min-height: 56px;
    border-radius: 14px;
  }
  .shift-cash-head,
  .shift-cash-row {
    grid-template-columns: 58px minmax(80px, 1fr) minmax(80px, 1fr) 74px;
  }
}

@media (max-width: 620px) {
  .shift-action-rail {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
  }
  .shift-cash-head,
  .shift-cash-row {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  }
  .shift-cash-head span:last-child,
  .shift-cash-line {
    display: none;
  }
}

/* Fix: la barra superior del cierre debe reservar espacio real, no tapar contenido. */
.shift-close-shell {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.shift-close-topbar {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
}

.shift-close-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 12px;
}

.shift-close-grid {
  min-height: 0;
  height: auto;
  max-height: none;
}

.shift-count-panel,
.shift-summary-card,
.shift-history-section {
  min-height: 0;
}

@media (max-width: 1180px) {
  .shift-close-body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .shift-close-grid {
    height: auto;
    max-height: none;
  }
}

/* Acciones del cierre: cada bot?n tiene una sola funci?n y no crea ventanas externas. */
.shift-action-rail {
  align-content: stretch;
}
.shift-action-rail button {
  min-height: 62px;
}
.shift-action-rail .rail-ok {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 16px 30px rgba(16,185,129,.22);
}
body.dark .shift-action-rail .rail-ok {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #052e1b;
}

/* Ajustes como panel visible dentro de la app, no perdido debajo del grid. */
.shift-settings-panel {
  position: fixed;
  z-index: 32020;
  top: calc(74px + var(--app-safe-top));
  right: 16px;
  bottom: 16px;
  width: min(760px, calc(100vw - 32px));
  margin: 0;
  overflow-y: auto;
  padding: 0;
  border-radius: 26px;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
}
.shift-settings-card {
  min-height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px;
}

.shift-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 32250;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(10px);
}
.shift-preview-box {
  width: min(560px, 96vw);
  height: min(760px, 92dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 28px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0,0,0,.30);
}
.shift-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shift-preview-head span {
  display: block;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.shift-preview-head h3 {
  margin: 2px 0 0;
}
.shift-preview-head button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--bg-tint);
  color: var(--text);
  font-weight: 1000;
}
.shift-preview-box iframe {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}
.shift-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}
.shift-preview-actions button {
  min-height: 48px;
  border-radius: 16px;
  border: 1.5px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  font-weight: 1000;
}
.shift-preview-actions .shift-preview-print {
  background: #0f172a;
  color: #fff;
  border-color: transparent;
}

@media (max-width: 900px) {
  .shift-close-top-summary {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .shift-action-rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  .shift-action-rail button,
  .shift-action-rail .rail-print {
    min-height: 58px;
  }
  .shift-settings-panel {
    top: calc(108px + var(--app-safe-top));
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}

.shift-pin-layer,
.shift-keypad-layer {
  z-index: 32300;
}

@media (max-width: 620px) {
  .shift-action-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .shift-preview-layer {
    padding: 8px;
  }
  .shift-preview-box {
    height: 96dvh;
    width: 98vw;
    border-radius: 22px;
  }
}


/* ============================================================
   TERMINAL CONNECT MODAL ? guia visual con im?genes
   ============================================================ */
.tc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70000;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  animation: tcFadeIn .18s ease-out;
}
.tc-modal[style*="flex"] { display: flex !important; }
@keyframes tcFadeIn { from { opacity: 0 } to { opacity: 1 } }

.tc-shell {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 1080px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  animation: tcSlideUp .22s ease-out;
}
@keyframes tcSlideUp { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.tc-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #2563eb 100%);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  flex-shrink: 0;
}
.tc-header-left { display: flex; align-items: center; gap: 14px; }
.tc-header-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.14);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  border: 1px solid rgba(255,255,255,.18);
}
.tc-header-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.tc-header-sub { font-size: 12.5px; color: #bfdbfe; margin-top: 2px; }
.tc-close {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.tc-close:hover { background: rgba(255,255,255,.26); }

.tc-body {
  overflow-y: auto;
  background: #f8fafc;
  flex: 1;
}

.tc-loading, .tc-error {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
  font-size: 15px;
}
.tc-error { color: #b91c1c; }
.tc-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid #cbd5e1;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: tcSpin .9s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes tcSpin { to { transform: rotate(360deg) } }

/* Layout en 2 columnas */
.tc-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 0;
  min-height: 100%;
}

/* PANEL IZQUIERDO: c?digo */
.tc-code-panel {
  background: linear-gradient(170deg, #0b1220 0%, #1e293b 60%, #1e3a8a 100%);
  color: #fff;
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: calc(94vh - 80px);
  min-height: 100%;
}
.tc-code-label {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  font-weight: 700;
  color: #93c5fd;
  margin-bottom: 18px;
  text-align: center;
}
.tc-code-display {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: nowrap;
}
.tc-code-display span {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 38px;
  height: 56px;
  padding: 0 4px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  background: rgba(96, 165, 250, .12);
  border: 1.5px solid rgba(96, 165, 250, .35);
  border-radius: 10px;
  color: #60a5fa;
  text-shadow: 0 0 18px rgba(96, 165, 250, .55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255,255,255,.06);
}
.tc-code-hint {
  font-size: 12.5px;
  color: #cbd5e1;
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.45;
}
.tc-waiting {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #e2e8f0;
  margin-bottom: 16px;
}
.tc-pulse-dot {
  width: 10px; height: 10px;
  background: #f59e0b;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, .7);
  animation: tcPulse 1.6s ease-out infinite;
}
@keyframes tcPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .7); }
  70%  { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.tc-cancel-btn {
  margin-top: auto;
  width: 100%;
  padding: 11px 16px;
  background: rgba(255,255,255,.08);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.tc-cancel-btn:hover { background: rgba(255,255,255,.16); }

/* PANEL DERECHO: pasos */
.tc-steps-panel {
  padding: 22px 24px 28px;
  background: #fff;
}
.tc-steps-intro { margin-bottom: 16px; }
.tc-steps-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
}
.tc-steps-sub {
  font-size: 13.5px;
  color: #64748b;
  margin-top: 4px;
}

/* CARRUSEL paso a paso */
.tc-carousel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.tc-carousel-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-step-counter {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}
.tc-step-counter strong {
  color: #1e3a8a;
  font-size: 16px;
}
.tc-progress {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.tc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 999px;
  transition: width .3s ease;
}

.tc-carousel-img-wrap {
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  overflow: hidden;
  height: 420px;
  display: grid;
  place-items: center;
  isolation: isolate;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}
.tc-carousel-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, .06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.tc-carousel-img {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  opacity: 0;
  transform: translateX(0) scale(.94);
  filter: blur(6px) brightness(1.05);
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1),
    transform .65s cubic-bezier(.22, 1, .36, 1),
    filter .45s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  will-change: opacity, transform, filter;
  z-index: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tc-carousel-img.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0) brightness(1);
}
.tc-carousel-img.is-enter-right { opacity: 0; transform: translateX(70px) scale(.92); filter: blur(10px) brightness(1.08); }
.tc-carousel-img.is-enter-left  { opacity: 0; transform: translateX(-70px) scale(.92); filter: blur(10px) brightness(1.08); }
.tc-carousel-img.is-exit-left   { opacity: 0; transform: translateX(-70px) scale(.92); filter: blur(10px) brightness(1.08); }
.tc-carousel-img.is-exit-right  { opacity: 0; transform: translateX(70px) scale(.92); filter: blur(10px) brightness(1.08); }

.tc-carousel-text {
  padding: 0 4px;
  min-height: 64px;
  transition:
    opacity .28s cubic-bezier(.4, 0, .2, 1),
    transform .35s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.tc-carousel-text.is-fading {
  opacity: 0;
  transform: translateY(8px);
}

/* Mejoras visuales del progreso y dots */
.tc-progress-fill {
  transition: width .55s cubic-bezier(.22, 1, .36, 1);
}
.tc-dot {
  transition:
    background .35s cubic-bezier(.22, 1, .36, 1),
    width .45s cubic-bezier(.34, 1.56, .64, 1),
    transform .25s ease;
}
.tc-dot:active { transform: scale(.85); }

/* Pulso sutil del paso activo */
.tc-dot.is-active {
  animation: tcDotPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes tcDotPop {
  0%   { transform: scale(.6); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Animaci?n de presi?n en botones de navegaci?n */
.tc-btn-next:active, .tc-btn-back:active:not(:disabled), .tc-btn-finish:active {
  transform: translateY(1px) scale(.97);
  transition: transform .08s ease;
}
.tc-carousel-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.tc-carousel-tip {
  margin-top: 8px;
  font-size: 13px;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 8px 12px;
  border-radius: 10px;
  line-height: 1.45;
}

.tc-carousel-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.tc-dots {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.tc-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .2s;
}
.tc-dot:hover { background: #94a3b8; }
.tc-dot.is-done { background: #93c5fd; }
.tc-dot.is-active {
  background: #2563eb;
  width: 26px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
}

.tc-btn {
  padding: 11px 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tc-btn-back {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}
.tc-btn-back:hover:not(:disabled) { background: #e2e8f0; color: #0f172a; }
.tc-btn-back:disabled { opacity: .4; cursor: not-allowed; }
.tc-btn-next {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
.tc-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 99, 235, .45); }
.tc-btn-finish {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  box-shadow: 0 4px 14px rgba(22, 163, 74, .35);
}
.tc-btn-finish:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22, 163, 74, .45); }

/* Responsive: en pantallas chicas, una sola columna */
@media (max-width: 820px) {
  .tc-shell { max-height: 96vh; }
  .tc-grid { grid-template-columns: 1fr; }
  .tc-code-panel {
    position: static;
    max-height: none;
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .tc-code-display span { min-width: 32px; height: 48px; font-size: 1.5rem; }
  .tc-steps-panel { padding: 18px 16px 22px; }
  .tc-carousel-img-wrap { height: 360px; }
}
@media (max-width: 480px) {
  .tc-modal { padding: 6px; }
  .tc-carousel-img-wrap { height: 280px; padding: 10px; }
  .tc-carousel-title { font-size: 16px; }
  .tc-btn { padding: 10px 14px; font-size: 13.5px; }
  .tc-dots { gap: 5px; }
  .tc-dot { width: 8px; height: 8px; }
  .tc-dot.is-active { width: 22px; }
}

/* Tema oscuro */
[data-theme="dark"] .tc-shell { background: #0f172a; }
[data-theme="dark"] .tc-body { background: #0b1220; }
[data-theme="dark"] .tc-steps-panel { background: #0f172a; }
[data-theme="dark"] .tc-step-counter { color: #94a3b8; }
[data-theme="dark"] .tc-step-counter strong { color: #93c5fd; }
[data-theme="dark"] .tc-progress { background: #1e293b; }
[data-theme="dark"] .tc-carousel-img-wrap {
  background: linear-gradient(180deg, #1e293b 0%, #0b1220 100%);
  border-color: #334155;
}
[data-theme="dark"] .tc-carousel-img-wrap::before {
  background: radial-gradient(ellipse at center, rgba(96, 165, 250, .1) 0%, transparent 70%);
}
[data-theme="dark"] .tc-carousel-title { color: #f1f5f9; }
[data-theme="dark"] .tc-carousel-tip {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .32);
  color: #fbbf24;
}
[data-theme="dark"] .tc-dot { background: #334155; }
[data-theme="dark"] .tc-dot.is-done { background: #1d4ed8; }
[data-theme="dark"] .tc-btn-back { background: #1e293b; color: #cbd5e1; border-color: #334155; }
[data-theme="dark"] .tc-btn-back:hover:not(:disabled) { background: #334155; color: #f1f5f9; }

/* ============================================================
   TERMINAL CONNECT ? panel izquierdo mejorado y editor de pasos
   ============================================================ */
.tc-code-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.tc-help-card {
  width: 100%;
  padding: 16px 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.tc-help-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tc-help-card-title::before { content: '💡'; font-size: 16px; }
.tc-help-card-text {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.45;
  margin-bottom: 10px;
}
.tc-help-phone {
  font-size: 16px;
  font-weight: 800;
  color: #93c5fd;
  letter-spacing: .01em;
  padding: 8px 12px;
  background: rgba(96, 165, 250, .12);
  border-radius: 10px;
  border: 1px solid rgba(96, 165, 250, .25);
  display: inline-block;
}

.tc-edit-steps-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  color: #cbd5e1;
  border: 1.5px dashed rgba(255,255,255,.22);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.tc-edit-steps-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.4);
  transform: translateY(-1px);
}
.tc-edit-steps-btn:active { transform: translateY(0) scale(.98); }

/* PIN modal */
.tc-pin-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35000;
  background: rgba(15, 23, 42, .75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.tc-pin-modal[style*="flex"] { display: flex !important; }
.tc-pin-box {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 320px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .4);
  animation: tcSlideUp .25s ease-out;
}
.tc-pin-icon {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: 0 8px 20px rgba(245, 158, 11, .35);
}
.tc-pin-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}
.tc-pin-sub {
  font-size: 12.5px;
  color: #64748b;
  margin: 4px 0 18px;
}
.tc-pin-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
}
.tc-pin-dots span {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: all .15s;
}
.tc-pin-dots span.is-filled {
  background: #2563eb;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}
.tc-pin-error {
  color: #dc2626;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
@keyframes tcShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.tc-pin-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.tc-pin-key {
  padding: 14px 0;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  transition: all .12s;
}
.tc-pin-key:hover { background: #eff6ff; border-color: #bfdbfe; }
.tc-pin-key:active { transform: scale(.95); background: #dbeafe; }
.tc-pin-key-action { font-size: 14px; color: #475569; }
.tc-pin-cancel {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
}
.tc-pin-cancel:hover { background: #f1f5f9; color: #0f172a; }

/* Editor de pasos */
.tc-editor-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35500;
  background: rgba(15, 23, 42, .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.tc-editor-modal[style*="flex"] { display: flex !important; }
.tc-editor-shell {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 920px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  animation: tcSlideUp .25s ease-out;
}
.tc-editor-header {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.tc-editor-title { font-size: 17px; font-weight: 800; }
.tc-editor-sub { font-size: 12.5px; color: #94a3b8; margin-top: 3px; }
.tc-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tc-editor-row {
  display: grid;
  grid-template-columns: 36px 130px 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
}
.tc-editor-row-num {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.tc-editor-row-img {
  width: 130px; height: 80px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-editor-row-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.tc-editor-row-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tc-editor-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color .15s;
}
.tc-editor-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.tc-editor-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: all .15s;
}
.tc-editor-file-btn:hover { background: #dbeafe; }
.tc-editor-row-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tc-editor-row-actions button {
  width: 32px; height: 32px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #475569;
  transition: all .15s;
}
.tc-editor-row-actions button:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
.tc-editor-row-actions button:disabled { opacity: .35; cursor: not-allowed; }
.tc-editor-row-actions .tc-editor-del {
  color: #dc2626;
  border-color: #fecaca;
}
.tc-editor-row-actions .tc-editor-del:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #b91c1c;
}
.tc-editor-add-btn {
  width: 100%;
  padding: 14px;
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  color: #475569;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  margin-top: 4px;
}
.tc-editor-add-btn:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1e40af;
}
.tc-editor-empty {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}
.tc-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tc-editor-footer-right { display: flex; gap: 10px; }

/* Responsive editor */
@media (max-width: 720px) {
  .tc-editor-row {
    grid-template-columns: 28px 100px 1fr auto;
    gap: 10px;
    padding: 10px;
  }
  .tc-editor-row-img { width: 100px; height: 64px; }
  .tc-editor-input { font-size: 12.5px; padding: 7px 10px; }
}
@media (max-width: 520px) {
  .tc-editor-row {
    grid-template-columns: 28px 1fr auto;
  }
  .tc-editor-row-img {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 100px;
  }
  .tc-editor-row-fields { grid-column: 2; grid-row: 1; }
  .tc-editor-row-actions { grid-column: 3; grid-row: 1; }
}

/* Tema oscuro editor */
[data-theme="dark"] .tc-editor-shell { background: #0f172a; }
[data-theme="dark"] .tc-editor-body { background: #0b1220; }
[data-theme="dark"] .tc-editor-row { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tc-editor-row-img { background: #0b1220; border-color: #334155; }
[data-theme="dark"] .tc-editor-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .tc-editor-file-btn { background: #1e3a8a; border-color: #2563eb; color: #bfdbfe; }
[data-theme="dark"] .tc-editor-row-actions button { background: #0f172a; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .tc-editor-add-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .tc-editor-footer { background: #1e293b; border-top-color: #334155; }
[data-theme="dark"] .tc-pin-box { background: #1e293b; }
[data-theme="dark"] .tc-pin-title { color: #f1f5f9; }
[data-theme="dark"] .tc-pin-sub { color: #94a3b8; }
[data-theme="dark"] .tc-pin-dots span { background: #334155; }
[data-theme="dark"] .tc-pin-key { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .tc-pin-key:hover { background: #1e3a8a; border-color: #2563eb; }

/* Bot?n Abrir Caja al lado del bot?n Cobrar */
#open-drawer-btn.open-drawer-btn {
  min-height: 50px;
  min-width: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  border: none;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
  transition: transform .12s, box-shadow .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#open-drawer-btn.open-drawer-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, .4);
}
#open-drawer-btn.open-drawer-btn:active {
  transform: translateY(1px) scale(.97);
}
[data-theme="dark"] #open-drawer-btn.open-drawer-btn {
  background: linear-gradient(135deg, #d97706, #b45309);
}

/* ?? Bot?n Caja en el header ????????????????????????????? */
.drawer-header-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(245,158,11,.35);
  transition: transform .12s, box-shadow .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.drawer-header-btn:hover  { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(245,158,11,.45); }
.drawer-header-btn:active { transform: scale(.96); }
[data-theme="dark"] .drawer-header-btn { background: linear-gradient(135deg, #d97706, #b45309); }
.drawer-header-btn .drawer-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

/* (badge inline removido ? ahora ?? Especial vive en esquina sup. izq. de la imagen .sp-corner-badge) */

/* ?? Tools modal: 3 columnas (Tema ? Pantalla ? Salir) ????? */
.tools-grid.tools-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.tool-action.tool-action-exit {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #b91c1c;
}
.tool-action.tool-action-exit strong { color: #b91c1c; }
[data-theme="dark"] .tool-action.tool-action-exit {
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  color: #fee2e2;
}
[data-theme="dark"] .tool-action.tool-action-exit strong { color: #fee2e2; }

/* ?? Code skeleton mientras se genera ???????????????????? */
.tc-code-display.tc-code-loading {
  opacity: .6;
}
.tc-code-skeleton {
  display: inline-block;
  width: 1ch;
  text-align: center;
  color: #cbd5e1;
  animation: tcSkelPulse 1.2s ease-in-out infinite;
}
.tc-code-skeleton:nth-child(2) { animation-delay: .1s; }
.tc-code-skeleton:nth-child(3) { animation-delay: .2s; }
.tc-code-skeleton:nth-child(4) { animation-delay: .3s; }
.tc-code-skeleton:nth-child(5) { animation-delay: .4s; }
.tc-code-skeleton:nth-child(6) { animation-delay: .5s; }
.tc-code-skeleton:nth-child(7) { animation-delay: .6s; }
.tc-code-skeleton:nth-child(8) { animation-delay: .7s; }
@keyframes tcSkelPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.1); }
}
.tc-code-err { color: #dc2626; font-size: 1.1rem; }

/* ?? Builder note section (modificadores) ????????????????? */
.builder-note-section {
  padding: 10px 16px 6px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft, #fafafa);
}
.builder-note-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 5px;
  letter-spacing: .02em;
}
.builder-note-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
  transition: border-color .15s, box-shadow .15s;
}
.builder-note-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
[data-theme="dark"] .builder-note-section {
  background: rgba(255,255,255,.02);
}

/* ?? Control de tama?o de opciones del builder ???????????? */
.builder-zoom-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 5px;
  background: var(--bg-soft, #f5f6fa);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  margin-right: 8px;
  flex-shrink: 0;
}
.builder-zoom-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, transform .1s;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.builder-zoom-btn:hover  { background: var(--accent); color: #fff; }
.builder-zoom-btn:active { transform: scale(.9); }
.builder-zoom-icon {
  font-size: 0.7rem;
  color: var(--text-mid);
  opacity: .7;
  padding: 0 2px;
  user-select: none;
}
[data-theme="dark"] .builder-zoom-ctrl {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}

@media (max-width: 720px) {
  .builder-zoom-ctrl { display: none; }
}

/* ?? Escala din?mica del builder al cambiar tama?o ???????? */
.builder-options-grid .builder-option-card,
.builder-options-grid .builder-qty-option-card {
  font-size: calc(1rem * var(--builder-card-scale, 1));
}
.builder-options-grid .builder-opt-name {
  font-size: calc(0.95rem * var(--builder-card-scale, 1)) !important;
}
.builder-options-grid .builder-opt-price {
  font-size: calc(0.78rem * var(--builder-card-scale, 1)) !important;
}
.builder-options-grid .builder-opt-footer {
  padding: calc(8px * var(--builder-card-scale, 1)) calc(10px * var(--builder-card-scale, 1)) !important;
}
.builder-options-grid .builder-qty-add-btn {
  font-size: calc(0.85rem * var(--builder-card-scale, 1)) !important;
  padding: calc(7px * var(--builder-card-scale, 1)) calc(12px * var(--builder-card-scale, 1)) !important;
}
.builder-options-grid .builder-qty-step-count {
  font-size: calc(1.15rem * var(--builder-card-scale, 1)) !important;
}
.builder-options-grid .builder-qty-step-btn {
  width:  calc(34px * var(--builder-card-scale, 1)) !important;
  height: calc(34px * var(--builder-card-scale, 1)) !important;
  font-size: calc(1.1rem * var(--builder-card-scale, 1)) !important;
}

/* ============================================================
   FINAL OVERRIDES ? Product specials + builder card sizing
   These live at the end so tablet/desktop media queries cannot undo them.
   ============================================================ */

/* ============================================================
   ESPECIAL ? UN solo BRILLO que recorre el contorno de la tarjeta.
   La tarjeta NO se ve seleccionada: borde base muy sutil + un ?nico
   destello dorado que viaja alrededor del per?metro continuamente.
   ============================================================ */

/* @property permite animar el ?ngulo del conic-gradient sin rotar el elemento */
@property --sp-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.product-card.has-special-card {
  position: relative;
  /* Borde base TRANSPARENTE ? la tarjeta NO se ve seleccionada */
  border-color: transparent !important;
  box-shadow:
    0 2px 10px rgba(245, 158, 11, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.06) !important;
  animation: sp-spin 3s linear infinite !important;
  isolation: isolate;
  --sp-angle: 0deg;
}

/* Todo el contorno siempre tiene un dorado base, con un brillo m?s
   intenso (casi blanco) que viaja alrededor del per?metro. */
.product-card.has-special-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(
    from var(--sp-angle),
    #f59e0b 0%,
    #fbbf24 15%,
    #fde68a 22%,
    #ffffff 27%,
    #fde68a 32%,
    #fbbf24 40%,
    #f59e0b 60%,
    #f59e0b 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.55));
}

/* Quitar el ::after ? antes era el destello diagonal, ya no lo queremos */
.product-card.has-special-card::after {
  content: none !important;
  display: none !important;
}

@keyframes sp-spin {
  to { --sp-angle: 360deg; }
}

/* Fallback si el navegador no soporta @property: borde est?tico sutil */
@supports not (background: conic-gradient(from 0deg, red 0%, blue 100%)) {
  .product-card.has-special-card::before {
    background: linear-gradient(135deg, rgba(251,191,36,0.4), rgba(245,158,11,0.7), rgba(251,191,36,0.4));
  }
}

/* ?? ESPECIAL ? estado SELECCIONADO (in-cart): borde naranja fuerte, bien visible ?? */
.product-card.has-special-card.in-cart {
  border-color: #f59e0b !important;
  box-shadow:
    0 0 0 2.5px rgba(245, 158, 11, 0.80),
    0 6px 24px rgba(245, 158, 11, 0.22),
    0 1px 4px rgba(0, 0, 0, 0.09) !important;
  animation: none !important;
}

.product-card.has-special-card .sp-corner-badge {
  z-index: 8;
}

/* Builder +/-: resize the whole card component, not just typography.
   Earlier media queries set fixed heights and minmax(?, 1fr); this override
   makes every option card use the exact CSS variables from adjustBuilderCardSize(). */
.builder-options-grid,
.builder-options-grid.builder-qty-grid,
.builder-qty-grid {
  grid-template-columns: repeat(auto-fill, var(--builder-card-w, 180px)) !important;
  gap: calc(16px * var(--builder-card-scale, 1)) !important;
  /* CENTRAR las tarjetas ? sin importar si son 2 o 12, el grid queda
     balanceado horizontalmente, sin huecos enormes a la derecha. */
  justify-content: center !important;
  align-content: start !important;
}

/* Tarjetas de opci?n del builder ? TAMA?O CONSISTENTE.
   Todas las tarjetas (selecci?n ?nica, m?ltiple, toggle pill, cantidad)
   miden EXACTAMENTE lo mismo dentro del mismo grupo, sin importar si
   muestran stepper +/? o solo el bot?n "+ Agregar". */
:root,
.builder-options-grid {
  --builder-img-h:    calc(var(--builder-card-w, 180px) * 0.75);  /* 4:3 */
  --builder-foot-h:   calc(46px * var(--builder-card-scale, 1));
  --builder-action-h: calc(54px * var(--builder-card-scale, 1));
  --builder-card-h:   calc(var(--builder-img-h) + var(--builder-foot-h) + var(--builder-action-h));
}

.builder-options-grid .builder-option-card,
.builder-options-grid .builder-qty-option-card {
  width: var(--builder-card-w, 180px) !important;
  height: var(--builder-card-h) !important;
  min-height: var(--builder-card-h) !important;
  border-radius: calc(18px * var(--builder-card-scale, 1)) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Tarjeta "Personalizar" — agregar una opción que no está en el grupo */
.builder-options-grid .builder-custom-card {
  border: 2px dashed var(--accent, #ff6a00) !important;
  background: var(--accent-dim, #fff3e9) !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.builder-options-grid .builder-custom-card:active { transform: scale(.97); }
.builder-custom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6px * var(--builder-card-scale, 1));
  color: var(--accent, #ff6a00);
  text-align: center;
  padding: 10px;
}
.builder-custom-plus {
  font-size: calc(2.1rem * var(--builder-card-scale, 1));
  font-weight: 800;
  line-height: 1;
}
.builder-custom-label {
  font-weight: 800;
  font-size: calc(0.95rem * var(--builder-card-scale, 1));
}
.builder-custom-sub {
  font-size: calc(0.72rem * var(--builder-card-scale, 1));
  color: var(--text-muted, #8a8a8a);
  font-weight: 600;
  line-height: 1.2;
}

.builder-options-grid .builder-opt-img-wrap {
  width: 100% !important;
  height: var(--builder-img-h) !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  flex: 0 0 var(--builder-img-h) !important;
  border-radius: calc(14px * var(--builder-card-scale, 1)) calc(14px * var(--builder-card-scale, 1)) 0 0 !important;
  overflow: hidden !important;
}

.builder-options-grid .builder-opt-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: calc(6px * var(--builder-card-scale, 1)) !important;
}

.builder-options-grid .builder-opt-footer {
  height: var(--builder-foot-h) !important;
  min-height: var(--builder-foot-h) !important;
  flex: 0 0 var(--builder-foot-h) !important;
  padding: calc(8px * var(--builder-card-scale, 1)) calc(12px * var(--builder-card-scale, 1)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  overflow: hidden !important;
}
.builder-options-grid .builder-opt-name {
  font-size: calc(0.92rem * var(--builder-card-scale, 1)) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  flex: 1 1 auto !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.builder-options-grid .builder-opt-price {
  font-size: calc(0.78rem * var(--builder-card-scale, 1)) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Stepper / +Agregar ? siempre la MISMA altura */
.builder-options-grid .builder-qty-stepper,
.builder-options-grid .builder-qty-stepper.bqs-empty {
  height: var(--builder-action-h) !important;
  min-height: var(--builder-action-h) !important;
  flex: 0 0 var(--builder-action-h) !important;
  padding: 8px calc(12px * var(--builder-card-scale, 1)) calc(12px * var(--builder-card-scale, 1)) !important;
  gap: calc(10px * var(--builder-card-scale, 1)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-top: 1px dashed var(--border-mid);
}

.builder-options-grid .builder-qty-add-btn {
  flex: 1 1 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: calc(0.85rem * var(--builder-card-scale, 1)) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.builder-options-grid .builder-qty-step-btn {
  width:  calc(34px * var(--builder-card-scale, 1)) !important;
  height: calc(34px * var(--builder-card-scale, 1)) !important;
  font-size: calc(1.1rem * var(--builder-card-scale, 1)) !important;
  flex-shrink: 0 !important;
}
.builder-options-grid .builder-qty-step-count {
  font-size: calc(1.15rem * var(--builder-card-scale, 1)) !important;
  flex-shrink: 0 !important;
  min-width: calc(28px * var(--builder-card-scale, 1)) !important;
  text-align: center !important;
}

/* ?? Card de tipo TOGGLE (S?/No) ??
   Misma estructura que las otras cards (imagen + footer + ?rea de acci?n)
   para no deformar el layout. Distinci?n visual: switch + label S?/NO en
   lugar del checkmark o stepper. */
.builder-options-grid .builder-toggle-card {
  /* Hereda todo de .builder-option-card; solo agregamos comportamiento */
}

.builder-options-grid .builder-toggle-state {
  height: var(--builder-action-h) !important;
  flex: 0 0 var(--builder-action-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px calc(12px * var(--builder-card-scale, 1)) calc(12px * var(--builder-card-scale, 1)) !important;
  border-top: 1px dashed var(--border-mid);
  background: var(--card-active);
  transition: background 0.15s ease;
}

/* Switch (track + thumb) */
.builder-toggle-state .bts-track {
  position: relative;
  width: calc(40px * var(--builder-card-scale, 1));
  height: calc(22px * var(--builder-card-scale, 1));
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.builder-toggle-state .bts-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(18px * var(--builder-card-scale, 1));
  height: calc(18px * var(--builder-card-scale, 1));
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: left 0.18s cubic-bezier(.34,1.4,.64,1);
}
.builder-toggle-state .bts-label {
  font-size: calc(0.86rem * var(--builder-card-scale, 1));
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #64748b;
  min-width: calc(28px * var(--builder-card-scale, 1));
  text-align: left;
}

/* Estado activo (s?) */
.builder-toggle-state.on .bts-track {
  background: var(--green, #22c55e);
}
.builder-toggle-state.on .bts-thumb {
  left: calc(20px * var(--builder-card-scale, 1));
}
.builder-toggle-state.on .bts-label {
  color: var(--green, #22c55e);
}

.builder-options-grid .builder-toggle-card.selected {
  border-color: var(--green, #22c55e) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18), 0 4px 12px rgba(34,197,94,0.16) !important;
}
.builder-options-grid .builder-toggle-card.selected .builder-toggle-state {
  background: rgba(34,197,94,0.08);
}

/* ?? Print Preview Modal ? vista previa antes de imprimir ? */
.print-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .65);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ppmFadeIn .2s ease;
}
@keyframes ppmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.print-preview-modal .ppm-shell {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ppmSlideUp .25s cubic-bezier(.34,1.4,.64,1);
}
@keyframes ppmSlideUp {
  from { transform: translateY(20px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
.ppm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
}
.ppm-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 3px;
}
.ppm-subtitle {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}
.ppm-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #64748b;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.ppm-close-btn:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* ?rea del "papel" (centrada, fondo gris para simular escritorio) */
.ppm-paper-wrap {
  flex: 1;
  overflow-y: auto;
  background: #f1f5f9;
  padding: 22px 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.ppm-paper {
  background: #fff;
  width: 100%;
  max-width: 320px;
  min-height: 400px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
.ppm-iframe {
  width: 100%;
  border: 0;
  min-height: 600px;
  background: #fff;
  display: block;
}

.ppm-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}
.ppm-btn {
  flex: 1;
  padding: 14px 18px;
  border-radius: 12px;
  border: none;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .1s, box-shadow .15s, background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ppm-btn:active { transform: scale(.97); }
.ppm-btn-cancel {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #e2e8f0;
}
.ppm-btn-cancel:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.ppm-btn-print {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  box-shadow: 0 4px 12px rgba(249,115,22,.35);
}
.ppm-btn-print:hover {
  box-shadow: 0 6px 18px rgba(249,115,22,.55);
  transform: translateY(-1px);
}

[data-theme="dark"] .print-preview-modal .ppm-shell {
  background: #1e293b;
}
[data-theme="dark"] .ppm-header {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-bottom-color: #334155;
}
[data-theme="dark"] .ppm-title { color: #f1f5f9; }
[data-theme="dark"] .ppm-subtitle { color: #94a3b8; }
[data-theme="dark"] .ppm-close-btn {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}
[data-theme="dark"] .ppm-paper-wrap { background: #0f172a; }
[data-theme="dark"] .ppm-actions {
  background: #1e293b;
  border-top-color: #334155;
}
[data-theme="dark"] .ppm-btn-cancel {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}

@media (max-width: 600px) {
  .print-preview-modal { padding: 10px; }
  .print-preview-modal .ppm-shell { max-height: 95vh; }
  .ppm-paper-wrap { padding: 14px 8px; }
}

/* ================================================================
   MEJORAS ADMIN MODALES ? v2
   ================================================================ */

/* -- Di?logo de cambios no guardados -- */
.unsaved-dialog-box {
  width: min(420px, 92vw);
  border-radius: 24px;
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.ud-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(245,158,11,0.12);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.ud-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
}
.ud-msg {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 8px;
  max-width: 320px;
  line-height: 1.5;
}
.ud-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.ud-actions button {
  width: 100%;
  padding: 12px;
  font-size: 0.92rem;
  border-radius: 14px;
}
.ud-discard-btn {
  background: var(--tint-red) !important;
  color: var(--red) !important;
  border-color: rgba(239,68,68,0.22) !important;
}
.ud-discard-btn:hover { background: rgba(239,68,68,0.18) !important; }

/* -- Modal de ayuda "Define cantidad del producto" -- */
.pqh-box {
  width: min(460px, 92vw);
  border-radius: 24px;
  overflow: hidden;
}
.pqh-body {
  padding: 16px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pqh-intro {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}
.pqh-example {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.pqh-ok  { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.18); }
.pqh-no  { background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.15); }
.pqh-ex-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.pqh-example strong { display: block; margin-bottom: 3px; color: var(--text); }
.pqh-example p { margin: 0; color: var(--text-muted); }
.pqh-footer {
  padding: 12px 20px 20px;
  display: flex;
  justify-content: flex-end;
}

/* -- Toggles modernos en grupos de modificadores -- */
.modifier-group-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--input-bg) 78%, transparent);
}
.mod-toggle-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 130px;
  flex: 1;
}
.mod-toggle-pill:hover { border-color: var(--border-mid); }
.mod-toggle-pill.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.mtp-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}
.mod-toggle-pill.is-on .mtp-label { color: var(--accent); }
.work-mode-btn.is-on {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  border-color: #f59e0b;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  font-weight: 700;
}
.mod-qty-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1.5;
}
.mod-toggle-pill--qty { flex: 1; min-width: 170px; }
.mod-qty-help-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border-mid);
  background: var(--surface);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mod-qty-help-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* -- Secci?n de imagen mejorada -- */
.product-image-layout {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 16px;
  align-items: flex-start;
}
@media (max-width: 540px) {
  .product-image-layout { grid-template-columns: 1fr; }
  .pil-preview { order: -1; }
}
.pil-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pil-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pil-preview-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.pil-card-mock {
  width: 148px;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15,23,42,0.10);
}
.pil-card-img-wrap {
  width: 100%;
  height: 116px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pil-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.pil-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.pil-card-name {
  padding: 6px 8px 2px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pil-card-price {
  padding: 0 8px 8px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent);
}
.pil-preview .remove-img-btn {
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--tint-red);
  color: var(--red);
  border: none;
  cursor: pointer;
  font-weight: 700;
}

/* Upload zone ? compact en secci?n de imagen de producto */
.product-image-section .upload-icon { font-size: 1.4rem; }
.product-image-section .upload-text { font-size: 0.8rem; }
.product-image-section .upload-sub  { font-size: 0.7rem; }

/* -- Mejoras modal de categor?as -- */
/* ???? Manage Categories modal ? redesign ???? */
.manage-cats-box {
  width: min(580px, 96vw);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100dvh - 36px);
  border-radius: 30px;
  overflow: hidden;
}
.manage-cats-box .modal-header-row {
  flex-shrink: 0;
  padding: 16px 16px 10px;
  border-bottom: 1px dashed var(--border);
}
.manage-cats-box .close-btn {
  width: 42px;
  height: 42px;
  margin-left: 12px;
  position: static;
  transform: none;
}
.manage-cats-add {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.manage-cats-add input[type="text"] {
  padding: 9px 12px;
  border: 1.5px solid var(--border-mid);
  border-radius: 10px;
  background: var(--input-focus);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
}
.manage-cats-add input[type="text"]:focus { border-color: var(--accent); }
.manage-cats-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-row {
  display: grid;
  grid-template-columns: 28px 44px 1fr 44px 36px 38px;
  gap: 8px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  transition: background 140ms, box-shadow 140ms;
}
.mc-row:hover { background: var(--surface); box-shadow: 0 2px 8px rgba(15,23,42,0.05); }
.mc-row.list-row-dragging { opacity: 0.45; }
.mc-row-locked {
  opacity: 0.6;
}
.mc-lock-icon {
  font-size: 1rem;
  text-align: center;
  opacity: 0.5;
}
.mc-drag-handle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: grab;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  transition: background 0.12s, color 0.12s;
}
.mc-drag-handle:hover { background: var(--surface); color: var(--accent); }
.mc-drag-handle:active { cursor: grabbing; }
.mc-emoji-btn {
  width: 42px;
  height: 42px;
  font-size: 1.3rem;
  text-align: center;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cat-row-color, #64748b) 10%, var(--surface));
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s, border-color 0.12s;
  line-height: 1;
  padding: 0;
}
.mc-emoji-btn:not(.mc-emoji-btn--locked):hover {
  border-color: var(--accent);
  transform: scale(1.1);
}
.mc-emoji-btn--locked { cursor: default; }
.mc-name-input {
  padding: 8px 10px;
  border: 1.5px solid var(--border-mid);
  border-radius: 10px;
  background: var(--input-focus);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  width: 100%;
  outline: none;
}
.mc-name-input:focus { border-color: var(--accent); }
.mc-color-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.mc-color-swatch {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
}
.mc-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: none;
}
.mc-count {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.mc-delete-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.06);
  color: #ef4444;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.mc-delete-btn svg { width: 14px; height: 14px; }
.mc-delete-btn:hover { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.35); }
.mc-delete-placeholder { width: 36px; }

/* ???? Category Icon Picker ???? */
.cip-overlay { z-index: 9100; }
.cip-box {
  width: min(440px, 96vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.cip-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.cip-search-icon { font-size: 1rem; opacity: 0.5; flex-shrink: 0; }
.cip-search {
  flex: 1;
  border: 1.5px solid var(--border-mid);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--input-focus);
  color: var(--text);
  outline: none;
}
.cip-search:focus { border-color: var(--accent); }
.cip-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}
.cip-section-label {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 8px 0 4px;
}
.cip-section-label:first-child { margin-top: 0; }
.cip-icon-btn {
  width: 40px;
  height: 40px;
  font-size: 1.35rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.1s, transform 0.1s, border-color 0.1s;
  line-height: 1;
}
.cip-icon-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
  transform: scale(1.12);
}
.cip-no-results {
  width: 100%;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 24px 0;
}

/* -- Product form step buttons mejorados -- */
/* .product-form-guide is now outside the scroll area ? no sticky needed */
.product-form-step-btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.product-form-step-btn strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border-mid);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 900;
  flex-shrink: 0;
}
.product-form-step-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 12px rgba(255,90,31,0.3);
}
.product-form-step-btn.active strong {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.product-form-step-btn:not(.active):hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* -- Product form actions mejorados -- */
.product-form-actions {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  margin: 0 !important;
  z-index: 10;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   ESTUDIO: CONSUMO DE VARIABLES — cuando el body tiene .studio-themed
   se aplican estos overrides en los elementos clave del POS.
   IMPORTANTE: el estudio SIEMPRE gana sobre los temas Fiesta/Trail
   (usamos !important para que el color elegido sea el que se vea).
   ──────────────────────────────────────────────────────────────── */
/* Solo el acento del Estudio es global.
   NO tocar --bg-tint / --surface / --card / --text: eso manchaba de
   crema/amarillo Ajustes, Admin, selects y teclados (modo día y noche).
   El fondo del Estudio vive solo en #pos-screen (abajo). */
body.studio-themed {
  --accent: var(--studio-accent, #ff5a1f) !important;
  --accent-glow: color-mix(in srgb, var(--studio-accent, #ff5a1f) 25%, transparent) !important;
  --accent-dim:  color-mix(in srgb, var(--studio-accent, #ff5a1f) 10%, transparent) !important;
}

/* Fondo del POS — solo en modo DÍA.
   En modo noche el crema del Estudio se veía detrás de teclados/ventanas
   y rompía el dark mode. El acento del Estudio sí sigue activo. */
body.studio-themed:not(.dark) #pos-screen,
body.studio-themed.theme-fiesta:not(.dark) #pos-screen,
body.studio-themed.theme-trail:not(.dark) #pos-screen,
body.studio-themed:not(.dark) .pos-layout {
  background-color: var(--studio-bg, #fff) !important;
  background-image: var(--studio-pos-bg, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

/* Modo noche: el POS usa el fondo oscuro normal, no el crema del Estudio */
body.studio-themed.dark #pos-screen,
body.studio-themed.dark .pos-layout {
  background-color: var(--bg) !important;
  background-image: none !important;
}

/* Decoración en la esquina inferior izquierda — aparece solo cuando hay imagen subida */
body.studio-themed.has-studio-corner #pos-screen::after {
  content: '';
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: clamp(180px, 20vw, 320px);
  height: clamp(180px, 20vw, 320px);
  background-image: var(--studio-corner-art);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 40;       /* debajo de modales/teclados; no tapar cortinas */
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
  animation: studioCornerIn 600ms cubic-bezier(.22,1.4,.36,1) both;
}
@keyframes studioCornerIn {
  from { opacity: 0; transform: translateY(20px) translateX(-12px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0)    translateX(0)     scale(1); }
}

/* Botón "Cobrar" usa el color de checkout */
body.studio-themed .checkout-btn {
  background: linear-gradient(135deg,
    var(--studio-checkout, #16a34a),
    color-mix(in srgb, var(--studio-checkout, #16a34a) 80%, #000)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Categoría activa */
/* ─── MODO UNIFORME: todas las categorías activas usan el color del estudio ─── */
body.studio-themed.studio-cat-uniform .category-btn.active {
  background: var(--studio-cat-active, var(--studio-accent, #ff5a1f)) !important;
  border-color: var(--studio-cat-active, var(--studio-accent, #ff5a1f)) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--studio-cat-active, var(--studio-accent, #ff5a1f)) 35%, transparent) !important;
  color: #fff !important;
}
/* ─── MODO PRESERVE (default): respeta el color de cada categoría — fondo blanco, contorno delgado, ícono igual ─── */
body.studio-themed.studio-cat-preserve:not(.dark) .category-btn.active {
  background: var(--card, #ffffff) !important;
  border: 1.5px solid var(--cat-color, var(--accent)) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cat-color, var(--accent)) 22%, transparent) !important;
  color: #1e293b !important;
}
body.studio-themed.studio-cat-preserve.dark .category-btn.active {
  background: var(--card) !important;
  border: 1.5px solid var(--cat-color, var(--accent)) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cat-color, var(--accent)) 22%, transparent) !important;
  color: var(--text) !important;
}
body.studio-themed.studio-cat-preserve .category-btn.active .cat-icon {
  background: var(--cat-color, #64748b) !important;
  color: #fff !important;
}

/* ─── ESTILO BOTONES SÓLIDO (sin gradiente): aplica color plano en checkout/category active ─── */
body.studio-themed.studio-buttons-solid .checkout-btn {
  background: var(--studio-checkout, #16a34a) !important;
  background-image: none !important;
}
body.studio-themed.studio-buttons-solid .category-btn.active {
  background-image: none !important;
}
body.studio-themed.studio-buttons-solid .btn-primary {
  background-image: none !important;
}
/* ─── ESTILO BOTONES GRADIENTE (default): conserva los gradientes nativos ─── */

/* Tarjetas/paneles del Estudio: solo en modo día.
   En noche deben usar --card/--surface oscuros, no el blanco del Estudio. */
body.studio-themed:not(.dark) .product-card,
body.studio-themed:not(.dark) .cart-panel,
body.studio-themed:not(.dark) .products-panel {
  background-color: var(--studio-card, #fff) !important;
}
body.studio-themed.dark .product-card,
body.studio-themed.dark .cart-panel,
body.studio-themed.dark .products-panel {
  background-color: var(--card) !important;
}

/* Radio de botones globales.
   OJO: NO incluir .modal-box aquí — el radio del Estudio (14px default)
   hacía ver todas las ventanas cuadradas/antiguas. Las ventanas siempre
   usan su radio moderno propio. */
body.studio-themed .checkout-btn,
body.studio-themed .category-btn,
body.studio-themed .product-card,
body.studio-themed .btn-primary {
  border-radius: var(--studio-radius, 14px);
}

/* Intensidad de sombras (factor 0–2) */
body.studio-themed .product-card,
body.studio-themed .cart-panel,
body.studio-themed .header-bar {
  box-shadow: 0 calc(8px * var(--studio-shadow-factor, 1))
              calc(20px * var(--studio-shadow-factor, 1))
              rgba(15, 23, 42, calc(0.08 * var(--studio-shadow-factor, 1)));
}

/* ─── Zonas individuales del POS — solo en modo DÍA.
   En noche el Estudio no debe forzar fondos claros/crema. ─── */
body.studio-themed:not(.dark) .pos-header {
  background-color: var(--studio-zone-header-bg-color, var(--card, #fff)) !important;
  background-image: var(--studio-zone-header-bg-image, none) !important;
  background-size: var(--studio-zone-header-size, cover) !important;
  background-position: var(--studio-zone-header-position, center) !important;
  background-repeat: no-repeat !important;
}
body.studio-themed:not(.dark) .pos-cat-rail {
  background-color: var(--studio-zone-cat-bg-color, transparent) !important;
  background-image: var(--studio-zone-cat-bg-image, none) !important;
  background-size: var(--studio-zone-cat-size, cover) !important;
  background-position: var(--studio-zone-cat-position, center) !important;
  background-repeat: no-repeat !important;
}
body.studio-themed:not(.dark) .products-panel {
  background-color: var(--studio-zone-products-bg-color, var(--card, #fff)) !important;
  background-image: var(--studio-zone-products-bg-image, none) !important;
  background-size: var(--studio-zone-products-size, cover) !important;
  background-position: var(--studio-zone-products-position, center) !important;
  background-repeat: no-repeat !important;
}
/* Cart-panel se maneja con ::before más abajo (para soportar blur on items) */

/* BUILDER (modificadores) — fondo por grupo (solo día) */
body.studio-themed:not(.dark) .builder-fullscreen,
body.studio-themed:not(.dark) .builder-overlay,
body.studio-themed:not(.dark) .builder-modal {
  background-color: var(--studio-builder-bg-color, var(--studio-zone-products-bg-color, var(--card, #fff))) !important;
  background-image: var(--studio-builder-bg-image, var(--studio-zone-products-bg-image, none)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: background-image 360ms ease, background-color 360ms ease;
}
body.studio-themed.dark .builder-fullscreen,
body.studio-themed.dark .builder-overlay,
body.studio-themed.dark .builder-modal {
  background-color: var(--bg) !important;
  background-image: none !important;
}
/* La columna principal del builder es transparente para que el fondo se vea */
body.studio-themed .builder-main-panel {
  background: transparent !important;
}

/* Estudio: lista de grupos de modificadores */
.studio-modgroups-card {
  background: var(--card, #fff);
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  padding: 14px 14px 10px;
  margin-top: 8px;
}
.studio-modgroups-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-light);
}
.studio-modgroups-head strong {
  font-size: 0.95rem;
}
.studio-modgroups-head small {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}
/* Buscador de grupos */
.studio-modgroups-search {
  position: relative;
  margin: 10px 0 12px;
}
.studio-modgroups-search::before {
  content: '🔍';
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  opacity: 0.55;
  pointer-events: none;
}
.studio-modgroups-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1.5px solid var(--border-mid);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.studio-modgroups-search input:focus {
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}

/* Lista en grid responsivo multi-columna */
.studio-modgroups-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  align-items: start;
}

/* Fila compacta plegable por grupo */
.studio-mg-row {
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.studio-mg-row.expanded {
  border-color: rgba(124,58,237,0.45);
  box-shadow: 0 6px 16px rgba(124,58,237,0.12);
}
.studio-mg-row[hidden] { display: none; }
.studio-mg-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text);
}
.studio-mg-swatch {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-mid);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35);
}
.studio-mg-name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-mg-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  opacity: 0;
  transition: opacity 160ms ease;
}
.studio-mg-row[data-custom="1"] .studio-mg-dot { opacity: 1; }
.studio-mg-caret {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 220ms ease;
}
.studio-mg-row.expanded .studio-mg-caret { transform: rotate(180deg); }
.studio-mg-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease;
}
.studio-mg-row.expanded .studio-mg-panel { max-height: 220px; }
.studio-mg-panel .studio-zone-actions {
  margin: 0;
  padding: 2px 11px 11px;
  flex-wrap: wrap;
}
.studio-modgroups-list .bws-library-empty {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 14px;
  text-align: center;
  border: 1.5px dashed var(--border-light);
  border-radius: 12px;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   ESTUDIO DE PERSONALIZACIÓN — customizer con preview en vivo
   ──────────────────────────────────────────────────────────────── */
.branding-studio-card {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.12), transparent 60%),
    linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border: 1.5px dashed rgba(124, 58, 237, 0.28);
  border-radius: 22px;
}
body.dark .branding-studio-card {
  background:
    radial-gradient(circle at top right, rgba(167, 139, 250, 0.16), transparent 60%),
    linear-gradient(135deg, #1f1b2e 0%, #261e3d 100%);
  border-color: rgba(167, 139, 250, 0.34);
}
.branding-studio-info { flex: 1 1 240px; }
.branding-studio-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-studio-open {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.32);
}
.btn-studio-open:hover { transform: translateY(-1px); }
.btn-studio-reset {
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border-mid);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
}

/* Modal full-screen */
.studio-modal {
  position: fixed; inset: 0;
  z-index: 28000;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.studio-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-tint);
  overflow: hidden;
}
.studio-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
body.dark .studio-topbar { background: rgba(26, 29, 39, 0.92); }
.studio-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-weight: 1000;
  color: #7c3aed;
}
.studio-topbar h2 { margin: 2px 0 0; font-size: 1.15rem; line-height: 1.1; }
.studio-top-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.studio-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 13px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  border: 1.5px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
}
.studio-btn.primary {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(124,58,237,.28);
}
.studio-btn.ghost { background: transparent; }
.studio-btn.close {
  width: 38px; height: 38px; padding: 0;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  border-color: transparent;
}
.studio-btn.small { padding: 7px 10px; font-size: 0.75rem; border-radius: 9px; }

.studio-body {
  flex: 1;
  display: grid;
  /* Controles = área principal ancha (izq, alto completo) ·
     Preview arriba-derecha · Detalle (sección activa) abajo-derecha */
  --studio-preview-w: clamp(360px, 36vw, 620px);
  --studio-preview-h: 40vh;
  --studio-preview-top: 50%;
  grid-template-columns: minmax(0, 1fr) var(--studio-preview-w);
  grid-template-rows: minmax(0, 1fr) 0px;   /* sin detalle: preview llena todo el alto */
  grid-template-areas:
    "controls preview"
    "controls detail";
  gap: 0;
  min-height: 0;
  overflow: hidden;
}
/* Con sección activa: se abre el panel de detalle bajo la vista previa */
.studio-body.studio-has-detail {
  grid-template-rows: minmax(180px, var(--studio-preview-top)) minmax(0, 1fr);
}
.studio-controls { grid-area: controls; }
.studio-preview-wrap { grid-area: preview; }
.studio-detail { grid-area: detail; }
.studio-body:not(.studio-has-detail) .studio-detail { display: none; }

/* Panel de detalle (controles de la sección activa) */
.studio-detail {
  overflow: auto;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 12px 16px 18px;
}
.studio-detail-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 900;
  margin: 0 0 10px;
  padding: 4px 0 8px;
  background: var(--card);
  border-bottom: 1px dashed var(--border-mid);
}
.studio-detail-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid var(--border-mid);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  line-height: 1;
}
.studio-detail-close:hover { border-color: #7c3aed; color: #7c3aed; }
/* El cuerpo movido al detalle siempre se ve (anula el plegado del acordeón) */
.studio-detail .studio-section-body {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
}
/* Cabecera de la sección activa en la lista de la izquierda */
.studio-section.is-active {
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.35), 0 6px 16px rgba(124,58,237,0.14);
}
.studio-section.is-active > h3 { color: #7c3aed; }

.studio-controls {
  background: var(--card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
}
/* Secciones como tarjetas en CSS GRID real (NO multi-columna).
   Se evita `column-width`/`columns` porque el layout multicolumna tiene bugs
   intermitentes de hit-testing en Chromium/Android WebView (los toques caen en
   el elemento equivocado o en ninguno), agravados con contenido variable,
   acordeones y nodos que se mueven (master-detail). El grid es predecible. */
.studio-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;   /* cada tarjeta toma su alto natural */
}
.studio-section {
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: 14px;
  padding: 14px 14px 16px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.studio-section h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 900;
}

/* Secciones plegables (acordeón estilo editor).
   Toda la BARRA del encabezado es el área tocable (no solo la flecha):
   ocupa el ancho completo y tiene una altura cómoda para el dedo. */
.studio-sec-toggle {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 6px;
  margin: 0 0 4px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}
.studio-sec-toggle:hover { color: var(--accent); }
/* Toda la TARJETA es el botón: el cursor y el resaltado cubren la tarjeta
   completa, no solo el renglón interno del encabezado. */
.studio-section.collapsed { cursor: pointer; }
.studio-section.collapsed:hover { background: var(--bg-tint, rgba(124,58,237,0.06)); }
.studio-section.collapsed:active { background: rgba(124,58,237,0.12); }
/* La flecha es solo indicador visual: que el toque siempre cuente como toque
   de la BARRA completa (el listener vive en el h3). */
.studio-sec-caret { pointer-events: none; }
.studio-section.collapsed .studio-sec-toggle { margin-bottom: 0; }
.studio-sec-caret {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform 240ms ease;
}
.studio-section h3.has-inline .studio-sec-caret { margin-left: 4px; }
.studio-section.collapsed .studio-sec-caret { transform: rotate(-90deg); }
.studio-section.collapsed h3 { margin-bottom: 0; }
.studio-section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 280ms ease, opacity 220ms ease;
  opacity: 1;
}
.studio-section.collapsed .studio-section-body {
  grid-template-rows: 0fr;
  opacity: 0;
}
.studio-section-inner {
  min-height: 0;
  overflow: hidden;
}
.studio-hint { font-size: 0.74rem; color: var(--text-muted); margin: 0 0 10px; }

/* Presets rápidos */
.studio-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.studio-preset-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1.5px solid var(--border-mid);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
}
.studio-preset-btn .pre-dot {
  width: 22px; height: 22px;
  border-radius: 8px;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.studio-preset-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
/* Tarjeta de preset editable: btn principal + acciones (✎ ✕) */
.studio-preset-card {
  position: relative;
  display: flex;
  width: 100%;
}
.studio-preset-card .studio-preset-btn {
  flex: 1;
  width: 100%;
  padding-right: 50px;            /* espacio para los íconos */
}
.studio-preset-card .pre-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.studio-preset-actions {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.studio-preset-card:hover .studio-preset-actions {
  opacity: 1;
  pointer-events: auto;
}
.spa-btn {
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--border-mid);
  background: var(--card);
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 140ms ease;
}
.spa-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.spa-btn.del:hover {
  background: #ef4444;
  border-color: #ef4444;
}
/* Tarjeta "+ Nuevo estilo" */
.studio-preset-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 2px dashed var(--border-mid);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 160ms ease;
  color: var(--text-muted);
}
.studio-preset-add span {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}
.studio-preset-add small {
  font-size: 0.7rem;
  font-weight: 700;
}
.studio-preset-add:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Color rows */
.studio-color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.studio-color-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  border-radius: 11px;
}
.studio-color-row label span { font-size: 0.74rem; font-weight: 800; }
.studio-color-row input[type="color"] {
  width: 38px; height: 30px;
  border: 0; padding: 0;
  border-radius: 8px;
  cursor: pointer;
  background: none;
}

/* Image controls */
.studio-image-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.studio-img-preview {
  flex: 0 0 110px;
  height: 70px;
  border-radius: 12px;
  border: 1.5px dashed var(--border-mid);
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: var(--text-muted);
  text-align: center;
  padding: 4px;
}
.studio-img-actions {
  flex: 1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Filas de zonas del POS (Header/Categorías/Productos/Carrito) */
.studio-zone-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  border-radius: 13px;
}
.studio-zone-preview {
  flex: 0 0 56px;
  height: 56px;
  border-radius: 11px;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-mid);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4);
}
.studio-zone-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.studio-zone-info strong { font-size: 0.82rem; }
.studio-zone-info small { font-size: 0.66rem; color: var(--text-muted); }
.studio-zone-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 5px;
}
.studio-zone-actions input[type="color"] {
  width: 36px; height: 32px;
  border: 0; padding: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

/* ============================================================
   PROMPTS DE IA — diseño moderno, responsivo, con feedback de copiado
   ============================================================ */
.studio-ai-section {
  --ai-grad: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  --ai-grad-soft: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(219,39,119,0.10));
}
.ai-zones-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 14px 0 6px;
  padding-left: 4px;
}
.studio-ai-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  border-radius: 13px;
  margin: 0 0 8px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 200ms ease;
  font-family: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
  min-width: 0;       /* evita desbordar al padre */
}
.studio-ai-prompt:hover {
  border-color: #7c3aed;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124,58,237,0.15);
}
.studio-ai-prompt:active { transform: translateY(0); }
.studio-ai-prompt.featured {
  background: var(--ai-grad-soft);
  border-color: rgba(124,58,237,0.32);
  padding: 14px;
}
.studio-ai-prompt.featured::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--ai-grad);
  opacity: 0; transition: opacity 220ms ease;
  pointer-events: none;
}
.studio-ai-prompt.featured:hover::before { opacity: 0.05; }

.studio-ai-prompt .ai-prompt-num {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  background: var(--ai-grad);
  color: #fff;
  font-weight: 1000;
  font-size: 1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(124,58,237,0.35);
  position: relative; z-index: 1;
}
.studio-ai-prompt .ai-prompt-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(219,39,119,0.10));
  border: 1.5px solid rgba(124,58,237,0.32);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: #7c3aed;
  position: relative; z-index: 1;
}
/* Iconitos simbólicos hechos con CSS para cada zona */
.ai-prompt-icon.icon-header::before  { content: '▭'; font-weight: 900; }
.ai-prompt-icon.icon-cats::before    { content: '▮'; font-weight: 900; }
.ai-prompt-icon.icon-prods::before   { content: '▦'; font-weight: 900; }
.ai-prompt-icon.icon-cart::before    { content: '▯'; font-weight: 900; }
.ai-prompt-icon.icon-corner::before  { content: '◣'; font-weight: 900; }
.ai-prompt-icon.icon-builder::before { content: '⊞'; font-weight: 900; }
.ai-prompt-icon.icon-photo::before   { content: '🖼'; font-size: 0.95rem; }

.studio-ai-prompt .ai-prompt-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  position: relative; z-index: 1;
  text-align: left;
}
.studio-ai-prompt .ai-prompt-text strong {
  font-size: 0.86rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-ai-prompt .ai-prompt-text small {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-ai-prompt .ai-prompt-action {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  position: relative; z-index: 1;
  transition: all 180ms ease;
}
.studio-ai-prompt .ai-prompt-action .ai-copy-done {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-weight: 900;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.22,1.6,.36,1);
}
.studio-ai-prompt.copied {
  border-color: #10b981 !important;
  background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(5,150,105,0.10)) !important;
  animation: aiCopiedFlash 700ms ease;
}
.studio-ai-prompt.copied .ai-prompt-action {
  border-color: #10b981;
}
.studio-ai-prompt.copied .ai-prompt-action .ai-copy-default {
  opacity: 0;
}
.studio-ai-prompt.copied .ai-prompt-action .ai-copy-done {
  opacity: 1;
  transform: scale(1);
}
@keyframes aiCopiedFlash {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
}
.studio-ai-prompt.mini {
  padding: 10px 11px;
  margin-bottom: 0;
}

.ai-zones-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.ai-zones-grid .studio-ai-prompt.full-row { grid-column: 1 / -1; }
@media (max-width: 1180px) {
  .ai-zones-grid { grid-template-columns: 1fr; }
  .ai-zones-grid .studio-ai-prompt.full-row { grid-column: auto; }
}

.ai-help-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 12px;
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(219,39,119,0.06));
  border: 1px dashed rgba(124,58,237,0.35);
  border-radius: 12px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.ai-help-bar > span:first-child { font-size: 1rem; line-height: 1; padding-top: 1px; }
.ai-help-bar strong {
  display: block;
  color: var(--text);
  font-size: 0.78rem;
  margin-bottom: 2px;
}
.ai-help-bar a {
  color: #7c3aed;
  text-decoration: underline;
  font-weight: 700;
}

/* ============================================================
   STUDIO — toggle rows y color-input compactos
   ============================================================ */
.studio-row {
  display: block;
  margin-bottom: 7px;
}
.studio-toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  border-radius: 11px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.studio-toggle-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #7c3aed;
  cursor: pointer;
}
.studio-color-input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  border-radius: 11px;
  font-size: 0.78rem;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
}
.studio-color-input input[type="color"] {
  flex: 0 0 auto;
  width: 38px; height: 30px;
  border: 0; padding: 0;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
}

/* Asegurar que el panel del estudio NUNCA tenga scroll horizontal */
.studio-controls {
  overflow-x: hidden;
}
.studio-section, .studio-section > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   AI ZONE BUTTON — botón "🤖 Prompt" inline en cada zona/imagen
   ============================================================ */
.studio-btn.ai-zone-btn {
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(219,39,119,0.10)) !important;
  border: 1.5px solid rgba(124,58,237,0.40) !important;
  color: #7c3aed !important;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  transition: all 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  gap: 4px;
}
.studio-btn.ai-zone-btn:hover {
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(219,39,119,0.18)) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124,58,237,0.20);
}
.studio-btn.ai-zone-btn .ai-copy-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-weight: 1000;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.22,1.6,.36,1);
}
.studio-btn.ai-zone-btn.copied {
  border-color: #10b981 !important;
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(5,150,105,0.18)) !important;
  animation: aiCopiedFlash 700ms ease;
}
.studio-btn.ai-zone-btn.copied .ai-copy-default { opacity: 0; }
.studio-btn.ai-zone-btn.copied .ai-copy-done {
  opacity: 1;
  transform: scale(1);
}

/* Botón inline dentro del título h3 (más pequeño, alineado a la derecha) */
.studio-section h3 .ai-inline {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 4px 9px;
}
.studio-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* studio-zone-actions: que envuelva si hay muchos botones */
.studio-zone-actions {
  flex-wrap: wrap;
  row-gap: 5px;
}

/* ============================================================
   STUDIO ZONE ADJUSTMENTS — posición, tamaño y opacidad por zona
   ============================================================ */
.studio-zone-adjust {
  margin-top: 10px;
  padding: 11px;
  background: var(--bg-tint);
  border: 1px solid var(--border-mid);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: zoneAdjustIn 220ms ease;
}
@keyframes zoneAdjustIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.studio-zone-adjust .za-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 4px;
}
/* 9-point position picker */
.za-pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-template-rows: repeat(3, 28px);
  gap: 4px;
  width: fit-content;
}
.za-pos-grid button {
  width: 28px; height: 28px;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: all 140ms ease;
}
.za-pos-grid button::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  top: var(--dot-y, 50%);
  left: var(--dot-x, 50%);
  transform: translate(-50%, -50%);
  transition: all 140ms ease;
}
.za-pos-grid button:hover {
  border-color: var(--accent);
}
.za-pos-grid button.is-active {
  background: var(--accent);
  border-color: var(--accent);
}
.za-pos-grid button.is-active::after {
  background: #fff;
  width: 8px; height: 8px;
}
/* Size mode buttons */
.za-size-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.za-size-row button {
  flex: 1;
  min-width: 60px;
  padding: 6px 8px;
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 140ms ease;
}
.za-size-row button:hover { border-color: var(--accent); }
.za-size-row button.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Layout horizontal: posición + tamaño + opacity en línea */
.za-controls-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
}
.za-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.za-opacity-row input[type="range"] {
  width: 100%;
}

/* ============================================================
   STUDIO MODE BUTTONS — selectores de modo (uniform vs preserve, solid vs gradient)
   ============================================================ */
.studio-mode-row {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
}
.studio-label-title {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--text);
}
.studio-mode-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.studio-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 11px;
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  border-radius: 11px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 160ms ease;
  position: relative;
}
.studio-mode-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,90,31,0.10);
}
.studio-mode-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: 0 0 0 2.5px rgba(255,90,31,0.22), 0 4px 10px rgba(255,90,31,0.15);
}
.studio-mode-btn.is-active::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 8px;
  width: 18px; height: 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255,90,31,0.4);
}
.studio-mode-btn .mode-icon {
  width: 32px; height: 22px;
  border-radius: 7px;
  margin-bottom: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.studio-mode-btn strong {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--text);
}
.studio-mode-btn small {
  font-size: 0.66rem;
  color: var(--text-muted);
  line-height: 1.2;
}

/* ============================================================
   BRANDING — Welcome Studio + Biblioteca de fondos + Presets list
   ============================================================ */
.branding-welcome-studio {
  background: linear-gradient(135deg, rgba(255,90,31,0.04), rgba(255,191,31,0.04));
  border: 1.5px solid rgba(255,90,31,0.20);
  border-radius: 18px;
  padding: 18px;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}
.branding-welcome-studio::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #ff5a1f, #ffbf1f, #ff5a1f);
  background-size: 200% 100%;
  animation: bwsShine 4s linear infinite;
}
@keyframes bwsShine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.bws-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.btn-bws-play {
  background: var(--card);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 11px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms ease;
}
.btn-bws-play:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255,90,31,0.25);
}
.bws-body {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .bws-body { grid-template-columns: 1fr; }
}

/* PREVIEW en vivo */
.bws-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bws-preview-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #FFBF1F, #FFA500 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18), inset 0 0 0 2px rgba(255,255,255,0.18);
  isolation: isolate;
}
.bws-preview-splash {
  position: absolute; inset: 0;
  overflow: hidden;
}
/* Fondo (color por defecto o imagen custom) */
.bws-preview-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,140,0,0.42), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,191,31,0.28), transparent 55%),
    linear-gradient(135deg, #FFBF1F 0%, #FFA500 100%);
  background-size: cover, cover, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background 320ms ease;
}
.bws-preview-splash.has-bg .bws-preview-bg {
  background-image: var(--bws-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bws-preview-content {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  text-align: center;
  z-index: 1;
}
/* Logo ring (cuando NO hay fondo custom: anillo blanco con resplandor) */
.bws-preview-logo-ring {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #fff8e1);
  box-shadow:
    0 6px 18px rgba(139,69,19,0.22),
    0 0 0 2px rgba(255,255,255,0.6),
    0 0 0 4px rgba(255,140,0,0.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  transition: all 280ms ease;
}
.bws-preview-logo-inner {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  border-radius: 50%;
  overflow: hidden;
}
.bws-preview-logo-inner img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Cuando hay fondo custom: el logo NO está dentro de un círculo, flota libre */
.bws-preview-splash.has-bg .bws-preview-logo-ring {
  width: 84px; height: 56px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.bws-preview-splash.has-bg .bws-preview-logo-inner {
  width: 84px; height: 56px;
  font-size: 1.9rem;
  border-radius: 0;       /* SIN círculo */
  overflow: visible;      /* logo completo, no recortado */
}
.bws-preview-splash.has-bg .bws-preview-logo-inner img {
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.42));
  object-fit: contain;
}
/* Nombre del negocio — estilo Fredoka como en el real */
.bws-preview-name {
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  color: #2b1810;
  margin: 0;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bws-preview-splash.has-bg .bws-preview-name {
  font-size: 0.78rem;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 3px 9px rgba(43,24,16,0.18);
}
/* Botón rojo grande tipo "fiesta" — proporciones del real */
.bws-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(135deg, #f84a4a 0%, #d7192b 100%);
  color: #fff;
  border: 1.5px solid #2b1810;
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 900;
  cursor: default;
  box-shadow:
    0 3px 0 #2b1810,
    0 6px 14px rgba(43,24,16,0.28),
    inset 0 1px 0 rgba(255,255,255,0.28);
  margin-top: 2px;
  font-family: "Fredoka", "Poppins", sans-serif;
  letter-spacing: 0.3px;
}
.bws-preview-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  background: rgba(255,255,255,0.20);
  border-radius: 50%;
  font-size: 0.62rem;
}
.bws-preview-splash.has-bg .bws-preview-btn {
  animation: bwsFiestaBtn 2.6s ease-in-out infinite;
}
@keyframes bwsFiestaBtn {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.bws-preview-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Animación de entrada al reproducir (clonando el feel del real) */
.bws-preview-splash.animating .bws-preview-logo-ring {
  animation: bwsLogoPop 0.58s cubic-bezier(.16,1,.3,1) both,
             bwsLogoFloat 2.8s ease-in-out 0.6s infinite;
}
.bws-preview-splash.animating .bws-preview-name {
  animation: bwsNameIn 0.7s ease 0.18s both, bwsTitleBreathe 4.2s ease-in-out 0.9s infinite;
}
.bws-preview-splash.animating .bws-preview-btn {
  animation: bwsBtnIn 0.7s ease 0.32s both;
}
@keyframes bwsLogoPop {
  0%   { transform: scale(0.35) rotate(-14deg); opacity: 0; }
  60%  { transform: scale(1.10) rotate(3deg);   opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes bwsLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes bwsNameIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes bwsTitleBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.012); }
}
@keyframes bwsBtnIn {
  from { transform: translateY(20px) scale(0.85); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Controles a la derecha */
.bws-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-bws-prompt {
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(219,39,119,0.12));
  color: #7c3aed;
  border: 1.5px solid rgba(124,58,237,0.40);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 180ms ease;
}
.btn-bws-prompt:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(124,58,237,0.25);
}
.btn-bws-prompt .ai-copy-done {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-weight: 1000;
  border-radius: inherit;
  opacity: 0; transform: scale(0.6);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.22,1.6,.36,1);
}
.btn-bws-prompt.copied {
  border-color: #10b981;
  animation: aiCopiedFlash 700ms ease;
}
.btn-bws-prompt.copied .ai-copy-default { opacity: 0; }
.btn-bws-prompt.copied .ai-copy-done   { opacity: 1; transform: scale(1); }

/* Biblioteca de fondos */
.bws-library-section {
  background: var(--card);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  padding: 12px;
}
.bws-library-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.bws-library-title strong {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--text);
}
.bws-library-title small {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-tint);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.bws-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 9px;
}
.bws-library-empty {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 18px 8px;
  border: 1.5px dashed var(--border-mid);
  border-radius: 12px;
}
.bws-bg-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  overflow: hidden;
  cursor: pointer;
  border: 2.5px solid transparent;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tint);
  transition: all 200ms ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.bws-bg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.bws-bg-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,90,31,0.25), 0 6px 16px rgba(255,90,31,0.30);
}
.bws-bg-card .bws-bg-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 14px 8px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bws-bg-card .bws-bg-actions {
  position: absolute; top: 5px; right: 5px;
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.bws-bg-card:hover .bws-bg-actions,
.bws-bg-card.is-active .bws-bg-actions { opacity: 1; }
.bws-bg-card .bws-bg-actions button {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 0;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background 160ms ease;
}
.bws-bg-card .bws-bg-actions button.del:hover { background: #ef4444; }
.bws-bg-card .bws-bg-actions button.rename:hover { background: #3b82f6; }
.bws-bg-card .is-active-badge {
  position: absolute; top: 5px; left: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  display: none;
}
.bws-bg-card.is-active .is-active-badge { display: block; }

/* Tarjeta de presets guardados en el branding */
.branding-presets-card {
  background: var(--card);
  border: 1.5px solid var(--border-mid);
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
}
.branding-presets-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.branding-presets-header small {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-tint);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.branding-presets-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 9px;
}
.bp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-tint);
  border: 1.5px solid var(--border-mid);
  border-radius: 12px;
  transition: all 180ms ease;
}
.bp-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.bp-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  border: 2px solid #fff;
}
.bp-info {
  flex: 1; min-width: 0;
}
.bp-name {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-date {
  font-size: 0.65rem;
  color: var(--text-muted);
}
.bp-actions {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}
.bp-actions button {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1.5px solid var(--border-mid);
  background: var(--card);
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 160ms ease;
}
.bp-actions button.apply { color: #10b981; border-color: rgba(16,185,129,0.3); }
.bp-actions button.apply:hover { background: #10b981; color: #fff; }
.bp-actions button.del { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.bp-actions button.del:hover { background: #ef4444; color: #fff; }

/* ============================================================
   EMPTY CART — variables controladas por el Studio (posición/tamaño/color/contorno)
   ============================================================ */
.empty-cart {
  position: relative !important;
  height: 100% !important;
  padding: 0 !important;
  display: block !important;     /* anula el flex anterior */
  gap: 0 !important;
}
.empty-cart > * {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  margin: 0;
  transition: top 240ms ease, color 200ms ease, font-size 200ms ease, text-shadow 220ms ease, filter 220ms ease;
}
.empty-cart .empty-cart-icon {
  top: calc(var(--emptycart-pos, 50%) - (60px * var(--emptycart-scale, 1)));
  font-size: calc(3.5rem * var(--emptycart-scale, 1)) !important;
  filter: drop-shadow(var(--emptycart-outline, none));
  opacity: 0.55;
}
.empty-cart p {
  top: calc(var(--emptycart-pos, 50%) + 10px);
  font-size: calc(0.95rem * var(--emptycart-scale, 1)) !important;
  font-weight: 700 !important;
  color: var(--emptycart-color, var(--text-muted)) !important;
  text-shadow: var(--emptycart-outline, none);
}
.empty-cart small {
  top: calc(var(--emptycart-pos, 50%) + (34px * var(--emptycart-scale, 1)));
  font-size: calc(0.75rem * var(--emptycart-scale, 1)) !important;
  color: var(--emptycart-color, var(--text-muted)) !important;
  text-shadow: var(--emptycart-outline, none);
  opacity: 0.85;
}
body.hide-empty-cart-msg .empty-cart { display: none !important; }
body.hide-empty-cart-icon .empty-cart .empty-cart-icon { display: none !important; }

/* ============================================================
   BUILDER (pantalla de modificadores) — hereda fondo del POS
   ============================================================ */
body.studio-themed:not(.dark) .builder-fullscreen,
body.studio-themed:not(.dark) .builder-overlay {
  background: var(--studio-zone-products-bg, var(--studio-bg, var(--bg-tint))) !important;
}
body.studio-themed.dark .builder-fullscreen,
body.studio-themed.dark .builder-overlay {
  background: var(--bg) !important;
}
body.studio-themed .builder-main-panel {
  background: transparent !important;
}

/* ============================================================
   CART BG BLUR — cuando hay productos en el carrito, difumina LEVEMENTE la imagen
   del fondo del panel para que el cajero distinga los items pero la imagen siga visible.
   ============================================================ */
body.studio-themed:not(.dark) .cart-panel {
  position: relative;
  isolation: isolate;
  background-color: var(--studio-zone-cart-bg-color, var(--card, #fff)) !important;
  background-image: none !important;     /* la imagen pasa al pseudo para poder blur-earla */
}
body.studio-themed.dark .cart-panel {
  position: relative;
  isolation: isolate;
  background-color: var(--card) !important;
  background-image: none !important;
}
body.studio-themed:not(.dark) .cart-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--studio-zone-cart-bg-image, none);
  background-size: var(--studio-zone-cart-size, cover);
  background-position: var(--studio-zone-cart-position, center);
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
  filter: blur(0) saturate(1);
  opacity: var(--studio-zone-cart-opacity, 1);
  transition: filter 520ms cubic-bezier(.4,.0,.2,1), opacity 520ms ease;
}
/* Cuando hay productos: blur muy ligero (3px) + leve atenuación para que el texto del carrito gane contraste */
body.studio-themed:not(.dark) .cart-panel.cart-has-items::before {
  filter: blur(3px) saturate(0.85);
  opacity: 0.78;
}
/* Más opciones: si llega a haber muchos items, aumenta un toque */
body.studio-themed:not(.dark) .cart-panel.cart-has-items.cart-busy::before {
  filter: blur(4.5px) saturate(0.75);
  opacity: 0.62;
}
/* Cart-panel debe asegurar que su contenido va arriba del pseudo */
body.studio-themed .cart-panel > * {
  position: relative;
  z-index: 1;
}

/* Sliders */
.studio-range { display: block; margin-bottom: 12px; }
.studio-range span {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.studio-range em { font-style: normal; color: var(--text-muted); font-weight: 700; }
.studio-range input[type="range"] { width: 100%; accent-color: #7c3aed; }

/* Saved presets list */
.studio-saved-list { display: grid; gap: 6px; }
.studio-saved-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  border-radius: 12px;
}
.studio-saved-card .sv-swatch {
  width: 28px; height: 28px;
  border-radius: 9px;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.studio-saved-card .sv-name {
  flex: 1;
  font-weight: 800;
  font-size: 0.85rem;
}
.studio-saved-card .sv-actions {
  display: flex;
  gap: 4px;
}
.studio-saved-card .sv-mini-btn {
  width: 30px; height: 30px;
  border: 1.5px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
  font-size: 0.78rem;
}
.studio-saved-card .sv-mini-btn.apply { background: #7c3aed; color: #fff; border-color: transparent; }
.studio-saved-card .sv-mini-btn.del   { background: #fecaca; color: #b91c1c; border-color: #fca5a5; }

/* Preview area */
.studio-preview-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 10px, transparent 10px 20px),
    var(--bg-tint);
}

/* Tirador para redimensionar la vista previa desde la esquina/borde */
.studio-preview-resizer {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 100%;
  z-index: 6;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, rgba(124,58,237,0.10), transparent);
}
.studio-preview-resizer::before {
  content: '';
  width: 4px;
  height: 46px;
  border-radius: 4px;
  background: var(--border-mid);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
  transition: background 160ms ease, height 160ms ease;
}
.studio-preview-resizer:hover::before,
.studio-resizing .studio-preview-resizer::before {
  background: #7c3aed;
  height: 70px;
}
/* Esquina inferior-izquierda como acento de "agarre" */
.studio-preview-resizer::after {
  content: '⤢';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
  pointer-events: none;
}
.studio-resizing,
.studio-resizing * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}
.studio-resizing { cursor: col-resize; }
/* El iframe NO debe tragarse el gesto durante TODO el arrastre */
.studio-resizing #studio-preview-frame { pointer-events: none !important; }
.studio-preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 800;
}
.studio-preview-toolbar-actions { display: flex; gap: 6px; }
.studio-zoom-btn {
  border: 1.5px solid var(--border-mid);
  background: var(--surface);
  color: var(--text);
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.studio-preview-frame-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  /* "safe center": centra el mockup y usa el alto; si el zoom lo agranda más
     que el panel, cae a inicio y se puede hacer scroll (sin recortes) */
  align-items: safe center;
  justify-content: safe center;
  padding: 16px;
  position: relative;
}
.studio-preview-stage {
  width: 1366px;     /* tamaño real de la vista previa */
  height: 820px;
  transform-origin: top left;
  position: relative;
}
#studio-preview-frame {
  display: block;
  width: 1366px;
  height: 820px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px rgba(15,23,42,0.18);
}

/* Tablet / portrait: apilar — preview acoplado arriba (redimensionable en alto),
   controles abajo. Master-detail desactivado (vuelve el acordeón en sitio). */
@media (max-width: 1080px) {
  .studio-body,
  .studio-body.studio-has-detail {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, var(--studio-preview-h)) minmax(0, 1fr);
    grid-template-areas:
      "preview"
      "controls";
  }
  .studio-detail { display: none !important; }
  .studio-preview-wrap {
    grid-area: preview;
    border-bottom: 1px solid var(--border);
  }
  .studio-controls {
    grid-area: controls;
    border-right: 0;
  }
  /* En apilado el tirador vive en el borde inferior y ajusta el alto */
  .studio-preview-resizer {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14px;
    cursor: row-resize;
    background: linear-gradient(to bottom, transparent, rgba(124,58,237,0.12));
  }
  .studio-preview-resizer::before {
    width: 56px;
    height: 4px;
  }
  .studio-preview-resizer:hover::before,
  .studio-resizing .studio-preview-resizer::before {
    width: 84px;
    height: 4px;
  }
  .studio-preview-resizer::after { display: none; }
  .studio-resizing { cursor: row-resize; }
}

/* ────────────────────────────────────────────────────────────────
   CIERRE DE TURNO — vista compacta para tablet (1024×768 landscape)
   Encaja todo en una sola pantalla, sin scroll vertical.
   El historial se queda como tira inferior pequeña, el resto se
   acomoda en una sola fila de tres columnas + el riel de acciones.
   ──────────────────────────────────────────────────────────────── */
.shift-close-shell {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.shift-close-topbar {
  padding: calc(8px + var(--app-safe-top)) 14px 6px !important;
}
.shift-close-title-wrap h2 {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  line-height: 1.05 !important;
}
.shift-close-title-wrap p {
  font-size: 0.72rem !important;
  margin-top: 1px !important;
}
.shift-close-kicker {
  font-size: 0.62rem !important;
}
.shift-close-top-summary {
  padding: 6px 12px !important;
  min-width: 140px !important;
}
.shift-close-top-summary strong {
  font-size: 1rem !important;
}

/* Cuerpo: sin scroll global — cada panel gestiona el suyo */
.shift-close-body {
  padding: 8px 10px 8px !important;
  overflow: hidden !important;
  height: auto !important;
}
.shift-close-main {
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Grid principal: 3 columnas + riel, en una sola fila a lo alto */
.shift-close-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  grid-template-columns: minmax(210px, 240px) minmax(360px, 1fr) minmax(240px, 280px) 70px !important;
  grid-template-areas: "meta count summary rail" !important;
  gap: 8px !important;
}

/* Historial: ahora va abajo como tira fina */
.shift-history-section {
  display: none !important;
}

/* Datos del turno (columna izquierda) */
.shift-control-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 10px !important;
}
.shift-meta-hero {
  padding: 10px 12px !important;
  border-radius: 16px !important;
}
.shift-meta-hero strong {
  font-size: 1.2rem !important;
  margin-top: 3px !important;
}
.shift-meta-hero span {
  font-size: 0.6rem !important;
}
.shift-meta-hero small {
  margin-top: 4px !important;
  font-size: 0.65rem !important;
}
.shift-control-panel .shift-panel-head {
  margin: 7px 0 4px !important;
  padding-top: 7px !important;
}
.shift-control-panel .shift-panel-head h4 {
  font-size: 0.72rem !important;
}
.shift-form-row {
  margin-bottom: 6px !important;
}
.shift-form-row label {
  font-size: 0.62rem !important;
}
.shift-form-row input,
.shift-form-row textarea {
  min-height: 32px !important;
  padding: 6px 8px !important;
  font-size: 0.78rem !important;
}
.shift-form-row textarea {
  min-height: 44px !important;
}
.shift-selector button {
  min-height: 30px !important;
  font-size: 0.72rem !important;
}

/* Billetes y monedas (columna central): hereda overflow propio */
.shift-count-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 10px !important;
  overflow: hidden !important;
}
.shift-count-panel .shift-panel-head {
  margin-bottom: 6px !important;
  padding-bottom: 6px !important;
}
.shift-count-panel .shift-panel-head h4 {
  font-size: 0.85rem !important;
}
.shift-denom-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.shift-cash-head,
.shift-cash-row {
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) minmax(88px, 100px) !important;
  gap: 6px !important;
}
.shift-cash-head { font-size: 0.6rem !important; padding-bottom: 2px !important; }
.shift-cash-denom {
  min-height: 34px !important;
  padding: 2px !important;
}
.shift-cash-denom strong { font-size: 0.78rem !important; }
.shift-cash-denom small  { font-size: 0.5rem !important; margin-top: 1px !important; }
.shift-cash-row input,
.shift-cash-entry {
  min-height: 34px !important;
  padding: 4px 8px !important;
  font-size: 0.88rem !important;
  border-radius: 9px !important;
}
.shift-cash-total {
  padding: 5px 2px 4px !important;
  font-size: 0.78rem !important;
}
.shift-cash-total strong { font-size: 0.88rem !important; }

/* Resumen (columna derecha) */
.shift-summary-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}
.shift-summary-card {
  padding: 12px !important;
  overflow-y: auto !important;
  max-height: 100% !important;
}
.shift-summary-total-line,
.shift-report-row {
  font-size: 0.78rem !important;
}
.shift-summary-total-line strong,
.shift-report-row strong {
  font-size: 0.9rem !important;
}
.shift-summary-grand,
.shift-report-row.main {
  margin-top: 8px !important;
}
.shift-summary-grand span,
.shift-summary-grand strong,
.shift-report-row.main span,
.shift-report-row.main strong {
  font-size: 1rem !important;
}
.shift-report-box {
  padding: 10px 0 !important;
  gap: 8px !important;
}
.shift-balance-card {
  min-height: 60px !important;
  margin: 10px 0 8px !important;
  border-radius: 14px !important;
}
.shift-balance-card small { font-size: 0.6rem !important; }
.shift-balance-card strong { font-size: 1.65rem !important; }
.shift-money-line.compact {
  padding: 4px 0 !important;
  font-size: 0.7rem !important;
}
.shift-summary-split {
  padding-top: 8px !important;
  gap: 5px !important;
}
.shift-summary-split div {
  padding: 5px 7px !important;
  font-size: 0.68rem !important;
}

/* Riel de acciones */
.shift-action-rail {
  gap: 6px !important;
  padding: 2px 0 !important;
}
.shift-action-rail button {
  min-height: 52px !important;
  border-radius: 14px !important;
  gap: 3px !important;
}
.shift-action-rail .rail-print {
  min-height: 62px !important;
}
.shift-action-rail button span {
  font-size: 1rem !important;
}
.shift-action-rail button strong {
  font-size: 0.58rem !important;
}

/* En pantallas más altas (≥820px) restauramos espacio cómodo */
@media (min-height: 880px) {
  .shift-close-grid {
    grid-template-columns: minmax(220px, 260px) minmax(380px, 1fr) minmax(260px, 300px) 76px !important;
    gap: 12px !important;
  }
  .shift-history-section { display: block !important; }
  .shift-close-grid {
    grid-template-columns: minmax(220px, 260px) minmax(380px, 1fr) minmax(260px, 300px) 76px !important;
    grid-template-areas:
      "meta count summary rail"
      "history count summary rail" !important;
  }
}

/* En pantallas estrechas (<1040px) — vuelve al apilado vertical existente */
@media (max-width: 1040px) {
  .shift-close-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) 70px !important;
    grid-template-areas:
      "meta meta rail"
      "count summary rail" !important;
  }
}

/* ============================================================
   BANNER DE MODO MANUAL EN AJUSTES → SQUARE
   Avisa cuando el toggle de CHARGE intent está apagado para que
   el usuario sepa por qué Square abre sin monto.
   ============================================================ */

/* ============================================================
   SQUARE READER SDK — guía visual con aparato real
   ============================================================ */
.svw-shell { max-width: 900px; }
.svw-header { background: linear-gradient(135deg, #3b0764 0%, #6d28d9 58%, #2563eb 100%); }
.svw-body {
  padding: 20px 24px 22px;
  overflow-y: auto;
  background: #f8fafc;
}
.svw-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}
.svw-progress-row strong { color: #6d28d9; font-size: 16px; }
.svw-progress {
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}
.svw-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #2563eb);
  transition: width .3s ease;
}
.svw-stage {
  display: grid;
  place-items: center;
  height: 390px;
  margin-top: 14px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #f1f5f9 72%);
  box-sizing: border-box;
}
.svw-device-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: min(650px, 96%);
  height: 100%;
  min-height: 0;
}
.svw-device-visual img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(15,23,42,.16));
}
.svw-device-callout {
  position: absolute;
  padding: 8px 12px;
  border: 2px solid #7c3aed;
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  color: #5b21b6;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(91,33,182,.16);
}
.svw-device-callout::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 2px;
  background: #7c3aed;
  transform-origin: right center;
}
.svw-device-callout.is-usbc { left: 9%; bottom: 14%; }
.svw-device-callout.is-usbc::after { right: -45px; top: 48%; transform: rotate(-12deg); }
.svw-device-callout.is-button { right: 4%; bottom: 16%; border-color: #f97316; color: #c2410c; }
.svw-device-callout.is-button::after { left: -45px; top: 48%; background: #f97316; transform: rotate(12deg); }
.svw-device-lights {
  position: absolute;
  left: 22.5%;
  top: 49.5%;
  display: flex;
  gap: 13px;
  transform: rotate(-6deg);
}
.svw-device-lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: svwLightPulse 1.1s ease-in-out infinite alternate;
}
.svw-device-lights i:nth-child(2) { animation-delay: .12s; }
.svw-device-lights i:nth-child(3) { animation-delay: .24s; }
.svw-device-lights i:nth-child(4) { animation-delay: .36s; }
.svw-device-lights.is-orange i { background: #f97316; box-shadow: 0 0 11px #fb923c; }
.svw-device-lights.is-green i { background: #22c55e; box-shadow: 0 0 11px #4ade80; }
@keyframes svwLightPulse { from { opacity: .45; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
.svw-ready-check {
  position: absolute;
  right: 5%;
  top: 8%;
  padding: 9px 13px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 7px 18px rgba(22,101,52,.14);
}
.svw-tablet {
  width: min(560px, 92%);
  padding: 18px;
  border: 10px solid #1e293b;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 32px rgba(15,23,42,.18);
  box-sizing: border-box;
}
.svw-tablet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -18px -18px 15px;
  padding: 11px 15px;
  border-radius: 13px 13px 0 0;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.svw-tablet-bar b { padding: 4px 7px; border-radius: 6px; background: #16a34a; font-size: 10px; }
.svw-screen-title { margin-bottom: 14px; color: #0f172a; font-size: 19px; font-weight: 900; }
.svw-screen-path {
  margin: 9px 0 5px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.svw-screen-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  color: #475569;
  font-size: 12px;
}
.svw-screen-field strong { color: #0f172a; font-family: ui-monospace, Consolas, monospace; }
.svw-tablet.is-app { display: grid; gap: 12px; background: #f8fafc; }
.svw-app-brand { color: #6d28d9; font-size: 12px; font-weight: 950; letter-spacing: .08em; }
.svw-app-card {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.svw-app-card > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #7c3aed; color: #fff; font-weight: 900; }
.svw-app-card div { display: flex; flex-direction: column; gap: 2px; }
.svw-app-card b { color: #0f172a; font-size: 14px; }
.svw-app-card small { color: #64748b; font-size: 11px; }
.svw-app-card em { color: #16a34a; font-size: 11px; font-style: normal; font-weight: 950; }
.svw-app-card.is-focus { border: 2px solid #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.10); }
.svw-app-card.is-focus em { padding: 5px 8px; border-radius: 7px; background: #7c3aed; color: #fff; }
.svw-auth-ok { padding: 11px; border-radius: 10px; background: #dcfce7; color: #166534; text-align: center; font-size: 12px; font-weight: 900; }
.svw-tablet.is-android { display: grid; gap: 9px; max-width: 440px; }
.svw-android-title { color: #0f172a; font-size: 18px; font-weight: 900; }
.svw-android-title.compact { margin-top: 2px; font-size: 15px; }
.svw-android-device { padding: 11px; border-radius: 9px; background: #f1f5f9; color: #334155; font-size: 12px; }
.svw-android-actions { display: flex; justify-content: flex-end; gap: 18px; color: #64748b; font-size: 12px; font-weight: 850; }
.svw-android-actions b { color: #2563eb; }
.svw-android-arrow { color: #7c3aed; text-align: center; font-size: 22px; font-weight: 950; }
.svw-copy { padding: 14px 4px 8px; text-align: center; }
.svw-copy h3 { margin: 0; color: #0f172a; font-size: 19px; }
.svw-copy p { max-width: 700px; margin: 6px auto 0; color: #475569; font-size: 13.5px; line-height: 1.45; }
.svw-tip {
  display: inline-block;
  margin-top: 9px;
  padding: 7px 11px;
  border: 1px solid #fde68a;
  border-radius: 9px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
}
.svw-nav { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.svw-nav .tc-dots { flex: 1; }
@media (max-width: 700px) {
  .svw-body { padding: 15px; }
  .svw-stage { height: 320px; }
  .svw-device-lights { left: 21%; top: 49%; gap: 8px; }
  .svw-device-lights i { width: 9px; height: 9px; }
}
@media (max-width: 480px) {
  .svw-stage { height: 260px; padding: 9px; }
  .svw-copy h3 { font-size: 17px; }
  .svw-copy p { font-size: 12.5px; }
  .svw-nav { gap: 7px; }
  .svw-nav .tc-btn { padding: 9px 11px; }
}

/* ============================================================
   Mobile Payments SDK — UI de configuración + cobro in-app
   ============================================================ */
.mpsdk-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.mpsdk-status-badge.mpsdk-status-unknown {
  background: rgba(107,114,128,0.15);
  color: #4b5563;
}
.mpsdk-status-badge.mpsdk-status-not-installed {
  background: rgba(220,38,38,0.12);
  color: #b91c1c;
}
.mpsdk-status-badge.mpsdk-status-not-authorized {
  background: rgba(245,158,11,0.15);
  color: #b45309;
}
.mpsdk-status-badge.mpsdk-status-authorized {
  background: rgba(16,185,129,0.18);
  color: #065f46;
}
.mpsdk-status-badge.mpsdk-status-ready {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}
.mpsdk-warn-banner {
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.35);
  color: #92400e;
  padding: 10px 12px;
  border-radius: 10px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.mpsdk-warn-banner code {
  background: rgba(0,0,0,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
}
body.dark .mpsdk-section {
  border-color: rgba(52,211,153,0.4) !important;
  background: linear-gradient(135deg,rgba(52,211,153,0.06),rgba(52,211,153,0.02)) !important;
}
body.dark .mpsdk-section strong {
  color: #34d399 !important;
}
body.dark .mpsdk-warn-banner {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
}

/* Modal de cobro in-app del SDK (estados: esperando lector, procesando, ok, error) */
.mpsdk-charge-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mpsdkFadeIn 0.18s ease-out;
}
@keyframes mpsdkFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mpsdk-charge-shell {
  background: #fff;
  border-radius: 24px;
  max-width: 420px;
  width: 92%;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  animation: mpsdkSlideUp 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes mpsdkSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.mpsdk-charge-shell .mc-icon {
  font-size: 64px;
  margin-bottom: 8px;
  animation: mpsdkBounce 1.4s ease-in-out infinite;
}
@keyframes mpsdkBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.mpsdk-charge-shell .mc-title {
  font-size: 22px;
  font-weight: 800;
  margin: 8px 0;
  color: #111;
}
.mpsdk-charge-shell .mc-amount {
  font-size: 36px;
  font-weight: 900;
  color: #10b981;
  margin: 12px 0;
}
.mpsdk-charge-shell .mc-hint {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.mpsdk-charge-shell .mc-cancel {
  background: rgba(220,38,38,0.08);
  color: #dc2626;
  border: 1px solid rgba(220,38,38,0.3);
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}
body.dark .mpsdk-charge-shell {
  background: #1f2937;
  color: #f3f4f6;
}
body.dark .mpsdk-charge-shell .mc-title { color: #f3f4f6; }
body.dark .mpsdk-charge-shell .mc-hint { color: #9ca3af; }

/* Boton "Completar y mandar a cocina" del flujo MPSDK en dos ventanas */
.mpsdk-confirm-kitchen-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16,185,129,0.35);
  transition: transform 0.12s ease, box-shadow 0.18s ease, opacity 0.2s ease;
}
.mpsdk-confirm-kitchen-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(16,185,129,0.45);
}
.mpsdk-confirm-kitchen-btn:active:not(:disabled) {
  transform: translateY(0);
}
.mpsdk-confirm-kitchen-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  box-shadow: none;
}
.mpsdk-confirm-kitchen-btn.mpsdk-confirm-kitchen-btn-warn {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 6px 18px rgba(249,115,22,0.35);
}
.mpsdk-charge-shell .mc-hint-small {
  font-size: 13px;
  opacity: 0.72;
}

.square-manual-warn-banner {
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255,149,0,0.12), rgba(255,191,31,0.15));
  border: 1.5px solid rgba(255,149,0,0.45);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 6px 20px rgba(255,149,0,0.15);
  animation: smwPulse 2.5s ease-in-out infinite;
}
@keyframes smwPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(255,149,0,0.15); }
  50% { box-shadow: 0 6px 28px rgba(255,149,0,0.35); }
}
.square-manual-warn-banner .smw-icon {
  font-size: 28px;
  line-height: 1;
  flex: 0 0 auto;
}
.square-manual-warn-banner .smw-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
}
.square-manual-warn-banner .smw-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #b45309;
}
.square-manual-warn-banner .smw-fix {
  background: linear-gradient(135deg, #34c759, #1e6f3d);
  color: #fff;
  border: none;
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(52,199,89,0.35);
  transition: all .15s ease;
}
.square-manual-warn-banner .smw-fix:hover {
  box-shadow: 0 6px 16px rgba(52,199,89,0.5);
  transform: translateY(-1px);
}
body.dark .square-manual-warn-banner {
  background: linear-gradient(135deg, rgba(255,149,0,0.18), rgba(255,191,31,0.20));
  border-color: rgba(255,149,0,0.55);
}
body.dark .square-manual-warn-banner .smw-text { color: #fbbf24; }
body.dark .square-manual-warn-banner .smw-text strong { color: #fcd34d; }

/* En tablet vertical, apilar */
@media (max-width: 768px) {
  .square-manual-warn-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .square-manual-warn-banner .smw-fix { width: 100%; }
}

/* ============================================================
   MODAL DE ERROR DE SQUARE — legible, con botón Copiar grande
   Reemplaza el toast rojo gigante que se salía de la pantalla.
   ============================================================ */
.sq-err-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15,15,30,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: sqErrFadeIn .2s ease;
}
@keyframes sqErrFadeIn { from { opacity: 0; } to { opacity: 1; } }
.sq-err-shell {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: sqErrScaleIn .25s ease;
}
@keyframes sqErrScaleIn {
  from { transform: scale(.92) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.sq-err-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 22px 18px;
  background: linear-gradient(135deg, #ff3b30, #b91c1c);
  color: #fff;
  position: relative;
}
.sq-err-icon { font-size: 36px; flex: 0 0 auto; line-height: 1; }
.sq-err-header h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}
.sq-err-header p {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.95;
}
.sq-err-header code {
  background: rgba(0,0,0,0.25);
  padding: 1px 8px;
  border-radius: 6px;
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
}
.sq-err-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.sq-err-close:hover { background: rgba(255,255,255,0.35); }

.sq-err-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
.sq-err-hint {
  background: rgba(0,122,255,0.08);
  border-left: 4px solid #007aff;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.sq-err-hint strong {
  display: block;
  font-size: 14px;
  color: #007aff;
  margin-bottom: 6px;
  font-weight: 700;
}
.sq-err-hint p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #1a1d27;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.sq-err-detail {
  background: rgba(0,0,0,0.04);
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.sq-err-detail strong {
  display: block;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
  font-weight: 600;
}
.sq-err-detail p {
  margin: 0;
  font-size: 14px;
  color: #1a1d27;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.sq-err-tech {
  background: #f8f9fb;
  border: 1px solid #e2e6ee;
  border-radius: 12px;
  padding: 12px 14px;
}
.sq-err-tech summary {
  cursor: pointer;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
  user-select: none;
}
.sq-err-tech summary:hover { color: #1a1d27; }
.sq-err-tech pre {
  margin: 10px 0 0;
  padding: 12px;
  background: #14171f;
  color: #e2e6ee;
  border-radius: 8px;
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-height: 260px;
  overflow-y: auto;
}

.sq-err-footer {
  display: flex;
  gap: 10px;
  padding: 14px 22px 22px;
  border-top: 1px solid #eef0f4;
  background: #f8f9fb;
  flex-wrap: wrap;
}
.sq-err-btn {
  flex: 1;
  min-width: 140px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s ease;
}
.sq-err-copy {
  background: linear-gradient(135deg, #007aff, #5856d6);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,122,255,0.32);
}
.sq-err-copy:hover { box-shadow: 0 8px 22px rgba(0,122,255,0.42); }
.sq-err-copy .sqe-done { display: none; }
.sq-err-copy.done {
  background: #34c759 !important;
  box-shadow: 0 6px 18px rgba(52,199,89,0.4);
}
.sq-err-copy.done .sqe-default { display: none; }
.sq-err-copy.done .sqe-done { display: inline; }
.sq-err-retry {
  background: #fff;
  color: #1a1d27;
  border: 1.5px solid #e2e6ee;
}
.sq-err-retry:hover { background: #f1f5f9; }

/* Modo oscuro */
body.dark .sq-err-shell { background: #1a1d27; }
body.dark .sq-err-hint { background: rgba(0,122,255,0.14); }
body.dark .sq-err-hint p { color: #e2e6ee; }
body.dark .sq-err-detail { background: rgba(255,255,255,0.04); }
body.dark .sq-err-detail p { color: #e2e6ee; }
body.dark .sq-err-tech { background: #14171f; border-color: #2a2e3b; }
body.dark .sq-err-footer { background: #14171f; border-color: #2a2e3b; }
body.dark .sq-err-retry { background: #2a2e3b; color: #e2e6ee; border-color: #3a3e4b; }
body.dark .sq-err-retry:hover { background: #353945; }

/* En tablet vertical: ocupar más espacio */
@media (max-width: 768px) {
  .sq-err-modal { padding: 8px; }
  .sq-err-shell { max-height: 96vh; }
  .sq-err-footer { padding: 12px 16px 16px; }
  .sq-err-btn { min-width: 100%; }
}

/* ============================================================
   ASISTENTE GUIADO DEL SQUARE READER
   Modal grande con progress bar y 6 pasos animados.
   ============================================================ */
.square-wizard-launcher {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  margin-top: 16px;
  background: linear-gradient(135deg, #007aff, #5856d6);
  color: #fff;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 10px 28px rgba(88,86,214,0.32);
  transition: transform .15s ease, box-shadow .15s ease;
}
.square-wizard-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(88,86,214,0.42);
}
.sqw-launcher-icon { font-size: 32px; flex: 0 0 auto; }
.sqw-launcher-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sqw-launcher-text strong { font-size: 16px; font-weight: 700; }
.sqw-launcher-text small { font-size: 13px; opacity: 0.88; }
.sqw-launcher-arrow { font-size: 22px; flex: 0 0 auto; opacity: 0.9; }

.sqw-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,15,30,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sqw-shell {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  animation: sqwFadeIn .25s ease;
}
@keyframes sqwFadeIn {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.sqw-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  background: linear-gradient(135deg, #007aff, #5856d6);
  color: #fff;
}
.sqw-header-left { display: flex; align-items: center; gap: 14px; }
.sqw-header-icon { font-size: 32px; }
.sqw-header h2 { margin: 0; font-size: 19px; font-weight: 700; }
.sqw-header p { margin: 2px 0 0; font-size: 13px; opacity: 0.92; }
.sqw-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.sqw-close:hover { background: rgba(255,255,255,0.32); }

.sqw-progress {
  padding: 16px 24px 6px;
  background: #f8f9fb;
  border-bottom: 1px solid #eef0f4;
}
.sqw-progress-bar {
  width: 100%;
  height: 6px;
  background: #e6e9ef;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.sqw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #007aff, #5856d6);
  border-radius: 999px;
  transition: width .3s ease;
}
.sqw-progress-steps {
  display: flex; justify-content: space-between; align-items: center;
}
.sqw-step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e6e9ef;
  color: #94a3b8;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.sqw-step-dot.done {
  background: #34c759;
  color: #fff;
}
.sqw-step-dot.done::before { content: '✓'; }
.sqw-step-dot.done { text-indent: 0; }
.sqw-step-dot.active {
  background: linear-gradient(135deg, #007aff, #5856d6);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(88,86,214,0.4);
}

.sqw-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.sqw-step { display: none; animation: sqwSlideIn .35s ease; }
.sqw-step.active { display: block; }
@keyframes sqwSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.sqw-step-header {
  margin-bottom: 16px;
}
.sqw-step-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(0,122,255,0.12), rgba(88,86,214,0.12));
  color: #5856d6;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.sqw-step-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1d27;
}

.sqw-illustration {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fb, #eef0f8);
  border-radius: 16px;
  margin-bottom: 18px;
  min-height: 140px;
}
.sqw-reader-illu { position: relative; }
.sqw-reader-body {
  width: 96px; height: 96px;
  background: #ffffff;
  border: 1.5px solid #e2e6ee;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  position: relative;
}
.sqw-reader-led {
  position: absolute;
  bottom: 6px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #34c759;
  box-shadow: 0 0 12px #34c759;
}
.sqw-led-charging {
  background: #ff9500;
  box-shadow: 0 0 12px #ff9500;
  animation: sqwLedBlink 1.2s ease-in-out infinite;
}
@keyframes sqwLedBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.sqw-app-icon {
  width: 96px;
  background: #000;
  color: #fff;
  border-radius: 22px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
.sqw-app-icon span { font-size: 40px; font-weight: 800; display: block; line-height: 1; }
.sqw-app-icon small { font-size: 11px; opacity: 0.85; display: block; margin-top: 8px; }
.sqw-pair-illu {
  display: flex; align-items: center; gap: 16px;
}
.sqw-pair-reader {
  width: 80px; height: 80px;
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #e2e6ee;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.sqw-pair-leds { display: flex; gap: 4px; }
.sqw-pair-leds span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff9500;
  animation: sqwLedBlink 0.8s ease-in-out infinite;
}
.sqw-pair-leds span:nth-child(2) { animation-delay: 0.15s; }
.sqw-pair-leds span:nth-child(3) { animation-delay: 0.3s; }
.sqw-pair-leds span:nth-child(4) { animation-delay: 0.45s; }
.sqw-pair-waves { font-size: 28px; animation: sqwPulse 1.5s ease-in-out infinite; }
.sqw-pair-tablet { font-size: 56px; }
@keyframes sqwPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

.sqw-instructions {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.sqw-instructions li {
  position: relative;
  padding: 10px 14px 10px 36px;
  margin-bottom: 6px;
  background: #f8f9fb;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1d27;
}
.sqw-instructions li::before {
  content: '▸';
  position: absolute;
  left: 14px; top: 10px;
  color: #007aff;
  font-weight: 700;
}
.sqw-instructions.sqw-numbered { counter-reset: sqw-step; }
.sqw-instructions.sqw-numbered li::before {
  content: counter(sqw-step);
  counter-increment: sqw-step;
  width: 20px; height: 20px;
  background: #007aff;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  top: 12px;
}
.sqw-instructions li ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.sqw-instructions li ul li {
  background: transparent;
  padding: 4px 0 4px 18px;
  font-size: 13px;
}
.sqw-instructions li ul li::before { content: '·'; left: 4px; top: 4px; font-size: 18px; }

.sqw-tip {
  padding: 12px 14px;
  background: rgba(52,199,89,0.10);
  border-left: 3px solid #34c759;
  border-radius: 10px;
  font-size: 13px;
  color: #1a1d27;
  margin-top: 8px;
}
.sqw-tip-warn {
  background: rgba(255,149,0,0.10);
  border-left-color: #ff9500;
}

.sqw-actions-inline {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0;
}
.sqw-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px;
  border-radius: 12px;
  background: rgba(0,122,255,0.10);
  color: #007aff;
  border: 1px solid rgba(0,122,255,0.35);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.sqw-action-btn:hover {
  background: rgba(0,122,255,0.18);
}
.sqw-action-btn.primary {
  background: linear-gradient(135deg, #007aff, #5856d6);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(0,122,255,0.32);
}
.sqw-action-btn.primary:hover {
  box-shadow: 0 8px 22px rgba(0,122,255,0.42);
}
.sqw-test-btn {
  width: 100%;
  justify-content: center;
  font-size: 16px;
  padding: 16px;
  margin: 8px 0 12px;
}

.sqw-status-check {
  margin-top: 12px;
  padding: 14px;
  background: #f8f9fb;
  border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.sqw-status-label { font-size: 13px; color: #6b7280; font-weight: 500; }
.sqw-status-value { font-size: 13px; font-weight: 600; }
.sqw-status-value.ok { color: #1e6f3d; }
.sqw-status-value.warn { color: #b45309; }
.sqw-status-value.error { color: #b91c1c; }
.sqw-status-value code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.sqw-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: #f8f9fb;
  border-top: 1px solid #eef0f4;
  gap: 12px;
}
.sqw-step-counter {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}
.sqw-nav-btn {
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
}
.sqw-prev {
  background: #fff;
  color: #6b7280;
  border: 1px solid #e2e6ee;
}
.sqw-prev:hover { background: #f1f5f9; }
.sqw-next {
  background: linear-gradient(135deg, #007aff, #5856d6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,122,255,0.32);
}
.sqw-next:hover { box-shadow: 0 6px 16px rgba(0,122,255,0.42); }

/* Modo oscuro */
body.dark .sqw-shell { background: #1a1d27; color: #e2e6ee; }
body.dark .sqw-progress { background: #14171f; border-color: #2a2e3b; }
body.dark .sqw-step-header h3 { color: #fff; }
body.dark .sqw-illustration { background: linear-gradient(135deg, #14171f, #20232f); }
body.dark .sqw-reader-body { background: #2a2e3b; border-color: #3a3e4b; }
body.dark .sqw-pair-reader { background: #2a2e3b; border-color: #3a3e4b; }
body.dark .sqw-instructions li { background: #14171f; color: #e2e6ee; }
body.dark .sqw-status-check { background: #14171f; }
body.dark .sqw-footer { background: #14171f; border-color: #2a2e3b; }
body.dark .sqw-prev { background: #2a2e3b; color: #e2e6ee; border-color: #3a3e4b; }
body.dark .sqw-prev:hover { background: #353945; }

/* Responsive en tablet/móvil */
@media (max-width: 768px) {
  .sqw-shell { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .sqw-modal { padding: 0; }
  .sqw-header h2 { font-size: 16px; }
  .sqw-step-header h3 { font-size: 18px; }
  .sqw-body { padding: 18px; }
}

/* ============================================================
   TARJETA "ESTILO ORIGINAL" — siempre visible en la lista de presets
   para que el usuario pueda volver al diseño por defecto sin borrar
   sus temas guardados.
   ============================================================ */
.bp-card.bp-card-default,
.studio-saved-card.studio-saved-default {
  background: linear-gradient(135deg, rgba(255,140,26,0.08), rgba(255,191,31,0.10)) !important;
  border: 1.5px dashed rgba(255,140,26,0.45) !important;
  position: relative;
}
.bp-card.bp-card-default::before {
  content: 'PREDETERMINADO';
  position: absolute;
  top: -8px;
  right: 10px;
  background: linear-gradient(135deg,#ff8c1a,#ffbf1f);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(255,140,26,0.35);
}
.bp-card.bp-card-default .bp-swatch,
.studio-saved-card.studio-saved-default .sv-swatch {
  font-size: 16px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Botón ↻ "actualizar preset con apariencia actual" — color azul info */
.bp-card .bp-actions .update,
.studio-saved-card .sv-actions .sv-mini-btn.update {
  background: rgba(59,130,246,0.12) !important;
  color: #2563eb !important;
  border: 1px solid rgba(59,130,246,0.35) !important;
  font-size: 14px;
  font-weight: 700;
}
.bp-card .bp-actions .update:hover,
.studio-saved-card .sv-actions .sv-mini-btn.update:hover {
  background: #2563eb !important;
  color: #fff !important;
}

/* ============================================================
   MODO LIMPIO — tarjetas sin contornos, sombras ni fondos
   Activar/desactivar desde Admin → Studio → Estilo de tarjetas
   Aplica a .product-card en todas las variantes (light/dark/studio).
   ============================================================ */
body.cards-minimal .product-card,
body.cards-minimal.dark .product-card,
body.cards-minimal.studio-themed .product-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  /* Conservar el padding interior para que el contenido respire */
}
body.cards-minimal .product-card::before,
body.cards-minimal .product-card::after {
  display: none !important;
}
/* La imagen del producto: sin fondo blanco, sin contorno */
body.cards-minimal .product-card .product-image,
body.cards-minimal .product-card .product-image-wrap,
body.cards-minimal .product-card .product-img,
body.cards-minimal .product-card .pi-wrap {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Estado activo (seleccionado): un anillo fino del color de acento, sin fondo */
body.cards-minimal .product-card.selected,
body.cards-minimal .product-card.is-selected,
body.cards-minimal .product-card[aria-pressed="true"] {
  background: transparent !important;
  box-shadow: 0 0 0 2px var(--accent, #ff8c1a) !important;
  border-radius: 16px !important;
}
/* Hover sutil en escritorio — solo brillo, sin elevación */
@media (hover: hover) {
  body.cards-minimal .product-card:hover {
    background: rgba(0,0,0,0.03) !important;
  }
  body.cards-minimal.dark .product-card:hover {
    background: rgba(255,255,255,0.04) !important;
  }
}
/* Quitar también la sombra de la grilla de productos para que se vea continuo */
body.cards-minimal .products-grid {
  /* Mantener el mask-image para el fade de scroll, solo limpiar bordes */
  background: transparent !important;
}

/* ============================================================
   MODO LIMPIO — tarjetas del builder de modificadores
   (Carnes, Salsas, Especias, etc.) — sin contornos, sombras
   ni fondos, igual que las tarjetas de productos.
   ============================================================ */
body.cards-minimal .builder-option-card,
body.cards-minimal .builder-toggle-card,
body.cards-minimal .builder-qty-option-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
body.cards-minimal .builder-option-card::before,
body.cards-minimal .builder-option-card::after,
body.cards-minimal .builder-toggle-card::before,
body.cards-minimal .builder-toggle-card::after,
body.cards-minimal .builder-qty-option-card::before,
body.cards-minimal .builder-qty-option-card::after {
  display: none !important;
}
/* Imágenes de las opciones — sin fondo ni contorno */
body.cards-minimal .builder-option-card img,
body.cards-minimal .builder-toggle-card img,
body.cards-minimal .builder-qty-option-card img,
body.cards-minimal .builder-option-card .builder-option-image,
body.cards-minimal .builder-option-card .builder-option-img,
body.cards-minimal .builder-option-card .opt-image {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Opción seleccionada: anillo fino del color de acento, sin fondo */
body.cards-minimal .builder-option-card.selected,
body.cards-minimal .builder-toggle-card.selected,
body.cards-minimal .builder-qty-option-card.selected {
  background: transparent !important;
  box-shadow: 0 0 0 2px var(--accent, #ff8c1a) !important;
  border-radius: 16px !important;
}
/* Hover en escritorio — brillo muy sutil sin elevación */
@media (hover: hover) {
  body.cards-minimal .builder-option-card:hover,
  body.cards-minimal .builder-toggle-card:hover,
  body.cards-minimal .builder-qty-option-card:hover {
    background: rgba(0,0,0,0.03) !important;
  }
  body.cards-minimal.dark .builder-option-card:hover,
  body.cards-minimal.dark .builder-toggle-card:hover,
  body.cards-minimal.dark .builder-qty-option-card:hover {
    background: rgba(255,255,255,0.04) !important;
  }
}

/* ============================================================
   EXTRA POR PORCIÓN (perUnit) — toggle Admin, card builder, popup
   ============================================================ */
/* Toggle en el editor de opciones (Admin) */
.mod-opt-perunit{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  padding:5px 9px;border-radius:9px;cursor:pointer;user-select:none;
  font-size:.72rem;font-weight:700;white-space:nowrap;
  border:1.5px solid var(--border-mid,#d7d7dd);
  color:var(--text-dim,#888);background:var(--card-active,#f3f3f5);
  transition:all .15s ease;
}
.mod-opt-perunit input{position:absolute;opacity:0;width:0;height:0;}
.mod-opt-perunit.is-on{
  border-color:var(--accent,#ff8c1a);
  color:var(--accent,#ff8c1a);
  background:rgba(255,140,26,.12);
}

/* Card "por porción" dentro del builder */
.builder-perunit-card .builder-perunit-tag{
  position:absolute;top:6px;left:6px;z-index:2;
  background:rgba(255,140,26,.92);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  padding:3px 7px;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.builder-perunit-card .builder-opt-img-wrap{position:relative;}
.builder-qty-add-btn.is-set{
  background:var(--accent,#ff8c1a)!important;color:#fff!important;
  font-weight:800;
}

/* Overlay de la ventanita */
.per-portion-overlay{
  position:fixed;inset:0;z-index:30000;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(15,15,20,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .18s ease;padding:0;
}
.per-portion-overlay.is-open{opacity:1;}
.per-portion-card{
  position:relative;width:100%;max-width:440px;
  background:var(--bg,#fff);color:var(--text,#1c1c22);
  border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 40px rgba(0,0,0,.28);
  transform:translateY(18px);transition:transform .22s cubic-bezier(.2,.9,.3,1);
}
.per-portion-overlay.is-open .per-portion-card{transform:translateY(0);}
@media (min-width:620px){
  .per-portion-overlay{align-items:center;}
  .per-portion-card{border-radius:22px;max-width:420px;}
}
.per-portion-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;
  border-radius:50%;background:var(--card-active,#f0f0f3);color:var(--text-dim,#888);
  font-size:1rem;cursor:pointer;line-height:1;
}
.per-portion-head{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding-right:38px;}
.per-portion-title{font-size:1.25rem;font-weight:800;}
.per-portion-price{font-size:.9rem;color:var(--accent,#ff8c1a);font-weight:700;}
.per-portion-breakdown{
  background:var(--card-active,#f5f5f7);border-radius:14px;padding:12px 14px;margin-bottom:16px;
}
.pp-bd-units{font-size:1.05rem;font-weight:800;}
.pp-bd-detail{font-size:.85rem;color:var(--text-dim,#777);margin-top:3px;}
.per-portion-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.per-portion-all-btn{
  width:100%;padding:15px;border-radius:14px;border:2px solid var(--accent,#ff8c1a);
  background:transparent;color:var(--accent,#ff8c1a);font-size:1.05rem;font-weight:800;cursor:pointer;
  transition:all .15s ease;
}
.per-portion-all-btn.is-active{background:var(--accent,#ff8c1a);color:#fff;}
.per-portion-some{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card-active,#f5f5f7);border-radius:14px;padding:10px 14px;
}
.per-portion-some-label{font-size:.95rem;font-weight:700;}
.per-portion-stepper{display:flex;align-items:center;gap:14px;}
.pp-step{
  width:42px;height:42px;border-radius:12px;border:none;cursor:pointer;
  background:var(--accent,#ff8c1a);color:#fff;font-size:1.4rem;font-weight:800;line-height:1;
}
.pp-step-count{min-width:32px;text-align:center;font-size:1.3rem;font-weight:800;}
.per-portion-total{text-align:center;font-size:1.05rem;font-weight:800;margin-bottom:16px;}
.per-portion-footer{display:flex;gap:10px;}
.per-portion-remove{
  flex:0 0 auto;padding:15px 18px;border-radius:14px;border:1.5px solid var(--border-mid,#ddd);
  background:transparent;color:#e03b3b;font-weight:700;cursor:pointer;
}
.per-portion-confirm{
  flex:1;padding:15px;border-radius:14px;border:none;cursor:pointer;
  background:var(--accent,#ff8c1a);color:#fff;font-size:1.05rem;font-weight:800;
}
/* Modo oscuro */
body.dark .per-portion-card{background:#1c1c22;color:#f3f3f5;}
body.dark .per-portion-breakdown,
body.dark .per-portion-some{background:rgba(255,255,255,.06);}
body.dark .per-portion-close{background:rgba(255,255,255,.08);color:#bbb;}

/* ============================================================
   ARTÍCULO RÁPIDO / PRECIO ABIERTO
   ============================================================ */
.quick-item-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:120px;border-radius:16px;cursor:pointer;
  border:2px dashed var(--accent,#ff8c1a);
  background:rgba(255,140,26,.06);color:var(--accent,#ff8c1a);
  transition:background .15s ease,transform .1s ease;
}
.quick-item-card:active{transform:scale(.97);}
.quick-item-card .quick-item-plus{font-size:2rem;font-weight:800;line-height:1;}
.quick-item-card .quick-item-label{font-size:.85rem;font-weight:700;}

.quick-item-modal{align-items:center;justify-content:center;}
.quick-item-box{
  width:100%;max-width:380px;background:var(--bg,#fff);color:var(--text,#1c1c22);
  border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.quick-item-box .qi-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:1.15rem;font-weight:800;margin-bottom:16px;
}
.quick-item-box .qi-head button{
  width:30px;height:30px;border:none;border-radius:50%;cursor:pointer;
  background:var(--card-active,#f0f0f3);color:var(--text-dim,#888);font-size:.95rem;
}
.qi-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.qi-field>span{font-size:.78rem;font-weight:700;color:var(--text-dim,#888);text-transform:uppercase;letter-spacing:.02em;}
.qi-field input{
  padding:13px 14px;border-radius:12px;font-size:1.05rem;font-weight:600;
  border:1.5px solid var(--border-mid,#ddd);background:var(--card-active,#f7f7f9);color:var(--text,#1c1c22);
}
.qi-row{display:flex;gap:12px;align-items:flex-start;}
.qi-row .qi-field-price{flex:1;}
.qi-qty-stepper{display:flex;align-items:center;gap:10px;}
.qi-qty-stepper button{
  width:42px;height:46px;border:none;border-radius:12px;cursor:pointer;
  background:var(--accent,#ff8c1a);color:#fff;font-size:1.4rem;font-weight:800;line-height:1;
}
.qi-qty-stepper span{min-width:28px;text-align:center;font-size:1.3rem;font-weight:800;}
.qi-add-btn{
  width:100%;margin-top:6px;padding:15px;border:none;border-radius:13px;cursor:pointer;
  background:var(--accent,#ff8c1a);color:#fff;font-size:1.05rem;font-weight:800;
}
body.dark .quick-item-box{background:#1c1c22;color:#f3f3f5;}

/* ============================================================
   INDICADOR DE CONEXIÓN (offline / sincronizando)
   ============================================================ */
.conn-indicator{
  position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:21000;
  display:none;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  font-size:.82rem;font-weight:700;color:#fff;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transform:translateY(8px);opacity:0;transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
}
.conn-indicator.show{display:flex;opacity:1;transform:translateY(0);pointer-events:auto;}
.conn-indicator.is-offline{background:#e0413b;}
.conn-indicator.is-syncing{background:#f59e0b;}
.conn-indicator .ci-dot{
  width:9px;height:9px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:ciPulse 1.2s ease-in-out infinite;
}
@keyframes ciPulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ── Medidor de uso de almacenamiento en la nube ── */
.blob-usage-box{
  margin:14px 0;padding:14px;border-radius:12px;
  background:var(--bg-tint,#f0f2f5);border:1px solid var(--border-mid,rgba(0,0,0,.12));
}
.blob-usage-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.88rem;margin-bottom:10px;}
.blob-usage-refresh{
  border:none;background:transparent;cursor:pointer;font-size:1.1rem;color:var(--text-muted,#888);
  width:30px;height:30px;border-radius:8px;
}
.blob-usage-refresh:active{background:rgba(0,0,0,.06);}
.blob-usage-bar{height:12px;border-radius:7px;background:rgba(0,0,0,.12);overflow:hidden;}
.blob-usage-fill{height:100%;width:0;border-radius:7px;background:#16a34a;transition:width .4s ease,background .3s ease;}
.blob-usage-text{font-size:.82rem;color:var(--text-muted,#777);margin-top:8px;}
.blob-usage-warn{
  font-size:.82rem;margin-top:10px;padding:10px 12px;border-radius:10px;
  background:rgba(245,158,11,.14);color:#b45309;border:1px solid rgba(245,158,11,.35);line-height:1.5;
}

/* ════════════════════════════════════════════════════════════════════
   ESTUDIO — PULIDO VISUAL (solo estético; sin cambios de lógica/ids)
   Look "herramienta de diseño" (tipo Canva/Figma-lite): swatches redondos,
   switches, sliders táctiles, tarjetas con ritmo y microanimaciones.
   ════════════════════════════════════════════════════════════════════ */

/* Intro amigable arriba de los controles */
.studio-intro {
  margin: 0 0 14px;
  padding: 11px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(219,39,119,0.09));
  border: 1.5px solid rgba(124,58,237,0.24);
  border-radius: 14px;
}

/* Tarjetas de sección: aire + hover sutil.
   El hover usa SOLO sombra/borde (sin transform) para no introducir capas que
   puedan afectar el hit-testing en WebView; el layout ya es CSS Grid (no multicol). */
.studio-section {
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.studio-section:hover { box-shadow: 0 8px 22px rgba(15,23,42,0.09); }
.studio-section.collapsed { cursor: pointer; }
.studio-section.collapsed:hover {
  border-color: rgba(124,58,237,0.42);
}
.studio-section.collapsed:hover > h3 { color: #7c3aed; }

/* Ocultar el diálogo nativo: el click lo captura JS y abre nuestro picker. */
input[type="color"] {
  cursor: pointer;
  color-scheme: light only;
}

/* Swatches de color REDONDOS y claramente tocables */
.studio-color-row input[type="color"],
.studio-color-input input[type="color"],
.studio-zone-actions input[type="color"] {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--border-mid), 0 2px 6px rgba(0,0,0,0.16);
  transition: transform 140ms ease, box-shadow 160ms ease;
}
.studio-color-row input[type="color"]:hover,
.studio-color-input input[type="color"]:hover,
.studio-zone-actions input[type="color"]:hover {
  transform: scale(1.09);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #7c3aed, 0 3px 10px rgba(124,58,237,0.32);
}
.studio-color-row input[type="color"]::-webkit-color-swatch-wrapper,
.studio-color-input input[type="color"]::-webkit-color-swatch-wrapper,
.studio-zone-actions input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.studio-color-row input[type="color"]::-webkit-color-swatch,
.studio-color-input input[type="color"]::-webkit-color-swatch,
.studio-zone-actions input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.studio-color-row input[type="color"]::-moz-color-swatch,
.studio-color-input input[type="color"]::-moz-color-swatch,
.studio-zone-actions input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.studio-color-row label,
.studio-color-input { transition: border-color 160ms ease, box-shadow 160ms ease; }
.studio-color-row label:hover,
.studio-color-input:hover { border-color: rgba(124,58,237,0.4); }

/* TOGGLES como interruptores modernos (el checkbox se convierte en switch) */
.studio-toggle-row { transition: border-color 160ms ease, background 160ms ease; }
.studio-toggle-row:hover { border-color: rgba(124,58,237,0.4); }
.studio-toggle-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 44px !important;
  height: 25px !important;
  border-radius: 999px;
  background: var(--border-mid);
  position: relative;
  flex: 0 0 auto;
  transition: background 220ms ease;
}
.studio-toggle-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: transform 220ms cubic-bezier(.3,1.5,.5,1);
  pointer-events: none;   /* el toque pasa SIEMPRE al checkbox real */
}
.studio-toggle-row input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #7c3aed, #db2777);
}
.studio-toggle-row input[type="checkbox"]:checked::after { transform: translateX(19px); }

/* SLIDERS táctiles: pista redondeada, pulgar destacado y badge de valor en píldora.
   El input conserva una ALTURA cómoda para el dedo (no se encoge a 8px);
   solo la PISTA visual mide 8px vía el pseudo-elemento. */
.studio-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.studio-range input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,58,237,0.55), rgba(219,39,119,0.45));
}
.studio-range input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,58,237,0.55), rgba(219,39,119,0.45));
}
.studio-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -7px;
  border-radius: 50%; background: #fff;
  border: 2.5px solid #7c3aed;
  box-shadow: 0 2px 7px rgba(124,58,237,0.4);
  cursor: grab; transition: transform 120ms ease;
}
.studio-range input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.14); }
.studio-range input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.22); }
.studio-range input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2.5px solid #7c3aed;
  box-shadow: 0 2px 7px rgba(124,58,237,0.4); cursor: grab;
}
.studio-range em {
  display: inline-block;
  background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(219,39,119,0.16));
  color: #7c3aed !important;
  font-weight: 900 !important;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
}
body.dark .studio-range em { color: #c4b5fd !important; }

/* Zonas del POS: hover claro (sin transform: viven dentro de columnas multicol) */
.studio-zone-row { transition: border-color 160ms ease, box-shadow 160ms ease; }
.studio-zone-row:hover { border-color: rgba(124,58,237,0.38); box-shadow: 0 4px 12px rgba(15,23,42,0.06); }

/* Imágenes de fondo: marco de miniatura más amable */
.studio-img-preview { transition: border-color 160ms ease, transform 160ms ease; }
.studio-img-preview:hover { border-color: rgba(124,58,237,0.45); }

/* Presets / estilos rápidos: tarjetas con realce al pasar/tocar */
.studio-preset-btn { transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.studio-preset-btn:hover { box-shadow: 0 6px 16px rgba(124,58,237,0.16); }
.studio-preset-btn .pre-dot { transition: transform 140ms ease; }
.studio-preset-btn:hover .pre-dot { transform: scale(1.12) rotate(-4deg); }

/* Botones de la barra superior: un poco más táctiles */
.studio-top-actions .studio-btn { transition: transform 140ms ease, box-shadow 160ms ease, background 160ms ease; }
.studio-top-actions .studio-btn:hover { transform: translateY(-1px); }

/* Cabecera del detalle (master-detail) con acento sutil */
.studio-detail-head span { letter-spacing: 0.01em; }

@media (prefers-reduced-motion: reduce) {
  .studio-section,
  .studio-zone-row,
  .studio-zone-preview,
  .studio-preset-btn,
  .studio-preset-btn .pre-dot,
  .studio-top-actions .studio-btn,
  .studio-toggle-row input[type="checkbox"]::after,
  .studio-range input[type="range"]::-webkit-slider-thumb {
    transition: none !important;
  }
}

/* ============================================================
   VENTANAS MODERNAS — bordes redondeados consistentes en TODAS
   las ventanas/diálogos de la app (pedido del dueño: nada de
   esquinas cuadradas "antiguas").
   ============================================================ */
.modal-box,
.settings-card-box,
.confirm-box,
.repair-box,
.update-modal-box,
.sp-modal-box,
.qr-modal-box,
.product-details-box,
.shift-preview-box,
.qty-box,
.pin-box,
.shift-pin-box,
.shift-keypad-box,
.wait-numpad-sheet,
.order-lookup-box,
.print-preview-modal .ppm-shell,
.shift-settings-card,
.studio-section,
.branding-studio-card {
  border-radius: 26px !important;
}
/* Paneles internos y tarjetas medianas: un poco menos para jerarquía */
.settings-section,
.studio-zone-row,
.shift-history-card,
.report-card {
  border-radius: 20px !important;
}
/* En pantallas chicas la caja pegada al borde inferior redondea solo arriba */
@media (max-width: 480px) {
  .qty-box {
    border-radius: 26px 26px 0 0 !important;
  }
}