/* ══════════ VIDEOJUEGOS — claro, con un guiño a los botones del mando ══════════
 * Tono desenfadado, papel de siempre por debajo: nada de estética "gamer" a
 * oscuras, esto es Bitácora, no una consola. El guiño a PlayStation va en
 * los cuatro colores de sus botones (▲●✕■), nunca en su logo. */

.vgj-cab{ margin-bottom:4px }
.vgj-cab h2{
  font-family:'Bricolage Grotesque',sans-serif; font-size:1.5rem; margin:0;
  display:flex; align-items:center; gap:10px;
}
.vgj-botones{ display:inline-flex; gap:5px; font-size:1.05rem; line-height:1 }
.vgj-botones i{ font-style:normal }
.vgj-nota{ font-size:.8rem; color:var(--tinta-suave); margin:4px 0 0 }

.vgj-error{
  color:#fff; background:var(--sello); border-radius:10px; padding:9px 12px;
  font-size:.8rem; margin:10px 0 0; font-weight:600;
}

.vgj-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 }
.vgj-kpi{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:12px;
  padding:10px 6px; text-align:center;
}
.vgj-kpi b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.4rem; line-height:1 }
.vgj-kpi span{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--tinta-suave);
}

/* El "Platino particular": el juego con más horas, con su carátula de fondo
   y un mensaje que no se toma muy en serio a sí mismo. */
