/* Habbla <-> HabboExtreme bridge.
   The actual visual values come from the ORIGINAL HabboExtreme CSS files. */

html,
body {
    min-height: 100%;
}

body#habbla-app {
    margin: 0 !important;
    padding: 0 !important;
    background-image: url("../habboextreme/images/bg.png") !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    color: #333 !important;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
}

#app {
    min-height: 100vh;
}

#header-container #header h1 a {
    text-indent: -10000px !important;
}

#content-container {
    min-width: 930px;
}

#content {
    min-height: 500px;
}

/* Habbla pages that still use Tailwind grid utilities live inside original content width. */
#content > .grid,
#content > [class*="grid"] {
    width: 100%;
}

/* Keep dropdowns above the old header. */
#header .dropdown-menu,
#header [role="menu"] {
    z-index: 99999 !important;
}

/* Laravel logout as visual text link in old navi2 */
.hx-link-button {
    padding: 0;
    margin: 0;
    color: #134787;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.hx-link-button:hover {
    text-decoration: underline;
}

/* Make original rounded/white online block work without Prototype's Rounder.js */
#ibxs-online .rounded {
    min-height: 38px;
    padding: 0;
    border-radius: 5px;
    overflow: hidden;
}

/* The original .cbb relied on Rounder.js for generated corner markup.
   These small fallbacks preserve the exact old colors but provide modern rounded corners. */
.cbb {
    overflow: hidden;
    margin: 0 8px 7px 0;
    border-radius: 6px;
    background: #fff;
}

.cbb h2.title {
    border-radius: 6px 6px 0 0;
}

.cbb .box-content {
    color: #333;
    background: #fff;
}

.hx-under-title {
    padding: 5px 15px 0;
    color: #777;
    background: #fff;
    font-size: 10px;
}

/* /me functional elements */
.hx-empty {
    margin: 18px 0;
    padding: 0;
    color: #777;
    font-style: italic;
    text-align: center;
}

.hx-warning {
    color: #b40000;
}

.hx-referral-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hx-referral-row > *:first-child {
    flex: 1 1 auto;
}

.hx-copy-button,
.hx-reward-button {
    min-height: 25px;
    padding: 4px 10px;
    color: #fff;
    background: #4ab501;
    border: 1px solid #338300;
    border-radius: 3px;
    font: bold 10px Verdana, Arial, sans-serif;
    cursor: pointer;
}

.hx-reward-button.disabled,
.hx-reward-button:disabled {
    opacity: .5;
    cursor: default;
}

/* Keep article slider constrained to original sidebar. */
.hx-news-box {
    padding: 0 !important;
    overflow: hidden;
}

.hx-news-box .make-news-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* Friends remain functional but fit old box. */
.habbla-online-friends-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.habbla-friend-avatar {
    width: 42px;
    height: 42px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

/* Habbla forms: old neutral input appearance. */
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="number"],
#content textarea,
#content select {
    color: #333;
    background: #fff;
    border: 1px solid #777;
    border-radius: 2px;
    font: 11px Verdana, Arial, sans-serif;
}

/* Preserve layout on modern viewport, exact desktop width at >= 930px. */
@media (max-width: 960px) {
    #header-container,
    #content-container {
        min-width: 0;
    }

    #header,
    #container,
    #navi2-container {
        width: calc(100% - 20px);
        min-width: 0;
    }

    #navi {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #navi li {
        flex: 0 0 auto;
    }

    #column1,
    #column2 {
        width: 100%;
        float: none;
    }

    .cbb {
        margin-right: 0;
    }
}




/* =========================================================
   V4 - MENÚ HABBOEXTREME SIN CORTES
   ========================================================= */

/*
 * La fila superior usa exactamente 28px como el sprite tabs.png.
 * No se permite wrap ni recorte vertical.
 */
#header-container {
    overflow: visible !important;
}

#header {
    min-height: 92px !important;
    overflow: visible !important;
}

#navi {
    clear: both !important;

    width: 930px !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: visible !important;

    white-space: nowrap !important;
}

#navi::after {
    content: "";
    display: block;
    clear: both;
}

#navi li {
    float: left !important;

    height: 28px !important;

    margin: 0 5px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    white-space: nowrap !important;
}

#navi li a {
    float: left !important;

    height: 28px !important;

    padding: 6px 13px 0 18px !important;

    background-image: url("images/tabs.png") !important;
    background-repeat: no-repeat !important;
    background-position: -10px -28px !important;

    color: #fff !important;

    font: normal 12px/16px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}

#navi li span {
    float: left !important;

    width: 6px !important;
    height: 28px !important;

    background-image: url("images/tabs.png") !important;
    background-repeat: no-repeat !important;
    background-position: -4px -28px !important;
}

#navi li.selected a {
    color: #000 !important;
    background-position: -10px 0 !important;
    font-weight: bold !important;
}

#navi li.selected span {
    background-position: -4px 0 !important;
}

#navi li:not(.selected):not(#tab-register-now):hover a {
    background-position: -10px -56px !important;
}

#navi li:not(.selected):not(#tab-register-now):hover span {
    background-position: -4px -56px !important;
}

#navi #tab-register-now a {
    color: #fff !important;
    background-position: -10px -84px !important;
}

#navi #tab-register-now span {
    background-position: -4px -84px !important;
}

#navi #tab-register-now:hover a {
    background-position: -10px -112px !important;
}

#navi #tab-register-now:hover span {
    background-position: -4px -112px !important;
}

/*
 * El segundo menú empieza después del tab completo.
 * Evita que parezca que la fila superior está cortada.
 */
#content-container {
    clear: both !important;
}

#navi2-container {
    clear: both !important;

    min-height: 39px !important;

    margin-top: 0 !important;

    overflow: visible !important;
}

#navi2 {
    overflow: visible !important;
}

#navi2 ul {
    min-height: 31px !important;
}

#navi2 form {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   V4 - /USER/ME: AVATAR + BASE + MOTTO
   ========================================================= */

#new-personal-info {
    overflow: hidden !important;
}

/*
 * La base sigue siendo el sprite original de HabboExtreme.
 * El avatar se coloca por encima, sin sobresalir del panel inferior.
 */
#new-personal-info #habbo-plate {
    top: 42px !important;
    left: 15px !important;

    width: 96px !important;
    height: 138px !important;

    overflow: visible !important;

    background-image: url("images/personal_info/info_habbo_plate.png") !important;
    background-repeat: no-repeat !important;
    background-position: 2px -162px !important;
}

#new-personal-info #habbo-plate .hx-avatar-link {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 96px !important;
    height: 116px !important;

    overflow: visible !important;

    text-align: center !important;
}

#new-personal-info #habbo-plate .hx-avatar-image {
    position: absolute !important;

    left: 50% !important;
    bottom: 48px !important;

    width: auto !important;
    height: auto !important;
    max-width: none !important;

    transform: translateX(-50%) !important;

    image-rendering: auto !important;
}

/*
 * Motto original: no escalar la imagen.
 */
#new-personal-info #habbo-info #motto-container {
    width: 323px !important;
    height: 24px !important;

    margin-left: 120px !important;

    padding: 2px 3px 4px 3px !important;

    background-image: url("images/personal_info/motto_field.png") !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
}


/* =========================================================
   V4 - BOTÓN ENTRAR
   ========================================================= */

#new-personal-info .enter-hotel-btn {
    top: 12px !important;
    right: 20px !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {

    #navi {
        width: 100% !important;

        display: flex !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    #navi li {
        flex: 0 0 auto !important;
    }

}


/* =========================================================
   V5 - CENTRADO GENERAL DE /USER/ME
   ========================================================= */

/*
 * HabboExtreme original reserva 930px porque varias páginas usan
 * una tercera columna. /user/me de Habbla solo usa 460 + 310px.
 * Centramos esas dos columnas dentro del ancho del sitio.
 */
body#habbla-app #container {
    width: 930px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body#habbla-app #content {
    width: 770px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 5px !important;

    clear: both !important;
}

/*
 * El footer sigue exactamente el mismo eje del contenido.
 */
body#habbla-app #footer {
    width: 770px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 4px !important;
    padding-right: 4px !important;
}


/* =========================================================
   V5 - KEKO A TAMAÑO NORMAL / SIN PIXELADO
   ========================================================= */

#new-personal-info #habbo-plate {
    top: 48px !important;
    left: 15px !important;

    width: 96px !important;
    height: 138px !important;

    overflow: visible !important;

    background-image: url("images/personal_info/info_habbo_plate.png") !important;
    background-repeat: no-repeat !important;
    background-position: 2px -162px !important;
}

#new-personal-info #habbo-plate .hx-avatar-link {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 96px !important;
    height: 110px !important;

    overflow: visible !important;
}

#new-personal-info #habbo-plate .hx-avatar-image {
    position: absolute !important;

    left: 50% !important;
    top: -39px !important;
    bottom: auto !important;

    width: auto !important;
    height: 110px !important;
    max-width: none !important;
    max-height: none !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;

    /*
     * Suavizado normal del navegador.
     * No usamos image-rendering: pixelated.
     */
    image-rendering: auto !important;

    -webkit-font-smoothing: antialiased;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   V5 - BOTÓN VERDE SUPERIOR
   ========================================================= */

#ibxs-online {
    position: absolute !important;

    left: 500px !important;
    top: 15px !important;

    width: 300px !important;
    height: 38px !important;

    display: flex !important;
    align-items: center !important;

    padding: 5px 8px !important;

    background: #fff !important;

    border-radius: 5px !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    text-align: center !important;

    overflow: visible !important;
}

#ibxs-online .hx-top-enter-button {
    position: relative;

    flex: 0 0 156px;

    height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px 0 13px;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #63c800 0%,
            #4db300 48%,
            #319800 49%,
            #1f8500 100%
        ) !important;

    border: 2px solid #155f00 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 1px 0 rgba(0,0,0,.35);

    font: bold 10px/23px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.35);

    white-space: nowrap;
}

#ibxs-online .hx-top-enter-button:hover {
    filter: brightness(1.08);
}

#ibxs-online .hx-top-enter-arrow {
    position: absolute;

    right: 8px;
    top: 4px;

    color: #d9ffba;

    font-size: 16px;
    line-height: 16px;
}

#ibxs-online .hx-top-online-count {
    flex: 1 1 auto;

    display: block !important;

    margin: 0 !important;
    padding: 0 0 0 10px !important;

    color: #444 !important;
    background: transparent !important;

    font: normal 10px/16px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap;
}


/* =========================================================
   V5 - AJUSTE DEL PANEL PERSONAL
   ========================================================= */

#new-personal-info {
    width: 460px !important;
}

#new-personal-info .enter-hotel-btn {
    top: 15px !important;
    right: 20px !important;
}

#new-personal-info #habbo-info {
    clear: both !important;
}


/* =========================================================
   V5 - RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {

    body#habbla-app #container,
    body#habbla-app #content,
    body#habbla-app #footer {
        width: calc(100% - 20px) !important;
    }

    #ibxs-online {
        position: absolute !important;
        left: auto !important;
        right: 0 !important;
    }

}


/* =========================================================
   V6 - HEADER: ADMINISTRACIÓN + ENTRAR + ONLINE
   ========================================================= */

/*
 * Sustituye por completo el antiguo #ibxs-online para evitar
 * que aparezcan restos / flechas / cajas superpuestas.
 */
#ibxs-online {
    display: none !important;
}

#hx-top-actions {
    position: absolute !important;

    left: 430px !important;
    top: 15px !important;

    width: 485px !important;
    height: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 7px !important;

    z-index: 20000 !important;

    overflow: visible !important;
}


/* ADMINISTRACIÓN: a la izquierda de Entrar */
#hx-top-actions .hx-top-admin-button {
    flex: 0 0 auto;

    height: 28px !important;

    padding: 0 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #df4b4b 0%,
            #ca2727 50%,
            #b61313 51%,
            #a10d0d 100%
        ) !important;

    border: 1px solid #7e0909 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 1px 0 rgba(0,0,0,.25);

    font: bold 10px/26px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.40);

    white-space: nowrap !important;
}


/* ENTRAR A HABBLA: limpio, sin elementos encima */
#hx-top-actions .hx-top-enter-button {
    position: relative !important;

    flex: 0 0 auto;

    width: 150px !important;
    height: 28px !important;

    padding: 0 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #66ce0d 0%,
            #51b805 48%,
            #359c00 49%,
            #238500 100%
        ) !important;

    border: 2px solid #176800 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 1px 0 rgba(0,0,0,.30);

    font: bold 10px/24px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.35);

    white-space: nowrap !important;

    overflow: hidden !important;
}

#hx-top-actions .hx-top-enter-button::before,
#hx-top-actions .hx-top-enter-button::after {
    display: none !important;
    content: none !important;
}


/* ONLINE */
#hx-top-actions .hx-top-online-count {
    flex: 0 0 118px;

    height: 30px !important;

    padding: 0 8px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #444 !important;
    background: #fff !important;

    border-radius: 4px !important;

    font: normal 10px/16px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
}


/* =========================================================
   V6 - TABS3 ORIGINAL
   tabs3.png = 300x140, 5 estados de 28px:
   0   activo blanco
   28  azul normal
   56  azul hover
   84  verde normal
   112 verde hover
   ========================================================= */

#navi {
    width: 930px !important;
    height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    clear: both !important;

    overflow: visible !important;

    white-space: nowrap !important;
}

#navi li {
    float: left !important;

    height: 28px !important;

    margin: 0 5px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

#navi li a {
    float: left !important;

    height: 28px !important;

    padding: 6px 16px 0 22px !important;

    color: #fff !important;

    background-image: url("images/tabs3.png") !important;
    background-repeat: no-repeat !important;
    background-position: -10px -28px !important;

    font: normal 12px/16px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    max-width: 290px !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#navi li span {
    float: left !important;

    width: 6px !important;
    height: 28px !important;

    background-image: url("images/tabs3.png") !important;
    background-repeat: no-repeat !important;
    background-position: -4px -28px !important;
}


/* ACTIVO BLANCO */
#navi li.selected a {
    color: #000 !important;

    background-position: -10px 0 !important;

    font-weight: bold !important;
}

#navi li.selected span {
    background-position: -4px 0 !important;
}


/* AZUL HOVER */
#navi li:not(.selected):not(.hx-tab-green):hover a {
    background-position: -10px -56px !important;
}

#navi li:not(.selected):not(.hx-tab-green):hover span {
    background-position: -4px -56px !important;
}


/* TIENDA VERDE */
#navi li.hx-tab-green:not(.selected) a {
    background-position: -10px -84px !important;
}

#navi li.hx-tab-green:not(.selected) span {
    background-position: -4px -84px !important;
}

#navi li.hx-tab-green:not(.selected):hover a {
    background-position: -10px -112px !important;
}

#navi li.hx-tab-green:not(.selected):hover span {
    background-position: -4px -112px !important;
}


/* Activo no cambia al pasar el mouse */
#navi li.selected:hover a {
    background-position: -10px 0 !important;
}

#navi li.selected:hover span {
    background-position: -4px 0 !important;
}


/* =========================================================
   V6 - KEKO: BAJARLO HASTA LA BASE
   ========================================================= */

#new-personal-info #habbo-plate {
    top: 48px !important;
    left: 15px !important;

    width: 96px !important;
    height: 138px !important;

    overflow: visible !important;

    background-image: url("images/personal_info/info_habbo_plate.png") !important;
    background-repeat: no-repeat !important;
    background-position: 2px -162px !important;
}

#new-personal-info #habbo-plate .hx-avatar-link {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 96px !important;
    height: 118px !important;

    overflow: visible !important;

    text-align: center !important;
}

#new-personal-info #habbo-plate .hx-avatar-image {
    position: absolute !important;

    left: 50% !important;
    top: -4px !important;
    bottom: auto !important;

    width: auto !important;
    height: 110px !important;

    max-width: none !important;
    max-height: none !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;

    image-rendering: auto !important;

    pointer-events: none !important;
    user-select: none !important;
}


/* =========================================================
   V6 - RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {

    #hx-top-actions {
        left: auto !important;
        right: 0 !important;

        width: auto !important;
    }

    #hx-top-actions .hx-top-online-count {
        display: none !important;
    }

    #navi {
        width: 100% !important;

        display: flex !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    #navi li {
        flex: 0 0 auto !important;
    }

}


/* =========================================================
   V7 - AJUSTE FINO DEL MENÚ HABBOEXTREME
   Solo menú principal + submenu.
   ========================================================= */

/* El header original reserva 28px exactos para los tabs. */
#header {
    height: 92px !important;
    min-height: 92px !important;
}

#navi {
    position: absolute !important;

    left: 0 !important;
    bottom: 0 !important;

    width: 930px !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    clear: both !important;

    overflow: visible !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

#navi li {
    float: left !important;

    height: 28px !important;

    margin: 0 5px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    white-space: nowrap !important;
}

#navi li a {
    float: left !important;

    height: 28px !important;

    padding: 6px 16px 0 22px !important;

    color: #fff !important;

    background-image: url("images/tabs3.png") !important;
    background-repeat: no-repeat !important;
    background-position: -10px -28px !important;

    font: normal 12px/16px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;
}

#navi li span {
    float: left !important;

    width: 6px !important;
    height: 28px !important;

    background-image: url("images/tabs3.png") !important;
    background-repeat: no-repeat !important;
    background-position: -4px -28px !important;
}


/* ACTIVO:
   ligeramente más alto visualmente, como el original,
   sin deformar el sprite. */
#navi li.selected {
    position: relative !important;

    z-index: 20 !important;

    margin-top: -2px !important;
}

#navi li.selected a {
    height: 30px !important;

    padding-top: 7px !important;

    color: #111 !important;

    background-position: -10px 0 !important;

    font-weight: bold !important;
}

#navi li.selected span {
    height: 30px !important;

    background-position: -4px 0 !important;
}


/* NORMAL HOVER */
#navi li:not(.selected):not(.hx-tab-green):hover a {
    background-position: -10px -56px !important;
}

#navi li:not(.selected):not(.hx-tab-green):hover span {
    background-position: -4px -56px !important;
}


/* TIENDA VERDE */
#navi li.hx-tab-green:not(.selected) a {
    background-position: -10px -84px !important;
}

#navi li.hx-tab-green:not(.selected) span {
    background-position: -4px -84px !important;
}

#navi li.hx-tab-green:not(.selected):hover a {
    background-position: -10px -112px !important;
}

#navi li.hx-tab-green:not(.selected):hover span {
    background-position: -4px -112px !important;
}

/* Tienda activa también queda blanca, igual que cualquier sección activa. */
#navi li.hx-tab-green.selected a {
    background-position: -10px 0 !important;
    color: #111 !important;
}

#navi li.hx-tab-green.selected span {
    background-position: -4px 0 !important;
}


/* ---------------------------------------------------------
   SUBMENÚ
   Debe tocar visualmente la fila de tabs, sin huecos.
   --------------------------------------------------------- */

#content-container {
    position: relative !important;

    clear: both !important;
}

#navi2-container {
    position: relative !important;

    width: 930px !important;
    height: 39px !important;
    min-height: 39px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: visible !important;

    background-color: transparent !important;
}

#navi2 {
    width: 930px !important;
    height: 39px !important;
    min-height: 39px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #fff !important;

    border-left: 1px solid #b8b8b8 !important;
    border-right: 1px solid #b8b8b8 !important;
    border-bottom: 1px solid #b8b8b8 !important;

    border-radius: 0 0 6px 6px !important;

    box-shadow: 0 2px 2px rgba(0,0,0,.18) !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}

#navi2 ul {
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 0 0 18px !important;

    display: flex !important;
    align-items: center !important;

    list-style: none !important;
}

#navi2 li {
    position: relative !important;

    float: none !important;

    height: 22px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;

    border-right: 1px solid #e3e3e3 !important;

    line-height: 22px !important;

    white-space: nowrap !important;
}

#navi2 li:first-child {
    padding-left: 0 !important;
    padding-right: 18px !important;
}

#navi2 li:last-child,
#navi2 li.last {
    border-right: 0 !important;
}

#navi2 li a,
#navi2 li .userlink {
    height: 22px !important;

    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;

    color: #134787 !important;

    background: transparent !important;

    border: 0 !important;

    font: normal 12px/22px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}

#navi2 li.selected a {
    color: #000 !important;

    font-weight: bold !important;
}

#navi2 li a:hover,
#navi2 li .userlink:hover {
    color: #000 !important;

    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   CONTENIDO
   Mantener una separación corta debajo del submenu.
   --------------------------------------------------------- */

#container {
    padding-top: 5px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 960px) {

    #navi,
    #navi2-container,
    #navi2 {
        width: 100% !important;
    }

    #navi {
        position: absolute !important;

        display: flex !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    #navi li {
        flex: 0 0 auto !important;
    }

    #navi2 {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    #navi2 ul {
        width: max-content !important;
        min-width: 100% !important;
    }

}


/* =========================================================
   V8 - MENÚ CENTRADO Y ALINEADO CON /USER/ME
   ========================================================= */

/*
 * /user/me usa 770px reales:
 * 460px izquierda + 310px derecha.
 * Header, tabs y submenu comparten ahora exactamente ese eje.
 */
#header {
    width: 930px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* LOGO NUEVO */
#header h1.hx-brand-logo {
    position: absolute !important;

    left: 80px !important;
    top: 14px !important;

    width: 122px !important;
    height: 37px !important;

    margin: 0 !important;
    padding: 0 !important;
}

#header h1.hx-brand-logo a {
    width: 122px !important;
    height: 37px !important;

    display: block !important;

    background: none !important;

    text-indent: 0 !important;
}

#header h1.hx-brand-logo img {
    width: 122px !important;
    height: 37px !important;

    display: block !important;

    max-width: none !important;

    image-rendering: auto !important;
}


/* ACCIONES SUPERIORES: mismas líneas izquierda/derecha del contenido */
#hx-top-actions {
    left: auto !important;
    right: 80px !important;
    top: 15px !important;

    width: auto !important;
    max-width: 555px !important;
}


/* ---------------------------------------------------------
   TABS PRINCIPALES
   --------------------------------------------------------- */

#navi {
    left: 80px !important;
    right: auto !important;
    bottom: 0 !important;

    width: 770px !important;
    height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    white-space: nowrap !important;
}


/* El ancho de cada pestaña lo da su propio texto/sprite,
   no estiramos la fila hasta 930px. */
#navi li {
    margin-right: 5px !important;
}

#navi li:last-child {
    margin-right: 0 !important;
}


/* ---------------------------------------------------------
   SUBMENÚ
   --------------------------------------------------------- */

#navi2-container {
    width: 770px !important;
    height: 39px !important;
    min-height: 39px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    background: transparent !important;
}

#navi2 {
    width: 770px !important;
    height: 39px !important;
    min-height: 39px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border-left: 1px solid #b8b8b8 !important;
    border-right: 1px solid #b8b8b8 !important;
    border-bottom: 1px solid #b8b8b8 !important;

    border-radius: 0 0 6px 6px !important;

    box-shadow: 0 2px 2px rgba(0,0,0,.18) !important;

    overflow: hidden !important;
}


/* El submenu ocupa solo lo necesario dentro de los 770px */
#navi2 ul {
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 0 0 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    list-style: none !important;
}


/* ---------------------------------------------------------
   CONTENIDO
   --------------------------------------------------------- */

body#habbla-app #content {
    width: 770px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 960px) {

    #header {
        width: calc(100% - 20px) !important;
    }

    #header h1.hx-brand-logo {
        left: 0 !important;
    }

    #hx-top-actions {
        right: 0 !important;
    }

    #navi {
        left: 0 !important;

        width: 100% !important;

        display: flex !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    #navi2-container,
    #navi2,
    body#habbla-app #content {
        width: calc(100% - 20px) !important;
    }

}


/* =========================================================
   V9 - /USER/ME PANEL SUPERIOR FINAL
   Usa geometría y sprites originales de HabboExtreme.
   ========================================================= */

/* ---------------------------------------------------------
   CONTENEDOR / ESCENA
   htlview_gb.png mide exactamente 450x143.
   No se escala ni se estira.
   --------------------------------------------------------- */

#new-personal-info {
    position: relative !important;

    width: auto !important;

    margin: 0 8px 7px 2px !important;
    padding: 143px 0 0 0 !important;

    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    background-size: 450px 143px !important;

    overflow: visible !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   KEKO + BASE
   La base es el sprite info_habbo_plate.png original.
   El avatar NO se escala: se muestra a tamaño natural.
   --------------------------------------------------------- */

#new-personal-info #habbo-plate {
    position: absolute !important;

    top: 48px !important;
    left: 15px !important;

    width: 96px !important;
    height: 138px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image: url("images/personal_info/info_habbo_plate.png") !important;
    background-repeat: no-repeat !important;
    background-position: 2px -162px !important;
    background-size: auto !important;

    text-align: center !important;

    overflow: visible !important;
}

#new-personal-info #habbo-plate .hx-avatar-link {
    position: static !important;

    width: auto !important;
    height: auto !important;

    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

#new-personal-info #habbo-plate .hx-avatar-image {
    position: static !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    object-fit: none !important;

    /*
     * Sin image-rendering: pixelated.
     * El avatar se utiliza en el tamaño que entrega avatar_imager.
     */
    image-rendering: auto !important;

    vertical-align: top !important;

    pointer-events: none !important;
    user-select: none !important;
}


/* ---------------------------------------------------------
   BOTÓN VERDE + EXPLOSIÓN
   Medidas originales de personal.css/buttons.css.
   --------------------------------------------------------- */

#new-personal-info .enter-hotel-btn {
    position: absolute !important;

    top: 15px !important;
    right: 20px !important;

    padding: 28px 0 !important;

    background-color: transparent !important;
    background-image: url("images/personal_info/orange_thing.png") !important;
    background-repeat: no-repeat !important;
    background-position: 50% 0 !important;

    overflow: visible !important;
}

#new-personal-info .enter-hotel-btn .enter-btn {
    display: block !important;

    height: 49px !important;

    white-space: nowrap !important;
}

#new-personal-info .enter-hotel-btn .enter-btn a {
    float: left !important;

    height: 49px !important;

    padding: 0 26px 0 19px !important;

    color: #fff !important;

    background-image: url("images/enter_button.png") !important;
    background-repeat: no-repeat !important;
    background-position: -9px 0 !important;

    font: normal 14px/47px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;
    text-decoration: none !important;

    position: relative !important;

    overflow: hidden !important;
}

#new-personal-info .enter-hotel-btn .enter-btn b {
    float: left !important;

    width: 9px !important;
    height: 49px !important;

    background-image: url("images/enter_button.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
}

