/**
 * Widget información adicional (pestañas) — contrato BEM (.infocode-extra-info).
 *
 * La franja de tabs NO lleva fondo propio (comportamiento original): es transparente
 * y hereda el body del tema (blanco en default/pink/green/transparent, oscuro en dark).
 * Solo se estilizan colores de pestañas y sombra.
 */

.infocode-extra-info {
    --infocode-extra-info-tab-label: var(--primary-text);
    --infocode-extra-info-tab-accent: var(--primary);
    --infocode-extra-info-panels-bg: transparent;

    /* tab0 — Información de marca (brand-information) — defaults compartidos */
    --infocode-extra-info-brand-title-fg: var(--primary-text);
    --infocode-extra-info-brand-title-font-size: 0.875rem;
    --infocode-extra-info-brand-title-font-weight: 700;
    --infocode-extra-info-brand-title-text-transform: uppercase;
    --infocode-extra-info-brand-title-margin-bottom: 0.5rem;

    --infocode-extra-info-brand-video-radius: 0;
    --infocode-extra-info-brand-video-min-height: 16.625rem;

    --infocode-extra-info-social-link-fg: #ffffff;
    --infocode-extra-info-social-link-padding: 0.75rem;
    --infocode-extra-info-social-link-radius: 0.375rem;
    --infocode-extra-info-social-facebook-bg: #4167b2;
    --infocode-extra-info-social-twitter-bg: #1da0f3;
    /* Instagram: degradado por defecto (embed-safe). Fuente del JPG: resources/static/ig_gradient.jpg
       Legacy markup: bg-[url('@/static/ig_gradient.jpg')] (@/static → resources/static, vía build app.css).
       BEM con imagen: --infocode-extra-info-social-instagram-bg: url('…'); → URL pública servida al navegador. */
    --infocode-extra-info-social-instagram-bg: linear-gradient(to top right, #ec4899, #f87c22, #9332bf);
    --infocode-extra-info-social-tiktok-bg: #000000;
    --infocode-extra-info-social-website-bg: #1479ff;
    --infocode-extra-info-social-whatsapp-bg: #26d367;

    --infocode-extra-info-manual-description-fg: var(--primary-text);

    /* Secciones GS1 (pH3Info) — defaults compartidos */
    --infocode-extra-info-section-title-fg: var(--primary-text);
    --infocode-extra-info-section-title-bg: transparent;
    --infocode-extra-info-section-title-font-weight: 700;
    --infocode-extra-info-section-title-text-transform: uppercase;
    --infocode-extra-info-section-title-margin-top: 1rem;

    --infocode-extra-info-section-content-fg: var(--primary-text);
    --infocode-extra-info-section-content-bg: transparent;
    --infocode-extra-info-section-content-font-weight: 400;

    /* tab1 — alérgenos, textil (grupo 2), electro */
    --infocode-extra-info-allergens-title-fg: var(--primary-text);
    --infocode-extra-info-allergens-title-font-weight: 700;
    --infocode-extra-info-allergens-title-text-transform: uppercase;
    --infocode-extra-info-allergens-title-margin-top: 2rem;
    --infocode-extra-info-allergens-level-fg: var(--primary);
    --infocode-extra-info-allergens-icon-size: 5rem;

    --infocode-extra-info-textile-heading-fg: var(--primary-text);
    --infocode-extra-info-textile-heading-font-weight: 700;
    --infocode-extra-info-textile-label-fg: var(--primary-text);
    --infocode-extra-info-textile-item-fg: var(--primary-text);
    --infocode-extra-info-textile-instruction-fg: var(--primary-text);
    --infocode-extra-info-textile-instruction-icon-bg: #ffffff;

    --infocode-extra-info-electro-section-heading-fg: var(--primary-text);
    --infocode-extra-info-electro-section-heading-font-weight: 700;
    --infocode-extra-info-electro-section-heading-text-transform: uppercase;
    --infocode-extra-info-electro-field-title-fg: var(--primary);
    --infocode-extra-info-electro-field-title-font-weight: 700;
    --infocode-extra-info-electro-field-title-font-size: 0.875rem;
    --infocode-extra-info-electro-field-content-fg: var(--primary-text);
    --infocode-extra-info-electro-connection-border: #d1d5db;

    /* tab2 — acordeón de ingredientes */
    --infocode-extra-info-ingredient-title-fg: var(--primary-text);
    --infocode-extra-info-ingredient-title-font-weight: 700;
    --infocode-extra-info-ingredient-title-text-transform: uppercase;
    --infocode-extra-info-ingredient-active-fg: var(--primary);
    --infocode-extra-info-ingredient-strength-fg: var(--primary-text);
    --infocode-extra-info-ingredient-chevron-fill: var(--primary-text);
    --infocode-extra-info-ingredient-chevron-active-fill: var(--primary);
    --infocode-extra-info-ingredient-description-fg: var(--primary-text);
    --infocode-extra-info-ingredient-list-divider: #e5e7eb;

    /* tab3 — tabla nutricional (defaults; font-bold/bg-contrast se mantienen en markup) */
    --infocode-extra-info-nutritional-summary-title-fg: var(--primary-text);
    --infocode-extra-info-nutritional-summary-value-fg: var(--primary-text);
    --infocode-extra-info-nutritional-table-title-fg: var(--primary-text);
    --infocode-extra-info-nutritional-row-label-fg: var(--primary-text);
    --infocode-extra-info-nutritional-row-value-fg: var(--primary-text);
    --infocode-extra-info-nutritional-row-divider: #e5e7eb;

    /* tab4 — normatividad (certificaciones, archivos, NOM) */
    --infocode-extra-info-normativity-section-title-fg: var(--primary);
    --infocode-extra-info-normativity-section-title-font-size: 0.875rem;
    --infocode-extra-info-normativity-section-title-font-weight: 700;
    --infocode-extra-info-normativity-section-title-text-transform: uppercase;
    --infocode-extra-info-normativity-certification-name-fg: var(--primary-text);
    --infocode-extra-info-normativity-certification-label-fg: var(--primary);
    --infocode-extra-info-normativity-certification-manufacturer-fg: var(--primary-text);
    --infocode-extra-info-normativity-preview-link-fg: #111827;
    --infocode-extra-info-normativity-file-name-fg: var(--primary-text);
    --infocode-extra-info-normativity-nom-name-fg: var(--primary-text);
    --infocode-extra-info-normativity-nom-definition-fg: var(--secondary-text);

    /* tab5 — etiqueta electrónica */
    --infocode-extra-info-electronic-label-title-fg: var(--primary);
    --infocode-extra-info-electronic-label-title-font-weight: 700;
    --infocode-extra-info-electronic-label-title-text-transform: uppercase;
    --infocode-extra-info-electronic-label-provider-title-fg: var(--primary-text);
    --infocode-extra-info-electronic-label-provider-title-font-weight: 700;
    --infocode-extra-info-electronic-label-provider-title-text-transform: uppercase;
    --infocode-extra-info-electronic-label-field-label-fg: var(--primary);
    --infocode-extra-info-electronic-label-field-label-font-weight: 700;
    --infocode-extra-info-electronic-label-field-value-fg: var(--primary-text);
    --infocode-extra-info-electronic-label-field-link-fg: var(--primary);
    --infocode-extra-info-electronic-label-contact-divider: #d1d5db;

    /* tab6 — sostenibilidad / reciclaje */
    --infocode-extra-info-sustainability-section-title-fg: var(--primary);
    --infocode-extra-info-sustainability-section-title-font-weight: 700;
    --infocode-extra-info-sustainability-section-title-text-transform: uppercase;
    --infocode-extra-info-sustainability-subtitle-fg: var(--primary);
    --infocode-extra-info-sustainability-instruction-text-fg: var(--primary-text);
    --infocode-extra-info-sustainability-material-name-fg: var(--primary);
    --infocode-extra-info-sustainability-material-description-fg: var(--primary-text);
    --infocode-extra-info-sustainability-material-icon-bg: #ffffff;
    --infocode-extra-info-sustainability-recyclers-title-fg: var(--primary);
    --infocode-extra-info-sustainability-divider: #d1d5db;
    --infocode-extra-info-sustainability-map-height: 600px;
}

.infocode-extra-info__tab-bar,
.infocode-extra-info__tab-bar.shadow-tab-buttons,
.infocode-extra-info__tab-bar-inner {
    background: none !important;
    background-color: transparent !important;
    box-shadow: var(--shadow, 0 9px 9px 5px rgba(0, 0, 0, 0.05));
}

.infocode-extra-info__panels {
    background-color: var(--infocode-extra-info-panels-bg);
}

.infocode-extra-info__tabs .text-primary {
    color: var(--infocode-extra-info-tab-label) !important;
}

.infocode-extra-info .stroke-primary {
    stroke: var(--infocode-extra-info-tab-label) !important;
}

.infocode-extra-info .group:hover .group-hover\:text-accent {
    color: var(--infocode-extra-info-tab-accent) !important;
}

.infocode-extra-info .group:hover .group-hover\:stroke-accent {
    stroke: var(--infocode-extra-info-tab-accent) !important;
}

.infocode-extra-info .activeclass {
    border-color: var(--infocode-extra-info-tab-accent) !important;
}

.infocode-extra-info .activeclass svg {
    stroke: var(--infocode-extra-info-tab-accent) !important;
}

.infocode-extra-info .activeclass p {
    color: var(--infocode-extra-info-tab-accent) !important;
}

/* tab0 — Información de marca (brand-information). Estructura BEM: __{sección} → -title / -content. */
.infocode-extra-info__more-information-title,
.infocode-extra-info__social-media-title,
.infocode-extra-info__manual-of-use-title {
    color: var(--infocode-extra-info-brand-title-fg);
    font-size: var(--infocode-extra-info-brand-title-font-size);
    font-weight: var(--infocode-extra-info-brand-title-font-weight);
    text-transform: var(--infocode-extra-info-brand-title-text-transform);
    margin-bottom: var(--infocode-extra-info-brand-title-margin-bottom);
}

.infocode-extra-info__more-information-video {
    border-radius: var(--infocode-extra-info-brand-video-radius);
    min-height: var(--infocode-extra-info-brand-video-min-height);
}

.infocode-extra-info__social-link {
    padding: var(--infocode-extra-info-social-link-padding);
    border-radius: var(--infocode-extra-info-social-link-radius);
    color: var(--infocode-extra-info-social-link-fg);
}

.infocode-extra-info__social-link--facebook {
    background: var(--infocode-extra-info-social-facebook-bg);
}

.infocode-extra-info__social-link--twitter {
    background: var(--infocode-extra-info-social-twitter-bg);
}

.infocode-extra-info__social-link--instagram {
    background: var(--infocode-extra-info-social-instagram-bg);
    /* Original Tailwind (gradiente en clase, no variable):
       background: linear-gradient(to top right, #ec4899, #f87c22, #9332bf); */
    /* Original imagen (markup legacy bg-[url('@/static/ig_gradient.jpg')], fuente resources/static/ig_gradient.jpg):
       background: url('…') center / cover no-repeat;  ← URL pública (Vite/build o asset publicado en el host) */
}

.infocode-extra-info__social-link--tiktok {
    background: var(--infocode-extra-info-social-tiktok-bg);
}

.infocode-extra-info__social-link--website {
    background: var(--infocode-extra-info-social-website-bg);
}

.infocode-extra-info__social-link--whatsapp {
    background: var(--infocode-extra-info-social-whatsapp-bg);
}

.infocode-extra-info__manual-of-use-description {
    color: var(--infocode-extra-info-manual-description-fg);
}

/* tab1 — atributos GS1 (product-information). Claves = snake_case → kebab-case. */
.infocode-extra-info__storage-instructions-title,
.infocode-extra-info__usage-instructions-title,
.infocode-extra-info__ingredient-statement-title,
.infocode-extra-info__usage-suggested-title,
.infocode-extra-info__health-claim-description-title,
.infocode-extra-info__allergen-statement-title,
.infocode-extra-info__preparation-title,
.infocode-extra-info__wine-houses-title,
.infocode-extra-info__alcoholic-beverage-region-title,
.infocode-extra-info__year-of-harvest-title,
.infocode-extra-info__packaging-marked-label-accreditation-code-title,
.infocode-extra-info__drug-interactions-title,
.infocode-extra-info__dosage-restriction-limits-title,
.infocode-extra-info__registration-agency-title,
.infocode-extra-info__registration-number-title {
    color: var(--infocode-extra-info-section-title-fg);
    background-color: var(--infocode-extra-info-section-title-bg);
    font-weight: var(--infocode-extra-info-section-title-font-weight);
    text-transform: var(--infocode-extra-info-section-title-text-transform);
    margin-top: var(--infocode-extra-info-section-title-margin-top);
}

.infocode-extra-info__storage-instructions-content,
.infocode-extra-info__usage-instructions-content,
.infocode-extra-info__ingredient-statement-content,
.infocode-extra-info__usage-suggested-content,
.infocode-extra-info__health-claim-description-content,
.infocode-extra-info__allergen-statement-content,
.infocode-extra-info__preparation-content,
.infocode-extra-info__wine-houses-content,
.infocode-extra-info__alcoholic-beverage-region-content,
.infocode-extra-info__year-of-harvest-content,
.infocode-extra-info__packaging-marked-label-accreditation-code-content,
.infocode-extra-info__drug-interactions-content,
.infocode-extra-info__dosage-restriction-limits-content,
.infocode-extra-info__registration-agency-content,
.infocode-extra-info__registration-number-content {
    color: var(--infocode-extra-info-section-content-fg);
    background-color: var(--infocode-extra-info-section-content-bg);
    font-weight: var(--infocode-extra-info-section-content-font-weight);
}

/* tab1 — alérgenos (allergens / allergensByLevel). */
.infocode-extra-info__allergens-title {
    color: var(--infocode-extra-info-allergens-title-fg);
    font-weight: var(--infocode-extra-info-allergens-title-font-weight);
    text-transform: var(--infocode-extra-info-allergens-title-text-transform);
    margin-top: var(--infocode-extra-info-allergens-title-margin-top);
}

.infocode-extra-info__allergens-level-title {
    margin-top: 0.75rem;
    color: var(--infocode-extra-info-allergens-level-fg);
}

.infocode-extra-info__allergens-icon {
    width: var(--infocode-extra-info-allergens-icon-size);
    height: var(--infocode-extra-info-allergens-icon-size);
}

/* tab1 — textil grupo 2 (composición e instrucciones de cuidado). */
.infocode-extra-info__textile-composition-title,
.infocode-extra-info__textile-care-instructions-title {
    color: var(--infocode-extra-info-textile-heading-fg);
    font-weight: var(--infocode-extra-info-textile-heading-font-weight);
}

.infocode-extra-info__textile-material-label,
.infocode-extra-info__textile-composition-item-value,
.infocode-extra-info__textile-care-instruction-text {
    color: var(--infocode-extra-info-textile-item-fg);
}

.infocode-extra-info__textile-care-instruction-icon-wrap {
    background-color: var(--infocode-extra-info-textile-instruction-icon-bg);
}

/* tab1 — electro (características, dimensiones, garantía, accesorios). */
.infocode-extra-info__electro-section-heading {
    color: var(--infocode-extra-info-electro-section-heading-fg);
    font-weight: var(--infocode-extra-info-electro-section-heading-font-weight);
    text-transform: var(--infocode-extra-info-electro-section-heading-text-transform);
}

.infocode-extra-info__power-supply-title,
.infocode-extra-info__volts-title,
.infocode-extra-info__os-title,
.infocode-extra-info__connections-title,
.infocode-extra-info__internal-memory-title,
.infocode-extra-info__screentype-title,
.infocode-extra-info__height-title,
.infocode-extra-info__width-title,
.infocode-extra-info__depth-title,
.infocode-extra-info__gross-weight-title,
.infocode-extra-info__warranty-duration-title,
.infocode-extra-info__warranty-description-title {
    color: var(--infocode-extra-info-electro-field-title-fg);
    font-weight: var(--infocode-extra-info-electro-field-title-font-weight);
    font-size: var(--infocode-extra-info-electro-field-title-font-size);
}

.infocode-extra-info__power-supply-content,
.infocode-extra-info__volts-content,
.infocode-extra-info__os-content,
.infocode-extra-info__internal-memory-content,
.infocode-extra-info__screentype-content,
.infocode-extra-info__height-content,
.infocode-extra-info__width-content,
.infocode-extra-info__depth-content,
.infocode-extra-info__gross-weight-content,
.infocode-extra-info__warranty-duration-content,
.infocode-extra-info__warranty-description-content,
.infocode-extra-info__included-accessories-content {
    color: var(--infocode-extra-info-electro-field-content-fg);
}

.infocode-extra-info__connections-tag {
    border-color: var(--infocode-extra-info-electro-connection-border);
}

/* tab2 — acordeón de ingredientes (ingredientsDescription / ingredientsTab). */
.infocode-extra-info__ingredients-list > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--infocode-extra-info-ingredient-list-divider);
}