.vgj-favorito{
  display:flex; align-items:center; gap:12px; background:var(--tinta); color:var(--papel);
  border-radius:14px; padding:12px 14px; margin-bottom:14px; overflow:hidden; position:relative;
}
.vgj-favorito-img{
  width:52px; height:52px; border-radius:10px; flex-shrink:0; background-size:cover;
  background-position:center; border:1.5px solid rgba(242,244,241,.35);
}
.vgj-favorito div:last-child{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.vgj-favorito-etq{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; opacity:.75 }
.vgj-favorito b{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vgj-favorito span:last-child{ font-size:.7rem; opacity:.8 }

/* Cuántos títulos incluidos hay en cada plataforma — un juego con versión
   PS4 y PS5 jugadas cuenta en ambas, porque de verdad está en las dos. */
.vgj-plataformas{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px }
.vgj-plat-chip{
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; background:var(--blanco);
  border:1px solid var(--linea); border-radius:999px; padding:4px 10px; color:var(--tinta-suave);
}
.vgj-plat-chip b{ color:var(--tinta); font-weight:700; margin-left:3px }

.vgj-sub-nav{display:flex; gap:6px; margin-bottom:14px; background:var(--papel); border-radius:999px; padding:4px}
.vgj-sub-nav button{
  font-family:'Bricolage Grotesque',sans-serif; font-size:.78rem; font-weight:600;
  padding:8px 6px; border-radius:999px; border:none;
  background:transparent; color:var(--tinta-suave); cursor:pointer; flex:1; text-align:center;
}
.vgj-sub-nav button.on{background:var(--blanco); color:var(--tinta); box-shadow:0 1px 4px rgba(30,42,68,.12)}

.vgj-sync-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px }
.vgj-btn-sync{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.85rem;
  padding:12px 18px; border-radius:999px; cursor:pointer; border:none; color:#fff;
  background:linear-gradient(135deg, #2F6FED, #173F8A);
  box-shadow:0 3px 10px rgba(23,63,138,.35);
}
.vgj-btn-sync:disabled{ opacity:.6; cursor:default }
.vgj-sync-estado{ font-size:.76rem; color:var(--tinta-suave) }
.vgj-btn-sync-trofeos{ background:linear-gradient(135deg, #C77DC2, #7A3D77); box-shadow:0 3px 10px rgba(122,61,119,.35) }
.vgj-nota-trofeos{ font-size:.72rem; color:var(--tinta-suave); margin:-4px 0 12px }

.vgj-orden-fila{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap }
.vgj-orden-fila label{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinta-suave); flex-shrink:0;
}
.vgj-orden-fila select{ flex:1; font-size:.78rem; padding:6px 8px }
.vgj-busca{
  flex:1 1 150px; min-width:0; font-size:.78rem; padding:6px 9px;
  border:1.5px solid var(--linea); border-radius:9px; background:var(--blanco); color:var(--tinta);
}
.vgj-trofeos-total{ margin-top:-6px }
/* La cronología anual: barras VERTICALES con conmutador juegos/horas. */
.vgj-anios{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:12px;
  padding:12px 14px; margin-bottom:12px;
}
.vgj-anios-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.vgj-anios-tit{
  margin:0; font-family:'IBM Plex Mono',monospace; font-size:.64rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-suave);
}
.vgj-anios-tit i{ font-style:normal; opacity:.7; text-transform:none; letter-spacing:0 }
.vgj-evo-toggle{ display:flex; gap:0; border:1.5px solid var(--linea); border-radius:8px; overflow:hidden; flex-shrink:0 }
.vgj-evo-toggle button{
  border:none; background:var(--blanco); color:var(--tinta-suave); cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; font-weight:700; padding:5px 10px;
}
.vgj-evo-toggle button.on{ background:var(--visado); color:#fff }
.vgj-evo{
  display:flex; align-items:flex-end; gap:6px; height:110px;
  overflow-x:auto; padding-bottom:2px;
}
.vgj-evo-col{
  flex:1 1 0; min-width:26px; display:flex; flex-direction:column; align-items:center; height:100%;
  background:none; border:none; border-radius:6px; padding:0 1px; cursor:pointer; font-family:inherit;
}
.vgj-evo-col:hover{ background:var(--papel) }
.vgj-evo-col.on{ background:var(--papel); outline:1.5px solid var(--visado) }
.vgj-filtro-anio{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  background:var(--blanco); border:1.5px dashed var(--visado); border-radius:10px;
  padding:8px 12px; font-size:.78rem;
}
.vgj-filtro-anio span{ flex:1; min-width:0 }
.vgj-filtro-anio button{
  flex-shrink:0; cursor:pointer; font-size:.7rem; font-weight:700;
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:8px; padding:5px 9px;
}
.vgj-evo-col b{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--tinta) }
.vgj-evo-barra{ flex:1; width:100%; max-width:30px; display:flex; align-items:flex-end }
.vgj-evo-barra i{ display:block; width:100%; background:var(--visado); border-radius:5px 5px 0 0 }
.vgj-evo-col small{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--tinta-suave); margin-top:3px }
.vgj-evo-nota{ margin:8px 0 0; font-size:.62rem; color:var(--tinta-suave); line-height:1.4 }
.vgj-notas-mini{
  display:block; font-size:.64rem; color:var(--tinta-suave); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.vgj-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
.vgj-caja{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
}
.vgj-caja-img{
  position:relative; aspect-ratio:16/9; background:var(--papel); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.vgj-sin-caratula{ font-size:1.8rem; opacity:.35 }
.vgj-caja-info{ padding:9px 10px 11px; display:flex; flex-direction:column; gap:5px }
.vgj-nombre{
  font-family:'Bricolage Grotesque',sans-serif; font-size:.86rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vgj-etiquetas{ display:flex; flex-wrap:wrap; gap:4px }
.vgj-badge{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; background:var(--papel);
  border:1px solid var(--linea); border-radius:999px; padding:2px 7px; color:var(--tinta-suave);
}
.vgj-badge.horas{ color:var(--tinta); font-weight:600 }
/* La pastilla de Metacritic lleva su propio fondo de color (verde/amarillo/
   rojo, puestos en línea por colorMetacritic()), así que el texto va en
   blanco en vez del gris apagado de las demás etiquetas. */
.vgj-badge.vgj-meta{ color:#fff; font-weight:700; border-color:transparent }
.vgj-ultima{ font-size:.62rem; color:var(--tinta-suave) }

/* Un juego excluido (el sobrino, una app que PSN coló como si fuera un
   juego) se queda atenuado — sigue ahí, pero se lee de un vistazo que no
   cuenta para nada. */
.vgj-caja.excluido{ opacity:.5 }
.vgj-caja.excluido .vgj-caja-img{ filter:grayscale(.6) }

/* El "⋮" vive sobre la carátula, esquina superior derecha — mismo sitio que
   el lápiz de editar de las tarjetas de embarque de Viajes. */
.vgj-caja-editar{
  position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%;
  border:none; background:rgba(27,42,65,.55); color:#fff; font-size:.9rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.vgj-caja-editar:hover{ background:rgba(27,42,65,.8) }

/* La consola, arriba a la izquierda de la carátula — esquina simétrica al
   "⋮". No es el logo de Sony (marca registrada, sin licencia para
   reproducirlo): es una insignia propia, mismo tratamiento visual que el
   resto de chapas de la app. */
.vgj-caja-consola{
  position:absolute; top:5px; left:5px; font-family:'IBM Plex Mono',monospace;
  font-size:.58rem; font-weight:700; letter-spacing:.02em; color:#fff;
  background:rgba(27,42,65,.72); border-radius:999px; padding:2px 7px; line-height:1.4;
}

/* Los trofeos van en su propia fila, para no mezclarse con horas/nota — el
   platino en dorado, que es justo el gesto que ya usa "Tu Platino
   particular" más arriba. */
.vgj-trofeos{ margin-top:1px }
.vgj-badge.vgj-platino{ color:#946A00; border-color:#E8B94D; font-weight:700 }

.vgj-editor{
  padding:9px 10px 11px; border-top:1px solid var(--linea); background:var(--papel);
  display:flex; flex-direction:column; gap:7px;
}
.vgj-editor label{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-size:.66rem; color:var(--tinta-suave);
}
.vgj-editor input{
  width:64px; font-size:.76rem; text-align:right; background:var(--blanco); color:var(--tinta);
  border:1px solid var(--linea); border-radius:6px; padding:4px 6px;
}
.vgj-editor-btns{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px }
.vgj-editor-btns button{
  flex:1 1 auto; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:.66rem;
  padding:6px 8px; border-radius:8px; border:1px solid var(--linea); background:var(--blanco);
  color:var(--tinta); cursor:pointer;
}
.vgj-editor-btns button:first-child{ background:var(--tinta); color:var(--papel); border-color:var(--tinta) }
.vgj-editor-btns .vgj-editor-excluir{ color:var(--sello) }

/* 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{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--linea) }
.vgj-fusion label{ display:flex; flex-direction:column; gap:4px; font-size:.66rem; color:var(--tinta-suave) }
.vgj-fusion select{
  font-size:.78rem; padding:6px 8px; border-radius:6px; border:1px solid var(--linea);
  background:var(--blanco); color:var(--tinta); width:100%;
}
.vgj-fusion-nota{ font-size:.62rem; color:var(--tinta-suave); margin:6px 0 0 }

.vgj-excluidos{ margin-top:16px }
.vgj-link{
  display:inline-block; background:none; border:none; color:var(--tinta-suave); font-weight:600;
  font-size:.72rem; cursor:pointer; padding:6px 0; margin-bottom:8px;
}

@media (min-width:600px){
  .vgj-lista{ grid-template-columns:repeat(3,1fr) }
}
@media (min-width:900px){
  .vgj-lista{ grid-template-columns:repeat(4,1fr) }
}

/* ── Mis Sagas ──
   A la izquierda, la carátula grande "de la saga" (la del juego con más
   horas hace de buque insignia, con el total encima en degradado); a la
   derecha, las carátulas pequeñas de cada juego jugado de esa saga — mismo
   lenguaje visual que el Catálogo, en vez de una lista de solo texto. */
.vgj-sagas{ display:flex; flex-direction:column; gap:12px }
.vgj-saga{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:14px; padding:10px;
  display:flex; gap:10px;
}
.vgj-saga-hero{
  flex:0 0 100px; width:100px; aspect-ratio:2/3; border-radius:10px; overflow:hidden;
  background:var(--papel) center/cover no-repeat; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.vgj-saga-hero .vgj-sin-caratula{ font-size:1.6rem; opacity:.35 }
.vgj-saga-hero-info{
  position:absolute; left:0; right:0; bottom:0; padding:8px 8px 7px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.78) 60%);
  display:flex; flex-direction:column; gap:1px;
}
.vgj-saga-hero-info b{
  font-family:'Bricolage Grotesque',sans-serif; font-size:.78rem; line-height:1.15; color:#fff;
}
.vgj-saga-hero-info span{
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; color:rgba(255,255,255,.85);
}
.vgj-saga-juegos{
  flex:1; min-width:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; align-content:start;
}
.vgj-saga-mini{ display:flex; flex-direction:column; gap:2px }
.vgj-saga-mini-img{
  aspect-ratio:1/1; border-radius:8px; background:var(--papel) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.vgj-saga-mini-img .vgj-sin-caratula{ font-size:1.2rem; opacity:.35 }
.vgj-saga-mini-nombre{
  font-size:.62rem; line-height:1.2; color:var(--tinta);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vgj-saga-mini-horas{ font-family:'IBM Plex Mono',monospace; font-size:.58rem; color:var(--tinta-suave) }
.vgj-sagas-resto{ font-size:.72rem; color:var(--tinta-suave); text-align:center; margin-top:4px }
.vgj-sagas-resto summary{ cursor:pointer; list-style-position:inside }
.vgj-sagas-resto p{ margin:6px auto 0; max-width:640px; line-height:1.6; font-family:'IBM Plex Mono',monospace; font-size:.62rem }

@media (min-width:600px){
  .vgj-saga-juegos{ grid-template-columns:repeat(4,1fr) }
}
@media (min-width:900px){
  .vgj-saga-juegos{ grid-template-columns:repeat(6,1fr) }
}

/* ── Alta a mano (PS1-PS3), con búsqueda en IGDB ── */
.vgj-form-manual{ display:flex; flex-direction:column; margin-top:6px }
.vgj-form-manual h3{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.05rem; margin:8px 0 2px }
.vgj-form-manual label{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tinta-suave); margin:12px 0 5px;
}
.vgj-form-manual input, .vgj-form-manual select, .vgj-form-manual textarea{
  width:100%; box-sizing:border-box; font-family:'Instrument Sans',sans-serif; font-size:.88rem;
  padding:9px 10px; border-radius:8px; border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta);
}
.vgj-form-manual textarea{ min-height:64px; resize:vertical }
.vgj-preview-img{ width:100%; height:150px; background-size:cover; background-position:center; border-radius:8px; margin-top:8px }

/* La lista de candidatos de IGDB — mismo trato que las sugerencias de Cine
   con TMDB, pero en el tono claro de Videojuegos. */
.vgj-sugerencias{ display:flex; flex-direction:column; gap:4px; margin-top:6px }
.vgj-sugerencia{
  display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px;
  cursor:pointer; background:var(--papel); border:1px solid var(--linea);
}
.vgj-sugerencia:hover, .vgj-sugerencia:active{ background:var(--blanco); border-color:var(--tinta-suave) }
.vgj-sugerencia .miniatura{
  width:32px; height:44px; border-radius:5px; background-size:cover; background-position:center;
  background-color:var(--blanco); flex-shrink:0; border:1px solid var(--linea);
}
.vgj-sugerencia .info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.vgj-sugerencia .nombre{ font-size:.82rem; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vgj-sugerencia .detalle{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave) }