#new-personal-info .enter-hotel-btn .enter-btn a i {
    position: absolute !important;

    right: 0 !important;
    top: 13px !important;

    width: auto !important;
    height: 1px !important;

    padding: 10px !important;

    background-image: url("images/flashy_arrow.gif") !important;
    background-repeat: no-repeat !important;
    background-position: 0 50% !important;

    font-size: 1px !important;
    line-height: 1px !important;
}

#new-personal-info .enter-hotel-btn .enter-btn:hover a {
    background-position: -9px -49px !important;
}

#new-personal-info .enter-hotel-btn .enter-btn:hover b {
    background-position: 0 -49px !important;
}


/* ---------------------------------------------------------
   MOTTO
   motto_field.png = 323x24.
   Se usa a tamaño nativo, sin estirarlo.
   --------------------------------------------------------- */

#new-personal-info #habbo-info {
    clear: both !important;

    padding-top: 10px !important;

    background-color: #7b7b71 !important;
}

#new-personal-info #habbo-info #motto-container {
    width: 323px !important;
    height: 18px !important;

    margin: 0 0 0 120px !important;
    padding: 2px 3px 4px 3px !important;

    display: flex !important;
    align-items: center !important;

    background-color: transparent !important;
    background-image: url("images/personal_info/motto_field.png") !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    background-size: auto !important;

    box-sizing: content-box !important;

    overflow: hidden !important;
}

#new-personal-info #habbo-info #motto-container strong {
    flex: 0 0 auto !important;

    height: 18px !important;

    padding: 0 10px !important;

    display: block !important;

    color: #222 !important;

    font: bold 11px/18px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
}

#new-personal-info #habbo-info #motto-container > div {
    float: none !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    height: 18px !important;

    display: block !important;

    overflow: hidden !important;
}

#new-personal-info #habbo-info #motto-container span {
    width: 100% !important;
    height: 18px !important;

    display: block !important;

    color: #555 !important;

    font: normal 11px/18px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ---------------------------------------------------------
   MONEDAS
   Conserva los iconos del sprite info_icons.png.
   --------------------------------------------------------- */

#new-personal-info #link-bar {
    width: 100% !important;

    margin: 0 !important;
    padding: 7px 0 5px 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    background-color: #7b7b71 !important;

    overflow: hidden !important;
}

#new-personal-info #link-bar li {
    float: none !important;

    margin: 0 13px 0 14px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;

    flex: 0 0 auto !important;

    color: #333 !important;

    font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;

    background-color: transparent !important;
    background-image: url("images/info_icons.png") !important;
    background-repeat: no-repeat !important;
}

#new-personal-info #link-bar li a {
    color: #333 !important;

    font-weight: normal !important;

    text-decoration: none !important;
}

#new-personal-info #link-bar li a:hover {
    text-decoration: underline !important;
}

#new-personal-info #link-bar .credits {
    padding-left: 20px !important;
    background-position: 0 -143px !important;
}

#new-personal-info #link-bar .activitypoints {
    padding-left: 18px !important;
    background-position: 0 -1070px !important;
}

#new-personal-info #link-bar .club {
    padding-left: 20px !important;
    background-position: 0 -95px !important;
}


/* ---------------------------------------------------------
   FEED
   small_icons.png original a tamaño nativo.
   --------------------------------------------------------- */

#new-personal-info #habbo-feed {
    background-color: #a0a097 !important;
}

#new-personal-info #habbo-feed ul#feed-items {
    margin: 0 !important;
    padding: 0 !important;
}

#new-personal-info #habbo-feed ul#feed-items li {
    margin: 0 !important;

    min-height: 28px !important;

    padding: 7px 5px 7px 45px !important;

    color: #333 !important;

    border-top: 1px dotted #7b7b73 !important;

    background-color: transparent !important;

    box-sizing: border-box !important;
}

#new-personal-info #habbo-feed ul#feed-items li:first-child {
    border-top: 0 !important;
}

#new-personal-info #habbo-feed ul#feed-items li.small {
    min-height: 29px !important;

    background-image: url("images/shared_icons/small_icons.png") !important;
    background-repeat: no-repeat !important;

    font: normal 10px/15px Verdana, Arial, Helvetica, sans-serif !important;
}

#new-personal-info #habbo-feed ul#feed-items li.hx-feed-welcome {
    background-position: 15px -61px !important;
}

#new-personal-info #habbo-feed ul#feed-items li.hx-feed-message {
    background-position: 15px 7px !important;
}

#new-personal-info #habbo-feed ul#feed-items li#feed-lastlogin {
    background-position: 15px -297px !important;
}


/* ---------------------------------------------------------
   REMATE INFERIOR ORIGINAL
   --------------------------------------------------------- */

#new-personal-info p.last {
    width: 100% !important;
    height: 3px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background-color: transparent !important;
    background-image: url("images/personal_info/bottom.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 520px) {

    #new-personal-info {
        margin-left: 0 !important;
        margin-right: 0 !important;

        background-position: left top !important;
    }

    #new-personal-info .enter-hotel-btn {
        right: 8px !important;
    }

    #new-personal-info #habbo-info #motto-container {
        margin-left: 105px !important;
    }

    #new-personal-info #link-bar {
        flex-wrap: wrap !important;
    }

}


/* =========================================================
   V10 - AJUSTE KEKO + ICONO REGALO
   ========================================================= */

/*
 * El avatar_imager con size=l puede devolver un lienzo grande.
 * Lo limitamos a la proporción clásica del panel sin pixelarlo.
 */
#new-personal-info #habbo-plate .hx-avatar-image {
    position: absolute !important;

    left: 50% !important;
    top: -4px !important;
    bottom: auto !important;

    width: auto !important;
    height: 110px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;

    /* No forzar pixelado */
    image-rendering: auto !important;

    pointer-events: none !important;
    user-select: none !important;
}

/*
 * Mantener el área del keko sobre la base original.
 */
#new-personal-info #habbo-plate .hx-avatar-link {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 96px !important;
    height: 118px !important;

    display: block !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   REGALO / BIENVENIDA
   Lo bajamos unos píxeles para centrarlo verticalmente
   con el texto de la fila.
   --------------------------------------------------------- */

#new-personal-info #habbo-feed ul#feed-items li.hx-feed-welcome {
    background-position: 15px -57px !important;
}


/* =========================================================
   V11 - /USER/ME PARTE INFERIOR
   Amigos + Referidos + Discord + Placas + Footer
   ========================================================= */


/* ---------------------------------------------------------
   HABBLETS INFERIORES
   --------------------------------------------------------- */

#column1 .habblet-container,
#column2 .habblet-container {
    margin-bottom: 7px !important;
}

#column1 .cbb,
#column2 .cbb {
    width: 100% !important;

    margin: 0 !important;

    background: #fff !important;

    border-radius: 6px !important;

    box-shadow: none !important;

    overflow: hidden !important;
}

#column1 .cbb h2.title,
#column2 .cbb h2.title {
    min-height: 31px !important;

    margin: 0 !important;
    padding: 7px 10px 6px !important;

    color: #fff !important;

    font: bold 12px/18px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;
}

#column1 .cbb .box-content,
#column2 .cbb .box-content {
    padding: 9px 12px !important;

    color: #333 !important;
    background: #fff !important;

    font: normal 10px/15px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   AMIGOS EN LÍNEA
   --------------------------------------------------------- */

.hx-me-friends .box-content {
    min-height: 66px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hx-me-friends .hx-empty {
    width: 100% !important;

    margin: 0 !important;
    padding: 14px 8px !important;

    color: #777 !important;

    font: italic 10px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;
}

.hx-me-friends .habbla-online-friends-list {
    width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;

    gap: 4px !important;

    align-items: center !important;
    justify-content: flex-start !important;
}

.hx-me-friends .habbla-friend-avatar {
    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #eef0ee !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    border: 1px solid #b9b9b9 !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    cursor: pointer !important;
}


/* ---------------------------------------------------------
   REFERIDOS
   --------------------------------------------------------- */

.hx-referrals-habblet .box-content {
    padding: 9px 12px 10px !important;
}

.hx-referrals-habblet p {
    margin: 0 0 7px !important;
    padding: 0 !important;
}

.hx-referrals-lead {
    color: #222 !important;

    font-weight: bold !important;
}

.hx-referrals-copy {
    color: #555 !important;
}

.hx-referrals-habblet .hx-warning {
    margin-top: 3px !important;
    margin-bottom: 9px !important;

    color: #d00000 !important;

    font-size: 10px !important;
    line-height: 14px !important;
}

.hx-referral-row {
    width: 100% !important;

    display: flex !important;
    align-items: stretch !important;

    gap: 5px !important;

    margin: 0 0 5px !important;
}

.hx-referral-input {
    flex: 1 1 auto !important;

    min-width: 0 !important;
}

.hx-referral-input input {
    width: 100% !important;
    height: 28px !important;

    margin: 0 !important;
    padding: 4px 7px !important;

    color: #444 !important;
    background: #fff !important;

    border: 1px solid #888 !important;
    border-radius: 2px !important;

    box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;

    font: normal 10px/18px Verdana, Arial, Helvetica, sans-serif !important;

    box-sizing: border-box !important;
}


/* Botón Copiar: sprite verde original new_button.png */
.hx-copy-button {
    position: relative !important;

    flex: 0 0 88px !important;

    height: 28px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    color: #fff !important;

    background-color: #38a500 !important;
    background-image: url("images/new_button.png") !important;
    background-repeat: no-repeat !important;
    background-position: -3px -150px !important;

    border: 0 !important;
    border-radius: 3px !important;

    box-shadow: none !important;

    font: bold 10px/13px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.30) !important;

    cursor: pointer !important;

    overflow: hidden !important;
}

.hx-copy-button:hover {
    background-position: -3px -175px !important;
}


/* Recompensa */
.hx-referral-reward-form {
    margin: 0 !important;
    padding: 0 !important;
}

.hx-reward-button {
    width: 100% !important;
    min-height: 29px !important;

    margin: 0 !important;
    padding: 5px 10px !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #65c929 0%,
            #4cb311 48%,
            #399b04 49%,
            #2d8900 100%
        ) !important;

    border: 1px solid #287600 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35) !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
}

.hx-reward-button.disabled,
.hx-reward-button:disabled {
    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #b6df96,
            #91ce69
        ) !important;

    border-color: #7db757 !important;

    opacity: 1 !important;

    cursor: default !important;

    text-shadow: none !important;
}


/* ---------------------------------------------------------
   ÚLTIMAS PLACAS
   --------------------------------------------------------- */

.hx-badges-habblet .box-content {
    padding: 9px 10px 8px !important;
}

.hx-badges-grid {
    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 6px !important;
}

.hx-badge-item {
    min-width: 0 !important;

    padding: 5px 3px 4px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    color: #555 !important;
    background: #f4f4f4 !important;

    border: 1px solid #d5d5d5 !important;

    text-align: center !important;
}

.hx-badge-preview {
    width: 40px !important;
    height: 40px !important;

    margin: 0 0 3px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #888 !important;
    background: #fff !important;

    border: 1px dotted #bcbcbc !important;

    font: bold 13px/40px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-badge-item span {
    width: 100% !important;

    overflow: hidden !important;

    color: #555 !important;

    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.hx-badges-footer {
    margin-top: 7px !important;

    text-align: right !important;
}

.hx-badges-footer a {
    color: #f66200 !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;
}

.hx-badges-footer a:hover {
    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   DISCORD - HABBOEXTREME STYLE
   --------------------------------------------------------- */

.hx-discord-habblet .box-content {
    padding: 8px !important;
}

.hx-discord-habblet .make-discord-widget {
    width: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;

    color: #333 !important;
    background: #fff !important;

    border: 1px solid #b9b9b9 !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-discord-habblet .make-discord-server {
    min-height: 29px !important;

    padding: 0 9px !important;

    display: flex !important;
    align-items: center !important;

    color: #444 !important;

    background:
        linear-gradient(
            to bottom,
            #f4f4f4,
            #e8e8e8
        ) !important;

    border-bottom: 1px solid #c7c7c7 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-discord-habblet .make-discord-users {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;

    padding: 4px 8px !important;

    overflow-y: auto !important;

    background: #fff !important;
}

.hx-discord-habblet .make-discord-user {
    min-height: 36px !important;

    padding: 3px 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    border-bottom: 1px solid #e5e5e5 !important;
}

.hx-discord-habblet .make-discord-user:last-child {
    border-bottom: 0 !important;
}

.hx-discord-habblet .make-discord-avatar-wrapper {
    width: 29px !important;
    height: 29px !important;

    flex: 0 0 29px !important;
}

.hx-discord-habblet .make-discord-avatar {
    width: 29px !important;
    height: 29px !important;

    display: block !important;

    object-fit: cover !important;

    border: 1px solid #aaa !important;
    border-radius: 2px !important;
}

.hx-discord-habblet .make-discord-status {
    right: -2px !important;
    bottom: -2px !important;

    width: 8px !important;
    height: 8px !important;

    border: 1px solid #fff !important;
}

.hx-discord-habblet .make-discord-data {
    min-width: 0 !important;
}

.hx-discord-habblet .make-discord-data strong {
    color: #222 !important;

    font: bold 10px/13px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-discord-habblet .make-discord-data small {
    margin-top: 0 !important;

    color: #777 !important;

    font: normal 8px/11px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-discord-habblet .make-discord-loading,
.hx-discord-habblet .make-discord-empty {
    min-height: 100px !important;

    color: #777 !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}


/* Botón Discord usando estilo clásico verde */
.hx-discord-habblet .make-discord-join {
    width: 145px !important;
    min-height: 25px !important;

    margin: 6px auto !important;
    padding: 4px 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background-color: #38a500 !important;
    background-image: url("images/new_button.png") !important;
    background-repeat: no-repeat !important;
    background-position: -3px -150px !important;

    border: 0 !important;
    border-radius: 3px !important;

    box-shadow: none !important;

    font: bold 10px/16px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.30) !important;
}

.hx-discord-habblet .make-discord-join:hover {
    background-position: -3px -175px !important;

    filter: none !important;
}


/* Scroll clásico compacto */
.hx-discord-habblet .make-discord-users::-webkit-scrollbar {
    width: 7px !important;
}

.hx-discord-habblet .make-discord-users::-webkit-scrollbar-track {
    background: #eee !important;
}

.hx-discord-habblet .make-discord-users::-webkit-scrollbar-thumb {
    background: #8b8b8b !important;

    border-radius: 0 !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

#footer.hx-classic-footer {
    clear: both !important;

    width: 770px !important;

    margin: 4px auto 18px !important;
    padding: 8px 0 0 !important;

    color: #777 !important;
    background: transparent !important;

    border-top: 1px solid rgba(0,0,0,.08) !important;

    font: normal 9px/13px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;
}

#footer.hx-classic-footer p {
    margin: 0 !important;
    padding: 1px 0 !important;
}

#footer.hx-classic-footer .hx-footer-links {
    margin-bottom: 2px !important;
}

#footer.hx-classic-footer .hx-footer-links span {
    padding: 0 6px !important;

    color: #aaa !important;
}

#footer.hx-classic-footer a {
    color: #333 !important;

    text-decoration: none !important;
}

#footer.hx-classic-footer a:hover {
    text-decoration: underline !important;
}

#footer.hx-classic-footer .hx-footer-copy,
#footer.hx-classic-footer .hx-footer-legal {
    color: #888 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 960px) {

    #footer.hx-classic-footer {
        width: calc(100% - 20px) !important;
    }

}


/* =========================================================
   V12 - SEPARACIÓN DE COLUMNAS + BOTONES CLÁSICOS
   ========================================================= */

/* ---------------------------------------------------------
   COLUMNAS
   Antes 460 + 310 ocupaban los 770px completos y las cajas
   quedaban literalmente pegadas. Conservamos el ancho total
   original, pero reservamos 8px reales entre ambas columnas.
   --------------------------------------------------------- */

body#habbla-app #content {
    width: 770px !important;
}

body#habbla-app #column1 {
    width: 460px !important;

    padding-right: 8px !important;

    box-sizing: border-box !important;
}

body#habbla-app #column2 {
    width: 310px !important;

    padding-left: 0 !important;

    box-sizing: border-box !important;
}

/* Las cajas respetan el ancho disponible de su columna. */
body#habbla-app #column1 > .habblet-container,
body#habbla-app #column2 > .habblet-container {
    width: 100% !important;
}

body#habbla-app #column1 .cbb,
body#habbla-app #column2 .cbb {
    width: 100% !important;
}

/*
 * El panel personal usa el fondo de 450px,
 * que ahora calza prácticamente perfecto dentro de los 452px útiles.
 */
body#habbla-app #column1 #new-personal-info {
    width: 452px !important;

    margin-right: 0 !important;
}


/* ---------------------------------------------------------
   COPIAR CÓDIGO
   Botón entero, sin recorte del sprite.
   --------------------------------------------------------- */

.hx-referral-row {
    min-height: 32px !important;

    align-items: stretch !important;
}

.hx-referral-input input {
    height: 32px !important;

    padding: 5px 8px !important;

    line-height: 20px !important;
}

.hx-copy-button {
    position: relative !important;

    flex: 0 0 94px !important;

    width: 94px !important;
    height: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #69cc11 0%,
            #53b807 47%,
            #399e00 48%,
            #258500 100%
        ) !important;

    border: 2px solid #195f00 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 1px 0 rgba(0,0,0,.25) !important;

    font: bold 10px/12px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.35) !important;

    white-space: normal !important;

    cursor: pointer !important;

    overflow: hidden !important;
}

.hx-copy-button:hover {
    background:
        linear-gradient(
            to bottom,
            #78d823 0%,
            #61c512 47%,
            #46aa05 48%,
            #319300 100%
        ) !important;
}

.hx-copy-button:active {
    transform: translateY(1px);
}


/* ---------------------------------------------------------
   BOTÓN RECOMPENSA
   --------------------------------------------------------- */

.hx-reward-button {
    min-height: 32px !important;

    padding: 6px 12px !important;

    line-height: 14px !important;
}


/* ---------------------------------------------------------
   DISCORD: UNIRSE AL SERVIDOR
   Botón completo, centrado y sin sprite cortado.
   --------------------------------------------------------- */

.hx-discord-habblet .make-discord-join {
    width: 170px !important;
    height: 32px !important;
    min-height: 32px !important;

    margin: 9px auto !important;
    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #69cc11 0%,
            #53b807 47%,
            #399e00 48%,
            #258500 100%
        ) !important;

    border: 2px solid #195f00 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 1px 0 rgba(0,0,0,.25) !important;

    font: bold 10px/28px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;
    text-decoration: none !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.35) !important;

    white-space: nowrap !important;

    overflow: hidden !important;
}

.hx-discord-habblet .make-discord-join:hover {
    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #78d823 0%,
            #61c512 47%,
            #46aa05 48%,
            #319300 100%
        ) !important;

    text-decoration: none !important;

    filter: none !important;
}

.hx-discord-habblet .make-discord-join:active {
    transform: translateY(1px);
}


/* ---------------------------------------------------------
   AIRE ENTRE HABBLETS
   --------------------------------------------------------- */

#column1 .habblet-container + .habblet-container,
#column2 .habblet-container + .habblet-container {
    margin-top: 8px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 960px) {

    body#habbla-app #column1,
    body#habbla-app #column2 {
        width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body#habbla-app #column1 #new-personal-info {
        width: 100% !important;
    }

}


/* =========================================================
   V13 - COMMUNITY / ARTICLES
   Basado en la estructura original News.php de HabboExtreme.
   ========================================================= */


/* ---------------------------------------------------------
   LAYOUT NEWS: 210 + 560 = 770px
   --------------------------------------------------------- */

.hx-news-page {
    width: 770px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: block !important;

    text-align: left !important;
}

.hx-news-column-archive {
    float: left !important;

    width: 210px !important;

    margin: 0 !important;
    padding: 0 8px 0 0 !important;

    box-sizing: border-box !important;
}

.hx-news-column-article {
    float: left !important;

    width: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   HABBLETS NEWS
   --------------------------------------------------------- */

.hx-news-page .habblet-container {
    width: 100% !important;

    margin: 0 0 8px !important;
    padding: 0 !important;
}

.hx-news-page .cbb {
    width: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;

    background: #fff !important;

    border-radius: 6px !important;
}

.hx-news-page .cbb.default h2.title {
    background: #f66200 !important;
}

.hx-news-page .cbb h2.title {
    min-height: 31px !important;

    margin: 0 !important;
    padding: 6px 10px !important;

    color: #fff !important;

    font: bold 12px/19px Verdana, Arial, Helvetica, sans-serif !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   ARCHIVO DE NOTICIAS
   --------------------------------------------------------- */

.hx-news-page #article-archive {
    padding: 7px !important;

    color: #333 !important;
    background: #fff !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-news-page #article-archive ul {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.hx-news-page #article-archive ul li {
    margin: 0 !important;
    padding: 6px 4px 7px !important;

    border-bottom: 1px dashed #aaa !important;

    background: transparent !important;
}

.hx-news-page #article-archive ul li:last-child {
    border-bottom: 0 !important;
}

.hx-news-page #article-archive ul li.selected {
    background: #f3f3f3 !important;
}

.hx-news-page #article-archive h2 {
    margin: 0 !important;
    padding: 0 0 2px !important;

    border: 0 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-news-page #article-archive h2 a {
    display: block !important;

    color: #000 !important;

    text-decoration: none !important;

    overflow: hidden !important;

    white-space: normal !important;
}

.hx-news-page #article-archive h2 a:hover {
    color: #f66200 !important;

    text-decoration: underline !important;
}

.hx-archive-meta {
    color: #999 !important;

    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-news-empty {
    margin: 0 !important;
    padding: 10px 4px !important;

    color: #777 !important;

    font-style: italic !important;
}


/* Paginación clásica */
.hx-news-page #article-paging {
    min-height: 18px !important;

    margin-top: 5px !important;
    padding: 6px 2px 2px !important;

    border-top: 1px solid #ddd !important;
}

.hx-news-page #article-paging a {
    color: #f66200 !important;

    font: normal 9px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;
}

.hx-news-page #article-paging a:hover {
    text-decoration: underline !important;
}

.hx-news-page #article-paging a.newer {
    float: left !important;
}

.hx-news-page #article-paging a.older {
    float: right !important;
}

.hx-news-index-link {
    padding: 6px 3px 2px !important;

    border-top: 1px solid #ddd !important;

    text-align: right !important;
}

.hx-news-index-link a {
    color: #f66200 !important;

    font-size: 9px !important;

    text-decoration: none !important;
}

.hx-news-index-link a:hover {
    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   ARTÍCULO
   Valores tomados del CSS clásico:
   título naranja, meta gris + borde naranja.
   --------------------------------------------------------- */

.hx-news-page #article-wrapper {
    min-height: 170px !important;

    padding: 10px 12px 14px !important;

    color: #333 !important;
    background: #fff !important;

    font: normal 10px/16px Verdana, Arial, Helvetica, sans-serif !important;

    overflow: hidden !important;
}

.hx-news-page #article-wrapper h2 {
    margin: 0 0 4px !important;
    padding: 0 !important;

    color: #f60 !important;

    font: bold 16px/20px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-news-page #article-wrapper .article-meta {
    margin: 0 0 8px !important;
    padding: 7px 0 0 !important;

    color: #959699 !important;

    border-top: 1px solid #f60 !important;

    font: normal 9px/13px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-news-page #article-wrapper p.summary {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: #333 !important;

    font-weight: bold !important;
}

.hx-news-page #article-wrapper img.article-image {
    float: right !important;

    width: 175px !important;
    max-width: 175px !important;
    height: 110px !important;

    margin: 0 0 10px 12px !important;

    display: block !important;

    object-fit: cover !important;

    border: 1px solid #aaa !important;

    image-rendering: auto !important;
}

.hx-news-page #article-wrapper .article-body {
    color: #333 !important;

    font: normal 10px/16px Verdana, Arial, Helvetica, sans-serif !important;

    word-wrap: break-word !important;
}

.hx-news-page #article-wrapper .article-body p {
    margin: 0 !important;
    padding: 0 0 9px !important;
}

.hx-news-page #article-wrapper .article-body img {
    max-width: 100% !important;
    height: auto !important;

    image-rendering: auto !important;
}

.hx-news-page #article-wrapper .article-body a {
    color: #f66200 !important;
}

.hx-news-page #article-wrapper .article-body ul,
.hx-news-page #article-wrapper .article-body ol {
    margin: 0 0 10px 20px !important;
    padding: 0 !important;
}

.hx-news-page #article-wrapper .article-body ul li {
    list-style: disc !important;
}

.hx-news-page #article-wrapper .article-body ol li {
    list-style: decimal !important;
}

.hx-news-page #article-wrapper .article-author {
    clear: both !important;

    margin-top: 10px !important;

    font-weight: bold !important;
}

.hx-news-read-more {
    clear: both !important;

    margin: 10px 0 0 !important;
    padding: 7px 0 0 !important;

    border-top: 1px dashed #bbb !important;

    text-align: right !important;
}

.hx-news-read-more a {
    color: #f66200 !important;

    font-weight: bold !important;

    text-decoration: none !important;
}

