/* TIC2026 rail — RUTA 2.0 v2.2 «RODADA» — carril TIENDAS (bloque g) — 2026-07-13
   Restyle del selector de tiendas (modulo tudetic_storeswitcher) para hummingbird-tic2026.
   Estilo puro: los ganchos JS (#tudetic-storeswitcher/#tdss-rail/#tdss-tab/#tdss-panel/
   #tdss-overlay + .is-open/.is-pinned + [hidden]) los sigue moviendo views/js/storeswitcher.js
   del modulo (escritorio). El FAB + bottom-sheet (movil) los cablea el guard inline del drawer.
   Solo transform/opacity/filter/visibility se animan. prefers-reduced-motion real al final. */

.tic26-ss{font-family:inherit;line-height:normal}
.tic26-ss *{box-sizing:border-box}

/* ---------- Overlay (solo cuando el panel esta FIJADO) ---------- */
.tic26-ss__overlay{
  position:fixed;inset:0;z-index:9990;
  background:rgba(9,13,24,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--d-base) ease;
}
#tudetic-storeswitcher.is-pinned .tic26-ss__overlay{opacity:1;pointer-events:auto}

/* ---------- Carril (borde derecho, centrado vertical) ---------- */
.tic26-rail{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:9995}

/* pestaña vertical "TIENDAS" */
.tic26-rail__tab{
  display:block;position:relative;border:0;cursor:pointer;appearance:none;
  writing-mode:vertical-rl;
  background:var(--header);color:#fff;
  font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  padding:17px 9px 17px 13px;border-radius:12px 0 0 12px;
  box-shadow:-4px 0 18px rgba(6,10,20,.3);
  transition:background-color var(--d-fast) ease,padding var(--d-fast) var(--e-out),opacity var(--d-fast) ease;
}
.tic26-rail__tab::before{
  content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;border-radius:2px;
  background:repeating-linear-gradient(var(--accent) 0 8px,transparent 8px 14px);
}
.tic26-rail__tablabel{display:block}
@media (hover:hover){.tic26-rail__tab:hover{background:var(--accent);padding-left:17px}}
.tic26-rail__tab:focus-visible{outline:none;box-shadow:-4px 0 18px rgba(6,10,20,.3),0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
#tudetic-storeswitcher.is-open .tic26-rail__tab{opacity:0;pointer-events:none}

/* panel: muelle + banking al entrar (via keyframes tic26RailIn) */
.tic26-rail__panel{
  position:absolute;top:50%;right:10px;
  transform:translate(calc(100% + 22px),-50%);
  width:min(330px,86vw);max-height:min(600px,84vh);overflow:auto;
  background:var(--card,#fff);border-radius:18px;box-shadow:var(--shadow-2);
  padding:18px;
  visibility:hidden;
  transition:transform var(--d-base) var(--e-travel),visibility 0s linear var(--d-base);
}
#tudetic-storeswitcher.is-open .tic26-rail__panel{
  visibility:visible;transform:translate(0,-50%);
  animation:tic26RailIn var(--d-travel) var(--e-settle) both;
  transition:none;
}
@keyframes tic26RailIn{
  0%{transform:translate(calc(100% + 22px),-50%) rotate(0)}
  55%{transform:translate(-7px,-50%) rotate(-1.6deg)}
  100%{transform:translate(0,-50%) rotate(0)}
}

.tic26-rail__title,.tic26-sheet__title{
  font-size:15px;font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);
}
.tic26-rail__title::before,.tic26-sheet__title::before{content:"/ ";color:var(--accent);font-style:normal}
.tic26-rail__list{display:grid;gap:9px}
.tic26-rail__foot{
  display:block;text-align:center;font-size:12px;font-weight:600;color:var(--ink-soft);
  text-decoration:none;padding:12px 6px 2px;margin-top:9px;border-top:1px solid var(--line);
  transition:color var(--d-fast) ease;
}
@media (hover:hover){.tic26-rail__foot:hover{color:var(--accent-dark)}}

