:root {
  /* Paleta Oficial MJ House + Optimización Comercial Clima Cálido Ibagué */
  --bg-cream: #FFF8F9;
  --bg-blush: #FAEEEE;
  --bg-card: #FFFFFF;
  --mj-purple: #330C79;
  --mj-purple-dark: #210652;
  --mj-purple-soft: #EFE9FC;
  --mj-magenta: #EA0B6E;
  --mj-magenta-hover: #C6065B;
  --mj-magenta-soft: #FFE5F0;
  --cheese-gold: #FFB800;
  --oven-orange: #FF5C1A;
  --fresh-green: #0E9F6E;
  --fresh-green-soft: #DEF7EC;
  --text-main: #231145;
  --text-muted: #5F4E7C;
  --border-soft: #F1DCE3;
  --shadow-sm: 0 4px 14px rgba(51, 12, 121, 0.06);
  --shadow-md: 0 12px 32px rgba(51, 12, 121, 0.10);
  --shadow-lg: 0 20px 48px rgba(51, 12, 121, 0.16);
  --shadow-magenta: 0 10px 25px rgba(234, 11, 110, 0.28);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-cream);
  color: var(--text-main);
  line-height: 1.55;
  max-width: 100%;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container,
.topbar-container {
  width: min(1220px, 92%);
  margin-inline: auto;
}

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

/* ==========================================================================
   TOP BANNER (UN SOLO RENGLÓN BIEN CENTRADO)
   ========================================================================== */
.top-banner {
  background: linear-gradient(90deg, var(--mj-purple-dark) 0%, var(--mj-purple) 55%, #5115A8 100%);
  color: #FFFFFF;
  font-size: 0.85rem;
  padding: 0.45rem 0;
}

.top-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  text-align: center;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.top-banner-inner::-webkit-scrollbar {
  display: none;
}

.banner-pill {
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.banner-text {
  white-space: nowrap;
}

.banner-divider {
  opacity: 0.4;
}

.store-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.14);
  padding: 0.18rem 0.65rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #31C48D;
  box-shadow: 0 0 8px #31C48D;
  flex-shrink: 0;
}

.store-status-badge.is-closed .status-dot {
  background-color: var(--cheese-gold);
  box-shadow: 0 0 8px var(--cheese-gold);
}

/* ==========================================================================
   HEADER & NAVIGATION (UN SOLO RENGLÓN HORIZONTAL AMPLIO)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 248, 249, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow 0.2s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1.25rem;
  padding: 0.65rem 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-logo-nav {
  width: 52px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(51, 12, 121, 0.12));
  transition: transform 0.25s ease;
}

.brand-link:hover .brand-logo-nav {
  transform: scale(1.06) rotate(-3deg);
}

.brand-text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 700;
  color: var(--mj-purple);
  letter-spacing: 0.02em;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-title sup {
  color: var(--mj-magenta);
  font-size: 0.72em;
}

.brand-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mj-magenta);
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  flex: 1;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.94rem;
  padding: 0.52rem 0.95rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
  background-color: var(--mj-purple-soft);
  color: var(--mj-purple);
}

.nav-link-track {
  position: relative;
  background-color: var(--mj-magenta-soft);
  color: var(--mj-magenta);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link-track:hover {
  background-color: var(--mj-magenta);
  color: #FFFFFF;
}

.pulse-ring {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--mj-magenta);
  flex-shrink: 0;
  animation: pulseDot 1.6s infinite;
}

.nav-link-track:hover .pulse-ring {
  background-color: #FFFFFF;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(234, 11, 110, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(234, 11, 110, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(234, 11, 110, 0); }
}

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

.btn-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  background: linear-gradient(135deg, var(--mj-magenta) 0%, #FF2A85 100%);
  color: #FFFFFF;
  border: none;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: var(--shadow-magenta);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 11, 110, 0.38);
}

.cart-count {
  background-color: var(--mj-purple);
  color: #FFFFFF;
  font-size: 0.78rem;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-total-pill {
  background: rgba(255, 255, 255, 0.22);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s ease;
}

.btn-lg {
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.45rem 0.95rem;
  font-size: 0.84rem;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background-color: var(--mj-purple);
  color: #FFFFFF;
  box-shadow: 0 10px 22px rgba(51, 12, 121, 0.24);
}

.btn-primary:hover {
  background-color: var(--mj-purple-dark);
  transform: translateY(-2px);
}

.btn-magenta {
  background: linear-gradient(135deg, var(--mj-magenta) 0%, #FF2A85 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-magenta);
}

.btn-magenta:hover {
  background: var(--mj-magenta-hover);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--cheese-gold);
  color: var(--mj-purple-dark);
  box-shadow: 0 8px 20px rgba(255, 184, 0, 0.28);
}

.btn-secondary:hover {
  background-color: #FFA600;
  transform: translateY(-2px);
}

.btn-outline {
  background-color: #FFFFFF;
  color: var(--mj-purple);
  border-color: rgba(51, 12, 121, 0.22);
}

.btn-outline:hover {
  border-color: var(--mj-magenta);
  color: var(--mj-magenta);
  background-color: var(--mj-magenta-soft);
}

.btn-whatsapp {
  background-color: #1DA851;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(29, 168, 81, 0.25);
}

.btn-whatsapp:hover {
  background-color: #168B42;
  transform: translateY(-2px);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  padding: 2rem 0 1.4rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(234, 11, 110, 0.09) 0%, transparent 40%),
    radial-gradient(circle at 88% 25%, rgba(51, 12, 121, 0.09) 0%, transparent 45%),
    linear-gradient(180deg, var(--bg-blush) 0%, var(--bg-cream) 100%);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 2.2rem;
}

.climate-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: #FFFFFF;
  color: var(--mj-purple);
  border: 1.5px solid var(--border-soft);
  padding: 0.38rem 0.95rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  color: var(--mj-purple);
  margin-bottom: 1rem;
}

.text-magenta {
  color: var(--mj-magenta);
}

.text-purple {
  color: var(--mj-purple);
  text-decoration: underline;
  text-decoration-color: var(--cheese-gold);
  text-decoration-thickness: 5px;
  text-underline-offset: 4px;
}

.text-yellow {
  color: var(--cheese-gold);
}

.hero-description {
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 610px;
  margin-bottom: 1.6rem;
}

/* Tarjetas rápidas M y J en el Hero */
.hero-size-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.hero-size-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background-color: #FFFFFF;
  border: 2px solid var(--border-soft);
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.22s ease;
}

.hero-size-card:hover {
  border-color: var(--mj-magenta);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hero-size-card.featured {
  border-color: var(--mj-purple);
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F3FF 100%);
}

.size-popular-ribbon {
  position: absolute;
  top: -11px;
  right: 14px;
  background-color: var(--mj-purple);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.65rem;
  border-radius: var(--radius-pill);
}

.size-letter-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(234, 11, 110, 0.3);
}

.size-card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.size-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mj-purple);
}

.size-card-slices {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.size-card-price {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--mj-purple);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2rem;
}

/* 4 Sellos de valor */
.value-seals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
}

.seal-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-soft);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mj-purple);
}

.seal-item.highlight-seal {
  background-color: var(--mj-magenta-soft);
  border-color: rgba(234, 11, 110, 0.3);
  color: var(--mj-magenta);
}

.seal-icon {
  font-size: 1.15rem;
}

/* Hero Visual Showcase */
.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-card-showcase {
  position: relative;
  background: radial-gradient(circle at center, #FFFFFF 0%, var(--bg-blush) 100%);
  border: 3px solid #FFFFFF;
  border-radius: 36px;
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  max-width: 440px;
  width: 100%;
}

.hero-main-logo {
  width: 100%;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 12px 24px rgba(51, 12, 121, 0.14));
  animation: floatGentle 5s ease-in-out infinite;
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.floating-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: #FFFFFF;
  color: var(--mj-purple);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--border-soft);
  z-index: 2;
}

.badge-top-left {
  top: -14px;
  left: 20px;
}

.badge-bottom-right {
  bottom: -14px;
  right: 20px;
  background-color: var(--mj-purple);
  color: #FFFFFF;
  border-color: var(--mj-purple);
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #31C48D;
  box-shadow: 0 0 8px #31C48D;
  display: inline-block;
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}

.section-eyebrow {
  display: inline-block;
  background-color: var(--mj-magenta-soft);
  color: var(--mj-magenta);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.65rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  color: var(--mj-purple);
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

.script-accent {
  color: var(--mj-magenta);
  font-style: italic;
}

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

/* ==========================================================================
   SIZES SECTION (M vs J)
   ========================================================================== */
.sizes-section {
  padding: 4rem 0;
  background-color: #FFFFFF;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.sizes-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 980px;
  margin-inline: auto;
}

.size-showcase-card {
  position: relative;
  background-color: var(--bg-cream);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.size-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.size-showcase-featured {
  border-color: var(--mj-magenta);
  background: linear-gradient(180deg, #FFF5F9 0%, #FFFFFF 100%);
  box-shadow: var(--shadow-md);
}

.featured-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.28rem 1rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

.size-visual-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 155px;
}

.pizza-pan {
  border-radius: 50%;
  background: radial-gradient(circle, #FFD15C 0%, #F59E0B 72%, #D97706 100%);
  border: 6px dashed rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--mj-purple-dark);
}

.pan-30 {
  width: 115px;
  height: 115px;
}

.pan-40 {
  width: 148px;
  height: 148px;
}

.pan-letter {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--mj-magenta);
  text-shadow: 0 2px 0 #FFFFFF;
}

.pan-cm {
  font-weight: 800;
  font-size: 0.85rem;
  background: #FFFFFF;
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill);
  margin-top: 0.25rem;
}

.size-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.size-title-row h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--mj-purple);
}

.badge-inline-m,
.badge-inline-j {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  font-size: 1.15rem;
}

.size-price-tag {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--mj-purple);
}

.size-meta {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.size-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  font-weight: 600;
}

/* ==========================================================================
   MENU SECTION (6 RECETAS OFICIALES)
   ========================================================================== */
.menu-section {
  padding: 4.5rem 0;
}