.hx-news-read-more a:hover {
    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   REACCIONES / COMENTARIOS
   Se conserva toda la funcionalidad Livewire, solo se
   neutraliza el aspecto moderno dentro del habblet.
   --------------------------------------------------------- */

.hx-article-social {
    width: 100% !important;

    margin-top: 8px !important;
}

.hx-article-social .box-content {
    padding: 10px 12px !important;

    color: #333 !important;
    background: #fff !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
}

.hx-article-social .rounded,
.hx-article-social .rounded-md,
.hx-article-social .rounded-lg,
.hx-article-social .rounded-xl {
    border-radius: 2px !important;
}

.hx-article-social button {
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-article-social input,
.hx-article-social textarea {
    border: 1px solid #888 !important;
    border-radius: 2px !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   NO USAR ARTICLE CARD MODERNA EN /ARTICLES
   --------------------------------------------------------- */

.hx-news-page .make-news-card {
    width: auto !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 820px) {

    .hx-news-page {
        width: 100% !important;
    }

    .hx-news-column-archive,
    .hx-news-column-article {
        float: none !important;

        width: 100% !important;

        padding-right: 0 !important;
    }

    .hx-news-page #article-wrapper img.article-image {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;

        margin: 0 0 10px !important;
    }

}


/* =========================================================
   V14 - ARTICLES: REACCIONES + COMENTARIOS CLÁSICOS
   ========================================================= */

/* ---------------------------------------------------------
   REACCIONES
   --------------------------------------------------------- */

.hx-reactions-shell {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #333 !important;
    background: transparent !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

/* Neutraliza tarjetas modernas internas */
.hx-reactions-shell [class*="rounded"] {
    border-radius: 2px !important;
}

.hx-reactions-shell [class*="shadow"] {
    box-shadow: none !important;
}

.hx-reactions-shell [class*="gap-"] {
    gap: 4px !important;
}

.hx-reactions-shell [class*="p-4"],
.hx-reactions-shell [class*="p-3"] {
    padding: 5px !important;
}

/* Botones de reacciones */
.hx-reactions-shell button {
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 2px 6px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #222 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #eeeeee 100%
        ) !important;

    border: 1px solid #aeb4b9 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 20px !important;

    cursor: pointer !important;
}

.hx-reactions-shell button:hover {
    background:
        linear-gradient(
            to bottom,
            #fff9d8 0%,
            #f4e7a5 100%
        ) !important;

    border-color: #c9a72e !important;
}

/* Si aparece un botón textual como "Añadir", queda compacto */
.hx-reactions-shell button:first-of-type {
    width: auto !important;
    min-width: 58px !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #f6bd18 0%,
            #e3a100 100%
        ) !important;

    border-color: #c58a00 !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.2) !important;
}


/* ---------------------------------------------------------
   COMENTARIOS
   --------------------------------------------------------- */

.hx-comments-shell {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #333 !important;
    background: transparent !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

/* Quitar aspecto de tarjeta moderna */
.hx-comments-shell [class*="rounded"] {
    border-radius: 2px !important;
}

.hx-comments-shell [class*="shadow"] {
    box-shadow: none !important;
}

.hx-comments-shell [class*="p-6"],
.hx-comments-shell [class*="p-5"],
.hx-comments-shell [class*="p-4"] {
    padding: 6px !important;
}

.hx-comments-shell [class*="space-y-"] > * + * {
    margin-top: 6px !important;
}


/* El encabezado interior deja de ser una segunda barra naranja */
.hx-comments-shell h1,
.hx-comments-shell h2,
.hx-comments-shell h3,
.hx-comments-shell h4 {
    margin: 0 0 5px !important;
    padding: 0 !important;

    color: #333 !important;
    background: transparent !important;

    border: 0 !important;

    font: bold 11px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;
}


/* Textos auxiliares */
.hx-comments-shell p,
.hx-comments-shell label,
.hx-comments-shell span {
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-comments-shell p {
    margin: 0 0 5px !important;

    color: #666 !important;

    font-size: 9px !important;
    line-height: 13px !important;
}


/* Textarea mucho más clásica y compacta */
.hx-comments-shell textarea {
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 130px !important;

    margin: 3px 0 4px !important;
    padding: 6px !important;

    color: #333 !important;
    background: #fff !important;

    border: 1px solid #8c8c8c !important;
    border-radius: 2px !important;

    box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    resize: vertical !important;
}


/* Contador y tip pequeño */
.hx-comments-shell [class*="text-gray"],
.hx-comments-shell [class*="text-slate"] {
    color: #888 !important;

    font-size: 9px !important;
}


/* Botón publicar */
.hx-comments-shell button {
    width: auto !important;
    min-width: 120px !important;
    height: 29px !important;
    min-height: 29px !important;

    margin: 4px 0 0 !important;
    padding: 0 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #65c929 0%,
            #4cb311 48%,
            #399b04 49%,
            #2d8900 100%
        ) !important;

    border: 1px solid #287600 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35) !important;

    font: bold 10px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;

    cursor: pointer !important;
}

.hx-comments-shell button:hover {
    background:
        linear-gradient(
            to bottom,
            #73d43b 0%,
            #59c01b 48%,
            #45aa0a 49%,
            #369600 100%
        ) !important;
}


/* ---------------------------------------------------------
   SEPARACIÓN ENTRE ARTÍCULO / REACCIONES / COMENTARIOS
   --------------------------------------------------------- */

.hx-news-show-page .hx-article-social {
    margin-top: 8px !important;
}

.hx-news-show-page .hx-article-social + .hx-article-social {
    margin-top: 8px !important;
}


/* ---------------------------------------------------------
   ARTÍCULO: pequeños ajustes visuales
   --------------------------------------------------------- */

.hx-news-show-page #article-wrapper {
    padding-bottom: 12px !important;
}

.hx-news-show-page #article-wrapper h2 {
    font-size: 15px !important;
    line-height: 19px !important;
}

.hx-news-show-page #article-wrapper .article-body {
    line-height: 15px !important;
}



/* =========================================================
   V15 - ARTICLES FINAL
   Reacciones + Comentarios + botón eliminar + espaciados
   ========================================================= */


/* ---------------------------------------------------------
   REACCIONES
   Más compactas y neutras. El amarillo queda solo para hover.
   --------------------------------------------------------- */

.hx-reactions-shell {
    padding: 0 !important;
}

.hx-reactions-shell button,
.hx-reactions-shell button:first-of-type {
    width: auto !important;
    min-width: 34px !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 2px 7px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #333 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #eeeeee 100%
        ) !important;

    border: 1px solid #aeb4b9 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    font: bold 10px/18px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;

    cursor: pointer !important;
}

.hx-reactions-shell button:hover,
.hx-reactions-shell button:first-of-type:hover {
    color: #222 !important;

    background:
        linear-gradient(
            to bottom,
            #fff7cf 0%,
            #f1dfa0 100%
        ) !important;

    border-color: #c6a02a !important;
}

/* Si el componente marca una reacción como activa mediante clases
   amarillas/naranjas, la dejamos ligeramente resaltada. */
.hx-reactions-shell button[class*="yellow"],
.hx-reactions-shell button[class*="amber"],
.hx-reactions-shell button[class*="orange"],
.hx-reactions-shell button[aria-pressed="true"] {
    background:
        linear-gradient(
            to bottom,
            #ffe47a 0%,
            #e9bf28 100%
        ) !important;

    border-color: #b88b00 !important;
}


/* ---------------------------------------------------------
   COMENTARIOS - formulario compacto
   --------------------------------------------------------- */

.hx-comments-shell {
    padding: 0 !important;
}

/* Neutralizar grandes separaciones Tailwind del componente */
.hx-comments-shell [class*="mt-"],
.hx-comments-shell [class*="my-"] {
    margin-top: 8px !important;
}

.hx-comments-shell [class*="mb-"] {
    margin-bottom: 6px !important;
}

.hx-comments-shell [class*="py-"] {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.hx-comments-shell [class*="gap-"] {
    gap: 5px !important;
}

.hx-comments-shell textarea {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 120px !important;

    margin: 4px 0 !important;
    padding: 6px 7px !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   BOTÓN PUBLICAR
   --------------------------------------------------------- */

.hx-comments-shell button:not(:has(svg)):not([title*="delete" i]):not([aria-label*="delete" i]):not([title*="eliminar" i]):not([aria-label*="eliminar" i]) {
    width: auto !important;
    min-width: 135px !important;
    height: 29px !important;
    min-height: 29px !important;

    margin: 4px 0 0 !important;
    padding: 0 13px !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #65c929 0%,
            #4cb311 48%,
            #399b04 49%,
            #2d8900 100%
        ) !important;

    border: 1px solid #287600 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35) !important;

    font: bold 10px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
}


/* ---------------------------------------------------------
   COMENTARIOS PUBLICADOS
   --------------------------------------------------------- */

/* Reducir el aspecto de "tarjeta moderna" */
.hx-comments-shell [class*="bg-gray"],
.hx-comments-shell [class*="bg-slate"],
.hx-comments-shell [class*="bg-zinc"] {
    background: #f5f5f5 !important;
}

.hx-comments-shell [class*="border"] {
    border-color: #d4d4d4 !important;
}

.hx-comments-shell img {
    image-rendering: auto !important;
}

/* Avatar de comentario */
.hx-comments-shell img[class*="w-"],
.hx-comments-shell img[class*="h-"] {
    max-width: 48px !important;
    max-height: 48px !important;

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   BOTÓN ELIMINAR
   El botón con icono deja de heredar el verde del botón publicar.
   --------------------------------------------------------- */

.hx-comments-shell button:has(svg),
.hx-comments-shell button[title*="delete" i],
.hx-comments-shell button[aria-label*="delete" i],
.hx-comments-shell button[title*="remove" i],
.hx-comments-shell button[aria-label*="remove" i],
.hx-comments-shell button[title*="eliminar" i],
.hx-comments-shell button[aria-label*="eliminar" i] {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;

    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #d95b55 0%,
            #b82922 100%
        ) !important;

    border: 1px solid #8e1712 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30) !important;

    font-size: 12px !important;
    line-height: 24px !important;

    text-shadow: none !important;

    overflow: hidden !important;
}

.hx-comments-shell button:has(svg):hover,
.hx-comments-shell button[title*="delete" i]:hover,
.hx-comments-shell button[aria-label*="delete" i]:hover,
.hx-comments-shell button[title*="remove" i]:hover,
.hx-comments-shell button[aria-label*="remove" i]:hover,
.hx-comments-shell button[title*="eliminar" i]:hover,
.hx-comments-shell button[aria-label*="eliminar" i]:hover {
    background:
        linear-gradient(
            to bottom,
            #eb6a63 0%,
            #ca342c 100%
        ) !important;
}

.hx-comments-shell button:has(svg) svg {
    width: 13px !important;
    height: 13px !important;

    color: #fff !important;
}


/* ---------------------------------------------------------
   ESPACIADO FINAL
   --------------------------------------------------------- */

.hx-news-show-page .hx-article-social {
    margin-top: 7px !important;
}

.hx-news-show-page .hx-article-social .box-content {
    padding: 8px 10px !important;
}

.hx-news-show-page .hx-comments-shell > *:first-child {
    margin-top: 0 !important;
}

.hx-news-show-page .hx-comments-shell > *:last-child {
    margin-bottom: 0 !important;
}


/* Footer un poco más cerca del final del artículo */
.hx-news-show-page + #column-footer {
    margin-top: 0 !important;
}



/* =========================================================
   V19 - ARTICLE COMMENTS REAL
   ========================================================= */
.hx-comments-shell,
.hx-comments-component {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
.hx-comments-component {
    position: relative !important;
    width: 100% !important;
    color: #333 !important;
    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}
.hx-comment-form {
    margin: 0 !important;
    padding: 4px 4px 5px !important;
}
.hx-comment-form-intro {
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #666 !important;
    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}
.hx-comment-form form { margin: 0 !important; padding: 0 !important; }
.hx-comment-textarea {
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 95px !important;
    margin: 0 0 4px !important;
    padding: 5px 7px !important;
    color: #333 !important;
    background: #fff !important;
    border: 1px solid #8c8c8c !important;
    border-radius: 2px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;
    box-sizing: border-box !important;
    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
    resize: vertical !important;
}
.hx-comment-textarea:focus { outline: 0 !important; border-color: #d69b00 !important; }
.hx-comment-textarea-error { border-color: #c92822 !important; }
.hx-comment-error {
    margin: 0 0 4px !important;
    color: #c92822 !important;
    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;
}
.hx-comment-form-meta {
    min-height: 15px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #888 !important;
    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;
}
.hx-comment-submit {
    width: auto !important;
    min-width: 145px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: linear-gradient(to bottom,#65c929 0%,#4cb311 48%,#399b04 49%,#2d8900 100%) !important;
    border: 1px solid #287600 !important;
    border-radius: 3px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
    font: bold 10px/15px Verdana, Arial, Helvetica, sans-serif !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
    cursor: pointer !important;
}
.hx-comment-list {
    margin: 10px 0 0 !important;
    padding: 0 4px 4px !important;
}
.hx-comment-list-intro {
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #666 !important;
    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}
.hx-comment-items {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}
.hx-comment-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 7px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    color: #333 !important;
    background: #f5f5f5 !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.hx-comment-avatar {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    overflow: hidden !important;
}
.hx-comment-avatar img {
    width: auto !important;
    height: auto !important;
    max-width: 48px !important;
    max-height: 48px !important;
    display: block !important;
    image-rendering: auto !important;
}
.hx-comment-content { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
.hx-comment-top {
    min-height: 20px !important;
    margin: 0 0 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.hx-comment-username {
    color: #f25d00 !important;
    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
    text-decoration: none !important;
}
.hx-comment-actions { display: flex !important; align-items: center !important; gap: 6px !important; }
.hx-comment-time { color: #888 !important; font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important; white-space: nowrap !important; }
.hx-comment-delete {
    width: 25px !important;
    min-width: 25px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: linear-gradient(to bottom,#dc5e58,#b72b25) !important;
    border: 1px solid #921b16 !important;
    border-radius: 3px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
    font: bold 15px/20px Arial, Helvetica, sans-serif !important;
    cursor: pointer !important;
}
.hx-comment-text { margin: 0 !important; padding: 0 !important; color: #666 !important; font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important; word-break: break-word !important; }

/* Aviso propio: no usa el toast global de AtomCMS */
.hx-comment-notice {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 99999 !important;
    width: 285px !important;
    min-height: 34px !important;
    padding: 0 30px 0 34px !important;
    display: flex !important;
    align-items: center !important;
    color: #fff !important;
    border: 1px solid !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.28) !important;
    box-sizing: border-box !important;
    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
}
.hx-comment-notice-success { background: linear-gradient(to bottom,#76bf36 0%,#5ca01d 48%,#498b11 49%,#38770b 100%) !important; border-color: #2c6507 !important; }
.hx-comment-notice-danger { background: linear-gradient(to bottom,#df5a54 0%,#c93b35 48%,#b22c27 49%,#951c18 100%) !important; border-color: #7c110d !important; }
.hx-comment-notice-icon {
    position: absolute !important;
    left: 9px !important;
    top: 8px !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: rgba(0,0,0,.18) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 50% !important;
    font: bold 10px/14px Arial, Helvetica, sans-serif !important;
}
.hx-comment-notice-close {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,.9) !important;
    background: transparent !important;
    border: 0 !important;
    font: normal 15px/20px Arial, Helvetica, sans-serif !important;
    cursor: pointer !important;
}
.hx-news-show-page .hx-article-social:last-of-type,
.hx-news-show-page .hx-article-social:last-of-type .cbb,
.hx-news-show-page .hx-article-social:last-of-type .box-content {
    min-height: 0 !important;
    height: auto !important;
}
.hx-news-show-page .hx-article-social:last-of-type .box-content { padding: 7px 8px !important; }


/* =========================================================
   V20 - ARTICLES PULIDO FINAL
   - Reacciones sin hueco superior
   - Comentarios con textos más limpios
   - Avisos clásicos sin botón verde duplicado
   ========================================================= */


/* ---------------------------------------------------------
   REACCIONES: ELIMINAR EL HUECO SUPERIOR
   --------------------------------------------------------- */

.hx-news-show-page .hx-article-social:first-of-type .box-content {
    padding: 5px 8px 7px !important;
}

.hx-reactions-shell {
    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;
    height: auto !important;
}

/* Neutraliza márgenes/padding superiores generados por el
   componente Livewire de reacciones. */
.hx-reactions-shell > *,
.hx-reactions-shell > * > * {
    min-height: 0 !important;
}

.hx-reactions-shell > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
}

.hx-reactions-shell [class*="mt-"],
.hx-reactions-shell [class*="my-"] {
    margin-top: 0 !important;
}

.hx-reactions-shell [class*="pt-"] {
    padding-top: 0 !important;
}

.hx-reactions-shell [class*="py-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* El panel gris que contiene las reacciones conserva solo
   un relleno pequeño y uniforme. */
.hx-reactions-shell [class*="bg-gray"],
.hx-reactions-shell [class*="bg-slate"],
.hx-reactions-shell [class*="bg-zinc"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 6px 7px !important;
}

.hx-reactions-shell div:has(> button) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ---------------------------------------------------------
   COMENTARIOS: BLOQUE MUCHO MÁS COMPACTO
   --------------------------------------------------------- */

.hx-comments-shell {
    margin: 0 !important;
    padding: 0 !important;
}

.hx-comments-component {
    margin: 0 !important;
    padding: 0 !important;
}

.hx-comment-form {
    margin: 0 !important;
    padding: 3px 4px 5px !important;
}

.hx-comment-form-heading,
.hx-comment-list-heading {
    margin: 0 0 5px !important;
    padding: 0 0 4px !important;

    color: #4d4d4d !important;

    border-bottom: 1px dotted #b9b9b9 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-comment-form form {
    margin: 0 !important;
    padding: 0 !important;
}

.hx-comment-textarea {
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 95px !important;

    margin: 0 0 3px !important;
    padding: 6px 7px !important;

    color: #333 !important;
    background: #fff !important;

    border: 1px solid #8e8e8e !important;
    border-radius: 2px !important;

    box-sizing: border-box !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    resize: vertical !important;
}

.hx-comment-textarea::placeholder {
    color: #969696 !important;

    opacity: 1 !important;
}

.hx-comment-form-meta {
    min-height: 15px !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    color: #929292 !important;

    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-comment-shortcut {
    color: #999 !important;
}

.hx-comment-counter {
    color: #777 !important;
}

.hx-comment-submit {
    min-width: 145px !important;
    height: 29px !important;
    min-height: 29px !important;

    margin: 0 !important;
}

.hx-comment-list {
    margin: 9px 0 0 !important;
    padding: 0 4px 4px !important;
}

.hx-comment-items {
    margin: 0 !important;
    padding: 0 !important;

    gap: 5px !important;
}


/* ---------------------------------------------------------
   AVISO HABBOEXTREME
   Está teletransportado al BODY, así ningún selector de
   .hx-comments-shell button puede volverlo verde.
   --------------------------------------------------------- */

[x-cloak] {
    display: none !important;
}

.hx-comment-notice {
    position: fixed !important;

    top: 12px !important;
    right: 14px !important;

    z-index: 2147483000 !important;

    width: 285px !important;
    min-width: 285px !important;
    max-width: 285px !important;

    min-height: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 34px 0 36px !important;

    display: flex !important;
    align-items: center !important;

    color: #fff !important;

    border: 1px solid !important;
    border-radius: 4px !important;

    box-shadow:
        0 2px 4px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.20) !important;

    box-sizing: border-box !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.28) !important;

    overflow: hidden !important;
}

.hx-comment-notice-success {
    background:
        linear-gradient(
            to bottom,
            #76bf36 0%,
            #5aa01c 49%,
            #468b10 50%,
            #39780b 100%
        ) !important;

    border-color: #2e6409 !important;
}

.hx-comment-notice-danger {
    background:
        linear-gradient(
            to bottom,
            #df5f59 0%,
            #c94039 49%,
            #b32d28 50%,
            #971e1a 100%
        ) !important;

    border-color: #7e1713 !important;
}

.hx-comment-notice-icon {
    position: absolute !important;

    left: 9px !important;
    top: 9px !important;

    width: 16px !important;
    height: 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;
    background: rgba(0,0,0,.18) !important;

    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 50% !important;

    box-sizing: border-box !important;

    font: bold 10px/14px Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;
}

.hx-comment-notice-text {
    display: block !important;

    width: 100% !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body .hx-comment-notice .hx-comment-notice-close {
    position: absolute !important;

    top: 6px !important;
    right: 6px !important;

    width: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;

    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: rgba(255,255,255,.9) !important;
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    font: normal 15px/21px Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;

    cursor: pointer !important;
}

body .hx-comment-notice .hx-comment-notice-close:hover {
    color: #fff !important;
    background: rgba(0,0,0,.14) !important;
}


/* ---------------------------------------------------------
   REACCIONES / COMENTARIOS: DISTANCIA ENTRE HABBLETS
   --------------------------------------------------------- */

.hx-news-show-page .hx-article-social {
    margin-top: 6px !important;
}

.hx-news-show-page .hx-article-social + .hx-article-social {
    margin-top: 6px !important;
}



/* =========================================================
   V21 - FIX AVISO FANTASMA
   Alpine x-show añade display:none inline al terminar el aviso.
   V20 tenía display:flex !important y bloqueaba ese ocultado.
   ========================================================= */

.hx-comment-notice[style*="display: none"] {
    display: none !important;
}

/* El estado visible conserva flex, pero SIN !important para
   permitir que Alpine pueda ocultarlo normalmente. */
.hx-comment-notice:not([style*="display: none"]) {
    display: flex;
}


/* =========================================================
   V22 - REACCIONES OLD SCHOOL
   - Botones más compactos y estilo Habbo clásico
   - Popovers antiguos claros
   - Corrige popovers cortados/ocultos
   ========================================================= */


/* ---------------------------------------------------------
   IMPORTANTE: LOS POPOVERS DEBEN PODER SALIR DE LA CAJA
   --------------------------------------------------------- */

.hx-news-show-page .hx-article-social:has(.hx-reactions-shell),
.hx-news-show-page .hx-article-social:has(.hx-reactions-shell) .cbb,
.hx-news-show-page .hx-article-social:has(.hx-reactions-shell) .box-content,
.hx-reactions-shell,
.hx-reactions-shell > div {
    overflow: visible !important;
}

.hx-news-show-page .hx-article-social:has(.hx-reactions-shell) {
    position: relative !important;
    z-index: 30 !important;
}

.hx-news-show-page .hx-article-social:has(.hx-comments-shell) {
    position: relative !important;
    z-index: 10 !important;
}


/* ---------------------------------------------------------
   PANEL DE REACCIONES
   --------------------------------------------------------- */

.hx-reactions-shell {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #333 !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

/* Caja interior gris muy suave, más Habbo clásico */
.hx-reactions-shell [class*="bg-gray"],
.hx-reactions-shell [class*="bg-slate"],
.hx-reactions-shell [class*="bg-zinc"] {
    margin: 0 !important;
    padding: 6px !important;

    background: #ececec !important;

    border: 1px solid #d2d2d2 !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 #fff !important;
}


/* ---------------------------------------------------------
   BOTONES DE REACCIÓN
   --------------------------------------------------------- */

.hx-reactions-shell button,
.hx-reactions-shell button:first-of-type {
    position: relative !important;

    width: auto !important;
    min-width: 36px !important;

    height: 27px !important;
    min-height: 27px !important;

    margin: 0 2px 3px 0 !important;
    padding: 1px 5px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    color: #333 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f5f5f5 47%,
            #e5e5e5 48%,
            #d8d8d8 100%
        ) !important;

    border: 1px solid #9ba2a8 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 1px 0 rgba(0,0,0,.07) !important;

    font: bold 9px/19px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 1px 0 #fff !important;

    cursor: pointer !important;

    overflow: visible !important;
}

.hx-reactions-shell button:hover {
    color: #111 !important;

    background:
        linear-gradient(
            to bottom,
            #fff9d7 0%,
            #f8e99b 47%,
            #edd77b 48%,
            #dfc45c 100%
        ) !important;

    border-color: #aa8a1b !important;
}

/* Reacción seleccionada */
.hx-reactions-shell button[aria-pressed="true"],
.hx-reactions-shell button[class*="yellow"],
.hx-reactions-shell button[class*="amber"],
.hx-reactions-shell button[class*="orange"] {
    color: #332800 !important;

    background:
        linear-gradient(
            to bottom,
            #ffe983 0%,
            #f4d64d 47%,
            #e8bf28 48%,
            #d6a907 100%
        ) !important;

    border-color: #9b7900 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65) !important;
}


/* ---------------------------------------------------------
   BOTÓN "AÑADIR"
   Conserva amarillo clásico pero más pequeño.
   --------------------------------------------------------- */

.hx-reactions-shell button:first-of-type {
    min-width: 55px !important;

    color: #3a3000 !important;

    background:
        linear-gradient(
            to bottom,
            #ffe36b 0%,
            #f3ca31 47%,
            #e5b512 48%,
            #d59f00 100%
        ) !important;

    border-color: #9e7900 !important;

    font-weight: bold !important;
}

.hx-reactions-shell button:first-of-type:hover {
    background:
        linear-gradient(
            to bottom,
            #ffed91 0%,
            #f8da58 47%,
            #edc42f 48%,
            #dcae0d 100%
        ) !important;
}


/* ---------------------------------------------------------
   ICONOS PIXEL ART
   Nunca se escalan con filtros borrosos.
   --------------------------------------------------------- */

.hx-reactions-shell button img {
    width: auto !important;
    height: auto !important;

    max-width: 22px !important;
    max-height: 22px !important;

    image-rendering: auto !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   POPOVERS / TOOLTIP DE QUIÉN REACCIONÓ
   Diseño viejo, claro y legible.
   --------------------------------------------------------- */

.hx-reactions-shell [data-popover],
.hx-reactions-shell [role="tooltip"],
body [data-popover][id*="reaction" i],
body [role="tooltip"][id*="reaction" i] {
    z-index: 99999 !important;

    width: 210px !important;
    min-width: 170px !important;
    max-width: 240px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #333 !important;
    background: #f5f5f2 !important;

    border: 1px solid #5f6060 !important;
    border-radius: 2px !important;

    box-shadow:
        2px 2px 0 rgba(0,0,0,.18) !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    opacity: 1 !important;

    overflow: visible !important;
}


/* Encabezado del popover */
.hx-reactions-shell [data-popover] > div:first-child,
.hx-reactions-shell [role="tooltip"] > div:first-child,
body [data-popover][id*="reaction" i] > div:first-child,
body [role="tooltip"][id*="reaction" i] > div:first-child {
    margin: 0 !important;
    padding: 6px 8px !important;

    color: #fff !important;
    background:
        linear-gradient(
            to bottom,
            #4383b6 0%,
            #2e6d9f 100%
        ) !important;

    border: 0 !important;
    border-bottom: 1px solid #24597f !important;
    border-radius: 0 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: left !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
}


/* Contenido */
.hx-reactions-shell [data-popover] > div:not(:first-child),
.hx-reactions-shell [role="tooltip"] > div:not(:first-child),
body [data-popover][id*="reaction" i] > div:not(:first-child),
body [role="tooltip"][id*="reaction" i] > div:not(:first-child) {
    padding: 6px 8px !important;

    color: #222 !important;
    background: #f5f5f2 !important;

    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}


/* Nombres dentro del tooltip */
.hx-reactions-shell [data-popover] a,
.hx-reactions-shell [data-popover] span,
.hx-reactions-shell [role="tooltip"] a,
.hx-reactions-shell [role="tooltip"] span,
body [data-popover][id*="reaction" i] a,
body [data-popover][id*="reaction" i] span,
body [role="tooltip"][id*="reaction" i] a,
body [role="tooltip"][id*="reaction" i] span {
    color: #222 !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;

    text-shadow: none !important;
}


/* ---------------------------------------------------------
   FLECHA DEL POPOVER
   --------------------------------------------------------- */

.hx-reactions-shell [data-popper-arrow],
body [data-popover][id*="reaction" i] [data-popper-arrow],
body [role="tooltip"][id*="reaction" i] [data-popper-arrow] {
    z-index: 100000 !important;
}

.hx-reactions-shell [data-popper-arrow]::before,
body [data-popover][id*="reaction" i] [data-popper-arrow]::before,
body [role="tooltip"][id*="reaction" i] [data-popper-arrow]::before {
    background: #f5f5f2 !important;

    border: 1px solid #5f6060 !important;
}


/* ---------------------------------------------------------
   SI FLOWBITE DEJA UNA CAPA DARK DEL THEME, LA NEUTRALIZAMOS
   --------------------------------------------------------- */

.hx-reactions-shell .dark\:bg-gray-700,
.hx-reactions-shell .dark\:bg-gray-800,
.hx-reactions-shell .dark\:text-gray-100,
.hx-reactions-shell .dark\:text-gray-200 {
    color: #333 !important;
    background: #f5f5f2 !important;
}


/* ---------------------------------------------------------
   ESPACIADO FINAL
   --------------------------------------------------------- */

.hx-news-show-page .hx-article-social:has(.hx-reactions-shell) .box-content {
    padding-top: 5px !important;
    padding-bottom: 6px !important;
}



/* =========================================================
   V23 - MODAL "AGREGAR UNA REACCIÓN" OLD SCHOOL
   Solo afecta al modal que vive dentro de Reacciones.
   ========================================================= */


/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.hx-reactions-shell > [role="dialog"] {
    z-index: 2147482500 !important;

    overflow-y: auto !important;
}

.hx-reactions-shell > [role="dialog"] > div {
    min-height: 100vh !important;

    padding: 15px !important;

    align-items: center !important;
    justify-content: center !important;
}

.hx-reactions-shell > [role="dialog"] > div > .fixed.inset-0 {
    background: rgba(0, 0, 0, .55) !important;
}


/* ---------------------------------------------------------
   VENTANA
   Convierte el modal moderno ancho en una ventana Habbo clásica.
   --------------------------------------------------------- */

.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full {
    position: relative !important;

    width: 355px !important;
    max-width: 355px !important;
    min-width: 355px !important;

    margin: 0 !important;
    padding: 0 0 9px !important;

    color: #333 !important;
    background: #efefec !important;

    border: 2px solid #4f5357 !important;
    border-radius: 4px !important;

    box-shadow:
        0 3px 0 rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.85) !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   TÍTULO
   --------------------------------------------------------- */

.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full > div.mb-2 {
    min-height: 32px !important;

    margin: 0 0 8px !important;
    padding: 7px 38px 6px 10px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #4e91c3 0%,
            #3a7caf 47%,
            #2f6e9e 48%,
            #28628e 100%
        ) !important;

    border-bottom: 1px solid #1e526f !important;

    box-sizing: border-box !important;

    font: bold 11px/18px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: left !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.30) !important;
}

/* Si el título viene dentro de h1/h2/div/span, todos heredan
   el mismo tamaño y no vuelven a verse gigantes. */
.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full > div.mb-2 *,
.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full > div.mb-2 {
    color: #fff !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 18px !important;

    text-align: left !important;
}


/* ---------------------------------------------------------
   BOTÓN CERRAR
   Evita que herede el botón amarillo de las reacciones.
   --------------------------------------------------------- */

.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full > button.absolute {
    position: absolute !important;

    top: 5px !important;
    right: 6px !important;

    width: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;

    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #d75b55 0%,
            #bd332d 49%,
            #a5221e 50%,
            #8f1714 100%
        ) !important;

    border: 1px solid #6f100d !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30) !important;

    text-shadow: none !important;

    z-index: 5 !important;
}

.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full > button.absolute:hover {
    background:
        linear-gradient(
            to bottom,
            #e66a63 0%,
            #ce4039 49%,
            #b42b25 50%,
            #9c1c18 100%
        ) !important;
}

.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full > button.absolute svg {
    width: 13px !important;
    height: 13px !important;

    color: #fff !important;
}


/* ---------------------------------------------------------
   CONTENIDO / REACCIONES DISPONIBLES
   --------------------------------------------------------- */

.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full > :not(button):not(div.mb-2) {
    margin-left: 9px !important;
    margin-right: 9px !important;
}

/* Contenedores internos */
.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full [class*="flex"],
.hx-reactions-shell > [role="dialog"] > div > div.relative.w-full [class*="grid"] {
    gap: 5px !important;

    justify-content: flex-start !important;
}

/* Neutralizar separaciones modernas */
.hx-reactions-shell > [role="dialog"] [class*="space-y-"] > * + * {
    margin-top: 5px !important;
}

.hx-reactions-shell > [role="dialog"] [class*="p-"],
.hx-reactions-shell > [role="dialog"] [class*="px-"],
.hx-reactions-shell > [role="dialog"] [class*="py-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
   BOTONES DE REACCIÓN DENTRO DEL MODAL
   --------------------------------------------------------- */

.hx-reactions-shell > [role="dialog"] button:not(.absolute) {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;

    margin: 0 !important;
    padding: 2px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #333 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f3f3f3 47%,
            #e3e3e3 48%,
            #d5d5d5 100%
        ) !important;

    border: 1px solid #a0a5aa !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    text-shadow: none !important;

    overflow: hidden !important;
}

.hx-reactions-shell > [role="dialog"] button:not(.absolute):hover {
    background:
        linear-gradient(
            to bottom,
            #fff5bb 0%,
            #f6df71 47%,
            #eacb46 48%,
            #d8b72d 100%
        ) !important;

    border-color: #aa8918 !important;
}

/* Seleccionada / activa */
.hx-reactions-shell > [role="dialog"] button:not(.absolute)[aria-pressed="true"],
.hx-reactions-shell > [role="dialog"] button:not(.absolute)[class*="yellow"],
.hx-reactions-shell > [role="dialog"] button:not(.absolute)[class*="amber"],
.hx-reactions-shell > [role="dialog"] button:not(.absolute)[class*="orange"] {
    background:
        linear-gradient(
            to bottom,
            #ffe36d 0%,
            #f1c834 47%,
            #e2b513 48%,
            #cd9e00 100%
        ) !important;

    border-color: #987400 !important;
}

.hx-reactions-shell > [role="dialog"] button:not(.absolute) img {
    width: auto !important;
    height: auto !important;

    max-width: 24px !important;
    max-height: 24px !important;

    margin: 0 !important;

    display: block !important;

    image-rendering: auto !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .hx-reactions-shell > [role="dialog"] > div > div.relative.w-full {
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
    }

}


/* =========================================================
   V24 - FIX PRIMER EMOJI AMARILLO EN MODAL DE REACCIONES
   El estilo amarillo de "Añadir" usaba :first-of-type y estaba
   alcanzando también al primer emoji del modal.
   ========================================================= */

/* Dentro del modal, TODOS los emojis empiezan con el mismo estilo neutro. */
.hx-reactions-shell [role="dialog"] button:not(.absolute):first-of-type,
.hx-reactions-shell [role="dialog"] button:not(.absolute),
.hx-reactions-shell .fixed.inset-0 button:not(.absolute):first-of-type,
.hx-reactions-shell .fixed.inset-0 button:not(.absolute) {
    color: #333 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f3f3f3 47%,
            #e3e3e3 48%,
            #d5d5d5 100%
        ) !important;

    border-color: #a0a5aa !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    text-shadow: none !important;
}

/* Hover dorado, igual para cualquiera sin importar la posición. */
.hx-reactions-shell [role="dialog"] button:not(.absolute):hover,
.hx-reactions-shell .fixed.inset-0 button:not(.absolute):hover {
    background:
        linear-gradient(
            to bottom,
            #fff5bb 0%,
            #f6df71 47%,
            #eacb46 48%,
            #d8b72d 100%
        ) !important;

    border-color: #aa8918 !important;
}

/* Solo una reacción realmente marcada como activa puede quedar amarilla. */
.hx-reactions-shell [role="dialog"] button:not(.absolute)[aria-pressed="true"],
.hx-reactions-shell [role="dialog"] button:not(.absolute).active,
.hx-reactions-shell .fixed.inset-0 button:not(.absolute)[aria-pressed="true"],
.hx-reactions-shell .fixed.inset-0 button:not(.absolute).active {
    background:
        linear-gradient(
            to bottom,
            #ffe36d 0%,
            #f1c834 47%,
            #e2b513 48%,
            #cd9e00 100%
        ) !important;

    border-color: #987400 !important;
}


/* =========================================================
   V25 - RESTAURAR "ÚLTIMAS NOTICIAS" EN /USER/ME
   Fix completamente aislado al sidebar del ME.
   No modifica Articles, Reacciones ni Comentarios.
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEDOR
   --------------------------------------------------------- */

body#habbla-app #column2 .hx-news-box {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    background: transparent !important;

    overflow: hidden !important;
}

body#habbla-app #column2 .hx-news-box .articles-slider,
body#habbla-app #column2 .hx-news-box .swiper,
body#habbla-app #column2 .hx-news-box .swiper-wrapper,
body#habbla-app #column2 .hx-news-box .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
}

body#habbla-app #column2 .hx-news-box .articles-slider,
body#habbla-app #column2 .hx-news-box .swiper {
    height: 283px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

body#habbla-app #column2 .hx-news-box .swiper-wrapper {
    height: 283px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: stretch !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

body#habbla-app #column2 .hx-news-box .make-news-card {
    position: relative !important;

    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 283px !important;
    min-height: 283px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    color: #fff !important;
    background: #fff !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: hidden !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   IMAGEN PRINCIPAL
   Importante: NO usamos background shorthand para no borrar
   el background-image inline que trae article-card.blade.php.
   --------------------------------------------------------- */

body#habbla-app #column2 .hx-news-box .make-news-image {
    position: relative !important;

    flex: 0 0 225px !important;

    width: 100% !important;
    height: 225px !important;
    min-height: 225px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #f39200 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   SOMBRA SOBRE LA IMAGEN
   --------------------------------------------------------- */

body#habbla-app #column2 .hx-news-box .make-news-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .01) 0%,
            rgba(0, 0, 0, .07) 48%,
            rgba(0, 0, 0, .76) 100%
        ) !important;

    pointer-events: none !important;
}


/* ---------------------------------------------------------
   TEXTO SOBRE LA IMAGEN
   --------------------------------------------------------- */

body#habbla-app #column2 .hx-news-box .make-news-featured-content {
    position: absolute !important;

    left: 12px !important;
    right: 12px !important;
    bottom: 11px !important;

    z-index: 2 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    background: transparent !important;

    text-align: left !important;
}

body#habbla-app #column2 .hx-news-box .make-news-label {
    display: block !important;

    margin: 0 0 3px !important;
    padding: 0 !important;

    color: #fff !important;
    background: transparent !important;

    font: normal 9px/12px Arial, Helvetica, sans-serif !important;

    text-transform: uppercase !important;

    text-shadow: 0 1px 2px rgba(0,0,0,.95) !important;
}

body#habbla-app #column2 .hx-news-box .make-news-title {
    display: block !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    overflow: hidden !important;

    color: #fff !important;
    background: transparent !important;

    font: bold 15px/18px Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    text-shadow: 0 1px 2px rgba(0,0,0,.95) !important;
}

