/* El recorrido (journey/view.js) y las ilustraciones de cada herramienta (journey/illustrations.js). */

.journey {
  position: relative; display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h));
  background: var(--bg); color: var(--text);
  /* clip y no hidden: hidden crearía un contenedor de desplazamiento y la barra «Su Backpack»
     dejaría de quedar fija abajo en el celular (position: sticky). */
  overflow: clip;
}
.journey__backdrop { position: absolute; inset: 0; pointer-events: none; }
.journey > :not(.journey__backdrop) { position: relative; }
/* PC durante las preguntas: todo entra en una pantalla, sin desplazarse. */
.journey.is-fixed { height: calc(100vh - var(--header-h)); overflow: hidden; }

/* ── Avance ──────────────────────────────────────────────────────────────────── */
.journey__head {
  order: 0; position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 12px 24px; max-height: 60px; overflow: hidden;
  transition: opacity .6s ease .3s, max-height .6s var(--ease-out), padding .6s var(--ease-out);
}
.journey__progress-label { font-size: 13px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.journey__progress { flex: 1 1 220px; max-width: 380px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.journey__progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .8s var(--ease-out); }

.journey__dots { order: 1; display: none; align-items: center; overflow-x: auto; padding: 2px 16px 12px; flex: none; scrollbar-width: none; }
.journey__dots::-webkit-scrollbar { height: 0; }
.journey.is-narrow .journey__dots { display: flex; }
.dots__line { flex: 1 0 10px; height: 2px; background: var(--border); transition: background-color .5s; }
.dots__line.is-on { background: var(--accent); }
.dots__dot {
  flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 2px dashed var(--ghost); background: transparent; color: var(--ghost);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .4s;
}
.dots__dot.is-done { border: 2px solid var(--accent); background: var(--accent); color: var(--on-accent); }
.dots__dot.is-current { width: 32px; height: 32px; border: 2px solid var(--pink); background: var(--pink-soft); color: var(--tag-text); }
.dots__dot:disabled { cursor: default; }

/* ── Escenario ───────────────────────────────────────────────────────────────── */
.journey__stage { order: 3; position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; overflow: hidden; }
.journey.is-narrow .journey__stage { align-items: flex-start; }

.stage__blob { position: absolute; border-radius: 50%; transition: transform 1.2s var(--ease-out), background-color .7s; }
.stage__blob--a { top: -12%; left: 8%; width: 520px; height: 520px; background: var(--blob-1); }
.stage__blob--b { bottom: -20%; left: 55%; width: 420px; height: 420px; background: var(--blob-2); transition-duration: 1.4s; }

/* Rombos de costura (acolchado): más anchos que el escenario para acompañar el corrimiento. */
.stage__quilt { position: absolute; top: 0; left: -1400px; width: calc(100% + 2800px); max-width: none; height: 100%; transition: transform 1s var(--ease-out); }
.stage__quilt path, .devices-section__quilt path { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 8 7; stroke-linecap: round; }

/* La mochila. Capas, de atrás hacia adelante: círculos → rombos → silueta opaca → mochila
   traslúcida. La silueta (del color del fondo) tapa los rombos para que pasen POR DETRÁS. */
.stage__logo {
  position: absolute; pointer-events: none;
  transition: transform 1.3s var(--ease-out), right 1.3s var(--ease-out), top 1.3s var(--ease-out),
    width 1.3s var(--ease-out), height 1.3s var(--ease-out);
}
.stage__logo--silhouette {
  background: var(--bg); transition-property: transform, right, top, width, height, background-color;
  -webkit-mask: url('../img/logo.png') center / contain no-repeat;
  mask: url('../img/logo.png') center / contain no-repeat;
}
.stage__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage__logo-outline { opacity: var(--logo-op); transition: opacity .9s; }
.stage__logo-fill { opacity: var(--logo-fill-op); transition: clip-path 1.1s var(--ease-out), opacity .9s; }
.journey.is-cover .stage__logo-outline { opacity: calc(var(--logo-op) * 2.2); }
.journey.is-cover .stage__logo-fill { opacity: calc(var(--logo-fill-op) * 1.5); }

.stage__track {
  position: relative; display: flex; align-items: center; flex: none; padding: 12px 0;
  transition: transform .9s var(--ease-out), opacity .7s ease .45s;
}
.stage__past { display: flex; align-items: center; flex: none; }
.stage__card { flex: none; transform-origin: center center; transition: transform .4s ease; }

.past-card {
  width: var(--past-w); flex: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  text-align: left; cursor: pointer; box-shadow: var(--shadow-soft); opacity: .94;
  transition: transform .15s ease;
}
@media (hover: hover) { .past-card:hover { transform: translateY(-2px); } }
.past-card .eyebrow { font-size: 11px; color: var(--accent-text); }
.past-card__answer { font-size: 14px; font-weight: 600; line-height: 1.3; }
.past-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.past-card__tools { display: flex; gap: 6px; color: var(--accent); }
.past-card__change { font-size: 11px; color: var(--muted); }
.tool-dot { display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 8px; background: var(--pink-soft); }
.past-link { position: relative; width: var(--past-gap); height: 2px; flex: none; background: var(--accent); }
.past-link::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
}

