/**
 * Widget información adicional (pestañas) — contrato BEM (.infocode-extra-info).
 * Se carga después del tema y de infocode-gallery / infocode-details.
 *
 * Los colores de pestañas deben alinearse con public/css/default.css | pink.css | …
 * (sección "EXTRA INFO - TABS"): etiqueta en --primary-text, acento activo/hover en --primary.
 * Aquí el alcance vuelve a fijarse bajo .infocode-extra-info para que no pierdan efecto las utilidades .text-primary
 * del markup y para que quien integra el widget pueda sobrescribir con variables del bloque.
 */

.infocode-extra-info {
    --infocode-extra-info-tab-label: var(--primary-text);
    --infocode-extra-info-tab-accent: var(--primary);
    --infocode-extra-info-tab-bar-bg: var(--contrast-bg, rgba(20, 121, 255, 0.1));
    --infocode-extra-info-panels-bg: transparent;
}

.infocode-extra-info__tab-bar {
    background-color: var(--infocode-extra-info-tab-bar-bg);
}

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

/* Etiquetas inactivas (mismo token que .text-primary en los botones del theme) */
.infocode-extra-info__tabs .text-primary {
    color: var(--infocode-extra-info-tab-label) !important;
}

/* Iconos en estado reposo (mismo criterio que .stroke-primary en el theme) */
.infocode-extra-info .stroke-primary {
    stroke: var(--infocode-extra-info-tab-label) !important;
}

/* Hover: mismo criterio que .group-hover:text-accent / stroke-accent en el theme */
.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;
}

/* Pestaña activa (Alpine :class activeclass): mismo criterio que .activeclass en el theme */
.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;
}