/* =============================================================
   Comercial HUECHURABA — Estilos de la ficha de producto (Bootstrap 5.3.3)
   Se carga DESPUÉS de bootstrap.min.css y de tema-huechuraba.css.
   La grilla, los botones, los formularios y el breadcrumb vienen de
   Bootstrap + tema-huechuraba.css; aquí va lo propio de la ficha.
   Índice:
     01. Layout de la ficha
     02. Galería (carousel de Bootstrap con miniaturas)
     03. Información, precio y compra
     04. Pestañas (componente Tab de Bootstrap)
     05. Especificaciones y listas
     06. Opiniones
     07. Responsive
   Los encabezados de página (.migas-bar) y el selector de cantidad
   (.cantidad) están en tema-huechuraba.css porque los comparte el carro.
   ============================================================= */

/* ------------------------------------------------------------------
   01. LAYOUT DE LA FICHA
   ------------------------------------------------------------------ */
.ficha { padding-block: 34px 46px; }

/* ------------------------------------------------------------------
   02. GALERÍA
   El visor es un carousel de Bootstrap; las miniaturas son sus
   indicadores, reestilizados como recuadros con la imagen.
   ------------------------------------------------------------------ */
.galeria__oferta {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  padding: .45em .85em;
  background-color: var(--rojo);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.galeria .carousel-inner {
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
}
.galeria .carousel-item { height: 100%; }

.galeria__imagen {
  width: 100%;
  height: 100%;
  padding: 26px;
  object-fit: contain;
}

/* Flechas anterior / siguiente */
.galeria .carousel-control-prev,
.galeria .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: 50%;
  box-shadow: var(--sombra);
  color: var(--azul-800);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.galeria .carousel-control-prev { left: 14px; }
.galeria .carousel-control-next { right: 14px; }
.galeria .carousel-control-prev:hover,
.galeria .carousel-control-next:hover {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--texto);
}
.galeria .carousel-control-prev .icono,
.galeria .carousel-control-next .icono { width: 20px; height: 20px; stroke-width: 2.2; }

/* Miniaturas = indicadores del carousel */
.galeria .carousel-indicators {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
}
.galeria .carousel-indicators [data-bs-target] {
  box-sizing: border-box; /* Bootstrap lo pone en content-box */
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 10px;
  display: grid;
  place-items: center;
  text-indent: 0;
  opacity: 1;
  background-color: #fff;
  border: 2px solid var(--gris-200);
  border-radius: 6px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.galeria .carousel-indicators [data-bs-target]::before { display: none; }
.galeria .carousel-indicators [data-bs-target] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.galeria .carousel-indicators [data-bs-target]:hover { border-color: var(--gris-300); }
.galeria .carousel-indicators .active {
  border-color: var(--amarillo);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, .25);
}

/* ------------------------------------------------------------------
   03. INFORMACIÓN, PRECIO Y COMPRA
   ------------------------------------------------------------------ */
.ficha__marca {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--azul-700);
  text-decoration: none;
  margin-bottom: 8px;
}
.ficha__marca:hover { text-decoration: underline; }

.ficha__titulo {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  color: var(--azul-900);
  margin-bottom: 10px;
}

.ficha__codigo { font-size: 13px; color: var(--texto-suave); margin-bottom: 14px; }
.ficha__codigo a { color: var(--azul-700); text-decoration: none; }
.ficha__codigo a:hover { text-decoration: underline; }

/* Valoración */
.rating {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rating__estrellas { display: inline-flex; gap: 2px; color: var(--amarillo-600); }
.rating__estrellas .icono { width: 18px; height: 18px; }
.rating__valor { font-size: 14px; font-weight: 700; }
.rating__enlace {
  font-size: 13.5px;
  color: var(--texto-suave);
  text-decoration: underline;
}
.rating__enlace:hover { color: var(--azul-700); }

/* Estado de stock */
.ficha__stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--azul-600);
  background: #eef3fa;
  border-radius: 999px;
  margin-bottom: 20px;
}
.ficha__stock .icono { width: 17px; height: 17px; stroke-width: 2; }

/* Caja de precio */
.precio-caja {
  padding: 18px 20px;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  margin-bottom: 20px;
}
.precio__antes { font-size: 13.5px; color: var(--texto-suave); }
.precio__antes del { color: #98a2ad; }

.precio__actual {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
}
.precio__monto {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: var(--rojo-precio);
}
.precio__ahorro {
  padding: .45em .8em;
  background-color: var(--rojo);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.precio__iva { font-size: 12.5px; color: var(--texto-suave); }
.precio__cuotas { margin-top: 8px; font-size: 13.5px; color: var(--azul-700); }

/* Resumen de características */
.ficha__resumen {
  display: grid;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 14px;
}
.ficha__resumen li { display: flex; gap: 9px; align-items: flex-start; }
.ficha__resumen .icono {
  width: 18px; height: 18px;
  margin-top: 2px;
  flex: none;
  color: var(--azul-600);
  stroke-width: 2;
}

/* Selector de cantidad (.cantidad) → tema-huechuraba.css (lo comparte el carro) */

/* Enlace de WhatsApp */
.link-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--azul-700);
  background: #eef3fa;
  border: 1px solid #cfe0ef;
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.link-wa:hover { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); }
.link-wa .icono { width: 19px; height: 19px; }

