/* Estilos de la ficha de producto (details.php): CTAs, volver al catálogo, precio y modal
   "+ Información" (lib/producto_info_extendida.php). Usa variables/carrito de venta-carrito.css. */
/* margin-top 110px compensa el navbar fixed (~95px, ver style.css); márgenes laterales
   2vw/10vw iguales a .detail_container para alinear con la tarjeta del producto. */
.svc-widget .detail-top-actions{ margin:110px 2vw 0; }
/* Botón real (fondo, borde, área táctil >=48px), no un link suelto: el público del sitio
   entra desde el celular y necesita un control que se vea tocable con solo mirarlo. */
.svc-widget .detail-back-link{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:11px 20px;
  background:var(--vn-panel,#fff); border:1.5px solid var(--vn-esmeralda); border-radius:10px;
  color:var(--vn-esmeralda); font-weight:700; text-decoration:none; font-size:15px;
  transition:background-color .14s var(--vn-ease), color .14s var(--vn-ease);
}
.svc-widget .detail-back-link:hover,
.svc-widget .detail-back-link:focus-visible{ background:var(--vn-esmeralda); color:#fff; }

/* Overrides de style.css scoped a .svc-widget: reduce el margin-top/padding-top excesivo
   de .detail_container y corrige el width:100vw de .carousel_upper que desbordaba en móvil. */
.svc-widget .detail_container{ margin-top:16px; padding-top:24px; }
/* align-self:flex-start evita que Bootstrap (.row align-items:stretch) estire esta columna
   a la altura del texto largo, lo que corría las flechas prev/next fuera del centro de la imagen. */
.svc-widget .carousel_upper{ width:100%; align-self:flex-start; }
/* >=768px: restaura el 50/50 de Bootstrap (col-md-6); reemplaza el 34vw fijo de style.css. */
@media (min-width:768px){
  .svc-widget .carousel_upper{ width:50%; }
}
.svc-widget .product_detail_container h2{ padding:14px 0 4px; }

/* aspect-ratio fijo + object-fit:contain: uniforma fotos de proveedor con resoluciones dispares.
   Mismo criterio que .fc-media en productos.php. Padding generoso (no 12px al ras): el fondo
   blanco debe notarse más allá de los bordes del producto, no quedar recortado a su silueta. */
.svc-widget #carouselImages .carousel-item{
  aspect-ratio:1/1; background:#fff; border-radius:12px; overflow:hidden; padding:24px;
}
@media (min-width:768px){
  .svc-widget #carouselImages .carousel-item{ padding:32px; }
}
/* overflow:hidden en el padre de arriba contiene el zoom sin desbordar la tarjeta redondeada.
   Curva de desaceleración pronunciada + escala mayor (ref. apple.com/iphone-15-pro/specs: zoom
   fluido al pasar el mouse, no un realce apenas perceptible). focus-within: mismo efecto
   accesible por teclado, ya que la imagen no es un elemento focuseable por sí sola. */
.svc-widget #carouselImages .carousel-item img{
  width:100%; height:100%; object-fit:contain;
  /* Animación suave y responsive para el zoom (ref. Alkosto) */
  transition:transform 0.15s ease-out;
}

/* Zoom estilo Alkosto: el contenedor oculta el desborde, y el JS escala la imagen desde el punto del mouse. */
.svc-widget #carouselImages .carousel-item {
  overflow:hidden;
  cursor:crosshair;
  position:relative;
}

/* Lupa Alkosto: overlay circular que sigue al cursor y muestra la imagen ampliada.
   Se activa solo en hover:hover; el JS (detailLensSetup en details.php) lo monta. */