.global-size-switcher {
  margin-top: 1.5rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  background-color: #FFFFFF;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}

.switcher-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.switcher-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.size-switch-btn {
  background-color: var(--bg-cream);
  color: var(--text-main);
  border: 2px solid transparent;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-switch-btn.active {
  background-color: var(--mj-purple);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(51, 12, 121, 0.25);
}

.size-switch-btn.active span {
  color: var(--cheese-gold);
}

.pizza-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.pizza-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pizza-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(234, 11, 110, 0.35);
}

.pizza-card-media {
  position: relative;
  height: 205px;
  overflow: hidden;
  background-color: #FFF0F3;
}

.pizza-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pizza-card:hover .pizza-card-img {
  transform: scale(1.07);
}

.pizza-flavor-pill {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  text-align: center;
  padding: 0.48rem 0.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.03em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.pill-magenta {
  background-color: var(--mj-magenta);
}

.pill-purple {
  background-color: var(--mj-purple);
}

.pizza-badge-top {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--mj-purple);
  font-weight: 800;
  font-size: 0.74rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.pizza-card-body {
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pizza-ingredients {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.15rem;
  min-height: 2.8em;
}

.card-size-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.card-size-option {
  background-color: var(--bg-cream);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.4rem;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}

.card-size-option.selected {
  border-color: var(--mj-magenta);
  background-color: var(--mj-magenta-soft);
}

.card-size-option strong {
  display: block;
  font-size: 0.86rem;
  color: var(--mj-purple);
}

.card-size-option span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.card-size-option .opt-price {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mj-magenta);
  margin-top: 2px;
}

.pizza-card-actions {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
}

.btn-add-pizza {
  flex: 1;
  background-color: var(--mj-purple);
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-add-pizza:hover {
  background-color: var(--mj-magenta);
  transform: translateY(-2px);
}

.btn-combine-half {
  background-color: var(--mj-purple-soft);
  color: var(--mj-purple);
  border: none;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-combine-half:hover {
  background-color: var(--cheese-gold);
  color: var(--mj-purple-dark);
}

/* ==========================================================================
   MITAD Y MITAD (2 SABORES)
   ========================================================================== */
.half-section {
  padding: 2rem 0 4.5rem;
}

.half-builder-banner {
  background: linear-gradient(135deg, var(--mj-purple-dark) 0%, var(--mj-purple) 60%, #4B14A8 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 2.8rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 2.5rem;
  box-shadow: var(--shadow-lg);
}

.half-pill {
  display: inline-block;
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.28rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
}

.half-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: 0.65rem;
  line-height: 1.15;
}

.half-copy > p {
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 1.6rem;
}

.half-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.half-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
}

.half-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--cheese-gold);
  color: var(--mj-purple-dark);
  font-weight: 800;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.half-step-content {
  flex: 1;
}

.half-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  color: rgba(255, 255, 255, 0.92);
}

.half-size-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.half-size-opt {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.2s ease;
}

.half-size-opt strong {
  display: block;
  font-size: 0.92rem;
}

.half-size-opt span {
  font-size: 0.8rem;
  opacity: 0.88;
}

.half-size-opt.active {
  background-color: var(--mj-magenta);
  border-color: #FFFFFF;
}

.half-select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255, 255, 255, 0.25);
  background-color: #FFFFFF;
  color: var(--mj-purple-dark);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
}

.half-summary-bar {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.22);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
}

.half-summary-text span {
  display: block;
  font-size: 0.85rem;
  opacity: 0.9;
}

.half-summary-text strong {
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--cheese-gold);
}

/* Rueda visual Mitad y Mitad */
.pizza-wheel-wrapper {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
}

.pizza-wheel {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto 1.35rem;
  border-radius: 50%;
  border: 10px solid #F59E0B;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
}

.wheel-half {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.wheel-half img {
  width: 240px;
  height: 240px;
  max-width: none;
  object-fit: cover;
}

.wheel-right img {
  margin-left: -120px;
}

.wheel-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.wheel-center-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.wheel-labels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.wheel-tag {
  background: rgba(255, 255, 255, 0.95);
  color: var(--mj-purple-dark);
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  text-align: left;
}

.tag-side {
  display: inline-block;
  background-color: var(--mj-magenta-soft);
  color: var(--mj-magenta);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.2rem;
}

.wheel-tag strong {
  display: block;
  font-size: 0.92rem;
  color: var(--mj-purple);
}

.wheel-tag small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ==========================================================================
   DRINKS SECTION (GASEOSAS 1.5L)
   ========================================================================== */
.drinks-section {
  padding: 4rem 0;
  background-color: #FFFFFF;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.drinks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 860px;
  margin-inline: auto;
}

.drink-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--bg-cream);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.drink-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--mj-purple);
}

.drink-img-wrap {
  width: 96px;
  height: 150px;
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
}

.drink-img-wrap img {
  max-height: 136px;
  width: auto;
  object-fit: contain;
}

.drink-info {
  flex: 1;
}

.drink-cold-badge {
  display: inline-block;
  background-color: #E0F2FE;
  color: #0369A1;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.4rem;
}

.drink-info h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--mj-purple);
  margin-bottom: 0.2rem;
}

.drink-size {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.drink-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.drink-price {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--mj-magenta);
}

/* ==========================================================================
   SIGUE TU PEDIDO (MAPA EN VIVO + LÍNEA DE TIEMPO)
   ========================================================================== */
.tracker-section {
  padding: 1.15rem 0 2.2rem;
  background: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-blush) 100%);
}

.tracker-kicker-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.1vw, 1.35rem);
  font-weight: 700;
  color: var(--mj-magenta);
  letter-spacing: 0.01em;
  margin: 0 auto 0.25rem;
  line-height: 1.25;
}

.tracker-section-header {
  margin: 0 auto 1.25rem;
}

.tracker-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: #FFFFFF;
  border: 2px solid var(--border-soft);
  padding: 1rem 1.35rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.track-lookup-form {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 280px;
}

.track-input {
  flex: 1;
  padding: 0.75rem 1.1rem;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mj-purple);
}

.track-input:focus {
  outline: none;
  border-color: var(--mj-magenta);
}

.tracker-demo-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.demo-hint {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.tracker-dashboard {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 1.75rem;
  align-items: stretch;
}

.tracker-timeline-card,
.tracker-map-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-soft);
  padding: 1.65rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}

.tracker-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 1rem;
}

.tracker-order-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--mj-magenta);
  letter-spacing: 0.06em;
}

.tracker-order-id {
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--mj-purple);
  line-height: 1.1;
}

.tracker-eta-box {
  background-color: var(--mj-purple-soft);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-md);
  text-align: right;
}

.eta-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.eta-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--mj-purple);
}

.tracker-customer-summary {
  background-color: var(--bg-cream);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-soft);
}

.tracker-progress-bar-wrap {
  height: 10px;
  background-color: var(--mj-purple-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 1.35rem;
}

.tracker-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mj-purple) 0%, var(--mj-magenta) 100%);
  border-radius: var(--radius-pill);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Línea de Tiempo Vertical */
.order-timeline {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}

.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  background-color: var(--bg-cream);
  opacity: 0.55;
  transition: all 0.3s ease;
}

.timeline-step.is-completed {
  opacity: 0.9;
  background-color: #F4FBF7;
  border-color: rgba(14, 159, 110, 0.25);
}

.timeline-step.is-current {
  opacity: 1;
  background-color: var(--mj-magenta-soft);
  border-color: var(--mj-magenta);
  box-shadow: 0 6px 18px rgba(234, 11, 110, 0.14);
  transform: scale(1.01);
}

.step-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.timeline-step.is-completed .step-icon-circle {
  background-color: var(--fresh-green);
  color: #FFFFFF;
}

.timeline-step.is-current .step-icon-circle {
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  animation: pulseDot 1.6s infinite;
}

.step-content {
  flex: 1;
}

.step-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.step-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--mj-purple);
}

.step-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
}

.timeline-step.is-completed .step-badge {
  background-color: var(--fresh-green-soft);
  color: var(--fresh-green);
}

.timeline-step.is-current .step-badge {
  background-color: var(--mj-magenta);
  color: #FFFFFF;
}

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

.tracker-items-box {
  background-color: var(--bg-cream);
  border: 1px solid var(--border-soft);
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.tracker-items-box h4 {
  font-size: 0.9rem;
  color: var(--mj-purple);
  margin-bottom: 0.5rem;
}

.track-items-list {
  list-style: none;
  font-size: 0.86rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.track-total-row {
  display: flex;
  justify-content: space-between;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-soft);
  font-size: 0.92rem;
}

.track-total-row strong {
  color: var(--mj-magenta);
  font-size: 1.05rem;
}

/* Mapa Interactivo de Ibagué */
.map-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.map-route-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.route-pill {
  background-color: var(--bg-cream);
  border: 1px solid var(--border-soft);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
}

.btn-recenter-map {
  background-color: var(--mj-purple-soft);
  color: var(--mj-purple);
  border: none;
  padding: 0.38rem 0.8rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-recenter-map:hover {
  background-color: var(--mj-purple);
  color: #FFFFFF;
}

.tracking-map-canvas {
  width: 100%;
  flex: 1;
  min-height: 410px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-soft);
  overflow: hidden;
  z-index: 1;
}

.map-live-status-bar {
  margin-top: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: linear-gradient(90deg, var(--mj-purple-dark) 0%, var(--mj-purple) 100%);
  color: #FFFFFF;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius-md);
}

.driver-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--mj-magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.driver-status-text {
  flex: 1;
}

.driver-status-text strong {
  display: block;
  font-size: 0.92rem;
}

.driver-status-text span {
  font-size: 0.8rem;
  opacity: 0.86;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.14);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
}

/* Marcadores personalizados en Leaflet */
.custom-map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  border: 3px solid #FFFFFF;
}

.pin-pizzeria {
  background-color: var(--mj-purple);
  color: #FFFFFF;
  width: 42px;
  height: 42px;
}

.pin-cliente {
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  width: 40px;
  height: 40px;
}

.pin-moto {
  background-color: var(--cheese-gold);
  color: var(--mj-purple-dark);
  width: 46px;
  height: 46px;
  font-size: 1.45rem;
  border-color: var(--mj-purple);
  animation: bounceMoto 1.2s ease-in-out infinite;
}

@keyframes bounceMoto {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ==========================================================================
   INFO & HOURS SECTION
   ========================================================================== */
.info-section {
  padding: 4.5rem 0;
  background-color: #FFFFFF;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.info-card {
  background-color: var(--bg-cream);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-sm);
}

.info-card h3 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--mj-purple);
  margin-bottom: 0.5rem;
}

.info-card > p {
  color: var(--text-muted);
  margin-bottom: 1.35rem;
}

.hours-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.hours-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  font-size: 0.92rem;
}

.hours-list li.weekend-day {
  border-color: rgba(234, 11, 110, 0.35);
  background-color: var(--mj-magenta-soft);
}

.hours-badge.closed {
  background-color: #FDE8E8;
  color: #C81E1E;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.15rem 0.65rem;
  border-radius: var(--radius-pill);
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background-color: #FFFFFF;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}

.contact-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--mj-purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.contact-item small {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.contact-item strong,
.contact-item a {
  color: var(--mj-purple);
  text-decoration: none;
  font-size: 1rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--mj-purple-dark);
  color: #FFFFFF;
  padding: 2.5rem 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.footer-brand strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.footer-brand p {
  font-size: 0.85rem;
  opacity: 0.8;
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.footer-links a,
.footer-admin-link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.footer-links a:hover,
.footer-admin-link:hover {
  color: var(--cheese-gold);
}

.footer-copy {
  opacity: 0.75;
  font-size: 0.82rem;
}

/* ==========================================================================
   DIALOGS / MODALS (light-dismiss-a-dialog compliant)
   ========================================================================== */
.mj-dialog {
  margin: auto;
  border: none;
  border-radius: var(--radius-lg);
  background-color: #FFFFFF;
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  width: min(980px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}

.carta-dialog {
  width: min(620px, 94vw);
}

/* Style the backdrop to indicate the dialog is modal */
dialog::backdrop {
  background-color: rgba(33, 6, 82, 0.6);
  backdrop-filter: blur(4px);
}

.dialog-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-soft);
  padding: 1.25rem 1.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kitchen-header {
  background: linear-gradient(90deg, var(--mj-purple-dark) 0%, var(--mj-purple) 100%);
  color: #FFFFFF;
}

.kitchen-header .dialog-eyebrow {
  color: var(--cheese-gold);
}

.kitchen-header h2 {
  color: #FFFFFF;
}

.dialog-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--mj-magenta);
  letter-spacing: 0.05em;
}

.dialog-header h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--mj-purple);
}

.dialog-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background-color: var(--bg-blush);
  color: var(--mj-purple);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

.dialog-body {
  padding: 1.65rem;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 1.75rem;
}

.checkout-cart-col h3,
.checkout-form-col h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--mj-purple);
  margin-bottom: 1rem;
}

