/* Perfil (footer.php: #profile-view; js/profile.js).
   El ancho del modal (525px) y la cabecera de 100px no cambian: los fondos de
   perfil están hechos a esa medida y los stickers se colocan alrededor. */

/* ─── Cabecera ─── */
#profile-view .profile-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 10px;
}

#profile-view .profile-header #habboProfile {
    flex: 0 0 80px;
    float: none;
}

#profile-view .profile-header #sub-header {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 14px;
    float: none;
    z-index: 1000;
    position: relative;
}

.ht-pf-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#profile-view .profile-header #nameProfile {
    margin: 0;
    float: none;
    min-width: 0;
    padding: 4px 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ht-pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    white-space: nowrap;
}

.ht-pf-chip img {
    vertical-align: middle;
}

.ht-pf-ct {
    height: 28px;
    padding: 0 8px;
    background: rgba(255, 196, 0, 0.6);
    font-size: 0.85rem;
    font-weight: bold;
    -webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5));
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5));
}

.ht-pf-ct img {
    height: 18px;
}

/* Nivel con la barra de XP hasta el siguiente */
.ht-pf-level {
    position: relative;
    padding-bottom: 4px;
}

.ht-pf-xp {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.3);
}

.ht-pf-xp-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: #d58cff;
    transition: width 0.4s;
}

#giveTProfile {
    cursor: pointer;
    -webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.52)) drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(1px -1px 0 rgba(0, 0, 0, 0.47)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.49));
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.52)) drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(1px -1px 0 rgba(0, 0, 0, 0.47)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.49));
}

/* Canción del perfil */
.ht-pf-music {
    max-width: 170px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* El contorno solo en el texto, como en Nivel y Rayos: en toda la píldora
   también oscurecería su fondo. */
.ht-pf-music .fa-play,
#musicInfoProfile-name {
    -webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5));
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5));
}

.ht-pf-music:hover {
    background: rgba(255, 255, 255, 0.7);
}

.ht-pf-music img {
    max-height: 22px;
}

#musicInfoProfile-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Cuerpo ─── */
#profile-view .modal-content.profile-content {
    display: flex;
    flex-direction: column;
    height: 410px;
    padding: 0 10px 10px;
    overflow: visible;
}

.ht-pf-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 0;
}

.ht-pf-tabs {
    display: flex;
    gap: 5px;
}

.ht-pf-tab {
    padding: 6px 10px;
    border: 0;
    border-bottom: 2px solid #b7d6e1;
    border-radius: 4px;
    background: #ebf9ff;
    box-shadow: 0 0 1px 1px rgb(0, 134, 183);
    font: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    color: #004960;
    cursor: pointer;
    white-space: nowrap;
}

.ht-pf-tab:hover {
    background: #fff;
}

.ht-pf-tab.active {
    background: #0093c2;
    border-bottom-color: #005f80;
    box-shadow: 0 0 1px 1px rgb(0, 79, 108);
    color: #fff;
}

.ht-pf-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.ht-pf-actions .friend-actions-inline {
    display: flex;
    gap: 4px;
}

.ht-pf-more {
    position: relative;
}

.ht-pf-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid #b7d6e1;
    border-radius: 4px;
    background: #ebf9ff;
    box-shadow: 0 0 1px 1px rgb(0, 134, 183);
    color: #004960;
    line-height: 1;
    cursor: pointer;
}

.ht-pf-more-btn:hover,
.ht-pf-more.is-open .ht-pf-more-btn {
    background: #fff;
}

.ht-pf-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1002;
    min-width: 210px;
    padding: 4px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 0 2px #000, 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ht-pf-more.is-open .ht-pf-menu {
    display: block;
}

.ht-pf-menu-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: #004960;
    text-align: left;
    cursor: pointer;
}

.ht-pf-menu-item:hover {
    background: #ebf9ff;
}

.ht-pf-menu-item.is-danger {
    color: #b00000;
}

.ht-pf-menu-item.is-danger:hover {
    background: #ffe9e9;
}

/* Pestañas: la oculta sigue oculta aunque el editor de stickers haga .show()
   a todo el contenido del perfil. */
.ht-pf-panel:not(.active) {
    display: none !important;
}

.ht-pf-panel.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Aire para que el scroll no recorte los bordes de las casillas. */
    margin: 0 -3px;
    padding: 2px 3px;
}

/* El resumen cabe entero: sin scroll (la barra estrecharía y cortaría las casillas). */
.ht-pf-panel[data-panel="summary"].active {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible;
}

.ht-pf-loading,
.ht-pf-empty {
    margin: 0;
    padding: 40px 10px;
    color: #3d6f80;
    text-align: center;
}

.ht-pf-loading {
    font-size: 1.4rem;
}

/* Recuadro blanco del sitio */
.ht-pf-stat,
.ht-pf-box,
.ht-pf-card,
.ht-pf-item,
.ht-pf-event {
    border: 0;
    border-bottom: 2px solid #dfdfdf;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
}

/* ─── Resumen ─── */
.ht-pf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ht-pf-stat {
    display: grid;
    grid-template-columns: 26px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 4px;
    min-width: 0;
    padding: 5px 8px;
}

.ht-pf-stat i {
    grid-row: 1 / 3;
    font-size: 1.05rem;
    color: #0093c2;
    text-align: center;
}

.ht-pf-stat b {
    min-width: 0;
    overflow: hidden;
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ht-pf-stat small {
    font-size: 0.7rem;
    color: #6b7b83;
    white-space: nowrap;
}

.ht-pf-duo {
    display: flex;
    gap: 6px;
}

/* El título va a la izquierda del contenido: así las cabezas de amigos caben a
   tamaño normal sin que el perfil crezca. */
.ht-pf-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 8px;
}