.svc-widget .detail-lens-container{ position:relative; cursor:crosshair; }
.svc-widget .detail-lens{
  position:absolute; width:180px; height:180px; border-radius:50%;
  border:3px solid var(--vn-esmeralda); pointer-events:none;
  background-repeat:no-repeat; background-color:#fff;
  box-shadow:0 8px 28px rgba(10,61,35,.22);
  opacity:0; transform:scale(.7); z-index:10;
  transition:opacity .18s ease, transform .18s ease;
}
.svc-widget .detail-lens--visible{ opacity:1; transform:scale(1); }
.svc-widget .detail-zoom-img{
  transition:transform 0.15s ease-out;
  touch-action:pan-y;
}
@media (prefers-reduced-motion:reduce){
  .svc-widget .detail-zoom-img{ transition-duration:.01ms; }
}

/* Lightbox de zoom (js/detail-zoom.js): pantalla completa, solo móvil. Vive fuera de
   .svc-widget porque JS lo cuelga directo de <body>. */
body.sv-lightbox-open{ overflow:hidden; }
.sv-lightbox{
  position:fixed; inset:0; z-index:1700;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,34,26,.96);
  opacity:0; transition:opacity .2s ease;
}
.sv-lightbox--visible{ opacity:1; }
.sv-lightbox__img{
  max-width:92vw; max-height:92vh; object-fit:contain;
  touch-action:none; user-select:none; -webkit-user-drag:none;
}
.sv-lightbox__close,
.sv-lightbox__nav{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.14); color:#fff; font-size:18px;
}
.sv-lightbox__close{ top:calc(14px + env(safe-area-inset-top,0px)); right:14px; }
.sv-lightbox__nav--prev{ left:10px; top:50%; transform:translateY(-50%); }
.sv-lightbox__nav--next{ right:10px; top:50%; transform:translateY(-50%); }
@media (prefers-reduced-motion:reduce){
  .sv-lightbox{ transition:none; }
}

/* Éxito (referencia): la foto no debe dominar el viewport completo en móvil antes de mostrar
   nombre/precio/CTA. Contenida y centrada por debajo de 768px; desde ahí el 50/50 de Bootstrap
   ya la acota razonablemente. 480px (no 400px): ahora incluye la columna de miniaturas a la
   izquierda (60px + gap), así que la imagen principal conserva un tamaño similar al de antes. */
.svc-widget .carousel_upper{ max-width:480px; margin:0 auto; }
@media (min-width:768px){
  /* Layout Sticky (ref. Alkosto): el contenedor de la galería se pega arriba mientras el detalle scrollea. */
  .svc-widget .carousel_upper_row{ align-items:flex-start; }
  .svc-widget .carousel_upper{ max-width:none; position:sticky; top:120px; }
}

/* Layout de galería: miniaturas a la izquierda, imagen principal a la derecha (ref. Amazon/
   Alkosto desktop). align-items:stretch (default en flex-row) hace que la columna de
   miniaturas tome la misma altura que la imagen principal -su aspect-ratio:1/1 la vuelve la
   "más alta" casi siempre-, así que ninguna de las dos cambia de tamaño por la otra: la imagen
   manda el alto disponible y las miniaturas hacen scroll interno (overflow-y) si no caben
   todas, en vez de estirar el layout. min-width:0 en ambos hijos: por default un flex item no
   encoge más allá de su contenido intrínseco. */