.cart-items-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
  max-height: 280px;
  overflow-y: auto;
}

.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background-color: var(--bg-cream);
  border: 1px solid var(--border-soft);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
}

.cart-item-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--mj-purple);
}

.cart-item-info small {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background-color: #FFFFFF;
  color: var(--mj-purple);
  font-weight: 800;
  cursor: pointer;
}

.upsell-drink-banner {
  background-color: #EFF6FF;
  border: 1px dashed #60A5FA;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.82rem;
}

.upsell-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.btn-upsell {
  flex: 1;
  background-color: #FFFFFF;
  border: 1px solid #93C5FD;
  color: var(--mj-purple);
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
}

.btn-upsell:hover {
  background-color: var(--mj-purple);
  color: #FFFFFF;
}

.cart-totals-box {
  background-color: var(--bg-blush);
  padding: 1rem;
  border-radius: var(--radius-md);
}

.totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
}

.free-delivery-text {
  color: var(--fresh-green);
}

.grand-total-row {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(51, 12, 121, 0.15);
  font-size: 1.15rem;
}

.grand-total-row strong {
  font-family: var(--font-display);
  color: var(--mj-magenta);
  font-size: 1.4rem;
}

/* ==========================================================================
   FORMS & VALIDATION (required-field-feedback compliant)
   ========================================================================== */
.form-field {
  margin-bottom: 0.95rem;
}

.form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mj-purple);
  margin-bottom: 0.3rem;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-main);
  background-color: #FFFFFF;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--mj-purple);
}

.field-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.error-msg {
  display: none;
  color: #d93025;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 0.28rem;
}

/*
  Only highlight empty required fields AFTER the user visits them.
  MANDATORY: Provide multiple indicators (border shift + helper text/icon) to avoid color-only state communication.
*/
input:user-invalid,
select:user-invalid {
  border-color: #d93025;
  background-color: #fce8e6;
}

input:user-invalid + .error-msg,
select:user-invalid + .error-msg {
  display: block;
}

input:required:user-valid {
  border-color: #188038;
  border-width: 2px;
}

.checkout-security-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.55rem;
}

/* ==========================================================================
   KITCHEN PANEL MODAL
   ========================================================================== */
.kitchen-intro-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: var(--mj-purple-soft);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.35rem;
  font-size: 0.88rem;
}

.kitchen-orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.kitchen-order-card {
  background-color: var(--bg-cream);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.kitchen-order-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kitchen-order-top strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--mj-purple);
}

.kitchen-stage-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}

.btn-stage-control {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  background-color: #FFFFFF;
  color: var(--text-main);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-stage-control.active-stage {
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  border-color: var(--mj-magenta);
}

.carta-full-img {
  border-radius: var(--radius-md);
  margin-inline: auto;
}

/* ==========================================================================
   TOAST & MOBILE BAR
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.toast-item {
  background-color: var(--mj-purple-dark);
  color: #FFFFFF;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  font-size: 0.9rem;
  border-left: 5px solid var(--mj-magenta);
  animation: slideInToast 0.25s ease;
}

@keyframes slideInToast {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 850;
  background-color: var(--mj-purple-dark);
  color: #FFFFFF;
  padding: 0.75rem 1.1rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
}

.mobile-sticky-info span {
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
}

.mobile-sticky-info strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--cheese-gold);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 980px) {
  .main-nav {
    display: none;
  }
  .hero-grid,
  .half-builder-banner,
  .tracker-dashboard,
  .checkout-grid,
  .info-grid {
    grid-template-columns: 1fr;
  }
  .pizza-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .value-seals {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pizza-grid,
  .sizes-comparison-grid,
  .drinks-grid,
  .hero-size-cards,
  .form-row-2 {
    grid-template-columns: 1fr;
  }
  .hide-mobile {
    display: none;
  }
  .mobile-sticky-bar:not([hidden]) {
    display: flex;
  }
  .half-builder-banner {
    padding: 1.5rem;
  }
}


/* ==========================================================================
   INLINE ORDERS CONTROL PANEL (EN SECCIÓN SIGUE TU PEDIDO)
   ========================================================================== */
.inline-orders-control-panel {
  background: linear-gradient(135deg, #210652 0%, #330C79 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-lg);
  border: 2px solid rgba(255, 255, 255, 0.16);
}

.inline-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.inline-panel-badge {
  display: inline-block;
  background-color: var(--cheese-gold);
  color: var(--mj-purple-dark);
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.3rem;
}

.inline-panel-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #FFFFFF;
}

.inline-orders-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.inline-order-chip {
  background: rgba(255, 255, 255, 0.10);
  border: 2px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.inline-order-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.inline-order-chip.is-selected {
  background: #FFFFFF;
  color: var(--mj-purple-dark);
  border-color: var(--mj-magenta);
  box-shadow: 0 8px 22px rgba(234, 11, 110, 0.35);
}

.chip-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.chip-order-id {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.inline-order-chip.is-selected .chip-order-id {
  color: var(--mj-magenta);
}

.chip-stage-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(234, 11, 110, 0.85);
  color: #FFFFFF;
}

.chip-customer {
  font-size: 0.85rem;
  font-weight: 700;
}

.chip-address {
  font-size: 0.76rem;
  opacity: 0.82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inline-stage-switcher-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
}

.inline-stage-header {
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.92);
}

.inline-stage-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}

.btn-inline-stage {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  padding: 0.65rem 0.6rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.btn-inline-stage:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}

.btn-inline-stage.is-active {
  background: var(--mj-magenta);
  border-color: var(--cheese-gold);
  box-shadow: 0 6px 16px rgba(234, 11, 110, 0.45);
}

.btn-inline-stage .stage-emoji {
  font-size: 1.25rem;
}

/* ==========================================================================
   FULL-SCREEN PANEL DE PEDIDOS Y DESPACHO (cocina.html)
   ========================================================================== */
.panel-page-body {
  background-color: #F4EFFA;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.panel-topbar {
  background: linear-gradient(90deg, var(--mj-purple-dark) 0%, var(--mj-purple) 100%);
  color: #FFFFFF;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: var(--shadow-md);
}

.panel-topbar-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.stat-pill {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.stat-pill strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--cheese-gold);
}

.panel-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.panel-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr 430px;
  gap: 1.15rem;
  padding: 1.15rem;
  max-width: 1680px;
  width: 100%;
  margin-inline: auto;
}

.panel-sidebar,
.panel-center-control,
.panel-map-column {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-sidebar-header {
  padding: 1.15rem;
  border-bottom: 1px solid var(--border-soft);
  background-color: var(--bg-cream);
}

.panel-sidebar-header h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--mj-purple);
}

.panel-sidebar-header p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.panel-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.filter-tab {
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background-color: #FFFFFF;
  color: var(--text-main);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}

.filter-tab.active {
  background-color: var(--mj-purple);
  color: #FFFFFF;
  border-color: var(--mj-purple);
}

.panel-orders-list {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  max-height: calc(100vh - 210px);
}

.panel-order-item {
  border: 2px solid var(--border-soft);
  background-color: var(--bg-cream);
  border-radius: var(--radius-md);
  padding: 0.95rem;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.panel-order-item:hover {
  border-color: var(--mj-purple);
  transform: translateY(-2px);
}

.panel-order-item.selected {
  border-color: var(--mj-magenta);
  background-color: var(--mj-magenta-soft);
  box-shadow: 0 6px 16px rgba(234, 11, 110, 0.18);
}

.panel-center-control {
  padding: 1.4rem;
  overflow-y: auto;
}

.detail-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-soft);
  margin-bottom: 1.2rem;
}

.detail-id-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--mj-purple);
  line-height: 1;
}

.big-stage-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.65rem;
  margin: 1rem 0 1.35rem;
}

.big-stage-btn {
  padding: 0.9rem 0.6rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-soft);
  background-color: var(--bg-cream);
  color: var(--text-main);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  transition: all 0.2s ease;
}

.big-stage-btn:hover {
  border-color: var(--mj-purple);
  transform: translateY(-2px);
}

.big-stage-btn.is-done {
  background-color: var(--fresh-green-soft);
  border-color: var(--fresh-green);
  color: #065F46;
}

.big-stage-btn.is-current {
  background-color: var(--mj-magenta);
  border-color: var(--mj-magenta);
  color: #FFFFFF;
  box-shadow: var(--shadow-magenta);
  transform: scale(1.03);
}

.big-stage-btn .big-icon {
  font-size: 1.55rem;
}

.panel-map-column {
  padding: 1.15rem;
}

.panel-map-header {
  margin-bottom: 0.75rem;
}

.panel-map-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--mj-purple);
}

.map-click-tip {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--mj-magenta);
  background-color: var(--mj-magenta-soft);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  margin-top: 0.25rem;
}

.panel-dispatch-map {
  flex: 1;
  min-height: 360px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-soft);
  margin-bottom: 0.85rem;
}

.driver-route-controls {
  background-color: var(--bg-cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 0.8rem;
}

.route-control-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--mj-purple);
  margin-bottom: 0.5rem;
}

.route-Quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.btn-route-pos {
  flex: 1;
  min-width: 110px;
  background-color: #FFFFFF;
  border: 1.5px solid var(--border-soft);
  color: var(--mj-purple);
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-route-pos:hover {
  background-color: var(--mj-purple);
  color: #FFFFFF;
}

@media (max-width: 1180px) {
  .panel-workspace {
    grid-template-columns: 1fr;
  }
  .inline-stage-buttons,
  .big-stage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   WHATSAPP TRANSCRIBER & TRACKING LINK BOX (EN cocina.html)
   ========================================================================== */
.wa-transcriber-card {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 2px solid #22C55E;
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.35rem;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.12);
}

.wa-transcriber-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.wa-badge {
  display: inline-block;
  background-color: #16A34A;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.18rem 0.65rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.wa-transcriber-header h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #14532D;
}

.wa-transcriber-help {
  font-size: 0.84rem;
  color: #166534;
  margin-bottom: 0.75rem;
}

.wa-transcribe-form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 2px solid #86EFAC;
  background-color: #FFFFFF;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-main);
  resize: vertical;
  margin-bottom: 0.65rem;
}

.wa-transcribe-form textarea:focus {
  outline: none;
  border-color: #16A34A;
}

.wa-transcribe-actions {
  display: flex;
  justify-content: flex-end;
}

.client-link-banner {
  background: linear-gradient(90deg, var(--mj-purple-soft) 0%, #FCE7F3 100%);
  border: 2px solid rgba(234, 11, 110, 0.28);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.15rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.client-link-info {
  flex: 1;
  min-width: 240px;
}

.client-link-info strong {
  display: block;
  font-size: 0.86rem;
  color: var(--mj-purple);
  margin-bottom: 0.2rem;
}

.client-link-url {
  display: block;
  font-family: monospace;
  font-size: 0.82rem;
  background-color: #FFFFFF;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  color: var(--mj-magenta);
  word-break: break-all;
}

.client-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* ==========================================================================
   VISTA PROTEGIDA POR LINK PRIVADO (SIN EXPONER PEDIDOS PÚBLICAMENTE)
   ========================================================================== */
.tracker-dashboard[hidden],
.tracker-locked-card[hidden] {
  display: none !important;
}

.tracker-locked-card {
  max-width: 720px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.locked-icon-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mj-purple) 0%, var(--mj-magenta) 100%);
  color: #FFFFFF;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.15rem;
  box-shadow: var(--shadow-magenta);
}

.tracker-locked-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--mj-purple);
  margin-bottom: 0.65rem;
}