body#habbla-app #column2 .hx-news-box .make-news-description {
    display: block !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    overflow: hidden !important;

    color: #fff !important;
    background: transparent !important;

    font: normal 10px/13px Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    text-shadow: 0 1px 2px rgba(0,0,0,.92) !important;
}

body#habbla-app #column2 .hx-news-box .make-news-readmore {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    background: transparent !important;

    font: normal 10px/14px Arial, Helvetica, sans-serif !important;

    text-decoration: underline !important;

    text-shadow: 0 1px 2px rgba(0,0,0,.95) !important;
}

body#habbla-app #column2 .hx-news-box .make-news-readmore:hover {
    color: #f5d8a8 !important;
}


/* ---------------------------------------------------------
   PIE DE LA NOTICIA
   --------------------------------------------------------- */

body#habbla-app #column2 .hx-news-box .make-news-bottom {
    position: relative !important;

    flex: 0 0 58px !important;

    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 6px 9px 5px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 6px !important;

    color: #555 !important;

    background:
        linear-gradient(
            to bottom,
            #efefef 0%,
            #fafafa 100%
        ) !important;

    border-top: 1px solid #bcbcbc !important;

    box-sizing: border-box !important;
}

body#habbla-app #column2 .hx-news-box .make-news-bottom-left {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 1px !important;

    background: transparent !important;
}

body#habbla-app #column2 .hx-news-box .make-news-author {
    color: #555 !important;
    background: transparent !important;

    font: normal 9px/13px Arial, Helvetica, sans-serif !important;
}

body#habbla-app #column2 .hx-news-box .make-news-date {
    color: #999 !important;
    background: transparent !important;

    font: normal 9px/12px Arial, Helvetica, sans-serif !important;
}

body#habbla-app #column2 .hx-news-box .make-news-index {
    margin-top: auto !important;
    margin-bottom: 0 !important;

    align-self: flex-end !important;

    color: #c65e22 !important;
    background: transparent !important;

    font: normal 9px/13px Arial, Helvetica, sans-serif !important;

    text-decoration: underline !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   ASEGURAR QUE LOS PARCHES DE ARTICLES NO AFECTEN ESTE CARD
   --------------------------------------------------------- */

body#habbla-app #column2 .hx-news-box .make-news-card *,
body#habbla-app #column2 .hx-news-box .make-news-card *::before,
body#habbla-app #column2 .hx-news-box .make-news-card *::after {
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 820px) {

    body#habbla-app #column2 .hx-news-box .make-news-card,
    body#habbla-app #column2 .hx-news-box .articles-slider,
    body#habbla-app #column2 .hx-news-box .swiper,
    body#habbla-app #column2 .hx-news-box .swiper-wrapper {
        height: 268px !important;
        min-height: 268px !important;
    }

    body#habbla-app #column2 .hx-news-box .make-news-image {
        flex-basis: 210px !important;

        height: 210px !important;
        min-height: 210px !important;
    }

}


/* =========================================================
   V26 - COMENTARIOS RECIENTES: BOX CLÁSICO PULIDO
   Solo modifica la tarjeta de cada comentario publicado.
   ========================================================= */


/* ---------------------------------------------------------
   TÍTULO DE LA LISTA
   --------------------------------------------------------- */

.hx-comment-list-heading {
    margin: 0 0 6px !important;
    padding: 0 0 5px !important;

    color: #4a4a4a !important;

    border-bottom: 1px dotted #a8a8a8 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   TARJETA COMPLETA
   --------------------------------------------------------- */

.hx-comment-item {
    position: relative !important;

    width: 100% !important;
    min-height: 74px !important;

    margin: 0 !important;
    padding: 7px 9px 7px 78px !important;

    display: block !important;

    color: #3f3f3f !important;

    background:
        linear-gradient(
            to bottom,
            #fafafa 0%,
            #f3f3f3 100%
        ) !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 1px rgba(0,0,0,.06) !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* pequeño detalle lateral old-school */
.hx-comment-item::before {
    content: "" !important;

    position: absolute !important;

    left: 69px !important;
    top: 8px !important;
    bottom: 8px !important;

    width: 1px !important;

    background: #d6d6d6 !important;
}


/* ---------------------------------------------------------
   AVATAR / KEKO
   --------------------------------------------------------- */

.hx-comment-avatar {
    position: absolute !important;

    left: 7px !important;
    top: 7px !important;

    width: 55px !important;
    height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f0f0f0 100%
        ) !important;

    border: 1px solid #bfc3c6 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0,0,0,.08) !important;

    text-decoration: none !important;

    overflow: hidden !important;
}

.hx-comment-avatar:hover {
    border-color: #8aa7bd !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #eaf4fa 100%
        ) !important;
}


/*
 * Se solicita &size=l en el Blade para obtener una imagen de
 * mayor resolución del imager y luego la mostramos a un tamaño
 * controlado, evitando que el navegador agrande una miniatura.
 */
.hx-comment-avatar img {
    width: auto !important;
    height: auto !important;

    max-width: 53px !important;
    max-height: 56px !important;

    margin: 0 auto !important;

    display: block !important;

    object-fit: contain !important;

    image-rendering: auto !important;

    transform: none !important;

    filter: none !important;
}


/* ---------------------------------------------------------
   CONTENIDO
   --------------------------------------------------------- */