.stage__ghosts { display: flex; align-items: center; flex: none; color: var(--ghost); }
.ghost__line { width: 44px; border-top: 2px dashed var(--ghost); }
.ghost__q {
  display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px dashed var(--ghost); font-family: var(--font-display); font-weight: 700; font-size: 20px;
  animation: glow 2.4s ease-in-out infinite;
}
.ghost__dot { width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--ghost); opacity: .7; }
.ghost__pill {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 2px dashed var(--ghost);
  color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap;
}

/* Portada: sin tarjeta, sin avance, sin barra; solo la mochila. */
/* En la portada la franja del avance se colapsa: si solo fuera invisible, el escenario empezaría
   más abajo y el círculo de color quedaría cortado en una línea en el medio de la nada. */
.journey.is-cover .journey__head { opacity: 0; max-height: 0; padding-block: 0; transition-delay: 0s; }
.journey.is-cover .journey__dots,
.journey.is-cover .journey__reveal,
.journey.is-cover .journey__tray { display: none; }
.journey.is-cover .stage__track { opacity: 0; pointer-events: none; transition-delay: 0s; }

/* ── Tarjeta de pregunta ─────────────────────────────────────────────────────── */
.qcard {
  width: 100%; padding: 22px 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow); transition: background-color .7s, border-color .7s;
}
.journey.is-narrow .qcard { padding: 18px 16px; }
.qcard__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qcard__title { margin: 12px 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.12; letter-spacing: -0.015em; }
.journey.is-narrow .qcard__title { font-size: 24px; }
.qcard__hint { max-width: 620px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.qcard__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 16px; }
.journey.is-narrow .qcard__options { grid-template-columns: 1fr; }
.option {
  container-type: inline-size; min-width: 0; min-height: 44px; display: flex; flex-direction: column; gap: 7px; padding: 14px;
  border-radius: 16px; border: 1.5px solid var(--border); background: var(--raised); color: var(--text);
  text-align: left; cursor: pointer; transition: transform .15s ease, background-color .3s, border-color .3s;
}
@media (hover: hover) { .option:hover { transform: translateY(-2px); } }
.option:active { transform: scale(.97); }
.option.is-selected { border-color: var(--pink); background: var(--pink-soft); }
.option__head { display: flex; align-items: center; gap: 10px; }
.option__icon {
  position: relative; flex: none; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--surface); color: var(--accent);
}
.option__check {
  position: absolute; right: -7px; top: -7px; display: flex; width: 20px; height: 20px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--pink); color: #ffffff; box-shadow: 0 0 0 2px var(--pink-soft);
}
.option__label { flex: 1; min-width: 0; font-size: clamp(13px, 7.4cqi, 15px); font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.option__desc { font-size: 13px; line-height: 1.4; color: var(--muted); overflow-wrap: break-word; }
.option__adds {
  align-self: flex-start; max-width: 100%; margin-top: 2px; padding: 4px 10px; border-radius: 999px;
  background: var(--pink-soft); color: var(--tag-text); font-size: 12px; font-weight: 700; overflow-wrap: break-word;
}
.option.is-selected .option__adds { background: var(--surface); }
.qcard__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* ── Final ───────────────────────────────────────────────────────────────────── */
.final__head { display: flex; align-items: center; gap: 14px; }
.final__title { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; }
.journey.is-narrow .final__title { font-size: 30px; }
.final__summary { margin-top: 14px; max-width: 680px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 20px; }
.journey.is-narrow .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.final__note + .tiles { margin-top: 12px; }
.tile {
  container-type: inline-size; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 14px; border: 1.5px solid var(--border); background: var(--raised); color: var(--text);
  text-align: left; cursor: pointer; transition: transform .15s ease, background-color .3s, border-color .3s;
}
@media (hover: hover) { .tile:hover { transform: translateY(-2px); } }
.tile.is-selected { border-color: var(--pink); background: var(--pink-soft); }
.tile__icon { flex: none; display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface); color: var(--accent); }
.tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile__text strong { font-size: clamp(12.5px, 7cqi, 14px); overflow-wrap: break-word; }
.tile__text span { font-size: 12px; line-height: 1.35; overflow-wrap: break-word; }
.final__subtitle { margin-top: 22px; font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.final__note { margin-top: 4px; font-size: 14px; line-height: 1.45; }
.final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.final__trial { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.final__contact {
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 18px; border-radius: 18px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.final__contact[role="status"] { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; }
.final__contact .contact-done__icon { width: 26px; height: 26px; }
.final__contact input { background: var(--surface); }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 180px; min-width: 0; }

/* ── Lo que se suma (explicación) ───────────────────────────────────────────── */
.journey__reveal { order: 4; position: relative; flex: none; padding: 0 24px 14px; scroll-margin: 24px; }
.journey.is-narrow .journey__reveal { padding: 0 16px 16px; }
.journey.is-narrow:not(.is-final) .journey__reveal { order: 2; padding-bottom: 4px; }
.reveal { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; }
.reveal.is-mini { gap: 8px; }
.reveal__cell { flex: 1 1 440px; min-width: 0; display: flex; border-radius: 22px; }
.reveal.is-mini .reveal__cell { flex-basis: 280px; }
.reveal__cell.pulse { animation: pulse 1.5s ease-out .45s 2; }
.reveal__item {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 14px;
  border-radius: 22px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-soft);
  transition: background-color .7s, border-color .7s;
}
.reveal__cell.pulse .reveal__item { border: 2px solid var(--pink); background: var(--pink-soft); }
.reveal.is-mini .reveal__item { gap: 12px; padding: 10px 12px; }
.reveal__art { flex: 1 1 260px; max-width: 320px; min-width: 220px; }
.reveal.is-wide .reveal__art { max-width: 400px; }
.reveal__icon {
  flex: none; display: flex; width: 88px; height: 88px; margin: 8px; align-items: center; justify-content: center;
  border-radius: 16px; background: var(--surface-2); color: var(--accent);
}
.reveal.is-mini .reveal__icon { width: 48px; height: 48px; margin: 0; }
.reveal__body { flex: 1 1 200px; min-width: 0; padding: 2px 6px 2px 0; }
.reveal__body .eyebrow { font-size: 11px; }
.reveal__title { margin: 4px 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; }
.reveal.is-mini .reveal__title { font-size: 18px; }
.reveal.is-wide .reveal__title { font-size: 26px; }
.reveal__text { font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: break-word; }
.reveal.is-mini .reveal__text { font-size: 13px; }
.reveal.is-wide .reveal__text { font-size: 15px; }
.reveal__points { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.reveal__points li { display: flex; gap: 9px; font-size: 14px; line-height: 1.45; }
.reveal.is-wide .reveal__points li { font-size: 15px; }
.reveal__points li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--pink); }
.reveal__note { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--pink-soft); font-size: 13px; line-height: 1.45; }