/* ---------- Tarjeta de tienda (compartida panel + sheet) ---------- */
.tic26-card{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1.5px solid var(--line);border-radius:13px;padding:9px 12px;background:var(--card,#fff);
  color:var(--ink);text-decoration:none;cursor:pointer;
  transition:border-color var(--d-fast) ease,transform var(--d-base) var(--e-settle),box-shadow var(--d-fast) ease;
}
.tic26-card:active{transform:scale(.97)}
@media (hover:hover){.tic26-card:hover{border-color:var(--shop-c,var(--accent));transform:translateX(-4px)}}
.tic26-card.is-on{
  border-color:var(--shop-c,var(--accent));cursor:default;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--shop-c,var(--accent)) 25%,transparent);
}
/* chip tinta: los PNG shop-* son wordmark blanco -> fondo oscuro para que se vean */
.tic26-card__logo{
  width:96px;height:34px;flex:none;display:grid;place-items:center;
  background:var(--header);border-radius:8px;overflow:hidden;
}
.tic26-card__logo img{max-height:26px;max-width:86px;object-fit:contain;display:block}
.tic26-card__wm{
  font-weight:800;font-size:15px;line-height:1;letter-spacing:-.02em;color:#fff;
  padding:0 6px;max-width:86px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tic26-card__wm-tic{color:var(--shop-c,var(--accent))}
.tic26-card__name{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  font-size:13.5px;font-weight:700;color:var(--ink);
}
.tic26-card__tag{font-size:11px;font-weight:500;font-style:normal;color:var(--ink-soft)}
.tic26-card__here{
  font-size:10px;font-weight:800;font-style:normal;text-transform:uppercase;letter-spacing:.04em;
  color:var(--shop-c,var(--accent));
}
.tic26-card__ring{
  width:15px;height:15px;border-radius:50%;flex:none;background:var(--shop-c,var(--accent));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--shop-c,var(--accent)) 25%,transparent);
}
/* entrada escalonada de tarjetas al abrir panel/sheet */
#tudetic-storeswitcher.is-open .tic26-rail__panel .tic26-card,
.tic26-sheet.is-open .tic26-card{
  animation:tic26ShopIn .4s var(--e-settle) both;
  animation-delay:calc(120ms + var(--i,0)*var(--stagger));
}
@keyframes tic26ShopIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

/* ---------- FAB movil (encima del boton WhatsApp .tic26-wa) ---------- */
.tic26-fab{
  display:none;position:fixed;right:16px;bottom:84px;z-index:9996;
  width:54px;height:54px;border-radius:50%;
  background:var(--header);color:#fff;border:2.5px solid var(--accent);
  place-items:center;overflow:hidden;cursor:pointer;appearance:none;
  box-shadow:var(--shadow-2);
  transition:transform var(--d-base) var(--e-settle);
}
.tic26-fab svg{width:26px;height:26px}
.tic26-fab:active{transform:scale(.92)}
@media (hover:hover){.tic26-fab:hover{transform:scale(1.07)}}
.tic26-fab:focus-visible{outline:none;box-shadow:var(--shadow-2),0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}

/* ---------- Bottom-sheet movil ---------- */
.tic26-sheet{
  position:fixed;inset:auto 0 0 0;z-index:9999;
  background:var(--card,#fff);border-radius:20px 20px 0 0;
  box-shadow:0 -14px 44px rgba(6,10,20,.3);
  padding:10px 17px calc(18px + env(safe-area-inset-bottom,0px));
  max-height:80vh;overflow:auto;
  transform:translateY(105%);
  transition:transform var(--d-base) var(--e-travel);
}
.tic26-sheet.is-open{transform:none;transition:transform var(--d-travel) var(--e-settle)}
.tic26-sheet__back{
  position:fixed;inset:0;z-index:9998;
  background:rgba(9,13,24,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--d-base) ease;
}
.tic26-sheet__back.is-open{opacity:1}
.tic26-sheet__handle{display:block;width:44px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 13px}
.tic26-sheet .tic26-rail__list{margin-bottom:4px}

/* ---------- Conmutacion escritorio <-> movil ---------- */
@media (max-width:1000px){
  .tic26-rail{display:none}
  .tic26-ss__overlay{display:none}
  .tic26-fab{display:grid}
}
@media (max-width:720px){
  .tic26-fab{right:14px;bottom:80px;width:50px;height:50px}
  .tic26-fab svg{width:24px;height:24px}
}

/* ---------- Reduced motion (REAL en produccion) ---------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .tic26-rail__tab,.tic26-rail__panel,.tic26-card,.tic26-ss__overlay,
  .tic26-fab,.tic26-sheet,.tic26-sheet__back{animation:none !important;transition:none !important}
  #tudetic-storeswitcher.is-open .tic26-rail__panel{transform:translate(0,-50%)}
  .tic26-sheet.is-open{transform:none}
}

/* ---------- Tudetic 2026-07-13 (QA-F): coordinacion con WhatsApp en el carrito ----------
   En body#cart el boton WhatsApp sube a bottom:88px (tic2026-wa.css) e invadia la zona
   del FAB del carril (bottom:80px). El FAB se eleva por encima del WhatsApp. */
@media (max-width:1000px){
  body#cart .tic26-fab{bottom:148px}
}

/* ---------- Tudetic 2026-07-13 r6 (pantallazo usuario): ficha movil ----------
   En body#product la barra sticky de compra eleva el WhatsApp a bottom:96px
   (54px de alto -> ocupa 96-150px) y pisaba al FAB del carril (bottom:80px).
   El FAB se eleva por encima del WhatsApp, como ya se hizo en el carrito. */
@media (max-width:1000px){
  body#product .tic26-fab{bottom:160px}
}