/* Tablero de gráficos de los comparadores: recuadros con vista previa y el gráfico que crece desde ellos */
.chart-viewport-wrap.gt { position: relative; height: 580px; }
.gt-oculto { display: none !important; }

.gt-rejilla {
    position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr); gap: .9rem; padding: .1rem; overflow: hidden auto; scrollbar-width: thin;
    transition: opacity .35s ease, filter .35s ease;
}
.gt-rejilla.gt-tapada { opacity: .25; filter: blur(2px); pointer-events: none; }

.gt-cel {
    --gt-acc: #ff7b3a;
    position: relative; display: flex; flex-direction: column; min-height: 170px; padding: .85rem 1rem .8rem; border: 0; border-radius: 16px;
    text-align: left; font: inherit; color: var(--text-primary, #f1f1f3); cursor: pointer; background: rgb(22, 22, 22);
    box-shadow: inset 5px 5px 12px rgba(0, 0, 0, .7), inset -4px -4px 10px rgba(255, 255, 255, .05);
    transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s ease;
}
.light-theme .gt-cel { background: #e6e6e6; color: #1d1d22; box-shadow: inset 5px 5px 12px rgba(0, 0, 0, .13), inset -4px -4px 10px rgba(255, 255, 255, .9); }
.gt-cel:hover { transform: translateY(-3px); box-shadow: inset 5px 5px 12px rgba(0, 0, 0, .7), inset -4px -4px 10px rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 123, 58, .5), 0 8px 24px rgba(255, 123, 58, .12); }
.gt-cel:focus-visible { outline: 2px solid var(--gt-acc); outline-offset: 2px; }
.gt-cab { display: flex; align-items: center; gap: .55rem; font: 700 .72rem/1 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gt-acc); }
.gt-cab i { font-size: .8rem; }
.gt-prev { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: .6rem 0 .5rem; overflow: hidden; }
.gt-prev img, .gt-prev svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; opacity: .92; transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), opacity .25s; }
.gt-cel:hover .gt-prev img, .gt-cel:hover .gt-prev svg { transform: scale(1.06); opacity: 1; }
.gt-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; line-height: 1.35; color: var(--text-secondary, rgba(255, 255, 255, .5)); }

/* El gráfico real: cerrado hasta que se abre un recuadro (entonces crece desde él) */
.chart-viewport.gt-vista { position: absolute !important; inset: 0; height: auto !important; visibility: hidden; pointer-events: none; clip-path: inset(50% 50% 50% 50% round 16px); }
.chart-viewport.gt-vista.gt-abierto { visibility: visible; pointer-events: auto; }
.gt-cerrar {
    position: absolute; top: .7rem; right: .8rem; z-index: 6; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border: 0; border-radius: 99px;
    background: rgba(255, 255, 255, .08); color: inherit; font: 600 .74rem/1 'Courier New', monospace; cursor: pointer; backdrop-filter: blur(6px);
    transition: background .2s, color .2s;
}
.light-theme .gt-cerrar { background: rgba(0, 0, 0, .07); }
.gt-enfoques { position: absolute; top: .7rem; left: .8rem; z-index: 6; display: flex; flex-wrap: wrap; gap: .4rem; max-width: calc(100% - 13rem); }
.gt-enf {
    padding: .45rem .8rem; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .08); color: inherit; opacity: .75;
    font: 600 .74rem/1 'Courier New', monospace; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, color .2s, opacity .2s;
}
.light-theme .gt-enf { background: rgba(0, 0, 0, .07); }
.gt-enf:hover { opacity: 1; }
.gt-enf[aria-pressed="true"] { opacity: 1; background: rgba(255, 123, 58, .2); color: #ff7b3a; box-shadow: inset 0 0 0 1px rgba(255, 123, 58, .6); }
.gt-enf:focus-visible { outline: 2px solid #ff7b3a; outline-offset: 2px; }
.gt-cerrar:hover { background: rgba(255, 123, 58, .22); color: #ff7b3a; }
.gt-cerrar:focus-visible { outline: 2px solid #ff7b3a; outline-offset: 2px; }

@media (max-width: 987px) { .chart-viewport-wrap.gt { height: 440px; } }
@media (max-width: 560px) { .gt-enfoques { max-width: calc(100% - 3.4rem); } .gt-cel { min-height: 140px; padding: .7rem .75rem; } .gt-cerrar span { display: none; } }
@media (prefers-reduced-motion: reduce) { .gt-cel, .gt-prev img, .gt-prev svg, .gt-rejilla { transition: none; } }

/* Datos por eje a la derecha del radar */
.gt-lat { display: none; position: absolute; top: 3.6rem; right: 0; bottom: 0; width: 40%; min-width: 250px; padding: .2rem 1.1rem 1rem 0; overflow-y: auto; scrollbar-width: thin; z-index: 5; }
.chart-viewport.gt-con-lat .gt-lat { display: block; }
.chart-viewport.gt-con-lat .chart-slide[data-type="radar"], .chart-viewport.gt-con-lat .chart-slide[data-type="performance"],
.chart-viewport.gt-con-lat .chart-slide[data-type="gaming"], .chart-viewport.gt-con-lat .chart-slide[data-type="professional"] { width: 60%; padding: 2.8rem 2.4rem .4rem 2.4rem; box-sizing: border-box; }
/* las etiquetas del radar se colocan respecto al lienzo: se desplazan lo mismo que el margen del radar */
.chart-viewport.gt-con-lat .radar-labels-overlay { left: 2.4rem; top: 2.8rem; }
.gt-lat-t { margin: 0 0 .7rem; font: 700 .72rem/1 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; color: #ff7b3a; }
.gt-lat-t span { color: var(--text-secondary, rgba(255, 255, 255, .5)); font-weight: 400; letter-spacing: .06em; }
.gt-tab { --n: 3; }
.gt-fila { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--n), minmax(2.1rem, 1fr)); align-items: center; gap: .3rem; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 500 .8rem/1.2 system-ui, 'Segoe UI', sans-serif; }
.light-theme .gt-fila { border-bottom-color: rgba(0, 0, 0, .09); }
.gt-cab-t { padding-top: 0; }
.gt-col { display: flex; justify-content: center; }
.gt-col i { width: 10px; height: 10px; border-radius: 50%; }
.gt-eje { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary, rgba(255, 255, 255, .6)); }
.gt-val { text-align: center; font-variant-numeric: tabular-nums; }
.gt-mejor { font-weight: 800; }
.gt-media { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: .2rem; }
.gt-media .gt-eje { font-weight: 700; color: inherit; }
.gt-lat-nota { margin: .6rem 0 0; font-size: .7rem; color: var(--text-secondary, rgba(255, 255, 255, .45)); }
@media (max-width: 900px) {
    .gt-lat { display: none !important; }
    .chart-viewport.gt-con-lat .chart-slide { width: 100% !important; }
}