.hx-comment-content {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.hx-comment-top {
    min-height: 22px !important;

    margin: 0 0 4px !important;
    padding: 0 0 4px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;

    border-bottom: 1px dotted #c6c6c6 !important;
}


/* ---------------------------------------------------------
   USUARIO
   --------------------------------------------------------- */

.hx-comment-username {
    display: inline-block !important;

    color: #e85b00 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    text-shadow: 0 1px 0 #fff !important;
}

.hx-comment-username:hover {
    color: #bd4800 !important;

    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   FECHA + ACCIONES
   --------------------------------------------------------- */

.hx-comment-actions {
    display: flex !important;
    align-items: center !important;

    gap: 7px !important;
}

.hx-comment-time {
    color: #8c8c8c !important;

    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   BOTÓN ELIMINAR
   Más pequeño y menos protagonista.
   --------------------------------------------------------- */

.hx-comment-delete {
    width: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;

    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;

    margin: 0 !important;
    padding: 0 0 1px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #d9635d 0%,
            #ba302a 100%
        ) !important;

    border: 1px solid #911b16 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32) !important;

    font: bold 14px/18px Arial, Helvetica, sans-serif !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.22) !important;

    cursor: pointer !important;
}

.hx-comment-delete:hover {
    background:
        linear-gradient(
            to bottom,
            #e8736c 0%,
            #ca3c35 100%
        ) !important;
}


/* ---------------------------------------------------------
   TEXTO DEL COMENTARIO
   --------------------------------------------------------- */

.hx-comment-text {
    margin: 0 !important;
    padding: 1px 2px 0 0 !important;

    color: #555 !important;

    font: normal 10px/15px Verdana, Arial, Helvetica, sans-serif !important;

    line-height: 15px !important;

    word-break: break-word !important;
}


/* ---------------------------------------------------------
   VARIOS COMENTARIOS
   --------------------------------------------------------- */

.hx-comment-items {
    display: flex !important;
    flex-direction: column !important;

    gap: 6px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 620px) {

    .hx-comment-item {
        min-height: 70px !important;

        padding-left: 70px !important;
    }

    .hx-comment-item::before {
        left: 62px !important;
    }

    .hx-comment-avatar {
        width: 48px !important;
        height: 52px !important;
    }

    .hx-comment-avatar img {
        max-width: 47px !important;
        max-height: 50px !important;
    }

    .hx-comment-time {
        display: none !important;
    }

}


/* =========================================================
   V27 - COMENTARIO OLD HABBO, CAMBIO VISUAL REAL
   ========================================================= */

/* El título queda más discreto, estilo sección clásica */
.hx-comment-list-heading {
    margin: 0 0 8px !important;
    padding: 0 0 5px !important;

    color: #4d4d4d !important;
    background: transparent !important;

    border-bottom: 1px dotted #9f9f9f !important;

    font: bold 11px/15px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   TARJETA
   El fondo general deja de parecer una tarjeta moderna.
   --------------------------------------------------------- */

.hx-comment-item {
    position: relative !important;

    width: 100% !important;
    min-height: 82px !important;

    margin: 0 !important;
    padding: 8px 8px 8px 82px !important;

    display: block !important;

    background: #eeeeeb !important;

    border: 1px solid #bcbcbc !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 1px 2px rgba(0,0,0,.08) !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}

/* Quitamos el separador vertical anterior */
.hx-comment-item::before {
    display: none !important;
}


/* ---------------------------------------------------------
   AVATAR / KEKO
   Más grande, limpio y visualmente separado.
   --------------------------------------------------------- */

.hx-comment-avatar {
    position: absolute !important;

    left: 8px !important;
    top: 8px !important;

    width: 64px !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #ececec 100%
        ) !important;

    border: 1px solid #aeb2b5 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0,0,0,.12) !important;

    overflow: hidden !important;
}

.hx-comment-avatar img {
    width: auto !important;
    height: auto !important;

    max-width: 62px !important;
    max-height: 62px !important;

    display: block !important;

    object-fit: contain !important;

    image-rendering: auto !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   BURBUJA DEL COMENTARIO
   --------------------------------------------------------- */

.hx-comment-content {
    position: relative !important;

    min-height: 64px !important;

    margin: 0 !important;
    padding: 7px 9px 8px !important;

    color: #444 !important;
    background: #ffffff !important;

    border: 1px solid #c6c6c6 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 #ffffff !important;

    box-sizing: border-box !important;
}

/* Flecha de la burbuja */
.hx-comment-content::before {
    content: "" !important;

    position: absolute !important;

    left: -8px !important;
    top: 20px !important;

    width: 0 !important;
    height: 0 !important;

    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-right: 8px solid #c6c6c6 !important;
}

.hx-comment-content::after {
    content: "" !important;

    position: absolute !important;

    left: -7px !important;
    top: 21px !important;

    width: 0 !important;
    height: 0 !important;

    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-right: 7px solid #ffffff !important;
}


/* ---------------------------------------------------------
   CABECERA INTERNA
   --------------------------------------------------------- */

.hx-comment-top {
    min-height: 20px !important;

    margin: 0 0 5px !important;
    padding: 0 0 4px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;

    border-bottom: 1px dotted #c7c7c7 !important;
}

.hx-comment-username {
    color: #e45b00 !important;

    font: bold 11px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    text-shadow: 0 1px 0 #fff !important;
}

.hx-comment-username:hover {
    color: #b84600 !important;
    text-decoration: underline !important;
}

.hx-comment-time {
    color: #999 !important;

    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   TEXTO
   --------------------------------------------------------- */

.hx-comment-text {
    margin: 0 !important;
    padding: 1px 1px 0 !important;

    color: #555 !important;

    font: normal 10px/15px Verdana, Arial, Helvetica, sans-serif !important;

    word-break: break-word !important;
}


/* ---------------------------------------------------------
   ELIMINAR
   Botón pequeño y secundario.
   --------------------------------------------------------- */

.hx-comment-delete {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;

    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;

    margin: 0 !important;
    padding: 0 0 1px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #d85b55 0%,
            #b62c26 100%
        ) !important;

    border: 1px solid #8e1914 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30) !important;

    font: bold 13px/18px Arial, Helvetica, sans-serif !important;

    cursor: pointer !important;
}


/* ---------------------------------------------------------
   VARIOS COMENTARIOS
   --------------------------------------------------------- */

.hx-comment-items {
    display: flex !important;
    flex-direction: column !important;

    gap: 7px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 620px) {

    .hx-comment-item {
        padding-left: 68px !important;
    }

    .hx-comment-avatar {
        width: 52px !important;
        height: 52px !important;
    }

    .hx-comment-avatar img {
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .hx-comment-content::before,
    .hx-comment-content::after {
        top: 16px !important;
    }

    .hx-comment-time {
        display: none !important;
    }
}


/* =========================================================
   V28 - COMENTARIOS OLD HABBO: PULIDO FINAL
   Más profundidad, mejor avatar, metadata discreta,
   comentario más protagonista y botón eliminar reducido.
   ========================================================= */


/* ---------------------------------------------------------
   TÍTULO
   --------------------------------------------------------- */

.hx-comment-list-heading {
    margin: 0 0 7px !important;
    padding: 0 0 5px !important;

    color: #424242 !important;

    border-bottom: 1px dotted #9f9f9f !important;

    font: bold 11px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 1px 0 #fff !important;
}


/* ---------------------------------------------------------
   TARJETA EXTERIOR
   Más aspecto de panel clásico y menos de card moderno.
   --------------------------------------------------------- */

.hx-comment-item {
    min-height: 86px !important;

    padding: 8px 8px 8px 84px !important;

    background:
        linear-gradient(
            to bottom,
            #f3f3ef 0%,
            #e8e8e4 100%
        ) !important;

    border: 1px solid #b7b7b2 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -1px 0 rgba(0,0,0,.03),
        0 1px 2px rgba(0,0,0,.10) !important;
}


/* ---------------------------------------------------------
   AVATAR / KEKO
   Fondo gris azulado suave, borde interior y más profundidad.
   --------------------------------------------------------- */

.hx-comment-avatar {
    left: 8px !important;
    top: 8px !important;

    width: 66px !important;
    height: 68px !important;

    background:
        linear-gradient(
            to bottom,
            #f9fcfd 0%,
            #e7eef1 100%
        ) !important;

    border: 1px solid #9faeb6 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.72),
        inset 0 -10px 15px rgba(130,150,160,.05),
        0 1px 2px rgba(0,0,0,.14) !important;
}

.hx-comment-avatar::after {
    content: "" !important;

    position: absolute !important;

    inset: 3px !important;

    pointer-events: none !important;

    border: 1px solid rgba(255,255,255,.65) !important;
    border-radius: 2px !important;
}

.hx-comment-avatar:hover {
    border-color: #6f94aa !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #deedf5 100%
        ) !important;
}

.hx-comment-avatar img {
    max-width: 62px !important;
    max-height: 64px !important;

    image-rendering: auto !important;
}


/* ---------------------------------------------------------
   BURBUJA
   --------------------------------------------------------- */

.hx-comment-content {
    min-height: 68px !important;

    padding: 7px 10px 9px !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #fbfbfb 100%
        ) !important;

    border: 1px solid #bfc2c4 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 1px rgba(0,0,0,.04) !important;
}


/* Flecha un poco más visible y centrada respecto al keko */
.hx-comment-content::before {
    left: -10px !important;
    top: 27px !important;

    border-top-width: 8px !important;
    border-bottom-width: 8px !important;
    border-right-width: 10px !important;

    border-right-color: #bfc2c4 !important;
}

.hx-comment-content::after {
    left: -8px !important;
    top: 28px !important;

    border-top-width: 7px !important;
    border-bottom-width: 7px !important;
    border-right-width: 9px !important;

    border-right-color: #ffffff !important;
}


/* ---------------------------------------------------------
   CABECERA
   Línea más corta y sutil para evitar que domine el box.
   --------------------------------------------------------- */

.hx-comment-top {
    min-height: 20px !important;

    margin: 0 0 4px !important;
    padding: 0 0 3px !important;

    border-bottom: 1px dotted #d2d2d2 !important;
}

.hx-comment-username {
    color: #df5900 !important;

    font: bold 11px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 1px 0 #fff !important;
}


/* ---------------------------------------------------------
   METADATA
   --------------------------------------------------------- */

.hx-comment-actions {
    gap: 6px !important;
}

.hx-comment-time {
    color: #a2a2a2 !important;

    font: normal 8px/11px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   TEXTO DEL COMENTARIO
   Más protagonista y menos gris apagado.
   --------------------------------------------------------- */

.hx-comment-text {
    margin: 0 !important;
    padding: 2px 2px 0 0 !important;

    color: #444 !important;

    font: normal 10px/16px Verdana, Arial, Helvetica, sans-serif !important;

    line-height: 16px !important;
}


/* ---------------------------------------------------------
   ELIMINAR
   Más pequeño y secundario.
   --------------------------------------------------------- */

.hx-comment-delete {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;

    padding: 0 0 1px !important;

    background:
        linear-gradient(
            to bottom,
            #d76560 0%,
            #ad2f29 100%
        ) !important;

    border-color: #8a1c17 !important;

    font: bold 12px/16px Arial, Helvetica, sans-serif !important;

    opacity: .92 !important;
}

.hx-comment-delete:hover {
    opacity: 1 !important;

    background:
        linear-gradient(
            to bottom,
            #e5746e 0%,
            #c13a33 100%
        ) !important;
}


/* ---------------------------------------------------------
   VARIOS COMENTARIOS
   --------------------------------------------------------- */

.hx-comment-items {
    gap: 8px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 620px) {

    .hx-comment-item {
        min-height: 76px !important;

        padding-left: 70px !important;
    }

    .hx-comment-avatar {
        width: 54px !important;
        height: 56px !important;
    }

    .hx-comment-avatar img {
        max-width: 52px !important;
        max-height: 54px !important;
    }

    .hx-comment-content::before {
        top: 21px !important;
    }

    .hx-comment-content::after {
        top: 22px !important;
    }

}


/* =========================================================
   V29 - COMENTARIO HABBOEXTREME PLANO
   Propuesta final alternativa:
   - Sin burbuja
   - Sin flecha
   - Avatar más pequeño
   - Una sola tarjeta gris clásica
   - Menos altura y menos elementos protagonistas
   ========================================================= */


/* ---------------------------------------------------------
   TÍTULO
   --------------------------------------------------------- */

.hx-comment-list-heading {
    margin: 0 0 7px !important;
    padding: 0 0 5px !important;

    color: #404040 !important;
    background: transparent !important;

    border-bottom: 1px dotted #9d9d9d !important;

    font: bold 11px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 1px 0 #fff !important;
}


/* ---------------------------------------------------------
   TARJETA ÚNICA
   --------------------------------------------------------- */

.hx-comment-item {
    position: relative !important;

    width: 100% !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 7px 8px 7px 72px !important;

    display: block !important;

    color: #444 !important;

    background:
        linear-gradient(
            to bottom,
            #f4f4f1 0%,
            #ebebe7 100%
        ) !important;

    border: 1px solid #b8b8b4 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -1px 0 rgba(0,0,0,.025),
        0 1px 1px rgba(0,0,0,.08) !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* pequeña franja lateral old-school */
.hx-comment-item::before {
    content: "" !important;

    position: absolute !important;

    left: 65px !important;
    top: 8px !important;
    bottom: 8px !important;

    width: 1px !important;

    display: block !important;

    background: #c9c9c5 !important;
}


/* ---------------------------------------------------------
   AVATAR
   --------------------------------------------------------- */

.hx-comment-avatar {
    position: absolute !important;

    left: 7px !important;
    top: 7px !important;

    width: 50px !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #eeeeeb 100%
        ) !important;

    border: 1px solid #aeb0af !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 1px rgba(0,0,0,.08) !important;

    text-decoration: none !important;

    overflow: hidden !important;
}

.hx-comment-avatar:hover {
    border-color: #858d91 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #e5e9ea 100%
        ) !important;
}

.hx-comment-avatar::after {
    display: none !important;
}

.hx-comment-avatar img {
    width: auto !important;
    height: auto !important;

    max-width: 48px !important;
    max-height: 54px !important;

    display: block !important;

    object-fit: contain !important;

    image-rendering: auto !important;

    transform: none !important;

    filter: none !important;
}


/* ---------------------------------------------------------
   CONTENIDO: SIN BURBUJA
   --------------------------------------------------------- */

.hx-comment-content {
    position: static !important;

    width: 100% !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #444 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}

/* anulamos completamente la flecha de V27/V28 */
.hx-comment-content::before,
.hx-comment-content::after {
    display: none !important;

    content: none !important;
}


/* ---------------------------------------------------------
   CABECERA
   --------------------------------------------------------- */

.hx-comment-top {
    min-height: 22px !important;

    margin: 0 0 4px !important;
    padding: 0 0 3px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 7px !important;

    border-bottom: 1px dotted #c6c6c2 !important;
}

.hx-comment-username {
    color: #e35a00 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    text-shadow: 0 1px 0 #fff !important;
}

.hx-comment-username:hover {
    color: #b94700 !important;

    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   FECHA
   --------------------------------------------------------- */

.hx-comment-actions {
    display: flex !important;
    align-items: center !important;

    gap: 5px !important;
}

.hx-comment-time {
    color: #9b9b97 !important;

    font: normal 8px/11px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   TEXTO
   --------------------------------------------------------- */

.hx-comment-text {
    margin: 0 !important;
    padding: 2px 1px 0 !important;

    color: #505050 !important;

    font: normal 10px/15px Verdana, Arial, Helvetica, sans-serif !important;

    line-height: 15px !important;

    word-break: break-word !important;
}


/* ---------------------------------------------------------
   BOTÓN ELIMINAR
   --------------------------------------------------------- */

.hx-comment-delete {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;

    margin: 0 !important;
    padding: 0 0 1px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #cb514b 0%,
            #a52823 100%
        ) !important;

    border: 1px solid #811813 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25) !important;

    font: bold 11px/15px Arial, Helvetica, sans-serif !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.22) !important;

    opacity: .88 !important;

    cursor: pointer !important;
}

.hx-comment-delete:hover {
    opacity: 1 !important;

    background:
        linear-gradient(
            to bottom,
            #df6059 0%,
            #b8322c 100%
        ) !important;
}


/* ---------------------------------------------------------
   VARIOS COMENTARIOS
   --------------------------------------------------------- */

.hx-comment-items {
    display: flex !important;
    flex-direction: column !important;

    gap: 6px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 620px) {

    .hx-comment-item {
        min-height: 66px !important;

        padding-left: 64px !important;
    }

    .hx-comment-item::before {
        left: 58px !important;
    }

    .hx-comment-avatar {
        width: 44px !important;
        height: 50px !important;
    }

    .hx-comment-avatar img {
        max-width: 43px !important;
        max-height: 48px !important;
    }

    .hx-comment-time {
        display: none !important;
    }

}


/* =========================================================
   V30 - COMENTARIO HABBOEXTREME: RETOQUES FINALES
   1) Botón eliminar menos protagonista
   2) Texto del comentario 3px más arriba
   3) Fondo del avatar ligeramente más gris
   ========================================================= */


/* ---------------------------------------------------------
   AVATAR: un poco más gris y menos brillante
   --------------------------------------------------------- */

.hx-comment-avatar {
    background:
        linear-gradient(
            to bottom,
            #f2f2ef 0%,
            #e3e3df 100%
        ) !important;

    border-color: #a7aaa8 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        0 1px 1px rgba(0,0,0,.08) !important;
}

.hx-comment-avatar:hover {
    background:
        linear-gradient(
            to bottom,
            #f7f7f4 0%,
            #e7e9e7 100%
        ) !important;

    border-color: #858d91 !important;
}


/* ---------------------------------------------------------
   COMENTARIO: más cerca del nombre
   --------------------------------------------------------- */

.hx-comment-text {
    position: relative !important;

    top: -3px !important;

    margin-bottom: -3px !important;
}


/* ---------------------------------------------------------
   BOTÓN ELIMINAR: menos contraste y menos protagonismo
   --------------------------------------------------------- */

.hx-comment-delete {
    color: rgba(255,255,255,.92) !important;

    background:
        linear-gradient(
            to bottom,
            #bd6762 0%,
            #9d4540 100%
        ) !important;

    border-color: #82403c !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18) !important;

    opacity: .78 !important;
}

.hx-comment-delete:hover {
    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #cf625c 0%,
            #ae3731 100%
        ) !important;

    border-color: #861f1a !important;

    opacity: 1 !important;
}


/* =========================================================
   V32 - COMENTARIOS: BBCODE + RESPUESTAS
   Extensión old-school sobre el diseño V30.
   ========================================================= */


/* ---------------------------------------------------------
   TOOLBAR BBCODE
   --------------------------------------------------------- */

.hx-bb-toolbar {
    min-height: 31px !important;

    margin: 0 0 5px !important;
    padding: 4px 5px !important;

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 4px !important;

    background:
        linear-gradient(
            to bottom,
            #f4f4f2 0%,
            #e6e6e3 100%
        ) !important;

    border: 1px solid #bdbdb9 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 #fff !important;

    box-sizing: border-box !important;
}

.hx-bb-tool {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;

    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #333 !important;

    background:
        linear-gradient(
            to bottom,
            #fff 0%,
            #ededed 48%,
            #dbdbdb 49%,
            #cecece 100%
        ) !important;

    border: 1px solid #999 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    font: bold 10px/19px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 1px 0 #fff !important;

    cursor: pointer !important;
}

.hx-bb-tool:hover {
    color: #111 !important;

    background:
        linear-gradient(
            to bottom,
            #fff6bc 0%,
            #f4df76 48%,
            #e8c94a 49%,
            #d7b62a 100%
        ) !important;

    border-color: #a08317 !important;
}

.hx-bb-tool-italic {
    font-style: italic !important;
}

.hx-bb-tool-underline {
    text-decoration: underline !important;
}

.hx-bb-tool-strike {
    text-decoration: line-through !important;
}

.hx-bb-toolbar-separator {
    width: 1px !important;
    height: 21px !important;

    margin: 0 2px !important;

    background: #c0c0bc !important;

    border-right: 1px solid #fff !important;
}

.hx-bb-select {
    height: 23px !important;

    margin: 0 !important;
    padding: 1px 22px 1px 5px !important;

    color: #444 !important;
    background-color: #fff !important;

    border: 1px solid #9f9f9f !important;
    border-radius: 2px !important;

    font: normal 9px/17px Verdana, Arial, Helvetica, sans-serif !important;

    cursor: pointer !important;
}

.hx-bb-color-select {
    width: 83px !important;
}

.hx-bb-size-select {
    width: 92px !important;
}

.hx-bb-help {
    margin-left: auto !important;

    color: #9a9a95 !important;

    font: normal 8px/12px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   RESPONDIENDO A...
   --------------------------------------------------------- */

.hx-comment-replying {
    min-height: 30px !important;

    margin: 0 0 5px !important;
    padding: 5px 7px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;

    color: #555 !important;

    background:
        linear-gradient(
            to bottom,
            #fff7cf 0%,
            #f6e9aa 100%
        ) !important;

    border: 1px solid #c7ae49 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75) !important;

    font: normal 9px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-comment-replying strong {
    color: #d85b00 !important;
}

.hx-comment-replying-arrow {
    margin-right: 3px !important;

    color: #8b7400 !important;

    font-weight: bold !important;
}

.hx-comment-reply-cancel {
    height: 21px !important;

    margin: 0 !important;
    padding: 0 7px !important;

    color: #555 !important;
    background: #eee !important;

    border: 1px solid #aaa !important;
    border-radius: 2px !important;

    font: normal 8px/17px Verdana, Arial, Helvetica, sans-serif !important;

    cursor: pointer !important;
}

.hx-comment-reply-cancel:hover {
    color: #222 !important;
    background: #fff !important;
}


/* ---------------------------------------------------------
   TEXTAREA 500
   --------------------------------------------------------- */

.hx-comment-textarea {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 125px !important;
}


/* ---------------------------------------------------------
   BOTÓN RESPONDER
   --------------------------------------------------------- */

.hx-comment-reply-button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline !important;

    color: #336f9d !important;
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font: normal 8px/12px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: underline !important;
    text-shadow: none !important;

    opacity: .88 !important;

    cursor: pointer !important;
}

.hx-comment-reply-button:hover {
    color: #df5b00 !important;

    background: transparent !important;

    opacity: 1 !important;
}


/* ---------------------------------------------------------
   THREAD
   --------------------------------------------------------- */

.hx-comment-thread {
    margin: 0 !important;
    padding: 0 !important;
}

.hx-comment-replies {
    margin: 4px 0 0 42px !important;
    padding: 0 0 0 9px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 4px !important;

    border-left: 2px solid #d4d4cf !important;
}

.hx-comment-reply-item {
    min-height: 61px !important;

    padding: 6px 7px 6px 60px !important;

    background:
        linear-gradient(
            to bottom,
            #f8f8f5 0%,
            #eeeeea 100%
        ) !important;

    border-color: #c6c6c1 !important;
}

.hx-comment-reply-item::before {
    left: 54px !important;
    top: 7px !important;
    bottom: 7px !important;

    background: #d1d1cc !important;
}

.hx-comment-reply-avatar {
    left: 6px !important;
    top: 6px !important;

    width: 40px !important;
    height: 46px !important;
}

.hx-comment-reply-avatar img {
    max-width: 39px !important;
    max-height: 44px !important;
}

.hx-comment-reply-user {
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 4px !important;
}

.hx-comment-reply-mark {
    color: #999 !important;

    font: bold 10px/12px Verdana, Arial, Helvetica, sans-serif !important;
}

.hx-comment-reply-to {
    color: #9a9a95 !important;

    font: normal 8px/11px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   BBCODE RENDERIZADO
   --------------------------------------------------------- */

.hx-comment-bbcode strong,
.hx-bb-bold {
    font-weight: bold !important;
}

.hx-comment-bbcode em,
.hx-bb-italic {
    font-style: italic !important;
}

.hx-bb-underline {
    text-decoration: underline !important;
}

.hx-bb-strike {
    text-decoration: line-through !important;
}

.hx-bb-color-red {
    color: #c9302c !important;
}

.hx-bb-color-blue {
    color: #2474a6 !important;
}

.hx-bb-color-green {
    color: #388c23 !important;
}

.hx-bb-color-orange {
    color: #df6500 !important;
}

.hx-bb-color-purple {
    color: #82509b !important;
}

.hx-bb-color-gray {
    color: #777 !important;
}

.hx-bb-size-small {
    font-size: 8px !important;
    line-height: 12px !important;
}

.hx-bb-size-normal {
    font-size: 10px !important;
    line-height: 15px !important;
}

.hx-bb-size-large {
    font-size: 13px !important;
    line-height: 18px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 620px) {

    .hx-bb-help {
        display: none !important;
    }

    .hx-comment-replies {
        margin-left: 18px !important;
    }

    .hx-comment-reply-to {
        display: none !important;
    }

}


/* =========================================================
   V33 - HOTFIX RESPUESTAS / ELIMINAR / COMPOSER
   Corrige la herencia verde de los botones antiguos de V13-V19.
   ========================================================= */

/* El botón Responder NO debe heredar el botón verde global */
.hx-comments-shell .hx-comments-component button.hx-comment-reply-button,
.hx-comments-shell .hx-comments-component button.hx-comment-reply-button:hover,
.hx-comments-shell .hx-comments-component button.hx-comment-reply-button:focus {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline !important;

    color: #37729d !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font: normal 8px/12px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: underline !important;
    text-shadow: none !important;

    opacity: .9 !important;
}

.hx-comments-shell .hx-comments-component button.hx-comment-reply-button:hover {
    color: #df5b00 !important;
    opacity: 1 !important;
}


/* Toolbar BBCode: tampoco hereda el botón Publicar */
.hx-comments-shell .hx-comments-component button.hx-bb-tool {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;

    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #333 !important;

    background:
        linear-gradient(
            to bottom,
            #fff 0%,
            #ededed 48%,
            #dbdbdb 49%,
            #cecece 100%
        ) !important;

    border: 1px solid #999 !important;
    border-radius: 2px !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;

    font: bold 10px/19px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 1px 0 #fff !important;
}

.hx-comments-shell .hx-comments-component button.hx-bb-tool:hover {
    color: #111 !important;

    background:
        linear-gradient(
            to bottom,
            #fff6bc 0%,
            #f4df76 48%,
            #e8c94a 49%,
            #d7b62a 100%
        ) !important;

    border-color: #a08317 !important;
}


/* Cancelar respuesta */
.hx-comments-shell .hx-comments-component button.hx-comment-reply-cancel,
.hx-comments-shell .hx-comments-component button.hx-comment-reply-cancel:hover {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;

    margin: 0 !important;
    padding: 0 7px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #555 !important;
    background: #eee !important;

    border: 1px solid #aaa !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    font: normal 8px/17px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;
}

.hx-comments-shell .hx-comments-component button.hx-comment-reply-cancel:hover {
    color: #222 !important;
    background: #fff !important;
}


/* Publicar sigue siendo el único botón verde grande del formulario */
.hx-comments-shell .hx-comments-component button.hx-comment-submit {
    width: auto !important;
    min-width: 145px !important;
    max-width: none !important;

    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    display: inline-flex !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #65c929 0%,
            #4cb311 48%,
            #399b04 49%,
            #2d8900 100%
        ) !important;

    border: 1px solid #287600 !important;
}


/* Estado cuando se alcanzó el límite de nuevos comentarios */
.hx-comment-limit-notice,
.hx-comment-system-warning {
    margin: 0 0 5px !important;
    padding: 6px 8px !important;

    color: #5b543a !important;

    background:
        linear-gradient(
            to bottom,
            #fff8d4 0%,
            #f4e8aa 100%
        ) !important;

    border: 1px solid #c7b35e !important;
    border-radius: 2px !important;

    font: normal 9px/13px Verdana, Arial, Helvetica, sans-serif !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.hx-comment-system-warning {
    color: #71433f !important;

    background:
        linear-gradient(
            to bottom,
            #fff0eb 0%,
            #efd0c8 100%
        ) !important;

    border-color: #c98d81 !important;
}

.hx-bb-toolbar-disabled {
    opacity: .58 !important;
}

.hx-comment-textarea:disabled {
    color: #999 !important;
    background: #eeeeeb !important;
    cursor: not-allowed !important;
}

.hx-comments-shell .hx-comments-component button.hx-comment-submit:disabled,
.hx-comments-shell .hx-comments-component button.hx-bb-tool:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}


/* Mantener el botón eliminar pequeño aunque existan reglas globales */
.hx-comments-shell .hx-comments-component button.hx-comment-delete {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;

    margin: 0 !important;
    padding: 0 0 1px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: rgba(255,255,255,.92) !important;

    background:
        linear-gradient(
            to bottom,
            #bd6762 0%,
            #9d4540 100%
        ) !important;

    border: 1px solid #82403c !important;
    border-radius: 2px !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;

    font: bold 11px/15px Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.22) !important;

    opacity: .78 !important;
}

.hx-comments-shell .hx-comments-component button.hx-comment-delete:hover {
    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #cf625c 0%,
            #ae3731 100%
        ) !important;

    border-color: #861f1a !important;

    opacity: 1 !important;
}


/* =========================================================
   V35 - BBCODE COMPACTO / OLD-SCHOOL
   Reduce tamaño, elimina protagonismo verde y mantiene
   toda la barra en una sola línea siempre que haya espacio.
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEDOR BBCODE
   --------------------------------------------------------- */

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar {
    width: 100% !important;
    min-height: 29px !important;

    margin: 0 0 5px !important;
    padding: 3px 5px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    gap: 3px !important;

    background:
        linear-gradient(
            to bottom,
            #f4f4f2 0%,
            #e9e9e6 100%
        ) !important;

    border: 1px solid #c4c4c0 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   B / I / U / S
   Fuerza dimensiones para anular cualquier botón verde global.
   --------------------------------------------------------- */

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> button.hx-bb-tool {
    flex: 0 0 24px !important;

    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;

    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #454545 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #eeeeec 50%,
            #ddddda 51%,
            #d2d2cf 100%
        ) !important;

    background-color: #e5e5e2 !important;
    background-image:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #eeeeec 50%,
            #ddddda 51%,
            #d2d2cf 100%
        ) !important;

    border: 1px solid #9f9f9b !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    line-height: 19px !important;
    font-weight: bold !important;

    text-align: center !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 #fff !important;

    opacity: 1 !important;

    cursor: pointer !important;
}

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> button.hx-bb-tool:hover,
body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> button.hx-bb-tool:focus {
    color: #262626 !important;

    background:
        linear-gradient(
            to bottom,
            #fffbea 0%,
            #f5e9a8 50%,
            #ead67d 51%,
            #dec45a 100%
        ) !important;

    background-color: #f0dd8b !important;

    border-color: #a7954a !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> button.hx-bb-tool:disabled {
    color: #999 !important;
    background: #dededb !important;
    border-color: #bdbdb9 !important;
    opacity: .6 !important;
}


/* Formato visual de cada letra */
body#habbla-app
.hx-comments-shell
.hx-bb-tool-bold {
    font-weight: bold !important;
}

body#habbla-app
.hx-comments-shell
.hx-bb-tool-italic {
    font-style: italic !important;
}

body#habbla-app
.hx-comments-shell
.hx-bb-tool-underline {
    text-decoration: underline !important;
}

body#habbla-app
.hx-comments-shell
.hx-bb-tool-strike {
    text-decoration: line-through !important;
}


/* ---------------------------------------------------------
   SEPARADOR
   --------------------------------------------------------- */

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> .hx-bb-toolbar-separator {
    flex: 0 0 1px !important;

    width: 1px !important;
    height: 17px !important;

    margin: 0 3px !important;

    background: #c2c2be !important;

    border: 0 !important;
    border-right: 1px solid #fff !important;
}


/* ---------------------------------------------------------
   SELECT COLOR / TAMAÑO
   --------------------------------------------------------- */

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> select.hx-bb-select {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;

    margin: 0 !important;
    padding: 1px 18px 1px 5px !important;

    color: #555 !important;
    background-color: #fff !important;

    border: 1px solid #aaa !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 1px rgba(0,0,0,.035) !important;

    font: normal 8px/17px Verdana, Arial, Helvetica, sans-serif !important;

    line-height: 17px !important;

    cursor: pointer !important;
}

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> select.hx-bb-color-select {
    width: 72px !important;
}

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> select.hx-bb-size-select {
    width: 78px !important;
}


/* "BBCode" deja de competir visualmente */
body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar
> .hx-bb-help {
    margin: 0 0 0 5px !important;

    color: #aaa !important;

    font: normal 7px/11px Verdana, Arial, Helvetica, sans-serif !important;

    opacity: .8 !important;
}


/* ---------------------------------------------------------
   ESTADO BLOQUEADO
   --------------------------------------------------------- */

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-bb-toolbar.hx-bb-toolbar-disabled {
    opacity: .68 !important;
}


/* ---------------------------------------------------------
   RESPONDER: asegurar que siga siendo texto pequeño, no verde
   --------------------------------------------------------- */

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-comment-actions
> button.hx-comment-reply-button {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline !important;

    color: #477999 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font: normal 8px/12px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: underline !important;
    text-shadow: none !important;

    opacity: .85 !important;
}

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-comment-actions
> button.hx-comment-reply-button:hover {
    color: #dd5d00 !important;
    background: transparent !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   MÓVIL: deja que la barra envuelva solo si realmente no cabe
   --------------------------------------------------------- */

@media (max-width: 520px) {
    body#habbla-app
    .hx-comments-shell
    .hx-comments-component
    .hx-bb-toolbar {
        flex-wrap: wrap !important;
    }

    body#habbla-app
    .hx-comments-shell
    .hx-comments-component
    .hx-bb-toolbar
    > .hx-bb-help {
        display: none !important;
    }
}


/* =========================================================
   V36 - RESTAURAR DISEÑO DEL BOTÓN RESPONDER
   Mantiene la toolbar BBCode compacta de V35.
   ========================================================= */

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-comment-actions
> button.hx-comment-reply-button {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 76px !important;
    max-width: none !important;

    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;

    margin: 0 2px 0 0 !important;
    padding: 0 9px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            to bottom,
            #68c72d 0%,
            #52b51c 48%,
            #3d9d0d 49%,
            #338b08 100%
        ) !important;

    background-color: #4da915 !important;

    border: 1px solid #2c7a08 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 1px 0 rgba(255,255,255,.55) !important;

    font: bold 9px/18px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;
    text-decoration: none !important;

    text-shadow:
        0 -1px 0 rgba(0,0,0,.28) !important;

    opacity: 1 !important;

    cursor: pointer !important;
}

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-comment-actions
> button.hx-comment-reply-button:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            to bottom,
            #78d63a 0%,
            #5fc525 48%,
            #49ad14 49%,
            #3c990c 100%
        ) !important;

    background-color: #58ba1d !important;

    border-color: #286e07 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 1px 1px rgba(0,0,0,.10) !important;

    text-decoration: none !important;

    opacity: 1 !important;
}

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-comment-actions
> button.hx-comment-reply-button:active {
    background:
        linear-gradient(
            to bottom,
            #3d950f 0%,
            #4cab18 100%
        ) !important;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.18) !important;
}

body#habbla-app
.hx-comments-shell
.hx-comments-component
.hx-comment-actions
> button.hx-comment-reply-button:disabled {
    color: #eef7e8 !important;

    background:
        linear-gradient(
            to bottom,
            #9fc98a 0%,
            #84ad72 100%
        ) !important;

    border-color: #78956a !important;

    opacity: .65 !important;

    cursor: wait !important;
}


/* =========================================================
   V37 - COMMUNITY / STAFF HABBOEXTREME
   Rediseño completo sobre la base V36.
   ========================================================= */


/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */

body#habbla-app .hx-staff-page {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-staff-layout {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;

    gap: 10px !important;
    align-items: start !important;
}

body#habbla-app .hx-staff-main,
body#habbla-app .hx-staff-sidebar {
    min-width: 0 !important;
}

body#habbla-app .hx-staff-main {
    display: flex !important;
    flex-direction: column !important;

    gap: 8px !important;
}

body#habbla-app .hx-staff-sidebar {
    display: flex !important;
    flex-direction: column !important;

    gap: 8px !important;
}


/* ---------------------------------------------------------
   RANGO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-rank {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border: 1px solid #b9b9b6 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 1px 2px rgba(0,0,0,.08) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}

body#habbla-app .hx-staff-rank::before {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 4px !important;

    background: var(--hx-staff-accent, #327fa8) !important;

    z-index: 2 !important;
}


/* ---------------------------------------------------------
   CABECERA DEL RANGO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-rank-header {
    position: relative !important;

    min-height: 64px !important;

    margin: 0 !important;
    padding: 7px 10px 7px 66px !important;

    display: flex !important;
    align-items: center !important;

    background:
        linear-gradient(
            to bottom,
            #f7f7f5 0%,
            #ecece9 100%
        ) !important;

    border-bottom: 1px solid #c5c5c1 !important;

    box-sizing: border-box !important;
}

body#habbla-app .hx-staff-rank-badge {
    position: absolute !important;

    left: 12px !important;
    top: 50% !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #fff !important;

    border: 1px solid #b6b6b2 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 1px rgba(0,0,0,.06) !important;

    transform: translateY(-50%) !important;
}

body#habbla-app .hx-staff-rank-badge img {
    width: auto !important;
    height: auto !important;

    max-width: 40px !important;
    max-height: 40px !important;

    display: block !important;

    image-rendering: auto !important;
}

body#habbla-app .hx-staff-rank-copy {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

body#habbla-app .hx-staff-rank-copy h2 {
    margin: 0 0 3px !important;
    padding: 0 !important;

    color: #333 !important;

    font: bold 12px/16px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 1px 0 #fff !important;
}

body#habbla-app .hx-staff-rank-copy p {
    margin: 0 !important;
    padding: 0 !important;

    color: #777 !important;

    font: normal 9px/13px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   CUERPO / GRID DE MIEMBROS
   --------------------------------------------------------- */