.ht-pf-badges {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

/* En las placas el título va encima: caben en la altura de las cabezas y
   dejan más ancho para los amigos. */
.ht-pf-badges .ht-pf-box-title {
    flex: 0 0 auto;
}

.ht-pf-friends {
    flex: 1 1 0;
}

.ht-pf-box-title {
    flex: 0 0 52px;
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1.25;
    color: #3d6f80;
}

.ht-pf-section-title {
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: bold;
    color: #3d6f80;
}

#profile-view #habboInfoProfile-badges {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 0;
    background: none;
    text-align: left;
}

/* Tamaño fijo desde antes de cargar: de él depende cuántos amigos caben al lado. */
#profile-view #habboInfoProfile-badges img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
    object-fit: contain;
}

#profile-view #habboInfoProfile-badges .ht-pf-loader {
    margin: 0 auto;
}

.ht-pf-friends-list {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 62px;
    overflow: hidden;
}

/* La cabeza (54x62) solo ocupa el centro de la imagen: se recorta a lo ancho. */
.ht-pf-friend {
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 62px;
    overflow: hidden;
    border-radius: 6px;
    background: #ebf9ff;
}

.ht-pf-friend img {
    flex: 0 0 auto;
}

.ht-pf-friend[hidden] {
    display: none;
}

.ht-pf-friend:hover {
    background: #cdefff;
}

.ht-pf-friends-more {
    padding: 2px 6px;
    border-radius: 4px;
    background: #ebf9ff;
    box-shadow: 0 0 1px 1px rgb(0, 134, 183);
    font-size: 0.75rem;
    font-weight: bold;
    color: #004960;
}

.ht-pf-friends-none {
    font-size: 0.8rem;
    color: #6b7b83;
}

.ht-pf-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ht-pf-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 3px 8px 7px;
    text-align: center;
}

.ht-pf-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
}

/* Las estampillas son pixel art de 90x90: a su tamaño, sin reescalar. */
.ht-pf-card-img img {
    max-width: none;
}

.ht-pf-card-title {
    font-size: 0.85rem;
}

.ht-pf-card.is-stamps .ht-pf-card-title {
    color: #002257;
}

.ht-pf-card.is-missions .ht-pf-card-title {
    color: #084400;
}

.ht-pf-card.is-medals .ht-pf-card-title {
    color: #9d6d00;
}

.ht-pf-card .progress,
.ht-pf-card #stampsProfile {
    width: 100%;
    margin: 0;
}

.ht-pf-card .stamps-content .progress {
    margin: 0;
}

.ht-pf-card .button {
    max-width: 100%;
}

/* ─── Vitrina ─── */
.ht-pf-section-title {
    margin: 2px 0 6px;
}

.ht-pf-items + .ht-pf-section-title {
    margin-top: 10px;
}

.ht-pf-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ht-pf-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 6px;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.ht-pf-item:hover {
    background: #ebf9ff;
}

.ht-pf-item-name {
    width: 100%;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ht-pf-item small {
    font-size: 0.7rem;
    color: #6b7b83;
}

.ht-pf-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    overflow: hidden;
}

/* Estampillas a su tamaño (90x90) en la vitrina. */
.ht-pf-item .ht-pf-visual.is-stamps img {
    max-width: none;
    max-height: none;
}

.ht-pf-visual img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

.ht-pf-visual.is-backgrounds img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* El render de un efecto son capas absolutas de 80x124 (ht_getHabboImg):
   se les da ese tamaño y se escala a la casilla. */
.ht-pf-visual.is-effects > div {
    position: relative;
    flex: 0 0 auto;
    width: 80px;
    height: 124px;
    transform: scale(0.72);
}

.ht-pf-event .ht-pf-visual.is-effects > div {
    transform: scale(0.32);
}

.ht-pf-visual.is-names .ht-name-sample {
    font-size: 0.85rem;
}

/* ─── Actividad ─── */
.ht-pf-events {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-pf-events li {
    margin: 0 0 5px;
}

.ht-pf-event {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    font: inherit;
    font-size: 0.82rem;
    color: #333;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ht-pf-event:hover {
    background: #ebf9ff;
    color: #333;
}

.ht-pf-event .ht-pf-visual {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f3f6f7;
}

.ht-pf-event .ht-pf-visual.is-names {
    flex-basis: 80px;
    width: 80px;
}

.ht-pf-event .ht-pf-visual.is-names .ht-name-sample {
    font-size: 0.7rem;
}

.ht-pf-visual.is-comment {
    font-size: 1.1rem;
    color: #0093c2;
    background: #ebf9ff;
}

.ht-pf-event-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ht-pf-event-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ht-pf-event-quote {
    overflow: hidden;
    font-size: 0.74rem;
    color: #6b7b83;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ht-pf-event-ago {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: #6b7b83;
    white-space: nowrap;
}

/* ─── Móvil: el perfil se apila y crece hacia abajo ─── */
@media (max-width: 1150px) {
    #profile-view .modal-content.profile-content {
        height: auto;
    }

    .ht-pf-panel.active {
        overflow: visible;
    }
}

@media (max-width: 600px) {
    #profile-view .profile-header {
        height: auto;
        min-height: 100px;
    }

    #profile-view .profile-header #sub-header {
        padding-bottom: 8px;
    }

    .ht-pf-row {
        flex-wrap: wrap;
    }

    .ht-pf-bar {
        flex-wrap: wrap;
    }

    .ht-pf-duo {
        flex-direction: column;
    }

    .ht-pf-stats,
    .ht-pf-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .ht-pf-cards {
        grid-template-columns: 1fr;
    }
}