/* =========================================================
   lq-tabs -- primitive genérica de tabs (desktop) / acordeón (mobile)
   Ver frontend.js para el porqué del DOM plano (botón, panel, botón,
   panel...) y del patrón ARIA "disclosure button" en vez de tablist.

   Fase 14 (resolución visual completa): el tratamiento anterior --
   línea inferior fina, texto 15px, sin superficie propia -- leía como
   un tab de panel de administración, no como parte del storefront
   ("no quiero tabs genéricos de admin"). Ahora: en desktop, un
   control segmentado (nav en su propia "pista" con fondo, el tab
   activo como píldora sólida) + el panel como una card propia con
   superficie, no texto flotando sobre blanco. En mobile, cada fila de
   acordeón es su propia superficie con radio y estado activo visible
   -- no una lista de texto con líneas divisorias.
   ========================================================= */

.lq-tabs {
  font-family: var(--loq-font-family);
  width: 100%;
}

/* =========================================================
   MOBILE (default): acordeón -- cada fila es su propia superficie
   ========================================================= */

.lq-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--loq-space-1);
}

.lq-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: var(--loq-surface-alt);
  border: 1px solid transparent;
  border-radius: var(--loq-radius-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--loq-font-semibold, 600);
  color: var(--loq-text, #0D1214);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--loq-motion, 0.2s ease), color var(--loq-motion, 0.2s ease);
}

.lq-tabs__tab:hover {
  color: var(--loq-primary, #5a38e5);
}

.lq-tabs__tab[aria-expanded="true"] {
  background: var(--loq-text, #1d1d1f);
  color: #ffffff;
  border-radius: var(--loq-radius-sm) var(--loq-radius-sm) 0 0;
}

.lq-tabs__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--loq-text-muted, #6e6e73);
}

.lq-tabs__tab[aria-expanded="true"] .lq-tabs__chevron {
  transform: rotate(180deg);
  color: #ffffff;
}

/* ---- Panel ---- */
.lq-tabs__panel {
  padding: 20px 18px 24px;
  background: var(--loq-surface);
  border: 1px solid var(--loq-border);
  border-top: none;
  border-radius: 0 0 var(--loq-radius-sm) var(--loq-radius-sm);
  margin-top: -6px;
}

.lq-tabs__panel[hidden] {
  display: none;
}

/* Descripción: ancho de línea legible incluso cuando el panel es
   ancho completo -- "no texto perdido en una superficie enorme". Los
   demás paneles (specs en tabla, reviews con su propio grid) no lo
   necesitan y no lo tienen. */
.lq-tabs__panel .lqsp-desc-content {
  max-width: 68ch;
}

/* =========================================================
   DESKTOP: control segmentado + panel como card propia. Misma
   estructura plana, reagrupada solo con CSS Grid (sin wrapper de nav
   ni reparenting por JS). Todos los botones pasan a la fila 1 (una
   columna cada uno, por orden de aparición); todos los paneles
   comparten la fila 2, ancho completo -- el [hidden] de cada panel
   decide cuál se ve. Soporta hasta 6 tabs (de sobra para
   Descripción/Especificaciones/Garantía/Reseñas).
   ========================================================= */

@media (min-width: 1024px) {
  .lq-tabs {
    display: grid;
    grid-template-columns: repeat(6, auto) 1fr;
    column-gap: 4px;
    row-gap: 0;
    align-items: start;
  }

  /* "Pista" del control segmentado -- el fondo que agrupa visualmente
     los botones en una sola superficie, como un segmented control
     nativo. Ocupa toda la fila 1 detrás de los tabs. */
  .lq-tabs::before {
    content: "";
    grid-row: 1;
    grid-column: 1 / -1;
    background: var(--loq-surface-alt);
    border-radius: var(--loq-radius-pill);
    height: 52px;
    align-self: start;
  }

  .lq-tabs__tab {
    grid-row: 1;
    width: auto;
    padding: 0 22px;
    height: 52px;
    background: transparent;
    border: none;
    border-radius: var(--loq-radius-pill);
    z-index: 1;
  }

  .lq-tabs__tab[aria-expanded="true"] {
    background: var(--loq-text, #1d1d1f);
    color: #ffffff;
    border-radius: var(--loq-radius-pill);
  }

  .lq-tabs__tab:nth-of-type(1) { grid-column: 1; }
  .lq-tabs__tab:nth-of-type(2) { grid-column: 2; }
  .lq-tabs__tab:nth-of-type(3) { grid-column: 3; }
  .lq-tabs__tab:nth-of-type(4) { grid-column: 4; }
  .lq-tabs__tab:nth-of-type(5) { grid-column: 5; }
  .lq-tabs__tab:nth-of-type(6) { grid-column: 6; }

  /* Control segmentado no necesita chevron -- la píldora sólida ya
     marca selección, y el chevron (pensado para "expandir") no aplica
     a un panel que siempre está expandido en este layout. */
  .lq-tabs__chevron {
    display: none;
  }

  .lq-tabs__panel {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: var(--loq-space-3);
    padding: var(--loq-space-4) var(--loq-space-4);
    border: 1px solid var(--loq-border);
    border-radius: var(--loq-radius);
  }
}

/* Direct GDS v1 consumer: pdp info tabs */
html[data-gds-version="1"] .lqsp-desc-content { color:var(--gds-color-text);font-family:var(--gds-font-body); }

/* Module-owned conventional heading consumes the GDS type scale. */
html[data-gds-version="1"] .lqsp-desc-content h2 {
  color: var(--gds-color-text);
  font-family: var(--gds-font-heading);
  font-size: var(--gds-font-size-h2);
  font-weight: var(--gds-font-weight-heading);
  line-height: var(--gds-line-height-heading);
}
html[data-gds-version="1"] .lqsp-desc-content h3 {
  color: var(--gds-color-text);
  font-family: var(--gds-font-heading);
  font-size: var(--gds-font-size-h3);
  font-weight: var(--gds-font-weight-heading);
  line-height: var(--gds-line-height-heading);
}
html[data-gds-version="1"] .lq-tabs__panel {
  padding: var(--gds-card-padding);
  color: var(--gds-color-text);
  background: var(--gds-color-surface);
  border-color: var(--gds-color-border);
  border-radius: var(--gds-card-radius);
}