/*
  styles.css (clean start)
  Strategy:
  1) Keep your original file as styles.legacy.css.
  2) Import legacy so nothing breaks.
  3) Override the rules that were causing layout instability and cross-page conflicts.
  4) Use the same tokens/typography as the auth pages so Index can converge visually.
*/

@import url('styles.legacy.css');

/* === Design tokens (aligned with Login/Registro) === */
:root {
  --primary: #3498db;
  --primary-dark: #3a0ca3;
  --secondary: #f72585;
  --dark: #212529;
  --light: #f8f9fa;
  --gray: #6c757d;
  --success: #4cc9f0;
  --warning: #f8961e;
  --danger: #ef233c;

  --bg: #f5f7ff;
  --card: #ffffff;
  --border: #e6e6e6;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* === Safe baseline === */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  background-color: var(--bg);
  color: var(--dark);
  overflow-x: hidden;
}

/*
  IMPORTANT: Do NOT style every button globally.
  Legacy had a plain `button { ... }` that leaks into everything.
  We neutralize it here and rely on component classes (.btn-primary, .cart-button, .carousel-btn, etc).

  legacy's button{} also sets margin-top:20px and padding:10px 10px. Those two
  specifically have caused silent layout bugs 3 times now (theme-toggle sitting
  20px too low, the search button misaligned, banner indicator dots forced to a
  22px min-width by their padding) on any button that forgets to reset them
  individually. Reset both here so new buttons don't inherit this by surprise;
  every real component already sets its own margin/padding where it needs it.
*/
button {
  font: inherit;
  margin: 0;
  padding: 0;
}

/* Legacy tambien tenia un `button:hover { background:#2c2c2c; color:white }`
   sin scope, que gana por especificidad sobre cualquier boton que no
   redefina "color" en su propio :hover (filtros, resultados de busqueda,
   chips de categoria, etc.) dejando el texto blanco sobre fondos claros
   e ilegible. Ningun boton "plano" del sitio depende de ese hover generico
   (todos usan clases propias), asi que lo neutralizamos aqui.*/
button:hover {
  background-color: unset;
  color: unset;
}

/* === Header (Index) — stable grid layout === */
.header {
  background-color: #333;
  color: #f4f4f9;
  padding: 10px 16px;
  border-bottom: 4px solid var(--primary);

  /* Flex en vez de grid con 2 columnas "1fr" iguales a los lados: forzar
     esas columnas a medir lo mismo centraba la busqueda en el ancho total
     del header, pero el logo (angosto) y el bloque de acciones (ancho:
     wishlist+carrito+perfil) no miden lo mismo, asi que todo el sobrante
     de esa igualacion caia del lado del logo (hueco grande) y casi nada
     del lado de las acciones. La busqueda crece pegada al logo (solo el
     gap base) y .header-actions con margin-left:auto se queda con
     cualquier sobrante, asi el hueco visible (si lo hay) cae del lado de
     los iconos, no entre el logo y la busqueda. */
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.header-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu-icon {
  background: transparent;
  border: 0;
  color: #f4f4f9;
  font-size: 22px;
  cursor: pointer;
}

.header #logo {
  max-height: 110px;
  max-width: 380px;
  width: auto;
  height: auto;
  margin: 0;
  cursor: pointer;
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions > * {
  align-self: center;
}


.header-search {
  flex: 1 1 380px;
  max-width: min(50vw, 1160px);
  min-width: 0;
  /* En pantallas anchas, cuando ya llego a max-width, este margen se
     lleva todo el espacio sobrante repartido en partes iguales a cada
     lado (centrando la barra entre el logo y .header-actions) en vez
     de que ".header-actions" se lo lleve todo empujandose a la derecha.
     Cuando no hay sobrante (flex-grow: 1 todavia esta llenando el
     espacio disponible, resoluciones normales) estos margenes valen 0
     y no cambian nada. */
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 0 14px;
  height: 46px;
}

.header-search input {
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
}

/* Selector de hijo directo: el boton de buscar es hijo directo del form,
   los botones de sugerencias (.search-result) van dentro de #global-search-results
   y no deben heredar este estilo.
   Antes usaba position:absolute + translateY(-50%) para centrarlo, una
   formula fragil que se desalineaba cada vez que la altura del buscador
   cambiaba (responsive). Al ser un hijo flex normal, "align-items: center"
   del padre lo centra siempre, sin importar la altura. */
.header-search > button {
  border: 0;
  background: #fff;
  color: var(--dark);
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-left: 8px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.header-search > button i {
  display: block;
  line-height: 1;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  overflow: hidden;
  display: none;
  z-index: 5;
}

.search-results.is-open {
  display: block;
}

.search-result {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--dark);
  text-align: left;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  align-items: center;
}

/* Un "button:hover{color:white}" global (legacy) deja el texto illegible
   sobre el fondo claro del hover; lo pisamos explicitamente aqui. */
.search-result:hover,
.search-result.is-active {
  background: #f6f7f9;
  color: var(--dark);
}

.search-result .result-title mark {
  background: rgba(11,102,255,.15);
  color: #0b66ff;
  border-radius: 3px;
  padding: 0 1px;
}

.search-empty {
  padding: 14px 12px;
  color: var(--gray);
  font-size: 14px;
  text-align: center;
}

.search-result .result-title {
  font-weight: 600;
}

.search-result .result-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.search-result .result-thumb {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: #f6f7f9;
  border-radius: 8px;
}

.search-result .result-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.search-result .result-price {
  color: var(--gray);
  font-size: 13px;
}

/* Remove underline from product links (home + carousels) */
.product a,
.product-info a,
.product-carousel a,
.recommended-product a,
.producto a{
  text-decoration: none;
  color: inherit;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Cart button + badge (remove legacy margin hacks) */
.header .cart-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  height: 46px;
  width: 46px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.header .cart-button:hover {
  background-color: #0056b3;
}

.header .cart-count.is-zero,
.header .wishlist-count.is-zero {
  display: none;
}

.header .cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: red;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 999px;
  padding: 3px 7px;
  transform: none;
  margin: 0;
}

/* Login button in header */
.header .login-button {
  background: linear-gradient(to right, var(--primary), var(--primary-dark));
  color: #fff;
  text-decoration: none;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.header .login-button:hover {
  filter: brightness(1.05);
}

/* Perfil de usuario logueado + boton de cerrar sesion */
.header .user-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 8px 0 14px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--dark);
  font-weight: 600;
  white-space: nowrap;
}

.header .user-profile i.fa-user-circle {
  font-size: 18px;
  color: var(--primary);
}

.header .user-profile #username-display {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* legacy.css trae ".user-profile span{color:#333}" (gris oscuro fijo);
     sin esto el nombre queda casi ilegible en modo oscuro. El selector por
     id gana por especificidad sin importar el orden de carga. */
  color: var(--dark);
}

.header .logout-btn {
  background: none;
  color: var(--gray);
  cursor: pointer;
  font-size: 15px;
  height: 32px;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.header .logout-btn:hover {
  background: rgba(239, 35, 60, 0.1);
  color: #ef233c;
}

.header .orders-btn {
  background: none;
  color: var(--gray);
  cursor: pointer;
  font-size: 15px;
  height: 32px;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.header .orders-btn:hover {
  background: rgba(28, 92, 255, 0.1);
  color: var(--primary);
}

/* El bloque "responsive header" que vivia aca (media max-width:768px,
   con grid-template-columns:"48px 1fr") quedo completamente pisado por
   un bloque mas especifico/completo mas abajo en este archivo (buscar
   "display:grid" dentro de @media max-width:800px): mismas propiedades,
   valores mas refinados, y ese bloque ya es autosuficiente (no depende
   de este para activar el modo grid). Se elimina para no repetir la
   confusion de tener dos reglas para lo mismo en breakpoints distintos. */

/* === Banner: marco premium, independiente de las imagenes que se usen === */
.banner {
  position: relative;
  padding: 0;
  width: min(2548px, 100%);
  aspect-ratio: 2548 / 964;
  margin: 16px auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}

.banner-slider,
.banner .slide {
  height: 100%;
}

.banner-slider {
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}

.banner .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flechas: circulo con vidrio esmerilado en vez del cuadrado plano viejo */
.banner .prev,
.banner .next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20,20,24,.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  transition: transform 160ms ease, background 160ms ease;
}

.banner .prev:hover,
.banner .next:hover {
  background: rgba(20,20,24,.58);
  transform: translateY(-50%) scale(1.08);
}

.banner .prev { left: 16px; }
.banner .next { right: 16px; }

/* Indicadores: puntos mas grandes; el activo se estira como pildora */
.banner .indicators {
  bottom: 16px;
  gap: 8px;
}

.banner .indicators button {
  width: 8px;
  height: 8px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  transition: width 220ms ease, background 220ms ease;
}

.banner .indicators button.active {
  width: 26px;
  background: #fff;
}

.banner .indicators button:hover {
  background: rgba(255,255,255,.85);
}

@media (max-width: 640px){
  .banner{
    margin: 10px auto;
    border-radius: 14px;
  }
  .banner .prev,
  .banner .next{
    width: 26px;
    height: 26px;
    font-size: 10px;
    border-width: 1px;
  }
  .banner .prev{ left: 6px; }
  .banner .next{ right: 6px; }
  .banner .indicators{
    bottom: 8px;
    gap: 5px;
  }
  .banner .indicators button{
    width: 6px;
    height: 6px;
  }
  .banner .indicators button.active{
    width: 16px;
  }
}

/* === Categorias destacadas (home) === */
.category-tiles{
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.category-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--dark);
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.category-tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border-color: rgba(52,152,219,.35);
}

.category-tile-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* Progresion tonal dentro de la misma familia azul->morado de marca
   (los mismos dos colores del logo/login: --primary y --primary-dark),
   en vez de un color distinto por tarjeta. Da una sensacion de set
   coherente en lugar de un paquete de iconos de stock. */
