/* * ==================================================
 * BADGE DE PLATAFORMA — COMPONENTE COMPARTIDO
 *
 * Extraído de paneles-emergentes.css y mis-pedidos.css para que lo
 * consuman el carrito, favoritos, Mis pedidos y el detalle del pedido
 * de Admin sin duplicar estilos.
 * ! Requiere tokens-globales.css (--color-*-rgb, --wod-cyan-rgb).
 * ================================================== */

/* * ==================================================
 * COMPONENTE COMPARTIDO — BADGE DE PLATAFORMA
 *
 * ! Identidad SEMÁNTICA del producto: el color depende de
 * ! data-plataforma (dato del producto), nunca de body.theme-*.
 * ! Un producto Xbox se ve Xbox en el Carrito, en Favoritos,
 * ! en Relacionados o en cualquier panel futuro.
 *
 * ! La clase base define forma y tipografía; el atributo define
 * ! color, borde, fondo e icono. El texto se mantiene blanco a
 * ! propósito: garantiza contraste con todas las plataformas
 * ! (incluido el azul oscuro de PlayStation) y la identidad la
 * ! aportan el icono, el borde y el fondo teñido.
 *
 * ! Lo consumen paneles y el modal de acciones de Favoritos;
 * ! por eso vive en el sistema compartido y no en un panel.
 * ================================================== */

.badge-plataforma {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 20px;
    padding: 0.2rem 0.5rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.badge-plataforma>i {
    font-size: 0.92em;
}

.badge-plataforma[data-plataforma="xbox"] {
    border-color: rgba(var(--color-xbox-rgb), 0.45);
    background: rgba(var(--color-xbox-rgb), 0.14);
}

.badge-plataforma[data-plataforma="xbox"]>i {
    color: var(--color-xbox);
}

.badge-plataforma[data-plataforma="pc"] {
    border-color: rgba(var(--color-pc-rgb), 0.45);
    background: rgba(var(--color-pc-rgb), 0.14);
}

.badge-plataforma[data-plataforma="pc"]>i {
    color: var(--color-pc);
}

.badge-plataforma[data-plataforma="playstation"] {
    border-color: rgba(var(--color-ps-rgb), 0.55);
    background: rgba(var(--color-ps-rgb), 0.22);
}

.badge-plataforma[data-plataforma="playstation"]>i {
    color: #5aa9ff;
}

.badge-plataforma[data-plataforma="suscripciones"] {
    border-color: rgba(var(--color-suscripciones-rgb), 0.45);
    background: rgba(var(--color-suscripciones-rgb), 0.14);
}

.badge-plataforma[data-plataforma="suscripciones"]>i {
    color: var(--color-suscripciones);
}

/* * Fortnite (F8): acento cian WOD, sin token de marca propio. */
.badge-plataforma[data-plataforma="fortnite"] {
    border-color: rgba(var(--wod-cyan-rgb), 0.45);
    background: rgba(var(--wod-cyan-rgb), 0.12);
}

.badge-plataforma[data-plataforma="fortnite"]>i {
    color: var(--wod-cyan);
}

/* * ================================================== */
/* * BADGES DE PLATAFORMA */
/* * ! Color, borde e icono los aporta el sistema global de */
/* * ! paneles-emergentes.css vía [data-plataforma]; aquí solo */
/* * ! se iguala la escala con .badge-pedido / .badge-pago. */
/* * ================================================== */
#modalDetalleMiPedido .badge-plataforma,
#modalDetallePedido .badge-plataforma {
    width:
        fit-content;
    max-width:
        100%;
    gap:
        6px;
    min-height:
        0;
    padding:
        4px 10px;
    /* * F9.1.6: rectángulo suave (no píldora) */
    border-radius:
        7px;
    font-size:
        0.68rem;
    line-height:
        1.4;
    white-space:
        nowrap;
}

/* * Línea Xbox reembolsada dentro de un pedido que sigue completado */
.modal-productos-reembolsado {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    color: #ede9fe;
    background: rgba(139, 92, 246, 0.16);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}