/* =========================================================
   A&N Distribuciones — Tour guiado interactivo (prototipo)
   Capa por encima de todo lo demás (drawer/modal tope hoy es
   --z-toast: 400) — usa su propia escala, siempre arriba.

   Acento propio (cian saturado), deliberadamente distinto del
   rojo de marca: esta capa es una herramienta de revisión, no
   parte del sitio — no debe leerse como una función más del
   catálogo. Se define acá, scopeada a .an-tour-*, sin tocar
   tokens.css.
   ========================================================= */
:root{
  --tour-accent: #00B4C6;
  --tour-accent-dark: #008C9A;
  --tour-accent-tint: #E2F8FA;
  --tour-ink: #14202B;
  --tour-sheet-h: 0px; /* lo fija tour.js cuando el cartel pasa a modo hoja */
}

.an-tour-launcher{
  position:fixed; left:20px; bottom:20px; z-index:1000;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--tour-ink); color:var(--color-white);
  border:2px solid var(--tour-accent); border-radius:var(--radius-pill);
  padding:10px 18px 10px 14px;
  font-family:var(--font-base); font-size:var(--fs-sm); font-weight:500;
  box-shadow:var(--shadow-popover), 0 0 0 0 rgba(0,180,198,.55);
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  animation:an-tour-launcher-ping 2.6s ease-out infinite;
}
.an-tour-launcher:hover{ background:#1f313f; }
.an-tour-launcher:active{ transform:scale(.97); }
.an-tour-launcher .icon{ width:18px; height:18px; flex:none; color:var(--tour-accent); }
.an-tour-launcher.is-running{
  background:var(--tour-accent-dark); border-color:var(--tour-accent-dark);
  animation:none; box-shadow:var(--shadow-popover);
}
.an-tour-launcher.is-running .icon{ color:var(--color-white); }
.an-tour-launcher.is-running:hover{ background:var(--tour-accent); border-color:var(--tour-accent); }
.an-tour-launcher[hidden]{ display:none; }

@keyframes an-tour-launcher-ping{
  0%, 60%, 100%{ box-shadow:var(--shadow-popover), 0 0 0 0 rgba(0,180,198,.55); }
  75%{ box-shadow:var(--shadow-popover), 0 0 0 9px rgba(0,180,198,0); }
}
@media (prefers-reduced-motion:reduce){
  .an-tour-launcher{ animation:none; }
}

@media (max-width:768px){
  .an-tour-launcher{ left:12px; bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom,0) + 12px); padding:9px 14px 9px 12px; }
  .an-tour-launcher .label-full{ display:none; }
}

/* ---------- Globo de aviso ("probá el tour") ---------- */
.an-tour-callout{
  position:fixed; left:20px; bottom:76px; z-index:999; max-width:220px;
  background:var(--color-white); color:var(--tour-ink);
  border-radius:12px; padding:12px 30px 12px 14px;
  box-shadow:var(--shadow-popover);
  font-family:var(--font-base); font-size:12.5px; line-height:1.45;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.an-tour-callout.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.an-tour-callout strong{ display:block; color:var(--tour-accent-dark); font-weight:600; margin-bottom:2px; }
.an-tour-callout::after{
  content:""; position:absolute; left:24px; bottom:-6px; width:12px; height:12px;
  background:var(--color-white); transform:rotate(45deg);
}
.an-tour-callout .callout-close{
  position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
  background:none; border:none; color:var(--color-dark-gray); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.an-tour-callout .callout-close:hover{ background:var(--color-bg); color:var(--color-black); }
.an-tour-callout .callout-close .icon{ width:13px; height:13px; }

@media (max-width:768px){
  .an-tour-callout{ left:12px; bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom,0) + 68px); }
}

/* ---------- Menú de selección de recorrido ---------- */
.an-tour-menu-backdrop{
  position:fixed; inset:0; z-index:1001; background:rgba(20,32,43,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out);
}
.an-tour-menu-backdrop.is-open{ opacity:1; pointer-events:auto; }
@media (min-width:768px){
  .an-tour-menu-backdrop{ align-items:center; }
}

.an-tour-menu{
  background:var(--color-white); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--space-4); width:100%; max-width:440px;
  max-height:88vh; overflow-y:auto;
  box-shadow:var(--shadow-popover);
  transform:translateY(24px);
  transition:transform var(--dur-base) var(--ease-out);
}
.an-tour-menu-backdrop.is-open .an-tour-menu{ transform:translateY(0); }
@media (min-width:768px){
  .an-tour-menu{ border-radius:var(--radius-lg); margin-bottom:0; }
}

