/* ============================================================
   Descripciones gv-desc · ajustes de la tienda
   Traídos del CSS propio que ABC y GV usaban en Urutienda
   (electro-abc-css-categorias-mobile.css, 2026-09-28): secciones 3, 3b,
   4, 7 (descripción en celular) y 18.
   El color del control de la ficha técnica sale del panel Vayori
   (--vy-desc-accent): ámbar #c26a00 en ABC, azul #0367bf en GV.
   El prefijo «body» gana sobre el CSS universal y sobre el que inyecta
   gv-desc.js en tiempo de ejecución.
   ============================================================ */

.gv-desc {
  --vy-desc-navy: #0f172a;
  --vy-desc-text: #334155;
  --vy-desc-sky: #f1f7fc;
  --vy-desc-blue-text: #075a9c;
  --vy-desc-wa: #15803d;
  --vy-desc-wa-hover: #116a32;
  --vy-desc-chevron: 10px;
  --vy-desc-stroke: 2px;
}

/* 3 · Encabezado claro: fondo celeste suave, nada oscuro. */
body .gv-desc .gv-hero { background: var(--vy-desc-sky); color: var(--vy-desc-text); border: 1px solid #dbe7f1; border-radius: 14px; box-shadow: none; padding: 20px; }
body .gv-desc .gv-title { color: var(--vy-desc-navy) !important; font-size: 20px; line-height: 1.35; font-weight: 700; }
body .gv-desc .gv-lead { color: var(--vy-desc-text); font-size: 15px; line-height: 1.65; opacity: 1; }
body .gv-desc .gv-pill { background: #fff; color: var(--vy-desc-text); border: 1px solid #dbe7f1; border-radius: 999px; }
body .gv-desc .gv-share { background: #fff; color: var(--vy-desc-blue-text); border: 1px solid #cbd5e1; border-radius: 10px; min-height: 44px; }
body .gv-desc .gv-wa { background: var(--vy-desc-wa); color: #fff; border-radius: 10px; min-height: 46px; box-shadow: none; }
body .gv-desc.gv-js .gv-wa:hover { background: var(--vy-desc-wa-hover); }

/* 4 · Orden: la ficha técnica va al final, antes del cierre. */
body .gv-desc:has(> [data-gv-nav="Ficha técnica"]) { display: flex; flex-direction: column; }
body .gv-desc:has(> [data-gv-nav="Ficha técnica"]) > * { order: 25; min-width: 0; }
body .gv-desc > .gv-hero { order: 0; }
body .gv-desc > [data-gv-nav="Características"] { order: 10; }
body .gv-desc > [data-gv-nav="Tecnologías"] { order: 30; }
body .gv-desc > [data-gv-nav="Preguntas frecuentes"] { order: 40; }
body .gv-desc > [data-gv-nav="Ficha técnica"] { order: 45; }
body .gv-desc > .gv-final { order: 50; }

/* 18 · Desplegables: chevron y no + / −, porque el selector de cantidad ya
   usa esos signos. Abajo cerrado, arriba abierto. */
body .gv-desc .gv-acc summary::after {
  content: "";
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--vy-desc-chevron);
  height: var(--vy-desc-chevron);
  margin-left: auto;
  margin-top: -4px;
  border: 0;
  border-right: var(--vy-desc-stroke) solid var(--gv-primary);
  border-bottom: var(--vy-desc-stroke) solid var(--gv-primary);
  transform: rotate(45deg);
  transition: transform .18s ease, margin-top .18s ease;
}
body .gv-desc .gv-acc[open] summary::after { content: ""; margin-top: 4px; transform: rotate(-135deg); }

/* Si la descripción trae el chevron como SVG propio, se apaga el dibujado. */
body .gv-desc .gv-acc summary:has(> svg)::after { display: none; }
body .gv-desc .gv-acc summary > svg { margin-left: auto; flex: 0 0 auto; color: var(--gv-primary); transition: transform .18s ease; }
body .gv-desc .gv-acc[open] summary > svg { transform: rotate(180deg); }

/* La ficha técnica es la última sección: control centrado, sin caja,
   con el color de acento de la tienda. */
body .gv-desc .gv-section:last-of-type .gv-acc { border: 0; background: transparent; box-shadow: none; margin-bottom: 0; }
body .gv-desc .gv-section:last-of-type .gv-acc summary { justify-content: center; min-height: auto; padding: 16px 0; gap: 10px; font-size: 14px; border-top: 1px solid var(--gv-line); border-bottom: 1px solid var(--gv-line); }
body .gv-desc .gv-section:last-of-type .gv-acc summary .gv-icon { display: none; }
body .gv-desc .gv-section:last-of-type .gv-acc summary::after { margin-left: 0; width: 11px; height: 11px; border-right-color: var(--vy-desc-accent, #c26a00); border-bottom-color: var(--vy-desc-accent, #c26a00); border-right-width: 2.5px; border-bottom-width: 2.5px; }
body .gv-desc .gv-section:last-of-type .gv-acc summary > svg { margin-left: 0; color: var(--vy-desc-accent, #c26a00); }
body .gv-desc .gv-acc-body .gv-table-wrap { border: 0; border-radius: 0; box-shadow: none; }

/* El foco es el azul para texto del comercio (--gv-focus, en gv-desc.css).
   Esta regla gana sobre el amarillo #ffb020 (1,83:1) que traen las
   descripciones viejas pegadas con su propio CSS. */
body .gv-desc.gv-js summary:focus-visible { outline: 3px solid var(--gv-focus); border-radius: 8px; }

/* 7 · Descripción en celular. */
@media (max-width: 767px) {
  body .gv-desc { padding-left: 0; padding-right: 0; }
  body .gv-desc .gv-hero { padding: 16px; }
  body .gv-desc .gv-title { font-size: 18px; }
}

/* WhatsApp y compartir van debajo de los botones de compra de la ficha; los
   del encabezado del formato anterior no se muestran. */
body .gv-desc .gv-wa, body .gv-desc .gv-share { display: none !important; }