/* =====================================================================
   PeruWC — piel del panel
   =====================================================================
   Se carga DESPUÉS de panel-admin.css y reescribe el aspecto: chasis,
   tarjetas, tablas y movimiento.

   La idea: que se note que esto administra GunBound y no una tienda
   cualquiera. Tres gestos se repiten por todo el panel y son la firma:

     1. LA PARÁBOLA  — la trayectoria del disparo, punteada, de fondo.
     2. LA BARRA DE PODER — la de cargar el tiro (verde→amarillo→rojo),
        reaparece bajo cada cifra y en los bordes activos.
     3. EL CORTE EN ÁNGULO — las esquinas biseladas de la interfaz del
        juego, en tarjetas y botones.

   Y una regla que no se rompe: nada se oculta esperando una animación.
   El HTML llega visible; solo cuando gbperu-ui.js marca <html class="gb-anim">
   se permite animar. Sin JS o con "movimiento reducido": todo se ve.
   ===================================================================== */

:root {
    --gbp-poder: linear-gradient(90deg, #35c26a 0%, #b6d13a 42%, #f0b429 68%, #e8563f 88%, #c0392b 100%);
    --gbp-bisel: 10px;
    --gbp-linea: rgba(120, 180, 230, 0.13);
    --gbp-vidrio: rgba(18, 37, 57, 0.72);
}

/* =====================================================================
   1. FONDO
   ===================================================================== */
.gb-ui.gb-body {
    background-color: var(--gb-bg);
    background-image:
        radial-gradient(1200px 460px at 18% -220px, rgba(192, 57, 43, 0.2), transparent 72%),
        radial-gradient(900px 520px at 100% 0, rgba(29, 62, 94, 0.55), transparent 68%),
        linear-gradient(180deg, #0a1728 0%, #071120 100%);
    background-attachment: fixed;
}

/* La parábola del disparo, muy tenue, cruzando el fondo del contenido. */
.gb-ui .gb-content {
    position: relative;
}

.gb-ui .gb-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 340px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 340' preserveAspectRatio='none'%3E%3Cpath d='M-20 330 C 260 40, 700 40, 1220 300' fill='none' stroke='%234eb5f1' stroke-width='2' stroke-dasharray='3 13' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E")
        no-repeat center top / 100% 340px;
}

.gb-ui .gb-content > * {
    position: relative;
    z-index: 1;
}

/* =====================================================================
   2. BARRA LATERAL
   ===================================================================== */
.gb-ui .gb-sidebar {
    background:
        linear-gradient(180deg, rgba(23, 48, 74, 0.95) 0%, rgba(8, 19, 33, 0.98) 42%, rgba(6, 15, 26, 0.99) 100%);
    border-right: 1px solid var(--gbp-linea);
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.42);
}

.gb-ui .gb-brand {
    height: auto;
    padding: 15px 14px 14px;
    gap: 11px;
    position: relative;
    background: linear-gradient(180deg, rgba(192, 57, 43, 0.16), transparent 88%);
    border-bottom: 1px solid var(--gbp-linea);
}

/* Bajo la marca, la barra de poder a modo de firma. */
.gb-ui .gb-brand::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--gbp-poder);
    opacity: 0.85;
}

.gb-ui .gb-brand__flag {
    display: flex;
    width: 32px;
    height: 21px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.gb-ui .gb-brand__flag i { flex: 1; background: var(--gb-accent); }
.gb-ui .gb-brand__flag i:nth-child(2) { flex: 1.1; background: #f4f7fa; }

.gb-ui .gb-brand__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gb-ui .gb-brand__text {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.gb-ui .gb-brand__sub {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7e9ab5;
}

/* Rótulos de sección con una guía a la izquierda. */
.gb-ui .gb-nav__label {
    margin: 16px 0 5px;
    padding-left: 22px;
    position: relative;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: #5f7d99;
}

.gb-ui .gb-nav__label::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 5px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.gb-ui .gb-nav__item {
    position: relative;
    border-radius: 0 8px 8px 0;
    margin-right: 10px;
    padding: 8px 12px;
    color: #b3c8dc;
    transition: background 0.2s, color 0.2s, transform 0.22s var(--gb-ease), padding-left 0.22s var(--gb-ease);
}

.gb-ui .gb-nav__item:hover {
    background: rgba(120, 180, 230, 0.09);
    color: #fff;
    padding-left: 16px;
}

.gb-ui .gb-nav__item.is-active {
    background: linear-gradient(90deg, rgba(192, 57, 43, 0.3), rgba(192, 57, 43, 0.05) 78%, transparent);
    color: #fff;
    font-weight: 700;
}

.gb-ui .gb-nav__item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gb-accent);
    box-shadow: 0 0 12px var(--gb-accent-glow);
}

.gb-ui .gb-nav__item.is-active .gb-nav__icon { color: #ff7a68; }
.gb-ui .gb-nav__icon { transition: transform 0.22s var(--gb-ease); }
.gb-ui .gb-nav__item:hover .gb-nav__icon { transform: scale(1.14); }

/*
 * El rastro que persigue al cursor por el menú.
 * Lo coloca `panel-admin.js` moviendo `top` y poniéndole `.is-visible`, así que
 * aquí se anima `top` — nunca `transform`, o el movimiento se duplicaría.
 */
.gb-ui .gb-nav__indicator {
    position: absolute;
    left: 0;
    width: calc(100% - 10px);
    border: none;
    border-radius: 0 8px 8px 0;
    /* Blanco muy tenue y no azul: al cargar, el JS deja el rastro sobre la
       opción activa (que ya va en rojo) y un tinte de color chocaría con ella. */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 80%, transparent);
    box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: top 0.3s var(--gb-ease), height 0.24s var(--gb-ease), opacity 0.2s;
    z-index: 0;
}

.gb-ui .gb-nav__indicator.is-visible { opacity: 1; }

.gb-ui .gb-nav__item,
.gb-ui .gb-nav__group { position: relative; z-index: 1; }

.gb-ui .gb-sidebar__foot {
    border-top: 1px solid var(--gbp-linea);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35));
}

.gb-ui .gb-user-pill__avatar {
    background: linear-gradient(135deg, var(--gb-accent), #7e1f16);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 3px 12px rgba(192, 57, 43, 0.4);
}

/* =====================================================================
   3. CABECERA
   ===================================================================== */
.gb-ui .gb-header {
    height: auto;
    min-height: 56px;
    padding: 10px 20px;
    background: linear-gradient(180deg, rgba(18, 37, 57, 0.92), rgba(10, 23, 38, 0.86));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gbp-linea);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.gb-ui .gb-header__title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.gb-ui .gb-header__meta { color: #7e9ab5; font-size: 11px; }
.gb-ui .gb-header__sep { color: #3f5f7d; }

.gb-ui .gb-status-pill {
    background: rgba(53, 194, 106, 0.13);
    border: 1px solid rgba(53, 194, 106, 0.32);
    color: #7fe0a6;
}

.gb-ui .gb-status-pill__dot { box-shadow: 0 0 10px #35c26a; }

/* =====================================================================
   4. SALUDO DEL INICIO
   ===================================================================== */
.gb-ui .gb-dash-hero {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    border: 1px solid var(--gbp-linea);
    border-radius: var(--gb-radius);
    background:
        linear-gradient(100deg, rgba(192, 57, 43, 0.26) 0%, transparent 52%),
        linear-gradient(180deg, rgba(23, 48, 74, 0.95), rgba(12, 27, 43, 0.95));
    clip-path: polygon(0 0, calc(100% - var(--gbp-bisel)) 0, 100% var(--gbp-bisel), 100% 100%, var(--gbp-bisel) 100%, 0 calc(100% - var(--gbp-bisel)));
}

/* Trayectoria dibujándose de lado a lado del saludo. */
.gb-ui .gb-dash-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 130' preserveAspectRatio='none'%3E%3Cpath d='M-10 128 C 220 10, 620 6, 910 116' fill='none' stroke='%23ff6a55' stroke-width='2' stroke-dasharray='2 10' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat right center / 62% 100%;
}

.gb-ui .gb-dash-hero__title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.015em;
}

.gb-ui .gb-dash-hero__sub { color: #93aec8; font-size: 11.5px; }
.gb-ui .gb-dash-hero__actions { position: relative; z-index: 2; }

/* =====================================================================
   5. TARJETAS DE CIFRAS  (el cambio más visible)
   ===================================================================== */
.gb-ui .gb-stat {
    position: relative;
    overflow: hidden;
    padding: 15px 16px 17px;
    border: 1px solid var(--gbp-linea);
    border-left: none;
    border-top: none;
    border-radius: 9px;
    background:
        radial-gradient(420px 130px at var(--gb-mx, 20%) var(--gb-my, 0%), rgba(120, 180, 230, 0.09), transparent 70%),
        linear-gradient(165deg, rgba(23, 48, 74, 0.9) 0%, rgba(10, 22, 36, 0.96) 100%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.3s var(--gb-ease), box-shadow 0.3s, border-color 0.3s;
}

.gb-ui .gb-stat__label {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7e9ab5;
}

/* La cifra manda: grande, tabular para que no baile al contar. */
.gb-ui .gb-stat__value {
    display: block;
    margin: 7px 0 9px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
}

.gb-ui .gb-stat__value.is-counting { min-width: var(--gb-count-w); }

.gb-ui .gb-stat__delta {
    font-size: 9.5px;
    letter-spacing: 0.05em;
    color: #6f8aa6;
}

.gb-ui .gb-stat__delta--up { color: #6fd6a0; }
.gb-ui .gb-stat__delta--down { color: #ff8b7a; }

/* Barra de poder al pie de la tarjeta: se carga al aparecer. */
.gb-ui .gb-stat::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--gbp-poder);
    transform-origin: left center;
    opacity: 0.9;
}

.gb-ui .gb-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--stat-accent, var(--gb-accent)), transparent);
    opacity: 0.75;
}

.gb-ui .gb-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(120, 180, 230, 0.3);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}