/* ── «Su Backpack» ───────────────────────────────────────────────────────────── */
.journey__tray {
  order: 5; flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 24px;
  border-top: 1px solid var(--divider); background: var(--surface); transition: background-color .7s;
}
.journey.is-narrow .journey__tray { position: sticky; bottom: 0; z-index: 5; gap: 10px; padding: 8px 12px; box-shadow: 0 -10px 24px -16px rgba(0, 0, 0, .35); }
.tray__brand { display: flex; align-items: center; gap: 10px; flex: none; }
.tray__text { display: flex; flex-direction: column; }
.tray__text strong { font-size: 14px; }
.tray__count { font-size: 12px; color: var(--muted); }
.journey.is-narrow .tray__text { display: none; }
.tray__list { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; padding: 4px 0; scrollbar-width: none; }
.tray__list::-webkit-scrollbar { height: 0; }
.tray__chip {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px;
  border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s ease, background-color .3s, border-color .3s;
}
.tray__chip.is-on { border-color: var(--pink); background: var(--pink-soft); }
.tray__chip-icon { display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--accent); }

/* ═══ Ilustraciones ════════════════════════════════════════════════════════════ */
.il {
  position: relative; width: 100%; height: 160px; overflow: hidden; padding: 12px; border-radius: 16px;
  background: var(--surface-2); color: var(--text); font-size: 11px; line-height: 1.3; transition: background-color .7s;
}
.reveal.is-wide .il { height: 200px; }
.il > * { height: 100%; }
.il-svg { width: 100%; height: 100%; max-width: none; }
.il-row { display: flex; gap: 16px; }
.il-col { display: flex; flex-direction: column; gap: 6px; }
.il-center { align-items: center; justify-content: center; }
.il-center-v { justify-content: center; }
.il-stretch { align-items: stretch; }
.il-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.il-gap-sm { gap: 6px; }
.il-gap { gap: 10px; }
.il-gap-lg { gap: 14px; }
.il-grow { flex: 1; min-width: 0; min-height: 0; }
.il-narrow { max-width: 160px; }
.il-small { font-size: 10px; }
.il-strong { font-weight: 700; }
.il-accent { color: var(--accent-text); }
.il-title { font-size: 13px; font-weight: 700; }
.il-muted { color: var(--muted); }
.il-tag { color: var(--tag-text); font-weight: 700; }

