/* ============================================================
   ICONOS DEL JUEGO V28
   Integra el nuevo set sin alterar la lógica de navegación.
   ============================================================ */

.iconoJuegoV28 {
    display: inline-block;
    width: 1.45em;
    height: 1.45em;
    object-fit: contain;
    flex: 0 0 auto;
    vertical-align: middle;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(72, 38, 10, .12));
}

/* Inicio limpio: seguimos conservando la pantalla en blanco, solo integramos los iconos. */
#pantallaInicio #botonComenzar,
#pantallaInicio #botonConfiguracionInicioV1 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
}

#pantallaInicio .iconoInicioV28 {
    width: 32px;
    height: 32px;
}

/* Panel lateral del jugador */
#panelJugadorV3 .iconoAccionPanelV3,
#panelJugadorV3 .iconoSistemaPanelV3 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#panelJugadorV3 .iconoPanelV28 {
    width: 31px;
    height: 31px;
}

#panelJugadorV3 .statPanelJugadorV3 > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#panelJugadorV3 .iconoStatV28 {
    width: 25px;
    height: 25px;
}

/* Botón de sonido del panel */
#botonMuteV3.iconizadoMuteV28 {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
}

#botonMuteV3 .iconoMuteV28 {
    width: 31px;
    height: 31px;
}

/* Mundos */
.iconoMundoProgreso.iconizadoMundoV28,
.iconoCurso.iconizadoMundoV28 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.iconoMundoV28 {
    width: clamp(42px, 4vw, 58px);
    height: clamp(42px, 4vw, 58px);
    object-fit: contain;
    filter: drop-shadow(0 3px 2px rgba(73, 42, 12, .14));
}

#mundosProgresoPerfil .iconoMundoV28 {
    width: 42px;
    height: 42px;
}

/* Perfil */
#pantallaPerfilJugador .datoPerfil > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#pantallaPerfilJugador .iconoPerfilStatV28 {
    width: 38px;
    height: 38px;
}

#pantallaPerfilJugador #botonPersonalizarPerfil,
#pantallaPerfilJugador #botonCerrarPerfil,
#botonEditarAvatarPerfilV3,
#botonTiendaPerfilV3 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.iconoAccionPerfilV28 {
    width: 28px;
    height: 28px;
}

/* Tienda */
.recursoTiendaV3 > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.iconoRecursoV28 {
    width: 30px;
    height: 30px;
}

#botonIrEstudioAvatar,
#botonVolverTiendaAvatar,
#botonTiendaAvatarStudio,
#botonCerrarAvatarStudio {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Respaldos */
#botonExportarRespaldo,
#botonImportarRespaldo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.iconoRespaldoV28 {
    width: 27px;
    height: 27px;
}

/* Configuración: el nuevo set se integra en los elementos ya funcionales. */
#cerrarConfiguracionV1.cerrarConfiguracionFantasiaV8 {
    overflow: hidden !important;
    padding: 1px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
}

#cerrarConfiguracionV1 .iconoCerrarConfigV28 {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

#musicaOnOffV1.botonMusicaOnOffFantasiaV8 {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#musicaOnOffV1.botonMusicaOnOffFantasiaV8 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Slider: las tres piezas comparten exactamente la misma guía de movimiento. */
#panelConfiguracionV1 .sliderFantasiaV8 {
    height: 48px !important;
}

#panelConfiguracionV1 .sliderBaseFantasiaV8 {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
}

#panelConfiguracionV1 .sliderRellenoClipFantasiaV8 {
    left: 12% !important;
    top: 29% !important;
    width: 76% !important;
    height: 42% !important;
    border-radius: 999px !important;
}

#panelConfiguracionV1 .sliderRellenoFantasiaV8 {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
}

#panelConfiguracionV1 .sliderPerillaFantasiaV8 {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
}

/* Los iconos grandes del nuevo set tienen mucho detalle: aquí los mantenemos contenidos. */
#panelConfiguracionV1 .tituloBloqueFantasiaV8 img {
    width: 31px !important;
    height: 31px !important;
    object-fit: contain !important;
}

#panelConfiguracionV1 .iconoAccionFantasiaV8 {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
}

#panelConfiguracionV1 .avisoBloqueoFantasiaV8 img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

/* Iconos de acceso generales reutilizados en botones antiguos/fallback. */
.iconizadoBotonV28 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.iconizadoBotonV28 > .iconoJuegoV28 {
    width: 28px;
    height: 28px;
}

@media (max-width: 760px) {
    .iconoMundoV28 {
        width: 40px;
        height: 40px;
    }
    #pantallaInicio .iconoInicioV28 {
        width: 28px;
        height: 28px;
    }
}