/* Cada tarjeta con su color: rojo, celeste, dorado y marino de la casa. */
.gb-ui .gb-row--4 .gb-stat:nth-child(1) { --stat-accent: #e8563f; }
.gb-ui .gb-row--4 .gb-stat:nth-child(2) { --stat-accent: #4eb5f1; }
.gb-ui .gb-row--4 .gb-stat:nth-child(3) { --stat-accent: #ffd700; }
.gb-ui .gb-row--4 .gb-stat:nth-child(4) { --stat-accent: #6fd6a0; }

/* =====================================================================
   6. TARJETAS Y TABLAS
   ===================================================================== */
.gb-ui .gb-card {
    border: 1px solid var(--gbp-linea);
    border-radius: 9px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(18, 37, 57, 0.82), rgba(9, 20, 33, 0.9));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.gb-ui .gb-card__head {
    position: relative;
    padding: 11px 15px;
    background: linear-gradient(180deg, rgba(29, 62, 94, 0.9), rgba(17, 42, 66, 0.9));
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

/* Filo de poder bajo cada cabecera. */
.gb-ui .gb-card__head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gbp-poder);
    opacity: 0.55;
}

.gb-ui .gb-card__title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
}

.gb-ui .gb-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(16, 34, 53, 0.97);
    backdrop-filter: blur(6px);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86a3bf;
    border-bottom: 1px solid rgba(120, 180, 230, 0.2);
}

.gb-ui .gb-table tbody tr {
    transition: background 0.16s, box-shadow 0.16s;
}

.gb-ui .gb-table tbody tr:hover {
    background: rgba(120, 180, 230, 0.07);
    box-shadow: inset 2px 0 0 var(--gb-accent);
}

.gb-ui .gb-rank {
    background: linear-gradient(135deg, rgba(192, 57, 43, 0.9), rgba(126, 31, 22, 0.9));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* =====================================================================
   7. BOTONES Y CAMPOS
   ===================================================================== */
.gb-ui .gb-btn {
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.18s var(--gb-ease), box-shadow 0.22s, filter 0.22s;
}

.gb-ui .gb-btn:hover { transform: translateY(-1px); }
.gb-ui .gb-btn:active { transform: translateY(0); }

.gb-ui .gb-btn--primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #d94a3c 0%, #c0392b 52%, #96261b 100%);
    border: 1px solid #7e1f16;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 12px rgba(192, 57, 43, 0.3);
}

.gb-ui .gb-btn--primary:hover {
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.45);
    filter: brightness(1.06);
}

/* Destello que cruza el botón al pasar por encima. */
.gb-ui .gb-btn--primary::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s var(--gb-ease);
}

.gb-ui .gb-btn--primary:hover::before { left: 120%; }

.gb-ui .gb-input,
.gb-ui select,
.gb-ui textarea {
    background: rgba(6, 15, 26, 0.72);
    border: 1px solid rgba(120, 180, 230, 0.2);
    border-radius: 6px;
    color: var(--gb-text);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.gb-ui .gb-input:focus,
.gb-ui select:focus,
.gb-ui textarea:focus {
    outline: none;
    background: rgba(6, 15, 26, 0.9);
    border-color: var(--gb-accent);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

.gb-ui a { color: var(--gb-accent-2); }

/* =====================================================================
   8. MOVIMIENTO
   =====================================================================
   Solo entra en juego con <html class="gb-anim">, que pone el JS. */
.gb-anim .gb-ui .gb-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--gb-ease), transform 0.5s var(--gb-ease);
    transition-delay: var(--gb-delay, 0ms);
}

.gb-anim .gb-ui .gb-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* La barra de poder se llena al entrar la tarjeta. */
.gb-anim .gb-ui .gb-stat::after {
    transform: scaleX(0);
    transition: transform 0.85s var(--gb-ease);
    transition-delay: calc(var(--gb-delay, 0ms) + 160ms);
}

.gb-anim .gb-ui .gb-stat.is-in::after { transform: scaleX(1); }

/* Sin JS todo aparece ya colocado: nunca una pantalla en blanco. */
.gb-ui .gb-main,
.gb-ui .gb-sidebar,
.gb-ui .gb-stagger > * {
    opacity: 1;
    animation: none;
    transform: none;
}

