/* MustPlay — estilos (versión clara) */
:root {
  --fondo: #EEF0F3;
  --tarjeta: #FFFFFF;
  --suave: #F5F7FA;
  --linea: #DCE0E6;
  --linea-2: #E3E7EC;
  --borde-control: #C9CFD8;
  --texto: #1A1F29;
  --texto-2: #333B48;
  --apagado: #5B6474;
  --tenue: #687180;
  --cabecera: #1B2433;
  --cabecera-texto: #C3CBD8;
  --acento: #2563B8;
  --acento-oscuro: #1D4F94;
  --acento-suave: #E4EDF9;
  --morado: #6B46C1;
  --granate: #B4235A;
  --aviso-texto: #9A3B0A;
  --aviso-fondo: #FDEBDD;
  --control: #FFFFFF;
  --sobre-acento: #FFFFFF;
  --borde-banner: #C6D8F1;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: 'Roboto', system-ui, sans-serif; font-size: 16px; line-height: 1.45; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-oscuro); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 500; margin: 0; }
button { font: inherit; cursor: pointer; }
.oculto { position: absolute !important; left: -9999px; }
.contenedor { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Cabecera */
.cabecera { background: var(--cabecera); }
.cabecera .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.logo { font-weight: 900; font-size: 22px; letter-spacing: 1px; color: #fff; display: inline-flex; align-items: baseline; }
.logo svg { margin: 0 1px; }
.logo:hover { color: #fff; }
.nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; }
.nav a { color: var(--cabecera-texto); }
.nav a[aria-current="page"], .nav a:hover { color: #fff; }
.cabecera-derecha { flex: 1 1 240px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.buscador { width: 100%; max-width: 360px; }
.buscador input { width: 100%; height: 44px; border-radius: 6px; border: none; background: var(--control); color: var(--texto); padding: 0 14px; font: inherit; font-size: 15px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); display: flex; align-items: center; justify-content: center; font-weight: 500; flex: none; }
.avatar:hover { color: var(--sobre-acento); }

main.contenedor { padding-top: 28px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 28px; }
#banner-avisos:empty { display: none; }

/* Bloques */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; }
.titulo-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid var(--linea); padding-bottom: 10px; margin-bottom: 16px; }
.titulo-seccion h2 { font-size: 24px; }
.titulo-seccion p { margin: 4px 0 0; color: var(--apagado); font-size: 15px; }
.etiqueta { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--apagado); }
.etiqueta.azul { color: var(--acento); }
.chip { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 7px; border-radius: 4px; background: var(--acento-suave); color: var(--acento-oscuro); }
.chip.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.nota { background: var(--acento); color: var(--sobre-acento); font-weight: 500; padding: 2px 7px; border-radius: 4px; font-size: 13px; }
.vacio { color: var(--apagado); padding: 24px; text-align: center; background: var(--tarjeta); border: 1px dashed var(--borde-control); border-radius: 8px; }

/* Botones */
.boton { height: 44px; padding: 0 18px; border-radius: 6px; border: none; background: var(--acento); color: var(--sobre-acento); font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.boton:hover { background: var(--acento-oscuro); color: var(--sobre-acento); }
.boton.secundario { background: var(--control); color: var(--texto); border: 1px solid var(--borde-control); }
.boton.secundario:hover { background: var(--suave); }
.boton.activo-suave { background: var(--acento-suave); color: var(--acento-oscuro); border: 1px solid var(--acento); }
.pastilla { height: 40px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--borde-control); background: var(--control); color: var(--texto); font-size: 14px; }
.pastilla[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 500; }

/* Portadas */
.portada { aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: #2B2350; color: #fff; position: relative; display: flex; align-items: flex-end; }
.portada img { width: 100%; height: 100%; object-fit: cover; }
.portada .placeholder { padding: 12px; font-weight: 500; font-size: 20px; line-height: 1.05; }

/* Rejilla de juegos */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.ficha-mini { display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; color: var(--texto); }
.ficha-mini:hover { color: var(--texto); border-color: var(--acento); }
.ficha-mini .portada { border-radius: 0; }
.ficha-mini .info { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ficha-mini .nombre { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-mini .meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--apagado); gap: 6px; }

/* Duraciones (estilo HLTB) */
.duraciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.duraciones div { color: #fff; border-radius: 6px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.duraciones span { font-size: 13px; }
.duraciones strong { font-weight: 500; font-size: 20px; }
.duraciones .d1 { background: var(--acento); color: var(--sobre-acento); }
.duraciones .d2 { background: var(--morado); }
.duraciones .d3 { background: var(--granate); }

/* Portada de inicio */
.inicio-top { display: flex; flex-wrap: wrap; gap: 20px; }
.destacado { flex: 999 1 600px; min-width: 0; padding: 24px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.destacado .portada { width: 200px; flex: none; }
.destacado .texto { flex: 1 1 280px; display: flex; flex-direction: column; gap: 14px; }
.destacado h1 { font-size: 40px; line-height: 1.08; }
.destacado p { margin: 0; color: var(--apagado); line-height: 1.55; }
.que-juego { flex: 1 1 320px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.que-juego h2 { font-size: 22px; line-height: 1.25; }
.sugerencia { display: flex; gap: 14px; align-items: center; background: var(--suave); border: 1px solid var(--linea-2); border-radius: 8px; padding: 12px; color: var(--texto); }
.sugerencia .portada { width: 60px; flex: none; border-radius: 4px; }
.sugerencia .portada .placeholder { font-size: 10px; padding: 5px; }

/* Lanzamientos */
.lanzamientos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lanzamiento { display: flex; gap: 12px; align-items: center; padding: 12px; color: var(--texto); border-radius: 8px; }
.lanzamiento:hover { color: var(--texto); border-color: var(--acento); }
.lanzamiento .fecha { width: 56px; flex: none; text-align: center; display: flex; flex-direction: column; border-right: 1px solid var(--linea-2); padding-right: 10px; }
.lanzamiento .fecha b { font-weight: 500; font-size: 28px; line-height: 1; }
.lanzamiento .fecha small { font-size: 12px; color: var(--apagado); text-transform: uppercase; letter-spacing: 1px; }
.lanzamiento .datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.lanzamiento .datos strong { font-weight: 500; font-size: 15px; }
.lanzamiento .datos span { font-size: 13px; color: var(--apagado); }

/* Banner de avisos cumplidos */
.banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--acento-suave); border: 1px solid var(--borde-banner); border-left: 4px solid var(--acento); border-radius: 8px; padding: 14px 18px; }

/* Ficha de juego */
.ruta { font-size: 14px; color: var(--apagado); }
.ficha-cabecera { padding: 24px; display: flex; flex-wrap: wrap; gap: 28px; }
.ficha-cabecera .portada { width: 220px; flex: none; }
.ficha-cabecera .texto { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ficha-cabecera h1 { font-size: 40px; line-height: 1.1; }
.ficha-cabecera .sub { margin: 0; font-size: 15px; color: var(--apagado); }
.estados { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.estados button { height: 44px; border-radius: 6px; border: 1px solid var(--borde-control); background: var(--control); color: var(--texto); font-weight: 500; }
.estados button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.notas { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.notas button { height: 44px; border-radius: 4px; border: 1px solid var(--linea); background: var(--suave); color: var(--apagado); font-weight: 500; font-size: 14px; }
.notas button.on { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.columnas { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.columnas .principal { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.columnas .lateral { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.caja-aviso { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; border-left: 4px solid var(--acento); border-radius: 8px; padding: 16px 18px; }
.caja-aviso span { font-size: 14px; color: var(--apagado); }
.resumen { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.resumen p { margin: 0; line-height: 1.65; color: var(--texto-2); }
.capturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.capturas img { border-radius: 6px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.datos-tabla { overflow: hidden; }
.datos-tabla .cab { background: var(--cabecera); color: #fff; padding: 10px 16px; font-weight: 500; font-size: 15px; }
.datos-tabla .fila { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--linea-2); font-size: 14px; }
.datos-tabla .fila span:first-child { color: var(--apagado); }
.datos-tabla .fila span:last-child { font-weight: 500; text-align: right; }
.media { padding: 18px; display: flex; align-items: baseline; gap: 8px; }
.media b { font-weight: 500; font-size: 44px; line-height: 1; }
.media span { font-size: 14px; color: var(--apagado); }

/* Perfil */
.perfil-cabecera { padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.perfil-cabecera .avatar { width: 96px; height: 96px; font-size: 34px; }
.perfil-cabecera .texto { flex: 999 1 320px; min-width: 0; }
.perfil-cabecera h1 { font-size: 32px; }
.perfil-cabecera p { margin: 4px 0 0; color: var(--apagado); font-size: 15px; }
.stats { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; border-top: 1px solid var(--linea-2); padding-top: 18px; }
.stats b { display: block; font-weight: 500; font-size: 28px; line-height: 1.1; }
.stats span { font-size: 14px; color: var(--apagado); }
.pestanas { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--linea); background: var(--suave); }
.pestanas button { height: 48px; padding: 0 20px; border: none; background: transparent; color: var(--texto); font-weight: 500; font-size: 15px; }
.pestanas button span { color: var(--tenue); font-weight: 400; }
.pestanas button[aria-selected="true"] { background: var(--control); color: var(--acento); box-shadow: inset 0 -3px 0 var(--acento); }
.panel { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 640px) {
  .destacado h1, .ficha-cabecera h1 { font-size: 30px; }
  .destacado .portada, .ficha-cabecera .portada { width: 150px; }
  .notas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Cuentas, formularios y pie ---------- */
[hidden] { display: none !important; }
.zona-usuario { display: flex; align-items: center; flex: none; }
.cabecera .zona-usuario .boton { height: 44px; }

.formulario { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.formulario label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.formulario input { width: 100%; height: 46px; border: 1px solid var(--borde-control); border-radius: 6px; padding: 0 12px; font: inherit; color: var(--texto); background: var(--control); }
.formulario input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.formulario small { display: block; margin-top: 6px; color: var(--apagado); font-size: 13px; }
.formulario p { margin: 0; }
.error-texto { color: #A11D2C; font-size: 14px; min-height: 1em; }
.caja-cuenta { max-width: 460px; width: 100%; margin: 0 auto; overflow: hidden; }
.caja-cuenta .pestanas button { flex: 1; }
.boton.peligro { background: #A11D2C; }
.boton.peligro:hover { background: #7E1622; }
.boton:disabled { opacity: .6; cursor: default; }

.zona-borrar { padding: 0; }
.zona-borrar summary { padding: 16px 24px; cursor: pointer; color: var(--apagado); font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.zona-borrar .formulario { padding-top: 0; max-width: 460px; }

.texto-legal { padding: 28px; max-width: 760px; line-height: 1.6; }
.texto-legal h1 { font-size: 30px; margin-bottom: 8px; }
.texto-legal h2 { font-size: 19px; margin: 24px 0 6px; }
.texto-legal p, .texto-legal ul { margin: 0 0 10px; color: var(--texto-2); }

.pie { border-top: 1px solid var(--linea); background: var(--tarjeta); }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px; font-size: 14px; color: var(--apagado); }

.aviso-flotante { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--cabecera); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 15px; box-shadow: 0 6px 24px rgba(0,0,0,.18); z-index: 50; transition: opacity .3s; }
.aviso-flotante.error { background: #A11D2C; }
.aviso-flotante.oculto-suave { opacity: 0; pointer-events: none; }

/* ---------- Foto de perfil ---------- */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-editable { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.avatar-acciones { display: flex; align-items: center; gap: 10px; }
.boton.pequeno { height: 36px; padding: 0 12px; font-size: 14px; }
.enlace-boton { background: none; border: none; padding: 0 4px; min-height: 36px; color: var(--apagado); font-size: 14px; text-decoration: underline; }
.enlace-boton:hover { color: var(--texto); }

/* ---------- Próximos lanzamientos con portada ---------- */
.lanzamientos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lanzamiento { align-items: stretch; gap: 14px; }
.lanzamiento .portada { width: 72px; flex: none; border-radius: 5px; align-self: flex-start; }
.lanzamiento .portada .placeholder { font-size: 11px; padding: 6px; }
.lanzamiento .datos { justify-content: center; }
.lanzamiento .datos .fecha-lanz { font-size: 13px; font-weight: 500; color: var(--acento); text-transform: uppercase; letter-spacing: .5px; }
.lanzamiento .datos .chip { color: var(--acento-oscuro); font-size: 12px; }

/* ---------- Tu resumen ---------- */
.resumen-usuario { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.resumen-usuario h2 { font-size: 22px; }
.resumen-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.resumen-bloque { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--suave); border: 1px solid var(--linea-2); border-radius: 8px; }
.resumen-portadas { display: flex; gap: 6px; }
.resumen-portadas a { width: 46px; flex: none; }
.resumen-portadas .portada, .resumen-aviso .portada { border-radius: 4px; }
.resumen-portadas .placeholder, .resumen-aviso .placeholder { font-size: 8px; padding: 4px; }
.resumen-aviso { display: flex; gap: 10px; align-items: center; color: var(--texto); font-size: 14px; }
.resumen-aviso:hover { color: var(--texto); }
.resumen-aviso .portada { width: 46px; flex: none; }
.resumen-aviso strong { font-weight: 500; }
.resumen-dato { font-size: 14px; }
.resumen-dato.apagado { color: var(--apagado); }
.resumen-numero { font-size: 32px; font-weight: 500; line-height: 1; }

/* ---------- Filtro de plataforma ---------- */
.filtro-plataforma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtro-plataforma .etiqueta { margin-right: 4px; }

/* ---------- Esta semana ---------- */
.semana { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.dia { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.dia.hoy { border-color: var(--acento); box-shadow: inset 0 3px 0 var(--acento); }
.dia-cab { display: flex; justify-content: space-between; align-items: baseline; text-transform: capitalize; font-size: 14px; color: var(--apagado); }
.dia-cab b { font-weight: 500; font-size: 20px; color: var(--texto); }
.dia-juego { display: flex; gap: 8px; align-items: center; color: var(--texto); font-size: 13px; line-height: 1.25; min-height: 44px; }
.dia-juego:hover { color: var(--acento); }
.dia-juego .portada { width: 34px; flex: none; border-radius: 3px; }
.dia-juego .placeholder { font-size: 6px; padding: 3px; }
.dia-juego span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dia-vacio, .dia-mas { margin: 0; font-size: 13px; color: var(--apagado); }

/* ---------- Ranking del año ---------- */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { position: relative; }
.ranking .puesto { position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 6px; background: var(--cabecera); color: #fff; font-weight: 500; font-size: 15px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.ranking li .ficha-mini { height: 100%; }
/* En portadas diminutas sin imagen, el nombre ya está al lado */
.dia-juego .placeholder, .resumen-portadas .placeholder, .resumen-aviso .placeholder { display: none; }
#tu-resumen + .filtro-plataforma { margin-top: 4px; }

/* ---------- Gran lanzamiento ---------- */
.destacado-portada { flex: none; width: 220px; max-width: 40%; }
.destacado .texto { gap: 12px; }
.destacado .destacado-meta { font-size: 15px; color: var(--apagado); margin: -4px 0 0; }

/* ---------- Esta semana (portadas grandes, una al lado de otra) ---------- */
.semana { display: flex; flex-wrap: wrap; gap: 12px; overflow: visible; padding-bottom: 0; }
.dia { flex: 0 1 auto; max-width: 100%; min-height: 0; padding: 12px; gap: 10px; }
.dia.vacio-dia { width: 132px; }
.dia-cab { gap: 12px; text-transform: none; }
.dia-cab span { text-transform: capitalize; font-weight: 500; color: var(--texto); }
.dia-cab b { font-size: 14px; font-weight: 400; color: var(--apagado); }
.dia.hoy .dia-cab span { color: var(--acento); }
.dia-juegos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.dia-juego { flex-direction: column; align-items: stretch; width: 120px; gap: 6px; min-height: 0; font-size: 14px; font-weight: 500; }
.dia-juego .portada { width: 120px; border-radius: 6px; }
.dia-juego .placeholder { display: block; font-size: 13px; padding: 8px; }
.dia-mas { align-self: center; width: 80px; text-align: center; font-size: 14px; }
@media (max-width: 640px) {
  .dia-juego, .dia-juego .portada { width: 100px; }
}

/* ---------- Página de calendario ---------- */
.titulo-pagina { font-size: 32px; }
.subtitulo-pagina { margin: 6px 0 0; color: var(--apagado); }
.mes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.mes-titulo { font-size: 22px; border-bottom: 2px solid var(--linea); padding-bottom: 8px; }
.mes-titulo span { font-size: 14px; font-weight: 400; color: var(--apagado); text-transform: none; margin-left: 6px; }
.mes-lista { display: flex; flex-direction: column; gap: 8px; }
.fila-lanz { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 8px; }
.fila-lanz .fecha { width: 44px; flex: none; text-align: center; display: flex; flex-direction: column; }
.fila-lanz .fecha b { font-weight: 500; font-size: 24px; line-height: 1; }
.fila-lanz .fecha small { font-size: 12px; color: var(--apagado); text-transform: uppercase; }
.fila-portada { width: 52px; flex: none; }
.fila-portada .portada { border-radius: 4px; }
.fila-portada .placeholder { display: none; }
.fila-lanz .datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-nombre { font-weight: 500; color: var(--texto); }
.fila-lanz .datos span { font-size: 13px; color: var(--apagado); }
.fila-lanz .datos .fila-cuando { color: var(--acento); font-weight: 500; }
.fila-lanz .boton { flex: none; }
.cargar-mas { align-self: center; }
@media (max-width: 640px) {
  .fila-lanz { flex-wrap: wrap; }
  .fila-lanz .datos { flex-basis: calc(100% - 130px); }
  .fila-lanz .boton { margin-left: 110px; }
}

/* ---------- Ajustes del perfil público ---------- */
.zona-ajustes { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.ajustes-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.ajustes-cab h2 { font-size: 20px; }
.ajustes-lista { border: 1px solid var(--linea-2); border-radius: 8px; padding: 8px 16px 12px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.ajustes-lista legend { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--apagado); padding: 0 6px; }
.ajustes-lista:disabled { opacity: .5; }
.interruptor { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15px; }
.interruptor input { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; border-radius: 999px; background: #C9CFD8; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.interruptor input:checked { background: var(--acento); }
.interruptor input:checked::after { transform: translateX(18px); }
.interruptor input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.interruptor.principal span { display: flex; flex-direction: column; }
.interruptor small { color: var(--apagado); font-size: 13px; }
.ajustes-estado { margin: 0; font-size: 13px; color: var(--apagado); min-height: 1em; }

/* ---------- Plataforma de cada juego ---------- */
.plataforma-elegir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; background: var(--suave); border: 1px solid var(--linea-2); border-radius: 8px; }
.plataforma-elegir .pastilla { height: 36px; font-size: 13px; }
.plataforma-pregunta { flex-basis: 100%; font-size: 14px; font-weight: 500; }
.boton-top { align-self: flex-start; }
.nota-top { margin: 0; font-size: 14px; color: var(--apagado); }

/* ---------- Top 10 ---------- */
.zona-top { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.zona-top h2 { font-size: 20px; }
.top-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
.top-juego { position: relative; display: flex; flex-direction: column; gap: 6px; color: var(--texto); font-size: 14px; font-weight: 500; line-height: 1.25; }
.top-juego:hover { color: var(--acento); }
.top-juego .puesto, .top-editor .puesto { min-width: 28px; height: 28px; border-radius: 6px; background: var(--cabecera); color: #fff; font-weight: 500; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.top-juego .puesto { position: absolute; top: 6px; left: 6px; z-index: 1; }
.top-juego .placeholder { font-size: 13px; }
.top-nombre { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.top-editor { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.top-editor li { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 1px solid var(--linea-2); border-radius: 8px; background: var(--suave); }
.top-editor .top-mini { width: 36px; flex: none; }
.top-editor .top-mini .placeholder { display: none; }
.top-editor .top-nombre { flex: 1; min-width: 0; font-weight: 500; }
.top-botones { display: flex; gap: 4px; flex: none; }
.icono { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--borde-control); background: var(--control); color: var(--texto); font-size: 16px; }
.icono:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.icono:disabled { opacity: .35; cursor: default; }
.top-buscar label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.top-buscar input { width: 100%; max-width: 460px; height: 44px; border: 1px solid var(--borde-control); border-radius: 6px; padding: 0 12px; font: inherit; }
.top-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 8px; }
.top-resultado { display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--control); color: var(--texto); font-size: 14px; min-height: 52px; }
.top-resultado:hover:not(:disabled) { border-color: var(--acento); }
.top-resultado:disabled { opacity: .45; cursor: default; }
.top-resultado .portada { width: 32px; flex: none; border-radius: 3px; }
.top-resultado .placeholder { display: none; }
.top-resultado small { color: var(--apagado); }

/* ---------- Calendario en cuadrícula ---------- */
.mes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.tarjeta-lanz { display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; }
.tl-portada { position: relative; display: block; }
.tl-portada .portada { border-radius: 0; }
.tl-fecha { position: absolute; left: 8px; bottom: 8px; background: rgba(27, 36, 51, .92); color: #fff; border-radius: 6px; padding: 4px 8px; font-size: 13px; text-transform: capitalize; }
.tl-fecha b { font-weight: 500; font-size: 16px; }
.tl-datos { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tl-datos .fila-nombre { line-height: 1.25; }
.tl-plataformas { font-size: 12px; color: var(--apagado); }
.tl-datos .fila-cuando { font-size: 13px; color: var(--acento); font-weight: 500; }
.tarjeta-lanz .boton { margin: 8px 12px 12px; }
@media (max-width: 640px) {
  .mes-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.tl-portada .placeholder { display: none; }
.mes-lista { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 640px) { .mes-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Redes y cuentas de juego ---------- */
.redes { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.redes-iconos { display: flex; gap: 8px; flex-wrap: wrap; }
.red { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borde-control); background: var(--control); color: var(--texto); font-weight: 700; font-size: 14px; letter-spacing: .5px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0; }
.red:hover, .red[aria-expanded="true"] { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.red-x { font-size: 17px; }
.red-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--suave); border: 1px solid var(--linea-2); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.red-id strong { font-weight: 500; user-select: all; }
.zona-redes { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.zona-redes h2 { font-size: 20px; }
.redes-form { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 24px; }
.redes-form .error-texto, .redes-form .boton { grid-column: 1 / -1; }
.redes-form .boton { justify-self: start; }
.formulario input[aria-invalid="true"] { border-color: #A11D2C; outline-color: #A11D2C; }

/* Logotipos de las redes */
.red { overflow: hidden; border: 1px solid var(--linea); background: var(--control); }
.red img { width: 100%; height: 100%; object-fit: cover; display: block; }
.red-nintendo { width: auto; height: 44px; border-radius: 10px; padding: 0; }
.red-nintendo img { width: auto; height: 100%; }
.red:hover, .red[aria-expanded="true"] { background: var(--control); border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.red:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Portada nueva y mis plataformas ---------- */
.secciones-inicio { display: flex; flex-direction: column; gap: 36px; }
.mis-plat-linea { margin: 0; font-size: 14px; color: var(--apagado); }
.mis-plat-linea strong { font-weight: 500; color: var(--texto); }
.zona-plataformas { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.zona-plataformas h2 { font-size: 20px; }
.plat-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.plat-opciones .pastilla { height: 44px; padding: 0 16px; font-size: 15px; }
.plat-opciones .pastilla[aria-pressed="true"]::before { content: '✓ '; }
.juega-en { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--apagado); }
.filtro-cambiar { font-size: 14px; margin-left: 4px; }
#portada-inicio { display: flex; flex-direction: column; gap: 24px; }
#aviso-plataformas:empty { display: none; }
.rejilla > .vacio { grid-column: 1 / -1; }

/* Mis plataformas: consolas anteriores */
.plat-mas { border-top: 1px solid var(--linea-2); padding-top: 4px; }
.plat-mas summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--texto); }
.plat-cuenta { font-size: 13px; color: var(--apagado); font-weight: 400; }
.plat-grupo { margin: 6px 0 14px; }
.plat-grupo h3 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); margin: 0 0 8px; }
.plat-mas summary { list-style: none; }
.plat-mas summary::-webkit-details-marker { display: none; }
.plat-mas summary::before { content: '▸'; color: var(--acento); transition: transform .15s; }
.plat-mas[open] summary::before { transform: rotate(90deg); }

/* Listado de juegos */
.filtros-listado { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.fl-campo { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.fl-nombre { flex: 1 1 280px; max-width: 460px; }
.fl-campo input, .fl-campo select { height: 44px; border: 1px solid var(--borde-control); border-radius: 6px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--texto); background: var(--control); }
.fl-campo input:focus, .fl-campo select:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.letras { display: flex; flex-wrap: wrap; gap: 4px; }
.letra { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--linea); border-radius: 6px; background: var(--control); color: var(--texto-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.letra:hover { border-color: var(--acento); color: var(--acento); }
.letra[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.fl-total { margin: 0; min-height: 20px; font-size: 14px; color: var(--apagado); }
.paginacion { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 8px; }
.paginacion .pastilla { min-width: 44px; height: 44px; justify-content: center; }
.paginacion .pastilla[aria-current="page"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.pag-hueco { color: var(--apagado); padding: 0 4px; }

/* "Ver todo" en las secciones de la portada */
.ver-todo { font-size: 15px; font-weight: 500; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.ver-todo:hover { text-decoration: underline; }

/* Menú del botón derecho sobre una portada */
.menu-juego { position: fixed; z-index: 1000; width: 288px; max-width: calc(100vw - 16px); background: var(--control); border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 10px 30px rgba(20, 28, 42, .22), 0 2px 6px rgba(20, 28, 42, .12); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mj-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mj-nombre { font-weight: 500; font-size: 15px; color: var(--texto); line-height: 1.3; padding-top: 4px; }
.mj-nombre:hover { color: var(--acento); }
.mj-cerrar { flex: none; width: 32px; height: 32px; border: none; background: none; border-radius: 6px; font-size: 22px; line-height: 1; color: var(--apagado); cursor: pointer; }
.mj-cerrar:hover { background: var(--suave); color: var(--texto); }
.mj-estados { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mj-estados button { height: 40px; border: 1px solid var(--borde-control); border-radius: 6px; background: var(--control); color: var(--texto); font: inherit; font-size: 14px; cursor: pointer; }
.mj-estados button:hover { border-color: var(--acento); color: var(--acento); }
.mj-estados button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 500; }
.mj-estados button[aria-pressed="true"]::before { content: '✓ '; }
.mj-nota-cab { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--linea-2); padding-top: 10px; }
.mj-nota-valor { font-weight: 500; color: var(--acento); font-size: 15px; }
.mj-notas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.mj-notas button { height: 36px; border: 1px solid var(--borde-control); border-radius: 6px; background: var(--control); color: var(--texto); font: inherit; font-size: 14px; cursor: pointer; }
.mj-notas button:hover { border-color: var(--acento); }
.mj-notas button.on { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 500; }
.menu-juego button:focus-visible, .menu-juego a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mj-pie { margin: 0; font-size: 13px; color: var(--apagado); }
.ver-publico { margin: 6px 0 0 !important; font-size: 15px !important; }
.ver-publico a { font-weight: 500; }

/* Mis plataformas: resumen compacto y selector desplegable */
.plat-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.plat-resumen { display: flex; flex-wrap: wrap; gap: 6px; }
.plat-resumen .chip { font-size: 14px; padding: 4px 10px; }
.plat-ninguna { margin: 0; color: var(--apagado); font-size: 15px; }
.plat-editor { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--linea-2); padding-top: 14px; }
.plat-editor[hidden] { display: none; }
#zona-plataformas .ajustes-estado:empty { display: none; }

/* Noticias */
.noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.noticia { display: flex; flex-direction: column; overflow: hidden; color: var(--texto); transition: border-color .15s, box-shadow .15s; }
.noticia:hover { color: var(--texto); border-color: var(--acento); box-shadow: 0 4px 16px rgba(27, 36, 51, .1); }
.noticia-img { aspect-ratio: 16 / 9; background: var(--cabecera); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.noticia-img img { width: 100%; height: 100%; object-fit: cover; }
.noticia-img span { color: var(--cabecera-texto); font-weight: 700; font-size: 22px; letter-spacing: .5px; }
.noticia-texto { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.noticia-meta { font-size: 13px; color: var(--apagado); }
.noticia-meta strong { color: var(--acento); font-weight: 500; }
.noticia h2 { font-size: 18px; line-height: 1.3; }
.noticia p { margin: 0; color: var(--texto-2); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.noticia-pie { margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--apagado); }
.noticia-enlace:hover .noticia-pie { color: var(--acento); }
#noticias-estado:empty { display: none; }

/* Sellos de valoración (en lugar de notas numéricas) */
.sello { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .12); }
.sello svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.sello.sello-oro { background: linear-gradient(135deg, #FBE38A 0%, #E9B93A 45%, #C8941B 100%); color: #4A3200; }
.sello.sello-plata { background: linear-gradient(135deg, #FAFBFC 0%, #D5DAE1 50%, #A9B1BC 100%); color: #2E3640; }
.sello.sello-rojo { background: linear-gradient(135deg, #EF5A5A 0%, #D12F2F 50%, #A71D1D 100%); color: #fff; }
.sello.grande { font-size: 16px; height: 34px; padding: 0 14px 0 10px; font-size: 16px; gap: 6px; }
.sello.grande svg { width: 20px; height: 20px; }
.sin-sello { font-size: 14px; color: var(--apagado); font-weight: 500; }
.tu-sello { display: inline-flex; align-items: center; }
.media { flex-wrap: wrap; align-items: center; gap: 10px; }
.ficha-mini .meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Últimas noticias en el inicio */
.noticias-inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.noticias-inicio > .vacio { grid-column: 1 / -1; }
.noticia-mini { display: flex; gap: 14px; align-items: center; padding: 10px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; color: var(--texto); min-width: 0; }
.noticia-mini:hover { color: var(--texto); border-color: var(--acento); }
.noticia-mini-img { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--cabecera); display: flex; align-items: center; justify-content: center; }
.noticia-mini-img span { color: var(--cabecera-texto); font-weight: 700; font-size: 13px; }
.noticia-mini-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.noticia-mini-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.noticia-mini h3 { font-size: 15px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.noticia-mini:hover h3 { color: var(--acento); }
@media (max-width: 480px) { .noticias-inicio { grid-template-columns: 1fr; } .noticia-mini-img { width: 104px; } }

/* Botones para puntuar: Imprescindible, Recomendado, Ni fu ni fa, A evitar */
.valoraciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.valorar { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--borde-control); background: var(--control); color: var(--texto); font-weight: 500; font-size: 14px; white-space: nowrap; }
.valorar svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.valorar-oro svg { color: #C8941B; }
.valorar-plata svg { color: #8B95A3; }
.valorar-rojo svg { color: #C62828; }
.valorar:hover { border-color: var(--acento); }
.valorar[aria-pressed="true"] { font-weight: 700; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .18); }
.valorar-oro[aria-pressed="true"] { background: linear-gradient(135deg, #FBE38A 0%, #E9B93A 45%, #C8941B 100%); color: #4A3200; }
.valorar-plata[aria-pressed="true"] { background: linear-gradient(135deg, #FAFBFC 0%, #D5DAE1 50%, #A9B1BC 100%); color: #2E3640; }
.valorar-nifu[aria-pressed="true"] { background: var(--suave); border-color: var(--texto-2); color: var(--texto); }
.valorar-rojo[aria-pressed="true"] { background: linear-gradient(135deg, #EF5A5A 0%, #D12F2F 50%, #A71D1D 100%); color: #fff; }
.valorar-oro[aria-pressed="true"] svg, .valorar-plata[aria-pressed="true"] svg, .valorar-rojo[aria-pressed="true"] svg { color: currentColor; }
.valoraciones.compactas { grid-template-columns: 1fr 1fr; gap: 6px; }
.valoraciones.compactas .valorar { height: 38px; font-size: 13px; }
@media (max-width: 640px) { .valoraciones { grid-template-columns: 1fr 1fr; } }

/* ---------- Botones con relieve que se hunden al pulsar + huella del dedo ---------- */
.boton { position: relative; transition: transform .08s ease, box-shadow .08s ease, background .15s; box-shadow: 0 3px 0 #17407A, 0 4px 10px rgba(27, 36, 51, .14); background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%); }
.boton.secundario { box-shadow: 0 3px 0 var(--sombra-boton, #C3CAD5), 0 4px 10px rgba(27, 36, 51, .06); }
.boton.activo-suave { box-shadow: 0 3px 0 #9DB8E3; }
.boton.peligro { box-shadow: 0 3px 0 #6B1019, 0 4px 10px rgba(27, 36, 51, .14); }
.boton.hundido, .boton:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #17407A, 0 1px 3px rgba(27, 36, 51, .12); }
.boton.secundario.hundido, .boton.secundario:active:not(:disabled) { box-shadow: 0 1px 0 var(--sombra-boton, #C3CAD5); }
.boton.activo-suave.hundido, .boton.activo-suave:active:not(:disabled) { box-shadow: 0 1px 0 #9DB8E3; }
.boton.peligro.hundido, .boton.peligro:active:not(:disabled) { box-shadow: 0 1px 0 #6B1019; }
.boton:disabled { box-shadow: none; }
.pastilla, .estados button, .valorar, .mj-estados button, .letra, .icono, .flecha { transition: transform .08s ease; }
.pastilla:active, .estados button:active, .valorar:active, .mj-estados button:active, .letra:active, .icono:active { transform: translateY(1px) scale(.98); }

.capa-huella { position: absolute; z-index: 60; pointer-events: none; overflow: hidden; }
.huella { position: absolute; width: 34px; height: 42px; margin: -21px 0 0 -17px; animation: huella 1.6s ease-out forwards; }
.huella svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; }
@keyframes huella {
  0% { opacity: 0; transform: rotate(var(--giro)) scale(.85); }
  12% { opacity: var(--opacidad); transform: rotate(var(--giro)) scale(1); }
  45% { opacity: var(--opacidad); }
  100% { opacity: 0; transform: rotate(var(--giro)) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .boton, .boton.hundido, .boton:active { transition: none; transform: none; }
  .capa-huella { display: none; }
}

.menu-pixeles { position: fixed; z-index: 1001; pointer-events: none; image-rendering: pixelated; }

/* "Hola, usuario": versión compacta */
.resumen-usuario { padding: 12px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.resumen-usuario h2 { font-size: 18px; flex: 0 1 auto; }
.resumen-bloques { flex: 1 1 600px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.resumen-bloque { padding: 8px 12px; gap: 3px; justify-content: center; }
.resumen-bloque .etiqueta { font-size: 11px; }
.resumen-portadas { gap: 4px; }
.resumen-portadas a, .resumen-aviso .portada { width: 30px; }
.resumen-aviso { font-size: 13px; gap: 8px; line-height: 1.3; }
.resumen-dato { font-size: 13px; line-height: 1.3; }
.resumen-numero { font-size: 22px; }
.resumen-backlog { display: flex; align-items: baseline; gap: 8px; }
.resumen-fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.resumen-usuario .resumen-bloque { min-height: 62px; }

/* Insignia de rol junto al nombre del perfil */
.nombre-perfil { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.rol { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 3px rgba(0, 0, 0, .18); }
.rol svg { width: 17px; height: 17px; flex: none; }
.rol-webmaster { background: linear-gradient(135deg, #2A3A5C 0%, #1B2433 100%); color: #F2C94C; }
.rol-moderador { background: linear-gradient(135deg, #2F9E6B, #1F7A50); color: #fff; }
.rol-redactor { background: linear-gradient(135deg, #7C5BD6, #5B3FB0); color: #fff; }
.rol-colaborador { background: linear-gradient(135deg, #E25D7E, #C23B5E); color: #fff; }

/* Iconos de redes: todos iguales, círculos con el color de cada marca */
.red, .red-nintendo { width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0; background: transparent; overflow: hidden; box-shadow: 0 1px 3px rgba(27, 36, 51, .2); transition: transform .12s ease, box-shadow .12s ease; }
.red img, .red-nintendo img { width: 100%; height: 100%; object-fit: cover; }
.red:hover, .red[aria-expanded="true"] { background: transparent; transform: translateY(-1px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acento), 0 3px 8px rgba(27, 36, 51, .25); }
.redes-iconos { gap: 10px; }

/* ---------- Menú del avatar: burbujas que salen hacia la izquierda ---------- */
.menu-avatar { position: relative; display: flex; align-items: center; z-index: 20; transition: transform .45s cubic-bezier(.34, 1.3, .64, 1); }
.menu-avatar.abierto { transform: translateX(calc(var(--hueco, 0px) * -1)); }
.avatar-boton { border: none; padding: 0; cursor: pointer; position: relative; z-index: 3; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; }
.menu-avatar.abierto .avatar-boton { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .35); }
.burbujas { position: absolute; left: 22px; top: 50%; width: 0; height: 0; z-index: 2; }
/* Capa "pegajosa": los círculos de color se funden entre sí mientras se separan */
.burbujas-goo { position: absolute; inset: 0; filter: url(#goo); pointer-events: none; opacity: 0; transition: opacity .15s; }
.menu-avatar.moviendo .burbujas-goo { opacity: 1; transition: none; }
.burbujas-goo span, .burbuja { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; }
.burbujas-goo span { transform: translateX(0) scale(.2); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc((2 - var(--i, 0)) * 25ms); }
.burbujas-goo .b1 { --i: 0; background: #2563B8; } .burbujas-goo .b2 { --i: 1; background: #E3A81B; } .burbujas-goo .b3 { --i: 2; background: #D33A3A; }
.burbuja { display: flex; align-items: center; justify-content: center; color: #fff; border: none; padding: 0; background: transparent; cursor: pointer; opacity: 0; pointer-events: none;
  transform: translateX(0) scale(.3); filter: blur(5px);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, filter .3s ease; transition-delay: calc((2 - var(--i)) * 25ms); }
.burbuja::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2.5px #fff, 0 3px 10px rgba(0, 0, 0, .3); opacity: 0; transition: opacity .2s .15s; }
.burbuja.b1 { background: #2563B8; } .burbuja.b2 { background: #E3A81B; } .burbuja.b3 { background: #D33A3A; }
.burbuja svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: relative; }
.menu-avatar.abierto .burbuja { opacity: 1; pointer-events: auto; filter: blur(0); transition-delay: calc(var(--i) * 45ms); }
.menu-avatar.abierto .burbuja::before { opacity: 1; }
.menu-avatar.abierto .burbujas-goo span { transition-delay: calc(var(--i) * 45ms); }
.menu-avatar.abierto .b1 { transform: translateX(58px) scale(1); }
.menu-avatar.abierto .b2 { transform: translateX(106px) scale(1); }
.menu-avatar.abierto .b3 { transform: translateX(154px) scale(1); }
.burbuja:hover, .burbuja:focus-visible { outline: none; }
.menu-avatar.abierto .burbuja:hover, .menu-avatar.abierto .burbuja:focus-visible { filter: brightness(1.08); }
.menu-avatar.abierto .burbuja:focus-visible::before { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--acento-oscuro), 0 3px 10px rgba(0, 0, 0, .3); }
/* Etiqueta debajo de cada burbuja, aparece desenfocada y se enfoca */
.etiqueta-burbuja { position: absolute; top: calc(100% + 9px); left: 50%; transform: translate(-50%, -4px); white-space: nowrap; background: var(--tarjeta); color: var(--texto); font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 10px rgba(27, 36, 51, .18); opacity: 0; filter: blur(4px); pointer-events: none; transition: opacity .18s, filter .25s, transform .25s; }
.burbuja:hover .etiqueta-burbuja, .burbuja:focus-visible .etiqueta-burbuja { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .burbuja, .burbujas-goo span, .avatar-boton { transition-duration: .01s !important; transition-delay: 0s !important; filter: none !important; }
}
.burbuja:hover, .burbuja:focus { color: #fff; }

/* ---------- MPchat ---------- */
.chat { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .chat { grid-template-columns: 1fr; } .chat-lateral { order: -1; } }
.chat-principal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chat-lateral { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
@media (max-width: 900px) { .chat-lateral { position: static; } .chat-sugerencias, .chat-normas { display: none; } }
.chat-avatar.avatar { width: 48px; height: 48px; font-size: 17px; flex: none; }
.chat-avatar.avatar.pequeno { width: 36px; height: 36px; font-size: 13px; }

.chat-publicar-caja { display: flex; gap: 14px; padding: 16px; }
.chat-editor { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chat-editor textarea { width: 100%; resize: vertical; min-height: 64px; border: 1px solid var(--borde-control); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.45; color: var(--texto); background: var(--control); }
.chat-editor textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.chat-editor-pie { display: flex; align-items: center; gap: 12px; }
.chat-editor-pie .boton { margin-left: auto; }
.chat-contador { font-size: 14px; color: var(--apagado); font-variant-numeric: tabular-nums; margin-left: auto; }
.chat-contador + .boton { margin-left: 0; }
.chat-contador.poco { color: #B26A00; font-weight: 500; }
.chat-contador.pasado { color: #A11D2C; font-weight: 700; }
.chat-editor .error-texto:empty { display: none; }
.chat-anadir-juego { text-decoration: none; color: var(--acento); font-weight: 500; }
.chat-juego-elegido { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--suave); border: 1px solid var(--linea-2); border-radius: 8px; font-size: 14px; font-weight: 500; }
.chat-juego-elegido img { width: 28px; height: 37px; object-fit: cover; border-radius: 3px; }
.chat-juego-elegido .enlace-boton { margin-left: auto; }
.chat-buscar-juego { display: flex; flex-direction: column; gap: 6px; }
.chat-buscar-juego input { height: 40px; border: 1px solid var(--borde-control); border-radius: 8px; padding: 0 12px; font: inherit; }
.chat-resultados { display: flex; flex-direction: column; gap: 4px; }
.chat-resultados button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 5px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--control); font-size: 14px; color: var(--texto); }
.chat-resultados button:hover, .chat-resultados button:focus-visible { border-color: var(--acento); }
.chat-resultados img, .chat-resultados .sin-img { width: 26px; height: 35px; object-fit: cover; border-radius: 3px; background: var(--suave); flex: none; }
.chat-resultados small, .chat-sin { color: var(--apagado); font-size: 13px; margin: 0; }
.chat-entrar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }

.chat-pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--linea); align-items: flex-end; flex-wrap: wrap; }
.chat-pestanas button { height: 42px; padding: 0 16px; border: none; background: none; font-weight: 500; color: var(--apagado); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.chat-pestanas button[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); }
.chat-de { font-size: 20px; margin-right: auto; padding-bottom: 8px; }
.chat-pestanas a { padding-bottom: 10px; font-size: 14px; }
.chat-hay-nuevos { width: 100%; height: 42px; border: 1px solid #C6D8F1; background: var(--acento-suave); color: var(--acento-oscuro); border-radius: 8px; font-weight: 500; }

.chat-muro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.chat-muro > .vacio { border: none; border-radius: 0; }
.chat-msg { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--linea-2); }
.chat-muro > .chat-msg:first-child { border-top: none; }
.chat-msg.recien { animation: chatEntra .5s cubic-bezier(.34, 1.4, .64, 1), chatResalta 2.2s ease-out; }
@keyframes chatEntra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes chatResalta { from { background-color: var(--acento-suave); } to { background-color: transparent; } }
.chat-msg.saliendo { opacity: 0; transform: translateX(16px); transition: opacity .25s, transform .25s; }
.chat-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-cab-msg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.chat-nombre { font-weight: 700; color: var(--texto); font-size: 15px; }
.chat-nombre:hover { color: var(--acento); }
.chat-hora { color: var(--apagado); }
.chat-hora::before { content: '· '; }
.rol-mini { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.rol-mini.rol-webmaster { background: #1B2433; color: #F2C94C; }
.rol-mini.rol-moderador { background: #1F7A50; color: #fff; }
.rol-mini.rol-redactor { background: #5B3FB0; color: #fff; }
.rol-mini.rol-colaborador { background: #C23B5E; color: #fff; }
.chat-texto { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; color: var(--texto); }
.chat-texto .mencion { font-weight: 500; }
.chat-juego { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--linea); border-radius: 10px; background: var(--suave); color: var(--texto); max-width: 420px; }
.chat-juego:hover { border-color: var(--acento); color: var(--texto); }
.chat-juego .portada { width: 44px; flex: none; border-radius: 4px; }
.chat-juego .portada .placeholder { display: none; }
.chat-juego span { display: flex; flex-direction: column; font-weight: 500; font-size: 15px; line-height: 1.3; }
.chat-juego small { font-size: 11px; color: var(--apagado); text-transform: uppercase; letter-spacing: .6px; font-weight: 500; }
.chat-acciones { display: flex; align-items: center; gap: 4px; margin-left: -8px; flex-wrap: wrap; }
.chat-accion { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border: none; background: none; border-radius: 999px; color: var(--apagado); font-size: 13px; }
.chat-accion:hover { background: var(--suave); color: var(--texto); }
.chat-accion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.chat-accion.megusta[aria-pressed="true"] { color: #D33A3A; }
.chat-accion.megusta[aria-pressed="true"] svg { fill: currentColor; }
.chat-accion.late svg { animation: late .4s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes late { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.chat-accion.discreta { font-size: 12px; opacity: .75; }
.chat-accion.discreta:hover { opacity: 1; }
.chat-extra:empty { display: none; }
.chat-extra { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.chat-hilo { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 2px solid var(--linea); display: flex; flex-direction: column; }
.chat-hilo:empty { display: none; }
.chat-msg.respuesta { padding: 10px 0 10px 12px; border-top: none; }
.chat-msg.respuesta .chat-texto { font-size: 14px; }
.chat-editor.en-hilo textarea { min-height: 52px; font-size: 15px; }
.chat-denunciar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; padding: 10px; background: var(--suave); border-radius: 8px; }
.chat-denunciar select { height: 36px; border: 1px solid var(--borde-control); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 14px; }
.chat-gracias { margin: 0; font-size: 14px; color: #1F7A50; font-weight: 500; }
.chat-denuncia { list-style: none; padding: 14px 16px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; }
.chat-denuncia:first-child { border-top: none; }
.chat-denuncia .chat-muro { border-radius: 8px; }
.chat-denuncia-info { font-size: 14px; color: #A11D2C; }
.chat-denuncia-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.chat-yo { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.chat-yo-cab { display: flex; align-items: center; gap: 12px; }
.chat-yo-cab > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chat-yo .rol { height: 22px; font-size: 11px; }
.chat-yo .rol svg { width: 14px; height: 14px; }
.chat-numeros { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea-2); padding-top: 12px; text-align: center; }
.chat-numeros b { display: block; font-size: 20px; font-weight: 500; }
.chat-numeros span { font-size: 12px; color: var(--apagado); }
.chat-invitar { padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.chat-invitar h2, .chat-sugerencias h2 { font-size: 17px; }
.chat-invitar p { margin: 0; color: var(--apagado); font-size: 14px; }
.chat-invitar a:not(.boton) { font-size: 14px; }
.chat-sugerencias { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-sugerencias ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-sugerencias li { display: flex; align-items: center; gap: 10px; }
.chat-sugerencias .chat-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.chat-normas { font-size: 13px; color: var(--apagado); margin: 0; padding: 0 4px; }
.perfil-chat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; font-size: 14px; color: var(--apagado); }
.perfil-chat strong { color: var(--texto); font-weight: 700; }
@media (max-width: 900px) { .chat-sugerencias, .chat-normas { display: none; } .chat-yo .chat-numeros { padding-top: 10px; } }
#chat-publicar:empty { display: none; }

/* ---------- Listas de juegos ---------- */
.zona-listas { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.zona-listas h2 { font-size: 20px; }
.listas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.lista-tarjeta { display: flex; flex-direction: column; overflow: hidden; color: var(--texto); transition: border-color .15s, transform .15s; }
.lista-tarjeta:hover { color: var(--texto); border-color: var(--acento); transform: translateY(-2px); }
.lista-mosaico { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 3 / 2; gap: 2px; background: var(--linea-2); }
.lista-mosaico img, .lista-mosaico span { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--suave); }
.lista-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.lista-info strong { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-info > span { font-size: 13px; color: var(--apagado); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lista-privacidad { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.lista-privacidad.publica { background: var(--acento-suave); color: var(--acento-oscuro); }
.lista-privacidad.privada { background: #E9EBEF; color: #3A4352; }
.lista-privacidad svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lista-nueva { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.lista-nueva label { font-weight: 500; font-size: 14px; }
.lista-nueva small { color: var(--apagado); font-weight: 400; }
.lista-nueva input:not([type="radio"]), .lista-nueva textarea { height: 44px; border: 1px solid var(--borde-control); border-radius: 6px; padding: 0 12px; font: inherit; color: var(--texto); background: var(--control); }
.lista-nueva textarea { height: auto; padding: 10px 12px; resize: vertical; }
.lista-nueva input:focus, .lista-nueva textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.lista-visibilidad { border: none; padding: 0; margin: 4px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.lista-visibilidad legend { font-weight: 500; font-size: 14px; margin-bottom: 6px; padding: 0; }
.lista-visibilidad label { flex: 1 1 180px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde-control); border-radius: 8px; cursor: pointer; font-weight: 400; }
.lista-visibilidad label:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.lista-visibilidad input { margin-top: 3px; accent-color: var(--acento); }
.lista-visibilidad span { display: flex; flex-direction: column; font-size: 13px; color: var(--apagado); }
.lista-visibilidad strong { color: var(--texto); font-weight: 500; font-size: 14px; }
.lista-nueva .error-texto:empty { display: none; }
.lista-nueva-botones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.peligro-texto { color: #A11D2C; margin-left: auto; }
.lista-nueva.compacta { max-width: none; }
.lista-nueva.compacta .lista-visibilidad label { padding: 8px 10px; }

.acciones-ficha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acciones-ficha .boton-top { align-self: auto; }
.panel-listas { border: 1px solid var(--linea); border-radius: 10px; padding: 12px; background: var(--suave); display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.panel-listas[hidden] { display: none; }
.listas-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-check { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--control); color: var(--texto); text-align: left; font-size: 14px; }
.lista-check:hover { border-color: var(--acento); }
.lista-check-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.caja-check { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--borde-control); flex: none; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.lista-check[aria-pressed="true"] .caja-check { background: var(--acento); border-color: var(--acento); }
.lista-check[aria-pressed="true"] .caja-check::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.lista-crear summary { cursor: pointer; font-weight: 500; color: var(--acento); min-height: 32px; display: flex; align-items: center; }
.lista-crear[open] summary { margin-bottom: 8px; }

.lista-cabecera { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.lista-titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lista-titulo h1 { font-size: 32px; }
.lista-meta { margin: 0; color: var(--apagado); font-size: 15px; }
.lista-desc { margin: 4px 0 0; font-size: 16px; line-height: 1.5; max-width: 760px; }
.lista-acciones { margin-top: 6px; }
.lista-buscar { padding: 18px 24px; }
.lista-juego { position: relative; display: flex; }
.lista-juego > .ficha-mini { flex: 1; }
.lista-quitar { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(27, 36, 51, .85); color: #fff; font-size: 14px; opacity: 0; transition: opacity .15s; }
.lista-juego:hover .lista-quitar, .lista-quitar:focus-visible { opacity: 1; }
@media (hover: none) { .lista-quitar { opacity: 1; } }

/* Marca de colección en la esquina de las portadas */
.marca { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 255, 255, .95); pointer-events: none; animation: marcaEntra .3s cubic-bezier(.34, 1.6, .64, 1); }
.marca svg { width: 15px; height: 15px; }
.marca-coleccion { background: #1B2433; }
.marca-coleccion svg { fill: #5B9BEA; stroke: #5B9BEA; stroke-width: 3; stroke-linejoin: round; width: 14px; height: 14px; margin-top: -1px; }
.marca-deseado { background: #fff; }
.marca-deseado svg { fill: #E0314B; }
@keyframes marcaEntra { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
/* En portadas pequeñas no se pone (o se pone más pequeña) */
.resumen-portadas .marca, .resumen-aviso .marca, .chat-juego .marca, .top-resultado .marca, .sugerencia .marca, .chat-resultados .marca { display: none; }
.top-mini .marca, .dia-juego .marca, .ficha-cabecera .marca { width: 22px; height: 22px; top: 4px; right: 4px; }
.top-mini .marca svg, .dia-juego .marca svg { width: 12px; height: 12px; }
.ficha-cabecera .marca { width: 30px; height: 30px; top: 8px; right: 8px; }
.ficha-cabecera .marca svg { width: 17px; height: 17px; }
/* En tu propia colección todas las portadas la tendrían: no hace falta */
.perfil-propio #coleccion .marca { display: none; }
.ficha-mini .meta { flex-wrap: wrap; row-gap: 4px; }
.ficha-mini .meta > span:first-child { flex: 0 1 auto; min-width: min(100%, 3em); }
/* Mosaico de listas: las portadas reales (más altas que anchas) se recortan dentro de su hueco */
.lista-mosaico { grid-template-rows: repeat(2, minmax(0, 1fr)); overflow: hidden; flex: none; }
.lista-mosaico img, .lista-mosaico span { min-width: 0; min-height: 0; }
.lista-info { position: relative; background: var(--tarjeta); }

/* Más esperados */
.marca-esperado { background: linear-gradient(135deg, #FFB547, #F06A1D); }
.marca-esperado svg { fill: #fff; width: 15px; height: 15px; }
.estados button.estado-esperado[aria-pressed="true"], .mj-estados button.estado-esperado[aria-pressed="true"] { background: linear-gradient(135deg, #FF9A3C, #E8590C); border-color: #E8590C; color: #fff; }
.mj-estados .estado-esperado { grid-column: 1 / -1; }

/* Idiomas */
.i18n-cargando body { visibility: hidden; }
.selector-idioma { position: relative; display: flex; align-items: center; flex: none; }
.selector-idioma svg { position: absolute; left: 10px; width: 18px; height: 18px; fill: none; stroke: var(--cabecera-texto); stroke-width: 1.6; pointer-events: none; }
.selector-idioma select { height: 44px; padding: 0 28px 0 34px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C3CBD8' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 10px; color: #fff; font: inherit; font-size: 14px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.selector-idioma select:hover, .selector-idioma select:focus { border-color: rgba(255, 255, 255, .45); outline: none; }
.selector-idioma select:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.selector-idioma option { color: #1A1F29; background: #fff; }

/* ---------- Inicio con laterales (pantallas anchas) ---------- */
.lateral-pagina { display: none; }
.inicio-centro { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (min-width: 1500px) {
  .cabecera .contenedor, .pie .contenedor, main.inicio-maqueta { max-width: 1880px; }
  main.inicio-maqueta { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
  .lateral-pagina { display: block; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }

  /* "Hola, usuario" en vertical */
  .lateral-pagina .resumen-usuario { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px; padding: 16px; }
  .lateral-pagina .resumen-usuario h2 { font-size: 19px; }
  .lateral-pagina .resumen-bloques { display: flex; flex-direction: column; flex: none; gap: 10px; }
  .lateral-pagina .resumen-usuario .resumen-bloque { min-height: 0; padding: 10px 12px; }
  .lateral-pagina .resumen-portadas a, .lateral-pagina .resumen-aviso .portada { width: 40px; }

  /* Noticias en columna */
  .lateral-pagina .seccion-inicio .titulo-seccion { align-items: baseline; margin-bottom: 12px; }
  .lateral-pagina .seccion-inicio .titulo-seccion h2 { font-size: 19px; }
  .lateral-pagina .seccion-inicio .titulo-seccion p { display: none; }
  .lateral-pagina .noticias-inicio { grid-template-columns: 1fr; gap: 8px; }
  .lateral-pagina .noticia-mini { gap: 10px; padding: 8px; align-items: flex-start; }
  .lateral-pagina .noticia-mini-img { width: 88px; }
  .lateral-pagina .noticia-mini-img span { font-size: 10px; }
  .lateral-pagina .noticia-mini h3 { font-size: 14px; }
  /* La primera, destacada con la imagen grande */
  .lateral-pagina .noticia-mini:first-child { flex-direction: column; align-items: stretch; }
  .lateral-pagina .noticia-mini:first-child .noticia-mini-img { width: 100%; }
  .lateral-pagina .noticia-mini:first-child h3 { font-size: 15px; }
}
/* Botones del calendario: el texto puede ocupar dos líneas */
.tarjeta-lanz .boton { white-space: normal; height: auto; min-height: 34px; line-height: 1.25; padding: 6px 10px; }

/* ---------- Ventana "Necesitas una cuenta" ---------- */
.modal-cuenta { position: fixed; inset: 0; z-index: 200; background: rgba(15, 22, 34, .55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: mc-fondo .15s ease-out; }
.mc-caja { position: relative; width: min(440px, 100%); background: var(--tarjeta); border-radius: 12px; padding: 28px 24px 24px; box-shadow: 0 20px 50px rgba(15, 22, 34, .3); display: flex; flex-direction: column; gap: 12px; animation: mc-caja .2s cubic-bezier(.2, .9, .3, 1.2); }
.mc-caja h2 { font-size: 22px; margin: 0; }
.mc-caja p { margin: 0; color: var(--texto-2); line-height: 1.55; }
.mc-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.mc-botones .boton { flex: 1 1 160px; }
.mc-cerrar { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: none; background: none; font-size: 24px; color: var(--apagado); border-radius: 50%; }
.mc-cerrar:hover { background: var(--suave); color: var(--texto); }
@keyframes mc-fondo { from { opacity: 0; } }
@keyframes mc-caja { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .modal-cuenta, .mc-caja { animation: none; } }

/* Foto y redes en el saludo: solo en el lateral izquierdo (pantallas anchas) */
#resumen-cuerpo { flex: 1 1 600px; min-width: 0; display: flex; }
#resumen-cuerpo .resumen-bloques { flex: 1 1 auto; }
.resumen-perfil { display: none; }
@media (min-width: 1500px) {
  .lateral-pagina #resumen-cuerpo { flex: none; display: block; }
  .lateral-pagina .resumen-perfil { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .lateral-pagina .resumen-avatar { width: 88px; height: 88px; font-size: 28px; box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 5px var(--linea); transition: transform .2s; }
  .lateral-pagina .resumen-avatar:hover { transform: scale(1.04); }
  .lateral-pagina .resumen-redes:empty { display: none; }
  .lateral-pagina .resumen-redes .redes { margin-top: 0; }
  .lateral-pagina .resumen-redes .red { width: 36px; height: 36px; }
  .lateral-pagina .resumen-redes .red-id { font-size: 13px; }
}

/* ---------- Modo oscuro ---------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0F141C;
  --tarjeta: #18202B;
  --suave: #1F2834;
  --linea: #2B3543;
  --linea-2: #27303D;
  --borde-control: #3B4757;
  --texto: #E7EBF1;
  --texto-2: #C8CFDA;
  --apagado: #9AA4B4;
  --tenue: #8C96A7;
  --cabecera: #0A0E15;
  --cabecera-texto: #C3CBD8;
  --acento: #4D8BE8;
  --acento-oscuro: #7AA8EF;
  --acento-suave: #172843;
  --aviso-texto: #F4A672;
  --aviso-fondo: #3A2617;
  --control: #1F2834;
  --sobre-acento: #FFFFFF;
  --borde-banner: #284065;
  --sombra-boton: #0A0E15;
}
:root[data-tema="oscuro"] .lista-privacidad.privada { background: #2B3543; color: #C8CFDA; }
:root[data-tema="oscuro"] .boton { box-shadow: 0 3px 0 #1A3F78, 0 4px 10px rgba(0, 0, 0, .3); }
:root[data-tema="oscuro"] .boton.secundario { box-shadow: 0 3px 0 #0A0E15, 0 4px 10px rgba(0, 0, 0, .25); }
:root[data-tema="oscuro"] .modal-cuenta { background: rgba(0, 0, 0, .65); }
:root[data-tema="oscuro"] .portada { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }

/* Botón de tema en la cabecera */
.boton-tema { width: 44px; height: 44px; flex: none; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #C3CBD8; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color .15s, color .15s, transform .15s; }
.boton-tema:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }
.boton-tema:active { transform: scale(.94); }
.boton-tema:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.boton-tema svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.boton-tema[aria-pressed="false"] svg { fill: currentColor; stroke: none; }

/* Ventana de foto obligatoria */
html.sin-scroll { overflow: hidden; }
.mf-caja { align-items: center; text-align: center; }
.mf-circulo { width: 112px; height: 112px; border-radius: 50%; background: var(--suave); border: 2px dashed var(--borde-control); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 4px; }
.mf-circulo svg { width: 56px; height: 56px; fill: none; stroke: var(--apagado); stroke-width: 1.6; stroke-linecap: round; }
.mf-circulo img { width: 100%; height: 100%; object-fit: cover; }
.mf-caja .mc-botones { width: 100%; }
.mf-caja .error-texto:empty { display: none; }
.mf-salir { font-size: 14px; color: var(--apagado); background: none; border: none; text-decoration: underline; margin-top: 2px; }

/* Fotos predeterminadas */
.mf-caja { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.mf-rejilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; width: 100%; margin: 4px 0; }
.mf-opcion { aspect-ratio: 1; padding: 0; border: none; border-radius: 50%; background: none; position: relative; transition: transform .15s; }
.mf-opcion img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.mf-opcion:hover { transform: scale(1.07); }
.mf-opcion[aria-checked="true"] { box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 6px var(--acento); transform: scale(1.04); }
.mf-opcion:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
@media (max-width: 480px) { .mf-rejilla { grid-template-columns: repeat(4, 1fr); } }

/* Punto de la barra de navegación */
.cabecera .nav { position: relative; gap: 20px 12px; }
.cabecera .nav a { padding-left: 13px; transition: color .25s ease; }
.nav-punto { position: absolute; left: 0; top: -0.5px; width: 7px; height: 7px; border-radius: 50%; background: #fff; pointer-events: none; transition: opacity .2s; will-change: transform; }

/* Lateral izquierdo para quien no ha entrado */
.lateral-invitado { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.lateral-invitado h2 { font-size: 19px; }
.lateral-invitado p { margin: 0; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.lateral-invitado .boton { width: 100%; }

/* "Hola, Invitado" */
.resumen-invitado { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto-2); font-weight: 500; }
.lateral-pagina .resumen-registro { width: 100%; }

/* ---------- Logros ---------- */
.insignia-mini { width: 30px; height: 30px; image-rendering: pixelated; flex: none; transition: transform .15s; }
.insignia-mini:hover { transform: scale(1.15); }
.logros-cabecera:empty { display: none; }
.logros-cabecera { margin-top: 10px; }
.logros-enlace { display: flex; flex-wrap: wrap; gap: 4px; }
.resumen-logros { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.resumen-insignias { display: flex; flex-wrap: wrap; gap: 3px; }
.resumen-insignias .insignia-mini { width: 26px; height: 26px; }
.resumen-logros-enlace { font-size: 13px; }
.resumen-logros-enlace.apagado { color: var(--apagado); }
.zona-logros { padding: 20px 24px; }
.logros-cuenta { color: var(--apagado); font-size: 14px; font-weight: 500; }
.logros-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.logro { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--suave); border: 1px solid var(--linea-2); border-radius: 10px; }
.logro img { width: 52px; height: 52px; flex: none; image-rendering: pixelated; }
.logro.pendiente img { filter: grayscale(1) brightness(.8); opacity: .5; }
.logro-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.logro-texto strong { font-size: 14.5px; font-weight: 500; }
.logro-texto span { font-size: 12.5px; color: var(--apagado); line-height: 1.35; }
.logro-texto small { font-size: 11.5px; color: var(--tenue); }
.logro.conseguido .logro-texto small { color: var(--acento); }
.logro-barra { height: 5px; border-radius: 3px; background: var(--linea); overflow: hidden; margin-top: 4px; }
.logro-barra i { display: block; height: 100%; background: var(--acento); border-radius: 3px; }
/* Aviso al desbloquear un logro */
.logro-aviso { position: fixed; left: 50%; bottom: 28px; z-index: 300; display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; background: var(--cabecera); color: #fff; border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); transform: translate(-50%, 140%); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; }
.logro-aviso.visible { transform: translate(-50%, 0); opacity: 1; }
.logro-aviso img { width: 56px; height: 56px; image-rendering: pixelated; animation: logro-giro .8s ease-out .2s; }
.logro-aviso small { display: block; font-size: 12px; color: #FFD84D; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.logro-aviso strong { font-size: 17px; font-weight: 500; }
@keyframes logro-giro { 0% { transform: scale(.4) rotate(-25deg); } 60% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .logro-aviso, .logro-aviso img { transition: none; animation: none; } }

.logro-aviso span { display: block; font-size: 13px; color: #C3CBD8; margin-top: 2px; }

/* Captcha (Turnstile) */
.captcha { min-height: 0; }
.captcha:not(:empty) { min-height: 65px; }

/* "Jugando ahora": solo carátulas */
.resumen-jugando { flex-wrap: wrap; }
/* Logros del perfil público en un desplegable */
.zona-logros { padding: 0; }
.logros-resumen { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 24px; flex-wrap: wrap; }
.logros-resumen::-webkit-details-marker { display: none; }
.logros-resumen h2 { font-size: 20px; }
.logros-resumen .logros-cuenta { background: var(--suave); border: 1px solid var(--linea-2); border-radius: 999px; padding: 1px 10px; font-size: 13px; }
.logros-vista { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; min-width: 0; }
.logros-vista .insignia-mini { width: 26px; height: 26px; }
.zona-logros[open] .logros-vista { visibility: hidden; }
.logros-flecha { width: 10px; height: 10px; border-right: 2px solid var(--apagado); border-bottom: 2px solid var(--apagado); transform: rotate(45deg); transition: transform .2s; margin: -4px 4px 0 auto; flex: none; }
.zona-logros[open] .logros-flecha { transform: rotate(-135deg); margin-top: 4px; }
.zona-logros .logros-rejilla { padding: 0 24px 20px; }

/* Ficha de una insignia al pasar el ratón (lateral) */
.resumen-insignias .insignia-mini { cursor: help; border-radius: 50%; }
.resumen-insignias .insignia-mini:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ficha-insignia { position: fixed; z-index: 250; display: flex; gap: 12px; align-items: center; max-width: 280px; padding: 10px 14px 10px 10px; background: var(--cabecera); color: #fff; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.ficha-insignia.visible { opacity: 1; transform: none; }
.ficha-insignia img { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.ficha-insignia strong { display: block; font-size: 15px; font-weight: 500; }
.ficha-insignia em { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin: 1px 0 3px; }
.ficha-insignia .nivel-bronce { color: #F2B27A; } .ficha-insignia .nivel-plata { color: #D5DCE6; } .ficha-insignia .nivel-oro { color: #FFD84D; } .ficha-insignia .nivel-epico { color: #C9A4FF; }
.ficha-insignia span { display: block; font-size: 13px; color: #C3CBD8; line-height: 1.35; }
.ficha-insignia small { display: block; font-size: 11.5px; color: #8C96A7; margin-top: 3px; }

/* Noticias: enlace a la noticia y al foro */
.noticia-enlace { display: flex; flex-direction: column; flex: 1; color: var(--texto); }
.noticia-enlace:hover { color: var(--texto); }
.noticia-foro { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--linea-2); font-size: 13.5px; font-weight: 500; }
.noticia-foro:hover { background: var(--acento-suave); }

/* ---------- Foros ---------- */
.foros-lista { display: flex; flex-direction: column; gap: 8px; }
.foro-fila { display: grid; grid-template-columns: 48px minmax(0, 1fr) 110px minmax(0, 260px); gap: 16px; align-items: center; padding: 14px 18px; color: var(--texto); transition: border-color .15s; }
.foro-fila:hover { color: var(--texto); border-color: var(--acento); }
.foro-icono { font-size: 28px; text-align: center; }
.foro-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.foro-info strong { font-size: 17px; font-weight: 500; }
.foro-info span { color: var(--apagado); font-size: 14px; }
.foro-cifras { font-size: 13px; color: var(--apagado); line-height: 1.5; }
.foro-cifras b { color: var(--texto); font-weight: 500; }
.foro-ultimo { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.foro-ultimo-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foro-ultimo small { color: var(--apagado); }
@media (max-width: 760px) { .foro-fila { grid-template-columns: 40px minmax(0, 1fr); } .foro-cifras, .foro-ultimo { grid-column: 2; } }
.foro-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.foro-temas { padding: 0; overflow: hidden; }
.foro-temas > .vacio { margin: 16px; }
.foro-temas-cab, .foro-tema-fila { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px; gap: 14px; align-items: center; padding: 12px 18px; }
.foro-temas-cab { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--apagado); background: var(--suave); border-bottom: 1px solid var(--linea); }
.foro-tema-fila + .foro-tema-fila { border-top: 1px solid var(--linea-2); }
.foro-tema-titulo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.foro-tema-titulo a { font-size: 15.5px; font-weight: 500; color: var(--texto); }
.foro-tema-titulo a:hover { color: var(--acento); }
.foro-tema-titulo small, .foro-tema-ultimo small { color: var(--apagado); font-size: 12.5px; }
.foro-tema-n { text-align: center; font-weight: 500; }
.foro-tema-ultimo { display: flex; flex-direction: column; font-size: 13.5px; }
@media (max-width: 640px) { .foro-temas-cab { display: none; } .foro-tema-fila { grid-template-columns: minmax(0, 1fr) 60px; } .foro-tema-ultimo { display: none; } }
.foro-marca { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 1px 7px; border-radius: 999px; margin-right: 4px; vertical-align: middle; }
.foro-marca.fijado { background: var(--acento-suave); color: var(--acento); }
.foro-marca.cerrado { background: var(--suave); color: var(--apagado); border: 1px solid var(--linea); }
.foro-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.foro-form h2 { font-size: 19px; }
.foro-form textarea { width: 100%; border: 1px solid var(--borde-control); border-radius: 6px; padding: 10px 12px; font: inherit; color: var(--texto); background: var(--control); resize: vertical; }
.foro-form small { color: var(--apagado); font-size: 12.5px; }
.foro-form-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.foro-tema-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.foro-tema-cabecera h1 { font-size: 28px; line-height: 1.2; }
.foro-moderar { display: flex; gap: 6px; flex-wrap: wrap; }
.foro-noticia { display: flex; gap: 18px; padding: 14px; align-items: center; margin-bottom: 16px; }
.foro-noticia img { width: 240px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: none; }
.foro-noticia > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.foro-noticia p { margin: 0; color: var(--texto-2); line-height: 1.5; }
@media (max-width: 640px) { .foro-noticia { flex-direction: column; align-items: stretch; } .foro-noticia img { width: 100%; } }
.foro-mensajes { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.foro-mensaje { padding: 0; overflow: hidden; }
.foro-mensaje-autor { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--suave); border-bottom: 1px solid var(--linea-2); }
.foro-mensaje-autor .avatar { width: 40px; height: 40px; font-size: 14px; }
.foro-mensaje-autor > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.foro-mensaje-autor small { flex-basis: 100%; color: var(--apagado); font-size: 12px; }
.foro-autor-nombre { font-weight: 500; color: var(--texto); }
.foro-insignias { display: inline-flex; gap: 2px; }
.foro-insignias .insignia-mini { width: 20px; height: 20px; }
.foro-mensaje-num { margin-left: auto; color: var(--apagado); font-size: 13px; }
.foro-mensaje-cuerpo { padding: 14px 16px 6px; }
.foro-texto { line-height: 1.6; overflow-wrap: anywhere; }
.foro-texto a { text-decoration: underline; }
.foro-cita { margin: 4px 0 10px; padding: 8px 12px; border-left: 3px solid var(--acento); background: var(--suave); border-radius: 0 6px 6px 0; color: var(--texto-2); font-size: 14px; }
.foro-cita cite { display: block; font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--apagado); margin-bottom: 2px; }
.foro-spoiler { display: inline; border: none; padding: 1px 8px; border-radius: 4px; background: var(--cabecera); color: var(--cabecera-texto); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.foro-spoiler .foro-spoiler-texto { display: none; }
.foro-spoiler.visto { background: var(--suave); color: var(--texto); cursor: default; }
.foro-spoiler.visto > span:first-child { display: none; }
.foro-spoiler.visto .foro-spoiler-texto { display: inline; }
.foro-mensaje-pie { display: flex; align-items: center; gap: 6px; padding: 6px 12px 10px 16px; flex-wrap: wrap; }
.foro-mensaje-pie small { color: var(--apagado); font-size: 12.5px; margin-right: auto; }
.foro-accion { border: 1px solid transparent; background: none; color: var(--apagado); font-size: 13px; padding: 3px 9px; border-radius: 999px; }
.foro-accion:hover { background: var(--suave); color: var(--texto); }
.foro-accion.activo { color: #E0314B; }
.foro-accion.peligro:hover { color: #C0262D; }
.foro-invitado { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
.paginacion { display: flex; gap: 6px; flex-wrap: wrap; }
.paginacion .pastilla[aria-current="page"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }

/* Foros: vídeos de YouTube y vistas previas de enlaces */
.foro-video { display: block; position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; margin: 10px 0 4px; padding: 0; border: none; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.foro-video img, .foro-video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.foro-video-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); background: #FF0033; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: transform .15s; }
.foro-video-play::after { content: ""; position: absolute; left: 27px; top: 14px; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
button.foro-video:hover .foro-video-play { transform: translate(-50%, -50%) scale(1.08); }
.foro-vista { display: flex; max-width: 560px; margin: 10px 0 4px; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--suave); color: var(--texto); text-decoration: none; }
.foro-vista:hover { color: var(--texto); border-color: var(--acento); }
.foro-vista img { width: 150px; flex: none; object-fit: cover; aspect-ratio: 16 / 10; }
.foro-vista-texto { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; min-width: 0; }
.foro-vista-texto small { font-size: 12px; color: var(--apagado); }
.foro-vista-texto strong { font-size: 14.5px; font-weight: 500; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.foro-vista-texto span { font-size: 13px; color: var(--texto-2); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.foro-vista.cargando { opacity: .6; }
@media (max-width: 520px) { .foro-vista { flex-direction: column; } .foro-vista img { width: 100%; } }

/* ---------- Jugado (terminado/droppeado) y backlog (físico/digital) ---------- */
.subestado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; background: var(--suave); border: 1px solid var(--linea-2); border-radius: 8px; }
.subestado .pastilla { height: 36px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.subestado .pastilla svg { width: 15px; height: 15px; }
.subestado .resultado-terminado[aria-pressed="true"] { background: #2E9E5B; border-color: #2E9E5B; color: #fff; }
.subestado .resultado-droppeado[aria-pressed="true"] { background: #C8463D; border-color: #C8463D; color: #fff; }
.subestado-fecha { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--apagado); }
.subestado-fecha input { height: 36px; padding: 0 10px; border: 1px solid var(--linea-2); border-radius: 6px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 14px; }
.subestado-fecha .enlace-boton { min-height: 0; font-size: 13px; }
.formato-esquina { position: absolute; top: 6px; left: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 5px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .02em; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: auto; }
.formato-esquina svg { width: 12px; height: 12px; flex: none; }
.formato-fisico { background: #E07B2A; }
.formato-digital { background: #3A7BD5; }
[data-tema="oscuro"] .subestado-fecha input { color-scheme: dark; }

/* ---------- Reto diario «¿Qué juego es?» ---------- */
.reto { display: flex; flex-direction: column; gap: 18px; }
.reto-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.reto-cab .titulo-pagina { margin: 4px 0 6px; }
.reto-cab .subtitulo-pagina { margin: 0; }
.reto-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.reto-cuerpo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding: 24px; align-items: start; }
.reto-portada { width: 300px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #141A24; box-shadow: 0 0 0 4px #2C3648, 0 10px 30px rgba(0,0,0,.25); }
.reto-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reto-portada img.pixelada, .reto-mini img.pixelada { image-rendering: pixelated; image-rendering: crisp-edges; }
.reto-portada.revelada img { animation: reto-revelar .7s ease-out; }
@keyframes reto-revelar { from { filter: blur(10px) saturate(.4); transform: scale(1.04); } to { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reto-portada.revelada img { animation: none; } }
.reto-sin-portada { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 14px; color: #fff; font-weight: 700; font-size: 20px; }
.reto-juego { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.reto-cuadros { display: flex; gap: 8px; }
.reto-cuadro { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 16px; background: var(--suave); border: 2px solid var(--linea); color: var(--tenue); }
.reto-cuadro.actual { border-color: var(--acento); color: var(--acento); }
.reto-cuadro.fallo { background: #C8463D; border-color: #C8463D; color: #fff; }
.reto-cuadro.pasado { background: #8A93A3; border-color: #8A93A3; color: #fff; }
.reto-cuadro.acierto { background: #2E9E5B; border-color: #2E9E5B; color: #fff; }
.reto-form { display: flex; flex-direction: column; gap: 8px; }
.reto-form label { font-weight: 500; }
.reto-buscar { position: relative; }
.reto-buscar input { width: 100%; height: 48px; padding: 0 14px; font: inherit; font-size: 17px; border: 1px solid var(--borde-control); border-radius: 8px; background: var(--control); color: var(--texto); }
.reto-buscar input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.reto-sug { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.18); max-height: 320px; overflow-y: auto; }
.reto-sug li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.reto-sug li:hover, .reto-sug li[aria-selected="true"] { background: var(--acento-suave); }
.reto-sug small { color: var(--apagado); }
.reto-botones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reto-quedan { color: var(--apagado); font-size: 14px; }
.reto-intentos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.reto-intentos li { padding: 8px 12px; border-radius: 6px; background: var(--suave); border-left: 4px solid #C8463D; text-decoration: line-through; color: var(--apagado); }
.reto-intentos li.pasado { border-left-color: #8A93A3; text-decoration: none; font-style: italic; }
.reto-intentos li.acierto { border-left-color: #2E9E5B; text-decoration: none; color: var(--texto); font-weight: 500; }
.reto-resultado { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: var(--suave); border: 1px solid var(--linea); }
.reto-resultado.bien { border-color: #2E9E5B; }
.reto-resultado.mal { border-color: #C8463D; }
.reto-resultado strong { font-size: 18px; }
.reto-solucion { font-size: 22px; font-weight: 700; }
.reto-compartir-texto { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--suave); border: 1px dashed var(--linea); font: 15px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.reto-x { background: #000; border-color: #000; color: #fff; }
.reto-x:hover { background: #222; color: #fff; }
.reto-siguiente { margin: 0; color: var(--apagado); }
.reto-siguiente strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.reto-pie { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding-top: 14px; border-top: 1px solid var(--linea-2); font-size: 14px; }
.reto-racha { font-weight: 700; }
.reto-compartir-reto { font-size: 14px; }
.reto-vacio { padding: 24px; }
@media (max-width: 760px) {
  .reto-cuerpo { grid-template-columns: 1fr; padding: 16px; justify-items: center; }
  .reto-portada { width: min(280px, 100%); }
  .reto-juego { width: 100%; }
  .reto-cuadro { width: 38px; height: 38px; }
}
/* Aviso del lateral */
.reto-mini { padding: 12px; margin-top: 16px; }
.reto-mini-enlace { display: flex; gap: 12px; align-items: center; color: var(--texto); }
.reto-mini-enlace:hover { color: var(--texto); }
.reto-mini-enlace:hover strong { color: var(--acento); }
.reto-mini-img { width: 56px; flex: none; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden; background: #141A24; }
.reto-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reto-mini-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reto-mini-texto strong { font-size: 15px; }
.reto-mini-texto small { color: var(--apagado); }
.reto-form .error-texto:empty { display: none; }
.reto-invitado { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 10px; background: var(--acento-suave); border: 1px solid var(--borde-banner); }
.reto-invitado strong { font-size: 17px; }
.reto-invitado > span { color: var(--texto-2); }
.reto-x-cuenta { margin: 0; font-size: 14px; color: var(--texto-2); }
/* Reto dentro del post de X (tarjeta de reproductor) */
body.embed-reto { background: var(--fondo); }
.embed-caja { padding: 12px 14px 16px; max-width: 560px; margin: 0 auto; }
.embed-marca { display: inline-flex; align-items: center; font-weight: 900; letter-spacing: .04em; font-size: 14px; color: var(--texto); margin-bottom: 6px; }
.embed-reto .reto { gap: 10px; }
.embed-reto .reto-nav, .embed-reto .reto-compartir-reto, .embed-reto .reto-siguiente { display: none; }
.embed-reto .reto-cab .titulo-pagina { font-size: 22px; margin: 2px 0; }
.embed-reto .reto-cab .subtitulo-pagina { font-size: 13px; }
.embed-reto .reto-cuerpo { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px; }
.embed-reto .reto-portada { width: 150px; box-shadow: 0 0 0 3px #2C3648; }
.embed-reto .reto-juego { gap: 10px; }
.embed-reto .reto-cuadro { width: 30px; height: 30px; font-size: 13px; border-radius: 6px; }
.embed-reto .reto-cuadros { gap: 5px; }
.embed-reto .reto-buscar input { height: 40px; font-size: 15px; }
.embed-reto .reto-form label { font-size: 14px; }
.embed-reto .reto-sug { max-height: 180px; }
.embed-reto .reto-intentos li { padding: 5px 10px; font-size: 14px; }
.embed-reto .reto-solucion { font-size: 18px; }
.embed-reto .reto-compartir-texto { font-size: 13px; padding: 8px 10px; }
@media (max-width: 400px) {
  .embed-reto .reto-cuerpo { grid-template-columns: 1fr; justify-items: center; }
}
/* Puntos del Reto diario */
.resumen-puntos { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--texto-2); padding: 8px 10px; border-radius: 8px; background: var(--suave); border: 1px solid var(--linea-2); }
.resumen-puntos strong { font-size: 18px; color: var(--texto); font-variant-numeric: tabular-nums; }
.resumen-puntos:hover { border-color: var(--acento); color: var(--texto-2); }
.stats-reto { color: inherit; }
.reto-ganados { align-self: flex-start; font-weight: 700; font-size: 14px; padding: 2px 10px; border-radius: 999px; background: #2E9E5B; color: #fff; }
.reto-ganados.cero { background: #8A93A3; }
/* Reto jugable en el lateral del inicio */
.reto-lateral { padding: 14px; gap: 10px; margin-top: 16px; }
.reto-lateral .reto-cab { flex-direction: column; align-items: flex-start; gap: 0; }
.reto-lateral .reto-cab .titulo-pagina { font-size: 19px; margin: 2px 0 0; }
.reto-lateral .reto-cab .etiqueta { font-size: 11px; }
.reto-lateral .reto-cab .subtitulo-pagina, .reto-lateral .reto-nav, .reto-lateral .reto-compartir-reto,
.reto-lateral .reto-compartir-texto, .reto-lateral .reto-x-cuenta { display: none; }
.reto-lateral .reto-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; box-shadow: none; background: none; }
.reto-lateral .reto-portada { width: 100%; max-width: 230px; align-self: center; box-shadow: 0 0 0 3px #2C3648; }
.reto-lateral .reto-juego { gap: 10px; width: 100%; }
.reto-lateral .reto-cuadros { gap: 4px; justify-content: space-between; }
.reto-lateral .reto-cuadro { width: auto; flex: 1; height: 30px; font-size: 13px; border-radius: 6px; }
.reto-lateral .reto-form label { font-size: 13px; }
.reto-lateral .reto-buscar input { height: 40px; font-size: 15px; }
.reto-lateral .reto-sug { position: static; margin-top: 4px; box-shadow: none; max-height: 220px; }
.reto-lateral .reto-sug li { padding: 8px 10px; font-size: 14px; }
.reto-lateral .reto-botones { gap: 8px; }
.reto-lateral .reto-botones .boton { flex: 1; min-width: 0; padding-left: 8px; padding-right: 8px; }
.reto-lateral .reto-quedan { flex-basis: 100%; font-size: 13px; }
.reto-lateral .reto-intentos li { padding: 5px 9px; font-size: 13px; }
.reto-lateral .reto-resultado { padding: 10px 12px; }
.reto-lateral .reto-resultado strong { font-size: 15px; }
.reto-lateral .reto-solucion { font-size: 17px; }
.reto-lateral .reto-pie { font-size: 13px; padding-top: 10px; gap: 4px 10px; }
.reto-lateral .reto-invitado { padding: 12px; }
.reto-lateral .reto-invitado strong { font-size: 15px; }
.reto-lateral .reto-siguiente { font-size: 13px; }
@media (max-width: 1499px) {
  .reto-lateral { margin-top: 0; }
  .reto-lateral .reto-cuerpo { flex-direction: row; align-items: flex-start; }
  .reto-lateral .reto-portada { width: 180px; flex: none; }
}
@media (max-width: 600px) {
  .reto-lateral .reto-cuerpo { flex-direction: column; align-items: stretch; }
  .reto-lateral .reto-portada { width: 100%; max-width: 230px; }
}
@media (min-width: 1500px) { .lateral-pagina .reto-lateral .reto-botones .boton { font-size: 13px; white-space: nowrap; } }
.reto-lateral .reto-portada { align-self: flex-start; }
@media (min-width: 1500px), (max-width: 600px) { .reto-lateral .reto-portada { align-self: center; } }