.svc-widget .detail-gallery-layout{ display:flex; gap:10px; }
.svc-widget .detail-gallery{ position:relative; flex:1 1 auto; min-width:0; }
.svc-widget .detail-gallery-share{
  position:absolute; top:12px; right:12px; z-index:5; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--vn-linea);
  background:rgba(255,255,255,.94); color:var(--vn-tinta); font-size:17px; cursor:pointer;
  box-shadow:0 2px 8px rgba(17,34,26,.14); transition:background-color .14s var(--vn-ease), transform .14s var(--vn-ease);
}
.svc-widget .detail-gallery-share:hover,
.svc-widget .detail-gallery-share:focus-visible{ background:#fff; transform:translateY(-1px); }
.svc-widget .detail-gallery-share .fa-check{ color:var(--vn-esmeralda); }
.svc-widget .detail-gallery-counter{
  position:absolute; bottom:12px; right:12px; z-index:5; background:rgba(17,34,26,.72); color:#fff;
  font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:999px; letter-spacing:.02em;
}

/* Miniaturas: columna vertical fija a la izquierda (flex-basis, no crece ni encoge), con
   scroll propio (overflow-y) si hay más fotos de las que caben en el alto de la imagen
   principal -nunca empuja el layout ni tapa precio/CTA-. */
.svc-widget .detail-gallery-thumbs{
  flex:0 0 60px; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; overflow-x:hidden; padding-right:2px;
}
.svc-widget .detail-gallery-thumb{
  flex:0 0 56px; width:56px; height:56px; padding:3px; border-radius:8px;
  border:2px solid var(--vn-linea); background:#fff; cursor:pointer; overflow:hidden;
  transition:border-color .14s var(--vn-ease);
}
.svc-widget .detail-gallery-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.svc-widget .detail-gallery-thumb:hover{ border-color:var(--vn-esmeralda); }
.svc-widget .detail-gallery-thumb.active{ border-color:var(--vn-esmeralda); }
/* Pantallas muy angostas: miniaturas más chicas para no robarle demasiado ancho a la foto
   principal; ambas columnas quedan siempre visibles, ninguna se oculta ni se apila. */
@media (max-width:420px){
  .svc-widget .detail-gallery-thumbs{ flex-basis:44px; gap:6px; }
  .svc-widget .detail-gallery-thumb{ flex-basis:44px; width:44px; height:44px; }
}

/* Desktop: mismo breakpoint/margen que .detail_container en style.css; 120px arriba porque
   el navbar crece con el logo a 70px. */
@media (min-width:991px){
  .svc-widget .detail-top-actions{ margin:120px 10vw 0; }
  .svc-widget .detail_container{ margin-top:18px; }
}

/* Jerarquía tipográfica de la ficha (pedido: título grande, texto secundario más chico y gris).
   La plantilla base (style.css) trae el título centrado/justificado del layout viejo; se
   sobre-escribe aquí, scoped a .svc-widget, para el layout imagen-izquierda/texto-derecha. */
.svc-widget .product_detail_container{ text-align:left; }
.svc-widget .product_detail_container h2{
  font-size:22px; font-weight:800; text-align:left; color:var(--vn-tinta);
  line-height:1.22; letter-spacing:-.01em; margin-bottom:2px;
}
@media (min-width:768px){
  .svc-widget .product_detail_container h2{ font-size:26px; }
}

/* Descripción colapsada a ~6 líneas con botón "Ver más"; el script la muestra/oculta solo
   cuando el texto realmente desborda. Gris y más chica que el título para marcar jerarquía
   (antes heredaba el font-size/justify del layout viejo en style.css). */
.svc-widget .svc-desc-wrap{ position:relative; margin-bottom:6px; }
.svc-widget .svc-desc{
  max-height:8.4em; overflow:hidden; transition:max-height .3s var(--vn-ease);
  text-align:left; font-size:15.5px; line-height:1.6; color:var(--vn-gris);
}
.svc-widget .svc-desc.svc-desc--expanded{ max-height:999em; }
.svc-widget .svc-desc-toggle{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; margin:0 0 10px; padding:0;
  border:none; background:none; color:var(--vn-esmeralda); font-family:'Poppins',sans-serif;
  font-size:14px; font-weight:700; cursor:pointer;
}
.svc-widget .svc-desc-toggle:hover,
.svc-widget .svc-desc-toggle:focus-visible{ text-decoration:underline; }
.svc-widget .svc-desc-toggle .fa-chevron-up,
.svc-widget .svc-desc-toggle .fa-chevron-down{ font-size:12px; transition:transform .2s var(--vn-ease); }

/* Sección "Descripción técnica" / "Datos operativos" (ref. stripe.com/docs/api: contenido ancho
   a la izquierda, referencia estructurada más angosta a la derecha), debajo del bloque
   compra/galería que ahora queda compacto arriba (ref. exito.com). col-md-7/col-md-5 de Bootstrap
   ya dan la proporción ~58/42. */
.svc-widget .detail-specs-row{ margin-top:8px; row-gap:32px; }
.svc-widget .detail-specs-heading{
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--vn-gris); margin:0 0 12px;
}
@media (min-width:991px){
  .svc-widget .detail-specs-row{ margin-top:48px; }
}
/* 68ch: mismo techo de legibilidad que el resto del sitio (DESIGN.md, línea de prosa larga),
   ahora que la descripción vive en una columna más ancha que antes. */
