/* TIC2026 header — RUTA 2.0 v2.2 — 2026-07-13  (bloque b / OP-B)
   Re-skin CLARO del header REAL (markup tdc-header-* + tdc-tm-* + buscadorkits + ps_mainmenu).
   NO redefine tokens (viven en tic2026-tokens.css). NO edita tdc-megamenu.css (solo lo re-tema).
   Solo tic2026 (Trekktic, shop 6): este fichero no lo carga el tema viejo -> sin riesgo cross-shop.
   Carga la ULTIMA (link en header.tpl, despues del critical inline y de overrides) -> gana el cascade;
   se usa prefijo `body ` + !important puntual para batir reglas heredadas con !important.
   Cabecera ESTATICA en el tema real (js-sticky-header solo mide altura para scroll-padding);
   por eso la roadline se ancla al borde superior y se revela con body.scrolled: nunca flota. */

/* ---------- Topbar de claims: .tdc-header-top (mockup L127-145) ---------- */
body .tdc-header-top{
  background:#fff;
  border-bottom:1px solid rgba(13,19,34,.07);
  color:var(--ink-soft);
  font-size:12.5px;
}
body .tdc-htop-item,
body .tdc-htop-link{color:var(--ink-soft)!important;transition:color var(--d-fast) ease}
body .tdc-htop-item strong{color:var(--ink)}
body .tdc-htop-item .material-icons,
body .tdc-htop-link .material-icons{color:var(--accent)}
@media (hover:hover){
  body .tdc-header-top__right .tdc-htop-link:hover{color:var(--ink)!important}
}

/* ---------- Fila principal: logo + buscador + iconos: .tdc-header-mid (mockup L146-197) ---------- */
body .tdc-header-mid{
  background:#fff;
  border-bottom:1px solid rgba(13,19,34,.06);
  transition:box-shadow var(--d-base) ease,padding var(--d-base) var(--e-out);
}
/* compactacion al scroll (contrato motion: body.scrolled a >80px).
   En el tema real la cabecera es estatica y ya salio de pantalla, asi que no molesta;
   se conserva por contrato y por si en el futuro la cabecera pasa a fija. */
body.scrolled .tdc-header-mid{box-shadow:0 10px 30px rgba(13,19,34,.10)}
body .tdc-header-mid__logo{transition:transform var(--d-base) var(--e-settle)}
body.scrolled .tdc-header-mid__logo{transform:scale(.94)}

/* Buscador (buscadorkits): caja clara + anillo de foco del acento (mockup L168-181) */
body .tdc-header-mid__search .buscador_barra_form{
  border:1.5px solid #E2E7F1!important;
  border-radius:13px!important;
  background:#F2F4F9!important;
  transition:border-color var(--d-fast) ease,box-shadow var(--d-base) var(--e-settle),background-color var(--d-fast) ease;
}
body .tdc-header-mid__search .buscador_barra_form:focus-within{
  border-color:var(--accent)!important;
  background:#fff!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
}
body .tdc-header-mid__search .buscador_input_busqueda{background:transparent!important;color:var(--ink)}
body .tdc-header-mid__search .buscador_input_busqueda::placeholder{color:#8C97AE}
/* boton buscar con el acento del shop (gradiente coherente con .btn--primary) */
body .tdc-header-mid__search .buscador_boton_buscar,
body .tdc-header-mid__search .buscador_barra_form button{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark))!important;
  border-color:transparent!important;
  color:var(--on-accent)!important;
}

/* Contador del carrito = pip del acento (mockup .count-pip L190-197) */
body .tdc-htop-cart-badge{
  background:var(--accent);
  color:var(--on-accent);
  font-weight:800;
}
body .tdc-htop-cart-badge.bump{animation:tic26PipBump .55s var(--e-settle)}
@keyframes tic26PipBump{0%{transform:scale(1)}35%{transform:scale(1.55)}100%{transform:scale(1)}}

