/**
 * Header — TShop
 * Migrado desde Header.tsx (Framer Motion) a CSS puro donde es posible.
 * El shrink-on-scroll usa una custom property (--header-scroll) que header.js
 * actualiza vía rAF; CSS solo interpola y anima con transition/clamp.
 */

:root {
  /* header.js escribe este valor (0→1) en cada frame de scroll vía rAF.
       CSS interpola con calc(); evita reimplementar useTransform con JS. */
  --header-scroll: 0;
  /* Ancho del header encogido por rangos: auditoría 2026-07 midió overflow
       de hasta 168px con 60% fijo en pantallas medianas. El contenido solo
       cabe al 60% desde 1440px. */
  --header-shrink-width: 60%;
  --header-shrink-top: 12px;
}

@media (max-width: 1439px) {
  :root {
    --header-shrink-width: 80%;
  }
}

@media (max-width: 1023px) {
  :root {
    --header-shrink-width: 92%;
    --header-shrink-top: 8px;
  }
}

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  margin-inline: auto;

  width: calc(
    100% - (100% - var(--header-shrink-width)) * var(--header-scroll)
  );
  border: calc(var(--header-scroll) * 1px) solid var(--outline);
  border-radius: calc(var(--header-scroll) * 24px);
  top: calc(var(--header-scroll) * var(--header-shrink-top));

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--on-surface);
  /* Piso de alpha 0.35: sin scroll el fondo era 100% transparente y los
       links teal quedaban sobre heros teal sin contraste garantizado. */
  background-color: rgb(
    var(--surface-container-lowest-rgb) /
      calc(0.35 + var(--header-scroll) * 0.35)
  );

  /* La transition suaviza saltos de resize/orientationchange; el scroll en
       sí ya llega interpolado por header.js, así que no hay animación doble. */
  transition:
    width 0.15s ease-out,
    border-radius 0.15s ease-out,
    top 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.site-header__inner {
  max-width: 1280px;
  margin-inline: auto;
  /* El padding lateral se reduce junto con el shrink para que el contenido
       quepa en el header encogido. */
  padding: 0.4rem calc(2rem - var(--header-scroll) * 1.25rem);
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
}

/* Brand */
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.site-header__logo-buildup {
  position: relative;
  display: flex;
  align-items: center;
  width: 4rem;
  height: 2.5rem;
}

.site-header__logo-ring,
.site-header__logo-brain {
  position: absolute;
}

.site-header__logo-ring {
  left: 2rem;
  top: 0.05rem;
  width: 2.4rem;
  height: 2.4rem;
  animation: tshop-logo-spin 10s linear infinite;
}

.site-header__logo-brain {
  left: 2.4rem;
  top: 0.5rem;
  width: 1.4rem;
  height: 1.4rem;
}

@keyframes tshop-logo-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__logo-ring {
    animation: none;
  }
}

.site-header__title {
  font-weight: 700;
  font-family: var(--font-title);
  letter-spacing: -0.05em;
  color: var(--primary);
  font-size: 1.2rem;
}

@media (max-width: 767px) {
  .site-header__title {
    font-size: 1.5rem;
  }
}

/* Nav
   Breakpoint en 1024 (no 768): con tap targets de 44px, logo + 5 links +
   4 iconos no caben honestamente en tablet — ahí manda la hamburguesa. */
.site-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__nav {
    display: flex;
  }
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: calc(1.5rem - var(--header-scroll) * 0.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav-list a {
  font-size: 0.8125rem;
  color: var(--primary);
  text-decoration: none;
  transition:
    color 0.2s ease-out,
    transform 0.15s ease-out;
  display: inline-block;
  padding-block: 0.5rem;
}

.site-header__nav-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-header__nav-list a:hover {
  color: var(--on-primary-container);
  transform: scale(1.05);
}

.site-header__nav-list a:active {
  transform: scale(0.95);
}

/* Actions */
.site-header__actions {
  display: flex;
  align-items: center;
  /* El aire entre acciones ahora lo da el área táctil de cada botón. */
  gap: 0.25rem;
}

.site-header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Tap target: el SVG sigue siendo 16px, pero el área clickable cumple
       los 44×44 recomendados (40×40 en móviles angostos). */
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  transition:
    color 0.2s ease-out,
    background-color 0.2s ease-out,
    transform 0.15s ease-out;
}