.svc-widget .detail-specs-desc .svc-desc{ max-width:68ch; }

/* Tarjeta "Información adicional": esquinas redondeadas + sombra sutil (pedido de rediseño) para
   separarla como pieza propia. Sin margen vertical propio: el heading de la columna ya da el
   espacio de separación. */
.svc-widget .detail-info-card{
  margin:0; padding:16px 18px; background:var(--vn-panel);
  border:1px solid var(--vn-linea); border-radius:14px; box-shadow:0 2px 10px rgba(17,34,26,.06);
}
.svc-widget .detail-info-card__list{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:10px; }
/* min-width:0 en li y en el span: por default un flex item no encoge por debajo del ancho de su
   contenido (min-width:auto), así que un texto largo sin wrap (ej. un uso recomendado extenso)
   empujaba la tarjeta -y la columna completa- más ancha que la pantalla en vez de recortarse. */
.svc-widget .detail-info-card__list li{ display:flex; align-items:flex-start; gap:10px; min-width:0; font-size:14.5px; color:var(--vn-tinta); }
/* Sin elipsis: algunos campos de la ficha traen texto largo y se cortaban
   con "..." sin forma de leerlo completo. Ahora baja de renglón en vez de truncarse. */
.svc-widget .detail-info-card__list li span{ min-width:0; overflow:visible; text-overflow:clip; white-space:normal; word-wrap:break-word; }
/* Sin ancho fijo: el ancho de caja de los iconos de FA varía según el glifo (ej. fa-box-open es
   más ancho que fa-plug) y forzar un width chico recortaba/superponía el glifo sobre el texto.
   align-items:flex-start (arriba, no center) en el li de arriba porque el texto ahora puede
   ocupar varias líneas; position:relative + top alinea el ícono con la primera línea en vez
   de con el bloque completo. */
.svc-widget .detail-info-card__list i{
  flex:0 0 auto; font-size:14px; line-height:1; color:var(--vn-esmeralda);
  position:relative; top:.2em;
}
.svc-widget .detail-info-card__link{
  display:inline-flex; align-items:center; gap:6px; border:none; background:none; padding:0;
  font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:700; color:var(--vn-esmeralda); cursor:pointer;
}
.svc-widget .detail-info-card__link:hover,
.svc-widget .detail-info-card__link:focus-visible{ text-decoration:underline; }
.svc-widget .detail-info-card__link i{ font-size:11px; transition:transform .2s var(--vn-ease); }
.svc-widget .detail-info-card__link.collapsed:hover i{ transform:translateY(2px); }
.svc-widget .detail-info-card__link:not(.collapsed) i{ transform:rotate(180deg); }

/* Precio Final y Tachado: colores corporativos (verdes) en lugar de naranja,
   con un resalte muy sutil (text-shadow) pedido por el diseño. */
.svc-widget .detail-price{
  display:flex; flex-direction:column; gap:4px; margin:16px 0 6px;
}
.svc-widget .detail-price .detail-price-old-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.svc-widget .detail-price .precio-anterior{
  font-size:16px; color:#999; text-decoration:line-through; font-weight:500;
}
.svc-widget .detail-price .precio-descuento-badge{
  display:inline-flex; align-items:center; font-size:13px; font-weight:700; color:#fff;
  background:var(--vn-esmeralda); border-radius:4px; padding:3px 6px; letter-spacing:.02em;
}
.svc-widget .detail-price .detail-price-final-row{
  display:flex; align-items:baseline; gap:8px;
}
.svc-widget .detail-price .precio-actual{
  font-size:32px; font-weight:800; color:var(--vn-esmeralda); letter-spacing:-.01em; line-height:1;
  text-shadow:0 0 14px rgba(0, 113, 58, 0.12); /* Sombra clara/halo leve para resaltar */
}
@media (min-width:768px){
  .svc-widget .detail-price .precio-actual{ font-size:36px; }
}
.svc-widget .detail-price .precio-hoy{
  font-size:14px; font-weight:700; color:var(--vn-esmeralda);
}