.tracker-locked-card p {
  color: var(--text-muted);
  font-size: 0.96rem;
  max-width: 580px;
  margin: 0 auto 1.5rem;
}

.locked-lookup-form {
  max-width: 520px;
  margin: 0 auto 1.35rem;
}

.locked-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}


/* ==========================================================================
   HERO SHOWCASE CON LOGO MJ HOUSE + DESTACADO "SIGUE TU PEDIDO EN VIVO"
   ========================================================================== */
.hero-card-showcase {
  max-width: 640px;
  width: 100%;
  padding: 1.5rem 1.65rem 1.45rem;
}

.hero-brand-and-tracker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.hero-main-logo-compact {
  width: 210px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 8px 18px rgba(51, 12, 121, 0.14));
  animation: floatGentle 5s ease-in-out infinite;
}

.hero-live-tracker-spotlight {
  width: 100%;
  background: linear-gradient(145deg, var(--mj-purple-dark) 0%, var(--mj-purple) 100%);
  color: #FFFFFF;
  border-radius: 22px;
  padding: 1.25rem 1.45rem;
  box-shadow: 0 12px 28px rgba(33, 6, 82, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.18);
  text-align: left;
}

.spotlight-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.spotlight-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.14);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.spotlight-private-tag {
  background-color: var(--cheese-gold);
  color: var(--mj-purple-dark);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.18rem 0.65rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.spotlight-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.42vw, 1.32rem);
  color: #FFFFFF;
  line-height: 1.22;
  margin-bottom: 0.4rem;
  white-space: normal;
}

.spotlight-desc {
  font-size: 0.81rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.42;
  margin-bottom: 0.8rem;
}

.spotlight-mini-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.mini-step {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0.4rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  opacity: 0.65;
}

.mini-step.done {
  opacity: 0.95;
  background: rgba(14, 159, 110, 0.28);
  border-color: rgba(49, 196, 141, 0.5);
}

.mini-step.active {
  opacity: 1;
  background-color: var(--mj-magenta);
  border-color: var(--cheese-gold);
  box-shadow: 0 4px 12px rgba(234, 11, 110, 0.45);
}

.mini-icon {
  font-size: 1rem;
}

.spotlight-route-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.24);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.route-node {
  white-space: nowrap;
}

.route-track-line {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: visible;
}

.route-moving-moto {
  position: absolute;
  top: -11px;
  left: 15%;
  font-size: 1.05rem;
  animation: moveMotoHero 3.4s ease-in-out infinite alternate;
}

@keyframes moveMotoHero {
  0% { left: 8%; }
  100% { left: 78%; }
}

.hero-quick-track-form {
  display: flex;
  gap: 0.45rem;
}

.hero-quick-track-form input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.96);
  color: var(--mj-purple-dark);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

.hero-quick-track-form input:focus {
  outline: none;
  border-color: var(--cheese-gold);
}

.locked-card-compact-grid {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-align: left;
}

.locked-copy-col {
  flex: 1;
}

.locked-copy-col p {
  margin: 0 0 1rem;
  max-width: none;
}

.locked-copy-col .locked-lookup-form {
  margin: 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  .locked-card-compact-grid {
    flex-direction: column;
    text-align: center;
  }
  .hero-quick-track-form {
    flex-direction: column;
  }
}


/* ============================================================================
   MÓDULO CONTABLE Y FINANCIERO POR BLOQUES (contabilidad.html)
   ============================================================================ */
.ledger-page-body {
  background-color: #F4F0FA;
}

.ledger-main-container {
  max-width: 1520px;
  margin: 0 auto;
  padding: 1.35rem 1.5rem 3rem;
}

.ledger-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.35rem;
}

.ledger-kpi-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  border: 2px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ledger-kpi-card .kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}

.kpi-badge {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--mj-purple-soft);
  color: var(--mj-purple);
}

.kpi-icon {
  font-size: 1.2rem;
}

.ledger-kpi-card h3 {
  font-family: var(--font-display);
  font-size: 0.96rem;
  color: var(--mj-purple-dark);
}

.kpi-amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mj-purple);
  margin: 0.1rem 0;
}

.ledger-kpi-card small {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.kpi-nequi {
  border-top: 4px solid #7C3AED;
}

.kpi-daviplata {
  border-top: 4px solid #E11D48;
}

.kpi-transfer {
  border-top: 4px solid #0284C7;
}

.kpi-cash {
  border-top: 4px solid #16A34A;
}

.kpi-expenses {
  border-top: 4px solid #EA580C;
}

.kpi-expenses .kpi-amount {
  color: #C2410C;
}

.kpi-net {
  background: linear-gradient(135deg, var(--mj-purple-dark) 0%, var(--mj-purple) 100%);
  color: #FFFFFF;
  border-color: var(--cheese-gold);
}

.kpi-net h3,
.kpi-net small {
  color: rgba(255, 255, 255, 0.9);
}

.kpi-net .kpi-amount {
  color: var(--cheese-gold);
}

.kpi-net .kpi-badge {
  background: rgba(255, 184, 0, 0.2);
  color: var(--cheese-gold);
}

.ledger-workspace-grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 1.35rem;
  align-items: start;
}

.ledger-left-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ledger-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  border: 2px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}

.ledger-card-header {
  margin-bottom: 1rem;
}

.ledger-card-header h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--mj-purple-dark);
  margin: 0.35rem 0 0.25rem;
}

.ledger-card-header p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.security-badge {
  display: inline-block;
  background: #DCFCE7;
  color: #166534;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
}

.security-audit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.security-audit-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: var(--bg-cream);
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  font-size: 0.82rem;
}

.security-audit-list li strong {
  display: block;
  color: var(--mj-purple-dark);
  margin-bottom: 0.18rem;
}

.security-audit-list li p {
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.sec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.3rem;
  flex-shrink: 0;
}

.sec-dot.ok {
  background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
}

.ledger-table-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ledger-table-header h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--mj-purple-dark);
  margin: 0.15rem 0 0.25rem;
}

.ledger-table-header p {
  font-size: 0.86rem;
  color: var(--text-muted);
  max-width: 65ch;
}

.integrity-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.integrity-banner.integrity-ok {
  background: #ECFDF5;
  border: 1.5px solid #6EE7B7;
  color: #065F46;
}

.integrity-banner.integrity-alert {
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  color: #991B1B;
}

.integrity-banner code {
  background: rgba(6, 95, 70, 0.1);
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
}

.ledger-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ledger-block-item {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-soft);
  background: var(--bg-cream);
  padding: 0.95rem 1.1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ledger-block-item.is-reconciled {
  border-left: 5px solid #16A34A;
}

.ledger-block-item.is-pending {
  border-left: 5px solid #F59E0B;
  background: #FFFBEB;
}

.ledger-block-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

.ledger-block-ids {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.block-index-pill {
  background: var(--mj-purple-dark);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill);
}

.block-entry-id {
  font-family: monospace;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--mj-purple);
}

.block-type-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill);
}

.block-type-income {
  background: #DCFCE7;
  color: #166534;
}

.block-type-expense {
  background: #FFEDD5;
  color: #9A3412;
}

.block-type-genesis {
  background: #E0E7FF;
  color: #3730A3;
}

.block-ref-pill {
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: #FFFFFF;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
}

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

.ledger-block-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.ledger-block-concept h4 {
  font-size: 0.96rem;
  color: var(--mj-purple-dark);
  margin: 0 0 0.2rem;
}

.ledger-block-channel {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

.pii-zero-tag {
  color: #15803D;
  font-weight: 700;
  font-size: 0.76rem;
}

.ledger-block-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.ledger-block-amount {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.amount-pos {
  color: #15803D;
}

.amount-neg {
  color: #C2410C;
}

.btn-reconcile {
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.75rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-reconcile.reconciled {
  background: #DCFCE7;
  color: #166534;
}

.btn-reconcile.pending {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #F59E0B;
}

.ledger-block-hashes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.73rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-soft);
  padding-top: 0.45rem;
}

.ledger-block-hashes code {
  background: rgba(74, 33, 150, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--mj-purple-dark);
}

@media (max-width: 1280px) {
  .ledger-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ledger-workspace-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ledger-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================================
   CONTENEDOR DE SOLICITUD DE PEDIDO: SLIDE AUTOMÁTICO EN 3 CLICS (PASO A PASO)
   ============================================================================ */
.order-wizard-section {
  position: relative;
  padding: 2.2rem 0 3rem;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-cream) 100%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.wizard-anchor-target {
  position: absolute;
  top: -70px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.wizard-section-header {
  margin: 0 auto 1.35rem;
}

.order-wizard-card {
  background-color: #FFFFFF;
  border: 2.5px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Barra superior de 3 pasos (Stepper) */
.wizard-steps-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(90deg, var(--mj-purple-dark) 0%, var(--mj-purple) 100%);
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}

.wizard-step-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s ease;
}

.wizard-step-tab:hover {
  background: rgba(255, 255, 255, 0.16);
}

.wizard-step-tab.is-active {
  background-color: #FFFFFF;
  color: var(--mj-purple-dark);
  border-color: var(--cheese-gold);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.wizard-step-tab.is-completed {
  background: rgba(14, 159, 110, 0.25);
  border-color: rgba(49, 196, 141, 0.65);
  color: #FFFFFF;
}

.step-tab-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wizard-step-tab.is-active .step-tab-num {
  background-color: var(--mj-magenta);
  color: #FFFFFF;
}

.wizard-step-tab.is-completed .step-tab-num {
  background-color: var(--fresh-green);
  color: #FFFFFF;
}

.step-tab-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.step-tab-text strong {
  font-size: 0.9rem;
  line-height: 1.15;
}

.step-tab-text small {
  font-size: 0.74rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-step-arrow {
  color: var(--cheese-gold);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Ventana y pista deslizante horizontal de 3 pantallas */
.order-slider-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.order-slider-track {
  display: block;
  width: 100%;
}

@keyframes wizardSlideInRight {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.order-slide {
  width: 100%;
  max-width: 100%;
  padding: 1.5rem 1.65rem 1.75rem;
  box-sizing: border-box;
  display: none;
}

.order-slide.is-active-slide {
  display: block;
  animation: wizardSlideInRight 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cabecera interna de cada pantalla */
.slide-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.95rem;
  border-bottom: 1.5px solid var(--border-soft);
}

.slide-nav-left {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.btn-slide-back {
  background-color: var(--mj-purple-soft);
  color: var(--mj-purple);
  border: 1.5px solid rgba(51, 12, 121, 0.18);
  padding: 0.48rem 0.9rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-slide-back:hover {
  background-color: var(--mj-purple);
  color: #FFFFFF;
}

.slide-step-pill {
  display: inline-block;
  background-color: var(--mj-magenta-soft);
  color: var(--mj-magenta);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.65rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.25rem;
}

.slide-heading {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  color: var(--mj-purple);
  line-height: 1.18;
  margin-bottom: 0.2rem;
}

.slide-subtext {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.wizard-mode-switch {
  display: inline-flex;
  background-color: var(--bg-cream);
  border: 1.5px solid var(--border-soft);
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  gap: 0.25rem;
}

.mode-switch-btn {
  background: transparent;
  border: none;
  color: var(--text-main);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
}

.mode-switch-btn.active {
  background-color: var(--mj-magenta);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(234, 11, 110, 0.28);
}

/* Pantalla 1: Tarjetas de Tamaño */
.wizard-sizes-grid {
  gap: 1.35rem;
}

.wizard-size-card {
  cursor: pointer;
  padding: 1.4rem 1.5rem;
  gap: 1rem;
}

.wizard-size-card.is-selected-size {
  border-color: var(--mj-magenta);
  box-shadow: 0 10px 26px rgba(234, 11, 110, 0.16);
}

.wizard-size-top {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.wizard-size-title-box {
  flex: 1;
}

.size-tag-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  background-color: var(--mj-purple-soft);
  color: var(--mj-purple);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.25rem;
}

.wizard-size-title-box h4 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--mj-purple);
  margin-bottom: 0.15rem;
}

.wizard-size-title-box .size-meta {
  margin-bottom: 0.3rem;
  font-size: 0.88rem;
}

.compact-perks {
  margin-bottom: 0.4rem;
  gap: 0.35rem;
  font-size: 0.85rem;
}

/* Pantalla 2: Estado Mitad y Mitad y Recetas */
.slide2-quick-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.wizard-half-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: linear-gradient(90deg, var(--mj-purple-dark) 0%, var(--mj-purple) 100%);
  color: #FFFFFF;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.15rem;
}

.wizard-half-status-bar[hidden] {
  display: none !important;
}

.half-status-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.half-slot-pill {
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
}

.half-slot-pill.is-active {
  background-color: var(--cheese-gold);
  color: var(--mj-purple-dark);
  border-color: #FFFFFF;
  font-weight: 800;
}

.half-plus-sign {
  font-weight: 800;
  color: var(--cheese-gold);
}

.wizard-pizza-card {
  cursor: pointer;
}

.wizard-pizza-card.is-wizard-selected {
  border-color: var(--mj-magenta);
  box-shadow: 0 8px 22px rgba(234, 11, 110, 0.18);
}

.wizard-half-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--cheese-gold);
  color: var(--mj-purple-dark);
  font-weight: 800;
  font-size: 0.74rem;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

/* Pantalla 3: Resumen de Pizza seleccionada + Tarjetas de Gaseosas */
.wizard-selected-pizza-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: linear-gradient(90deg, var(--mj-purple-soft) 0%, #FCE7F3 100%);
  border: 2px solid rgba(234, 11, 110, 0.28);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.2rem;
  margin-bottom: 1.25rem;
}

.selected-pizza-summary-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.selected-pizza-thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.selected-pizza-kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--mj-magenta);
  letter-spacing: 0.04em;
}

.selected-pizza-text h4 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--mj-purple);
  line-height: 1.2;
}

.selected-pizza-text p {
  font-size: 0.84rem;
  color: var(--text-muted);
  font-weight: 600;
}

.selected-pizza-summary-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.selected-pizza-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mj-purple);
}

