/*
  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);

  display: grid;
  /* 3 columnas simetricas (marca | busqueda | acciones) en vez de 5, para que
     la busqueda quede realmente centrada. Con columnas separadas para el
     menu (auto, ~50px) y las acciones (auto, ~300px+ con wishlist/carrito/
     perfil), esas dos franjas nunca miden lo mismo y la busqueda quedaba
     desplazada hacia la izquierda pese a tener dos "1fr" de relleno. */
  grid-template-columns: 1fr minmax(380px, min(50vw, 820px)) 1fr;
  align-items: center;
  column-gap: 14px;
}

.header-brand {
  grid-column: 1;
  justify-self: start;
  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 {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

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


.header-search {
  grid-column: 2;
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 0 14px;
  width: 100%;
  max-width: 100%;
  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 {
  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;
  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);
}

/* Responsive header */
@media (max-width: 768px) {
  .header {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 10px;
  }

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

  .header-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

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

/* === 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(5, 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));
}

@media (max-width: 900px){
  .category-tiles{ grid-template-columns: repeat(3, 1fr); }
}

@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);
}

.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;
}

.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;
}

.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;
}

.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(240px, 1fr));
  gap: 14px;
  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;
}

.page-productos .productos-grid .product-media img{
  width: 100%;
  height: 100%;
  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; }
#product-rating .stars{ color: #f5a623; }
#product-rating .rating-value{ font-weight: 700; margin-left: 4px; }
#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{
    grid-template-columns: auto minmax(180px, 1.6fr) auto;
  }

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

  .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;
  }
}

@media (max-width: 768px){
  .header{
    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;
  }

  .header #logo{
    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;
  }

  .header .login-button{
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
  }

  .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%;
  }
}

/* =====================================================================
   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%;
  }

  /* --- Grid de catalogo: 2 columnas compactas en vez de 1 tarjeta gigante --- */
  .page-productos .productos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    --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: 14px;
  }

  .page-productos .productos-grid .info{
    padding: 9px;
    gap: 3px;
  }

  .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;
  }

  /* --- 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;
  }

  .carousel-track{ gap: 10px; }

  .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 */
html[data-theme="dark"] .header-search{
  background: #232833;
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .header-search input{
  color: var(--dark);
}
html[data-theme="dark"] .header-search input::placeholder{
  color: #7d8494;
}
html[data-theme="dark"] .header-search > button{
  background: #2d3340;
  color: var(--dark);
}

/* 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: rgba(255,255,255,.08);
  color: #f4f4f9;
  border: 1px solid rgba(255,255,255,.15);
  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: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

/* =====================================================================
   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: 14px;
  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;
}

/* 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;
}