.infocode-extra-info__ingredient-name {
    color: var(--infocode-extra-info-ingredient-title-fg);
    font-weight: var(--infocode-extra-info-ingredient-title-font-weight);
    text-transform: var(--infocode-extra-info-ingredient-title-text-transform);
}

.infocode-extra-info__ingredient-strength {
    color: var(--infocode-extra-info-ingredient-strength-fg);
}

.infocode-extra-info__ingredient-description {
    color: var(--infocode-extra-info-ingredient-description-fg);
}

.infocode-extra-info__ingredient-name.text-accent,
.infocode-extra-info__ingredient-meta.text-accent,
.infocode-extra-info__ingredient-strength.text-accent {
    color: var(--infocode-extra-info-ingredient-active-fg) !important;
}

.infocode-extra-info__ingredient-chevron.fill-primary {
    fill: var(--infocode-extra-info-ingredient-chevron-fill) !important;
}

.infocode-extra-info__ingredient-chevron.fill-accent {
    fill: var(--infocode-extra-info-ingredient-chevron-active-fill) !important;
}

/* tab3 — tabla nutricional. Los pesos bold y bg-contrast permanecen en el markup. */
.infocode-extra-info__energetic-per-container-title,
.infocode-extra-info__serving-size-title,
.infocode-extra-info__portions-per-container-title,
.infocode-extra-info__nutritional-table-title {
    color: var(--infocode-extra-info-nutritional-summary-title-fg);
}

