/**
 * Widget detalles de producto — contrato BEM (.infocode-details).
 * Se carga después del tema (public/css/default.css | dark.css | …) y usa las variables :root de cada tema.
 *
 * Tokens: los temas B2B no definen --accent; .text-accent usa var(--primary).
 * - Título y filas pinfo deben alinearse con .text-primary del tema → --primary-text.
 * - Marca (antes .text-accent) → --primary (color de acento / marca del tema).
 */

.infocode-details {
    --infocode-details-title-fg: var(--primary-text);
    --infocode-details-brand-fg: var(--primary);
    --infocode-details-label-fg: var(--primary-text);
    --infocode-details-value-fg: var(--primary-text);
    --infocode-details-warnings-accent: #ff0000;
    --infocode-details-code2d-gap: 1rem;
}

.infocode-details__title {
    color: var(--infocode-details-title-fg);
}

.infocode-details__brand {
    color: var(--infocode-details-brand-fg);
}

.infocode-details__pinfo-label {
    color: var(--infocode-details-label-fg);
}

.infocode-details__pinfo-value {
    color: var(--infocode-details-value-fg);
}

.infocode-details__code2d {
    display: flex;
    flex-direction: column;
    gap: var(--infocode-details-code2d-gap);
}

.infocode-details__recycle-icon {
    display: block;
}