/*
   ...pero en móvil el menú se esconde justamente con un `transform`, y la
   regla de arriba (más específica que la del layout) se lo quitaba: el menú
   se quedaba abierto y no había forma de contraerlo. Aquí se le devuelve.
*/
@media (max-width: 900px) {
    .gb-ui .gb-sidebar { transform: translateX(-105%); }
    .gb-ui .gb-sidebar.is-open { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .gb-ui * {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   TIENDA DE AVATARES
   ===================================================================== */
.gb-ui .pa-shop-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.gb-ui .pa-shop-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-left: 3px solid var(--gb-border);
}

.gb-ui .pa-shop-kpi.is-ok { border-left-color: #22c55e; }
.gb-ui .pa-shop-kpi.is-lim { border-left-color: #e0a72e; }
.gb-ui .pa-shop-kpi.is-off { border-left-color: #ef4444; }

/* ---- Tienda: pestañas Avatares / Sets ---- */
.gb-ui .pa-shop-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: var(--gb-gap);
}

.gb-ui .pa-shop-tab {
    padding: 8px 18px;
    border: 1px solid var(--gb-border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--gb-surface);
    color: var(--gb-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.gb-ui .pa-shop-tab:hover { color: var(--gb-text); }

.gb-ui .pa-shop-tab.is-active {
    background: var(--gb-surface-2);
    border-color: var(--gb-border-strong);
    color: var(--gb-text);
    box-shadow: inset 0 2px 0 var(--gb-accent);
}

/* ---- Sets: lista ---- */
/* Un set sin prendas no se puede vender: se marca en rojo, no se esconde. */
.gb-ui .pa-sets-tabla tr.is-vacio td { background: rgba(224, 82, 82, 0.07); }

.gb-ui .pa-sets-tabla small {
    display: block;
    margin-top: 2px;
    color: var(--gb-muted);
    font-size: 11px;
}

.gb-ui .pa-sets-precios {
    color: var(--gb-muted);
    font-size: 12px;
    white-space: nowrap;
}

.gb-ui .pa-sets-chip {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--gb-border);
    border-radius: 10px;
    background: var(--gb-surface-2);
    color: var(--gb-muted);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.gb-ui .pa-sets-chip.is-ok { border-color: #2f7a52; background: rgba(63, 191, 127, .14); color: #7fe0ac; }
.gb-ui .pa-sets-chip.is-mal { border-color: #8a3a3a; background: rgba(224, 82, 82, .16); color: #ffb0b0; }
.gb-ui .pa-sets-chip.is-new { border-color: #8a6d1b; background: rgba(240, 180, 41, .16); color: #ffd97a; }

/* ---- Sets: editor ---- */
.gb-ui .pa-sets-ayuda {
    margin: 10px 0 14px;
    color: var(--gb-muted);
    font-size: 12px;
    line-height: 1.6;
}

.gb-ui .pa-sets-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 4px 0 16px;
}

/* `gb-check` se usa en Editar usuario pero nunca tuvo CSS: se le da aquí. */
.gb-ui .gb-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gb-text);
    font-size: 13px;
    cursor: pointer;
}

.gb-ui .gb-check input { accent-color: var(--gb-accent); }

/* Las tarjetas de prenda del set son las mismas de la tienda, algo más bajas
   porque aquí no llevan las seis casillas de precio. */
.gb-ui .pa-sets-grid .pa-shop-item { padding-bottom: 10px; }

.gb-ui .pa-sets-tipo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 8px;
    color: var(--gb-muted);
    font-size: 11px;
}

/* Borrar es irreversible y no deja rastro: se separa del resto en rojo. */
.gb-ui .pa-sets-peligro {
    border-color: rgba(224, 82, 82, .35);
}

.gb-ui .pa-sets-peligro .gb-card__head h2 { color: #ffb0b0; }

/* ---- Sets: vista previa del muñeco vestido ---- */
/*
 * Las capas van todas en la misma caja y con el mismo ancla (lo calcula
 * `pa_sets_muneco()`), así que se apilan en absoluto sobre el mismo origen.
 */
.gb-ui .pa-sets-muneco {
    position: relative;
    display: block;
    transform-origin: center center;
}

.gb-ui .pa-sets-muneco i {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    image-rendering: pixelated; /* son píxeles: nada de suavizarlos */
}

.gb-ui .pa-sets-sinmuneco {
    color: var(--gb-muted);
    font-size: 10px;
}

/* Columna de la vista previa en la lista. */
.gb-ui .pa-sets-th-prev { width: 76px; }

.gb-ui .pa-sets-td-prev {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: 4px;
}

/* En el editor va en grande, que es lo que se está montando. */
.gb-ui .pa-sets-previa {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: var(--gb-gap);
    padding: 12px 14px;
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    background: var(--gb-surface-2);
}

.gb-ui .pa-sets-previa-caja {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 140px;
    height: 150px;
    border-radius: 6px;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 8px, rgba(255, 255, 255, .07) 8px 16px);
    overflow: hidden;
}

.gb-ui .pa-sets-previa .pa-sets-ayuda { margin: 0; }

/* ---- Sets: ayuda para poner precio ---- */
/*
 * Poner precio a ojo era lo más difícil de crear un set. Esta tabla dice lo
 * que costarían sus prendas por separado y sugiere un 20 % menos.
 */
.gb-ui .pa-sets-precios-ayuda {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--gb-border);
    border-left: 3px solid var(--gb-accent-2);
    border-radius: 8px;
    background: var(--gb-surface-2);
}

.gb-ui .pa-sets-precios-ayuda > b {
    display: block;
    margin-bottom: 8px;
    color: var(--gb-text);
    font-size: 12px;
}

.gb-ui .pa-sets-precios-ayuda > small {
    display: block;
    margin-top: 8px;
    color: var(--gb-muted);
    font-size: 11px;
}

.gb-ui .pa-sets-tabla-precios {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.gb-ui .pa-sets-tabla-precios th {
    padding: 4px 8px;
    color: var(--gb-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.gb-ui .pa-sets-tabla-precios td {
    padding: 4px 8px;
    border-top: 1px solid var(--gb-border);
    color: var(--gb-text);
    white-space: nowrap;
}

.gb-ui .pa-sets-tabla-precios small {
    display: block;
    color: var(--gb-warning);
    font-size: 10px;
}

.gb-ui .pa-sets-nada {
    color: var(--gb-muted);
    font-size: 11px;
}

/* Rellena la casilla del precio con el valor sugerido. */
.gb-ui .pa-sets-usar {
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid var(--gb-border-strong);
    border-radius: 9px;
    background: transparent;
    color: var(--gb-accent-2);
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.gb-ui .pa-sets-usar:hover {
    border-color: var(--gb-accent-2);
    background: rgba(78, 181, 241, .12);
}

/* ---- Sets: qué huecos cubre el conjunto ---- */
.gb-ui .pa-sets-huecos {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 8px;
}

.gb-ui .pa-sets-hueco {
    padding: 2px 9px;
    border: 1px dashed var(--gb-border-strong);
    border-radius: 10px;
    color: var(--gb-muted);
    font-size: 10px;
    font-weight: 600;
}

/* Relleno = lo que el set trae; a rayas = lo que le falta. */
.gb-ui .pa-sets-hueco.is-ok {
    border-style: solid;
    border-color: #2f7a52;
    background: rgba(63, 191, 127, .14);
    color: #7fe0ac;
}

/* Aviso intermedio: ni error ni todo bien (guardado pero sin prendas). */
.gb-ui .gb-alert--warn {
    background: rgba(240, 180, 41, 0.1);
    border: 1px solid rgba(240, 180, 41, 0.35);
    color: #ffe0a3;
}

.gb-ui .pa-shop-kpi__n {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gb-text);
}

.gb-ui .pa-shop-kpi__t {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gb-muted);
}

/* ---------- Lista en cuadrícula ---------- */
.gb-ui .pa-shop-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gb-border);
}

.gb-ui .pa-shop-filtros select,
.gb-ui .pa-shop-filtros input {
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--gb-text);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--gb-border);
    border-radius: 5px;
}

.gb-ui .pa-shop-filtros input { min-width: 200px; }

.gb-ui .pa-shop-total {
    font-size: 12px;
    color: var(--gb-muted);
}

.gb-ui .pa-shop-vacio {
    padding: 26px 16px;
    text-align: center;
    color: var(--gb-muted);
}

.gb-ui .pa-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    padding: 16px;
}

.gb-ui .pa-shop-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid var(--gb-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
    transition: transform 0.18s var(--gb-ease), border-color 0.18s, box-shadow 0.18s;
}

.gb-ui .pa-shop-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.gb-ui .pa-shop-item.is-oculto { opacity: 0.62; }

.gb-ui .pa-shop-item.is-agotado {
    opacity: 0.62;
    border-color: rgba(239, 68, 68, 0.28);
}

.gb-ui .pa-shop-item > .pa-shop-tag {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Hueco del avatar: se recorta el primer fotograma de la hoja de sprites. */
.gb-ui .pa-shop-item__img {
    display: grid;
    place-items: center;
    height: 104px;
    margin-bottom: 10px;
    border-radius: 7px;
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 8px, rgba(255, 255, 255, 0.06) 8px 16px);
}

.gb-ui .pa-shop-item__img i {
    display: block;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.gb-ui .pa-shop-item__img b {
    font-size: 30px;
    color: var(--gb-muted);
}

.gb-ui .pa-shop-item__nombre {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--gb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gb-ui .pa-shop-item__meta {
    margin: 1px 0 8px;
    font-size: 11px;
    color: var(--gb-muted);
}

.gb-ui .pa-shop-code { color: var(--gb-muted); }

.gb-ui .pa-shop-item__precios {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-height: 22px;
    margin-bottom: 8px;
}

.gb-ui .pa-shop-precio {
    padding: 2px 7px;
    font-size: 11px;
    border-radius: 10px;
    background: rgba(224, 167, 46, 0.15);
    color: #e8c47a;
    border: 1px solid rgba(224, 167, 46, 0.3);
}

.gb-ui .pa-shop-precio--cash {
    background: rgba(86, 168, 232, 0.15);
    color: #9dd0f5;
    border-color: rgba(86, 168, 232, 0.3);
}

.gb-ui .pa-shop-item__stock {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--gb-text);
}

.gb-ui .pa-shop-item__stock b { font-size: 14px; }

.gb-ui .pa-shop-item__stock small {
    font-size: 10px;
    color: var(--gb-muted);
}

.gb-ui .pa-shop-nada {
    font-size: 12px;
    font-style: italic;
    color: var(--gb-muted);
}

.gb-ui .pa-shop-tag {
    display: inline-block;
    padding: 3px 9px;
    font-size: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gb-muted);
}

.gb-ui .pa-shop-tag.is-ok {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.gb-ui .pa-shop-tag.is-off {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.gb-ui .pa-shop-item__acciones {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.gb-ui .pa-shop-item__acciones .gb-btn { flex: 1; text-align: center; }

.gb-ui .pa-shop-inline { display: contents; }

.gb-ui .gb-btn--mini {
    padding: 5px 8px;
    font-size: 11px;
}

.gb-ui .pa-shop-paginas {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px;
}

.gb-ui .pa-shop-paginas a,
.gb-ui .pa-shop-paginas span {
    min-width: 30px;
    padding: 5px 9px;
    text-align: center;
    font-size: 12px;
    border-radius: 5px;
    text-decoration: none;
    color: var(--gb-muted);
    border: 1px solid var(--gb-border);
}

.gb-ui .pa-shop-paginas a:hover {
    color: var(--gb-text);
    border-color: rgba(255, 255, 255, 0.2);
}

.gb-ui .pa-shop-paginas .is-actual {
    background: var(--gb-accent);
    color: #fff;
    border-color: var(--gb-accent);
}

/* ---------- Tarjeta editable ---------- */
.gb-ui .pa-shop-item__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}

.gb-ui .pa-shop-item__head b {
    font-size: 12px;
    font-weight: 600;
    color: var(--gb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gb-ui .pa-shop-item__head .pa-shop-code {
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.gb-ui .pa-shop-item.is-guardando { opacity: 0.55; }

/* Una fila de precios: etiqueta + 7 días / 30 días / permanente. */
.gb-ui .pa-shop-fila {
    display: grid;
    grid-template-columns: 42px repeat(3, 1fr);
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
}

.gb-ui .pa-shop-fila__t {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 5px;
    border-left: 2px solid var(--gb-border);
}

.gb-ui .pa-shop-fila--gold .pa-shop-fila__t { color: #e0a72e; border-left-color: #e0a72e; }
.gb-ui .pa-shop-fila--cash .pa-shop-fila__t { color: #56a8e8; border-left-color: #56a8e8; }
.gb-ui .pa-shop-fila--stock .pa-shop-fila__t { color: #86efac; border-left-color: #22c55e; }

.gb-ui .pa-shop-fila input {
    width: 100%;
    min-width: 0;
    padding: 4px 5px;
    font-family: inherit;
    font-size: 11px;
    text-align: center;
    color: var(--gb-text);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--gb-border);
    border-radius: 4px;
    transition: border-color 0.15s, background 0.15s;
}

.gb-ui .pa-shop-fila input:hover { border-color: rgba(255, 255, 255, 0.2); }

.gb-ui .pa-shop-fila input:focus {
    outline: none;
    border-color: var(--gb-accent);
    background: rgba(0, 0, 0, 0.5);
}

.gb-ui .pa-shop-fila--stock { grid-template-columns: 42px 1fr; }

.gb-ui .pa-shop-quedan {
    grid-column: 1 / -1;
    padding-left: 47px;
    font-size: 10px;
    color: var(--gb-muted);
}

.gb-ui .pa-shop-quedan b { color: #86efac; }

/* Interruptores */
.gb-ui .pa-shop-item__pie {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--gb-border);
}

.gb-ui .pa-shop-sw {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--gb-muted);
    cursor: pointer;
    user-select: none;
}

.gb-ui .pa-shop-sw input { position: absolute; opacity: 0; pointer-events: none; }

.gb-ui .pa-shop-sw i {
    position: relative;
    display: block;
    width: 26px;
    height: 14px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.18s;
}

.gb-ui .pa-shop-sw i::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s var(--gb-ease);
}

.gb-ui .pa-shop-sw input:checked + i { background: #22c55e; }
.gb-ui .pa-shop-sw input:checked + i::after { transform: translateX(12px); }
.gb-ui .pa-shop-sw input:checked ~ span { color: var(--gb-text); }
.gb-ui .pa-shop-sw input:focus-visible + i { box-shadow: 0 0 0 2px var(--gb-accent); }

.gb-ui .pa-shop-reset {
    margin-left: auto;
    width: 22px;
    height: 22px;
    font-size: 13px;
    line-height: 1;
    color: var(--gb-muted);
    background: transparent;
    border: 1px solid var(--gb-border);
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.gb-ui .pa-shop-reset:hover {
    color: var(--gb-text);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Avisos de guardado */
#pa-shop-avisos {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pa-shop-aviso {
    padding: 9px 14px;
    font: 500 12px/1.35 inherit;
    color: #d7f5e0;
    background: rgba(20, 48, 30, 0.96);
    border: 1px solid rgba(34, 197, 94, 0.45);
    border-radius: 7px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    transition: opacity 0.35s, transform 0.35s;
}

.pa-shop-aviso.is-error {
    color: #ffd7d2;
    background: rgba(60, 22, 20, 0.96);
    border-color: rgba(239, 68, 68, 0.5);
}

.pa-shop-aviso.is-yendo {
    opacity: 0;
    transform: translateY(6px);
}

.gb-ui .pa-shop-aviso-ruta {
    margin: 0;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.6;
    color: #ffd7a0;
    background: rgba(224, 167, 46, 0.1);
    border-bottom: 1px solid rgba(224, 167, 46, 0.3);
}

.gb-ui .pa-shop-aviso-ruta code {
    padding: 1px 6px;
    font-size: 11px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #ffe9c7;
}

/* ---------- GP diarios: quién se pasó del límite ---------- */
.gb-ui .pa-gps-pasado td {
    background: rgba(239, 68, 68, 0.07);
}

.gb-ui .pa-gps-pasado td:first-child {
    box-shadow: inset 2px 0 0 #ef4444;
}

.gb-ui .pa-gps-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.32);
}

.gb-ui .pa-gps-alerta {
    color: #fca5a5;
    font-weight: 600;
}

.gb-ui .pa-gps-accion { white-space: nowrap; }
.gb-ui .pa-gps-accion form { margin: 0; }

/* ---------- Noticias y eventos ---------- */
.gb-ui .pa-news-form { padding: 16px; }

.gb-ui .pa-news-fila {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.gb-ui .pa-news-fila .gb-form-group { margin: 0; }
.gb-ui .pa-news-check { display: flex; align-items: flex-end; padding-bottom: 8px; }

.gb-ui .pa-news-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.gb-ui .pa-news-autor { font-size: 11px; margin-left: auto; }

.gb-ui .pa-news-tabla td { vertical-align: top; }
.gb-ui .pa-news-oculta td { opacity: 0.55; }
.gb-ui .pa-news-fecha { white-space: nowrap; font-size: 12px; }

.gb-ui .pa-news-cat {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    background: rgba(86, 168, 232, 0.16);
    color: #9dd0f5;
}

.gb-ui .pa-news-cat--event {
    background: rgba(224, 167, 46, 0.16);
    color: #e8c47a;
}

.gb-ui .pa-news-tag {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--gb-muted);
}

.gb-ui .pa-news-resumen {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--gb-muted);
}

.gb-ui .pa-news-sincuerpo { font-style: italic; }

.gb-ui .pa-news-acc {
    display: flex;
    gap: 5px;
    white-space: nowrap;
}

.gb-ui .pa-news-borrar { color: #fca5a5; }
.gb-ui .pa-news-borrar:hover { border-color: rgba(239, 68, 68, 0.45); }

/* El editor se ve dentro de la tarjeta, no como un bloque pegado. */
.gb-ui .tox-tinymce {
    border-radius: 8px !important;
    border-color: var(--gb-border) !important;
}

/* ---- Sets: constructor visual (assets/js/tienda-sets.js) ---- */

/*
 * Las prendas del catálogo se eligen con un clic, así que tienen que parecer
 * pulsables: cursor de mano y un realce al pasar por encima. Sin esto la
 * tarjeta es idéntica a las de la lista de arriba, que NO se pueden clicar.
 */
.gb-ui .pa-sets-elegible {
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.gb-ui .pa-sets-elegible:hover,
.gb-ui .pa-sets-elegible:focus-visible {
    border-color: var(--gb-accent, #4d90c9);
    transform: translateY(-2px);
    outline: none;
}

/*
 * La prenda elegida lleva borde y un tilde en la esquina. Van las DOS marcas a
 * propósito: el color solo no vale para quien no lo distingue.
 */
.gb-ui .pa-sets-elegible.is-elegida {
    border-color: #3fbf7f;
    box-shadow: inset 0 0 0 1px #3fbf7f;
    background: rgba(63, 191, 127, .08);
}

.gb-ui .pa-sets-elegible.is-elegida::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: #3fbf7f;
    color: #08120c;
    font-size: 12px;
    font-weight: 700;
}

/* La tarjeta ancla el tilde, así que necesita contexto de posición. */
.gb-ui .pa-sets-elegible { position: relative; }

/* Mientras llega la página nueva del catálogo, la vieja se apaga. */
.gb-ui .is-cargando { opacity: .45; pointer-events: none; }

.gb-ui .pa-sets-paginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

.gb-ui .pa-sets-paginas-info {
    margin-left: auto;
    color: var(--gb-muted);
    font-size: 12px;
}

.gb-ui [data-sets-guardar].is-guardando { opacity: .6; }

/* ==========================================================================
   Sets: editor de dos columnas (ficha + catálogo)
   ==========================================================================
   La ficha se queda pegada arriba mientras se recorre el catálogo: el muñeco
   es la referencia constante y perderlo de vista al bajar obligaba a subir
   para comprobar cómo iba quedando.

   Sin JavaScript la columna del catálogo está oculta (`hidden`), así que la
   rejilla se queda en una sola columna: no hace falta CSS aparte. */

.gb-ui .pa-sets-builder__cols {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.gb-ui .pa-sets-builder__ficha {
    position: sticky;
    top: 14px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--gb-border);
    border-radius: 10px;
    background: var(--gb-bg);
}

.gb-ui .pa-sets-builder__acciones {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---- Vista previa: el muñeco sobre un tablero de ajedrez claro ----
   Las prendas son PNG con transparencia y muchas son oscuras; sobre el fondo
   del panel se perdían. El damero es el mismo recurso que usa cualquier editor
   de imagen para decir "esto es transparente". */
.gb-ui .pa-sets-builder__previa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.gb-ui .pa-sets-builder__previa .pa-sets-previa-caja {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 172px;
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    background-color: #eef2f5;
    background-image:
        linear-gradient(45deg, #dbe2e8 25%, transparent 25%, transparent 75%, #dbe2e8 75%),
        linear-gradient(45deg, #dbe2e8 25%, transparent 25%, transparent 75%, #dbe2e8 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.gb-ui .pa-sets-builder__previa .pa-sets-huecos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 0;
}

/* ---- Precios: oro y cash emparejados por duración ---- */
.gb-ui .pa-sets-builder__precios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.gb-ui .pa-sets-builder__precios .gb-form-group { margin: 0; }

.gb-ui .pa-sets-builder__precios label {
    font-size: 10px;
    letter-spacing: .04em;
}

/* La moneda se distingue por color, que es como se lee de un vistazo. */
.gb-ui .pa-sets-builder__precios label.is-oro { color: #e0b544; }
.gb-ui .pa-sets-builder__precios label.is-cash { color: #4eb5f1; }

.gb-ui .pa-sets-builder__ficha .gb-btn--block {
    display: block;
    width: 100%;
    margin-top: 4px;
}

/* ---- Catálogo ---- */
.gb-ui .pa-sets-builder__catalogo {
    padding: 16px;
    border: 1px solid var(--gb-border);
    border-radius: 10px;
    background: var(--gb-bg);
}

.gb-ui .pa-sets-builder__catalogo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.gb-ui .pa-sets-builder__catalogo-head h3 {
    margin: 0;
    color: var(--gb-text);
    font-size: 15px;
    font-weight: 600;
}

.gb-ui .pa-sets-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gb-ui .pa-sets-pill {
    padding: 5px 12px;
    border: 1px solid var(--gb-border);
    border-radius: 999px;
    background: transparent;
    color: var(--gb-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.gb-ui .pa-sets-pill:hover {
    color: var(--gb-text);
    border-color: var(--gb-border-strong);
}

.gb-ui .pa-sets-pill.is-active {
    border-color: var(--gb-accent);
    background: var(--gb-accent-soft);
    color: var(--gb-text);
}

.gb-ui .pa-sets-buscar { width: 100%; margin-bottom: 10px; }

.gb-ui .pa-sets-builder__pista { margin: 0 0 12px; }

/* El catálogo son casi 6.000 piezas: se le pone tope de alto y scroll propio
   para que la página entera no se convierta en un rollo infinito. */
.gb-ui .pa-sets-builder__grid {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* ---- Tarjeta de pieza ---- */
/* Las piezas son sprites pequeños: caben muchas más por fila que en la tienda,
   y verlas juntas es justo lo que ayuda a componer un set. */
.gb-ui .pa-sets-builder__grid .pa-sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

/* Aquí NINGUNA tarjeta se atenúa.
   `is-agotado` marca en la tienda las prendas retiradas, pero en el montador
   de sets apenas un 3 % del catálogo se vende suelto —el resto existe solo
   para ir dentro de un set— y atenuarlas dejaba todo bajo un velo oscuro.
   El JS ya no pone la clase; esto es la red por si vuelve por otro camino. */
.gb-ui .pa-sets-builder__grid .pa-shop-item.is-agotado,
.gb-ui .pa-sets-builder__grid .pa-shop-item.is-oculto {
    opacity: 1;
    border-color: var(--gb-border);
}

/* Un punto más claras que en la tienda: son muchas juntas y sobre el fondo
   del panel la rejilla se leía turbia. */
.gb-ui .pa-sets-builder__grid .pa-shop-item {
    background: rgba(255, 255, 255, 0.05);
}

.gb-ui .pa-sets-builder__grid .pa-shop-item__img {
    background-color: #eef2f5;
    background-image:
        linear-gradient(45deg, #dbe2e8 25%, transparent 25%, transparent 75%, #dbe2e8 75%),
        linear-gradient(45deg, #dbe2e8 25%, transparent 25%, transparent 75%, #dbe2e8 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    border-radius: 6px;
}

.gb-ui .pa-sets-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 6px;
}

.gb-ui .pa-sets-copiar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 1px solid var(--gb-border);
    border-radius: 4px;
    background: transparent;
    color: var(--gb-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.gb-ui .pa-sets-copiar:hover {
    color: var(--gb-text);
    border-color: var(--gb-border-strong);
}

/* En pantallas estrechas la ficha deja de estar pegada y va encima: con una
   columna de 320px al lado no queda sitio para ver las piezas. */
@media (max-width: 1024px) {
    .gb-ui .pa-sets-builder__cols { grid-template-columns: minmax(0, 1fr); }
    .gb-ui .pa-sets-builder__ficha { position: static; }
    .gb-ui .pa-sets-builder__grid { max-height: none; }
}

/* Aviso en ámbar: ni error ni éxito (p. ej. "guardado, pero el set quedó vacío"). */
.gb-ui .pa-shop-aviso.is-warn,
.pa-shop-aviso.is-warn {
    border-color: #8a6d1b;
    background: rgba(240, 180, 41, .16);
    color: #ffd97a;
}

/* Miniatura de una prenda en las tarjetas del catálogo: la pieza va colocada
   por su centro dentro de una caja, y la caja se escala para caber en la celda.
   Sin esto, las hojas exportadas sin recortar (188x106 con el dibujo metido en
   una esquina) enseñaban la parte vacía y parecía que la prenda no tenía
   imagen. */
.gb-ui .pa-sets-minipieza {
    position: relative;
    display: block;
    transform-origin: center center;
}

.gb-ui .pa-sets-minipieza i {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* ==========================================================================
   Misiones
   ==========================================================================
   Dos columnas: formulario a la izquierda, lista a la derecha. Un evento son
   cinco o seis misiones, así que caben todas de un vistazo sin paginar. */

.gb-ui .pa-mis-kpis { margin-bottom: 16px; }

.gb-ui .pa-mis-cols {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .gb-ui .pa-mis-cols { grid-template-columns: minmax(0, 1fr); }
}

.gb-ui .pa-mis-sub {
    margin: 18px 0 4px;
    padding-top: 14px;
    border-top: 1px solid var(--gb-border);
    color: var(--gb-text);
    font-size: 14px;
    font-weight: 600;
}

/* ---- Filas de premio ---- */
/* Tipo ancho, las dos cifras estrechas y la equis al final: el tipo es lo que
   se lee, los números casi siempre son uno solo. */
.gb-ui .pa-mis-premio {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 8px;
    margin-bottom: 12px;
    align-items: start;
}

.gb-ui .pa-mis-premio-valores {
    display: block;
    width: 100%;
}

.gb-ui .pa-mis-premio-valores > input {
    width: 100%;
}

.gb-ui .pa-mis-premio-valores > input.is-apagado,
.gb-ui .pa-mis-premio-valores > div.is-apagado {
    display: none;
}

.gb-ui .pa-mis-avatar-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gb-ui .pa-mis-avatar-inputs > input {
    font-size: 13px;
    padding: 0 8px;
    height: 32px;
}

.gb-ui .pa-mis-premio input:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ---- Lista ---- */
.gb-ui .pa-mis-lista {
    display: grid;
    /* 280, no 240: con tres botones en el pie (Reiniciar, Editar, Borrar) una
       tarjeta de 240 px dejaba el texto en una columna de cuatro caracteres. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.gb-ui .pa-mis-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--gb-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
}

/* La que se está editando se marca, o al guardar no se sabe cuál era. */
.gb-ui .pa-mis-item.is-editando {
    border-color: var(--gb-accent);
    background: var(--gb-accent-soft);
}

.gb-ui .pa-mis-item.is-oculta { opacity: .62; }

.gb-ui .pa-mis-item__cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.gb-ui .pa-mis-item__cab b {
    color: var(--gb-text);
    font-size: 13.5px;
    font-weight: 600;
}

.gb-ui .pa-mis-orden {
    flex-shrink: 0;
    color: var(--gb-muted);
    font-size: 11px;
}

.gb-ui .pa-mis-obj {
    margin: 0;
    color: var(--gb-muted);
    font-size: 12px;
}

.gb-ui .pa-mis-premios-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Apilado, no en dos columnas. En una tarjeta de ~300 px, meter los datos a la
   izquierda y tres botones a la derecha dejaba el texto en una columna de
   cuatro caracteres, partido palabra a palabra. Ahora los datos ocupan todo el
   ancho y los botones van debajo. */
.gb-ui .pa-mis-item__pie {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--gb-border);
}

.gb-ui .pa-mis-item__datos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gb-ui .pa-mis-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Los botones se reparten el ancho en vez de amontonarse en una esquina. */
.gb-ui .pa-mis-acciones > .gb-btn,
.gb-ui .pa-mis-acciones > .pa-mis-borrar > .gb-btn {
    white-space: nowrap;
}

.gb-ui .pa-mis-borrar { display: inline; margin: 0; }

/* ==========================================================================
   Codigos canjeables (panel)
   ========================================================================== */

/* ---- Guia de los tres pasos, en el alta ---- */
.gb-ui .pa-cod-guia {
    margin: 0 0 16px;
    padding: 11px 14px 11px 32px;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-sm);
    background: rgba(255, 255, 255, 0.02);
    color: var(--gb-muted);
    font-size: 12px;
    line-height: 1.85;
}

.gb-ui .pa-cod-guia b { color: var(--gb-text); }

/* ==========================================================================
   Ficha del lote
   ==========================================================================
   Con un lote abierto la pantalla NO se parte en dos columnas: la fila de
   premios tiene seis campos y en 420 px no cabia. La ficha ocupa todo el
   ancho y se recorre de arriba abajo, que es el orden en que se trabaja:
   datos -> premios -> generar -> codigos. */

.gb-ui .pa-cod-ficha {
    display: flex;
    flex-direction: column;
    gap: var(--gb-gap);
}

.gb-ui .pa-cod-ficha__cab {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius);
    background:
        radial-gradient(520px 130px at 12% 0%, rgba(120, 180, 230, 0.09), transparent 70%),
        var(--gbp-vidrio);
}

.gb-ui .pa-cod-volver {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--gb-muted);
    font-size: 11px;
    text-decoration: none;
}

.gb-ui .pa-cod-volver:hover { color: var(--gb-accent-2); }

.gb-ui .pa-cod-ficha__id h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}

.gb-ui .pa-cod-ficha__id p {
    margin: 4px 0 0;
    color: var(--gb-muted);
    font-size: 12px;
}

.gb-ui .pa-cod-tag {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gb-ui .pa-cod-tag.is-on { background: rgba(63, 191, 127, .18); color: #7fe0b0; }
.gb-ui .pa-cod-tag.is-off { background: rgba(224, 82, 82, .18); color: #f0a0a0; }

/* Las cifras del lote, a la derecha del titulo: cuantos hay, cuantos quedan. */
.gb-ui .pa-cod-ficha__num {
    display: flex;
    gap: 22px;
}

.gb-ui .pa-cod-ficha__num span {
    display: flex;
    flex-direction: column;
    color: var(--gb-muted);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gb-ui .pa-cod-ficha__num b {
    color: var(--gb-text);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: none;
}

.gb-ui .pa-cod-ficha__num .is-mal b { color: #f0a0a0; }

/* ---- Los pasos ---- */
.gb-ui .pa-cod-paso > .gb-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* El numero del paso: dice de un vistazo por donde va la campana. */
.gb-ui .pa-cod-n {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.gb-ui .pa-cod-paso.is-hecho .pa-cod-n {
    border-color: rgba(63, 191, 127, .55);
    background: rgba(63, 191, 127, .2);
    color: #9beac4;
}

/* El paso que toca ahora se subraya con la barra de poder. */
.gb-ui .pa-cod-paso.is-toca .pa-cod-n {
    border-color: var(--gb-warning);
    background: rgba(240, 180, 41, .2);
    color: #ffd98a;
}

.gb-ui .pa-cod-paso.is-toca > .gb-card__head::after { opacity: 1; }

.gb-ui .pa-cod-paso__nota {
    margin-left: auto;
    color: #8fb0d0;
    font-size: 11px;
    font-style: italic;
}

/* Los datos del lote, a lo ancho, caben en fila en vez de uno bajo otro. */
.gb-ui .pa-cod-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 16px;
}

/* El «lote activo» es el unico campo con casilla. Sin esto su ayuda se pega al
   lado en vez de caer debajo, y ademas hereda el rotulo en mayusculas de los
   demas campos, con lo que su texto parecia un titulo de seccion. */
.gb-ui .pa-cod-activo .gb-check {
    display: flex;
    margin-bottom: 5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.gb-ui .pa-cod-acciones {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--gb-border);
}

/* ---- Lo que hay que entender antes de tocar los premios ---- */
.gb-ui .pa-cod-notas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.gb-ui .pa-cod-nota {
    padding: 11px 13px;
    border: 1px solid var(--gb-border);
    border-left: 3px solid var(--gb-accent-2);
    border-radius: var(--gb-radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.gb-ui .pa-cod-nota b {
    display: block;
    margin-bottom: 4px;
    color: var(--gb-text);
    font-size: 12px;
}

.gb-ui .pa-cod-nota p {
    margin: 0;
    color: var(--gb-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.gb-ui .pa-cod-nota p b { display: inline; margin: 0; font-size: inherit; }

/* ---- Copiar los premios de otro lote ---- */
/* Repetir campana es lo normal; rehacer la tabla a mano es donde se cuela un
   peso mal tecleado. Va arriba del formulario, antes de empezar a teclear. */
.gb-ui .pa-cod-copiar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
    padding: 11px 13px;
    border: 1px solid var(--gb-border);
    border-left: 3px solid var(--gb-warning);
    border-radius: var(--gb-radius-sm);
    background: rgba(240, 180, 41, .06);
}

.gb-ui .pa-cod-copiar__txt { flex: 1; min-width: 240px; }

.gb-ui .pa-cod-copiar__txt b {
    display: block;
    color: var(--gb-text);
    font-size: 12px;
}

.gb-ui .pa-cod-copiar__txt p {
    margin: 3px 0 0;
    color: var(--gb-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.gb-ui .pa-cod-copiar select { max-width: 300px; }

.gb-ui .pa-cod-copiar__lista {
    margin: 0 0 16px;
    padding-left: 16px;
    color: var(--gb-muted);
    font-size: 11.5px;
    line-height: 1.7;
}

.gb-ui .pa-cod-copiar__lista b { color: #c9dcee; margin-right: 5px; }

/* Fila de premio: tipo ancho, las cifras estrechas y la equis al final.
   Se le pone tope: a pantalla completa el desplegable se estiraba media
   pantalla y separaba el nombre del premio de sus propias cifras. */
.gb-ui .pa-cod-premio {
    display: grid;
    grid-template-columns: minmax(0, 260px) 110px 90px 120px 90px 34px;
    gap: 7px;
    margin-bottom: 7px;
    max-width: 760px;
}

.gb-ui .pa-cod-premio input:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ---- Reparto real de un lote ya cerrado ---- */
.gb-ui .pa-cod-reparto {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
}

.gb-ui .pa-cod-reparto__fila {
    display: grid;
    grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) auto;
    max-width: 900px;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.gb-ui .pa-cod-reparto__fila b { color: var(--gb-text); }

.gb-ui .pa-cod-barra {
    height: 7px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

.gb-ui .pa-cod-barra i {
    display: block;
    height: 100%;
    background: var(--gbp-poder);
    opacity: .8;
}

.gb-ui .pa-cod-reparto__n {
    color: var(--gb-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

/* ---- Generar ---- */
.gb-ui .pa-cod-generar {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
}

.gb-ui .pa-cod-generar label {
    color: var(--gb-muted);
    font-size: 12px;
}

.gb-ui .pa-cod-generar .gb-input { max-width: 120px; }

/* Anular no tiene vuelta atras: va aparte, en rojo, y dice a cuantos afecta. */
.gb-ui .pa-cod-peligro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
    padding: 11px 13px;
    border: 1px solid rgba(224, 82, 82, .3);
    border-radius: var(--gb-radius-sm);
    background: rgba(224, 82, 82, .07);
}

.gb-ui .pa-cod-peligro b { color: #f0a0a0; font-size: 12px; }

.gb-ui .pa-cod-peligro p {
    margin: 3px 0 0;
    max-width: 62ch;
    color: var(--gb-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

/* El filtro vive en la cabecera del paso 4, pegado a la derecha. */
.gb-ui .pa-cod-filtro { margin: 0 0 0 auto; }

.gb-ui .pa-cod-filtro select {
    padding: 4px 8px;
    font-size: 11px;
}

/* ---- Tabla de codigos ---- */
.gb-ui .pa-cod-tabla-caja {
    max-height: 60vh;
    overflow: auto;
}

.gb-ui .pa-cod-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.gb-ui .pa-cod-tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    text-align: left;
    background: var(--gb-bg-elevated);
    border-bottom: 1px solid var(--gb-border);
    color: var(--gb-muted);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gb-ui .pa-cod-tabla td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--gb-border);
    color: var(--gb-text);
    vertical-align: middle;
}

/* El codigo se lee y se copia: monoespaciado y con algo de aire entre letras. */
.gb-ui .pa-cod-codigo {
    font-family: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;
    font-size: 13px;
    letter-spacing: .06em;
    white-space: nowrap;
    -webkit-user-select: all;
    user-select: all;
}

/* Estado por color de fila, para barrer la lista de un vistazo. */
.gb-ui .pa-cod-tabla tr.pa-cod-e1 td { color: var(--gb-muted); }
.gb-ui .pa-cod-tabla tr.pa-cod-e2 td { opacity: .5; text-decoration: line-through; }
.gb-ui .pa-cod-tabla tr.pa-cod-e3 td { background: rgba(224, 82, 82, .1); }
.gb-ui .pa-cod-tabla tr.pa-cod-e3 .pa-cod-codigo { color: #ffb0b0; }

.gb-ui .pa-cod-tabla form { margin: 0; }

/* Icono del tipo de prenda en las pestañas del montador de sets. */
.gb-ui .pa-sets-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gb-ui .pa-sets-pill img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Casilla que no aplica a ese tipo de premio. Va con `readonly`, no con
   `disabled`, porque disabled NO se envía y desalineaba los arrays paralelos
   del formulario; el aspecto apagado lo pone esta clase. */
.gb-ui .gb-input.is-apagado {
    opacity: .38;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
}

/* Cabecera de columnas del formulario de premios: cinco casillas seguidas no
   dicen cuál es cuál sin un rótulo encima. */
.gb-ui .pa-cod-cabecera {
    margin-bottom: 3px;
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gb-muted);
}

.gb-ui .pa-cod-ayuda {
    margin: -2px 0 8px;
    padding-left: 2px;
    color: var(--gb-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

/* Chuleta plegada: está a mano sin ocupar sitio mientras no se necesita. */
.gb-ui .pa-cod-chuleta {
    margin-top: 12px;
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.gb-ui .pa-cod-chuleta summary {
    padding: 9px 12px;
    cursor: pointer;
    color: var(--gb-text);
    font-size: 12.5px;
    font-weight: 600;
}

.gb-ui .pa-cod-chuleta table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.gb-ui .pa-cod-chuleta th {
    padding: 6px 12px;
    text-align: left;
    border-top: 1px solid var(--gb-border);
    border-bottom: 1px solid var(--gb-border);
    color: var(--gb-muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gb-ui .pa-cod-chuleta td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--gb-border);
    color: var(--gb-muted);
    vertical-align: top;
}

.gb-ui .pa-cod-chuleta td b { color: var(--gb-text); }

.gb-ui .pa-cod-chuleta code {
    font-size: 11px;
    color: #9dd0f5;
    white-space: nowrap;
}

/* ==========================================================================
   Evento tematico (panel)
   ==========================================================================
   Reaprovecha casi todo del modulo de codigos —la ficha, los pasos, las notas
   y la tabla— porque son el mismo tipo de pantalla y dos aspectos distintos
   para lo mismo confunden. Lo propio de aqui son las pestanas de bloque, la
   lista de nombres bajo los campos de articulos y el punto de color. */

.gb-ui .pa-ev-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

.gb-ui .pa-ev-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--gb-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--gb-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s, color .16s, border-color .16s;
}

.gb-ui .pa-ev-tab:hover { color: var(--gb-text); border-color: var(--gb-border-strong); }

.gb-ui .pa-ev-tab.is-on {
    border-color: var(--gb-accent);
    background: var(--gb-accent-soft);
    color: #fff;
}

/* El recuento dice de un vistazo que bloque esta vacio y, por tanto, cual no
   se esta enseñando todavia en la web. */
.gb-ui .pa-ev-tab i {
    padding: 1px 7px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    font-size: 10.5px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.gb-ui .pa-ev-tab.is-on i { background: rgba(255, 255, 255, .18); }

/* Los nombres reales de los articulos, debajo del campo de codigos: es lo que
   permite darse cuenta de que 33138 no era lo que se creia. */
.gb-ui .pa-ev-items {
    margin: 5px 0 0;
    padding: 6px 9px;
    border-radius: 6px;
    background: rgba(78, 181, 241, .08);
    color: #9dd0f5;
    font-size: 11px;
    line-height: 1.5;
}

.gb-ui .pa-ev-acciones {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.gb-ui .pa-ev-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: baseline;
}

/* El formulario de pieza aparece dentro de la tarjeta de su pack, asi que se
   separa con una linea para que no parezca parte de la lista de arriba. */
.gb-ui .pa-ev-pieza {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gb-border);
}

.gb-ui textarea.gb-input {
    height: auto;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

/* ==========================================================================
   Log del anticheat
   ==========================================================================
   Reaprovecha la tira de cifras del Free Kill (`pa-fk-stats`) porque es la
   misma idea: cuatro numeros de contexto encima de la tabla. Lo propio de
   aqui son la chapa del tipo de deteccion, la lista de reincidentes y el
   texto de lo que vio el cliente. */

/* Las detecciones de las ultimas 24 h en rojo: es la unica cifra que pide
   mirar hoy, el resto es historico. */
.gb-ui .pa-fk-stat__value.is-mal { color: #f0a0a0; }

/* ---- Chapa del tipo ---- */
.gb-ui .pa-hack-tipo {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .07);
    color: var(--gb-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Un color por tipo, para poder barrer la lista sin leer la columna. */
.gb-ui .pa-hack-tipo--window-title-blacklist {
    background: rgba(240, 180, 41, .16);
    color: #f3d79a;
}

.gb-ui .pa-hack-tipo--process-blacklist {
    background: rgba(224, 82, 82, .18);
    color: #f0a0a0;
}

/* ---- Lo que se detecto ---- */
/* Es el dato por el que se entra a esta pantalla, asi que va destacado y con
   sitio: los titulos de ventana de los hacks son largos. */
.gb-ui .pa-hack-que { max-width: 320px; }

.gb-ui .pa-hack-que code {
    display: inline-block;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
    color: #9dd0f5;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ---- Cuentas que mas saltan ---- */
.gb-ui .pa-hack-top__et {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gb-ui .pa-hack-top {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* Cada nombre es un atajo: filtra la tabla por esa cuenta. */
.gb-ui .pa-hack-top__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--gb-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, .02);
    color: var(--gb-text);
    font-size: 12.5px;
    text-decoration: none;
    transition: border-color .16s, background .16s;
}

.gb-ui .pa-hack-top__item:hover {
    border-color: var(--gb-accent);
    background: var(--gb-accent-soft);
}

.gb-ui .pa-hack-top__item span {
    padding: 1px 8px;
    border-radius: 20px;
    background: rgba(224, 82, 82, .2);
    color: #f0a0a0;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* La tira de cifras nace con tres columnas (la usa el Free Kill). El log del
   anticheat ensena cuatro, y sin esto la cuarta caia sola a una segunda fila. */
.gb-ui .pa-fk-stats--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
    .gb-ui .pa-fk-stats--4 { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   Bloqueo de PC (HWID)

   El HWID es una cadena larga sin espacios que no se puede partir a media
   palabra sin volverla ilegible, y en la lista negra hay una por fila. Se
   pinta en monoespaciada, con su tamano propio, y se le deja partir por
   caracter para que no reviente el ancho de la tabla.
   ========================================================================= */
.gb-ui .pa-hwid-code {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-all;
}

.gb-ui .pa-hwid-accounts summary {
    cursor: pointer;
    font-size: 11px;
    color: var(--gb-text-muted, #8fa3bd);
}

.gb-ui .pa-hwid-accounts__list {
    margin: 6px 0 0;
    padding-left: 14px;
    max-height: 190px;
    overflow-y: auto;
    font-size: 11px;
}

.gb-ui .pa-hwid-accounts__list li {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

/* Motivo + boton dentro de la celda: en columna para que el campo de texto
   no empuje el boton fuera de la tabla en pantallas estrechas. */
.gb-ui .pa-hwid-inline-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.gb-ui .pa-hwid-confirm {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 6px 0;
    line-height: 1.35;
}

.gb-ui .pa-hwid-confirm input { margin-top: 2px; }

.gb-ui .gb-input--sm {
    height: 26px;
    padding: 0 8px;
    font-size: 11px;
}

/* ==========================================================================
   Paginacion de los logs
   ==========================================================================
   Sustituye a `pa-send-pagination`, que pintaba como mucho 15 numeros: de la
   pagina 16 en adelante no habia enlace y el historial largo de un jugador
   quedaba fuera de alcance. Aqui van primera/anterior, una ventana alrededor
   de la actual, siguiente/ultima y un salto directo por numero. */

.gb-ui .pa-log-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 15px;
    border-top: 1px solid var(--gb-border);
}

.gb-ui .pa-log-pager__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.gb-ui .pa-log-pager__hueco {
    padding: 0 4px;
    color: var(--gb-muted);
    font-size: 12px;
}

/* El salto por numero: con cientos de paginas, ir de cinco en cinco no vale. */
.gb-ui .pa-log-pager__salto {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--gb-muted);
    font-size: 12px;
    white-space: nowrap;
}

.gb-ui .pa-log-pager__salto .gb-input {
    width: 82px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
    text-align: center;
}

/* ==========================================================================
   Premio de avatar en las misiones
   ==========================================================================
   Dos listas de piezas, una por genero, y un selector que abre el mismo
   catalogo que el montador de sets. El bloque va DEBAJO de la fila del premio
   -no dentro- porque son dos listas y un nombre, y al lado de las casillas de
   cantidad no cabrian. */

/* EL GUARDA DEL `hidden`, y no sobra.
   El bloque se enseña y se oculta con el atributo `hidden`, que funciona con
   la regla `[hidden] { display: none }` del navegador -especificidad (0,1,0)-.
   Pero mas abajo `.gb-ui .pa-mis-avatar` le pone `display: grid` con (0,2,1),
   que gana: el resultado era que la caja del avatar salia SIEMPRE, aunque el
   premio elegido fuese Oro o VIP. Esta regla, con (0,3,1), manda sobre las dos
   y ademas no depende del orden en el archivo. */
.gb-ui .pa-mis-avatar[hidden] { display: none; }

.gb-ui .pa-mis-avatar {
    margin: -2px 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--gb-border);
    border-left: 3px solid var(--gb-accent-2);
    border-radius: var(--gb-radius-sm);
    background: rgba(78, 181, 241, .05);
}

.gb-ui .pa-mis-avatar__col {
    display: block;
    margin-top: 10px;
}

/* Las dos listas, una al lado de la otra cuando hay sitio. */
@media (min-width: 900px) {
    .gb-ui .pa-mis-avatar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 18px;
    }

    .gb-ui .pa-mis-avatar > .gb-form-group,
    .gb-ui .pa-mis-avatar__nota { grid-column: 1 / -1; }
}

/* El campo y su boton de elegir, pegados. */
.gb-ui .pa-mis-avatar__campo {
    display: flex;
    gap: 7px;
}

.gb-ui .pa-mis-avatar__campo .gb-input { flex: 1; min-width: 0; }
.gb-ui .pa-mis-avatar__campo .gb-btn { flex: none; }

/* Los nombres reales de las piezas: es lo que permite darse cuenta de que
   33575 no era el cuerpo que uno creia. */
.gb-ui .pa-mis-avatar__piezas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.gb-ui .pa-mis-avatar__piezas .pa-sets-chip i {
    margin-left: 5px;
    opacity: .65;
    font-style: normal;
    font-size: 10px;
    text-transform: uppercase;
}

/* Un codigo que no existe en el catalogo: se marca en rojo en vez de
   desaparecer, que es lo que pasaba antes. */
.gb-ui .pa-mis-avatar__piezas .pa-sets-chip.is-mal {
    border-color: rgba(224, 82, 82, .45);
    background: rgba(224, 82, 82, .12);
    color: #f0a0a0;
}

.gb-ui .pa-mis-avatar__nota { margin-top: 12px; }

/* ---- Selector de piezas ---- */
.gb-ui .pa-mis-picker,
.pa-mis-picker {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 10, 18, .72);
    backdrop-filter: blur(3px);
}

.pa-mis-picker[hidden] { display: none; }

.pa-mis-picker__caja {
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: 82vh;
    border: 1px solid var(--gb-border-strong, rgba(120, 180, 230, .28));
    border-radius: 10px;
    background: var(--gb-bg-elevated, #0c1b2b);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.pa-mis-picker__cab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--gb-border, rgba(120, 180, 230, .13));
    background: linear-gradient(180deg, rgba(29, 62, 94, .9), rgba(17, 42, 66, .9));
}

.pa-mis-picker__cab b { color: #fff; font-size: 13px; white-space: nowrap; }
.pa-mis-picker__cab .gb-input { height: 32px; font-size: 12px; }
.pa-mis-picker__cab [data-picker-q] { flex: 1; min-width: 0; }
.pa-mis-picker__cab [data-picker-tipo] { width: 150px; flex: none; }

.pa-mis-picker__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 9px;
    padding: 15px;
    overflow-y: auto;
}

.pa-mis-picker__cargando {
    grid-column: 1 / -1;
    padding: 30px;
    color: var(--gb-muted, #8ba6c2);
    font-size: 13px;
    text-align: center;
}

.pa-mis-picker__pieza {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 7px;
    border: 1px solid var(--gb-border, rgba(120, 180, 230, .13));
    border-radius: 8px;
    background: rgba(255, 255, 255, .02);
    color: var(--gb-text, #eaf2fa);
    cursor: pointer;
    transition: border-color .16s, background .16s, transform .16s;
}

.pa-mis-picker__pieza:hover {
    transform: translateY(-2px);
    border-color: var(--gb-accent, #c0392b);
    background: var(--gb-accent-soft, rgba(192, 57, 43, .16));
}

/* El sprite se pinta a tamano real y se centra; son pixeles, no conviene
   escalarlos hacia arriba. */
.pa-mis-picker__img {
    display: grid;
    place-items: center;
    width: 100%;
    height: 62px;
    overflow: hidden;
}

.pa-mis-picker__img i {
    display: block;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.pa-mis-picker__pieza b {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    /* Un nombre largo no debe estirar la tarjeta y descuadrar la rejilla. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pa-mis-picker__pieza i {
    color: var(--gb-muted, #8ba6c2);
    font-style: normal;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pa-mis-picker__pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 11px 15px;
    border-top: 1px solid var(--gb-border, rgba(120, 180, 230, .13));
}

/* La pieza dentro del selector, en DOS cajas: la de fuera mide lo que se ve y
   es la que centra la rejilla; la de dentro conserva el tamano real de la hoja
   y se encoge desde la esquina. Con una sola caja el navegador reservaba el
   tamano SIN escalar -una bandera son 188x106- y el hueco la recortaba. */
.gb-ui .pa-mis-picker__sp {
    display: block;
    position: relative;
    overflow: hidden;
}

.gb-ui .pa-mis-picker__sp-in {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}

.gb-ui .pa-mis-picker__sp-in i {
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* ---- Paginacion del selector ---- */
.gb-ui .pa-mis-picker__pie {
    align-items: center;
    gap: 4px;
}

.gb-ui .pa-mis-picker__hueco {
    padding: 0 3px;
    color: var(--gb-muted);
    font-size: 12px;
}

.gb-ui .pa-mis-picker__salto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    color: var(--gb-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

.gb-ui .pa-mis-picker__salto .gb-input {
    width: 68px;
    height: 28px;
    padding: 0 7px;
    font-size: 12px;
    text-align: center;
}

/* ---- Las piezas del premio, agrupadas por hueco ----
   En el orden en que se pintan sobre el muñeco, para que se lea igual que se
   va a ver. El orden en que se escriban los codigos es indiferente. */
.gb-ui .pa-mis-avatar__piezas {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 7px;
}

.gb-ui .pa-mis-hueco {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.gb-ui .pa-mis-hueco__et {
    flex: none;
    width: 62px;
    color: var(--gb-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gb-ui .pa-mis-avatar__piezas .pa-sets-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gb-ui .pa-mis-avatar__piezas .pa-sets-chip b {
    cursor: pointer;
    opacity: .5;
    font-size: 13px;
    line-height: 1;
}

.gb-ui .pa-mis-avatar__piezas .pa-sets-chip b:hover { opacity: 1; color: #f0a0a0; }

/* Prenda del otro genero: se entregaria, pero el muñeco no puede llevarla. */
.gb-ui .pa-sets-chip.is-ajeno {
    border-color: rgba(240, 180, 41, .45);
    background: rgba(240, 180, 41, .12);
    color: #f3d79a;
}

/* Segunda pieza del mismo hueco: se entregan las dos, pero solo se ve una. */
.gb-ui .pa-sets-chip.is-repe {
    border-style: dashed;
    opacity: .8;
}

.gb-ui .pa-mis-orden-capas {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 20px;
    background: rgba(78, 181, 241, .12);
    color: #9dd0f5;
    font-size: 11px;
    white-space: nowrap;
}

/* Como va la plantilla en una mision de mapa/mobile. Avisa de un objetivo
   inalcanzable antes de que se queje alguien. */
.gb-ui .pa-mis-reparto {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 5px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

/* Cada dato en su casilla. Lo que se gana es que la linea parte ENTRE datos y
   no dentro de uno: antes "1,056 con historial" se rompia en tres renglones. */
.gb-ui .pa-mis-reparto li {
    padding: 1px 6px;
    border: 1px solid var(--gb-border);
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--gb-text-dim, #9aa4b2);
}

.gb-ui .pa-mis-reparto li b {
    font-weight: 600;
    color: var(--gb-text, #e6ebf2);
}

/* Nadie la completa y casi todos estan a cero: el numero pedido es demasiado
   alto para lo que se juega ese mapa. */
.gb-ui .pa-mis-reparto.is-duro li {
    border-color: rgba(243, 215, 154, .45);
    color: #f3d79a;
}

.gb-ui .pa-mis-reparto.is-duro li b { color: #ffdf9e; }

/* Y dicho con palabras, que un aro amarillo no lo explica. */
.gb-ui .pa-mis-aviso-duro {
    margin: 2px 0 0;
    font-size: 10.5px;
    line-height: 1.45;
    color: #f3d79a;
}

/* ---- Misiones: la fecha propia ------------------------------------------ */

/* El campo y sus dos atajos en una línea. El input se lleva el sitio que
   sobra; los botones se quedan con el suyo. */
.gb-ui .pa-mis-fecha {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.gb-ui .pa-mis-fecha .gb-input {
    flex: 1 1 auto;
    min-width: 0;
}

.gb-ui .pa-mis-fecha .gb-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Aviso de que en mapa/mobile la fecha no hace nada. Se enciende con el tipo,
   así que necesita ganar a la regla de `display` de abajo: `[hidden]` solo
   pesa (0,1,0) y cualquier `.a .b { display: … }` lo tumba. */
.gb-ui .pa-mis-nota-fecha {
    display: block;
    margin-top: .35rem;
    padding: .45rem .6rem;
    border-left: 3px solid #d98324;
    border-radius: 4px;
    background: rgba(217, 131, 36, .1);
    color: #b06a12;
    line-height: 1.45;
}

.gb-ui .pa-mis-nota-fecha[hidden] {
    display: none;
}

/* ==========================================================================
   Membresías (panel)
   ========================================================================== */

/* Consultar a un jugador antes de tocarle nada: el campo y el botón en línea,
   porque es una pregunta rápida, no un formulario. */
.gb-ui .pa-memb-buscar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

.gb-ui .pa-memb-buscar .gb-form-group {
    flex: 1 1 260px;
    max-width: 340px;
    margin: 0;
}

.gb-ui .pa-memb-buscar .gb-btn { flex: 0 0 auto; }

/* El resultado de la consulta. */
.gb-ui .pa-memb-estado {
    margin: 0 0 10px;
    padding: 9px 12px;
    border-left: 3px solid var(--gb-border);
    border-radius: 5px;
    background: rgba(255, 255, 255, .03);
    font-size: 12.5px;
    line-height: 1.55;
}

.gb-ui .pa-memb-estado.is-on {
    border-left-color: #d98324;
    background: rgba(217, 131, 36, .1);
}

.gb-ui .pa-memb-retirar {
    margin: -4px 0 12px;
}

/* El aviso de cerrar el juego. Va pegado al botón y no en la letra pequeña
   del final porque es lo que más veces ha dado problemas con el VIP: se
   activa con la sesión abierta y el servidor lo pisa al salir. */
.gb-ui .pa-memb-ojo {
    margin: 10px 0 0;
    padding: 9px 12px;
    border-left: 3px solid #d98324;
    border-radius: 5px;
    background: rgba(217, 131, 36, .1);
    color: #f3d79a;
    font-size: 12.5px;
    line-height: 1.55;
}

.gb-ui .pa-memb-ojo b { color: #ffdf9e; }

/* Los dos interruptores del plan, uno bajo otro y alineados con los campos
   que tienen al lado. */
.gb-ui .pa-memb-checks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* ==========================================================================
   Códigos de avatar (catálogo para copiar)
   ========================================================================== */

.gb-ui .pa-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.gb-ui .pa-cat-item {
    align-items: stretch;
    gap: 4px;
}

.gb-ui .pa-cat-nombre {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gb-ui .pa-cat-tipo {
    color: var(--gb-muted);
    font-size: 11px;
}

/* El código grande, a la izquierda, y el botón de copiar pegado a él. */
.gb-ui .pa-cat-codigo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 5px 5px 10px;
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
}

.gb-ui .pa-cat-codigo code {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #ffd76a;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    text-overflow: ellipsis;
    user-select: all;
}

.gb-ui .pa-cat-copiar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid rgba(78, 181, 241, 0.45);
    border-radius: 6px;
    background: rgba(78, 181, 241, 0.12);
    color: #bfe3fa;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.gb-ui .pa-cat-copiar svg { width: 14px; height: 14px; }

.gb-ui .pa-cat-copiar:hover {
    border-color: rgba(78, 181, 241, 0.8);
    background: rgba(78, 181, 241, 0.25);
    color: #fff;
}

.gb-ui .pa-cat-copiar.is-ok {
    border-color: rgba(76, 201, 125, 0.8);
    background: rgba(76, 201, 125, 0.2);
    color: #b9f3cf;
}

.gb-ui .pa-cat-copiar.is-mal {
    border-color: rgba(232, 93, 93, 0.8);
    background: rgba(232, 93, 93, 0.18);
    color: #ffc9c9;
}

.gb-ui .pa-cat-enviar {
    margin-top: 4px;
    color: var(--gb-muted);
    font-size: 11px;
    text-align: right;
    text-decoration: none;
}

.gb-ui .pa-cat-enviar:hover { color: #fff; }

/* ==========================================================================
   Avatares con bonus de GP (panel)
   Casi todo reutiliza Membresías (pa-memb-*), Misiones (pa-mis-*) y la tienda
   (pa-shop-*, pa-sets-chip). Aquí solo va lo propio de este módulo.
   ========================================================================== */

/* La consulta de un jugador con packs vigentes: el mismo recuadro naranja de
   Membresías, pero con una lista dentro, así que los márgenes van por dentro. */
.gb-ui .pa-avb-estado p { margin: 0; }

.gb-ui .pa-avb-total { color: #ffdf9e; }

.gb-ui .pa-avb-activos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 4px;
    padding: 0;
    list-style: none;
}

/* Cada pack vigente: sus datos a la izquierda y el botón de retirar a la
   derecha, y apilados cuando no cabe. */
.gb-ui .pa-avb-activo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--gb-border);
    border-radius: 7px;
    background: rgba(0, 0, 0, .18);
}

.gb-ui .pa-avb-activo__txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* El bloque de piezas ocupa todo el ancho de la tarjeta del formulario, así
   que no hace falta el margen negativo que lleva en las filas de premios. */
.gb-ui .pa-avb-avatar { margin-top: 8px; }

/* El color del pack: el campo y una muestra al lado para ver qué se escribe. */
.gb-ui .pa-avb-color {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gb-ui .pa-avb-color .gb-input { flex: 1; min-width: 0; }

.gb-ui .pa-avb-color__muestra {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
}

/* La tarjeta de cada pack lleva arriba su color de acento, el mismo que verá
   el jugador en la web: así se reconoce cuál es cuál de un vistazo. */
.gb-ui .pa-avb-pack {
    border-top: 3px solid var(--pa-avb-color, #a855f7);
}

.gb-ui .pa-avb-bonus { color: #7fe0ac; font-weight: 600; }

/* Las piezas de hombre y de mujer, una fila cada una con su rótulo. */
.gb-ui .pa-avb-piezas {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
}

.gb-ui .pa-avb-piezas__et {
    padding-top: 3px;
    color: var(--gb-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Estado de cada activación en el historial. */
.gb-ui .pa-avb-estado-h {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--gb-border);
    border-radius: 999px;
    color: var(--gb-muted);
    font-size: 11px;
    white-space: nowrap;
}

.gb-ui .pa-avb-estado-h.is-on {
    border-color: rgba(63, 191, 127, .45);
    background: rgba(63, 191, 127, .14);
    color: #7fe0ac;
}

.gb-ui .pa-avb-estado-h.is-off {
    border-color: rgba(224, 82, 82, .45);
    background: rgba(224, 82, 82, .12);
    color: #f0a0a0;
}