@media (max-width: 480px) {
  .site-header__icon-btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  /* En 320-480px, 2rem de padding lateral no cabe (13-20px de overflow
     medidos): base 1rem, que encoge hasta 0.75rem con el scroll. */
  .site-header__inner {
    padding-inline: calc(1rem - var(--header-scroll) * 0.25rem);
  }

  /* El buildup del logo reserva 4rem pero los glifos empiezan en 2rem:
     en angosto se recorta ese espacio muerto reubicando ring y brain. */
  .site-header__logo-buildup {
    width: 2.4rem;
  }

  .site-header__logo-ring {
    left: 0;
  }

  .site-header__logo-brain {
    left: 0.4rem;
  }
}

/*
 * Estados con fondo y color EXPLÍCITOS: Astra pinta button:hover/:focus
 * con fondo teal global (mayor especificidad que la regla base), y el
 * icono —también teal— desaparecía sobre él. El par container/on-container
 * garantiza contraste en light y dark mode.
 */
.site-header__icon-btn:hover,
.site-header__icon-btn:focus,
.site-header__icon-btn:focus-visible {
  background-color: var(--on-primary-container);
  color: var(--primary-container);
}

.site-header__icon-btn:hover {
  transform: scale(1.1);
}

.site-header__icon-btn:active {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
  transform: scale(0.9);
}

.site-header__icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-header__icon-btn--wishlist {
  display: none;
}

@media (min-width: 768px) {
  .site-header__icon-btn--wishlist {
    display: inline-flex;
  }
}

.site-header__badge {
  /* Pegado a la esquina del icono, no del botón (que ahora es más grande). */
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  display: none;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  width: 1.25rem;
  padding: 0;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1;
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.site-header__badge.is-visible {
  display: flex;
}

@media (max-width: 767px) {
  .site-header__badge {
    height: 1rem;
    width: 1rem;
    font-size: 0.625rem;
  }
}

.site-header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 700;
}

.site-header__user--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__user--desktop {
    display: block;
  }
}

.site-header__menu-toggle {
  display: inline-flex;
}

@media (min-width: 1024px) {
  .site-header__menu-toggle {
    display: none;
  }
}

/* Search panel */
.site-header__search {
  border-top: 1px solid var(--outline-variant);
  padding: 1rem 2rem;
  /* Fondo sólido: heredar la transparencia del header dejaba los campos
       flotando sobre el contenido de la página. */
  background-color: var(--surface-container-lowest);
}

.site-header__search[hidden] {
  display: none;
}

.site-header__search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 1280px;
  margin-inline: auto;
}

.site-header__search-input {
  flex: 1;
  border: 1px solid var(--outline);
  border-radius: 0.375rem;
  background-color: var(--background);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.site-header__search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Mobile menu */
.site-header__mobile-menu {
  border-top: 1px solid var(--outline-variant);
  padding: 1rem 2rem;
  background-color: var(--surface-container-lowest);
  /* En landscape de teléfono el menú puede exceder el alto disponible. */
  max-height: calc(100svh - 5rem);
  overflow-y: auto;
}

.site-header__mobile-menu[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__mobile-menu {
    display: none !important;
  }
}

.site-header__mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-header__mobile-menu-list a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition:
    background-color 0.2s ease-out,
    color 0.2s ease-out;
}

.site-header__mobile-menu-list a:hover {
  background-color: var(--surface-container-high);
  color: var(--on-surface);
}

.site-header__user--mobile {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--outline-variant);
}

.site-header__user--mobile a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
}