/* Botones de acción: ref. Éxito + Apple Design (:active scale). Apilados a 100% de ancho;
   gap generoso (14px) para respirar. El selector de cantidad reemplaza a "Añadir al carrito"
   en el mismo espacio (ver .vn-buy-control en venta-carrito.css). */
.svc-widget .detail-cta-cluster{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
/* .btn-detail-primary vive en venta-carrito.css (compartido con montarControlCompra, reusado en
   el spotlight de index.php); aquí solo queda el botón de WhatsApp, propio de esta página. */
.svc-widget .btn-detail-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; width:100%; padding:14px 22px; border-radius:14px; border:none; cursor:pointer;
  font-family:'Poppins',sans-serif; font-size:15.5px; font-weight:700; color:#fff;
  transition:transform .14s var(--vn-ease), background-color .14s var(--vn-ease), box-shadow .14s var(--vn-ease);
  background:var(--vn-wa);
}
.svc-widget .btn-detail-whatsapp:hover{
  background:var(--vn-wa-hover); transform:translateY(-1px);
  box-shadow:0 6px 20px -6px rgba(37,211,102,.4);
}
/* Apple Design: scale down instantáneo al presionar ("respond on pointer-down, not release"). */
.svc-widget .btn-detail-whatsapp:active{ transform:scale(.97); transition-duration:80ms; }
/* .svc-menu-wrap ya no reparte mitad de ancho: solo envuelve el botón de WhatsApp + su
   dropdown de sucursales (position:relative, ver venta-carrito.css), a 100% de ancho. */
.svc-widget .detail-cta-cluster .svc-menu-wrap{ width:100%; }

/* "Cambiar sucursal": solo aparece cuando ya hay una preferida guardada (ver detailWaChange en
   details.php); mismo tratamiento tipográfico que .detail-info-card__link, sin fondo/borde
   propio para no competir visualmente con el botón de WhatsApp que sigue arriba. */
.svc-widget .detail-wa-change{
  align-self:center; margin-top:2px; border:none; background:none; padding:0;
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; color:var(--vn-gris); cursor:pointer;
}
.svc-widget .detail-wa-change:hover,
.svc-widget .detail-wa-change:focus-visible{ color:var(--vn-esmeralda); text-decoration:underline; }

/* Página de error de producto (id/token inválido o vencido, ver mostrar_error_producto() en
   details.php): mismo offset de navbar que .detail-top-actions, tarjeta centrada sin alarmar
   -tono "formal pero cercano", no un rojo de error-, con la misma salida que el resto del sitio. */
.svc-widget .detail-error{
  margin:110px 2vw 0; padding:48px 24px; text-align:center; display:flex;
  flex-direction:column; align-items:center; gap:14px;
}
.svc-widget .detail-error i{ font-size:40px; color:var(--vn-esmeralda); }
.svc-widget .detail-error h2{ font-size:22px; font-weight:800; color:var(--vn-tinta); margin:0; }
.svc-widget .detail-error p{ font-size:15px; color:var(--vn-gris); max-width:44ch; margin:0; }
.svc-widget .detail-error .detail-back-link{ margin-top:6px; }
@media (min-width:991px){
  .svc-widget .detail-error{ margin-top:120px; }
}

/* Modal "+ Información": secciones simples, sin depender de estilos de Bootstrap para el
   contenido (solo el modal en sí es de Bootstrap, ya cargado en toda la página). */