/* Burger movil con el acento del shop */
body .tdc-mm-burger-top{color:var(--accent)}

/* ---------- Banda de menu CLARA: .tdc-header-menu + tdc-tm-* (mockup L198-229) ----------
   El critical inline pinta la banda con el color del shop (.tdc-header-menu{background:var(--tdc-primary)})
   y los enlaces en blanco (.tdc-header-menu a{color:#fff!important}). Aqui se re-tema a claro.
   Se acota a desktop: en movil tdc-megamenu.css colapsa la banda (mayor especificidad) y no interferimos. */
@media (min-width:992px){
  body .tdc-header-menu{
    background:#fff!important;
    color:var(--ink)!important;
    border-top:1px solid rgba(13,19,34,.07);
    border-bottom:1px solid rgba(13,19,34,.07);
    box-shadow:none!important;
  }
  /* enlaces top-level oscuros (bate .tdc-header-menu a{color:#fff!important}) */
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-link,
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-toggle{
    color:var(--ink-soft)!important;
    font-weight:800;
    letter-spacing:.06em;
  }
  /* hover/abierto: fondo tinte del acento + texto acento
     (bate el .tdc-tm-item:hover{background:rgba(0,0,0,.18)} + color:#fff del megamenu) */
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item:hover,
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item.is-open{
    background:color-mix(in srgb,var(--accent) 8%,#fff)!important;
  }
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item:hover > .tdc-tm-row > .tdc-tm-link,
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item:hover > .tdc-tm-row > .tdc-tm-toggle,
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item.is-open > .tdc-tm-row > .tdc-tm-link,
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item.is-open > .tdc-tm-row > .tdc-tm-toggle{
    color:var(--accent)!important;
  }
  /* subrayado del item actual con el acento */
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item.is-current > .tdc-tm-row > .tdc-tm-link::after{
    background:var(--accent)!important;
  }
  /* mega-panel: acento del shop (arregla el fallback rojo #c9252d por --tudetic-accent no definido) */
  body .tdc-header-menu .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-panel{
    border-top-color:var(--accent)!important;
  }
  body .tdc-header-menu .tdc-tm-nav--desktop .tdc-tm-list--d1 > .tdc-tm-item.has-children > .tdc-tm-row > .tdc-tm-link{
    border-bottom-color:var(--accent)!important;
  }
  body .tdc-header-menu .tdc-tm-nav--desktop .tdc-tm-list--d1 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-link:hover,
  body .tdc-header-menu .tdc-tm-nav--desktop .tdc-tm-list--d2 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-link:hover{
    color:var(--accent)!important;
  }
}

/* ---------- Linea-carretera: progreso de scroll (mockup L244-266, adaptada a cabecera estatica) ----------
   Cabecera real = estatica (scroll away). Un fixed a top:var(--hdh) flotaria a media pantalla -> molestaria.
   Solucion: barra de progreso anclada al borde superior del viewport, INVISIBLE por defecto y revelada solo
   con body.scrolled (que pone motion.js). Sin JS -> body.scrolled nunca se anade -> roadline 100% invisible.
   El relleno (#roadFill) lo mueve motion.js; sin JS queda estatico en scaleX(0). */
.roadline{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:69;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--d-base) var(--e-out);
  background:repeating-linear-gradient(90deg,rgba(19,26,42,.14) 0 26px,transparent 26px 44px) center/100% 2px no-repeat;
}
body.scrolled .roadline{opacity:1}
.roadline-fill{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent));
  transform-origin:left center;
  transform:scaleX(0);
}
.roadline-tip{
  position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent),0 0 14px var(--accent);
  opacity:0;
  transition:opacity var(--d-base) ease;
}

/* ---------- Reduced motion REAL ---------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .roadline-fill{transform:scaleX(0)!important;animation:none!important}
  .roadline-tip{opacity:0!important}
  body .tdc-htop-cart-badge.bump{animation:none!important}
  body .tdc-header-mid__logo,
  body .tdc-header-mid{transition:none!important}
}