.an-tour-menu h2{
  font-family:var(--font-heading); font-weight:600; font-size:var(--fs-lg);
  color:var(--color-black); margin:0 0 4px;
}
.an-tour-menu p.sub{ color:var(--color-dark-gray); font-size:var(--fs-sm); margin:0 0 var(--space-4); }

.an-tour-options{ display:flex; flex-direction:column; gap:var(--space-2); }
.an-tour-option{
  display:flex; align-items:center; gap:var(--space-3);
  width:100%; text-align:left; border:1px solid var(--color-light-gray);
  background:var(--color-bg); border-radius:var(--radius-md);
  padding:var(--space-3); cursor:pointer; font-family:var(--font-base);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.an-tour-option:hover{ border-color:var(--tour-accent); background:var(--color-white); }
.an-tour-option .icon-wrap{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--color-white); display:flex; align-items:center; justify-content:center;
  color:var(--tour-accent-dark); border:1px solid var(--color-light-gray);
}
.an-tour-option .icon-wrap .icon{ width:20px; height:20px; }
.an-tour-option strong{ display:block; color:var(--color-black); font-size:var(--fs-md); font-weight:500; }
.an-tour-option span.desc{ display:block; color:var(--color-dark-gray); font-size:var(--fs-xs); margin-top:2px; }

.an-tour-menu-close{
  margin-top:var(--space-3); width:100%; text-align:center;
  background:none; border:none; color:var(--color-dark-gray);
  font-size:var(--fs-sm); padding:var(--space-2); cursor:pointer;
}
.an-tour-menu-close:hover{ color:var(--color-black); text-decoration:underline; }

/* ---------- Overlay activo (spotlight + topbar + tooltip) ---------- */
.an-tour-spot{
  position:fixed; z-index:1002; border-radius:10px;
  box-shadow:0 0 0 4000px rgba(8,18,24,.5),
             0 0 0 4px var(--tour-accent),
             0 0 0 8px rgba(0,180,198,.28),
             0 0 26px 4px rgba(0,180,198,.65);
  transition:top var(--dur-base) var(--ease-out), left var(--dur-base) var(--ease-out),
             width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out),
             opacity var(--dur-fast) linear;
  pointer-events:none;
  animation:an-tour-pulse 1.8s ease-in-out infinite;
}
.an-tour-spot.is-hidden{ opacity:0; animation:none; }

@keyframes an-tour-pulse{
  0%, 100%{
    box-shadow:0 0 0 4000px rgba(8,18,24,.5), 0 0 0 4px var(--tour-accent),
               0 0 0 8px rgba(0,180,198,.28), 0 0 26px 4px rgba(0,180,198,.65);
  }
  50%{
    box-shadow:0 0 0 4000px rgba(8,18,24,.5), 0 0 0 4px var(--tour-accent),
               0 0 0 11px rgba(0,180,198,.16), 0 0 34px 8px rgba(0,180,198,.4);
  }
}
@media (prefers-reduced-motion:reduce){
  .an-tour-spot{ animation:none; }
}

