/* Gajos — anillo de reparto de la puntuación (comparadores). Tema oscuro por defecto, .light-theme claro */
.gj {
    --gj-tx: #f1f1f3; --gj-dim: rgba(255, 255, 255, .5); --gj-linea: rgba(255, 255, 255, .08);
    --gj-pill: rgba(255, 255, 255, .06); --gj-acc: #ff7b3a;
    height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto minmax(0, 1fr);
    gap: .4rem 1.8rem; padding: .9rem 1.4rem 1rem; box-sizing: border-box; color: var(--gj-tx);
}
.light-theme .gj { --gj-tx: #1d1d22; --gj-dim: rgba(0, 0, 0, .5); --gj-linea: rgba(0, 0, 0, .09); --gj-pill: rgba(0, 0, 0, .05); }
.gj-top { grid-column: 1 / -1; }
.gj-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.gj-pill {
    display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; padding: .42rem .85rem; border: 0; border-radius: 99px;
    background: var(--gj-pill); color: var(--gj-dim); font: 600 .78rem/1 'Courier New', monospace; cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}
.gj-pill i { flex: 0 0 9px; height: 9px; border-radius: 50%; }
.gj-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gj-pill:hover { color: var(--gj-tx); }
.gj-pill[aria-pressed="true"] { color: var(--gj-tx); background: color-mix(in srgb, var(--gj-serie, #ff7b3a) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gj-serie, #ff7b3a) 60%, transparent); }
.gj-pill[hidden] { display: none; }
.gj-pill:focus-visible, .gj-fila:focus-visible { outline: 2px solid var(--gj-acc); outline-offset: 2px; }

.gj-ring { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
.gj-ring svg { height: 100%; max-height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; overflow: visible; }
.gj-ring::before {
    content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--gj-serie, #ff7b3a) 15%, transparent), transparent 70%);
}
.gj-gajos path { fill: none; stroke-linecap: round; cursor: pointer; }
.gj-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; padding: 0 28%; }
.gj-cifra { font: 700 clamp(1.8rem, 4.2vh, 2.7rem)/1 system-ui, 'Segoe UI', sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gj-pie { margin-top: .4rem; font: 500 .7rem/1.35 'Courier New', monospace; color: var(--gj-dim); }

.gj-leyenda { align-self: center; margin: 0; padding: 0; list-style: none; }
.gj-fila {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 3.2rem; align-items: center; gap: .8rem; width: 100%;
    padding: .62rem .2rem; border: 0; border-bottom: 1px solid var(--gj-linea); background: none; color: var(--gj-tx);
    font: 500 .88rem/1.2 system-ui, 'Segoe UI', sans-serif; text-align: left; cursor: pointer; transition: opacity .2s, padding-left .2s;
}
.gj-leyenda li:last-child .gj-fila { border-bottom: 0; }
.gj-muestra { width: 12px; height: 12px; border-radius: 4px; }
.gj-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gj-valor { font-variant-numeric: tabular-nums; }
.gj-parte { font-style: normal; text-align: right; color: var(--gj-dim); font-variant-numeric: tabular-nums; }
.gj-fila.is-activa { padding-left: .55rem; }
.gj-fila[aria-pressed="false"] { opacity: .38; }
.gj-fila[aria-pressed="false"] .gj-nombre { text-decoration: line-through; }

@media (max-width: 760px) {
    .gj { grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: auto; }
    .gj-ring { height: 280px; }
}