.infocode-extra-info__energetic-per-container-value,
.infocode-extra-info__serving-size-value,
.infocode-extra-info__portions-per-container-value {
    color: var(--infocode-extra-info-nutritional-summary-value-fg);
}

.infocode-extra-info__nutritional-row-label {
    color: var(--infocode-extra-info-nutritional-row-label-fg);
}

.infocode-extra-info__nutritional-row-value {
    color: var(--infocode-extra-info-nutritional-row-value-fg);
}

.infocode-extra-info__nutritional-row-group.divide-y > :not([hidden]) ~ :not([hidden]),
.infocode-extra-info__nutritional-others.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--infocode-extra-info-nutritional-row-divider);
}

/* tab4 — normatividad (certificaciones, archivos, NOM). */
.infocode-extra-info__certifications-title,
.infocode-extra-info__noms-title {
    color: var(--infocode-extra-info-normativity-section-title-fg);
    font-size: var(--infocode-extra-info-normativity-section-title-font-size);
    font-weight: var(--infocode-extra-info-normativity-section-title-font-weight);
    text-transform: var(--infocode-extra-info-normativity-section-title-text-transform);
}

.infocode-extra-info__certification-name {
    color: var(--infocode-extra-info-normativity-certification-name-fg);
}

.infocode-extra-info__certification-integrated-by-title {
    color: var(--infocode-extra-info-normativity-certification-label-fg);
}