.btn-change-inline {
  background: #FFFFFF;
  border: 1.5px solid var(--border-soft);
  color: var(--mj-purple);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.wizard-drinks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-bottom: 1.2rem;
}

.wizard-drink-card {
  cursor: pointer;
  background-color: var(--bg-cream);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  transition: all 0.22s ease;
}

.wizard-drink-card:hover {
  border-color: var(--mj-magenta);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.wizard-nodrink-card {
  background: linear-gradient(135deg, #FFF5F9 0%, #FFFFFF 100%);
  border-color: rgba(234, 11, 110, 0.35);
}

.nodrink-icon-wrap {
  width: 72px;
  height: 96px;
  border-radius: 14px;
  background-color: var(--mj-magenta-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  flex-shrink: 0;
}

.nodrink-badge {
  background-color: var(--mj-purple-soft);
  color: var(--mj-purple);
}

.combo-total-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.wizard-extra-actions {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

/* Ajustes del Modal de Solicitud (Checkout) y Botón de 2 Renglones */
.checkout-dialog {
  width: min(1140px, 96vw);
}

.form-row-aligned {
  align-items: start;
}

.form-row-aligned .form-field label {
  min-height: 1.35em;
  display: flex;
  align-items: flex-end;
}

.btn-submit-2lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.85rem 1.2rem;
  line-height: 1.2;
  text-align: center;
}

.submit-line-main {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
}

.submit-line-sub {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  opacity: 0.94;
}

/* Ajustes específicos para vista de Teléfono Móvil (Sin recortes ni desbordes) */
.hero-copy,
.hero-visual,
.order-wizard-card,
.tracker-locked-card {
  min-width: 0;
  max-width: 100%;
}

.hero-logo-only-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  max-width: 420px;
  padding: 1.75rem 1.5rem;
}

.hero-price-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  width: 100%;
}

.hero-price-pill {
  background-color: #FFFFFF;
  border: 2px solid var(--border-soft);
  color: var(--mj-purple);
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.hero-price-pill:hover {
  border-color: var(--mj-magenta);
  transform: translateY(-2px);
}

.hero-price-pill.featured {
  background: linear-gradient(135deg, var(--mj-purple) 0%, var(--mj-magenta) 100%);
  color: #FFFFFF;
  border-color: transparent;
}

/* Estilos limpios del Módulo Contable */
.ledger-status-pill {
  background: rgba(74, 222, 128, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.45);
  color: #4ADE80;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
}

.ledger-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.block-channel-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mj-purple);
  background: var(--mj-purple-soft);
  padding: 0.16rem 0.6rem;
  border-radius: var(--radius-pill);
}

.ledger-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 980px) {
  .wizard-drinks-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container,
  .topbar-container {
    width: 92%;
  }

  /* Barra superior compacta sin recortes en móvil */
  .top-banner-inner {
    justify-content: space-between;
    gap: 0.4rem;
  }
  .banner-text,
  .banner-divider {
    display: none;
  }
  .banner-pill,
  .store-status-badge {
    font-size: 0.72rem;
    padding: 0.18rem 0.55rem;
  }

  /* Cabecera móvil sin cortar el botón Mi Pedido */
  .header-inner {
    gap: 0.45rem;
    padding: 0.5rem 0;
  }
  .brand-logo-nav {
    width: 38px;
  }
  .brand-title {
    font-size: 1.05rem;
  }
  .brand-subtitle {
    font-size: 0.65rem;
  }
  .btn-cart {
    padding: 0.42rem 0.7rem;
    font-size: 0.78rem;
    gap: 0.32rem;
  }
  .cart-total-pill {
    display: none;
  }

  /* Hero móvil limpio y compacto */
  .hero-section {
    padding: 0.9rem 0 0.65rem;
  }
  .hero-grid {
    gap: 0.9rem;
  }
  .climate-tag {
    font-size: 0.74rem;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.65rem;
  }
  .hero-title {
    font-size: 1.68rem;
    margin-bottom: 0.55rem;
  }
  .hero-description {
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
  }
  .hero-cta-row {
    flex-direction: column;
    margin-bottom: 0.85rem;
    gap: 0.5rem;
  }
  .hero-cta-row .btn {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }
  .value-seals {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
  .seal-item {
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
  }
  .hero-logo-only-card {
    padding: 1rem;
    border-radius: 22px;
    gap: 0.75rem;
  }
  .hero-main-logo-compact {
    width: 120px;
  }
  .hero-price-pills {
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }
  .hero-price-pill {
    font-size: 0.76rem;
    padding: 0.5rem 0.4rem;
  }

  /* Sección Sigue tu Pedido compacta y con botón dentro del contenedor */
  .tracker-section {
    padding: 0.55rem 0 1.15rem;
  }
  .tracker-kicker-title {
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
    padding: 0 0.25rem;
  }
  .tracker-section-header {
    margin-bottom: 0.7rem;
  }
  .tracker-section-header .section-title {
    font-size: 1.45rem;
  }
  .tracker-section-header .section-subtitle {
    font-size: 0.84rem;
  }
  .tracker-locked-card {
    padding: 0.95rem 0.9rem;
  }
  .locked-card-compact-grid {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  .locked-copy-col {
    width: 100%;
  }
  .locked-icon-circle {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    margin: 0 auto;
  }
  .tracker-locked-card h3 {
    font-size: 1.08rem;
    margin-bottom: 0.2rem;
  }
  .tracker-locked-card p {
    font-size: 0.82rem;
    margin-bottom: 0.55rem;
  }
  .track-lookup-form,
  .locked-lookup-form {
    flex-direction: column;
    min-width: 0;
    width: 100%;
    gap: 0.45rem;
  }
  .track-lookup-form .track-input,
  .track-lookup-form .btn {
    width: 100%;
  }

  /* Asistente de Pedido en 3 Clics optimizado para móvil */
  .order-wizard-section {
    padding: 1.15rem 0 1.75rem;
  }
  .wizard-section-header {
    margin-bottom: 0.9rem;
  }
  .wizard-section-header .section-title {
    font-size: 1.5rem;
  }
  .wizard-steps-bar {
    padding: 0.5rem 0.45rem;
    gap: 0.3rem;
  }
  .wizard-step-arrow {
    display: none;
  }
  .wizard-step-tab {
    padding: 0.45rem 0.35rem;
    gap: 0.3rem;
    justify-content: center;
  }
  .step-tab-num {
    width: 22px;
    height: 22px;
    font-size: 0.76rem;
  }
  .step-tab-text strong {
    font-size: 0.74rem;
  }
  .step-tab-text small {
    display: none;
  }
  .order-slide {
    padding: 0.95rem 0.8rem 1.1rem;
  }
  .slide-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
  }
  .wizard-mode-switch {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .mode-switch-btn {
    padding: 0.45rem 0.35rem;
    font-size: 0.76rem;
    text-align: center;
  }
  .slide2-quick-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .switcher-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .size-switch-btn {
    padding: 0.45rem 0.35rem;
    font-size: 0.76rem;
    text-align: center;
  }
  .wizard-size-card {
    padding: 1rem 0.9rem;
    gap: 0.7rem;
  }
  .wizard-size-top {
    gap: 0.75rem;
  }
  .pan-30 {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
  }
  .pan-40 {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
  }
  .pan-letter {
    font-size: 1.4rem;
  }
  .wizard-size-title-box h4 {
    font-size: 1.15rem;
  }
  .size-price-tag {
    font-size: 1.4rem;
  }
  .wizard-size-cta {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.65rem 0.75rem;
  }

  /* Paso 2 en móvil: Tarjetas horizontales tipo App (foto a la izquierda, info y botones a la derecha) */
  .wizard-pizza-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .wizard-pizza-card {
    display: grid;
    grid-template-columns: 104px 1fr;
    align-items: stretch;
  }
  .wizard-pizza-card .pizza-card-media {
    height: 100%;
    min-height: 112px;
  }
  .wizard-pizza-card .pizza-badge-top {
    display: none;
  }
  .wizard-pizza-card .pizza-flavor-pill {
    font-size: 0.72rem;
    padding: 0.2rem 0.35rem;
    bottom: 6px;
    width: 92%;
  }
  .wizard-pizza-card .pizza-card-body {
    padding: 0.65rem 0.75rem;
    justify-content: space-between;
  }
  .wizard-pizza-card .pizza-ingredients {
    font-size: 0.78rem;
    text-align: left;
    margin-bottom: 0.5rem;
    min-height: 0;
    line-height: 1.3;
  }
  .wizard-pizza-card .pizza-card-actions {
    display: flex;
    flex-direction: row;
    gap: 0.35rem;
  }
  .wizard-pizza-card .btn-add-pizza {
    flex: 1;
    font-size: 0.78rem;
    padding: 0.5rem 0.55rem;
  }
  .wizard-pizza-card .btn-combine-half {
    font-size: 0.75rem;
    padding: 0.5rem 0.55rem;
  }

  /* Paso 3 (Gaseosas) en móvil: tarjetas horizontales compactas con botón completo */
  .wizard-selected-pizza-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem;
    gap: 0.5rem;
  }
  .selected-pizza-summary-right {
    width: 100%;
    justify-content: space-between;
  }
  .wizard-drink-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 0.8rem;
    gap: 0.75rem;
  }
  .wizard-drink-card .drink-img-wrap {
    width: 56px;
    height: 76px;
    flex-shrink: 0;
  }
  .wizard-drink-card .drink-info {
    flex: 1;
    min-width: 0;
  }
  .wizard-drink-card .drink-info h3 {
    font-size: 0.98rem;
  }
  .wizard-drink-card .drink-size {
    font-size: 0.76rem;
    margin-bottom: 0.4rem;
  }
  .wizard-drink-card .drink-price-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
  }
  .wizard-drink-card .drink-price {
    font-size: 1.2rem;
  }
  .dialog-header {
    padding: 0.95rem 1rem;
  }
  .dialog-body {
    padding: 1rem;
  }

  /* Contabilidad móvil limpia */
  .ledger-main-container {
    padding: 0.9rem;
  }
  .ledger-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  .ledger-filter-tabs {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}