.an-tour-topbar{
  position:fixed; top:0; left:0; right:0; z-index:1004;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  background:var(--tour-ink); color:var(--color-white);
  padding:9px var(--space-4); font-family:var(--font-base); font-size:13px;
}
.an-tour-topbar .track-label{ display:flex; align-items:center; gap:8px; opacity:.9; min-width:0; flex:1 1 auto; }
.an-tour-topbar .track-label .icon{ flex:none; color:var(--tour-accent); width:16px; height:16px; }
.an-tour-topbar .track-label b{
  color:var(--color-white); font-weight:500; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.an-tour-topbar .progress-bar{
  position:absolute; left:0; bottom:0; height:2px; background:var(--tour-accent);
  transition:width var(--dur-base) var(--ease-out);
}
.an-tour-exit{
  background:none; border:1px solid rgba(255,255,255,.35); color:var(--color-white);
  border-radius:var(--radius-pill); padding:5px 12px; font-size:12px;
  cursor:pointer; display:flex; align-items:center; gap:6px; flex:none;
}
.an-tour-exit:hover{ background:rgba(255,255,255,.14); }
.an-tour-exit .icon{ width:14px; height:14px; }
@media (max-width:768px){
  .an-tour-exit span.exit-label{ display:none; }
  .an-tour-exit{ padding:6px 8px; }
}

/* ---------- Cartel flotante (modo "near": ancla junto al elemento) ---------- */
.an-tour-tip{
  position:fixed; z-index:1005; width:320px; max-width:calc(100vw - 24px);
  background:var(--color-white); border-radius:var(--radius-md);
  box-shadow:var(--shadow-popover);
  padding:var(--space-3) var(--space-4);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
             top var(--dur-base) var(--ease-out), left var(--dur-base) var(--ease-out);
  max-height:min(46vh, 340px); overflow-y:auto;
}
.an-tour-tip.is-visible{ opacity:1; transform:translateY(0); }
.an-tour-tip.is-centered{ left:50%; top:50%; transform:translate(-50%,-50%); }
.an-tour-tip.is-centered.is-visible{ transform:translate(-50%,-50%); }

/* ---------- Modo "hoja": docka abajo, nunca tapa el elemento resaltado ---------- */
.an-tour-tip.is-sheet{
  left:0; right:0; bottom:0; top:auto; width:auto; max-width:none;
  border-radius:16px 16px 0 0; max-height:30vh;
  transform:translateY(100%);
  padding:10px var(--space-4) calc(10px + env(safe-area-inset-bottom, 0px));
}
/* En mobile el sitio tiene su propia barra de navegación fija abajo
   (.bottom-nav, --bottomnav-h): la hoja del tour se acopla arriba de esa
   barra en vez de taparla, para que siga siendo usable durante el tour. */
@media (max-width:768px){
  .an-tour-tip.is-sheet{
    bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    border-radius:16px 16px 0 0;
    padding:10px var(--space-4);
    box-shadow:0 -4px 20px rgba(0,0,0,.12);
  }
}
.an-tour-tip.is-sheet h3{ font-size:14px; }
.an-tour-tip.is-sheet p{
  font-size:13px; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; overflow:hidden;
}
.an-tour-tip.is-sheet .an-tour-note{ padding:6px 9px; font-size:11.5px; }
.an-tour-tip.is-sheet.is-visible{ transform:translateY(0); }
.an-tour-tip.is-sheet::before{
  content:""; display:block; width:36px; height:4px; border-radius:2px;
  background:var(--color-light-gray); margin:0 auto 10px;
}

.an-tour-tip .step-count{
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--tour-accent-dark); margin-bottom:4px; display:block;
}
.an-tour-tip h3{
  font-family:var(--font-heading); font-weight:600; font-size:15px;
  color:var(--color-black); margin:0 0 4px; text-wrap:balance;
}
.an-tour-tip p{ font-size:13.5px; color:var(--color-dark-gray); margin:0 0 var(--space-2); line-height:1.48; }
.an-tour-tip p:last-of-type{ margin-bottom:var(--space-2); }
.an-tour-tip .an-tour-note{
  background:var(--color-warning-bg); border-radius:8px; padding:7px 10px;
  font-size:12px; color:var(--color-dark-gray); margin:0 0 var(--space-2);
}

.an-tour-tip-actions{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; }
.an-tour-tip-actions .left{ display:flex; gap:4px; }
.an-tour-nav-btn{
  border:none; border-radius:var(--radius-pill); padding:7px 13px;
  font-family:var(--font-base); font-size:13px; font-weight:500; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.an-tour-nav-btn.primary{ background:var(--tour-accent-dark); color:var(--color-white); }
.an-tour-nav-btn.primary:hover{ background:var(--tour-accent); color:var(--tour-ink); }
.an-tour-nav-btn.ghost{ background:var(--color-bg); color:var(--color-dark-gray); }
.an-tour-nav-btn.ghost:hover{ background:var(--color-light-gray); }
.an-tour-nav-btn.link{ background:none; color:var(--color-dark-gray); padding:7px 4px; text-decoration:underline; }
.an-tour-nav-btn.link:hover{ color:var(--color-black); }
.an-tour-nav-btn:disabled{ opacity:.4; cursor:default; }

.an-tour-extra-actions{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-2); }

@media (prefers-reduced-motion:reduce){
  .an-tour-spot, .an-tour-tip, .an-tour-launcher, .an-tour-menu, .an-tour-menu-backdrop{ transition:none !important; }
}