body#habbla-app .hx-staff-rank-body {
    width: 100% !important;

    margin: 0 !important;
    padding: 7px !important;

    background: #fff !important;

    box-sizing: border-box !important;
}

body#habbla-app .hx-staff-members {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   TARJETA DE STAFF
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member {
    position: relative !important;

    min-width: 0 !important;
    min-height: 82px !important;

    margin: 0 !important;
    padding: 7px 7px 7px 70px !important;

    color: #444 !important;

    background:
        linear-gradient(
            to bottom,
            #f6f6f3 0%,
            #ebebe7 100%
        ) !important;

    border: 1px solid #bdbdb9 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 1px 1px rgba(0,0,0,.05) !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}

body#habbla-app .hx-staff-member::before {
    content: "" !important;

    position: absolute !important;
    left: 62px !important;
    top: 7px !important;
    bottom: 7px !important;

    width: 1px !important;

    background: #c7c7c3 !important;
}


/* Avatar */
body#habbla-app .hx-staff-member-avatar {
    position: absolute !important;

    left: 5px !important;
    top: 5px !important;

    width: 52px !important;
    height: 70px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background:
        linear-gradient(
            to bottom,
            #f0f4f5 0%,
            #dfe6e8 100%
        ) !important;

    border: 1px solid #a7afb2 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    overflow: hidden !important;
}

body#habbla-app .hx-staff-member-avatar img {
    position: absolute !important;

    left: 50% !important;
    bottom: -5px !important;

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: 75px !important;

    display: block !important;

    transform: translateX(-50%) !important;

    image-rendering: auto !important;
}


/* Datos */
body#habbla-app .hx-staff-member-data {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

body#habbla-app .hx-staff-member-top {
    min-width: 0 !important;

    margin: 0 0 4px !important;
    padding: 0 0 4px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 5px !important;

    border-bottom: 1px dotted #c5c5c1 !important;
}

body#habbla-app .hx-staff-member-user {
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 4px !important;
}

body#habbla-app .hx-staff-member-status {
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;

    max-width: 13px !important;
    max-height: 13px !important;

    display: block !important;

    image-rendering: auto !important;
}

body#habbla-app .hx-staff-member-name {
    min-width: 0 !important;

    color: #df5900 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body#habbla-app .hx-staff-member-name:hover {
    color: #b74700 !important;

    text-decoration: underline !important;
}

body#habbla-app .hx-staff-member-state {
    flex: 0 0 auto !important;

    color: #999 !important;

    font: normal 7px/11px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-staff-member-rank {
    margin: 0 0 3px !important;

    color: #39779d !important;

    font: bold 8px/12px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-staff-member-motto {
    margin: 0 !important;
    padding: 0 !important;

    color: #666 !important;

    font: normal 9px/13px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ---------------------------------------------------------
   RANGO VACÍO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-empty {
    min-height: 34px !important;

    margin: 0 !important;
    padding: 9px 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #92928e !important;

    background:
        linear-gradient(
            to bottom,
            #fafaf8 0%,
            #f0f0ed 100%
        ) !important;

    border: 1px dotted #c5c5c1 !important;
    border-radius: 2px !important;

    font: italic 8px/13px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   SIDEBAR / HABBLETS
   --------------------------------------------------------- */

body#habbla-app .hx-staff-panel {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border: 1px solid #b9b9b6 !important;
    border-radius: 4px !important;

    box-shadow:
        0 1px 2px rgba(0,0,0,.07) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}

body#habbla-app .hx-staff-panel-title {
    min-height: 30px !important;

    margin: 0 !important;
    padding: 5px 9px !important;

    display: flex !important;
    align-items: center !important;

    color: #fff !important;

    border-bottom: 1px solid rgba(0,0,0,.16) !important;

    box-sizing: border-box !important;

    font: bold 11px/18px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
}

body#habbla-app .hx-staff-panel-title-orange {
    background:
        linear-gradient(
            to bottom,
            #ff7b16 0%,
            #f46700 49%,
            #e85b00 50%,
            #d95000 100%
        ) !important;
}

body#habbla-app .hx-staff-panel-title-green {
    background:
        linear-gradient(
            to bottom,
            #69bc2f 0%,
            #50a91a 49%,
            #42950f 50%,
            #378409 100%
        ) !important;
}

body#habbla-app .hx-staff-panel-title-blue {
    background:
        linear-gradient(
            to bottom,
            #4388bb 0%,
            #3579ad 49%,
            #2c6da0 50%,
            #286797 100%
        ) !important;
}

body#habbla-app .hx-staff-panel-content {
    margin: 0 !important;
    padding: 8px 9px !important;

    color: #555 !important;

    background: #fff !important;

    font: normal 9px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-staff-panel-content h3 {
    margin: 0 0 6px !important;
    padding: 0 0 4px !important;

    color: #444 !important;

    border-bottom: 1px dotted #bdbdb9 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-staff-panel-content p {
    margin: 0 0 7px !important;
    padding: 0 !important;
}

body#habbla-app .hx-staff-panel-content p:last-child {
    margin-bottom: 0 !important;
}


/* Postulaciones */
body#habbla-app .hx-staff-apply {
    display: inline-block !important;

    margin: 3px 0 0 !important;
    padding: 0 !important;

    color: #df5900 !important;

    font: bold 9px/13px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: underline !important;
}

body#habbla-app .hx-staff-apply:hover {
    color: #ad4300 !important;
}


/* Identificación */
body#habbla-app .hx-staff-help {
    padding-top: 7px !important;
}

body#habbla-app .hx-staff-help-row {
    min-height: 23px !important;

    display: flex !important;
    align-items: center !important;

    gap: 6px !important;

    margin: 0 0 4px !important;
    padding: 3px 5px !important;

    background: #f0f0ed !important;

    border: 1px solid #d5d5d1 !important;
    border-radius: 2px !important;
}

body#habbla-app .hx-staff-help-row img {
    width: auto !important;
    height: auto !important;

    max-width: 15px !important;
    max-height: 15px !important;

    display: block !important;
}

body#habbla-app .hx-staff-help-note {
    margin-top: 7px !important;

    color: #888 !important;

    font-size: 8px !important;
    line-height: 12px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {
    body#habbla-app .hx-staff-layout {
        grid-template-columns: 1fr !important;
    }

    body#habbla-app .hx-staff-sidebar {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
}

@media (max-width: 700px) {
    body#habbla-app .hx-staff-members {
        grid-template-columns: 1fr !important;
    }

    body#habbla-app .hx-staff-sidebar {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V38 - STAFF: ONLINE/OFFLINE VISIBLE + 2 POR FILA
   ========================================================= */


/* ---------------------------------------------------------
   RANGOS SIN PLACA: eliminar el cuadro blanco vacío
   --------------------------------------------------------- */

body#habbla-app .hx-staff-rank-header-has-badge {
    padding-left: 66px !important;
}

body#habbla-app .hx-staff-rank-header-no-badge {
    min-height: 54px !important;

    padding-left: 14px !important;
}

body#habbla-app .hx-staff-rank-header-no-badge .hx-staff-rank-copy {
    padding-left: 0 !important;
}


/* ---------------------------------------------------------
   STAFF: SIEMPRE DOS POR FILA EN ESCRITORIO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-members {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;

    width: 100% !important;

    gap: 7px !important;

    align-items: stretch !important;
}

body#habbla-app .hx-staff-member {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 84px !important;
}


/* ---------------------------------------------------------
   CABECERA DE CADA STAFF
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member-top {
    min-height: 25px !important;

    margin: 0 0 4px !important;
    padding: 0 0 4px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 7px !important;
}


/* Nombre */
body#habbla-app .hx-staff-member-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    color: #df5900 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ---------------------------------------------------------
   ONLINE / OFFLINE COMO ESTADO VISIBLE
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member-state {
    flex: 0 0 auto !important;

    min-width: 66px !important;
    height: 21px !important;

    margin: 0 !important;
    padding: 0 6px 0 4px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    border: 1px solid #aaa !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88) !important;

    box-sizing: border-box !important;

    font: bold 8px/18px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;

    text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
}


/* Icono online/offline */
body#habbla-app .hx-staff-member-state .hx-staff-member-status {
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;

    max-width: 16px !important;
    max-height: 16px !important;

    display: block !important;

    image-rendering: auto !important;
}


/* ONLINE */
body#habbla-app .hx-staff-member-state-online {
    color: #2d6e0c !important;

    background:
        linear-gradient(
            to bottom,
            #eef9e7 0%,
            #d7edca 100%
        ) !important;

    border-color: #8eb879 !important;
}


/* OFFLINE */
body#habbla-app .hx-staff-member-state-offline {
    color: #666 !important;

    background:
        linear-gradient(
            to bottom,
            #f4f4f2 0%,
            #e4e4e1 100%
        ) !important;

    border-color: #aaa !important;
}


/* ---------------------------------------------------------
   RANGO / MOTTO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member-rank {
    margin: 0 0 3px !important;

    color: #39779d !important;

    font: bold 8px/12px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-staff-member-motto {
    margin: 0 !important;

    color: #666 !important;

    font: normal 9px/13px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   RANGO VACÍO MÁS COMPACTO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-rank-body:has(> .hx-staff-empty) {
    padding: 5px 7px !important;
}

body#habbla-app .hx-staff-empty {
    min-height: 30px !important;

    padding: 6px 9px !important;

    background: #f6f6f3 !important;

    border-color: #d2d2ce !important;

    color: #969691 !important;

    font-size: 8px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   En escritorio/tablet ancho: 2 por fila.
   Solo en móvil estrecho: 1 por fila.
   --------------------------------------------------------- */

@media (min-width: 701px) {
    body#habbla-app .hx-staff-members {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    body#habbla-app .hx-staff-members {
        grid-template-columns: 1fr !important;
    }

    body#habbla-app .hx-staff-member-state {
        min-width: 63px !important;
    }
}


/* =========================================================
   V39 - STAFF: KEKO A TAMAÑO NATIVO
   Usa avatar_imager size=m y evita escalar el sprite.
   Mantiene 2 Staff por fila.
   ========================================================= */


/* Dos por fila se mantiene */
body#habbla-app .hx-staff-members {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 7px !important;
}


/* Tarjeta más alta para alojar el keko completo */
body#habbla-app .hx-staff-member {
    min-height: 116px !important;
    padding: 8px 8px 8px 82px !important;
}


/* Separador vertical desplazado según el nuevo avatar */
body#habbla-app .hx-staff-member::before {
    left: 74px !important;
    top: 8px !important;
    bottom: 8px !important;
}


/* ---------------------------------------------------------
   KEKO NATIVO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member-avatar {
    position: absolute !important;

    left: 6px !important;
    top: 5px !important;

    width: 64px !important;
    height: 106px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background:
        linear-gradient(
            to bottom,
            #eef3f4 0%,
            #dfe6e8 100%
        ) !important;

    border: 1px solid #a7afb2 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    overflow: hidden !important;
}


/*
 * IMPORTANTE:
 * no se asigna width/height al PNG del avatar.
 * size=m devuelve el keko a tamaño Habbo normal y lo mostramos
 * con sus píxeles originales, sin encogerlo con max-height.
 */
body#habbla-app .hx-staff-member-avatar img {
    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    transform: translateX(-50%) !important;

    image-rendering: auto !important;
}


/* Datos un poco más centrados verticalmente */
body#habbla-app .hx-staff-member-data {
    min-height: 98px !important;

    padding-top: 7px !important;

    box-sizing: border-box !important;
}

body#habbla-app .hx-staff-member-top {
    margin-bottom: 6px !important;
}

body#habbla-app .hx-staff-member-rank {
    margin-bottom: 5px !important;

    font-size: 9px !important;
    line-height: 13px !important;
}

body#habbla-app .hx-staff-member-motto {
    font-size: 9px !important;
    line-height: 14px !important;
}


/* Responsive: solo una columna en móvil */
@media (max-width: 700px) {
    body#habbla-app .hx-staff-members {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V40 - STAFF STATUS SPRITES
   Usa únicamente los sprites ONLINE/OFFLINE entregados.
   Sin cápsula, sin texto adicional.
   Las placas de rango quedan desactivadas temporalmente.
   ========================================================= */


/* ---------------------------------------------------------
   CABECERA SIN PLACA DE RANGO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-rank-header,
body#habbla-app .hx-staff-rank-header-no-badge {
    min-height: 54px !important;
    padding: 8px 14px !important;
}

body#habbla-app .hx-staff-rank-badge {
    display: none !important;
}


/* ---------------------------------------------------------
   STATUS: SOLO IMAGEN
   --------------------------------------------------------- */

body#habbla-app
.hx-staff-member
.hx-staff-member-state {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 0 !important;

    color: inherit !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    text-shadow: none !important;

    line-height: 1 !important;
}


/* Anula fondos específicos de V38 */
body#habbla-app .hx-staff-member-state-online,
body#habbla-app .hx-staff-member-state-offline {
    color: inherit !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
}


/* No escalar los sprites: se muestran a tamaño real */
body#habbla-app
.hx-staff-member
.hx-staff-member-state
.hx-staff-member-status {
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    image-rendering: auto !important;
}


/* Un poco más de espacio para el sprite OFFLINE de 75 px */
body#habbla-app .hx-staff-member-top {
    gap: 8px !important;
}


/* ---------------------------------------------------------
   LEYENDA DERECHA: conservar el sprite a tamaño nativo
   --------------------------------------------------------- */

body#habbla-app .hx-staff-help-row img {
    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    image-rendering: auto !important;
}


/* =========================================================
   V42 - STAFF: MINI ESCENARIO PARA EL KEKO
   Mantiene el keko a tamaño nativo y mejora únicamente
   el espacio visual donde se presenta.
   ========================================================= */


/* ---------------------------------------------------------
   TARJETA: un poco más de aire sin perder 2 por fila
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member {
    min-height: 122px !important;

    padding:
        10px
        9px
        9px
        92px !important;

    background:
        linear-gradient(
            to bottom,
            #f8f8f5 0%,
            #eeeeea 100%
        ) !important;
}


/* Separador más suave */
body#habbla-app .hx-staff-member::before {
    left: 84px !important;

    top: 10px !important;
    bottom: 10px !important;

    width: 1px !important;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            #d4d4cf 14%,
            #c8c8c4 50%,
            #d4d4cf 86%,
            transparent 100%
        ) !important;
}


/* ---------------------------------------------------------
   MINI ESCENARIO HABBO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member-avatar {
    position: absolute !important;

    left: 7px !important;
    top: 7px !important;

    width: 70px !important;
    height: 108px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    /*
     * Pared muy sutil tipo habitación Habbo:
     * sin imagen externa, solo CSS para no depender de assets.
     */
    background-color: #e7edef !important;

    background-image:
        linear-gradient(
            rgba(255,255,255,.28) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(176,191,198,.16) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            #eef3f4 0%,
            #e4ebed 72%,
            #d5dcde 72%,
            #c9d0d2 100%
        ) !important;

    background-size:
        16px 16px,
        16px 16px,
        100% 100% !important;

    border: 1px solid #a9b1b4 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(0,0,0,.04),
        0 1px 1px rgba(0,0,0,.06) !important;

    overflow: hidden !important;
}


/* Línea de suelo old-school */
body#habbla-app .hx-staff-member-avatar::before {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 29px !important;

    height: 1px !important;

    background: #b8c1c4 !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.48) !important;

    z-index: 1 !important;
}


/* Base/sombra pixelada bajo los pies */
body#habbla-app .hx-staff-member-avatar::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 5px !important;

    width: 34px !important;
    height: 5px !important;

    transform: translateX(-50%) !important;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(75,82,84,.38) 0,
            rgba(75,82,84,.38) 3px,
            rgba(75,82,84,.20) 3px,
            rgba(75,82,84,.20) 5px
        ) !important;

    border-radius: 50% !important;

    opacity: .55 !important;

    z-index: 1 !important;
}


/* Keko a tamaño real, por delante del suelo y la base */
body#habbla-app .hx-staff-member-avatar img {
    position: absolute !important;

    left: 50% !important;
    bottom: 2px !important;

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    transform: translateX(-50%) !important;

    image-rendering: auto !important;

    z-index: 2 !important;
}


/* ---------------------------------------------------------
   DATOS: más aire y mejor jerarquía
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member-data {
    min-height: 100px !important;

    padding-top: 8px !important;

    box-sizing: border-box !important;
}

body#habbla-app .hx-staff-member-top {
    min-height: 25px !important;

    margin: 0 0 7px !important;
    padding: 0 0 5px !important;

    border-bottom-color: #cdcdc8 !important;
}

body#habbla-app .hx-staff-member-name {
    font-size: 10px !important;
    line-height: 14px !important;
}

body#habbla-app .hx-staff-member-rank {
    margin: 0 0 5px !important;

    color: #39779d !important;

    font-size: 9px !important;
    line-height: 13px !important;
}

body#habbla-app .hx-staff-member-motto {
    color: #666 !important;

    font-size: 9px !important;
    line-height: 14px !important;
}


/* ---------------------------------------------------------
   ONLINE/OFFLINE: no tocar el sprite, solo alineación
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member-state {
    align-self: flex-start !important;

    margin-top: 1px !important;
}


/* ---------------------------------------------------------
   DOS POR FILA SIGUE SIENDO LA REGLA
   --------------------------------------------------------- */

body#habbla-app .hx-staff-members {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
}


@media (max-width: 700px) {
    body#habbla-app .hx-staff-members {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V43 - STAFF: FONDO ORIGINAL HABBO EN EL KEKO
   Usa la parte izquierda de mepage_info_bg2.png.
   Mantiene el keko nativo, 2 Staff por fila y ONLINE/OFFLINE.
   ========================================================= */


/* ---------------------------------------------------------
   ESCENARIO DEL KEKO
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member-avatar {
    position: absolute !important;

    left: 7px !important;
    top: 7px !important;

    width: 70px !important;
    height: 108px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    /*
     * Se utiliza la parte izquierda de la imagen original.
     * La imagen completa NO se estira dentro del cuadro:
     * se escala únicamente por altura y el contenedor recorta
     * naturalmente la zona izquierda.
     */
    background-color: #dce5e8 !important;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08),
            rgba(255,255,255,.08)
        ),
        url('/assets/habboextreme/images/mepage_info_bg2.png') !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-position:
        left bottom,
        left bottom !important;

    background-size:
        100% 100%,
        auto 108px !important;

    border: 1px solid #9fa9ad !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        inset 0 -1px 0 rgba(0,0,0,.05),
        0 1px 1px rgba(0,0,0,.07) !important;

    overflow: hidden !important;
}


/*
 * La imagen ya incluye su propio escenario.
 * Quitamos la línea de suelo artificial de V42.
 */
body#habbla-app .hx-staff-member-avatar::before {
    display: none !important;
    content: none !important;
}


/*
 * Conservamos una sombra pixelada muy discreta para anclar
 * visualmente los pies del avatar sin tapar el fondo.
 */
body#habbla-app .hx-staff-member-avatar::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 4px !important;

    width: 32px !important;
    height: 4px !important;

    transform: translateX(-50%) !important;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(43,47,48,.34) 0,
            rgba(43,47,48,.34) 3px,
            rgba(43,47,48,.16) 3px,
            rgba(43,47,48,.16) 5px
        ) !important;

    border-radius: 50% !important;

    opacity: .46 !important;

    z-index: 1 !important;
}


/* Keko por encima del escenario, sin escalar */
body#habbla-app .hx-staff-member-avatar img {
    position: absolute !important;

    left: 50% !important;
    bottom: 2px !important;

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    transform: translateX(-50%) !important;

    image-rendering: auto !important;

    z-index: 2 !important;
}


/* ---------------------------------------------------------
   TARJETA
   --------------------------------------------------------- */

body#habbla-app .hx-staff-member {
    min-height: 122px !important;

    padding:
        10px
        9px
        9px
        92px !important;
}


/* Mantener dos usuarios por fila */
body#habbla-app .hx-staff-members {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
}


/* ONLINE/OFFLINE permanecen intactos */
body#habbla-app .hx-staff-member-state {
    margin-top: 1px !important;
}


@media (max-width: 700px) {
    body#habbla-app .hx-staff-members {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V44 - STAFF: PULIDO FINAL DEL FONDO DEL KEKO
   - Fondo desplazado ligeramente a la izquierda
   - Fondo ~10% más apagado para priorizar el avatar
   ========================================================= */

body#habbla-app .hx-staff-member-avatar {
    /*
     * Capa blanca tenue sobre la imagen para bajar su intensidad
     * sin afectar al keko, que sigue siendo un <img> independiente.
     */
    background-image:
        linear-gradient(
            rgba(255,255,255,.17),
            rgba(255,255,255,.17)
        ),
        url('/assets/habboextreme/images/mepage_info_bg2.png') !important;

    /*
     * Desplazamos el escenario 6px a la izquierda para que
     * el círculo naranja no quede tan centrado detrás de la cabeza.
     */
    background-position:
        left bottom,
        -6px bottom !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-size:
        100% 100%,
        auto 108px !important;
}


/* =========================================================
   V45 - COMUNIDAD / SALÓN DE LA FAMA
   Ranking clásico HabboExtreme, compacto y sin espacios vacíos.
   ========================================================= */


/* ---------------------------------------------------------
   PÁGINA
   --------------------------------------------------------- */

body#habbla-app .hx-hof-page {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

body#habbla-app .hx-hof-intro {
    width: 100% !important;

    margin: 0 0 9px !important;
    padding: 0 !important;

    background: #fff !important;

    border: 1px solid #b9b9b6 !important;
    border-radius: 4px !important;

    box-shadow: 0 1px 2px rgba(0,0,0,.07) !important;

    overflow: hidden !important;
}

body#habbla-app .hx-hof-intro-title {
    min-height: 31px !important;

    padding: 5px 10px !important;

    display: flex !important;
    align-items: center !important;

    color: #fff !important;

    background:
        linear-gradient(
            to bottom,
            #4388bb 0%,
            #3579ad 49%,
            #2c6da0 50%,
            #286797 100%
        ) !important;

    border-bottom: 1px solid #245e89 !important;

    font: bold 11px/18px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
}

body#habbla-app .hx-hof-intro-content {
    padding: 8px 10px !important;

    color: #555 !important;

    background: #fff !important;

    font: normal 9px/14px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   GRID 3 x 2
   --------------------------------------------------------- */

body#habbla-app .hx-hof-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 9px !important;

    align-items: start !important;
}


/* ---------------------------------------------------------
   TARJETA
   --------------------------------------------------------- */

body#habbla-app .hx-hof-card {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border: 1px solid #b9b9b6 !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 1px 2px rgba(0,0,0,.07) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   CABECERA
   --------------------------------------------------------- */

body#habbla-app .hx-hof-card-header {
    min-height: 31px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    color: #fff !important;

    border-bottom: 1px solid rgba(0,0,0,.16) !important;

    box-sizing: border-box !important;

    font: bold 10px/18px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;

    text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
}

body#habbla-app .hx-hof-card-icon {
    width: auto !important;
    height: auto !important;

    max-width: 22px !important;
    max-height: 22px !important;

    display: block !important;

    image-rendering: auto !important;
}


/* Variantes */
body#habbla-app .hx-hof-card-gold .hx-hof-card-header {
    background:
        linear-gradient(
            to bottom,
            #d4a824 0%,
            #bd8d10 49%,
            #a97905 50%,
            #946900 100%
        ) !important;
}

body#habbla-app .hx-hof-card-purple .hx-hof-card-header {
    background:
        linear-gradient(
            to bottom,
            #a956a8 0%,
            #91418f 49%,
            #7f337d 50%,
            #6e286c 100%
        ) !important;
}

body#habbla-app .hx-hof-card-cyan .hx-hof-card-header {
    background:
        linear-gradient(
            to bottom,
            #48aeb5 0%,
            #31979e 49%,
            #26878e 50%,
            #1b747a 100%
        ) !important;
}

body#habbla-app .hx-hof-card-blue .hx-hof-card-header {
    background:
        linear-gradient(
            to bottom,
            #4388bb 0%,
            #3579ad 49%,
            #2c6da0 50%,
            #286797 100%
        ) !important;
}

body#habbla-app .hx-hof-card-red .hx-hof-card-header {
    background:
        linear-gradient(
            to bottom,
            #cf5b50 0%,
            #b84339 49%,
            #a7352c 50%,
            #922a23 100%
        ) !important;
}

body#habbla-app .hx-hof-card-yellow .hx-hof-card-header {
    color: #4e4000 !important;

    background:
        linear-gradient(
            to bottom,
            #f5dc56 0%,
            #e8c832 49%,
            #d9b91c 50%,
            #c8a711 100%
        ) !important;

    text-shadow: 0 1px 0 rgba(255,255,255,.4) !important;
}


/* ---------------------------------------------------------
   CUERPO
   --------------------------------------------------------- */

body#habbla-app .hx-hof-card-body {
    margin: 0 !important;
    padding: 6px !important;

    background: #fff !important;
}


/* ---------------------------------------------------------
   POSICIONES
   --------------------------------------------------------- */

body#habbla-app .hx-hof-entry {
    position: relative !important;

    min-height: 70px !important;

    margin: 0 0 5px !important;
    padding: 6px 7px 6px 93px !important;

    display: flex !important;
    align-items: center !important;

    color: #444 !important;

    background:
        linear-gradient(
            to bottom,
            #f7f7f4 0%,
            #ecece8 100%
        ) !important;

    border: 1px solid #cacac6 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}

body#habbla-app .hx-hof-entry:last-child {
    margin-bottom: 0 !important;
}


/* Primero */
body#habbla-app .hx-hof-entry-1 {
    background:
        linear-gradient(
            to bottom,
            #fff8d7 0%,
            #f6e9aa 100%
        ) !important;

    border-color: #c9af4e !important;
}

/* Segundo */
body#habbla-app .hx-hof-entry-2 {
    background:
        linear-gradient(
            to bottom,
            #f5f6f7 0%,
            #e3e6e8 100%
        ) !important;

    border-color: #b9bdc0 !important;
}