/* ============================================================================
   RELOJ DE CUENTA REGRESIVA EN VIVO (index.html) Y CONTROL EN COCINA (cocina.html)
   ============================================================================ */
.tracker-countdown-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-soft);
  padding: 1.65rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.countdown-hero-box {
  background: linear-gradient(135deg, #270860 0%, #4A148C 55%, #EA0B6E 100%);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 12px 28px rgba(51, 12, 121, 0.24);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.countdown-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.countdown-badge {
  background: rgba(255, 184, 0, 0.22);
  border: 1px solid rgba(255, 184, 0, 0.55);
  color: var(--cheese-gold);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
}

.countdown-clock-wrap {
  text-align: center;
  background: rgba(15, 3, 38, 0.36);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 1.15rem 1rem;
}

.countdown-clock-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cheese-gold);
  margin-bottom: 0.25rem;
}

.countdown-digital-clock {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.35rem);
  font-weight: 700;
  line-height: 1.05;
  color: #FFFFFF;
  letter-spacing: 0.03em;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.countdown-clock-sub {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.25rem;
}

.countdown-status-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
}

/* Panel Administrativo de 2 Columnas sin Mapa GPS */
.panel-workspace-2col {
  grid-template-columns: 380px 1fr !important;
}

.panel-countdown-control-box {
  background: linear-gradient(135deg, #FAF5FF 0%, #FDF2F8 100%);
  border: 2px solid rgba(234, 11, 110, 0.28);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  margin: 1.1rem 0 1.25rem;
}

.panel-countdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.panel-countdown-header h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--mj-purple-dark);
  margin: 0.25rem 0 0.15rem;
}

.panel-countdown-header p {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
}

.panel-live-clock-pill {
  background: var(--mj-purple-dark);
  color: #FFFFFF;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  text-align: right;
  border: 2px solid var(--cheese-gold);
}

.panel-live-clock-pill span {
  display: block;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}

.panel-live-clock-pill strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--cheese-gold);
}

.eta-preset-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.btn-eta-preset {
  flex: 1;
  min-width: 115px;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--mj-purple);
  background: #FFFFFF;
  color: var(--mj-purple-dark);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-eta-preset:hover,
.btn-eta-preset.active {
  background: var(--mj-magenta);
  border-color: var(--mj-magenta);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(234, 11, 110, 0.25);
}

.btn-eta-preset.btn-eta-clear {
  border-color: var(--border-soft);
  color: var(--text-muted);
  background: var(--bg-cream);
}

.btn-eta-preset.btn-eta-clear:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #991B1B;
}

.sidebar-timer-pill {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.16rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--bg-cream);
  color: var(--text-muted);
}

.sidebar-timer-pill.is-running {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #F59E0B;
}

/* Mejoras del Modal de Pedido y Validación Visible */
.cart-col-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.cart-col-header-row h3 {
  margin-bottom: 0 !important;
}

.btn-clear-cart {
  background: #FEE2E2;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.cart-empty-helper-box {
  background: var(--bg-cream);
  border: 1.5px dashed var(--mj-purple);
  padding: 0.95rem;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.checkout-inline-alert {
  background: #FEF2F2;
  border: 1.5px solid #EF4444;
  color: #991B1B;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: #d93025 !important;
  background-color: #fce8e6 !important;
}

input[aria-invalid="true"] + .error-msg,
select[aria-invalid="true"] + .error-msg {
  display: block !important;
}

@media (max-width: 1024px) {
  .panel-workspace-2col {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   ALINEACIÓN SIMÉTRICA, TARJETAS DE TAMAÑO CON DISEÑO Y BOTÓN COMPACTO MI PEDIDO
   ============================================================================ */
.header-inner {
  gap: 0.75rem;
}

.btn-cart {
  padding: 0.46rem 0.9rem;
  font-size: 0.85rem;
  gap: 0.4rem;
  width: auto;
  max-width: max-content;
}

.hero-grid {
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: 2rem;
}

.hero-size-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}

.hero-size-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #FFFFFF;
  border: 2px solid var(--border-soft);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(51, 12, 121, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-align: left;
}

.hero-size-card:hover {
  border-color: var(--mj-magenta);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(234, 11, 110, 0.16);
}

.hero-size-card.featured {
  border-color: var(--mj-magenta);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF4F9 100%);
  box-shadow: 0 10px 24px rgba(234, 11, 110, 0.14);
}

.size-letter-badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--mj-magenta) 0%, #FF3B8D 100%);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(234, 11, 110, 0.28);
}

.size-letter-badge.badge-j {
  background: linear-gradient(135deg, var(--mj-purple) 0%, #581C87 100%);
  box-shadow: 0 6px 14px rgba(51, 12, 121, 0.28);
}

.size-card-info {
  flex: 1;
  min-width: 0;
}

.size-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--mj-purple);
  line-height: 1.15;
  margin-bottom: 0.15rem;
}

.size-card-slices {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.25;
}

.size-card-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.18rem;
}

.size-card-price {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--mj-purple-dark);
  line-height: 1;
}

.hero-size-card.featured .size-card-price {
  color: var(--mj-magenta);
}

.size-card-action-tag {
  display: inline-block;
  background: var(--mj-purple-soft);
  color: var(--mj-purple);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.14rem 0.5rem;
  border-radius: var(--radius-pill);
}

.hero-size-card.featured .size-card-action-tag {
  background: var(--mj-magenta);
  color: #FFFFFF;
}

.hero-logo-only-card {
  max-width: 440px;
  width: 100%;
  margin-inline: auto;
  padding: 1.5rem 1.35rem;
  border-radius: 28px;
  background: radial-gradient(circle at top, #FFFFFF 0%, #FFF2F7 100%);
  border: 2.5px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}

.hero-showcase-pill {
  display: inline-block;
  background: var(--mj-purple-soft);
  color: var(--mj-purple);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-pill);
}

.hero-card-seals {
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 0.5rem;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 1.15rem !important;
  }
  .hero-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
  }
  .hero-description {
    margin-inline: auto;
  }
  .hero-size-cards {
    width: 100%;
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
  }
  .hero-cta-row {
    width: 100%;
    justify-content: center;
  }
  .hero-visual {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .btn-cart {
    padding: 0.38rem 0.68rem;
    font-size: 0.76rem;
    gap: 0.3rem;
  }
  .hero-size-card {
    padding: 0.85rem 0.9rem;
  }
  .size-card-name {
    font-size: 0.98rem;
  }
  .size-card-price {
    font-size: 1.25rem;
  }
}

/* ============================================================================
   SUITE ADMINISTRATIVA UNIFICADA: PANEL DE COCINA KDS + PANEL CONTABLE + INVENTARIO + EXCEL
   ============================================================================ */
.suite-topbar {
  padding: 0.75rem 1.35rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.suite-universe-nav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(15, 3, 38, 0.42);
  padding: 0.35rem;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
}

.universe-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.52rem 1rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: left;
}

.universe-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.universe-tab-btn.is-active {
  background: linear-gradient(135deg, var(--mj-magenta) 0%, #FF2A85 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 16px rgba(234, 11, 110, 0.38);
}

.universe-tab-btn.universe-web-link {
  border-color: rgba(255, 184, 0, 0.4);
  background: rgba(255, 184, 0, 0.12);
}

.universe-tab-btn.universe-web-link:hover {
  background: var(--cheese-gold);
  color: var(--mj-purple-dark);
}

.u-tab-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.u-tab-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.u-tab-text strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.u-tab-text small {
  font-size: 0.72rem;
  opacity: 0.9;
}

.stat-pill-urgent.has-urgent-blink {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border-color: #FCA5A5 !important;
  animation: kdsBadgePulse 1.1s infinite;
}

/* BANNER GLOBAL DE ALERTA DE INVENTARIO BAJO */
.global-inventory-alert-banner {
  background: linear-gradient(90deg, #7F1D1D 0%, #B91C1C 50%, #991B1B 100%);
  color: #FFFFFF;
  padding: 0.7rem 1.4rem;
  border-bottom: 2px solid #FCA5A5;
  box-shadow: 0 6px 18px rgba(185, 28, 28, 0.25);
}

.global-inv-alert-inner {
  max-width: 1640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.global-inv-alert-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 280px;
}

.global-inv-pulse-badge {
  background: #FEF08A;
  color: #7F1D1D;
  font-weight: 900;
  font-size: 0.75rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  animation: kdsBadgePulse 1.2s infinite;
}

.global-inv-alert-text strong {
  font-size: 0.9rem;
}

.global-inv-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.global-inv-alert-chip {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
}

.global-inv-alert-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.btn-light-alert {
  background: #FFFFFF;
  color: #991B1B;
  font-weight: 800;
  border: none;
}

.btn-light-alert:hover {
  background: #FEF2F2;
}

/* ============================================================================
   SISTEMA KDS DE TARJETAS DE PEDIDO EN COCINA (.kds-order-card)
   ============================================================================ */
.panel-workspace-kds {
  grid-template-columns: 450px 1fr !important;
}

.kds-sidebar {
  background: #F8F5FC;
}

.kds-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mj-magenta);
  margin-bottom: 0.15rem;
}

.kds-sla-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.55rem 0 0.75rem;
}

.sla-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
}

.sla-pill.sla-green {
  background: #DCFCE7;
  color: #166534;
}

.sla-pill.sla-amber {
  background: #FEF3C7;
  color: #92400E;
}

.sla-pill.sla-red {
  background: #FEE2E2;
  color: #991B1B;
}

.kds-orders-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.85rem;
}

.kds-order-card {
  background: #FFFFFF;
  border: 2.5px solid #E5DEEF;
  border-radius: 16px;
  padding: 0.95rem 1rem;
  box-shadow: 0 6px 16px rgba(51, 12, 121, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  overflow: hidden;
}

.kds-order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(51, 12, 121, 0.12);
}

.kds-order-card.is-selected {
  border-color: var(--mj-purple);
  box-shadow: 0 0 0 3px rgba(51, 12, 121, 0.18), 0 10px 24px rgba(51, 12, 121, 0.14);
}

/* ESTADO 1: EN TIEMPO (0 - 14 MIN) */
.kds-order-card.is-normal-time {
  border-left: 7px solid #10B981;
}

/* ESTADO 2: URGENTE 15 - 19 MIN (CAMBIO DE COLOR A ÁMBAR/NARANJA) */
.kds-order-card.is-urgent-warning {
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
  border-color: #F59E0B;
  border-left: 8px solid #D97706;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.22);
}