.infocode-extra-info__certification-manufacturer {
    color: var(--infocode-extra-info-normativity-certification-manufacturer-fg);
}

.infocode-extra-info__certification-preview-link {
    color: var(--infocode-extra-info-normativity-preview-link-fg);
}

.infocode-extra-info__certification-file-name {
    color: var(--infocode-extra-info-normativity-file-name-fg);
}

.infocode-extra-info__nom-name {
    color: var(--infocode-extra-info-normativity-nom-name-fg);
}

.infocode-extra-info__nom-definition {
    color: var(--infocode-extra-info-normativity-nom-definition-fg);
}

/* tab5 — etiqueta electrónica (electronicLabelInformation). */
.infocode-extra-info__electronic-label-title {
    color: var(--infocode-extra-info-electronic-label-title-fg);
    font-weight: var(--infocode-extra-info-electronic-label-title-font-weight);
    text-transform: var(--infocode-extra-info-electronic-label-title-text-transform);
}

.infocode-extra-info__electronic-label-provider-title {
    color: var(--infocode-extra-info-electronic-label-provider-title-fg);
    font-weight: var(--infocode-extra-info-electronic-label-provider-title-font-weight);
    text-transform: var(--infocode-extra-info-electronic-label-provider-title-text-transform);
}

.infocode-extra-info__electronic-label-field-label {
    color: var(--infocode-extra-info-electronic-label-field-label-fg);
    font-weight: var(--infocode-extra-info-electronic-label-field-label-font-weight);
}