.category-tile:nth-child(1) .category-tile-icon{
  background: linear-gradient(135deg, #3498db, #357cd0);
}
.category-tile:nth-child(2) .category-tile-icon{
  background: linear-gradient(135deg, #357cd0, #3660c5);
}
.category-tile:nth-child(3) .category-tile-icon{
  background: linear-gradient(135deg, #3660c5, #3844b9);
}
.category-tile:nth-child(4) .category-tile-icon{
  background: linear-gradient(135deg, #3844b9, var(--primary-dark));
}

/* Avatares de iniciales en los testimonios */
.feedback-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.feedback-meta .feedback-author{
  margin: 0;
}
.feedback-avatar{
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.feedback-card:nth-child(2) .feedback-avatar{
  background: linear-gradient(135deg, var(--secondary), var(--primary-dark));
}
.feedback-card:nth-child(3) .feedback-avatar{
  background: linear-gradient(135deg, var(--success), var(--primary));
}

@media (max-width: 640px){
  .category-tiles{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 12px;
    margin: 14px auto;
  }
  .category-tile{
    padding: 14px 8px;
    font-size: 12.5px;
  }
  .category-tile-icon{
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* Un poco menos de aire que el legacy (60px) para que combine con el
   ritmo de las tarjetas de "Ofertas Especiales" / "Productos Disponibles". */
.comentarios{
  padding: 46px 20px;
}

/* === Make Index sections feel closer to Auth (cards + spacing) === */
section {
  background-color: transparent; /* legacy used a gray block; keep page cleaner */
}

.special-offers,
.available-products,
.feedback-section,
.comments-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin: 24px 24px;
}

/* Keep legacy padding rules inside these sections from breaking layout */
.special-offers,
.available-products,
.feedback-section,
.comments-section {
  padding: 24px;
}

/* Breadcrumb (product pages).
   Antes era un pill chico centrado por "margin:auto" con 22px de margen
   abajo: se veia flotando en medio de mucho espacio en blanco. Ahora ocupa
   el mismo ancho que el resto del contenido (como una barra, no un pill) y
   con margenes verticales mas chicos. */
.product-page .breadcrumb,
.page-productos .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  width: 100%;
  margin: 14px auto;
  padding: 12px 16px;
  max-width: 1200px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.product-page .breadcrumb a,
.page-productos .breadcrumb a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.product-page .breadcrumb a:hover,
.page-productos .breadcrumb a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.product-page .breadcrumb .current,
.page-productos .breadcrumb .current {
  color: var(--dark);
  font-weight: 600;
}

.product-page .breadcrumb span:not(.current),
.page-productos .breadcrumb span:not(.current) {
  color: var(--gray);
  margin: 0 2px;
}

/* Boton volver arriba */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}


.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  filter: brightness(1.05);
}

@media (max-width: 768px) {
  .back-to-top {
    right: 12px;
    bottom: 12px;
    padding: 9px 12px;
  }
}

/* Sidebar + Overlay */
/* Sidebar (estilo tipo Auth, oscuro) */
/* Barra de categorias: colapsable, en flujo normal justo debajo del header */
.category-bar {
  display: grid;
  grid-template-rows: 0fr;
  background: linear-gradient(180deg, rgba(24,24,29,0.97), rgba(18,18,22,0.97));
  color: #f4f4f9;
  transition: grid-template-rows 240ms ease;
  border-bottom: 1px solid rgba(255,255,255,0);
}

.sidebar-open .category-bar {
  grid-template-rows: 1fr;
  border-bottom-color: rgba(255,255,255,0.08);
}

.category-bar-inner {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

.sidebar-open .category-bar-inner {
  padding: 12px 16px;
}

.sidebar-group {
  position: relative;
  margin: 0;
}

.sidebar-toggle,
.category-link {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 18px;
  border-radius: 8px;
  color: #f4f4f9;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 140ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.sidebar-toggle:hover,
.category-link:hover {
  background: rgba(52,152,219,0.16);
  border-color: rgba(52,152,219,0.32);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.20);
}

.sidebar-group.is-open .sidebar-toggle {
  background: rgba(52,152,219,0.22);
  border-color: rgba(52,152,219,0.45);
}

.sidebar-toggle i,
.category-link i {
  width: 18px;
  text-align: center;
  opacity: 0.9;
  color: #6db4ff;
}

.sidebar-toggle .caret {
  font-size: 11px;
  opacity: 0.75;
  transition: transform 200ms ease;
}

.sidebar-group.is-open .sidebar-toggle .caret {
  transform: rotate(180deg);
}

/* Dropdown de subcategorias: position:fixed (posicion calculada por JS en
   sidebar.js) para escapar de cualquier "overflow: hidden" ancestro; asi no
   se recorta y tampoco genera overflow horizontal fantasma en moviles. */
.sidebar-subnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 6px;
  position: fixed;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px;
  background: rgba(26, 26, 31, 0.99);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0ms linear 180ms;
}

/* Flechita que conecta el dropdown con su boton */
.sidebar-subnav::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: rgba(26, 26, 31, 0.99);
  border-left: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.10);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

.sidebar-group.is-open .sidebar-subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease;
}

.sidebar-subnav a {
  padding: 10px 12px;
  border-radius: 10px;
  color: #f4f4f9;
  text-decoration: none;
  font-size: 13.5px;
  text-align: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.sidebar-subnav a:hover {
  background: rgba(52,152,219,0.22);
  border-color: rgba(52,152,219,0.40);
  transform: translateY(-1px);
}

/* Ocultar scrollbar del carrusel (cross-browser) */
.product-carousel,
.carousel-track {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge viejo */
}

.product-carousel::-webkit-scrollbar,
.carousel-track::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}

.product {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Placeholder de imagen rota/faltante (ver IMG_FALLBACK_SRC en Script.js) */
img.img-fallback {
  object-fit: contain !important;
  padding: 12% !important;
  box-sizing: border-box;
}

/* Skeleton de carga: mismo tamano que una card real para que no salte el
   layout cuando llegan los productos de verdad. */
.product.is-skeleton {
  pointer-events: none;
}
.product.is-skeleton:hover {
  transform: none;
  box-shadow: none;
}
.skeleton-block {
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
}
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
.product.is-skeleton .product-media.skeleton-block {
  border-radius: 0;
}
.skeleton-line {
  height: 14px;
  margin: 10px 0;
}
.skeleton-line--title { width: 80%; height: 16px; }
.skeleton-line--price { width: 40%; }
.skeleton-line--btn { width: 100%; height: 36px; margin-top: auto; }

html[data-theme="dark"] .skeleton-block {
  background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .skeleton-block::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

.add-to-cart {
  background: linear-gradient(135deg, #3498db, #1f6fa8);
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.add-to-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(52,152,219,0.35);
}

/* Barra de navegación del carrusel (estilizada) */
.carousel-scrollbar {
  width: 100%;
  height: 10px;
  margin-top: 12px;
  border-radius: 999px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);

  position: relative;
  overflow: hidden;
}

.carousel-thumb {
  height: 100%;
  width: 25%;
  border-radius: 999px;

  background: linear-gradient(135deg, #3498db, #1f6fa8);
  box-shadow: 0 6px 16px rgba(52,152,219,0.30);

  position: absolute;
  left: 0;
  top: 0;

  cursor: grab;
  transition: transform 80ms linear;
}

.carousel-thumb:active {
  cursor: grabbing;
}

/* Opcional: ocultar scrollbar nativa (si tu carrusel usa scroll horizontal) */
.product-carousel,
.carousel-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-carousel::-webkit-scrollbar,
.carousel-track::-webkit-scrollbar {
  display: none;
}

/* === Carrusel base (OBLIGATORIO) === */
.product-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.carousel-track {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: max-content;
  padding: 16px 4px;
}

/* Cada producto debe tener ancho fijo */
.product,
.producto {
  flex: 0 0 260px;   /* ← esto es CLAVE */
  max-width: 260px;
}

.product-carousel.dragging {
  cursor: grabbing;
  user-select: none;
}
.product-carousel {
  cursor: grab;
  display: flex;
  align-items: stretch;
}

.view-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 18px;
  border-radius: 999px;

  font-weight: 600;
  text-decoration: none;

  color: #3498db;
  background: rgba(52,152,219,0.10);
  border: 1px solid rgba(52,152,219,0.35);

  transition: background 160ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.view-more::after {
  content: "→";
  font-size: 1.1em;
}

.view-more:hover {
  background: rgba(52,152,219,0.22);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(52,152,219,0.25);
}

/* ====== Cards de producto: alineación perfecta ====== */

/* Ajusta estos valores una vez y listo */
:root{
  --card-img-h: 332px;     /* altura fija de la zona de imagen */
  --card-title-lines: 2;   /* líneas visibles del título */
  --card-desc-lines: 2;    /* si tienes descripción */
  --card-info-gap: 6px;
  --card-media-pad: 10px;
}

/* Funciona para .product y .producto */
.product, .producto{
  display: flex;
  flex-direction: column;
  height: 100%;            /* permite que todas las cards igualen altura dentro del grid */
  position: relative;
  padding: 0;
}

/* Si tus cards están en un grid/fila, esto ayuda a igualar alturas */
.product-carousel .product,
.product-carousel .producto{
  height: 100%;
}

/* Contenedor de imagen (ventana consistente) */
.product .product-media,
.producto .product-media{
  height: var(--card-img-h);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  padding: var(--card-media-pad);
}

.product .product-media img,
.producto .product-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Carruseles: imagenes con tamaño visual uniforme */
.product-carousel .product-media,
.page-product-detail .recommended-products .product-media{
  height: 332px;
  overflow: hidden;
}

.product-carousel .product-media img,
.page-product-detail .recommended-products .product-media img{
  object-fit: cover;
  object-position: center;
}

/* Fallback si alguna card no trae wrapper */
.product img, .producto img{
  width: 100%;
  height: var(--card-img-h);
  object-fit: contain;
  display: block;
}

/* Bloque de contenido alineado */
.product .info,
.producto .info,
.product .product-info,
.producto .product-info{
  display: flex;
  flex-direction: column;
  flex: 1;                 /* ocupa el resto de la altura de la card */
  gap: var(--card-info-gap);
  padding: 12px 12px 14px;
}

/* price stack removed (revert to original price display) */

/* Título: misma altura visual (line clamp) */
.product h3, .producto h3,
.product .title, .producto .title{
  display: -webkit-box;
  -webkit-line-clamp: var(--card-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.2em * var(--card-title-lines));
  line-height: 1.2;
  margin: 10px 0 6px;
}

/* Si tienes descripción o texto variable, clamp + altura mínima */
.product .desc, .producto .desc{
  display: -webkit-box;
  -webkit-line-clamp: var(--card-desc-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.2em * var(--card-desc-lines));
  line-height: 1.2;
  margin: 0;
}

/* Precio fijo (opcional) */
.product .price, .producto .price{
  margin: 0;
  line-height: 1.1;
}

.product .stock,
.producto .stock{
  margin: 2px 0 0;
  line-height: 1.1;
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
}

.product .stock.is-out,
.producto .stock.is-out{
  color: #e74c3c;
}

.product .original-price,
.producto .original-price{
  margin: 2px 0 0;
  line-height: 1.1;
  min-height: 1em;
}

/* Botón SIEMPRE abajo */
.product .add-to-cart,
.producto .add-to-cart,
.product button,
.producto button{
  margin-top: auto;
}

.add-to-cart[disabled],
.product .add-to-cart[disabled],
.producto .add-to-cart[disabled]{
  cursor: not-allowed;
  opacity: 0.65;
  background: #c7d0db;
  color: #fff;
  box-shadow: none;
}

.stock-message{
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #e74c3c;
}

/* ===== Carrito (Cart.html) ===== */

.cart-page{
  max-width: 1200px;
  margin: 6px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  /* legacy.css le pone background:#fff + shadow + radius a este contenedor;
     redundante con las tarjetas .cart-items/.cart-summary que ya tienen su
     propio fondo, y en modo oscuro ese blanco se quedaba visible detras de
     ellas (en el gap y los bordes). Se anula aqui, no solo en modo oscuro. */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.cart-items, .cart-summary{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
  /* legacy.css le pone "padding-right:20px; border-right:1px solid #f0f0f0"
     a .cart-items, pensado para el layout viejo de 2 columnas sin tarjeta
     propia. Ahora .cart-items ya es una tarjeta con su propio fondo/radius/
     sombra (arriba) y su header/lista ya traen su propio padding, asi que
     ese borde queda como una linea clara de mas siguiendo la esquina
     redondeada (muy visible en modo oscuro). Se anula aqui. */
  border-right: none;
  padding-right: 0;
}

/* legacy.css tiene ADEMAS otro bloque solo para movil (@media max-width:768px)
   que le pone "border-bottom:1px solid #f0f0f0; padding-bottom:30px;
   margin-bottom:30px" a .cart-items (pensado para separar la lista del
   resumen cuando el grid de 2 columnas colapsa a 1). Con .cart-items ya
   siendo su propia tarjeta (arriba) esa linea clara vuelve a aparecer,
   ahora pegada al borde INFERIOR de la tarjeta en vez del derecho, y cada
   .cart-item ya trae su propio padding/borde (linea 1338) asi que el
   padding/margin extra tampoco hacen falta: el gap de ".cart-page" ya
   separa las tarjetas al apilarse. */
.cart-items{
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.cart-header{
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.cart-header h2{
  margin: 0;
  font-size: 18px;
}

.cart-item{
  display: grid;
  grid-template-columns: 92px 1fr 40px;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background 120ms ease;
}

.cart-item:last-child{ border-bottom: 0; }

.cart-item:hover{
  background: rgba(0,123,255,.04);
}

html[data-theme="dark"] .cart-item:hover{
  background: rgba(255,255,255,.03);
}

.cart-item img{
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: #f6f7f9;
  border-radius: 12px;
  display:block;
}

.cart-item-info h3{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.2;
}

.cart-item-info .description{
  margin: 0 0 8px;
  opacity: .75;
  font-size: 13px;
}

.cart-item-info .price{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
}

.cart-item-info .line-total{
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
}

/* Stepper unificado (antes eran 3 cajas sueltas con su propio borde,
   cada una redondeada por separado). */
.quantity-control{
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
}

.quantity-control button{
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  transition: background 120ms ease;
}

.quantity-control button:hover{
  background: rgba(0,0,0,.06);
}

.quantity-control input{
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid rgba(0,0,0,.12);
  border-right: 1px solid rgba(0,0,0,.12);
  text-align: center;
  background: transparent;
  color: var(--dark);
  -moz-appearance: textfield;
}

/* Oculta las flechitas nativas del input numerico (se veian apretadas). */
.quantity-control input::-webkit-inner-spin-button,
.quantity-control input::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.remove-item{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: var(--gray);
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.remove-item:hover{
  background: rgba(239, 35, 60, 0.1);
  border-color: rgba(239, 35, 60, 0.35);
  color: #ef233c;
}

.cart-summary{
  padding: 16px 18px;
  height: fit-content;
  position: sticky;
  top: 18px;
}

.summary-row{
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.summary-row.total{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-weight: 800;
}

.cart-summary .discount{
  color: #27ae60;
  font-weight: 700;
}

.checkout-error{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(231, 76, 60, 0.12);
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
}

/* ":not([hidden])" para no pisar "[hidden]{display:none}" del navegador
   (una regla de autor con "display" en .checkout-error le ganaria a [hidden]
   sin importar la especificidad, porque el origen de la hoja de estilos
   pesa antes que la especificidad en la cascada). */
.checkout-error:not([hidden]){
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.checkout-error-login-btn{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  background: #c0392b;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.checkout-error-login-btn:hover{
  background: #a3271b;
}

#checkout-button{
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, #007bff 0%, #00a1ff 100%);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 18px;
  box-shadow: 0 6px 16px rgba(0, 123, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#checkout-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 123, 255, 0.3);
}

#checkout-button:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#back-to-home{
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, #007bff 0%, #00a1ff 100%);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 18px;
  box-shadow: 0 6px 16px rgba(0, 123, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#back-to-home:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 123, 255, 0.3);
}

.cart-summary #clear-cart{
  width: 100%;
  padding: 12px 16px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: var(--dark);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cart-summary #clear-cart:hover{
  background: #f6f7f9;
  border-color: rgba(0,0,0,.18);
}

.cart-items-list{
  display: flex;
  flex-direction: column;
}

.empty-cart-message{
  text-align: center;
  padding: 28px 16px 32px;
  color: var(--gray);
}

.summary-title{
  margin: 0 0 12px;
  font-size: 16px;
}

@media (max-width: 980px){
  .cart-page{ grid-template-columns: 1fr; }
  .cart-summary{ position: static; }
}

/* ===== Layout general consistente ===== */
.page{
  max-width: 1200px;
  margin: 6px auto;
  padding: 0 16px;
}

/* ===== Productos.html ===== */
.products-page{
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* styles.legacy.css trae "section{ padding:60px 40px; background:#f9f9f9; }"
     por selector de TAG (".products-page" es un <section>). Ninguna otra
     regla de esta hoja pisaba el padding para esta clase, asi que ese
     relleno generico se colaba: 40px de cada lado le comian 80px al ancho
     disponible para ".productos-grid", justo lo suficiente para que en
     tablets (~768-900px) no entrara una 3ra columna y las tarjetas
     quedaran enormes con mucho espacio vacio. Se anula aqui; ".page" ya
     da el margen lateral de la pagina, no hace falta uno extra aca. */
  padding: 0;
  background: transparent;
}

.products-head{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.products-head h1{
  margin: 0;
  font-size: 20px;
}

.products-search{
  min-width: 260px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 12px;
  outline: none;
}

.products-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* responsive */
@media (max-width: 1100px){
  .products-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px){
  .products-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .products-grid{ grid-template-columns: 1fr; }
}

/* ===== Cards consistentes (imagen, texto, botón alineados) ===== */
.products-grid .product,
.products-grid .producto{
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
  height: 100%;
}

.products-grid .product-media,
.products-grid .producto .product-media,
.products-grid .product .product-media{
  height: var(--card-img-h);
  background: #ffffff;
}

.products-grid .product-media img,
.products-grid .product .product-media img,
.products-grid .producto .product-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.products-grid .product .info,
.products-grid .producto .info{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  flex: 1;
}

.products-grid .product h3,
.products-grid .producto h3{
  margin: 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.2em * 2);
}

.products-grid .product .price,
.products-grid .producto .price{
  margin: 0;
  font-weight: 700;
}

.products-grid .product .add-to-cart,
.products-grid .producto .add-to-cart,
.products-grid .product button,
.products-grid .producto button{
  margin-top: auto;
}


/* =====================================================================
   Productos.html (scoped)
   ===================================================================== */

.page-productos .products-page{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.page-productos .products-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-productos .products-head h1{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.page-productos .products-search{
  width: min(360px, 100%);
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 0 12px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  outline: none;
}

.page-productos .products-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-productos .products-filters{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.page-productos .filter-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.page-productos .filter-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.page-productos .filter-btn.active{
  background: #0b66ff;
  color: #fff;
  border-color: transparent;
}

.page-productos .sort-pill{
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.page-productos .sort-pill i{
  opacity: .75;
}

.page-productos .sort-pill span{
  font-weight: 800;
  opacity: .9;
}

.page-productos .sort-select{
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: 0 10px;
  outline: none;
}

.page-productos .productos-titulo-seccion{
  margin: 12px 0 6px;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 900;
}

/* Grid profesional (no carrusel) */
.page-productos .productos-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.page-productos .productos-grid .grid-sep{
  grid-column: 1 / -1;
  font-size: 26px;
  font-weight: 900;
  margin: 10px 0 2px;
}

/* Cards estilo index: hover + sombra suave */
.page-productos .productos-grid .producto,
.page-productos .productos-grid .product{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.page-productos .productos-grid .producto:hover,
.page-productos .productos-grid .product:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.10);
}

/* Imagen fija: no empuja texto */
.page-productos .productos-grid{
  --card-img-h: 332px;
}

.page-productos .productos-grid .product-media{
  height: var(--card-img-h);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--card-media-pad);
}

/* El <img> esta envuelto en un <a> (link al detalle del producto), que
   por defecto es display:inline y no tiene alto propio: para el <img>,
   ese <a> es su containing block real (no ".product-media"), asi que
   "height:100%"/"max-height:100%" no tenian contra que resolverse y
   la imagen caia a su tamaño natural (por aspect ratio), desbordando
   el contenedor y pegandose a los bordes. "display:contents" saca al
   <a> del arbol de cajas (sigue funcionando como link) para que el
   <img> sea hijo flex directo de ".product-media". */
.page-productos .productos-grid .product-media > a{
  display: contents;
}

.page-productos .productos-grid .product-media img{
  /* max-width/max-height + width/height:auto en vez de width/height:100%:
     mas robusto que depender de que el <img> resuelva porcentajes contra
     el <a> padre (ver "display:contents" arriba) en todos los navegadores. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Contenido flexible: boton siempre alineado */
.page-productos .productos-grid .info{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.page-productos .productos-grid h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.2em * 2);
}

.page-productos .productos-grid .price{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.05;
  display: block;
  /* Unifica con el azul que ya usan las cards "product" del home
     (".product .price" en legacy.css); sin esto, "producto" (catalogo)
     heredaba el ".price" generico en navy #2c3e50, un tono distinto. */
  color: #007bff;
}

.page-productos .productos-grid .original-price{
  margin: 4px 0 0;
  font-size: 13px;
  color: #95a5a6;
  text-decoration: line-through;
  font-weight: 600;
  line-height: 1.05;
  display: block;
  min-height: 14px;
}

.product .original-price{
  margin: 2px 0 0;
  font-size: 12px;
  color: #95a5a6;
  text-decoration: line-through;
  font-weight: 600;
  line-height: 1.05;
  display: block;
  min-height: 1em;
}

.product .price{
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  display: block;
}

.page-productos .productos-grid .add-to-cart{
  margin-top: auto;
  height: 46px;
  border-radius: 14px;
  font-weight: 800;
}

/* =====================================================================
   Toast de "Añadido al carrito" (global)
   - container: .toast-root
   - item: .toast
   ===================================================================== */

.toast-root{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(20,20,20,.92);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(10px);
  animation: toastIn .18s ease forwards;
  backdrop-filter: blur(10px);
}

.toast .icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  font-weight: 900;
  flex: 0 0 auto;
}

.toast .text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.toast .title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}

.toast .desc{
  font-size: 13px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast .action{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}

@keyframes toastIn{ to{ opacity: 1; transform: translateY(0); } }
@keyframes toastOut{ to{ opacity: 0; transform: translateY(10px); } }

/* Overlay en el boton */
.add-to-cart.added{
  position: relative;
}

.add-to-cart.added::after{
  content: "✓ Añadido";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: grid;
  place-items: center;
  background: rgba(16, 185, 129, .95);
  color: #fff;
  font-weight: 900;
  opacity: 0;
  animation: addedOverlay .9s ease forwards;
}

@keyframes addedOverlay{
  0%{ opacity: 0; }
  12%{ opacity: 1; }
  80%{ opacity: 1; }
  100%{ opacity: 0; }
}

/* =========================
   Producto (refinamiento, sin rediseño)
   ========================= */

.page-product-detail .product-container,
.page-product-detail .product-card,
.page-product-detail .product-wrapper,
.page-product-detail .product-page{
  /* no fuerza nada; solo permite overrides si tus contenedores se llaman distinto */
}

/* 1) Card principal: menos “vacío”, más premium */
.page-product-detail .product-detail,
.page-product-detail .product-card,
.page-product-detail .product-container{
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.page-product-detail .product-detail{
  padding: 28px;
}

/* 2) Columna imagen: mantiene estilo original pero más controlada */
.page-product-detail .product-image,
.page-product-detail .product-gallery,
.page-product-detail .image-container{
  border-radius: 18px;
  background: #f6f7f9;
  padding: 14px;
}

.page-product-detail .product-image img,
.page-product-detail .product-gallery img,
.page-product-detail .image-container img{
  width: 100%;
  height: 420px;           /* fija altura para consistencia */
  object-fit: contain;
  display: block;
}

/* 3) Miniaturas: tamaño consistente, hover fino (sin cambiar layout) */
.page-product-detail .thumbnails,
.page-product-detail .miniaturas,
.page-product-detail .product-thumbs{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.page-product-detail .thumbnails img,
.page-product-detail .miniaturas img,
.page-product-detail .product-thumbs img{
  width: 66px;
  height: 66px;
  object-fit: cover;
  border-radius: 14px;
  background: #f6f7f9;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.page-product-detail .thumbnails img:hover,
.page-product-detail .miniaturas img:hover,
.page-product-detail .product-thumbs img:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  border-color: rgba(11,102,255,.55);
}

/* 4) Título + rating: respeta tu estilo, solo mejora ritmo */
.page-product-detail h1,
.page-product-detail .product-title{
  margin: 0 0 8px;
  font-size: 36px;
  letter-spacing: -0.4px;
}

.page-product-detail .rating,
.page-product-detail .stars,
.product-page .rating,
.product-page .stars{
  margin: 0 0 12px;
  opacity: .95;
}

/* Páginas legales (Privacidad/Términos/Cookies) */
.legal-content{
  max-width: 780px;
  line-height: 1.7;
}
.legal-content h2{
  margin: 28px 0 10px;
  font-size: 19px;
}
.legal-content h2:first-of-type{ margin-top: 12px; }
.legal-content p, .legal-content ul{
  margin: 0 0 14px;
  color: var(--dark, inherit);
}
.legal-content ul{ padding-left: 22px; }
.legal-disclaimer{
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted, #888);
  font-style: italic;
}

/* Reseñas de producto */
.reviews-section{
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}
.reviews-section .section-header h2{
  margin: 0 0 16px;
  font-size: 24px;
}
.reviews-summary{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.reviews-summary .stars-big{ color: #f5a623; font-size: 22px; }
.reviews-summary .rating-value-big{ font-size: 22px; font-weight: 700; }
.reviews-summary .rating-count{ color: var(--muted, #777); font-size: 14px; }
.reviews-summary .no-reviews{ color: var(--muted, #777); margin: 0; }
/* .rating (legacy.css) es solo "color+font-size"; sin flex, las estrellas
   (iconos de fuente) y el texto quedan alineados por baseline, que no
   coincide con el centro visual del icono -> el numero se ve flotando
   arriba/abajo de las estrellas en vez de centrado con ellas. */
#product-rating{
  display: flex;
  align-items: center;
  gap: 6px;
}
#product-rating .stars{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #f5a623;
  /* Sobrescribe ".product-page .stars{margin:0 0 12px}" (regla legacy mas
     abajo en este mismo archivo): ese margin-bottom infla la caja de margen
     de este flex item, y align-items:center termina centrando la caja
     inflada en vez del contenido visible -> las estrellas se veian pegadas
     arriba en vez de alineadas con el numero. */
  margin: 0;
}
#product-rating .rating-value{ font-weight: 700; margin-left: 0; }
#product-rating .rating-count{ color: var(--muted, #777); font-size: 13px; }

.reviews-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.review-item{
  border: 1px solid var(--border, #e4e7ef);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card, #fff);
}
.review-item-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.review-author{ font-weight: 700; }
.review-stars{ color: #f5a623; font-size: 14px; }
.review-comment{ margin: 6px 0; }
.review-date{ color: var(--muted, #999); font-size: 12px; }

.review-form-wrap{
  margin-top: 8px;
  padding: 22px 24px;
  border: 1px solid var(--border, #e4e7ef);
  border-radius: 16px;
  background: var(--card, #fff);
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}
.review-form-wrap h3{
  margin: 0 0 16px;
  font-size: 17px;
}
.review-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
}
.review-form-stars{ display: flex; gap: 8px; font-size: 26px; }
.review-form-stars .star-input{
  background: none;
  border: none;
  cursor: pointer;
  color: #f5a623;
  padding: 2px;
  line-height: 1;
  transition: transform .12s ease;
}
.review-form-stars .star-input:hover{ transform: scale(1.15); }
.review-form label.review-form-label{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #777);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: -6px;
}
.review-form textarea{
  min-height: 96px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #e4e7ef);
  background: rgba(0,0,0,.02);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.review-form textarea::placeholder{ color: var(--muted, #999); }
.review-form textarea:focus{
  outline: none;
  border-color: #1c5cff;
  background: rgba(28, 92, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(28, 92, 255, 0.12);
}
.review-form .form-message{
  margin: 0;
}

.review-login-prompt{
  margin-top: 8px;
  padding: 18px 22px;
  border: 1px dashed var(--border, #e4e7ef);
  border-radius: 16px;
  background: rgba(28, 92, 255, 0.04);
}
/* ":not([hidden])" para que el atributo [hidden] siga ganando cuando esta
   presente (una regla de autor con "display" le gana a [hidden] por origen,
   sin importar la especificidad). */
.review-login-prompt:not([hidden]){
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.review-login-prompt span{ font-size: 14px; }

[data-theme="dark"] .review-item{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .review-form-wrap{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .review-form textarea{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: inherit;
}
[data-theme="dark"] .review-form textarea:focus{
  background: rgba(79, 168, 232, 0.1);
  border-color: #4fa8e8;
  box-shadow: 0 0 0 3px rgba(79, 168, 232, 0.18);
}
[data-theme="dark"] .review-login-prompt{
  background: rgba(79, 168, 232, 0.08);
  border-color: rgba(79, 168, 232, 0.3);
}

/* 5) Chips de specs: mismos chips, menos tosco, más uniforme */
.page-product-detail .specs,
.page-product-detail .product-specs,
.page-product-detail .chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}

.page-product-detail .spec,
.page-product-detail .chip{
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}

/* 6) Precios: más limpio, descuento legible */
.page-product-detail .price,
.page-product-detail .product-price{
  font-size: 42px;
  font-weight: 900;
  margin: 12px 0 6px;
  letter-spacing: -0.4px;
}

.page-product-detail .original-price,
.page-product-detail .old-price{
  font-size: 18px;
  opacity: .55;
  margin-right: 10px;
  
}

.page-product-detail .discount,
.page-product-detail .discount-text{
  font-size: 16px;
  font-weight: 800;
  color: #10b981;
}

/* 7) Botón principal: mismo look, micro-interacción como Index */
.page-product-detail .add-to-cart,
.page-product-detail .buy-button,
.page-product-detail .btn-add{
  height: 56px;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 30px rgba(11,102,255,.22);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.page-product-detail .add-to-cart:hover,
.page-product-detail .buy-button:hover,
.page-product-detail .btn-add:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(11,102,255,.28);
  filter: brightness(1.03);
}

/* 8) Línea de beneficios (envío / devolución): misma idea, mejor alineada */
.page-product-detail .benefits,
.page-product-detail .shipping-line,
.page-product-detail .delivery-note{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #10b981;
}

/* 9) Responsive: preserva tu composición */
@media (max-width: 980px){
  .page-product-detail .product-image img,
  .page-product-detail .product-gallery img,
  .page-product-detail .image-container img{
    height: 340px;
  }
}

/* =========================
   Recomendados (carrusel compacto)
   ========================= */

/* Ajusta solo dentro de la sección recomendados de producto */
.page-product-detail .recommended,
.page-product-detail .recomendados{
  margin-top: 26px;
}

.page-product-detail .recommended .carousel-container,
.page-product-detail .recomendados .carousel-container{
  position: relative;
  padding: 0 44px; /* espacio para flechas */
}

/* Carrusel como Index, pero más apretado */
.page-product-detail .recommended .product-carousel,
.page-product-detail .recomendados .product-carousel{
  display: flex;
  gap: 12px;                 /* menos separación */
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 2px 12px;
}

/* Card recomendada compacta */
.page-product-detail .recommended .producto,
.page-product-detail .recomendados .producto{
  flex: 0 0 220px;           /* más pequeño */
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}

.page-product-detail .recommended .producto:hover,
.page-product-detail .recomendados .producto:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* Imagen consistente en recomendados */
.page-product-detail .recommended .producto .product-media,
.page-product-detail .recomendados .producto .product-media{
  height: 150px;
  background: #f6f7f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.page-product-detail .recommended .producto .product-media img,
.page-product-detail .recomendados .producto .product-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Info y botón alineados */
.page-product-detail .recommended .producto .info,
.page-product-detail .recomendados .producto .info{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.page-product-detail .recommended .producto h3,
.page-product-detail .recomendados .producto h3{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.2em * 2);
}

.page-product-detail .recommended .producto .price,
.page-product-detail .recomendados .producto .price{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.page-product-detail .recommended .producto .add-to-cart,
.page-product-detail .recomendados .producto .add-to-cart{
  margin-top: auto;
  height: 42px;
  border-radius: 14px;
  font-weight: 900;
}

/* Flechas centradas y discretas */
.page-product-detail .recommended .prev,
.page-product-detail .recommended .next,
.page-product-detail .recomendados .prev,
.page-product-detail .recomendados .next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.page-product-detail .recommended .prev,
.page-product-detail .recomendados .prev{ left: 6px; }

.page-product-detail .recommended .next,
.page-product-detail .recomendados .next{ right: 6px; }

/* =========================
   PRODUCTO (refine sin cambiar layout original)
   ========================= */
.page-product-detail .product-detail{
  gap: 28px;
}

.page-product-detail .main-image{
  height: 460px;
  object-fit: contain;
}

.page-product-detail .main-image-container{
  border-radius: 22px;
  background: #f6f7f9;
  padding: 14px;
}

.page-product-detail .thumbnail-container{
  margin-top: 12px;
}

.page-product-detail .thumbnail-scroller{
  gap: 10px;
}

.page-product-detail .thumbnail{
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 14px;
  background: #f6f7f9;
  border: 2px solid transparent;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.page-product-detail .thumbnail:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  border-color: rgba(11,102,255,.55);
}

.page-product-detail .thumbnail.active{
  border-color: #0b66ff;
}

.page-product-detail .product-info h1{
  letter-spacing: -0.4px;
}

.page-product-detail .spec-item{
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.page-product-detail .price-section .price{
  letter-spacing: -0.5px;
}

.page-product-detail .actions .add-to-cart{
  height: 56px;
  border-radius: 16px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(11,102,255,.22);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.page-product-detail .actions .add-to-cart:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(11,102,255,.28);
  filter: brightness(1.03);
}

/* =========================
   RECOMENDADOS (compacto + profesional, usando TU markup real)
   ========================= */
.page-product-detail .recommended-products .carousel-container{
  position: relative;
  padding: 0 44px; /* espacio para flechas */
}

.page-product-detail .recommended-products .carousel{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 2px 16px;
  -webkit-overflow-scrolling: touch;
}

.page-product-detail .recommended-products .carousel::-webkit-scrollbar{
  height: 10px;
}
.page-product-detail .recommended-products .carousel::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

.page-product-detail .recommended-product{
  flex: 0 0 220px;            /* compacto */
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  transition: transform .16s ease, box-shadow .16s ease;
}

.page-product-detail .recommended-product:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.page-product-detail .recommended-product .product-media{
  height: 150px;
  background: #f6f7f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.page-product-detail .recommended-product .product-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.page-product-detail .recommended-product h3{
  margin: 10px 12px 6px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.2em * 2);
}

.page-product-detail .recommended-product a{
  text-decoration: none;
  color: inherit;
}

.page-product-detail .recommended-product .price-container{
  margin: 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
}

.page-product-detail .recommended-product .current-price{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.page-product-detail .recommended-product .original-price{
  margin: 0;
  opacity: .55;
  text-decoration: line-through;
  font-size: 14px;
  min-height: 14px;
}

.page-product-detail .recommended-product .add-to-cart{
  margin: 12px;
  margin-top: auto;           /* botón alineado abajo */
  height: 42px;
  border-radius: 14px;
  font-weight: 900;
}

/* flechas centradas y discretas */
.page-product-detail .recommended-products .carousel-button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
}

.page-product-detail .recommended-products .carousel-button.prev{ left: 6px; }
.page-product-detail .recommended-products .carousel-button.next{ right: 6px; }

/* ===== Refinamiento bloque superior: Producto ===== */
.page-product-detail .product-detail{
  align-items: start;
  gap: 34px;
}

/* Columna izquierda: elimina vacío y centra contenido */
.page-product-detail .main-image-container{
  background: #f6f7f9;
  border-radius: 22px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-product-detail .main-image{
  width: 100%;
  height: 420px;
  object-fit: contain;
  display: block;
  margin: 0;
}

/* Miniaturas: consistentes y sin “basura” */
.page-product-detail .thumbnail-container{
  margin-top: 0;
}

.page-product-detail .thumbnail-scroller{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.page-product-detail .thumbnail{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 14px;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.page-product-detail .thumbnail:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.page-product-detail .thumbnail.active{
  border-color: #0b66ff;
}

/* Columna derecha: jerarquía real */
.page-product-detail .product-info{
  padding-top: 6px;
}

.page-product-detail .product-info h1{
  margin: 0 0 8px;
  font-size: 40px;
  letter-spacing: -0.5px;
}

.page-product-detail .product-info .price{
  margin: 0 0 10px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.6px;
}

/* Descripción más legible */
.page-product-detail .product-info p{
  margin: 0 0 10px;
  opacity: .85;
  line-height: 1.55;
  max-width: 58ch;
}

/* Beneficios: alinear íconos y quitar bullets feos */
.page-product-detail .product-info ul{
  list-style: none;
  padding: 0;
  margin: 10px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-product-detail .product-info ul li{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botón: ancho consistente como index, no “chiquito” */
.page-product-detail .product-info .add-to-cart{
  height: 54px;
  border-radius: 16px;
  font-weight: 900;
  padding: 0 18px;
  min-width: 240px;
  box-shadow: 0 14px 30px rgba(11,102,255,.20);
  transition: transform .14s ease, box-shadow .14s ease;
}

.page-product-detail .product-info .add-to-cart:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(11,102,255,.26);
}

/* Responsive: evita que la columna izquierda se vuelva enorme */
@media (max-width: 980px){
  .page-product-detail .main-image{
    height: 340px;
  }
}

/* Responsive refinements */
@media (max-width: 1024px){
  /* ".header" es flex desde que se convirtio de Grid a Flexbox (ver
     comentario en la regla base mas arriba); "grid-template-columns" aqui
     no hacia nada. El problema real en este rango (tablets: iPad, etc.)
     es que ".header-actions" (tema+wishlist+carrito+perfil, o tema+
     wishlist+carrito+boton de login si no hay sesion) es flex:0 0 auto ->
     nunca se encoge, y con el nombre de usuario completo (o el texto
     "Iniciar Sesion") visible ocupa tanto que la barra de busqueda queda
     aplastada a unos pocos px. Se aplica el mismo recorte que ya usa el
     breakpoint movil (ocultar el nombre, pastilla/boton mas chicos) para
     liberarle espacio real a la busqueda en vez de dejarla practicamente
     invisible. */
  .header .user-profile #username-display{
    display: none;
  }

  .header .user-profile{
    padding: 0 6px;
    gap: 4px;
  }

  /* Icono solo (sin texto): "Iniciar Sesion" nunca se puede encoger mas
     alla del ancho de sus letras, asi que reducir solo el padding/font-size
     (como se hacia antes) recuperaba poco espacio real. Ocultando el
     texto queda del mismo tamaño que los otros botones circulares
     (tema/wishlist/carrito), que es lo que de verdad libera espacio para
     la busqueda. */
  .header .login-button span{
    display: none;
  }

  .header .login-button{
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .header #logo{
    max-width: 280px;
  }

  /* Buscador colapsable: en vez de seguir compitiendo por espacio con el
     resto de .header-actions (ver el propio input aplastandose en los
     fixes anteriores), se oculta por completo y se reemplaza por un
     icono; al hacer click se despliega como un panel debajo del header
     (position:absolute, .header ya tiene position:relative arriba).
     El "display:inline-flex" del icono va mas abajo, junto a la regla
     base ".header .search-toggle-btn{ display:none }": ambas tienen la
     misma especificidad, y la base esta mas adelante en el archivo, asi
     que puesta aca perdia el empate por orden de aparicion. */
  .header .search-toggle-btn{
    width: 44px;
    height: 44px;
  }

  .header-search{
    display: none;
  }

  .header.search-open .header-search{
    display: flex;
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    max-width: none;
    width: auto;
    margin: 8px 0 0;
    z-index: 30;
    box-shadow: 0 16px 32px rgba(0,0,0,.22);
  }

  .banner .slide img{
    height: 100%;
  }

  .carousel-track{
    gap: 16px;
  }

  .product,
  .producto{
    flex: 0 0 230px;
    max-width: 230px;
  }

  .page-product-detail .product-detail{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* 768px "a secas" resulto ser fragil: un usuario real con una ventana
   que el propio navegador reportaba como innerWidth:769 (redondeo de
   zoom/escalado de Windows, no un telefono exotico) quedaba UN pixel
   afuera de "max-width:768px" y quiere se le enviaba el layout de
   escritorio (header en una sola fila, logo sin centrar) en vez de este
   apilado, mientras que el resto de los ajustes de tablet (buscador
   colapsable, grid compacto hasta 779px) si le aplicaban -> mezcla rara
   a medio camino. Se sube a 800px para dejar margen real. */
@media (max-width: 800px){
  /* "display:grid" va explicito aca: esta regla dependia de otro bloque
     mas arriba en el archivo (todavia en max-width:768px, "48px 1fr")
     que ponia display:grid y esta solo pisaba grid-template-columns/etc.
     Al subir SOLO este bloque a 800px sin tocar el otro, quedaban
     desincronizados: entre 769-800px .header seguia siendo flex (el otro
     bloque no llegaba a activarse) pero heredaba grid-template-columns y
     los "width:100%" de .header-brand/.header-actions pensados para un
     contenedor grid de una sola columna, lo que en un flex row sin
     wrap desbordaba muchisimo el ancho (cada uno pidiendo 100% en la
     misma fila). Se declara aca para que el bloque sea autosuficiente. */
  .header{
    display: grid;
    padding: 8px 12px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 10px;
  }

  .header-actions{
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* Separa el boton de tema (izquierda) de wishlist + carrito + login
     (derecha); el auto-margin va en el primero del grupo derecho. */
  .header-actions .wishlist-button{
    margin-left: auto;
  }

  /* El nombre completo ("Admin Elitech" + recibo + logout) hacia que la
     pastilla de perfil no cupiera en la fila de iconos y se fuera a su
     propia fila aparte. En movil se oculta el texto y se achica la pastilla
     para que quede a la par de tema/deseados/carrito, como un icono mas. */
  .header .user-profile #username-display{
    display: none;
  }

  .header .user-profile{
    padding: 0 6px;
    gap: 4px;
    height: 42px;
  }

  .header-search{
    grid-column: 1 / -1;
    max-width: 100%;
    height: 44px;
  }

  /* Logo centrado en la fila del header (el hamburguesa se queda pegado
     a la izquierda en su lugar normal): ".header-brand" pasa a ocupar
     todo el ancho de su fila (ya que es un grid item de una sola columna
     "1fr" arriba) y el logo se saca del flujo para centrarlo respecto a
     ESE ancho completo, sin importar cuanto mida el boton hamburguesa. */
  .header-brand{
    position: relative;
    width: 100%;
  }

  .header-brand #logo{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-height: 80px;
    max-width: 220px;
  }

  .banner{
    padding: 0;
  }

  .banner .slide img{
    max-height: none;
  }

  .product,
  .producto{
    flex: 0 0 210px;
    max-width: 210px;
  }

  .products-head,
  .products-controls{
    flex-direction: column;
    align-items: stretch;
  }

  .products-search,
  .page-productos .products-search{
    width: 100%;
  }

  .page-productos .sort-pill{
    width: 100%;
    justify-content: space-between;
  }

  .page-productos .products-filters{
    width: 100%;
  }

  .page-productos .filter-btn{
    flex: 1 1 auto;
    text-align: center;
  }

  .cart-item{
    grid-template-columns: 72px 1fr;
  }

  .page-product-detail .product-detail{
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .page-product-detail h1,
  .page-product-detail .product-title{
    font-size: 30px;
  }

  .page-product-detail .price,
  .page-product-detail .product-price{
    font-size: 34px;
  }

  .page-product-detail .product-image img,
  .page-product-detail .product-gallery img,
  .page-product-detail .image-container img{
    height: 300px;
  }
}

@media (max-width: 520px){
  .page{
    padding: 0 12px;
  }

  .header-search{
    height: 40px;
  }

  /* Doble clase = empate de especificidad a proposito: ".header .wishlist-button"
     (sin media query, mas abajo en el archivo) gana por orden de aparicion
     sobre esta regla si no se sube la especificidad aqui. */
  .header .cart-button.cart-button,
  .header .wishlist-button.wishlist-button{
    width: 42px;
    height: 42px;
    font-size: 15px;
  }

  /* Tema y busqueda quedaban 44-46px mientras carrito/deseados/login ya
     habian bajado a 42px arriba: en telefonos chicos los 4 botones del
     header se veian de tamaños distintos. Se igualan aca.
     Doble clase = misma razon que ".cart-button.cart-button" arriba: la
     base ".header .theme-toggle-btn" (sin media query) esta mas abajo en
     el archivo y gana por orden de aparicion si no se sube aca la
     especificidad. */
  .header .theme-toggle-btn.theme-toggle-btn,
  .header .search-toggle-btn.search-toggle-btn{
    width: 42px;
    height: 42px;
    font-size: 15px;
  }

  .header .login-button{
    width: 42px;
    height: 42px;
    padding: 0;
  }

  .banner .slide img{
    max-height: none;
  }

  .product,
  .producto{
    flex: 0 0 180px;
    max-width: 180px;
  }

  .cart-item{
    grid-template-columns: 1fr;
  }

  .cart-item img{
    width: 100%;
    height: 180px;
  }
}

/* Evita que el formulario de newsletter fuerce overflow horizontal en el footer */
.newsletter-form input{
  min-width: 0;
}

@media (max-width: 700px){
  .footer-section{
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* ".productos-grid" usa "repeat(auto-fit, minmax(240px,1fr))": el
   contenedor real es el viewport menos el padding de ".page" (16px por
   lado), asi que 3 columnas (3*240 + 2*14 de gap = 748px) necesitan un
   viewport de al menos 780px. Por debajo de eso (verificado con
   Playwright: a 779px todavia da 2 columnas, a 780px ya da 3) solo entran
   2 columnas, pero como cada "1fr" se estira a llenar TODO el sobrante,
   esas 2 columnas quedan enormes (332px de imagen) con mucho hueco vacio
   — la misma "zona muerta" que se via en tablets angostos o ventanas
   redimensionadas a este ancho. Se le aplica el mismo tratamiento
   compacto (imagen 130px, texto mas chico) que ya usaba solo el
   breakpoint de telefono (<=640px), extendido a toda esta zona muerta. */
@media (max-width: 779px){
  .page-productos .productos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    --card-img-h: 130px;
  }

  .page-productos .productos-grid .grid-sep{
    font-size: 18px;
    margin: 8px 0 0;
  }

  .page-productos .productos-grid .producto,
  .page-productos .productos-grid .product{
    border-radius: 12px;
    /* ".product,.producto{flex:0 0 150px;max-width:150px}" (mas abajo en
       este mismo archivo, pensada para los carruseles del home) es mas
       generica pero se aplica igual porque esta regla no pisaba
       "max-width"/"flex": la tarjeta del catalogo quedaba angosta
       (150px) dentro de una columna de grid mas ancha (~181px), dejando
       ~31px de hueco muerto por tarjeta que rompia el "pegado" real
       aunque el gap del grid ya fuera chico. */
    flex: none;
    max-width: none;
    width: 100%;
  }

  .page-productos .productos-grid .info{
    padding: 7px;
    gap: 2px;
  }

  .page-productos .productos-grid h3{
    font-size: 12.5px;
    font-weight: 700;
  }

  .page-productos .productos-grid .price{
    font-size: 15px;
  }

  .page-productos .productos-grid .stock{
    font-size: 11px;
  }

  .page-productos .productos-grid .add-to-cart{
    height: 34px;
    font-size: 12px;
    padding: 0 6px;
    border-radius: 10px;
  }
}

/* =====================================================================
   REDISENO MOVIL — no es solo "que quepa", es una densidad y jerarquia
   pensadas para pantalla chica: menos aire, tarjetas en 2 columnas,
   controles en tiras horizontales con scroll en vez de apilarse.
   ===================================================================== */
@media (max-width: 640px){

  /* --- Barra de categorias: tira horizontal deslizable, no wrap en filas --- */
  .category-bar-inner{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-bar-inner::-webkit-scrollbar{ display: none; }

  .sidebar-toggle,
  .category-link{
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: 13.5px;
  }

  /* --- Breadcrumb: compacto y alineado a la izquierda, no un pill flotante --- */
  .product-page .breadcrumb,
  .page-productos .breadcrumb{
    justify-content: flex-start;
    width: 100%;
    margin: 10px 0 14px;
    padding: 8px 12px;
    font-size: 0.82rem;
    border-radius: 12px;
  }

  /* --- Controles del catalogo: mas compactos, filtros en tira deslizable --- */
  .page-productos .products-head h1{
    font-size: 19px;
  }

  .page-productos .products-search,
  .products-search{
    height: 38px;
    width: 100%;
  }

  .page-productos .products-controls{
    gap: 8px;
  }

  .page-productos .products-filters{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    gap: 8px;
    width: 100%;
  }

  .page-productos .products-filters::-webkit-scrollbar{ display: none; }

  .page-productos .filter-btn{
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    font-size: 13.5px;
  }

  .page-productos .sort-pill{
    height: 36px;
    width: 100%;
  }

  /* --- Carruseles del home: tarjetas e imagenes mas chicas --- */
  :root{ --card-img-h: 150px; }

  .product,
  .producto{
    flex: 0 0 150px;
    max-width: 150px;
  }

  /* Esta regla fija 332px a proposito (no usa la variable), hay que
     pisarla explicitamente para que el carrusel no herede imagenes gigantes.
     (El carrusel de "Productos Recomendados" de Producto.html vive en
     Estilo de telefonos.css con su propia clase .recommended-product,
     su ajuste movil esta alli para respetar la cascada real de esa pagina.) */
  .product-carousel .product-media{
    height: 150px;
  }

  /* --- Solo el home (#ofertas-track/#productos-track en index.html) ---
     150px con el gap de 20px de .product-carousel (styles.legacy.css, sin
     variante movil) llenaba el ancho visible con exactamente 2 tarjetas y
     nada mas, sin pista de que hay mas para el lado. Se achica la tarjeta
     y el gap SOLO en estos dos carruseles (via su id) para dejar ver un
     adelanto real de la 3ra, sin tocar el resto de paginas que comparten
     las mismas clases .product/.producto/.product-carousel. */
  #ofertas-track,
  #productos-track{
    gap: 10px;
  }
  #ofertas-track .product,
  #ofertas-track .producto,
  #productos-track .product,
  #productos-track .producto{
    flex: 0 0 112px;
    max-width: 112px;
  }
  #ofertas-track .product-media,
  #productos-track .product-media{
    height: 105px;
  }

  .carousel-container{
    margin: 16px 0;
    padding: 0 30px;
  }

  .product .info, .producto .info,
  .product .product-info, .producto .product-info{
    padding: 8px 10px 10px;
  }

  .product h3, .producto h3{
    font-size: 12.5px;
    margin: 6px 0 4px;
  }

  .product .price, .producto .price{
    font-size: 14px;
  }

  .product .add-to-cart, .producto .add-to-cart,
  .product button, .producto button{
    height: 34px;
    font-size: 12px;
    padding: 0 8px;
  }

  /* --- Secciones: menos aire desperdiciado --- */
  .special-offers, .available-products, .feedback-section, .comments-section{
    margin: 14px 12px;
    padding: 14px;
    border-radius: 14px;
  }

  .special-offers h2, .available-products h2{
    font-size: 19px;
    margin-bottom: 12px;
  }

  .comentarios{
    padding: 30px 14px;
  }

  .comentarios h2{
    font-size: 19px;
  }

  .comentarios-subtitle{
    font-size: 14px;
    margin-bottom: 22px;
  }

  .feedback-card{
    padding: 18px;
  }

  /* --- Footer: menos padding en movil --- */
  .elitech-footer{
    padding: 24px 14px 14px;
  }
}

/* =====================================================================
   MODO OSCURO
   Se activa poniendo data-theme="dark" en <html> (boton #theme-toggle
   en el header, logica en Script.js). Body y las secciones tipo card ya
   usan var(--bg)/var(--card)/var(--border)/var(--dark)/var(--gray), asi
   que redefinir las variables las ajusta solas; el resto de reglas de
   aqui abajo cubre los colores que estaban escritos a mano (no via var())
   en legacy.css / styles.css. Las fotos de producto se dejan en fondo
   blanco a proposito (practica normal de e-commerce).
   ===================================================================== */
html[data-theme="dark"]{
  --primary: #4fa8e8;
  --dark: #e7e9ee;
  --gray: #9aa3b2;
  --bg: #10131a;
  --card: #1b1f28;
  --border: #2b303c;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Header: ya es oscuro, solo la barra de busqueda necesita ajuste */
/* El header nunca cambia de color con el tema (siempre #333, ver .header
   mas abajo), asi que sus controles no pueden apoyarse en var(--card)/
   var(--border) (pensadas para el fondo de pagina, que si cambia). Usan el
   mismo slate que .theme-toggle-btn para que los 3 controles del header
   (busqueda, perfil, tema) se lean como un solo sistema y no se hundan
   contra el fondo oscuro fijo del header. */
html[data-theme="dark"] .header-search{
  background: #4a5468;
  border-color: rgba(255,255,255,.28);
}
html[data-theme="dark"] .header-search input{
  color: #fff;
}
html[data-theme="dark"] .header-search input::placeholder{
  color: #c7ccd6;
}
html[data-theme="dark"] .header-search > button{
  background: #5b6780;
  color: #fff;
}
html[data-theme="dark"] .header .user-profile{
  background: #4a5468;
  border-color: rgba(255,255,255,.28);
}
html[data-theme="dark"] .header .user-profile #username-display{
  color: #fff;
}

/* Resultados del buscador global */
html[data-theme="dark"] .search-results{
  background: var(--card);
  border-color: var(--border);
}
html[data-theme="dark"] .search-result{
  color: var(--dark);
}
html[data-theme="dark"] .search-result:hover,
html[data-theme="dark"] .search-result.is-active{
  background: #262c38;
}
html[data-theme="dark"] .search-empty{
  color: var(--gray);
}

/* Titulos con color fijo en legacy.css (el resto ya usa var(--dark)) */
html[data-theme="dark"] .special-offers h2,
html[data-theme="dark"] .available-products h2,
html[data-theme="dark"] .comentarios h2{
  color: var(--dark);
}
html[data-theme="dark"] .comentarios{
  background-color: var(--bg);
}
html[data-theme="dark"] .comentarios-subtitle{
  color: var(--gray);
}
html[data-theme="dark"] .feedback-card{
  background-color: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .feedback-text,
html[data-theme="dark"] .feedback-author{
  color: var(--dark);
}

/* Categorias/filtros/orden del catalogo */
html[data-theme="dark"] .page-productos .filter-btn{
  background: #232833;
  border-color: rgba(255,255,255,.10);
  color: var(--dark);
}
html[data-theme="dark"] .page-productos .filter-btn:hover{
  background: #2b3140;
}
html[data-theme="dark"] .page-productos .filter-btn.active{
  background: var(--primary);
  color: #fff;
}
html[data-theme="dark"] .page-productos .sort-pill{
  background: #232833;
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .page-productos .sort-pill span{
  color: var(--dark);
}
html[data-theme="dark"] .page-productos .sort-select{
  background: #232833;
  color: var(--dark);
  border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .page-productos .products-search,
html[data-theme="dark"] .products-search{
  background: #232833;
  color: var(--dark);
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .page-productos .products-search::placeholder,
html[data-theme="dark"] .products-search::placeholder{
  color: #7d8494;
}

/* Tarjetas de producto (catalogo, carruseles, home) */
html[data-theme="dark"] .page-productos .productos-grid .producto,
html[data-theme="dark"] .page-productos .productos-grid .product,
html[data-theme="dark"] .product,
html[data-theme="dark"] .producto{
  background: var(--card);
  border-color: var(--border);
}
html[data-theme="dark"] .product h3,
html[data-theme="dark"] .producto h3,
html[data-theme="dark"] .page-productos .productos-grid h3,
html[data-theme="dark"] .page-productos .productos-grid .grid-sep{
  color: var(--dark);
}
html[data-theme="dark"] .product .stock,
html[data-theme="dark"] .producto .stock{
  color: var(--gray);
}
/* ".price" generico (legacy) queda en #2c3e50 (navy), invisible sobre
   tarjeta oscura para las cards que usan clase "producto" (catalogo). Se
   unifica con el mismo azul de acento que ya usan las cards "product". */
html[data-theme="dark"] .price{
  color: var(--primary);
}

/* Carrito */
html[data-theme="dark"] .cart-items,
html[data-theme="dark"] .cart-summary{
  background: var(--card);
}
html[data-theme="dark"] .cart-header,
html[data-theme="dark"] .cart-item{
  border-color: var(--border);
}
html[data-theme="dark"] .cart-item img{
  background: #f2f2f2;
}
html[data-theme="dark"] .cart-item-info h3,
html[data-theme="dark"] .cart-header h2,
html[data-theme="dark"] .summary-row,
html[data-theme="dark"] .summary-title{
  color: var(--dark);
}
html[data-theme="dark"] .summary-row.total{
  border-top-color: var(--border);
}
html[data-theme="dark"] .quantity-control{
  border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .quantity-control button{
  color: var(--dark);
}
html[data-theme="dark"] .quantity-control button:hover{
  background: rgba(255,255,255,.08);
}
html[data-theme="dark"] .quantity-control input{
  border-left-color: rgba(255,255,255,.14);
  border-right-color: rgba(255,255,255,.14);
  color: var(--dark);
}
html[data-theme="dark"] .remove-item,
html[data-theme="dark"] .cart-summary #clear-cart{
  background: #232833;
  border-color: rgba(255,255,255,.14);
  color: var(--dark);
}

/* Boton de cambio de tema en el header */
.header .theme-toggle-btn{
  margin: 0;
  padding: 0;
  background: #4a5468;
  color: #f4f4f9;
  border: 1px solid rgba(255,255,255,.28);
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  transition: transform 120ms ease, background 160ms ease;
}
.header .theme-toggle-btn:hover{
  background: #5b6780;
  transform: translateY(-1px);
}

/* Boton de busqueda colapsable (solo visible en tablets/movil, ver
   breakpoint mas abajo): mismo tratamiento visual que el de tema. */
.header .search-toggle-btn{
  display: none;
  margin: 0;
  padding: 0;
  background: #4a5468;
  color: #f4f4f9;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 120ms ease, background 160ms ease;
}
.header .search-toggle-btn:hover{
  background: #5b6780;
  transform: translateY(-1px);
}

@media (max-width: 1024px){
  .header .search-toggle-btn{
    display: inline-flex;
  }
}

/* =====================================================================
   PAGINAS DE AUTENTICACION (login.php, registro.php,
   Recuperar_Contrasena.php, Resetear_contrasena.php)
   - Responsive: el viewport ya estaba en device-width; el media query
     de 768px de legacy.css ya existia pero nunca se activaba porque el
     <meta viewport> forzaba width=1280 (el mismo bug que tenia el resto
     del sitio). Aqui solo se afina un poco mas para telefonos chicos.
   - Modo oscuro: la mayoria de las reglas de legacy.css ya usan
     var(--primary)/var(--gray)/var(--dark), asi que se ajustan solas al
     redefinir esas variables (mismo bloque que el resto del sitio). Solo
     hacen falta overrides explicitos para los colores que legacy.css
     escribio a mano (fondo blanco del form, inputs, etc).
   ===================================================================== */

.hero-content a{
  display: inline-block;
  line-height: 0;
}

.hero-logo{
  max-width: 100%;
  height: auto;
}

/* Boton de modo oscuro: dentro de .auth-form (fondo conocido y estable)
   en vez de fijo en la esquina de la pantalla, para no terminar flotando
   sobre el panel equivocado segun el lado en que caiga el hero. */
.auth-form{
  position: relative;
}

.auth-theme-toggle{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.04);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: transform 120ms ease, background 160ms ease;
}

.auth-theme-toggle:hover{
  background: rgba(0,0,0,.08);
  transform: translateY(-1px);
}

html[data-theme="dark"] .auth-theme-toggle{
  background: rgba(255,255,255,.06);
}

html[data-theme="dark"] .auth-theme-toggle:hover{
  background: rgba(255,255,255,.12);
}

/* Mensajes de error/exito del servidor (antes: <p style="color:red/green">,
   texto plano sin fondo ni icono, ilegible en modo oscuro). */
.form-message{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1.2rem;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.form-message.error{
  background: rgba(239,35,60,.10);
  color: #c81e34;
  border: 1px solid rgba(239,35,60,.25);
}

.form-message.success{
  background: rgba(76,201,240,.12);
  color: #0f7fa3;
  border: 1px solid rgba(76,201,240,.30);
}

html[data-theme="dark"] .form-message.error{
  background: rgba(239,35,60,.14);
  color: #ff8a97;
  border-color: rgba(239,35,60,.35);
}

html[data-theme="dark"] .form-message.success{
  background: rgba(76,201,240,.14);
  color: #7fd8f5;
  border-color: rgba(76,201,240,.35);
}

/* Alertas del lado del cliente (login.js showAlert): existian en el JS
   pero .custom-alert nunca tuvo CSS, asi que aparecian sin estilo. */
.custom-alert{
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  color: var(--dark);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  max-width: min(90vw, 420px);
}

.custom-alert.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.custom-alert.error{
  color: #c81e34;
}

.custom-alert.error i{
  color: #ef233c;
}

.custom-alert.success{
  color: #0f7fa3;
}

.custom-alert.success i{
  color: #4cc9f0;
}

/* --- Modo oscuro: colores que legacy.css escribio a mano --- */
html[data-theme="dark"] .auth-form{
  background-color: var(--card);
  box-shadow: -5px 0 30px rgba(0,0,0,.30);
}

html[data-theme="dark"] .mirrored .auth-form{
  box-shadow: 5px 0 30px rgba(0,0,0,.30);
}

html[data-theme="dark"] .input-group input{
  background-color: #20242e;
  border-color: var(--border);
  color: var(--dark);
}

html[data-theme="dark"] .input-group input:focus{
  background-color: #262b37;
}

html[data-theme="dark"] .floating input:focus + label,
html[data-theme="dark"] .floating input:not(:placeholder-shown) + label{
  background: var(--card);
}

html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after{
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .toggle-password{
  color: var(--gray);
}

/* legacy.css centra ".toggle-password" con "top:10%; transform:translateY(-50%)",
   que no centra verticalmente para ninguna altura real de input (mismo bug que
   ya se corrigio en el boton de busqueda del header). El candado de al lado
   SI centra bien porque usa "top:50%"; se iguala aqui. Ademas el boton no
   tenia ancho/alto propio (colapsaba a 0x0), asi que el icono se desbordaba
   fuera de su caja hacia la derecha del input; se le da una caja real con
   flex-centrado para que el icono quede contenido dentro del input.
*/
.toggle-password{
  top: 50%;
  right: 26px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* legacy.css define ".mirrored{flex-direction:row-reverse}" (registro.php)
   DESPUES de su propio media query que apila ".auth-container" en columna
   a 768px; misma especificidad + orden posterior = ".mirrored" siempre
   gana, y el registro nunca se apilaba en movil sin importar el ancho.
   Se repite aqui, ya en la capa que carga al final, para que si gane. */
@media (max-width: 768px){
  .mirrored{
    flex-direction: column;
  }
  /* En registro.php el HTML trae el form antes que el hero (para que en
     escritorio el form quede a la izquierda). Al apilar en movil eso deja
     el formulario largo primero; se reordena para que el hero de bienvenida
     aparezca arriba, igual que en login. */
  .mirrored .auth-hero{
    order: -1;
  }
}

/* --- Responsive: telefonos chicos (el media query de 768px de legacy.css
   ya apila hero/form; aqui se ajustan proporciones para que no se vea
   apretado) --- */
@media (max-width: 480px){
  .hero-logo{
    width: 200px;
    margin-bottom: 1.2rem;
  }

  .auth-hero{
    padding: 2rem 1.2rem 1.5rem;
  }

  .auth-hero h2{
    font-size: 1.5rem;
  }

  .auth-hero p{
    font-size: 0.95rem;
    margin-bottom: 0;
  }

  .auth-form{
    padding: 1.6rem 1.2rem;
  }

  .form-header{
    margin-bottom: 1.6rem;
  }

  .form-header h1{
    font-size: 1.5rem;
  }

  .auth-theme-toggle{
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

/* ===== Lista de deseados ===== */
.product-media{
  position: relative;
}

.wishlist-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #7a7f8a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 120ms ease, color 120ms ease, background 120ms ease;
  z-index: 2;
}

.wishlist-btn:hover{
  transform: scale(1.08);
  color: #ef233c;
}

.wishlist-btn i.fas{
  color: #ef233c;
}

.wishlist-btn.active{
  color: #ef233c;
}

html[data-theme="dark"] .wishlist-btn{
  background: rgba(27, 31, 40, 0.85);
  color: #9aa3b2;
}

html[data-theme="dark"] .wishlist-btn:hover,
html[data-theme="dark"] .wishlist-btn.active{
  color: #ff6b81;
}

html[data-theme="dark"] .wishlist-btn i.fas{
  color: #ff6b81;
}

/* Boton de wishlist en el header (junto al carrito) */
.header .wishlist-button{
  background-color: #ef233c;
  color: #fff;
  border: none;
  height: 46px;
  width: 46px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.header .wishlist-button:hover{
  background-color: #c81e34;
}

.header .wishlist-count{
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #2c2c2c;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 999px;
  padding: 3px 7px;
  margin: 0;
}

/* Boton de wishlist en la pagina de detalle de producto.
   Mismo esquema de padding/borde que ".product-page .add-to-cart" (15px 20px
   + borde de 2px) para que quede exactamente la misma altura, en vez de una
   altura fija que no calzaba con el boton de al lado. */
.product-detail .wishlist-btn-detail{
  padding: 15px 20px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--card);
  color: #ef233c;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-left: 10px;
}

.product-detail .wishlist-btn-detail:hover{
  background: rgba(239, 35, 60, 0.08);
}

.product-detail .wishlist-btn-detail i.fas{
  color: #ef233c;
}

/* var(--card) casi negro + borde apenas visible + rojo saturado se veia
   "sucio" en modo oscuro (mismo tratamiento que .form-message.error). */
html[data-theme="dark"] .product-detail .wishlist-btn-detail{
  background: rgba(239, 35, 60, 0.12);
  border-color: rgba(239, 35, 60, 0.35);
  color: #ff8a97;
}

html[data-theme="dark"] .product-detail .wishlist-btn-detail:hover{
  background: rgba(239, 35, 60, 0.2);
}

html[data-theme="dark"] .product-detail .wishlist-btn-detail i.fas{
  color: #ff8a97;
}

.product-detail .actions{
  flex-wrap: wrap;
  align-items: center;
}

/* legacy.css trae otro ".add-to-cart{margin-top:10px}" (mas especifico que
   el reset generico de "button") que desalineaba este boton 5px respecto
   al de wishlist de al lado pese a tener la misma altura. */
.product-detail .actions .add-to-cart{
  margin-top: 0;
}

/* "Añadir al Carrito" es mas largo que "Añadir" (boton de wishlist de al
   lado): en telefonos de ~360-393px de ancho (iPhone SE/Mini/12/13/14/15
   Pro, gama media Android, etc; el rango mas comun) el texto ya no cabia
   en una sola linea, el boton pasaba a 70-88px de alto mientras el de
   wishlist se quedaba en 52px -> exactamente el desbalance que se ve en
   produccion. Se achica fuente/padding solo en este boton (y se iguala el
   de wishlist para que ambos sigan viendose del mismo tamaño) para que el
   texto entre en una linea incluso en el telefono mas angosto probado
   (320px). */
@media (max-width: 480px){
  .product-detail .actions .add-to-cart{
    font-size: 13px;
    padding: 15px 10px;
    gap: 5px;
  }

  .product-detail .wishlist-btn-detail{
    font-size: 13px;
    padding: 15px 10px;
  }
}

/* Pagina Wishlist.html: reutiliza las tarjetas .producto del catalogo
   (misma imagen/precio/boton que Productos.html) en vez de filas de lista,
   para que se sienta parte del mismo sistema visual del sitio. */
.wishlist-items-count{
  color: var(--gray);
  font-size: 14px;
  font-weight: 600;
}

/* ".page-productos .productos-grid" usa "minmax(240px,1fr)": con pocos
   articulos (tipico en la wishlist) las columnas se estiran mucho mas que
   la tarjeta en si, dejando un vacio enorme dentro de su propia celda. Se
   limita el ancho maximo de columna solo en esta grilla especifica (via
   id, para no afectar a Productos.html que comparte la misma clase). */
#wishlist-items{
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  /* Con pocos articulos, las columnas capadas a 280px no siempre llenan el
     ancho del contenedor; sin esto, todo el sobrante quedaba pegado al lado
     derecho (se veia como si el layout estuviera roto/incompleto). Centrando
     las columnas usadas, el espacio libre se reparte parejo a los lados. */
  justify-content: center;
}

/* Movil: 2 columnas fijas en vez de dejar que auto-fit calcule 1 sola
   columna (mismo tratamiento compacto que ".page-productos .productos-grid"
   usa para el catalogo en esta resolucion). El selector por id le gana a
   esa regla de clase sin importar el orden. */
@media (max-width: 640px){
  #wishlist-items{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    justify-content: initial;
  }

  #wishlist-items .product-media{
    height: 130px;
  }
}

.wishlist-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--gray);
}

.wishlist-empty i{
  font-size: 48px;
  color: #ef233c;
  opacity: .5;
  margin-bottom: 16px;
  display: block;
}

.wishlist-empty p{
  margin: 0 0 20px;
  font-size: 16px;
}

.wishlist-empty .btn-primary{
  width: auto;
  display: inline-block;
  padding: 12px 28px;
  text-decoration: none;
}

/* Flechas para pasar de miniatura directo sobre la imagen principal del
   producto (antes solo existian junto al carrusel de miniaturas, y ahi
   se ocultaban si las miniaturas no desbordaban). */
.main-image-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  color: #2c2c2c;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, transform 120ms ease;
}

.main-image-nav:hover{
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

.main-image-nav.prev{ left: 12px; }
.main-image-nav.next{ right: 12px; }

html[data-theme="dark"] .main-image-nav{
  background: rgba(27, 31, 40, 0.85);
  color: var(--dark);
}

html[data-theme="dark"] .main-image-nav:hover{
  background: rgba(27, 31, 40, 0.98);
}

/* Encabezado de exito en Gracias.html (icono + titulo + numero de pedido) */
.thank-you-hero{
  max-width: 640px;
  margin: 36px auto 12px;
  padding: 0 16px;
  text-align: center;
}

.thank-you-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #19c37d, #0fae6c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 12px 26px rgba(25, 195, 125, 0.35);
}

.thank-you-hero h1{
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -0.3px;
}

.thank-you-order-number{
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(28, 92, 255, 0.1);
  color: #1c5cff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
}

.thank-you-subtitle{
  margin: 0;
  color: var(--gray);
  font-size: 14px;
  line-height: 1.5;
}

html[data-theme="dark"] .thank-you-order-number{
  background: rgba(79, 168, 232, 0.18);
  color: #7fb8ff;
}

/* El h2 dentro de cart-header ya no dice "Gracias", ahora es un rotulo
   secundario ("Productos comprados"): se atenua para no competir con el
   hero de arriba. */
body.page-thank-you .cart-header h2{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray);
  font-weight: 700;
}

/* Bloque "Como pagar tu pedido" + link a factura, en Gracias.html */
.payment-info{
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(28, 92, 255, 0.06);
  border: 1px solid rgba(28, 92, 255, 0.2);
  border-left: 3px solid #1c5cff;
}

html[data-theme="dark"] .payment-info{
  background: rgba(79, 168, 232, 0.1);
  border-color: rgba(79, 168, 232, 0.3);
}

.payment-info h4{
  margin: 0 0 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dark);
}

.payment-info dl{
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 13px;
}

.payment-info dt{ color: var(--gray); }
.payment-info dd{ margin: 0; font-weight: 700; color: var(--dark); }

.payment-info-reference{
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
}

.payment-info-instructions{
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--gray);
}

.btn-secondary-link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.btn-secondary-link:hover{
  background: rgba(28, 92, 255, 0.06);
}

/* Mis_Pedidos.php: lista de compras del cliente */
.orders-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-row{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  flex-wrap: wrap;
}

.order-row-main{ flex: 1; min-width: 160px; }
.order-row-number{ font-weight: 700; color: var(--dark); }
.order-row-date{ font-size: 13px; color: var(--gray); margin-top: 2px; }
.order-row-total{ font-weight: 800; font-size: 16px; color: var(--dark); }

.order-row .btn-secondary-link{
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
}

/* Badges de estado de pedido. Nombre distinto a ".badge" a proposito:
   legacy.css ya usa ".badge" para las etiquetas "Oferta" sobre imagenes de
   producto, con position:absolute;top:10px;left:10px — si se reutiliza ese
   nombre aqui, el badge de estado hereda esa posicion absoluta y termina
   fijado en la esquina de la pagina en vez de junto al pedido. */
.status-badge{
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.status-badge.pendiente{ background: #fff3e0; color: #b7601b; }
.status-badge.procesando{ background: #eef2ff; color: #2d4cb7; }
.status-badge.enviado{ background: #f3e8ff; color: #7a3fd1; }
.status-badge.completado{ background: #e8fff3; color: #0a7a4b; }
.status-badge.cancelado{ background: #fff5f5; color: #b42318; }

html[data-theme="dark"] .status-badge.pendiente{ background: rgba(183,96,27,.2); color: #ffb066; }
html[data-theme="dark"] .status-badge.procesando{ background: rgba(45,76,183,.25); color: #8fa8ff; }
html[data-theme="dark"] .status-badge.enviado{ background: rgba(122,63,209,.25); color: #c9a3ff; }
html[data-theme="dark"] .status-badge.completado{ background: rgba(10,122,75,.25); color: #6fe0ac; }
html[data-theme="dark"] .status-badge.cancelado{ background: rgba(180,35,24,.25); color: #ff8a80; }

/* Link del nombre de usuario en el header hacia "Mis Pedidos" */
.profile-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}