/* ESTADO 3: LÍMITE SUPERADO 20+ MIN (ROJO CRÍTICO Y PARPADEO CONTINUO EN COCINA) */
@keyframes kdsCriticalBlink {
  0%, 100% {
    background-color: #FFF5F5;
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35), 0 10px 26px rgba(220, 38, 38, 0.28);
  }
  50% {
    background-color: #FEE2E2;
    border-color: #991B1B;
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.65), 0 12px 30px rgba(185, 28, 28, 0.45);
  }
}

@keyframes kdsBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.kds-order-card.is-critical-overdue {
  border-width: 3px;
  border-left-width: 9px;
  border-color: #DC2626;
  animation: kdsCriticalBlink 1.15s ease-in-out infinite;
}

.kds-order-card.is-onroute-card {
  border-left: 7px solid #2563EB;
}

.kds-order-card.is-delivered-card {
  opacity: 0.78;
  border-left: 7px solid #6B7280;
}

.kds-harass-banner {
  background: #DC2626;
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0.38rem 0.65rem;
  border-radius: 8px;
  letter-spacing: 0.01em;
  text-align: center;
}

.kds-order-card.is-urgent-warning .kds-harass-banner {
  background: #D97706;
  color: #FFFFFF;
}

.kds-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.kds-card-id-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kds-queue-rank {
  background: var(--mj-purple-dark);
  color: var(--cheese-gold);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

.kds-order-code {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--mj-purple);
  margin: 0;
}

.kds-stage-pill {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--mj-purple-soft);
  color: var(--mj-purple);
}

.kds-wait-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #F9F6FD;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  border: 1px solid #EBE3F5;
}

.kds-wait-left {
  display: flex;
  flex-direction: column;
}

.kds-wait-clock {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--mj-purple-dark);
}

.kds-arrival-hour {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.kds-urgency-badge {
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.24rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.kds-urgency-badge.level-normal {
  background: #DCFCE7;
  color: #166534;
}

.kds-urgency-badge.level-warning {
  background: #F59E0B;
  color: #FFFFFF;
}

.kds-urgency-badge.level-critical {
  background: #DC2626;
  color: #FFFFFF;
  animation: kdsBadgePulse 0.9s infinite;
}

.kds-urgency-badge.level-onroute {
  background: #DBEAFE;
  color: #1E40AF;
}

.kds-urgency-badge.level-delivered {
  background: #E5E7EB;
  color: #374151;
}

/* CRONOGRAMA DE TIEMPO DE DESPACHO (0m -> 5m -> 15m -> 20m) */
.kds-sla-schedule {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.kds-sla-bar-track {
  height: 7px;
  background: #E5E7EB;
  border-radius: 999px;
  overflow: hidden;
}

.kds-sla-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  background: #10B981;
}

.kds-sla-bar-fill.level-warning {
  background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}

.kds-sla-bar-fill.level-critical {
  background: linear-gradient(90deg, #EF4444 0%, #991B1B 100%);
}

.kds-sla-bar-fill.level-onroute {
  background: #2563EB;
}

.kds-sla-milestones {
  display: flex;
  justify-content: space-between;
  font-size: 0.67rem;
  font-weight: 700;
  color: #6B7280;
}

.sla-node.is-reached {
  color: #047857;
  font-weight: 800;
}

.sla-node.is-warn {
  color: #B45309;
  font-weight: 900;
}

.sla-node.is-crit {
  color: #DC2626;
  font-weight: 900;
}

/* CONTENEDOR DE INFORMACIÓN PRINCIPAL EXPUESTA */
.kds-main-info-box {
  background: #FCF9FF;
  border: 1px solid #EFE8F8;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.kds-customer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-main);
}

.kds-zone-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mj-purple);
  background: var(--mj-purple-soft);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.kds-address-line {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.kds-items-summary-pill {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mj-purple-dark);
  background: #FFFFFF;
  border: 1px dashed #D8C7F0;
  padding: 0.32rem 0.55rem;
  border-radius: 8px;
  margin-top: 0.2rem;
}

.kds-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.35rem;
  border-top: 1px solid #F0EAF7;
}

.kds-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kds-total-price {
  font-size: 0.92rem;
  color: var(--mj-magenta);
}

.kds-total-price small {
  color: var(--text-muted);
  font-weight: 600;
}

.kds-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-kds-details {
  background: var(--mj-purple);
  color: #FFFFFF;
  border: none;
  padding: 0.42rem 0.75rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-kds-details:hover {
  background: var(--mj-purple-dark);
}

.btn-kds-quick-dispatch {
  background: var(--mj-magenta);
  color: #FFFFFF;
  border: none;
  padding: 0.42rem 0.75rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-kds-quick-dispatch:hover {
  background: #C4085B;
}

.detail-urgent-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.15rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  color: #FFFFFF;
  background: #DC2626;
}

.detail-urgent-callout.level-warning {
  background: #D97706;
}

.detail-urgent-callout strong {
  display: block;
  font-size: 0.95rem;
}

.detail-urgent-callout span {
  font-size: 0.82rem;
  opacity: 0.92;
}

.sla-simulator-bar {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(51, 12, 121, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.sla-sim-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.btn-sla-sim {
  border: 1.5px solid transparent;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-sla-sim.sim-green {
  background: #DCFCE7;
  color: #166534;
  border-color: #86EFAC;
}

.btn-sla-sim.sim-amber {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FCD34D;
}

.btn-sla-sim.sim-red {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FCA5A5;
}

/* ============================================================================
   PANEL CONTABLE: CENTRO DE EXCEL + CADENA DE SUMINISTROS E INVENTARIO
   ============================================================================ */
.excel-sync-container {
  background: linear-gradient(135deg, #1E1136 0%, #330C79 65%, #164E35 100%);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 1.4rem 1.65rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  box-shadow: 0 12px 28px rgba(30, 17, 54, 0.18);
}

.excel-sync-left {
  flex: 1;
  min-width: 300px;
}

.excel-live-badge {
  display: inline-block;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid #34D399;
  color: #A7F3D0;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.4rem;
}

.excel-sync-left h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
  color: #FFFFFF;
}

.excel-sync-left p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.excel-sync-left code {
  background: rgba(255, 255, 255, 0.14);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  color: var(--cheese-gold);
}

.excel-sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.btn-excel-primary {
  background: #10B981;
  color: #FFFFFF;
  font-weight: 800;
  border: none;
  padding: 0.65rem 1.05rem;
  border-radius: 12px;
  cursor: pointer;
}

.btn-excel-primary:hover {
  background: #059669;
}

.btn-excel-secondary {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  font-weight: 700;
  padding: 0.62rem 0.95rem;
  border-radius: 12px;
  cursor: pointer;
}

.btn-excel-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
}

.btn-excel-import {
  background: var(--cheese-gold);
  color: var(--mj-purple-dark);
  font-weight: 900;
  padding: 0.65rem 1.05rem;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* CONTENEDOR DE CADENA DE SUMINISTROS E INVENTARIO */
.inventory-supply-container {
  background: #FFFFFF;
  border: 2px solid var(--border-soft);
  border-radius: 22px;
  padding: 1.5rem 1.65rem;
  margin-bottom: 1.65rem;
  box-shadow: var(--shadow-sm);
}

.inventory-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 1rem;
}

.inventory-header-bar h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--mj-purple);
  margin: 0.15rem 0 0.3rem;
}

.inventory-header-bar p {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0;
}

.inventory-header-kpis {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.inv-mini-stat {
  background: var(--bg-cream);
  border: 1.5px solid var(--border-soft);
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  text-align: center;
}

.inv-mini-stat span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
}

.inv-mini-stat strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--mj-purple);
}

.inv-mini-stat.inv-stat-alert {
  background: #FEF2F2;
  border-color: #FCA5A5;
}

.inv-mini-stat.inv-stat-alert strong {
  color: #DC2626;
}

.inventory-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
}

.inv-cat-btn {
  background: var(--bg-cream);
  border: 1.5px solid var(--border-soft);
  color: var(--mj-purple);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.inv-cat-btn.active,
.inv-cat-btn:hover {
  background: var(--mj-purple);
  color: #FFFFFF;
  border-color: var(--mj-purple);
}

.inv-cat-btn.inv-cat-alert-btn {
  border-color: #FCA5A5;
  color: #B91C1C;
}

.inv-cat-btn.inv-cat-alert-btn.active {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
}

.inventory-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1rem;
}

.inventory-item-card {
  background: #FFFFFF;
  border: 2px solid #E5DEEF;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 4px 12px rgba(51, 12, 121, 0.05);
}

.inventory-item-card.inv-status-low {
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
  border-color: #F59E0B;
  border-left: 6px solid #D97706;
}