.infocode-extra-info__electronic-label-field-value {
    color: var(--infocode-extra-info-electronic-label-field-value-fg);
}

.infocode-extra-info__electronic-label-field-link {
    color: var(--infocode-extra-info-electronic-label-field-link-fg);
}

.infocode-extra-info__electronic-label-contact-divider {
    border-color: var(--infocode-extra-info-electronic-label-contact-divider);
}

/* tab6 — sostenibilidad (sustainability). */
.infocode-extra-info__sustainability-recycling-title,
.infocode-extra-info__sustainability-material-title {
    color: var(--infocode-extra-info-sustainability-section-title-fg);
    font-weight: var(--infocode-extra-info-sustainability-section-title-font-weight);
    text-transform: var(--infocode-extra-info-sustainability-section-title-text-transform);
}

.infocode-extra-info__sustainability-recycling-question {
    color: var(--infocode-extra-info-sustainability-subtitle-fg);
}

.infocode-extra-info__sustainability-recyclers-title {
    color: var(--infocode-extra-info-sustainability-recyclers-title-fg);
}

.infocode-extra-info__sustainability-instruction-text {
    color: var(--infocode-extra-info-sustainability-instruction-text-fg);
}

.infocode-extra-info__sustainability-material-name {
    color: var(--infocode-extra-info-sustainability-material-name-fg);
}

.infocode-extra-info__sustainability-material-description {
    color: var(--infocode-extra-info-sustainability-material-description-fg);
}

.infocode-extra-info__sustainability-material-icon-wrap {
    background-color: var(--infocode-extra-info-sustainability-material-icon-bg);
}

.infocode-extra-info__sustainability-recycling-divider,
.infocode-extra-info__sustainability-material-divider {
    border-color: var(--infocode-extra-info-sustainability-divider);
}

.infocode-extra-info__sustainability-map-canvas {
    height: var(--infocode-extra-info-sustainability-map-height);
}