/* Tercero */
body#habbla-app .hx-hof-entry-3 {
    background:
        linear-gradient(
            to bottom,
            #f7ede5 0%,
            #ead8ca 100%
        ) !important;

    border-color: #c2a18a !important;
}


/* ---------------------------------------------------------
   TROFEO / POSICIÓN
   --------------------------------------------------------- */

body#habbla-app .hx-hof-position {
    position: absolute !important;

    left: 7px !important;
    top: 50% !important;

    width: 34px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 1px !important;

    transform: translateY(-50%) !important;

    color: #777 !important;

    font: bold 7px/10px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-hof-position img {
    width: 24px !important;
    height: 24px !important;

    display: block !important;

    image-rendering: auto !important;
}


/* ---------------------------------------------------------
   AVATAR
   --------------------------------------------------------- */

body#habbla-app .hx-hof-avatar {
    position: absolute !important;

    left: 43px !important;
    top: 50% !important;

    width: 43px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255,255,255,.46) !important;

    border-left: 1px solid rgba(120,120,120,.22) !important;
    border-right: 1px solid rgba(255,255,255,.65) !important;

    transform: translateY(-50%) !important;

    overflow: hidden !important;
}

body#habbla-app .hx-hof-avatar img {
    width: auto !important;
    height: auto !important;

    max-width: 47px !important;
    max-height: 50px !important;

    display: block !important;

    image-rendering: auto !important;
}


/* ---------------------------------------------------------
   NOMBRE / VALOR
   --------------------------------------------------------- */

body#habbla-app .hx-hof-user {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

body#habbla-app .hx-hof-username {
    display: block !important;

    margin: 0 0 5px !important;

    color: #df5900 !important;

    font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body#habbla-app .hx-hof-username:hover {
    color: #b94700 !important;
    text-decoration: underline !important;
}

body#habbla-app .hx-hof-value {
    color: #6c6c68 !important;

    font: normal 8px/12px Verdana, Arial, Helvetica, sans-serif !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body#habbla-app .hx-hof-value strong {
    color: #3f3f3c !important;

    font-weight: bold !important;
}


/* ---------------------------------------------------------
   VACÍO
   --------------------------------------------------------- */

body#habbla-app .hx-hof-empty {
    min-height: 55px !important;

    padding: 12px 9px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #969691 !important;

    background:
        linear-gradient(
            to bottom,
            #fafaf8 0%,
            #f0f0ed 100%
        ) !important;

    border: 1px dotted #cececa !important;
    border-radius: 2px !important;

    font: italic 8px/12px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {
    body#habbla-app .hx-hof-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    body#habbla-app .hx-hof-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V46 - COLORES PLANOS
   Igualamos Staff + Salón de la Fama al lenguaje visual de /me:
   sin degradados, sin relieve y sin brillos en cabeceras.
   ========================================================= */


/* =========================================================
   STAFF - CABECERAS PLANAS
   ========================================================= */

body#habbla-app .hx-staff-panel-title {
    background-image: none !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border-bottom:
        1px solid rgba(0,0,0,.14) !important;
}

body#habbla-app .hx-staff-panel-title-orange {
    background: #f76500 !important;
    background-color: #f76500 !important;
    background-image: none !important;
}

body#habbla-app .hx-staff-panel-title-green {
    background: #43a50f !important;
    background-color: #43a50f !important;
    background-image: none !important;
}

body#habbla-app .hx-staff-panel-title-blue {
    background: #2f74ad !important;
    background-color: #2f74ad !important;
    background-image: none !important;
}


/* Quitar cualquier sensación de relieve del contenedor del panel */
body#habbla-app .hx-staff-panel {
    box-shadow:
        0 1px 2px rgba(0,0,0,.06) !important;
}


/* =========================================================
   SALÓN DE LA FAMA - INTRO PLANA
   ========================================================= */

body#habbla-app .hx-hof-intro-title {
    background: #2f74ad !important;
    background-color: #2f74ad !important;
    background-image: none !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border-bottom:
        1px solid rgba(0,0,0,.14) !important;
}


/* =========================================================
   SALÓN DE LA FAMA - CABECERAS PLANAS
   ========================================================= */

body#habbla-app .hx-hof-card-header {
    background-image: none !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border-bottom:
        1px solid rgba(0,0,0,.14) !important;
}


/* Créditos */
body#habbla-app
.hx-hof-card-gold
.hx-hof-card-header {
    background: #c99500 !important;
    background-color: #c99500 !important;
    background-image: none !important;

    color: #fff !important;
}


/* Duckets */
body#habbla-app
.hx-hof-card-purple
.hx-hof-card-header {
    background: #8e358c !important;
    background-color: #8e358c !important;
    background-image: none !important;

    color: #fff !important;
}


/* Diamantes */
body#habbla-app
.hx-hof-card-cyan
.hx-hof-card-header {
    background: #278f95 !important;
    background-color: #278f95 !important;
    background-image: none !important;

    color: #fff !important;
}


/* Horas online */
body#habbla-app
.hx-hof-card-blue
.hx-hof-card-header {
    background: #2f74ad !important;
    background-color: #2f74ad !important;
    background-image: none !important;

    color: #fff !important;
}


/* Respetos */
body#habbla-app
.hx-hof-card-red
.hx-hof-card-header {
    background: #b43b32 !important;
    background-color: #b43b32 !important;
    background-image: none !important;

    color: #fff !important;
}


/* Logros */
body#habbla-app
.hx-hof-card-yellow
.hx-hof-card-header {
    background: #d9b515 !important;
    background-color: #d9b515 !important;
    background-image: none !important;

    color: #4b3c00 !important;

    text-shadow: none !important;
}


/* =========================================================
   SALÓN DE LA FAMA - TARJETAS MENOS "MODERNAS"
   ========================================================= */

body#habbla-app .hx-hof-card {
    box-shadow:
        0 1px 2px rgba(0,0,0,.06) !important;
}

body#habbla-app .hx-hof-entry,
body#habbla-app .hx-hof-entry-1,
body#habbla-app .hx-hof-entry-2,
body#habbla-app .hx-hof-entry-3 {
    box-shadow: none !important;
}


/*
 * Las posiciones siguen diferenciándose, pero con fondos planos
 * y mucho más suaves.
 */
body#habbla-app .hx-hof-entry-1 {
    background: #fff3bf !important;
    background-color: #fff3bf !important;
    background-image: none !important;
}

body#habbla-app .hx-hof-entry-2 {
    background: #eef0f1 !important;
    background-color: #eef0f1 !important;
    background-image: none !important;
}

body#habbla-app .hx-hof-entry-3 {
    background: #f2e3d7 !important;
    background-color: #f2e3d7 !important;
    background-image: none !important;
}


/* Vacíos también planos */
body#habbla-app .hx-hof-empty {
    background: #f4f4f1 !important;
    background-color: #f4f4f1 !important;
    background-image: none !important;

    box-shadow: none !important;
}


/* =========================================================
   STAFF - TARJETAS Y VACÍOS MÁS PLANOS
   ========================================================= */

body#habbla-app .hx-staff-member {
    background: #f2f2ef !important;
    background-color: #f2f2ef !important;
    background-image: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65) !important;
}

body#habbla-app .hx-staff-empty {
    background: #f5f5f2 !important;
    background-color: #f5f5f2 !important;
    background-image: none !important;

    box-shadow: none !important;
}



/* =========================================================
   V47 - SALÓN DE LA FAMA: PULIDO FINAL
   - Puestos más uniformes
   - Avatar sin recuadro blanco
   - #1/#2/#3 más legibles
   - Separador punteado nombre/valor
   - Vacíos más compactos
   - Intro más baja
   - Amarillo de logros más suave
   ========================================================= */


/* ---------------------------------------------------------
   INTRO MÁS COMPACTA
   --------------------------------------------------------- */

body#habbla-app .hx-hof-intro {
    margin-bottom: 8px !important;
}

body#habbla-app .hx-hof-intro-title {
    min-height: 28px !important;

    padding: 4px 10px !important;

    font-size: 10px !important;
    line-height: 18px !important;
}

body#habbla-app .hx-hof-intro-content {
    padding: 6px 10px !important;

    font-size: 9px !important;
    line-height: 13px !important;
}


/* ---------------------------------------------------------
   CABECERA LOGROS: MOSTAZA MÁS SUAVE
   --------------------------------------------------------- */

body#habbla-app
.hx-hof-card-yellow
.hx-hof-card-header {
    background: #cfb122 !important;
    background-color: #cfb122 !important;
    background-image: none !important;

    color: #453900 !important;
}


/* ---------------------------------------------------------
   ENTRADAS UNIFORMES
   --------------------------------------------------------- */

body#habbla-app .hx-hof-entry,
body#habbla-app .hx-hof-entry-1,
body#habbla-app .hx-hof-entry-2,
body#habbla-app .hx-hof-entry-3 {
    min-height: 76px !important;
    height: 76px !important;

    padding-top: 7px !important;
    padding-bottom: 7px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   TROFEO + POSICIÓN MÁS LEGIBLE
   --------------------------------------------------------- */

body#habbla-app .hx-hof-position {
    width: 36px !important;

    color: #555 !important;

    font-size: 8px !important;
    line-height: 11px !important;
    font-weight: bold !important;
}

body#habbla-app .hx-hof-position img {
    width: 25px !important;
    height: 25px !important;
}

body#habbla-app .hx-hof-entry-1 .hx-hof-position {
    color: #765d00 !important;
}

body#habbla-app .hx-hof-entry-2 .hx-hof-position {
    color: #5f666a !important;
}

body#habbla-app .hx-hof-entry-3 .hx-hof-position {
    color: #76533e !important;
}


/* ---------------------------------------------------------
   AVATAR SIN RECTÁNGULO BLANCO
   --------------------------------------------------------- */

body#habbla-app .hx-hof-avatar {
    left: 44px !important;

    width: 45px !important;
    height: 54px !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}

body#habbla-app .hx-hof-avatar img {
    width: auto !important;
    height: auto !important;

    max-width: 48px !important;
    max-height: 52px !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    image-rendering: auto !important;
}


/* ---------------------------------------------------------
   USUARIO / VALOR
   --------------------------------------------------------- */

body#habbla-app .hx-hof-entry {
    padding-left: 96px !important;
}

body#habbla-app .hx-hof-user {
    width: 100% !important;
    min-width: 0 !important;
}

body#habbla-app .hx-hof-username {
    margin: 0 !important;
    padding: 0 0 5px !important;

    font-size: 10px !important;
    line-height: 14px !important;
}


/* Línea punteada clásica entre nombre y cantidad */
body#habbla-app .hx-hof-value {
    margin: 0 !important;
    padding: 5px 0 0 !important;

    border-top: 1px dotted #c3c3be !important;

    font-size: 8px !important;
    line-height: 12px !important;
}

body#habbla-app .hx-hof-entry-1 .hx-hof-value {
    border-top-color: #d8c36d !important;
}

body#habbla-app .hx-hof-entry-2 .hx-hof-value {
    border-top-color: #c8cccf !important;
}

body#habbla-app .hx-hof-entry-3 .hx-hof-value {
    border-top-color: #d2b9a8 !important;
}


/* ---------------------------------------------------------
   RANKINGS VACÍOS MÁS COMPACTOS
   --------------------------------------------------------- */

body#habbla-app .hx-hof-card-body {
    padding: 6px !important;
}

body#habbla-app .hx-hof-empty {
    min-height: 44px !important;

    padding: 8px 9px !important;

    font-size: 8px !important;
    line-height: 12px !important;
}


/* ---------------------------------------------------------
   GRID: MANTENER 3 x 2
   --------------------------------------------------------- */

body#habbla-app .hx-hof-grid {
    gap: 9px !important;
}

@media (min-width: 901px) {
    body#habbla-app .hx-hof-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}



/* =========================================================
   V48 - COMUNIDAD / EQUIPOS
   Rediseño visual sin alterar la lógica existente.
   Los nombres/descripciones son temporales hasta definir
   definitivamente la estructura de equipos de Habbla.
   ========================================================= */


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-intro {
    width: 100% !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    background: #fff !important;

    border: 1px solid #b9b9b6 !important;
    border-radius: 4px !important;

    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}

body#habbla-app.hx-teams-route .hx-teams-intro-title {
    min-height: 29px !important;

    margin: 0 !important;
    padding: 5px 10px !important;

    display: flex !important;
    align-items: center !important;

    color: #fff !important;

    background: #2f74ad !important;
    background-image: none !important;

    border-bottom: 1px solid rgba(0,0,0,.14) !important;

    font: bold 10px/18px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;
}

body#habbla-app.hx-teams-route .hx-teams-intro-content {
    margin: 0 !important;
    padding: 6px 10px !important;

    color: #555 !important;
    background: #fff !important;

    font: normal 9px/13px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   TÍTULO ORIGINAL
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-original-title {
    margin: 0 !important;
    padding: 0 !important;

    color: #3f3f3c !important;

    font: bold 12px/26px Verdana, Arial, Helvetica, sans-serif !important;
}


/* ---------------------------------------------------------
   TOOLBAR / BÚSQUEDA
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-toolbar,
body#habbla-app.hx-teams-route .hx-teams-toolbar-left,
body#habbla-app.hx-teams-route .hx-teams-toolbar-search {
    box-sizing: border-box !important;
}

body#habbla-app.hx-teams-route .hx-teams-search-wrap {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
}

body#habbla-app.hx-teams-route input.hx-teams-search-input {
    width: 100% !important;
    max-width: 430px !important;

    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 5px 34px 5px 10px !important;

    color: #555 !important;

    background: #fff !important;
    background-image: none !important;

    border: 1px solid #9e9e9a !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.05) !important;

    font: normal 9px/20px Verdana, Arial, Helvetica, sans-serif !important;

    outline: none !important;
}

body#habbla-app.hx-teams-route input.hx-teams-search-input:focus {
    border-color: #6d8fa7 !important;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.05),
        0 0 0 1px rgba(47,116,173,.12) !important;
}


/* ---------------------------------------------------------
   OCULTAR EQUIPOS VACÍOS
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-hide-label {
    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 6px !important;

    color: #555 !important;

    font: normal 9px/18px Verdana, Arial, Helvetica, sans-serif !important;

    cursor: pointer !important;
}

body#habbla-app.hx-teams-route input.hx-teams-hide-checkbox {
    width: 15px !important;
    height: 15px !important;

    margin: 0 !important;

    accent-color: #2f74ad !important;

    cursor: pointer !important;
}


/* ---------------------------------------------------------
   TARJETA DE EQUIPO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-card {
    position: relative !important;

    width: 100% !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    background: #fff !important;
    background-image: none !important;

    border: 1px solid #b9b9b6 !important;
    border-left: 4px solid #2f86ad !important;
    border-radius: 4px !important;

    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* Cabecera compacta, plana */
body#habbla-app.hx-teams-route .hx-team-card-title {
    min-height: 28px !important;

    margin: 0 !important;
    padding: 6px 100px 1px 11px !important;

    display: block !important;

    color: #3e3e3b !important;

    background: #f0f0ed !important;
    background-image: none !important;

    border: 0 !important;

    font: bold 10px/15px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;
}


/* Descripción temporal del área */
body#habbla-app.hx-teams-route .hx-team-card-description {
    min-height: 22px !important;

    margin: 0 !important;
    padding: 0 100px 6px 11px !important;

    color: #7a7a76 !important;

    background: #f0f0ed !important;

    border-bottom: 1px solid #c7c7c3 !important;

    font: normal 8px/13px Verdana, Arial, Helvetica, sans-serif !important;
}


/* Cantidad de miembros: pequeña, no cápsula moderna */
body#habbla-app.hx-teams-route .hx-team-count {
    position: absolute !important;

    right: 10px !important;
    top: 13px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 90px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #777 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font: normal 8px/12px Verdana, Arial, Helvetica, sans-serif !important;

    text-shadow: none !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   CUERPO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-card-body {
    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   EQUIPO VACÍO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-empty-wrap {
    margin: 0 !important;
    padding: 6px 8px !important;

    background: #fff !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}

body#habbla-app.hx-teams-route .hx-team-empty {
    min-height: 34px !important;

    margin: 0 !important;
    padding: 7px 9px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #969691 !important;

    background: #f5f5f2 !important;
    background-image: none !important;

    border: 1px dotted #cececa !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    font: italic 8px/13px Verdana, Arial, Helvetica, sans-serif !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   ANULAR ELEMENTOS MODERNOS COMUNES SOLO EN EQUIPOS
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-card .rounded-full,
body#habbla-app.hx-teams-route .hx-team-card [class*="rounded-full"] {
    border-radius: 2px !important;
}

body#habbla-app.hx-teams-route .hx-team-card [class*="shadow"] {
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {
    body#habbla-app.hx-teams-route .hx-team-card-title,
    body#habbla-app.hx-teams-route .hx-team-card-description {
        padding-right: 10px !important;
    }

    body#habbla-app.hx-teams-route .hx-team-count {
        position: static !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 11px 5px !important;

        background: #f0f0ed !important;
    }

    body#habbla-app.hx-teams-route input.hx-teams-search-input {
        max-width: none !important;
    }
}


/* =========================================================
   V49 - EQUIPOS: PULIDO FINAL DE ESTRUCTURA
   - Quita título "Equipos" duplicado
   - Busca/filtro compactos y en español
   - Cabecera completa por equipo
   - Equipos vacíos mucho más bajos
   ========================================================= */


/* ---------------------------------------------------------
   QUITAR TÍTULO DUPLICADO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-original-title {
    display: none !important;
}


/* ---------------------------------------------------------
   TOOLBAR MÁS COMPACTA
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-toolbar {
    width: 100% !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

body#habbla-app.hx-teams-route .hx-teams-search-wrap {
    flex: 0 1 390px !important;

    width: auto !important;
    max-width: 390px !important;
}

body#habbla-app.hx-teams-route input.hx-teams-search-input {
    width: 100% !important;
    max-width: none !important;

    height: 30px !important;
    min-height: 30px !important;

    padding:
        4px
        31px
        4px
        9px !important;

    font:
        normal 9px/18px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;
}


/* Filtro compacto */
body#habbla-app.hx-teams-route .hx-teams-hide-label {
    flex: 0 0 auto !important;

    height: 30px !important;

    padding: 0 2px !important;

    font-size: 8px !important;
    line-height: 30px !important;

    white-space: nowrap !important;
}

body#habbla-app.hx-teams-route input.hx-teams-hide-checkbox {
    width: 13px !important;
    height: 13px !important;
}


/* ---------------------------------------------------------
   CABECERA GENERADA A TODO EL ANCHO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-generated-header {
    position: relative !important;

    width: 100% !important;
    min-height: 49px !important;

    margin: 0 !important;
    padding: 7px 95px 7px 11px !important;

    display: flex !important;
    align-items: center !important;

    background: #f0f0ed !important;
    background-image: none !important;

    border-bottom: 1px solid #c8c8c4 !important;

    box-sizing: border-box !important;
}

body#habbla-app.hx-teams-route .hx-team-generated-copy {
    min-width: 0 !important;
}

body#habbla-app.hx-teams-route .hx-team-generated-title {
    margin: 0 0 3px !important;
    padding: 0 !important;

    color: #3d3d3a !important;

    font:
        bold 10px/14px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;
}

body#habbla-app.hx-teams-route .hx-team-generated-description {
    margin: 0 !important;
    padding: 0 !important;

    color: #777773 !important;

    font:
        normal 8px/12px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body#habbla-app.hx-teams-route .hx-team-generated-count {
    position: absolute !important;

    right: 11px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    color: #777 !important;

    font:
        normal 8px/12px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;

    white-space: nowrap !important;
}


/* Ocultar cabecera parcial/original del componente */
body#habbla-app.hx-teams-route .hx-team-original-heading-hidden,
body#habbla-app.hx-teams-route .hx-team-original-count-hidden,
body#habbla-app.hx-teams-route .hx-team-original-description-hidden {
    display: none !important;
}


/* ---------------------------------------------------------
   EQUIPO VACÍO MÁS BAJO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-card {
    margin-bottom: 8px !important;
}

body#habbla-app.hx-teams-route .hx-team-empty-wrap {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 5px 7px !important;

    background: #fff !important;

    border: 0 !important;
}

body#habbla-app.hx-teams-route .hx-team-empty {
    min-height: 29px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    color: #969691 !important;

    background: #f5f5f2 !important;
    background-image: none !important;

    border: 1px dotted #cececa !important;
    border-radius: 2px !important;

    font:
        italic 8px/13px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;
}


/*
 * Neutralizar alturas mínimas heredadas del componente moderno
 * cuando el equipo no tiene miembros.
 */
body#habbla-app.hx-teams-route
.hx-team-card:has(.hx-team-empty)
> *:not(.hx-team-generated-header) {
    min-height: 0 !important;
}


/* ---------------------------------------------------------
   BORRAR VISUALMENTE LA CABECERA GRIS V48 PARCIAL
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-card-title,
body#habbla-app.hx-teams-route .hx-team-card-description,
body#habbla-app.hx-teams-route .hx-team-count {
    display: none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {
    body#habbla-app.hx-teams-route .hx-teams-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;

        gap: 5px !important;
    }

    body#habbla-app.hx-teams-route .hx-teams-search-wrap {
        flex: none !important;

        width: 100% !important;
        max-width: none !important;
    }

    body#habbla-app.hx-teams-route .hx-teams-hide-label {
        height: 24px !important;

        line-height: 24px !important;
    }

    body#habbla-app.hx-teams-route .hx-team-generated-header {
        min-height: 0 !important;

        padding-right: 11px !important;
    }

    body#habbla-app.hx-teams-route .hx-team-generated-count {
        position: static !important;

        margin-top: 4px !important;

        transform: none !important;
    }
}



/* =========================================================
   V50 - EQUIPOS: COMPACTO FINAL
   - Elimina el espacio blanco heredado en equipos vacíos
   - Deja cada equipo vacío en ~85-95 px
   - Traduce el filtro definitivamente
   - Buscador ligeramente más compacto
   ========================================================= */


/* ---------------------------------------------------------
   TOOLBAR
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-toolbar {
    margin-bottom: 7px !important;

    gap: 8px !important;
}

body#habbla-app.hx-teams-route .hx-teams-search-wrap {
    flex-basis: 360px !important;
    max-width: 360px !important;
}

body#habbla-app.hx-teams-route input.hx-teams-search-input {
    height: 28px !important;
    min-height: 28px !important;

    padding:
        3px
        29px
        3px
        8px !important;

    font:
        normal 8px/18px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;
}


/* ---------------------------------------------------------
   FILTRO EN ESPAÑOL Y MÁS OLD
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-hide-label {
    height: 28px !important;

    padding: 0 !important;

    color: #666 !important;

    font:
        normal 8px/28px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;
}

body#habbla-app.hx-teams-route input.hx-teams-hide-checkbox {
    width: 13px !important;
    height: 13px !important;

    appearance: auto !important;
    -webkit-appearance: checkbox !important;

    accent-color: #2f74ad !important;
}


/* ---------------------------------------------------------
   CABECERA DEL EQUIPO MÁS BAJA
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-generated-header {
    min-height: 46px !important;

    padding:
        6px
        92px
        6px
        10px !important;
}

body#habbla-app.hx-teams-route .hx-team-generated-title {
    margin-bottom: 2px !important;

    font-size: 9px !important;
    line-height: 13px !important;
}

body#habbla-app.hx-teams-route .hx-team-generated-description {
    font-size: 8px !important;
    line-height: 12px !important;
}

body#habbla-app.hx-teams-route .hx-team-generated-count {
    right: 10px !important;

    font-size: 8px !important;
    line-height: 12px !important;
}


/* ---------------------------------------------------------
   EQUIPO VACÍO: NUEVO CUERPO COMPACTO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-card-is-empty {
    min-height: 0 !important;
    height: auto !important;

    margin-bottom: 8px !important;

    overflow: hidden !important;
}


/*
 * Ocultamos por completo el contenedor moderno original que
 * generaba el gran hueco blanco.
 */
body#habbla-app.hx-teams-route
.hx-team-original-empty-container-hidden {
    display: none !important;

    min-height: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
}


/* Mensaje nuevo inmediatamente debajo de la cabecera */
body#habbla-app.hx-teams-route .hx-team-compact-empty {
    min-height: 34px !important;

    margin: 0 !important;
    padding: 6px 9px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #969691 !important;

    background: #f5f5f2 !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 1px dotted #cececa !important;

    box-shadow: none !important;

    font:
        italic 8px/13px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/*
 * En vacío, la tarjeta completa queda alrededor de 80-90px
 * según tipografía/render del navegador.
 */
body#habbla-app.hx-teams-route .hx-team-card-is-empty {
    padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
   ANULAR ALTURAS MODERNAS RESIDUALES
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route
.hx-team-card-is-empty
[class*="min-h-"],
body#habbla-app.hx-teams-route
.hx-team-card-is-empty
[class*="h-"] {
    min-height: 0 !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {
    body#habbla-app.hx-teams-route .hx-teams-search-wrap {
        max-width: none !important;
    }

    body#habbla-app.hx-teams-route .hx-team-generated-header {
        padding-right: 10px !important;
    }
}



/* =========================================================
   V51 - EQUIPOS: ELIMINAR HUECO RESIDUAL EN EQUIPOS VACÍOS
   ========================================================= */


/*
 * En un equipo vacío solo deben existir visualmente:
 * - cabecera generada
 * - mensaje compacto
 *
 * Cualquier wrapper original de AtomCMS queda completamente fuera
 * del flujo para que sus min-height/padding no reserven espacio.
 */
body#habbla-app.hx-teams-route
.hx-team-card-is-empty
> .hx-team-empty-original-block {
    display: none !important;

    position: absolute !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;
}


/*
 * Refuerzo adicional por si algún navegador todavía conserva
 * dimensiones de clases utility en el card original.
 */