.inventory-item-card.inv-status-critical {
  background: linear-gradient(180deg, #FEF2F2 0%, #FFFFFF 100%);
  border-color: #EF4444;
  border-left: 6px solid #DC2626;
}

.inv-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.inv-title-group {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.inv-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--mj-purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.inv-sku-tag {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
}

.inv-title-group h4 {
  font-size: 0.92rem;
  color: var(--mj-purple-dark);
  margin: 0.1rem 0 0;
  line-height: 1.25;
}

.inv-alert-pill {
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.inv-alert-pill.inv-status-ok {
  background: #DCFCE7;
  color: #166534;
}

.inv-alert-pill.inv-status-low {
  background: #FEF3C7;
  color: #92400E;
}

.inv-alert-pill.inv-status-critical {
  background: #FEE2E2;
  color: #991B1B;
}

.inv-metrics-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  background: #F9F6FD;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  text-align: center;
}

.inv-metric span {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.inv-metric strong {
  font-size: 0.86rem;
  color: var(--mj-purple-dark);
}

.inv-progress-track {
  height: 7px;
  background: #E5E7EB;
  border-radius: 999px;
  overflow: hidden;
}

.inv-progress-fill {
  height: 100%;
  background: #10B981;
  border-radius: 999px;
}

.inv-progress-fill.inv-status-low {
  background: #F59E0B;
}

.inv-progress-fill.inv-status-critical {
  background: #DC2626;
}

.inv-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-inv-step {
  width: 36px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border-soft);
  background: var(--bg-cream);
  color: var(--mj-purple-dark);
  font-weight: 900;
  cursor: pointer;
}

.btn-inv-step:hover {
  background: var(--mj-purple);
  color: #FFFFFF;
}

.btn-inv-restock {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--mj-purple);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-inv-restock:hover {
  background: var(--mj-magenta);
}

.block-hash-tag {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: monospace;
}

@media (max-width: 1120px) {
  .panel-workspace-kds {
    grid-template-columns: 1fr !important;
  }
  .suite-universe-nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ============================================================================
   CONTROLES DIRECTOS DE ESTADO EN COCINA + PEDIDO ENTREGADO + CALIFICACIÓN CLIENTE
   ============================================================================ */
.panel-sidebar,
.panel-center-control {
  overflow: visible !important;
}

.panel-orders-list {
  max-height: none !important;
  overflow-y: visible !important;
}

.panel-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.35rem;
}

@media (max-width: 640px) {
  .panel-filter-tabs {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Botones de las 5 etapas directamente en cada tarjeta KDS de la cola */
.kds-card-stage-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.32rem;
  background: #F4EFFA;
  padding: 0.4rem;
  border-radius: 10px;
  border: 1px solid #E2D6F3;
}

.kds-mini-stage-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.35rem 0.2rem;
  border-radius: 8px;
  border: 1.5px solid #DCD0EC;
  background: #FFFFFF;
  color: var(--mj-purple-dark);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.16s ease;
}

.kds-mini-stage-btn small {
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.kds-mini-stage-btn:hover {
  border-color: var(--mj-purple);
  transform: translateY(-1px);
}

.kds-mini-stage-btn.is-done {
  background: #DCFCE7;
  border-color: #22C55E;
  color: #166534;
}

.kds-mini-stage-btn.is-current {
  background: var(--mj-magenta);
  border-color: var(--mj-magenta);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(234, 11, 110, 0.3);
}

.kds-mini-stage-btn.is-deliver-btn:not(.is-current) {
  border-color: #10B981;
  background: #ECFDF5;
  color: #065F46;
}

.btn-kds-quick-deliver {
  background: #10B981;
  color: #FFFFFF;
  border: none;
  padding: 0.42rem 0.72rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-kds-quick-deliver:hover {
  background: #059669;
}

.btn-deliver-complete {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  border: 2px solid #A7F3D0;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 900;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.btn-deliver-complete:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.38);
}

.detail-stage-control-panel {
  background: #FAF7FF;
  border: 2px solid #E5D9F6;
  border-radius: 16px;
  padding: 1rem 1.15rem;
  margin-bottom: 1.15rem;
}

.big-stage-btn.is-final-stage:not(.is-current) {
  border-color: #10B981;
  background: #ECFDF5;
  color: #065F46;
}

/* Insignia de calificación del cliente en el Panel de Cocina */
.kds-rating-badge {
  margin-top: 0.28rem;
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-radius: 8px;
  padding: 0.32rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #92400E;
}

.kds-rating-badge small {
  font-weight: 600;
  color: #78350F;
}

.kitchen-customer-rating-banner {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #F59E0B;
  border-radius: 14px;
  padding: 0.9rem 1.15rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.14);
}

.kitchen-customer-rating-banner h4 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: #78350F;
  margin: 0.2rem 0 0.35rem;
}

.kitchen-rating-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
}

.kitchen-rating-chip {
  background: #FFFFFF;
  border: 1px solid #FCD34D;
  color: #92400E;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
}

.kitchen-rating-comment {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #78350F;
}

/* ============================================================================
   TARJETA DE CALIFICACIÓN DEL CLIENTE AL FINAL DEL SEGUIMIENTO (index.html)
   ============================================================================ */
.tracker-rating-card {
  background: linear-gradient(145deg, #FFFDF7 0%, #FFFBEB 100%);
  border: 2px solid #FCD34D;
  border-radius: 18px;
  padding: 1.15rem 1.2rem;
  margin: 0.95rem 0;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12);
}

.tracker-rating-card.is-delivered-highlight {
  border-width: 2.5px;
  border-color: #10B981;
  background: linear-gradient(145deg, #ECFDF5 0%, #FFFBEB 100%);
  box-shadow: 0 10px 26px rgba(16, 185, 129, 0.2);
}

.rating-eyebrow {
  display: inline-block;
  background: var(--mj-purple);
  color: var(--cheese-gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

.rating-card-header h4,
.rating-thankyou-box h4 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--mj-purple-dark);
  margin: 0 0 0.2rem;
}

.rating-card-header p {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0 0 0.7rem;
}

.rating-stars-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.star-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 2px solid #E5DEEF;
  background: #FFFFFF;
  color: #D1D5DB;
  font-size: 1.55rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.star-btn.is-active {
  color: #F59E0B;
  border-color: #F59E0B;
  background: #FFFBEB;
  text-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

.star-btn:hover {
  transform: scale(1.08);
}

.rating-score-pill {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--mj-purple);
  background: var(--mj-purple-soft);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  margin-left: 0.25rem;
}

.rating-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.rating-tag-chip {
  background: #FFFFFF;
  border: 1.5px solid #E2D6F3;
  color: var(--mj-purple-dark);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rating-tag-chip.is-selected {
  background: var(--mj-purple);
  border-color: var(--mj-purple);
  color: #FFFFFF;
}

.rating-comment-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rating-comment-input {
  flex: 1;
  min-width: 190px;
  padding: 0.58rem 0.8rem;
  border-radius: 12px;
  border: 1.5px solid #D8C7F0;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--text-main);
}

.rating-comment-input:focus {
  outline: none;
  border-color: var(--mj-purple);
}

.rating-submitted-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0;
}

.rating-tag-pill {
  background: #FFFFFF;
  border: 1px solid #FCD34D;
  color: #92400E;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.rating-submitted-comment {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--mj-purple-dark);
  margin: 0.35rem 0 0.6rem;
}

/* ============================================================================
   ORDEN Y ARQUITECTURA RESPONSIVA MÓVIL DEFINITIVA (320px - 980px)
   Garantiza 1 sola columna limpia, sin desbordes ni elementos superpuestos
   ============================================================================ */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.hero-size-card.featured {
  margin-top: 0.35rem;
}

.size-popular-ribbon {
  position: absolute;
  top: -11px;
  right: 14px;
  background: linear-gradient(135deg, var(--mj-purple-dark) 0%, var(--mj-purple) 100%);
  color: var(--cheese-gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.16rem 0.65rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(51, 12, 121, 0.22);
  z-index: 2;
  white-space: nowrap;
}

@media (max-width: 980px) {
  /* 1. Barra superior sin texto cortado a la derecha */
  .top-banner {
    height: auto !important;
    min-height: 36px;
    padding: 0.32rem 0 !important;
  }

  .top-banner-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem 0.5rem !important;
    white-space: normal !important;
    text-align: center;
  }

  .banner-text,
  .banner-divider {
    display: none !important;
  }

  .banner-pill,
  .store-status-badge {
    font-size: 0.71rem !important;
    padding: 0.18rem 0.55rem !important;
    white-space: nowrap;
    max-width: 100%;
  }

  /* 2. Header móvil con fila superior (Logo + Mi Pedido) y barra de navegación deslizable debajo */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.45rem !important;
    padding: 0.55rem 0 !important;
  }

  .brand-link {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-actions {
    flex: 0 0 auto;
  }

  .main-nav {
    display: flex !important;
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 0.4rem !important;
    padding: 0.25rem 0 0.1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav .nav-link {
    flex: 0 0 auto;
    font-size: 0.76rem !important;
    padding: 0.32rem 0.68rem !important;
    white-space: nowrap;
  }

  /* 3. Hero en 1 sola columna vertical (100% ancho): Primero información/tamaños/botones, debajo tarjeta MJ */
  .hero-section {
    padding: 1rem 0 1.15rem !important;
    overflow: hidden;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.15rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .hero-copy {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .climate-tag {
    max-width: 100%;
    white-space: normal !important;
    text-align: center;
    line-height: 1.3;
    font-size: 0.76rem !important;
    padding: 0.35rem 0.8rem !important;
    margin-bottom: 0.7rem !important;
  }

  .hero-title {
    width: 100%;
    font-size: clamp(1.72rem, 6.4vw, 2.25rem) !important;
    line-height: 1.14 !important;
    margin-bottom: 0.6rem !important;
  }

  .hero-description {
    width: 100%;
    max-width: 540px;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    margin: 0 auto 1rem !important;
  }

  /* 4. Tarjetas de Tamaño M y J al 100% del ancho con distribución horizontal limpia */
  .hero-size-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    width: 100% !important;
    margin-bottom: 1.05rem !important;
  }

  .hero-size-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.95rem 1rem !important;
    text-align: left !important;
  }

  .hero-size-card.featured {
    margin-top: 0.35rem !important;
    padding-top: 1.1rem !important;
  }

  .size-letter-badge {
    width: 46px !important;
    height: 46px !important;
    font-size: 1.5rem !important;
    border-radius: 14px !important;
  }

  .size-card-info {
    min-width: 0 !important;
    text-align: left !important;
  }

  .size-card-name {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.18rem !important;
    white-space: normal;
  }

  .size-card-slices {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
  }

  .size-card-price-col {
    align-items: flex-end !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .size-card-price {
    font-size: 1.28rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  /* 5. Botones principales del Hero al 100% del ancho en móvil */
  .hero-cta-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.6rem !important;
    margin-bottom: 0.25rem !important;
  }

  .hero-cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.78rem 1rem !important;
    font-size: 0.94rem !important;
  }

  /* 6. Tarjeta visual MJ House centrada al 100% debajo de los botones */
  .hero-visual {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-logo-only-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.15rem 1rem !important;
    border-radius: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  .hero-showcase-pill {
    font-size: 0.76rem !important;
    padding: 0.28rem 0.8rem !important;
    text-align: center;
    max-width: 100%;
  }

  .hero-main-logo-compact {
    width: 118px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .hero-card-seals {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0.45rem !important;
  }

  .seal-item {
    font-size: 0.74rem !important;
    padding: 0.45rem 0.55rem !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* 7. Sección Sigue tu Pedido en Vivo y Dashboard de Rastreo en 1 sola columna limpia */
  .tracker-dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .tracker-countdown-card,
  .tracker-timeline-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 1.1rem 1rem !important;
  }

  .tracker-order-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.6rem !important;
  }

  .tracker-order-id {
    font-size: 1.45rem !important;
    word-break: break-word;
  }

  .tracker-eta-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left !important;
    padding: 0.5rem 0.75rem !important;
  }

  .countdown-hero-box {
    padding: 1.1rem 1rem !important;
  }

  .countdown-top-row {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .countdown-status-banner {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .top-banner-inner {
    flex-direction: column !important;
    gap: 0.2rem !important;
  }

  .hero-size-card {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 0.55rem !important;
    padding: 0.85rem 0.8rem !important;
  }

  .size-letter-badge {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.35rem !important;
  }

  .size-card-name {
    font-size: 0.93rem !important;
  }

  .size-card-slices {
    font-size: 0.75rem !important;
  }

  .size-card-price {
    font-size: 1.16rem !important;
  }
}

/* ============================================================================
   LINK CORTO Y BLOQUEO ANTIFRAUDE DEFINITIVO AL ENTREGAR/CERRAR PEDIDO
   ============================================================================ */
.client-link-url {
  font-size: 0.9rem !important;
  font-weight: 800;
  padding: 0.45rem 0.75rem !important;
  white-space: nowrap;
  overflow-x: auto;
  max-width: 100%;
}

.client-link-banner.is-disabled-link {
  background: linear-gradient(135deg, #FEF2F2 0%, #F3F4F6 100%) !important;
  border: 2px solid #EF4444 !important;
}

.client-link-banner.is-disabled-link .client-link-info strong {
  color: #991B1B !important;
}

.client-link-disabled-msg {
  display: block;
  font-size: 0.84rem;
  color: #7F1D1D;
  line-height: 1.4;
}

.badge-link-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #991B1B;
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0.38rem 0.78rem;
  border-radius: 999px;
  white-space: nowrap;
}

.kds-mini-stage-btn.is-locked-stage,
.big-stage-btn.is-locked-stage {
  cursor: not-allowed !important;
  opacity: 0.65;
}

.kds-mini-stage-btn.is-locked-stage:hover,
.big-stage-btn.is-locked-stage:hover {
  transform: none !important;
}

.tracker-disabled-alert[hidden] {
  display: none !important;
}

.disabled-link-security-box {
  background: linear-gradient(135deg, #FEF2F2 0%, #FFF5F5 100%);
  border: 2px solid #EF4444;
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
  text-align: left;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.12);
}

.disabled-link-pill {
  display: inline-block;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

.disabled-link-security-box h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #991B1B;
  margin: 0 0 0.25rem;
}

.disabled-link-security-box p {
  font-size: 0.86rem;
  color: #7F1D1D;
  margin: 0;
  max-width: none;
}