.svc-info-modal-section{ margin-bottom:22px; }
.svc-info-modal-section:last-child{ margin-bottom:0; }
.svc-info-modal-section h6{
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--vn-gris, #5f6f66); margin-bottom:10px;
}
.svc-info-modal-section p{ font-size:15px; line-height:1.6; color:#222; margin:0; }
.svc-info-modal-section ul{ margin:0; padding-left:20px; font-size:14.5px; line-height:1.7; color:#222; }
.svc-info-modal-specs{ width:100%; border-collapse:collapse; font-size:14px; }
.svc-info-modal-specs tr{ border-bottom:1px solid #e4eae3; }
.svc-info-modal-specs td{ padding:7px 6px; vertical-align:top; }
.svc-info-modal-specs td:first-child{ font-weight:600; color:#11221a; width:40%; }
.svc-info-modal-specs td:last-child{ color:#444; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Ficha Técnica Inline (ref. Apple Specs: tablas limpias, whitespace generoso,
   sin recuadros ni fondos verdes — la jerarquía la da la tipografía, no el
   contenedor). Reemplaza al modal como presentación principal de la ficha.
   ═══════════════════════════════════════════════════════════════════════════════ */
.svc-widget .detail-ficha{
  max-width:900px; margin:0 auto; padding:0 16px;
}
@media (min-width:991px){
  .svc-widget .detail-ficha{ margin-top:16px; padding:0; }
}

/* Cada grupo de specs: padding vertical generoso (ref. Apple: 40-60px entre
   secciones), separados por 1px de borde sutil — nunca fondo ni caja. */
.svc-widget .detail-ficha-section{
  padding:32px 0; border-bottom:1px solid var(--vn-linea);
}
.svc-widget .detail-ficha-section:last-child{ border-bottom:none; }
@media (min-width:768px){
  .svc-widget .detail-ficha-section{ padding:40px 0; }
}

/* Heading de sección: mismo tratamiento label que detail-specs-heading. */
.svc-widget .detail-ficha-heading{
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--vn-gris);
  margin:0 0 20px;
}

/* Tabla de especificaciones: 2 columnas (40% label / 60% valor), solo border-
   bottom por fila, sin bordes verticales ni fondos alternos (ref. Apple). */
.svc-widget .detail-ficha-table{
  width:100%; border-collapse:collapse;
}
.svc-widget .detail-ficha-table tr:last-child td{ border-bottom:none; }
.svc-widget .detail-ficha-table td{
  padding:14px 0; border-bottom:1px solid var(--vn-linea);
  vertical-align:top; font-size:15px; line-height:1.6;
}
.svc-widget .detail-ficha-table td:first-child{
  font-weight:600; color:var(--vn-tinta); width:40%; padding-right:24px;
}
.svc-widget .detail-ficha-table td:last-child{ color:var(--vn-gris); }
/* Móvil: tabla a 1 columna para que los labels largos no se corten. */
@media (max-width:575.98px){
  .svc-widget .detail-ficha-table,
  .svc-widget .detail-ficha-table tbody,
  .svc-widget .detail-ficha-table tr,
  .svc-widget .detail-ficha-table td{ display:block; width:100%; }
  .svc-widget .detail-ficha-table td:first-child{
    padding-bottom:2px; padding-right:0; font-size:13px;
  }
  .svc-widget .detail-ficha-table td:last-child{
    padding-top:0; padding-bottom:14px;
    border-bottom:1px solid var(--vn-linea);
  }
  .svc-widget .detail-ficha-table tr:last-child td:last-child{ border-bottom:none; }
}

/* Listas (características, incluye, usos, beneficios): tipografía Body,
   espaciado relajado, sin bullet exagerado. */
.svc-widget .detail-ficha-list{
  margin:0; padding-left:20px; list-style:disc;
  font-size:15px; line-height:1.7; color:var(--vn-gris);
}
.svc-widget .detail-ficha-list li{ padding:3px 0; }

/* Texto de prosa (descripción larga de la ficha). */
.svc-widget .detail-ficha-prose{
  font-size:15px; line-height:1.6; color:var(--vn-gris);
  max-width:68ch; margin:0;
}