/* ══════════ VIDEOJUEGOS (sistema visual, 29/09/2026) ══════════
 * El área es como las demás: banda, pestañas, filtros, cajas, notas y
 * etiquetas salen de 16-sistema.css. Lo suyo es UNA pieza (tablero
 * «SisFirma · Videojuegos · la carátula con trofeos»): la carátula con su
 * barra de trofeos y, con platino, los cuatro símbolos del mando (△○✕□) en
 * el color del área. Nunca el logo de Sony. Fuera la cabecera de ~630 px
 * (título, texto, KPI, gráfico, trofeos y botones antes del catálogo). */

.vgj{ min-width:0 }
.vgj-aviso{ margin:0 0 12px }
.vgj-principal{ min-width:0 }

/* ── El catálogo: carátulas en rejilla ──
   Cinco por fila en escritorio y seis en pantallas anchas (antes aquí un
   4 fijo pisaba el 5/6 de 11-escritorio.css; ahora la rejilla vive solo aquí). */
.vgj-lista{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
@media (min-width:600px){ .vgj-lista{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
/* Entre 900 y 1099 la columna derecha (.sis-dos) ya está al lado: caben 3. */
@media (min-width:900px){ .vgj-lista{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px } }
@media (min-width:1100px){ .vgj-lista{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
@media (min-width:1600px){ .vgj-lista{ grid-template-columns:repeat(6,minmax(0,1fr)) } }

.vgj-caja{
  position:relative; min-width:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l);
}
/* El editor necesita sitio: la caja que se edita ocupa dos columnas. */
@media (min-width:600px){ .vgj-caja.editando{ grid-column:span 2 } }
.vgj-caja-img{
  position:relative; aspect-ratio:16/9; flex-shrink:0;
  background-color:var(--area-suave); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.vgj-sin-caratula{ font-size:1.8rem; opacity:.35 }
/* La consola, arriba a la izquierda (etiqueta común, no el logo de Sony). */
.vgj-caja-consola{ position:absolute; top:6px; left:6px; max-width:calc(100% - 44px); overflow:hidden; text-overflow:ellipsis }
/* El «⋮» de editar, arriba a la derecha. */
.vgj-caja-editar{
  position:absolute; top:5px; right:5px; width:26px; height:26px; padding:0; border-radius:50%;
  border:0; background:rgba(19,28,42,.6); color:#FFF; font-size:15px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.vgj-caja-editar:hover{ background:rgba(19,28,42,.85) }
/* Tu nota, como chapa sobre la carátula. */
.vgj-caja-nota{ position:absolute; right:6px; bottom:6px; display:flex }

.vgj-caja-info{ flex:1; padding:9px 10px 10px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0 }
.vgj-nombre{
  font-family:var(--f-tit); font-weight:700; font-size:13.5px; line-height:1.22; color:var(--tx);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.vgj-datos{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;
  font-family:var(--f-mono); font-size:10.5px; color:var(--tx2);
}
.vgj-datos b{ color:var(--tx); font-weight:600 }
.vgj-externa{ display:flex; max-width:100% }
.vgj-notas-mini{
  display:block; max-width:100%; font-size:11.5px; color:var(--tx2); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vgj-ultima{ margin-top:auto; font-size:11px; color:var(--tx3) }

/* Un juego excluido (el sobrino, una app que PSN coló como juego): apagado,
   que es la regla común (55 %). Sigue ahí, pero se lee que no cuenta. */
.vgj-caja.excluido{ opacity:.55 }
.vgj-caja.excluido .vgj-caja-img{ filter:grayscale(.6) }

/* ── La pieza propia: la barra de trofeos ── */
.vgj-trofeos{ display:flex; flex-direction:column; gap:4px; width:100% }
.vgj-trofeos-fila{ display:flex; align-items:center; gap:8px }
.vgj-trofeos-pista{ flex:1; height:6px; border-radius:3px; background:var(--neutro-suave); overflow:hidden; display:block }
.vgj-trofeos-pista i{ display:block; height:100%; border-radius:3px; background:var(--area) }
.vgj-trofeos-mando{ flex-shrink:0; font-family:var(--f-tit); font-weight:800; font-size:12px; letter-spacing:.02em; color:var(--area); line-height:1 }
.vgj-trofeos-rot{
  font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vgj-trofeos.platino .vgj-trofeos-rot{ color:var(--area) }
.vgj-trofeos.grande .vgj-trofeos-mando{ font-size:14px }
.vgj-trofeos.grande .vgj-trofeos-rot{ font-size:10px }

/* El «Platino particular» (el juego con más horas), con la pieza entera:
   carátula alta a la izquierda y la barra debajo del nombre. */
.vgj-firma{
  display:flex; gap:14px; align-items:center; box-sizing:border-box; min-width:0;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:14px 16px;
}
.vgj-firma-img{
  flex:0 0 92px; height:116px; border-radius:var(--r-m); overflow:hidden;
  background:linear-gradient(160deg, var(--tx), var(--area)); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.vgj-firma-txt{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:7px }
.vgj-firma-nombre{ font-size:15px; font-weight:600; line-height:1.25; color:var(--tx); overflow-wrap:anywhere }
.vgj-firma-consolas{ display:flex; flex-wrap:wrap; gap:4px }
.vgj-firma-horas{ font-size:12px; color:var(--tx2) }

/* ── La columna derecha ── */
.vgj-lado .sis-caja-tit{ align-items:center }
.vgj-aprox{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.7 }
/* La cronología anual: barras en el color del área; tocar un año filtra el catálogo. */
.vgj-evo{ display:flex; align-items:flex-end; gap:3px; height:116px; overflow-x:auto; padding-bottom:2px }
.vgj-evo-col{
  flex:1 1 0; min-width:16px; height:100%; padding:0 1px; display:flex; flex-direction:column; align-items:center;
  background:none; border:0; border-radius:var(--r-s); cursor:pointer; font:inherit;
}
.vgj-evo-col:hover{ background:var(--sup2) }
/* Seleccionado: borde de 2 px en tinta (la regla común). */
.vgj-evo-col.on{ background:var(--sup2); box-shadow:inset 0 0 0 2px var(--tx) }
.vgj-evo-col b{ font-family:var(--f-mono); font-size:8.5px; font-weight:600; color:var(--tx2) }
.vgj-evo-barra{ flex:1; width:100%; display:flex; align-items:flex-end }
.vgj-evo-barra i{ display:block; width:100%; background:var(--area); border-radius:3px 3px 0 0 }
.vgj-evo-col small{ font-family:var(--f-mono); font-size:8.5px; color:var(--tx3); margin-top:3px }
.vgj-evo-nota{ margin:0; font-size:11.5px; line-height:1.45; color:var(--tx2) }

.vgj-metales{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; text-align:center }
.vgj-metales > div{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px; border-radius:var(--r-m); background:var(--sup2) }
.vgj-metales b{ font-family:var(--f-tit); font-weight:800; font-size:17px; line-height:1.1; color:var(--tx); font-variant-numeric:tabular-nums }
.vgj-metales .platino b{ color:var(--area) }
.vgj-plataformas{ margin:0; font-family:var(--f-mono); font-size:11px; color:var(--tx2) }

.vgj-sync{ display:flex; flex-direction:column; align-items:stretch; gap:6px }
.vgj-sync-estado{ font-size:12px; color:var(--tx2) }

/* Con un año elegido: aviso con su «Quitar». */
.vgj-filtro-anio{ margin:0 0 12px; justify-content:space-between }
.vgj-filtro-anio span{ flex:1; min-width:0 }
.vgj-filtro-anio .sis-btn{ flex-shrink:0; color:inherit }

.vgj-excluidos{ margin-top:16px; display:flex; flex-direction:column; align-items:flex-start; gap:8px }
.vgj-excluidos .vgj-lista{ align-self:stretch }

/* ── El editor que se despliega dentro de la caja ── */
.vgj-editor{
  padding:10px; border-top:1px solid var(--borde-s); background:var(--sup2);
  display:flex; flex-direction:column; gap:8px;
}
.vgj-editor label{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--tx2) }
.vgj-editor label.ancho{ flex-direction:column; align-items:stretch; gap:4px }
.vgj-editor input, .vgj-editor select{
  box-sizing:border-box; height:var(--h-s); padding:0 8px; border-radius:var(--r-s);
  border:1.5px solid var(--borde); background:var(--sup); color:var(--tx); font-size:13px;
}
.vgj-editor label:not(.ancho) input{ width:72px; text-align:right; flex-shrink:0 }
.vgj-editor input:focus, .vgj-editor select:focus{ outline:none; border-color:var(--tx) }
.vgj-editor-excluir{ align-self:stretch }
.vgj-editor-fusion{ align-self:flex-start }
/* La fusión de dos fichas: hace falta cuando el nombre no coincidía de
   fábrica y agruparDuplicados nunca las habría juntado sola. */
.vgj-fusion{ padding-top:8px; border-top:1px dashed var(--borde); display:flex; flex-direction:column; gap:8px }
.vgj-fusion-nota{ margin:0; font-size:11.5px; color:var(--tx2) }

/* ── Mis sagas ──
   A la izquierda la carátula grande de la saga (la del juego con más horas
   hace de buque insignia); a la derecha, el nombre, el total y las carátulas
   pequeñas de cada juego jugado de esa saga. */
.vgj-sagas{ display:flex; flex-direction:column; gap:12px }
.vgj-saga{
  display:flex; gap:14px; min-width:0; box-sizing:border-box;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:12px;
}
.vgj-saga-hero{
  flex:0 0 96px; width:96px; aspect-ratio:2/3; align-self:flex-start; border-radius:var(--r-m); overflow:hidden;
  background:var(--area-suave) center/cover no-repeat; display:flex; align-items:center; justify-content:center;
}
.vgj-saga-cuerpo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px }
.vgj-saga-cab{ display:flex; flex-direction:column; gap:3px }
.vgj-saga-cab b{ font-family:var(--f-tit); font-weight:800; font-size:17px; line-height:1.2; color:var(--tx) }
.vgj-saga-juegos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-content:start }
@media (min-width:600px){ .vgj-saga-juegos{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (min-width:900px){ .vgj-saga-juegos{ grid-template-columns:repeat(6,minmax(0,1fr)) } }
.vgj-saga-mini{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.vgj-saga-mini-img{
  aspect-ratio:1/1; border-radius:var(--r-s); background:var(--area-suave) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.vgj-saga-mini-img .vgj-sin-caratula{ font-size:1.2rem }
.vgj-saga-mini-nombre{
  font-size:11.5px; line-height:1.25; color:var(--tx);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vgj-saga-mini-horas{ font-family:var(--f-mono); font-size:10px; color:var(--tx3) }
.vgj-sagas-resto{ font-size:13px; color:var(--tx2); text-align:center; margin-top:4px }
.vgj-sagas-resto summary{ cursor:pointer; list-style-position:inside }
.vgj-sagas-resto p{ margin:8px auto 0; max-width:640px; line-height:1.6; font-family:var(--f-mono); font-size:11px }

/* ── Alta a mano (PS1-PS3), con búsqueda en IGDB ──
   Los campos con la forma del tablero «Piezas · Campos» (rótulo en mono,
   caja de 40 px, radio 10). Viven aquí con prefijo del área hasta que haya
   una pieza común de campo. */
.vgj-form-manual{
  max-width:640px; box-sizing:border-box; display:flex; flex-direction:column;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:18px;
}
.vgj-form-cab{ display:flex; align-items:center; gap:12px }
.vgj-form-cab h2{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:20px; color:var(--tx) }
.vgj-ayuda{ margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--tx2) }
.vgj-form-manual label{
  margin:16px 0 6px; font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tx3);
}
.vgj-form-manual input, .vgj-form-manual select, .vgj-form-manual textarea{
  width:100%; box-sizing:border-box; height:var(--h-m); padding:0 12px; margin:0;
  border-radius:var(--r-m); border:1.5px solid var(--borde); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:14px;
}
.vgj-form-manual textarea{ height:auto; min-height:76px; padding:10px 12px; resize:vertical; line-height:1.45 }
.vgj-form-manual input:focus, .vgj-form-manual select:focus, .vgj-form-manual textarea:focus{ outline:none; border-color:var(--tx) }
.vgj-form-manual .sis-acciones{ margin-top:20px }
.vgj-form-estado{ margin:14px 0 0 }
.vgj-preview-img{ width:100%; height:150px; margin-top:8px; border-radius:var(--r-m); background-size:cover; background-position:center }

/* Los candidatos de IGDB: mismo trato que las sugerencias de Cine con TMDB. */
.vgj-sugerencias{ display:flex; flex-direction:column; gap:4px; margin-top:6px }
.vgj-sugerencia{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:var(--r-m);
  cursor:pointer; background:var(--sup2); border:1px solid var(--borde-s);
}
.vgj-sugerencia:hover, .vgj-sugerencia:focus-visible{ background:var(--sup); border-color:var(--tx2) }
.vgj-sugerencia .miniatura{
  width:32px; height:44px; border-radius:var(--r-s); flex-shrink:0;
  background-color:var(--area-suave); background-size:cover; background-position:center;
}
.vgj-sugerencia .info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.vgj-sugerencia .nombre{ font-size:14px; font-weight:600; color:var(--tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vgj-sugerencia .detalle{ font-family:var(--f-mono); font-size:11px; color:var(--tx3) }