body#habbla-app.hx-teams-route
.hx-team-card.hx-team-card-is-empty {
    display: block !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin-bottom: 8px !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* Cabecera compacta final */
body#habbla-app.hx-teams-route
.hx-team-card-is-empty
> .hx-team-generated-header {
    min-height: 45px !important;
    height: auto !important;

    margin: 0 !important;
}


/* Mensaje pegado inmediatamente a la cabecera */
body#habbla-app.hx-teams-route
.hx-team-card-is-empty
> .hx-team-compact-empty {
    min-height: 32px !important;
    height: 32px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-top: 1px dotted #cececa !important;

    box-sizing: border-box !important;
}


/*
 * Altura final aproximada:
 * 45px cabecera + 32px mensaje + bordes.
 */
body#habbla-app.hx-teams-route
.hx-team-card-is-empty::after {
    display: none !important;
    content: none !important;
}



/* =========================================================
   V52 - EQUIPOS: ESPACIADO FINAL
   Solo ajusta separación vertical y alineación.
   ========================================================= */


/* ---------------------------------------------------------
   CABECERA + TOOLBAR MÁS JUNTAS
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-teams-intro {
    margin-bottom: 5px !important;
}

body#habbla-app.hx-teams-route .hx-teams-toolbar {
    margin-top: 0 !important;
    margin-bottom: 6px !important;

    gap: 7px !important;
}


/* ---------------------------------------------------------
   EQUIPOS MÁS CERCA ENTRE SÍ
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-card {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

body#habbla-app.hx-teams-route .hx-team-card:last-of-type {
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   CABECERA DEL EQUIPO MÁS COMPACTA
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-generated-header {
    min-height: 44px !important;

    padding:
        5px
        90px
        5px
        10px !important;
}

body#habbla-app.hx-teams-route .hx-team-generated-title {
    margin-bottom: 1px !important;
}


/* ---------------------------------------------------------
   "0 miembros" MEJOR CENTRADO
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route .hx-team-generated-count {
    top: 50% !important;

    transform: translateY(-50%) !important;

    display: flex !important;
    align-items: center !important;

    min-height: 18px !important;

    color: #777 !important;
}


/* ---------------------------------------------------------
   MENSAJE VACÍO MÁS PEGADO A LA CABECERA
   --------------------------------------------------------- */

body#habbla-app.hx-teams-route
.hx-team-card-is-empty
> .hx-team-compact-empty {
    height: 30px !important;
    min-height: 30px !important;

    padding: 4px 8px !important;
}


/* Altura total aproximada: 44 + 30 + bordes */
body#habbla-app.hx-teams-route .hx-team-card-is-empty {
    margin-bottom: 5px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {
    body#habbla-app.hx-teams-route .hx-team-generated-header {
        padding-right: 10px !important;
    }

    body#habbla-app.hx-teams-route .hx-team-card {
        margin-bottom: 5px !important;
    }
}

/* =========================================================

/* =========================================================
   V53 FINAL - /USER/ME
   Consolidado: amigos, referidos, noticias, placas y Discord.
   Reemplaza los parches V53/V54/V55 anteriores.
   ========================================================= */

/* ---------- HABBLETS /ME ---------- */

body#habbla-app #column1 .habblet-container,
body#habbla-app #column2 .habblet-container {
    margin-bottom: 8px !important;
}

body#habbla-app #column1 .cbb,
body#habbla-app #column2 .cbb {
    width: 100% !important;
    margin: 0 !important;
}

/* ---------- AMIGOS EN LINEA ---------- */

body#habbla-app .hx-me-friends .hx-friends-box {
    min-height: 74px !important;
    padding: 10px 12px !important;
    display: block !important;
    overflow: visible !important;
}

body#habbla-app .hx-me-friends .habbla-online-friends-list {
    width: 100% !important;
    min-height: 54px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: visible !important;
}

body#habbla-app .hx-friend-card {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    overflow: visible !important;
}

body#habbla-app .habbla-friend-avatar {
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef0ee !important;
    border: 1px solid #b9b9b9 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

body#habbla-app .habbla-friend-avatar:hover {
    background: #fff !important;
    border-color: #777 !important;
}

body#habbla-app .habbla-friend-avatar img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
}

body#habbla-app .hx-friend-tooltip {
    position: absolute !important;
    z-index: 30000 !important;
    left: 0 !important;
    top: calc(100% + 7px) !important;
    width: 245px !important;
    padding: 8px 10px !important;
    display: none !important;
    color: #536073 !important;
    background: #fff !important;
    border: 1px solid #9c9c9c !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.24) !important;
    font: normal 11px/16px Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

body#habbla-app .hx-friend-card:hover .hx-friend-tooltip,
body#habbla-app .hx-friend-card:focus-within .hx-friend-tooltip {
    display: block !important;
}

body#habbla-app .hx-friend-tooltip::before {
    content: "" !important;
    position: absolute !important;
    left: 19px !important;
    top: -6px !important;
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    border-left: 1px solid #9c9c9c !important;
    border-top: 1px solid #9c9c9c !important;
    transform: rotate(45deg) !important;
}

body#habbla-app .hx-friend-name {
    display: block !important;
    margin: 0 0 4px !important;
    color: #3e4c62 !important;
    font: bold 14px/18px Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-friend-tooltip span {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    color: #536073 !important;
    font: normal 11px/16px Arial, Helvetica, sans-serif !important;
    white-space: normal !important;
    text-overflow: clip !important;
}

/* ---------- REFERIDOS ---------- */

body#habbla-app .hx-referrals-habblet .box-content {
    padding: 10px 12px 12px !important;
}

body#habbla-app .hx-referrals-habblet p {
    margin: 0 0 8px !important;
}

body#habbla-app .hx-referrals-lead {
    color: #222 !important;
    font-weight: bold !important;
}

body#habbla-app .hx-referrals-copy {
    color: #555 !important;
    line-height: 17px !important;
}

body#habbla-app .hx-referrals-habblet .hx-warning {
    margin: 2px 0 10px !important;
    color: #e00000 !important;
    line-height: 17px !important;
}

/* ---------- ULTIMAS NOTICIAS ---------- */

body#habbla-app #column2 .hx-news-habblet {
    margin-bottom: 10px !important;
}

body#habbla-app #column2 .hx-news-box {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body#habbla-app #column2 .hx-news-box .articles-slider,
body#habbla-app #column2 .hx-news-box .swiper,
body#habbla-app #column2 .hx-news-box .swiper-wrapper,
body#habbla-app #column2 .hx-news-box .swiper-slide,
body#habbla-app #column2 .hx-news-box .make-news-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* La tarjeta real usa 225px de imagen + 58px de pie. */
body#habbla-app #column2 .hx-news-box .articles-slider,
body#habbla-app #column2 .hx-news-box .swiper,
body#habbla-app #column2 .hx-news-box .swiper-wrapper,
body#habbla-app #column2 .hx-news-box .make-news-card {
    height: 283px !important;
    min-height: 283px !important;
}

body#habbla-app #column2 .hx-news-box .make-news-image {
    height: 225px !important;
    min-height: 225px !important;
    flex: 0 0 225px !important;
    background-position: center !important;
    background-size: cover !important;
}

body#habbla-app #column2 .hx-news-box .make-news-bottom {
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
}

/* ---------- ULTIMAS PLACAS ---------- */

body#habbla-app .hx-badges-habblet {
    overflow: visible !important;
}

body#habbla-app .hx-badges-habblet .cbb,
body#habbla-app .hx-badges-habblet .box-content {
    overflow: visible !important;
}

body#habbla-app .hx-badges-habblet .box-content {
    padding: 10px !important;
}

body#habbla-app .hx-badges-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
}

body#habbla-app .hx-badge-item {
    position: relative !important;
    min-width: 0 !important;
    height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    color: #555 !important;
    background: #f4f4f4 !important;
    border: 1px solid #d3d3d3 !important;
    text-align: center !important;
    overflow: visible !important;
    cursor: help !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-badge-preview {
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px dotted #bcbcbc !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-badge-preview img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 48px !important;
    max-height: 48px !important;
    image-rendering: pixelated;
}

/* Tooltip completamente fuera del flujo: nunca agranda la tarjeta. */
body#habbla-app .hx-badge-tooltip {
    position: absolute !important;
    z-index: 40000 !important;
    left: 50% !important;
    bottom: calc(100% + 9px) !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    color: #333 !important;
    background: linear-gradient(to bottom, #fff 0%, #f4f4f4 100%) !important;
    border: 1px solid #777 !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.28) !important;
    box-sizing: border-box !important;
    text-align: left !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, 4px) !important;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease !important;
    pointer-events: none !important;
}

body#habbla-app .hx-badge-item:hover .hx-badge-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

body#habbla-app .hx-badge-tooltip::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -6px !important;
    width: 10px !important;
    height: 10px !important;
    background: #f4f4f4 !important;
    border-right: 1px solid #777 !important;
    border-bottom: 1px solid #777 !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

body#habbla-app .hx-badge-tooltip-image {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eceeee !important;
    border: 1px solid #c8c8c8 !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-badge-tooltip-image img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 40px !important;
    max-height: 40px !important;
    image-rendering: pixelated;
}

body#habbla-app .hx-badge-tooltip-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body#habbla-app .hx-badge-tooltip-content strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #333 !important;
    font: bold 11px/15px Arial, Helvetica, sans-serif !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body#habbla-app .hx-badge-tooltip-content span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #777 !important;
    font: normal 10px/13px Arial, Helvetica, sans-serif !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body#habbla-app .hx-badges-footer {
    margin-top: 8px !important;
    text-align: right !important;
}

body#habbla-app .hx-badges-footer a {
    color: #f45100 !important;
    font: normal 11px/14px Verdana, Arial, Helvetica, sans-serif !important;
    text-decoration: none !important;
}

body#habbla-app .hx-badges-footer a:hover {
    text-decoration: underline !important;
}

/* ---------- DISCORD ---------- */

body#habbla-app .hx-discord-habblet,
body#habbla-app .hx-discord-habblet .cbb,
body#habbla-app .hx-discord-habblet .box-content,
body#habbla-app .hx-discord-habblet .hx-discord-box,
body#habbla-app .hx-discord-habblet .make-discord-widget {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

body#habbla-app .hx-discord-habblet .box-content,
body#habbla-app .hx-discord-habblet .hx-discord-box {
    padding: 8px !important;
}

body#habbla-app .hx-discord-habblet .make-discord-widget {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #b9b9b9 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-discord-habblet .make-discord-server {
    min-height: 56px !important;
    height: 56px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    background: linear-gradient(to bottom, #f6f6f6, #ebebeb) !important;
    border-bottom: 1px solid #ccc !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-discord-logo {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: #5865f2 !important;
    border-radius: 6px !important;
    font: bold 20px/38px Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-discord-server-data {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body#habbla-app .hx-discord-server-data strong {
    color: #555 !important;
    font: bold 11px/14px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-discord-server-data span {
    color: #888 !important;
    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-discord-habblet .make-discord-users {
    min-height: 0 !important;
    height: auto !important;
    max-height: 180px !important;
    padding: 6px 8px !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-discord-habblet .make-discord-loading,
body#habbla-app .hx-discord-habblet .make-discord-empty,
body#habbla-app .hx-discord-habblet .hx-discord-offline {
    min-height: 66px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #777 !important;
    font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-discord-habblet .hx-discord-offline {
    flex-direction: column !important;
    gap: 3px !important;
}

body#habbla-app .hx-discord-habblet .make-discord-join {
    width: 145px !important;
    min-height: 28px !important;
    margin: 7px auto 8px !important;
    padding: 4px 10px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: linear-gradient(to bottom, #65c929, #2d8900) !important;
    border: 1px solid #287600 !important;
    border-radius: 3px !important;
    font: bold 10px/16px Verdana, Arial, Helvetica, sans-serif !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-discord-habblet .make-discord-join[style*="display: none"],
body#habbla-app .hx-discord-habblet .make-discord-join[style*="display:none"] {
    display: none !important;
}

body#habbla-app .hx-discord-habblet .make-discord-join[style*="display: flex"],
body#habbla-app .hx-discord-habblet .make-discord-join[style*="display:flex"] {
    display: flex !important;
}

/* ---------- GENERAL ---------- */

body#habbla-app #new-personal-info #link-bar a {
    font-variant-numeric: tabular-nums !important;
}

body#habbla-app .hx-empty {
    margin: 0 !important;
    padding: 14px 5px !important;
    color: #888 !important;
    text-align: center !important;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 960px) {
    body#habbla-app .hx-badge-tooltip {
        left: 50% !important;
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* =========================================================
   V59 - /USER/ME FINAL
   Amigos: cabeza frontal + sonrisa + tooltip tipo placas
   Placas: grid ordenado + tooltip completo
   Discord: conserva el bloque funcional anterior
   ========================================================= */


/* =========================================================
   AMIGOS EN LINEA
   ========================================================= */

body#habbla-app .hx-me-friends {
    position: relative !important;
    z-index: 1200 !important;
    overflow: visible !important;
}

body#habbla-app .hx-me-friends .hx-friends-shell,
body#habbla-app .hx-me-friends .cbb,
body#habbla-app .hx-me-friends .box-content,
body#habbla-app .hx-me-friends .hx-friends-box,
body#habbla-app .hx-me-friends .habbla-online-friends-list {
    overflow: visible !important;
}

body#habbla-app .hx-me-friends .hx-friends-box {
    min-height: 84px !important;
    height: auto !important;
    padding: 10px 12px !important;
    display: block !important;
}

body#habbla-app .hx-me-friends .habbla-online-friends-list {
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

body#habbla-app .hx-me-friends .hx-friend-card {
    position: relative !important;
    z-index: 1 !important;
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:hover,
body#habbla-app .hx-me-friends .hx-friend-card:focus-within {
    z-index: 80000 !important;
}

body#habbla-app .hx-me-friends .habbla-friend-avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(to bottom, #f7f8f7 0%, #eceeed 100%) !important;
    border: 1px solid #a9acab !important;
    border-radius: 3px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

body#habbla-app .hx-me-friends .habbla-friend-avatar:hover,
body#habbla-app .hx-me-friends .habbla-friend-avatar:focus {
    background: #fff !important;
    border-color: #777 !important;
    outline: 0 !important;
}

body#habbla-app .hx-me-friends .habbla-friend-avatar img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 60px !important;
    max-height: 60px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    image-rendering: auto !important;
}


/* =========================================================
   TOOLTIP AMIGOS
   ========================================================= */

body#habbla-app .hx-me-friends .hx-friend-tooltip {
    position: absolute !important;
    z-index: 90000 !important;
    left: 50% !important;
    bottom: calc(100% + 10px) !important;
    top: auto !important;
    width: 248px !important;
    min-width: 248px !important;
    max-width: 248px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 9px !important;
    color: #333 !important;
    background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 100%) !important;
    border: 1px solid #6f6f6f !important;
    border-radius: 4px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, 3px) !important;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease !important;
    pointer-events: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:hover .hx-friend-tooltip,
body#habbla-app .hx-me-friends .hx-friend-card:focus-within .hx-friend-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

body#habbla-app .hx-me-friends .hx-friend-tooltip::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -6px !important;
    width: 10px !important;
    height: 10px !important;
    background: #f4f4f4 !important;
    border-right: 1px solid #6f6f6f !important;
    border-bottom: 1px solid #6f6f6f !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:nth-child(6n + 1) .hx-friend-tooltip {
    left: 0 !important;
    transform: translate(0, 3px) !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:nth-child(6n + 1):hover .hx-friend-tooltip,
body#habbla-app .hx-me-friends .hx-friend-card:nth-child(6n + 1):focus-within .hx-friend-tooltip {
    transform: translate(0, 0) !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:nth-child(6n + 1) .hx-friend-tooltip::before {
    left: 31px !important;
}

body#habbla-app .hx-friend-tooltip-image {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eceeee !important;
    border: 1px solid #c7c7c7 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

body#habbla-app .hx-friend-tooltip-image img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    image-rendering: auto !important;
}

body#habbla-app .hx-friend-tooltip-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

body#habbla-app .hx-friend-tooltip-content span,
body#habbla-app .hx-friend-tooltip-content strong {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body#habbla-app .hx-friend-tooltip-kicker {
    color: #3a9d1e !important;
    font: bold 8px/10px Verdana, Arial, Helvetica, sans-serif !important;
    letter-spacing: .3px !important;
}

body#habbla-app .hx-friend-tooltip-content strong {
    color: #2e3947 !important;
    font: bold 12px/15px Arial, Helvetica, sans-serif !important;
    word-break: break-word !important;
}

body#habbla-app .hx-friend-tooltip-copy {
    color: #666 !important;
    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-friend-tooltip-meta {
    margin-top: 2px !important;
    color: #929292 !important;
    font: normal 8px/11px Verdana, Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   PLACAS
   ========================================================= */

body#habbla-app .hx-badges-habblet {
    position: relative !important;
    z-index: 1100 !important;
    overflow: visible !important;
}

body#habbla-app .hx-badges-habblet .hx-badges-shell,
body#habbla-app .hx-badges-habblet .cbb,
body#habbla-app .hx-badges-habblet .box-content,
body#habbla-app .hx-badges-grid {
    overflow: visible !important;
}

body#habbla-app .hx-badges-habblet .box-content {
    padding: 10px !important;
}

body#habbla-app .hx-badges-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 82px !important;
    gap: 8px !important;
}

body#habbla-app .hx-badge-item {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(to bottom, #fafafa 0%, #f1f1f1 100%) !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 2px !important;
    overflow: visible !important;
    cursor: help !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-badge-item:hover {
    z-index: 85000 !important;
    background: #fff !important;
    border-color: #909090 !important;
}

body#habbla-app .hx-badge-preview {
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
}

body#habbla-app .hx-badge-preview img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 52px !important;
    max-height: 52px !important;
    image-rendering: pixelated !important;
}


/* =========================================================
   TOOLTIP PLACAS
   ========================================================= */

body#habbla-app .hx-badge-tooltip {
    position: absolute !important;
    z-index: 95000 !important;
    left: 50% !important;
    bottom: calc(100% + 10px) !important;
    top: auto !important;
    width: 244px !important;
    min-width: 244px !important;
    max-width: 244px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 9px !important;
    color: #333 !important;
    background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 100%) !important;
    border: 1px solid #6f6f6f !important;
    border-radius: 4px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, 3px) !important;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease !important;
    pointer-events: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-badge-item:hover .hx-badge-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

body#habbla-app .hx-badge-tooltip::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -6px !important;
    width: 10px !important;
    height: 10px !important;
    background: #f4f4f4 !important;
    border-right: 1px solid #6f6f6f !important;
    border-bottom: 1px solid #6f6f6f !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

body#habbla-app .hx-badge-item:nth-child(3n + 1) .hx-badge-tooltip {
    left: 0 !important;
    transform: translate(0, 3px) !important;
}

body#habbla-app .hx-badge-item:nth-child(3n + 1):hover .hx-badge-tooltip {
    transform: translate(0, 0) !important;
}

body#habbla-app .hx-badge-item:nth-child(3n + 1) .hx-badge-tooltip::before {
    left: 38px !important;
}

body#habbla-app .hx-badge-item:nth-child(3n) .hx-badge-tooltip {
    left: auto !important;
    right: 0 !important;
    transform: translate(0, 3px) !important;
}

body#habbla-app .hx-badge-item:nth-child(3n):hover .hx-badge-tooltip {
    transform: translate(0, 0) !important;
}

body#habbla-app .hx-badge-item:nth-child(3n) .hx-badge-tooltip::before {
    left: auto !important;
    right: 33px !important;
}

body#habbla-app .hx-badge-tooltip-image {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eceeee !important;
    border: 1px solid #c7c7c7 !important;
    border-radius: 2px !important;
}

body#habbla-app .hx-badge-tooltip-image img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 44px !important;
    max-height: 44px !important;
    image-rendering: pixelated !important;
}

body#habbla-app .hx-badge-tooltip-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

body#habbla-app .hx-badge-tooltip-content span,
body#habbla-app .hx-badge-tooltip-content strong {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body#habbla-app .hx-badge-tooltip-kicker {
    color: #f05b00 !important;
    font: bold 8px/10px Verdana, Arial, Helvetica, sans-serif !important;
    letter-spacing: .3px !important;
}

body#habbla-app .hx-badge-tooltip-content strong {
    color: #2e3947 !important;
    font: bold 11px/14px Arial, Helvetica, sans-serif !important;
    word-break: break-word !important;
}

body#habbla-app .hx-badge-tooltip-copy {
    color: #777 !important;
    font: normal 9px/12px Verdana, Arial, Helvetica, sans-serif !important;
}

body#habbla-app .hx-badges-footer {
    margin-top: 8px !important;
    text-align: right !important;
}


/* =========================================================
   REFERIDOS
   ========================================================= */

body#habbla-app .hx-referrals-habblet {
    position: relative !important;
    z-index: 10 !important;
}


/* =========================================================
   DISCORD
   ========================================================= */

body#habbla-app .hx-discord-habblet,
body#habbla-app .hx-discord-habblet .cbb,
body#habbla-app .hx-discord-habblet .box-content,
body#habbla-app .hx-discord-box,
body#habbla-app .make-discord-widget {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

body#habbla-app .hx-discord-box {
    padding: 8px !important;
}

body#habbla-app .make-discord-users {
    height: auto !important;
    min-height: 0 !important;
    max-height: 210px !important;
    overflow-y: auto !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {

    body#habbla-app .hx-me-friends .hx-friend-tooltip,
    body#habbla-app .hx-badge-tooltip {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }

}

/* =========================================================
   V62 - AMIGOS /USER/ME
   Tooltip anclado al keko y siempre arriba de la cabeza.
   Sin portal, sin position:fixed y sin JavaScript.
   ========================================================= */

body#habbla-app #column1,
body#habbla-app .hx-me-friends,
body#habbla-app .hx-me-friends .cbb,
body#habbla-app .hx-me-friends .box-content,
body#habbla-app .hx-me-friends .hx-friends-box,
body#habbla-app .hx-me-friends .habbla-online-friends-list {
    overflow: visible !important;
}

body#habbla-app .hx-me-friends {
    position: relative !important;
    z-index: 5000 !important;
}

body#habbla-app .hx-referrals-habblet {
    position: relative !important;
    z-index: 1 !important;
}

body#habbla-app .hx-me-friends .hx-friends-box {
    min-height: 86px !important;
    height: auto !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-me-friends .habbla-online-friends-list {
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;
}

body#habbla-app .hx-me-friends .hx-friend-card {
    position: relative !important;
    z-index: 1 !important;

    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    outline: none !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:hover,
body#habbla-app .hx-me-friends .hx-friend-card:focus,
body#habbla-app .hx-me-friends .hx-friend-card:focus-within {
    z-index: 99999 !important;
}

body#habbla-app .hx-me-friends .habbla-friend-avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            to bottom,
            #f7f8f7 0%,
            #eceeed 100%
        ) !important;

    border: 1px solid #a9acab !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    overflow: hidden !important;
    cursor: default !important;
    box-sizing: border-box !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:hover .habbla-friend-avatar,
body#habbla-app .hx-me-friends .hx-friend-card:focus .habbla-friend-avatar,
body#habbla-app .hx-me-friends .hx-friend-card:focus-within .habbla-friend-avatar {
    background: #fff !important;
    border-color: #333 !important;
    box-shadow:
        0 0 0 1px #333,
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body#habbla-app .hx-me-friends .habbla-friend-avatar img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 58px !important;
    max-height: 58px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    image-rendering: auto !important;
}


/* ---------------------------------------------------------
   TOOLTIP
   --------------------------------------------------------- */

body#habbla-app .hx-me-friends .hx-friend-card > .hx-friend-tooltip {
    position: absolute !important;
    z-index: 2147483000 !important;

    left: 50% !important;
    right: auto !important;

    /*
     * El borde inferior del tooltip queda 10 px por encima
     * del borde superior del cuadro del keko.
     */
    bottom: calc(100% + 10px) !important;
    top: auto !important;

    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;

    margin: 0 !important;
    padding: 9px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    color: #333 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f4f4f4 100%
        ) !important;

    border: 1px solid #707070 !important;
    border-radius: 4px !important;

    box-shadow:
        0 3px 8px rgba(0,0,0,.30) !important;

    box-sizing: border-box !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translateX(-50%)
        translateY(4px) !important;

    transition:
        opacity .10s ease,
        transform .10s ease,
        visibility .10s ease !important;

    pointer-events: none !important;

    font-family:
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;

    text-align: left !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:hover > .hx-friend-tooltip,
body#habbla-app .hx-me-friends .hx-friend-card:focus > .hx-friend-tooltip,
body#habbla-app .hx-me-friends .hx-friend-card:focus-within > .hx-friend-tooltip {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateX(-50%)
        translateY(0) !important;
}


/* Flecha apuntando exactamente al centro del keko. */
body#habbla-app .hx-me-friends .hx-friend-card > .hx-friend-tooltip::before {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: -7px !important;

    width: 12px !important;
    height: 12px !important;

    background: #f4f4f4 !important;

    border-right: 1px solid #707070 !important;
    border-bottom: 1px solid #707070 !important;

    transform:
        translateX(-50%)
        rotate(45deg) !important;
}


/* Primer keko: evita que el tooltip salga por el borde izquierdo. */
body#habbla-app .hx-me-friends .hx-friend-card:first-child > .hx-friend-tooltip {
    left: -8px !important;

    transform:
        translateX(0)
        translateY(4px) !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:first-child:hover > .hx-friend-tooltip,
body#habbla-app .hx-me-friends .hx-friend-card:first-child:focus > .hx-friend-tooltip,
body#habbla-app .hx-me-friends .hx-friend-card:first-child:focus-within > .hx-friend-tooltip {
    transform:
        translateX(0)
        translateY(0) !important;
}

body#habbla-app .hx-me-friends .hx-friend-card:first-child > .hx-friend-tooltip::before {
    left: 40px !important;
}


/* Contenido del tooltip. */
body#habbla-app .hx-me-friends .hx-friend-tooltip-image {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #eceeee !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 2px !important;

    overflow: hidden !important;
}

body#habbla-app .hx-me-friends .hx-friend-tooltip-image img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 56px !important;
    max-height: 56px !important;

    object-fit: contain !important;
    image-rendering: auto !important;
}

body#habbla-app .hx-me-friends .hx-friend-tooltip-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 2px !important;

    text-align: left !important;
}

body#habbla-app .hx-me-friends .hx-friend-tooltip-content span,
body#habbla-app .hx-me-friends .hx-friend-tooltip-content strong {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body#habbla-app .hx-me-friends .hx-friend-tooltip-kicker {
    color: #349316 !important;

    font:
        bold 8px/10px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;

    letter-spacing: .4px !important;
}

body#habbla-app .hx-me-friends .hx-friend-tooltip-name {
    color: #2e3947 !important;

    font:
        bold 12px/15px
        Arial,
        Helvetica,
        sans-serif !important;

    word-break: break-word !important;
}

body#habbla-app .hx-me-friends .hx-friend-tooltip-copy {
    color: #666 !important;

    font:
        normal 9px/12px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;
}

body#habbla-app .hx-me-friends .hx-friend-tooltip-meta {
    margin-top: 2px !important;

    color: #929292 !important;

    font:
        normal 8px/11px
        Verdana,
        Arial,
        Helvetica,
        sans-serif !important;
}


/* No queda ning�n tooltip portal flotando en el body. */
body#habbla-app #hxFriendTooltipPortal,
body#habbla-app .hx-friend-tooltip-portal {
    display: none !important;
}


@media (max-width: 960px) {

    body#habbla-app .hx-me-friends .hx-friend-card > .hx-friend-tooltip {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }

}