/* Entrega */
.entrega {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--gris-200);
}
.entrega__item {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
}
.entrega__item .icono {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--azul-700);
}
.entrega__item strong { display: block; font-size: 14px; color: var(--azul-900); }
.entrega__item p { font-size: 13px; color: var(--texto-suave); }

/* Compartir */
.compartir {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13.5px;
}
.compartir__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--texto-suave);
}
.compartir__label .icono { width: 17px; height: 17px; }
.compartir__enlace { color: var(--azul-700); text-decoration: underline; }
.compartir__enlace:hover { color: var(--azul-800); }

/* ------------------------------------------------------------------
   04. PESTAÑAS
   ------------------------------------------------------------------ */
.tabs {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
}

.tabs .nav-tabs {
  padding: 6px 6px 0;
  background: var(--gris-50);
  border-bottom: 1px solid var(--gris-200);
}
.tabs .nav-tabs .nav-link {
  padding: 13px 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--texto-suave);
  transition: color var(--transicion), background var(--transicion), border-color var(--transicion);
}
.tabs .nav-tabs .nav-link:hover {
  color: var(--azul-800);
  background: #fff;
  border-bottom-color: transparent;
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.active:hover {
  color: var(--azul-900);
  background: #fff;
  border-bottom-color: var(--rojo);
}

.tabs__contenido { padding: 26px 28px 30px; }

.panel__titulo {
  font-size: clamp(19px, 2vw, 23px);
  color: var(--azul-900);
  margin-bottom: 14px;
}
.panel__subtitulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--azul-800);
  margin: 22px 0 12px;
}
.tabs__contenido p { font-size: 14.5px; color: #3c4753; }
.tabs__contenido p + p { margin-top: 12px; }

/* ------------------------------------------------------------------
   05. ESPECIFICACIONES Y LISTAS
   ------------------------------------------------------------------ */
.especificaciones {
  --bs-table-color: #3c4753;
  --bs-table-striped-bg: var(--gris-50);
  --bs-table-striped-color: #3c4753;
  --bs-table-border-color: var(--gris-200);
  margin-bottom: 0;
  font-size: 14.5px;
}
.especificaciones th {
  width: 34%;
  color: var(--azul-800);
  font-weight: 700;
}
.especificaciones th,
.especificaciones td { padding: 12px 16px; }

.lista-check { display: grid; gap: 10px; margin-top: 6px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #3c4753; }
.lista-check .icono {
  width: 20px; height: 20px;
  margin-top: 2px;
  flex: none;
  color: var(--azul-600);
  stroke-width: 2;
}
.lista-check--entrega li {
  padding: 14px 16px;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
}
.lista-check--entrega strong { display: block; color: var(--azul-900); margin-bottom: 2px; }

/* ------------------------------------------------------------------
   06. OPINIONES
   ------------------------------------------------------------------ */
.opiniones {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--gris-200);
}

.opiniones__resumen { display: grid; gap: 8px; justify-items: start; }
.opiniones__nota {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: var(--azul-900);
}
.opiniones__nota small { font-size: 20px; color: var(--texto-suave); }
.opiniones__total { font-size: 13px; color: var(--texto-suave); }

.opiniones__barras { display: grid; gap: 8px; }
.barra { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.barra__label { width: 28px; color: var(--texto-suave); font-weight: 600; }
.barra__valor { width: 26px; text-align: right; color: var(--texto-suave); }

/* Barras de progreso con los colores de marca */
.barra .progress {
  flex: 1;
  --bs-progress-height: 9px;
  --bs-progress-bg: var(--gris-200);
  --bs-progress-bar-bg: var(--amarillo);
  --bs-progress-border-radius: 999px;
}

.comentarios { display: grid; gap: 16px; }
.comentario {
  padding: 18px 20px;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
}
.comentario__autor { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comentario__avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--azul-800);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.comentario__autor strong { font-size: 14.5px; color: var(--azul-900); }
.comentario__fecha { font-size: 12.5px; color: var(--texto-suave); }
.comentario .rating__estrellas { margin-bottom: 8px; }
.comentario__texto { font-size: 14.5px; color: #3c4753; }

/* ------------------------------------------------------------------
   07. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* La galería no se estira a todo el ancho en tablet */
  .galeria { max-width: 520px; margin-inline: auto; }
  .opiniones { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 767.98px) {
  .ficha { padding-block: 26px 36px; }

  /* Pestañas con scroll horizontal */
  .tabs .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tabs .nav-tabs .nav-link { padding: 12px 14px; font-size: 14px; white-space: nowrap; }
  .tabs__contenido { padding: 20px 18px 24px; }

  .especificaciones th { width: 44%; }
  .especificaciones th,
  .especificaciones td { padding: 10px 12px; font-size: 14px; }
}

@media (max-width: 575.98px) {
  .galeria .carousel-indicators { gap: 8px; }
  .galeria .carousel-control-prev,
  .galeria .carousel-control-next { width: 38px; height: 38px; }
  .galeria .carousel-control-prev { left: 8px; }
  .galeria .carousel-control-next { right: 8px; }
  .precio__actual { gap: 8px; }
  .compartir { gap: 10px; }
}