.il-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.il-ticket { width: 160px; height: auto; display: flex; flex-direction: column; gap: 7px; }
.il-ticket--wide { width: 240px; }
.il-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.il-rule { border-top: 1px dashed var(--divider); }
.il-bar { flex: none; width: 24px; height: 6px; border-radius: 3px; background: var(--border); }
.il-bar--ink { background: var(--ink); }
.il-bar--pink { width: 20px; background: var(--pink); }
.il-bar--lg { width: 40px; height: 8px; border-radius: 4px; }
.il-bar--sm { width: 12px; height: 5px; }
.il-chip { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.il-chip--sm { padding: 3px 9px; }
.il-chip.is-on { background: var(--pink-soft); border-color: var(--pink); font-weight: 700; }
.il-mini-tag { padding: 2px 8px; border-radius: 999px; background: var(--pink-soft); color: var(--tag-text); font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.il-total { align-self: flex-start; padding: 6px 12px; border-radius: 10px; background: var(--ink); color: var(--ink-text); font-size: 14px; font-weight: 700; }
.il-total--wide { align-self: stretch; text-align: center; padding: 9px; border-radius: 999px; font-size: 11px; }

/* Salón: colores de fábrica del POS, iguales de día y de noche (es una captura del sistema). */
.il-floor { display: flex; flex-direction: column; }
.il-tabs { display: flex; align-items: flex-end; gap: 2px; padding-left: 4px; }
.il-tab { padding: 3px 12px; border-radius: 7px 7px 0 0; background: var(--surface); border: 1px solid var(--border); border-bottom: none; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.il-tab.is-on { position: relative; top: 1px; background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; font-weight: 700; }
.il-floor .il-row { gap: 10px; min-height: 0; }
.il-floor__plan { flex: 1; min-width: 0; display: flex; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 0 8px 8px 8px; background: #f1f5f9; }
.il-floor__legend { flex: none; width: 104px; justify-content: center; gap: 5px; font-size: 9.5px; line-height: 1.15; color: var(--muted); }
.il-legend { display: flex; align-items: center; gap: 6px; }
.il-swatch { flex: none; width: 11px; height: 11px; border-radius: 3px; background: #ffffff; }
.il-swatch--free { border: 1px solid #94a3b8; }
.il-swatch--seated { border: 2.5px solid #94a3b8; }
.il-swatch--pending { border: 2.5px solid #ef4444; }
.il-swatch--partial { border: 2.5px solid #f59e0b; }
.il-swatch--served { border: 2.5px solid #22c55e; }
.il-swatch--bill { border: 2.5px solid #8b5cf6; }
.il-swatch--exclusion { width: 12px; height: 12px; border: 1.4px dashed var(--pink); background: repeating-linear-gradient(45deg, var(--pink-soft) 0 2px, var(--pink) 2px 3px); }
.fl-floor { fill: #f1f5f9; }
.fl-wall { fill: none; stroke: #4b5563; stroke-width: 4; stroke-linejoin: round; }
.fl-thin { fill: none; stroke: #64748b; stroke-width: 1; }
.fl-dash { stroke-dasharray: 2 2; }
.fl-window { fill: #93c5fd; stroke: #64748b; stroke-width: .6; }
.fl-bar { fill: #cbd5e1; stroke: #64748b; stroke-width: .8; }
.fl-label { font-family: var(--font-sans); font-size: 7.5px; fill: #1f2937; }
.fl-plant { fill: #16a34a; stroke: #64748b; stroke-width: .6; }
.fl-chair { fill: #9ca3af; }
.fl-table { fill: #ffffff; stroke-width: 3; }
.fl-free { stroke: #94a3b8; stroke-width: 1; }
.fl-pending { stroke: #ef4444; }
.fl-served { stroke: #22c55e; }
.fl-bill { stroke: #8b5cf6; }
.fl-partial { stroke: #f59e0b; }
.fl-num { font-family: var(--font-sans); font-size: 9px; font-weight: 700; fill: #0f172a; text-anchor: middle; }

/* Envíos */
.il-map { flex: 1; min-width: 0; display: flex; padding: 0; overflow: hidden; }
.il-delivery__legend { flex: none; width: 112px; justify-content: center; gap: 7px; font-size: 10px; line-height: 1.2; }
.il-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.il-dot--near { background: var(--accent); opacity: .55; }
.il-dot--mid { background: var(--accent); opacity: .35; }
.il-dot--ring { border: 1.6px solid var(--ink); }
.il-dot--pink { width: 10px; height: 10px; margin: 0 1px; background: var(--pink); }
.dl-street { fill: none; stroke: var(--border); stroke-width: 1; opacity: .55; }
.dl-ring { fill: var(--accent); }
.dl-ring--max { fill-opacity: .10; stroke: var(--ink); stroke-width: 1.6; }
.dl-ring--mid { fill-opacity: .14; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.dl-ring--near { fill-opacity: .22; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.dl-stripe-a { fill: var(--pink-soft); }
.dl-stripe-b { fill: var(--pink); fill-opacity: .45; }
.dl-exclusion { fill: url(#il-stripes); stroke: var(--pink); stroke-width: 1.4; stroke-dasharray: 4 2; }
.dl-x-dot { fill: var(--pink); }
.dl-x { stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; }
.dl-route { stroke: var(--pink); stroke-width: 1.4; }
.dl-home { fill: var(--pink); stroke: var(--surface); stroke-width: 2; }
.dl-store { fill: var(--ink); stroke: var(--surface); stroke-width: 2.5; }

/* Cobro del envío */
.il-fee { align-items: center; gap: 12px; }
.il-fee > * { flex: 1 1 0; min-width: 0; }
.il-table { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.il-table__title { padding: 6px 10px; border-bottom: 1px solid var(--divider); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.il-table__row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--divider); }
.il-table__title + .il-table__row { border-top: none; }
.il-table__row.is-on { background: var(--pink-soft); color: var(--tag-text); font-weight: 700; }
.il-fee__line { font-size: 11.5px; line-height: 1.35; }

/* Sucursal Web */
.il-browser { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.il-browser__bar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-bottom: 1px solid var(--divider); }
.il-browser__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.il-browser__url { flex: 1; min-width: 0; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-browser__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--ink); color: var(--ink-text); font-size: 13px; }
.il-badge { padding: 3px 10px; border-radius: 999px; background: var(--pink); color: #ffffff; font-size: 10px; font-weight: 700; }
.il-browser__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.il-product { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.il-product__img { flex: 1; min-height: 26px; border-radius: 8px; background: var(--border); }
.il-product__img--1 { background: var(--pink-soft); }
.il-product__img--2 { background: var(--surface-2); }
.il-product__name { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Costos */
.il-meter { display: flex; align-items: center; gap: 8px; }
.il-meter__label { width: 70px; flex: none; }
.il-meter__track { flex: 1; display: flex; }
.il-end { justify-content: flex-end; }
.il-meter__fill { height: 12px; border-radius: 6px; }
.il-fill--border { background: var(--border); }
.il-fill--ink { background: var(--ink); }
.il-fill--pink { background: var(--pink); }
.il-w-100 { width: 100%; }
.il-w-44 { width: 44%; }
.il-w-56 { width: 56%; }

/* Inventario */
.il-stock { display: flex; align-items: center; gap: 10px; }
.il-stock__name { width: 96px; flex: none; font-weight: 600; }
.il-stock__track { flex: 1; height: 10px; display: flex; overflow: hidden; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); }
.il-stock__fill { background: var(--ink); }
.il-stock__fill.is-low { background: var(--pink); }
.il-stock__state { width: 72px; flex: none; text-align: right; font-weight: 700; color: var(--muted); }
.il-stock__state.is-low { color: var(--tag-text); }

/* Varias cajas / sucursales */
.il-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.il-box3 { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 12px; }
.il-box3 strong { font-size: 12px; }
.il-links { height: 24px; gap: 10px; }
.il-links span { justify-self: center; border-left: 1.5px dashed var(--accent); }

/* POS móvil */
.il-phone {
  width: 92px; height: 158px; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 7px;
  border-radius: 18px; border: 3px solid var(--ink); background: var(--surface); font-size: 10px;
}
.il-phone__cta { padding: 5px; border-radius: 8px; background: var(--pink); color: #ffffff; font-size: 10px; font-weight: 700; text-align: center; }
.il-note { padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.il-note--pink { background: var(--pink-soft); border-color: transparent; font-weight: 700; }

/* Combos, conjuntos, variantes, agregados, fracción, usuarios */
.il-qty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 12px; font-weight: 600; }
.il-qty__n { font-size: 15px; font-weight: 800; color: var(--accent-text); }
.il-op { font-size: 16px; font-weight: 700; color: var(--muted); }
.il-stepper { display: flex; align-items: center; gap: 6px; padding: 2px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.il-stepper b { min-width: 14px; text-align: center; }
.il-stepper__btn { display: flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); }
.il-stepper__btn.is-on { background: var(--pink-soft); color: var(--tag-text); }
.il-version { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-weight: 700; }
.il-version.is-on { background: var(--pink-soft); border-color: var(--pink); }
.il-dashed { padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--border); color: var(--muted); }
.il-box { padding: 3px 10px; border-radius: 8px; border: 1.5px solid var(--pink); font-weight: 700; }
.il-box--dashed { border: 1px dashed var(--border); color: var(--text); }
.il-roles { width: 230px; max-width: 100%; height: auto; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; }
.il-role-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--pink-soft); border: 1px solid var(--pink); }
.il-level { flex: none; height: 6px; border-radius: 3px; background: var(--pink); }
.il-level--1 { width: 14px; opacity: .48; }
.il-level--2 { width: 28px; opacity: .61; }
.il-level--3 { width: 42px; opacity: .74; }
.il-level--4 { width: 56px; opacity: .87; }
.il-level--5 { width: 70px; opacity: 1; }