body.restaurando-vista #content-wrapper {
    visibility: hidden;
}

@font-face {
    font-family: 'Heavitas';
    src: url('fonts/Heavitas.ttf') format('truetype');
}


@font-face {
    font-family: "Object Sans Lorien";
    src: url("fonts/ObjectSans-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


body {
    background-color: #111111;
    color: rgb(0, 153, 255);
    font-family: 'Heavitas', sans-serif;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;
    padding: 0;


    background-image: url("images/landing-page/background-principal.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

   
    padding-top: 175px;


}

.login-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30000;

    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    justify-content: center;
    align-items: center;
}

.login-box {
    position: relative;
    width: 90%;
    max-width: 430px;

    padding: 38px 34px;
    border-radius: 30px;

    background:
        linear-gradient(135deg, rgba(235,248,255,.96), rgba(255,242,251,.96));

    border: 3px solid rgba(0,191,255,.45);

    box-shadow:
        0 0 25px rgba(0,191,255,.35),
        0 0 45px rgba(255,105,180,.25);

    text-align: center;
}

.login-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;

    margin-bottom: 10px;
}

.login-box h2 {
    font-family: 'Heavitas';
    color: #0077d9;
    font-size: 30px;
    letter-spacing: 2px;

    margin-bottom: 10px;
}

.login-subtitle {
    font-family: "Object Sans Lorien";
    color: #444;
    font-size: 15px;

    margin-bottom: 25px;
}

.login-box input {
    width: calc(100% - 32px);

    margin-bottom: 15px;
    padding: 14px 16px;

    border: 2px solid rgba(0,191,255,.25);
    border-radius: 14px;

    background: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;
}

.login-box input:focus {
    outline: none;

    border-color: #00BFFF;

    box-shadow:
        0 0 12px rgba(0,191,255,.35);
}

.login-submit-btn {
    margin-top: 8px;

    padding: 13px 30px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(135deg, #00BFFF, #0077d9);
    color: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;
    font-size: 15px;

    cursor: pointer;

    transition: .25s ease;

    box-shadow:
        0 0 15px rgba(0,191,255,.35);
}

.login-submit-btn:hover {
    transform: translateY(-2px) scale(1.03);

    box-shadow:
        0 0 22px rgba(0,191,255,.55);
}

.login-help {
    margin-top: 18px;

    font-family: "Object Sans Lorien";
    font-size: 13px;
    color: #666;
}

.login-close {
    position: absolute;
    top: 14px;
    right: 16px;

    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.10);
    color: #333;

    font-size: 26px;
    line-height: 1;

    cursor: pointer;
}

.login-close:hover {
    background: rgba(255,105,180,.25);
    color: #0077d9;
}

#loginMensaje {
    margin-top: 15px;

    font-family: "Object Sans Lorien";
    font-weight: bold;
}

#content-wrapper {

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

.content-transition {

    opacity: 0;

    transform: translateY(25px);
}

.flash-effect {

    animation: flashLorien 0.5s ease;
}

@keyframes flashLorien {

    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
        filter: brightness(1.3);
    }

    100% {
        opacity: 1;
    }
}

.logo:hover {

    transform: scale(1.03);

    transition: .3s ease;

    filter: drop-shadow(0 0 10px #00BFFF);
}

.top-banner {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 55px;

    background:
        linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
        url("images/landing-page/banner-principal.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

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

    padding: 0 40px;
    box-sizing: border-box;

    z-index: 10000;

    transition: transform 0.3s ease;
}



.top-banner.hidden {
    transform: translateY(-100%);
}

.auth-buttons {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 20px;

    min-width: 280px;
}

.auth-buttons a,
.feedback-link a {

    display: flex;

    align-items: center;

    gap: 8px;

    line-height: 1;
}

.feedback-link .fa-discord {

    color: #5865F2;

    font-size: 18px;
}

.feedback-link a,
.login-btn,
.register-btn {

    text-decoration: none;

    color: white;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;
}

.auth-buttons {
    display: flex;
    gap: 20px;
}

.login-btn,
.register-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    line-height: 1;
}

.feedback-link i {

    font-size: 18px;
}

.login-btn img,
.register-btn img {

    width: 18px;

    height: 18px;

    object-fit: contain;

    display: block;
}

.login-btn:hover,
.register-btn:hover {
    color: #00BFFF;
}

.navbar {

    position: fixed;

    top: 55px;
    left: 0;

    width: 100%;

    height: 120px;

    background-image: url("images/landing-page/banner-principal.webp");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 9999;

    display: flex;

    align-items: center;

    border-bottom: 5px solid #00BFFF;
}

.navbar-logo {

    cursor: pointer;

    position: absolute;

    left: 35px;

    display: flex;

    align-items: center;

    gap: 40px;
}

.navbar-logo img {

    width: 80px;

    height: 80px;
}



.navbar-logo h1 {

    font-family: 'Heavitas';

    color: white;

    font-size: 42px;

    letter-spacing: 5px;

    margin: 0;
}

.navbar-menu {
    width: 100%;

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

    gap: clamp(34px, 5vw, 92px);

    padding: 0 28px;
    box-sizing: border-box;
}

/* Acomodar Logo */

body.navbar-compact .navbar {
    height: auto;
    min-height: 140px;
    padding: 35px 0;

    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

body.navbar-compact .navbar-logo {
    position: static;

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

    gap: 16px;
}

body.navbar-compact .navbar-logo img {
    width: 50px;
    height: 50px;
    transform: translateX(-55px);
}

body.navbar-compact .navbar-logo h1 {
    font-size: 30px;
    transform: translateX(-57px);
}

body.navbar-compact .navbar-menu {
    width: 100%;
    justify-content: center;
}

/*drop menu */

.dropbtn {

    background: transparent;

    border: none;

    color: white;

    font-family: "Object Sans Lorien";

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

    transition: .3s;
}


.dropbtn:hover {

    color: #00BFFF;

    text-shadow:
        0 0 10px #00BFFF,
        0 0 20px #00BFFF;
}

.dropdown {
    position: relative;
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;

    position: absolute;

    top: calc(100%);
    left: 50%;
    transform: translateX(-50%);

    min-width: 220px;

    background: #151515;
    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 0 15px rgba(0,191,255,.5);

    z-index: 20000;
}

.dropdown-content a {

    display: block;

    padding: 12px 18px;

    color: white;

    text-decoration: none;

    font-family: "Object Sans Lorien";
}

.dropdown-content a:hover {

    background: #00BFFF;

    color: black;
}

.dropdown:hover .dropdown-content {

    display: block;
}

.navbar-direct-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    color: white;

    text-decoration: none;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;

    line-height: 1;

    cursor: pointer;

    transition:
        color .25s ease,
        text-shadow .25s ease,
        transform .25s ease;
}

.navbar-direct-link:hover {
    color: #00BFFF;

    transform: translateY(-1px);

    text-shadow:
        0 0 10px #00BFFF,
        0 0 20px #00BFFF;
}

.clan-slider-section {
    width: 80%;
    max-width: 1500px;
    height: 900px;

    margin: 120px auto;

    position: relative;

    padding: 5px;

    border-radius: 30px;

    background: linear-gradient(
        45deg,
        #ff69b4,
        #8A2BE2,
        #00BFFF,
        #ff69b4
    );

    overflow: hidden;

    box-shadow:
        0 0 20px rgba(255,105,180,0.5),
        0 0 35px rgba(0,191,255,0.4);
}

.clan-slider {
    width: 100%;
    height: 100%;

    border-radius: 25px;

    overflow: hidden;
}

.clan-slider img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 25px;
}

.clan-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    z-index: 10;

    width: 60px;
    height: 60px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,0.55);
    color: white;

    font-size: 38px;

    cursor: pointer;

    transition: 0.3s;
}

.clan-arrow:hover {
    background: #00BFFF;
    color: black;

    box-shadow:
        0 0 15px #00BFFF,
        0 0 30px #00BFFF;
}

.clan-arrow.left {
    left: 20px;
}

.clan-arrow.right {
    right: 20px;
}

.slide-left {
    animation: slideLeft 0.6s ease;
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-right {
    animation: slideRight 0.6s ease;
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 1280px) {
    .navbar-menu {
        gap: clamp(24px, 3.2vw, 52px);
    }

    .dropbtn,
    .navbar-direct-link {
        font-size: 24px;
    }
}

@media (max-width: 980px) {
    .navbar-menu {
        gap: 18px;
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .dropbtn,
    .navbar-direct-link {
        font-size: 20px;
    }
}

/* HERO */

html {
    scroll-behavior: smooth;
}

.info-section {
    width: 55.5%;
    margin: 100px auto;
    scroll-margin-top: 150px;
}

.info-box {

    display: flex;

    align-items: center;

    gap: 50px;

    padding: 50px;

    border-radius: 30px;

    background: linear-gradient(
        45deg,
        #ff69b4,
        #8A2BE2,
        #00BFFF,
        #ff69b4
    );

    box-shadow:
        0 0 20px rgba(255,105,180,0.5),
        0 0 35px rgba(0,191,255,0.4);

    position: relative;

    overflow: hidden;
}

.info-box::before {

    content: "";

    position: absolute;

    inset: 5px;

    background: rgba(255,255,255,0.95);

    border-radius: 25px;

    z-index: 1;
}

.info-box.reverse {
    flex-direction: row-reverse;
}

.info-box.reverse .info-section-text {

    text-align: left;
}

.info-section-image {
    width: 350px;
    height: 350px;

    object-fit: cover;

    border-radius: 50px;
}

.info-section-image,
.info-section-text {

    position: relative;

    z-index: 2;
}

.info-section-text {
    color: #111;
    flex: 1;
    max-width: 700px;
    text-align: left;
}

.info-section-text h2 {
    font-family: 'Heavitas', sans-serif;
    font-size: 38px;
    letter-spacing: 3px;
    color: #020202;
}

.info-section-text p {
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #111111;

    text-align: justify;

    line-height: 1.9;
}

.offer-list {

    font-family: "Object Sans Lorien", Arial, sans-serif;

    font-size: 18px;

    line-height: 2;

    padding-left: 25px;

    margin-top: 20px;
}

.offer-list li {

    margin-bottom: 10px;
}


/* LÍDERES */

.founders-panel {

    width: 90%;

    max-width: 1300px;

    margin: 100px auto;

    padding: 60px;

    border-radius: 40px;

    background: linear-gradient(
        135deg,
        rgba(255,245,250,.90),
        rgba(235,245,255,.90)
    );

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 20px rgba(255,255,255,.4),
        0 0 40px rgba(173,216,230,.25);
}

.founders-title {

    text-align: center;

    font-family: 'Heavitas';

    font-size: 40px;

    letter-spacing: 4px;

    color: #4b4b4b;

    margin-bottom: 70px;
}

.founders-panel {

    width: 90%;

    margin: 100px auto;

    padding: 60px;

    border-radius: 40px;

    background: linear-gradient(
        45deg,
        #ff69b4,
        #8A2BE2,
        #00BFFF,
        #ff69b4
    );

    position: relative;

    overflow: hidden;
}

.founders-panel::before {

    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 35px;

    background: linear-gradient(
        135deg,
        rgba(255,245,250,.97),
        rgba(235,245,255,.97)
    );
}

#fundadores {
    scroll-margin-top: 180px;
}

.founders-title,
.leaders-row {

    position: relative;

    z-index: 2;
}

.leaders-row {

    display: flex;

    justify-content: center;

    gap: 80px;

    margin-bottom: 80px;
}

.bottom-row {

    margin-top: 80px;

    width: fit-content;

    margin: 40px auto 0 auto;

    gap: 150px;
}



.leader-card {
    width: 300px;
    min-height: 380px;

    border-radius: 30px;

    padding: 30px;

    gap: 18px;

    cursor: pointer;

    transition: .3s ease;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;
}

.leader-image {

    position: relative;
    
    margin-top: 5px;

    width: 250px;

    height: 300px;

    object-fit: cover;

    border-radius: 20px;
}

.leader-card h3 {
    margin: 0;

    min-height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #111;

    font-size: 20px;

    text-align: center;
}

.leader-card:hover {

    transform: translateY(-10px);

}

.extasis:hover {
    box-shadow:
        0 0 15px #7CFC00,
        0 0 30px #7CFC00,
        0 0 50px #7CFC00;
}

.wulfgar:hover {
    box-shadow:
        0 0 15px #5d92b6,
        0 0 30px #5d92b6,
        0 0 50px #5d92b6;
}

.unscripted:hover {
    box-shadow:
        0 0 15px #f13535,
        0 0 30px #f13535,
        0 0 50px #f13535;
}

.seuuss:hover {
    box-shadow:
        0 0 15px #58e6ee,
        0 0 30px #58e6ee,
        0 0 50px #58e6ee;
}

.karias:hover {
    box-shadow:
        0 0 15px #ec529f,
        0 0 30px #ec529f,
        0 0 50px #ec529f;
}

.leader-image {
    width: 100%;
    height: 260px;

    object-fit: cover;

    border-radius: 20px;

    margin-bottom: 10px;

    transition: transform 0.3s ease;
}

.leader-card:hover .leader-image {

    transform: scale(1.05);
}

.modal {
    display: none;

    position: fixed;

    z-index: 9999;

    inset: 0;

    background: rgba(0,0,0,0.6);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    justify-content: center;
    align-items: center;
}

.modal-content {

    background: #e4dcdc;

    width: 80%;
    max-width: 900px;

    margin: 5% auto;

    border-radius: 20px;

    padding: 30px;

    position: relative;

    animation: modalAppear .35s ease-out;

    box-shadow:
        0 0 25px rgba(0,0,0,.6);
}

@keyframes modalAppear {

    from {
        opacity: 0;
        transform: scale(.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-body {

    display: flex;

    align-items: center;

    gap: 40px;
}

.modal-image {

    width: 300px;

    border-radius: 15px;

    object-fit: cover;
}

.modal-info p {

    font-family: "Object Sans Lorien", Arial, sans-serif;

    text-align: justify;

    line-height: 1.8;

    color: #0f0f0f;
}

.modal-info h2 {

    font-family: 'Heavitas', sans-serif;

    font-size: 40px;

    letter-spacing: 4px;
}

.modal-extasis {

    border: 3px solid #7CFC00;

    box-shadow:
        0 0 15px #7CFC00,
        0 0 30px #7CFC00;
}

.modal-wulfgar {

    border: 3px solid #5d92b6;

    box-shadow:
        0 0 15px #5d92b6,
        0 0 30px #5d92b6;
}

.modal-unscripted {

    border: 3px solid #f13535;

    box-shadow:
        0 0 15px #f13535,
        0 0 30px #f13535;
}

.modal-seuuss {

    border: 3px solid #58e6ee;

    box-shadow:
        0 0 15px #58e6ee,
        0 0 30px #58e6ee;
}

.modal-karias {

    border: 3px solid #ec529f;

    box-shadow:
        0 0 15px #ec529f,
        0 0 30px #ec529f;
}

.close-button {

    position: absolute;

    top: 15px;
    right: 20px;

    font-size: 28px;

    color: #7e7777;

    cursor: pointer;

    transition: color 0.3s ease;
}

.modal-extasis .close-button:hover {
    color: #7CFC00;
}

.modal-wulfgar .close-button:hover {
    color: #5d92b6;
}

.modal-unscripted .close-button:hover {
    color: #f13535;
}

.modal-seuuss .close-button:hover {
    color: #58e6ee;
}

.modal-karias .close-button:hover {
    color: #ec529f;
}

.section-divider {

    width: 85%;

    height: 2px;

    margin: 60px auto;

    background: linear-gradient(
        90deg,
        transparent,
        #00BFFF,
        #5865F2,
        transparent
    );
}

.section-title {

    font-family: 'Heavitas';

    text-align: center;

    font-size: 42px;

    letter-spacing: 4px;

    margin-bottom: 40px;

    color: rgba(0, 102, 255, 0.849);
}

.gallery-tabs {

    display: flex;

    justify-content: center;

    gap: 30px;

    margin-bottom: 30px;
}

.gallery-tab {

    padding: 12px 30px;

    border: 2px solid #00BFFF;

    border-radius: 10px;

    background: rgba(0,0,0,.7);

    color: white;

    cursor: pointer;

    font-family: "Object Sans Lorien";

    transition: .3s;
}

.gallery-tab:hover {

    box-shadow:
        0 0 15px #00BFFF,
        0 0 25px #00BFFF;
}

.gallery-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    width: 90%;

    margin: auto;

    border: 2px solid #00BFFF;

    border-radius: 40px;

    padding: 40px;

    background: rgba(0,0,0,.7);
}

.gallery-slider {

    display: flex;

    gap: 40px;
}

.gallery-card {

    position: relative;

    width: 600px;

    height: 400px;

    flex-shrink: 0;
}

.gallery-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 15px;

    border: 2px solid rgba(255,255,255,.2);

    transition: .3s;
}

.gallery-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 0 20px #00BFFF,
        0 0 40px #00BFFF;
}

.status.active {

    background: #00cc44;
}

.status.finished {

    background: #ff3131;
}

.status.upcoming {

    background: #ffaa00;
}

.status {

    margin-top: 15px;

    padding: 8px 20px;

    border-radius: 12px;

    font-weight: bold;
}

.slider-arrow {

    font-size: 60px;

    background: none;

    border: none;

    color: white;

    cursor: pointer;

    transition: .3s;
}

.slider-arrow:hover {

    color: #00BFFF;

    transform: scale(1.2);
}

.carousel-container {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 40px;

    margin-top: 30px;
}

.carousel-card {

    width: 950px;
    height: 650px;
}

.carousel-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;
}

.titulo-extasis {

    color: #53f308;

    text-shadow:
        0 0 10px #000000,
        0 0 20px #000000;
}

.titulo-wulfgar {

    color: #5d92b6;

    text-shadow:
        0 0 10px #000000,
        0 0 20px #000000;
}

.titulo-unscripted {

    color: #f13535;

    text-shadow:
        0 0 10px #000000,
        0 0 20px #000000;
}

.titulo-seuuss {

    color: #58e6ee;

    text-shadow:
        0 0 10px #000000,
        0 0 20px #000000;
}

.titulo-karias {

    color: #ec529f;

    text-shadow:
        0 0 10px #000000,
        0 0 20px #000000;
}

/* PATCH NOTES SECCION 2 */

.hidden-view {
    display: none;
}

.patch-container {

    position: relative;

    width: 92%;

    max-width: 1600px;

    margin: 20px auto 0 auto;

    padding: 50px;

    border-radius: 40px;

    background: linear-gradient(
        45deg,
        #ff69b4,
        #8A2BE2,
        #00BFFF,
        #ff69b4
    );
}

.patch-container::before {

    content: "";

    position: absolute;

    inset: 4px;

    border-radius: 36px;

    background: linear-gradient(
        135deg,
        rgba(255,245,250,.98),
        rgba(235,245,255,.98)
    );

    z-index: 1;
}

.patch-title,
.patch-tools,
.patch-grid,
.load-more-btn {

    position: relative;

    z-index: 2;
}

.page-view {
    min-height: 75vh;
    padding-top: 60px;
}

/* Marco general para páginas principales */
.page-frame {
    border: 4px solid transparent;

    background:
        linear-gradient(
            135deg,
            rgba(255,245,250,.96),
            rgba(235,245,255,.96)
        ) padding-box,
        linear-gradient(
            135deg,
            #b743ff,
            #00c8ff,
            #ff5db8
        ) border-box;

    border-radius: 35px;

    box-shadow:
        0 0 25px rgba(0,0,0,.10),
        0 0 35px rgba(0,191,255,.25);
}


.patch-grid {
    width: 85%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;

    align-items: start;
}

.patch-title {
    text-align: center;
    font-family: 'Heavitas';
    font-size: 55px;
    margin-bottom: 50px;
    color: rgb(0, 109, 172);
    margin-bottom: 40px;
}

.patch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.patch-card {

    width: 430px;

    height: 430px;

    background: white;

    border-radius: 15px;

    overflow: hidden;

    display: flex;

    flex-direction: column;
}

.patch-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;
}


.patch-tag {
    display: inline-block;
    margin: 15px;
    padding: 8px 14px;
    background: #00BFFF;
    color: white;
    border-radius: 8px;
    font-family: "Object Sans Lorien";
    font-weight: bold;
}

.patch-card h3 {
    color: #222;
    font-family: 'Heavitas';
    font-size: 22px;
    margin: 10px 15px;
}

.patch-card p {
    color: #444;
    font-family: "Object Sans Lorien";
    font-size: 16px;
    margin: 10px 15px;
    
    min-height: 50px;

    max-height: 50px;

    overflow: hidden;
}

.patch-footer {

    margin-top: auto;

    padding: 0 20px 20px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.patch-footer time {
    color: #008cff;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
}

.patch-footer a {
    color: #ff69b4;
    text-decoration: none;
    font-weight: bold;
}

.patch-tools {
    width: 85%;
    margin: 0 auto 35px;

    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.patch-search,
.patch-filter {
    padding: 12px 18px;
    border-radius: 10px;
    border: none;
    font-family: "Object Sans Lorien";
}

.load-more-btn {
    display: block;
    margin: 50px auto;

    padding: 14px 35px;
    border: none;
    border-radius: 12px;

    background: #00BFFF;
    color: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;

    cursor: pointer;
}

.patch-footer button {
    border: none;
    background: none;

    color: #ff69b4;

    font-family: "Object Sans Lorien";
    font-weight: bold;
    font-size: 14px;

    cursor: pointer;
}

.patch-footer button:hover {
    transform: scale(1.05);
}


/* FOOTER */

.footer {
    margin-top: 100px;

    padding: 30px 20px;

    min-height: 180px;

    text-align: center;

   background-image: url("images/landing-page/footer-principal.webp");

   background-size: cover;

   background-position: center;

   background-repeat: no-repeat;

   background-color: #111;
}

.footer-socials {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

    margin-bottom: 20px;
}

.footer-socials i {
    font-size: 28px;
}

.footer-socials a,
.youtube-button {

    color: white;

    text-decoration: none;

    font-family: "Object Sans Lorien";

    font-size: 18px;

    background: none;

    border: none;

    cursor: pointer;

    transition: .3s;
}

.footer-socials a:hover,
.youtube-button:hover {

    color: #00BFFF;
}

.youtube-dropdown {

    position: relative;
}

.youtube-content {

    display: none;

    position: absolute;

    top: 35px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(20,20,20,.98);

    border-radius: 15px;

    min-width: 180px;

    overflow: hidden;

    z-index: 1000;
}

.youtube-content a {

    display: block;

    padding: 12px;

    text-decoration: none;

    color: white;
}

.youtube-content a:hover {

    background: #00BFFF;

    color: black;
}

.youtube-dropdown:hover .youtube-content {

    display: block;
}

.footer-logo img {
    width: 55px;
    margin-bottom: 5px;
}

.footer-logo h3 {
    font-size: 24px;
    margin: 5px 0;
    color: white;
}

.footer-copy {
    margin-top: 15px;
    font-size: 12px;
    color: white;
}


.fa-discord:hover {

    color: #5865F2;

    text-shadow:
        0 0 10px #5865F2,
        0 0 20px #5865F2;
}

.fa-twitch:hover {

    color: #9146FF;

    text-shadow:
        0 0 10px #9146FF,
        0 0 20px #9146FF;
}

.fa-tiktok:hover {

    color: #00F2EA;

    text-shadow:
        0 0 10px #00F2EA,
        0 0 20px #00F2EA;
}

.fa-youtube:hover {

    color: #FF0000;

    text-shadow:
        0 0 10px #FF0000,
        0 0 20px #FF0000;
}

.classes-container {
    width: 90%;
    max-width: 1500px;
    margin: 60px auto;
    padding: 60px;

    border-radius: 40px;

    background: linear-gradient(
        135deg,
        rgba(255,245,250,.96),
        rgba(235,245,255,.96)
    );

    box-shadow:
        0 0 20px rgba(255,255,255,.5),
        0 0 40px rgba(173,216,230,.3);
}

.classes-title {
    text-align: center;
    font-family: 'Heavitas';
    font-size: 50px;
    color: #0077cc;
    margin-bottom: 40px;
}

.class-tab {

    width: 240px;

    height: 60px;

    border: none;

    border-radius: 15px;

    background: white;

    color: #0077cc;

    font-family: "Object Sans Lorien";

    font-size: 22px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s ease;

    box-shadow: 0 0 12px rgba(0,0,0,.12);
}

.warrior {
    background: #b10505;
    color: white;
}

.warrior-jobs .job-name {
    background: rgba(165, 10, 10, 0.9);
}

.magician {
    background: #057ec4;
    color: white;
}

.magician-jobs .job-name {
    background: rgba(9, 134, 184, 0.9);
}

.bowman {
    background: #069c06;
    color: white;
}

.bowman-jobs .job-name {
    background: rgba(10, 153, 18, 0.9);
}

.thief {
    background: #7440c2;
    color: white;
}

.thief-jobs .job-name {
    background: rgba(137, 14, 219, 0.9);
}

.pirate {
    background: #8f8e91;
    color: white;
}

.pirate-jobs .job-name {
    background: rgba(138, 136, 145, 0.9);
}


.class-tab:hover {

    transform: translateY(-3px);

    filter: brightness(1.1);

    box-shadow:
        0 0 15px rgba(255,255,255,.3),
        0 0 25px rgba(255,255,255,.2);
}

.class-tab.active {

    transform: scale(1.03);

    box-shadow:
        0 0 15px rgba(255,255,255,.5),
        0 0 30px rgba(255,255,255,.3);
}

.classes-content {
    min-height: 350px;

    margin-top: 40px;

    border-radius: 25px;

    background: white;

    padding: 40px;

    text-align: center;

    color: #111;

    font-family: "Object Sans Lorien";

    box-shadow: 0 0 15px rgba(0,0,0,.12);
}

.class-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.back-class-btn {

    position: absolute;

    top: 15px;
    left: 15px;

    padding: 12px 20px;

    border-radius: 20px;

    background: rgba(9, 87, 160, 0.9);
    color: white;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 2px solid rgba(154, 191, 212, 0.664);

    font-family: "Object Sans Lorien";
    font-weight: bold;
    font-size: 14px;

    cursor: pointer;

    z-index: 100;

    box-shadow:
        0 5px 15px rgba(0,0,0,.25),
        0 0 12px rgba(0,191,255,.25);

    transition: all .25s ease;
}

.back-class-btn:hover {

    background: rgba(2, 69, 100, 0.95);

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.30),
        0 0 18px rgba(0,191,255,.40);
}

.job-category {
    display: none;
}

.job-category.active-category {
    display: grid;
}

.job-card {

    position: relative;

    height: 300px;

    border-radius: 15px;

    overflow: hidden;

    cursor: pointer;

    transition: .3s ease;

    box-shadow: 0 0 15px rgba(0,0,0,.15);
}

.job-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.job-name {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 12px;

    text-align: center;

    background: rgba(173, 11, 11, 0.85);

    color: white;

    font-family: 'Heavitas';

    font-size: 18px;

    letter-spacing: 1px;
}

.job-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 0 20px #00BFFF,
        0 0 40px rgba(0,191,255,.4);
}

/* Clases Containers */

.job-detail-container {

    position: relative;

    width: 85%;
    max-width: 1200px;

    margin: 100px auto;
    padding: 50px;

    border-radius: 30px;

    box-shadow:
        0 0 25px rgba(0,0,0,.45),
        0 0 45px var(--job-color);
}

/* Warrior */

.hero-theme {

    background-image: url("images/backgrounds/Hero-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid var(--job-color);

    box-shadow:
        0 0 25px rgba(0,0,0,.45),
        0 0 45px rgba(0,120,255,.35);
}

.paladin-theme {
    background-image: url("images/backgrounds/Paladin-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(255, 217, 0, 0.966);
}

.dark-knight-theme {
    background-image: url("images/backgrounds/Dark-Knight-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(65, 2, 184, 0.966);
}

.dawn-warrior-theme {
    background-image: url("images/backgrounds/Dawn-Warrior-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(193, 25, 226, 0.966);
}

.mihile-theme {
    background-image: url("images/backgrounds/Mihile-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(238, 196, 10, 0.966);
}

.blaster-theme {
    background-image: url("images/backgrounds/Blaster-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(175, 16, 10, 0.966);
}

.demon-slayer-theme {
    background-image: url("images/backgrounds/Demon-Slayer-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(178, 5, 247, 0.966);
}

.demon-avenger-theme {
    background-image: url("images/backgrounds/Demon-Avenger-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(248, 9, 9, 0.966);
}

.aran-theme {
    background-image: url("images/backgrounds/Aran-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(5, 234, 241, 0.966);
}

.kaiser-theme {
    background-image: url("images/backgrounds/Kaiser-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(243, 8, 8, 0.966);
}

.adele-theme {
    background-image: url("images/backgrounds/Adele-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(33, 72, 248, 0.966);
}

.ren-theme {
    background-image: url("images/backgrounds/Ren-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(147, 240, 227, 0.966);
}

.zero-theme {
    background-image: url("images/backgrounds/Zero-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(250, 193, 7, 0.966);
}

.hayato-theme {
    background-image: url("images/backgrounds/Hayato-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(133, 9, 9, 0.966);
}

.erel-theme {
    background-image: url("images/backgrounds/Erel-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(0, 25, 252, 0.966);
}

/* Magician */

.fire-poison-theme {
    background-image: url("images/backgrounds/Fire-Poison-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(35, 189, 5, 0.966);
}

.ice-lightning-theme {
    background-image: url("images/backgrounds/Ice-Lightning-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(3, 225, 233, 0.966);
}

.bishop-theme {
    background-image: url("images/backgrounds/Bishop-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(247, 243, 4, 0.966);
}

.blaze-wizard-theme {
    background-image: url("images/backgrounds/Blaze-Wizard-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(255, 123, 0, 0.966);
}

.battle-mage-theme {
    background-image: url("images/backgrounds/Battle-Mage-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(84, 1, 180, 0.966);
}

.evan-theme {
    background-image: url("images/backgrounds/Evan-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(80, 5, 255, 0.966);
}

.luminous-theme {
    background-image: url("images/backgrounds/Luminous-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(178, 100, 197, 0.966);
}

.illium-theme {
    background-image: url("images/backgrounds/Illium-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(5, 0, 78, 0.966);
}

.lara-theme {
    background-image: url("images/backgrounds/Lara-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(117, 255, 75, 0.966);
}

.kinesis-theme {
    background-image: url("images/backgrounds/Kinesis-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(19, 19, 18, 0.966);
}

.kanna-theme {
    background-image: url("images/backgrounds/Kanna-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(255, 9, 222, 0.966);
}

.lynn-theme {
    background-image: url("images/backgrounds/Lynn-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(0, 252, 155, 0.966);
}

.sia-theme {
    background-image: url("images/backgrounds/Sia-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(85, 167, 243, 0.966);
}

/* Bowman */

.bow-master-theme {
    background-image: url("images/backgrounds/Bow-Master-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(0, 137, 228, 0.966);
}

.marksman-theme {
    background-image: url("images/backgrounds/Marksman-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(134, 247, 4, 0.966);
}

.pathfinder-theme {
    background-image: url("images/backgrounds/Pathfinder-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(59, 0, 197, 0.966);
}

.wind-archer-theme {
    background-image: url("images/backgrounds/Wind-Archer-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(22, 248, 1, 0.966);
}

.wild-hunter-theme {
    background-image: url("images/backgrounds/Wild-Hunter-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(43, 170, 255, 0.966);
}

.mercedes-theme {
    background-image: url("images/backgrounds/Mercedes-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(27, 175, 243, 0.966);
}

.kain-theme {
    background-image: url("images/backgrounds/Kain-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid rgba(143, 0, 0, 0.966);
}

/* Thief */

.night-lord-theme {

    background-image: url("images/backgrounds/Night-Lord-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(76, 0, 255, 0.55);
}

.shadower-theme {

    background-image: url("images/backgrounds/Shadower-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(255,0,0,.55);
}

.dual-blade-theme {

    background-image: url("images/backgrounds/Dual-Blade-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(255, 72, 0, 0.55);
}

.night-walker-theme {

    background-image: url("images/backgrounds/Night-Walker-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(67, 0, 223, 0.55);
}

.xenon-theme {

    background-image: url("images/backgrounds/Xenon-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(168, 238, 255, 0.55);
}

.phantom-theme {

    background-image: url("images/backgrounds/Phantom-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(3, 91, 255, 0.55);
}

.cadena-theme {

    background-image: url("images/backgrounds/Cadena-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(127, 0, 201, 0.55);
}

.khali-theme {

    background-image: url("images/backgrounds/Khali-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(253, 173, 1, 0.55);
}

.hoyoung-theme {

    background-image: url("images/backgrounds/Hoyoung-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(77, 205, 255, 0.55);
}

/* Pirates */

.buccaneer-theme {

    background-image: url("images/backgrounds/Buccaneer-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(1, 82, 202, 0.815);
}

.corsair-theme {

    background-image: url("images/backgrounds/Corsair-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(0, 255, 234, 0.781);
}

.cannoneer-theme {

    background-image: url("images/backgrounds/Cannoneer-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(255, 145, 0, 0.55);
}

.thunder-breaker-theme {

    background-image: url("images/backgrounds/Thunder-Breaker-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgb(0, 204, 255);
}

.mechanic-theme {

    background-image: url("images/backgrounds/Mechanic-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgba(175, 100, 2, 0.945);
}

.shade-theme {

    background-image: url("images/backgrounds/Shade-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgb(1, 255, 221);
}

.angelic-buster-theme {

    background-image: url("images/backgrounds/Angelic-Buster-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgb(253, 76, 209);
}

.ark-theme {

    background-image: url("images/backgrounds/Ark-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgb(126, 3, 3);
}

.mo-xuan-theme {

    background-image: url("images/backgrounds/Mo-Xuan-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid rgb(0, 0, 0);
}

/* Terminan */

.job-detail-title {
    text-align: center;
    font-family: 'Heavitas';
    font-size: 50px;
    letter-spacing: 20px;

    color: #ffffff;

    text-shadow:
        0 0 10px var(--job-color),
        0 0 25px var(--job-color);

    margin-bottom: 40px;
}

.job-detail-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.job-detail-left {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.job-detail-right {
    width: 60%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.job-detail-image {
    width: 600px;
    height: 600px;

    object-fit: contain;
}

.job-video {
    width: 100%;
    height: 400px;

    border-radius: 25px;

    overflow: hidden;

    background: #111;

    border: 2px solid var(--job-color);

    box-shadow: 0 0 15px var(--job-color);
}

.job-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.damage-box {
    width: 80%;
    margin-top: 18px;
    padding: 12px;

    border-radius: 16px;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.25);
}

.damage-title {
    text-align: center;
    font-size: 30px;
    color: rgb(20, 20, 20);

    text-shadow:
        0 0 10px var(--job-color),
        0 0 25px var(--job-color);

    font-family: 'Heavitas';
    letter-spacing: 2px;

    margin-bottom: 25px;
}

.damage-bar {
    display: flex;

    width: 100%;
    height: 32px;

    border-radius: 20px;

    overflow: visible;

    background: #222;
}

.burst-bar,
.dpm-bar {
    min-width: 110px;

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

    font-family: "Object Sans Lorien";
    font-weight: bold;
    font-size: 15px;

    color: white;

    white-space: nowrap;
    letter-spacing: 1px;
}

.burst-bar {
    background: var(--job-color);

    border-radius: 20px 0 0 20px;
}

.dpm-bar {
    background: var(--job-dark);

    border-radius: 0 20px 20px 0;
}

.job-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;

    margin-top: 25px;
}

.info-btn,
.discord-class-btn {
    width: 160px;
    height: 50px;

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

    border: none;
    border-radius: 16px;

    background: var(--job-color);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;

    text-decoration: none;
    cursor: pointer;

    transition: .3s ease;
}

.info-btn:hover,
.discord-class-btn:hover {
    background: #ff3131;
    color: white;

    transform: translateY(-3px);

    box-shadow:
        0 0 15px var(--job-color),
        0 0 30px var(--job-color);
}

.infografia-modal {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 99999;

    background: rgba(0,0,0,0.65);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    justify-content: center;
    align-items: center;
}

.infografia-img {
    max-width: 90%;
    max-height: 90%;

    border-radius: 20px;

    box-shadow:
        0 0 25px rgba(255,255,255,.35),
        0 0 45px rgba(0,0,0,.6);

    animation: aparecerInfografia .3s ease;
}

@keyframes aparecerInfografia {
    from {
        opacity: 0;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*Bosses*/

.bosses-container {
    width: 85%;
    max-width: 1600px;

    margin: 60px auto;
    padding: 60px;

    border-radius: 40px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: .4s ease;

    box-shadow:
        0 0 20px rgba(255,255,255,.5),
        0 0 40px rgba(173,216,230,.3);
}

.maple-world-bg {

    background-image:
        linear-gradient(
            rgba(255,255,255,.80),
            rgba(255,255,255,.80)
        ),
        url("images/backgrounds/Maple-World.webp");
}

.arcana-bg {

    background-image:
        linear-gradient(
            rgba(255,255,255,.80),
            rgba(255,255,255,.80)
        ),
        url("images/backgrounds/Arcana.webp");
}

.grandis-bg {

    background-image:
        linear-gradient(
            rgba(255,255,255,.80),
            rgba(255,255,255,.80)
        ),
        url("images/backgrounds/Grandis.webp");
}

.bosses-title {
    text-align: center;

    font-family: 'Heavitas';
    font-size: 50px;

    color: #0077cc;

    margin-bottom: 40px;
}

.boss-tabs {
    display: flex;
    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 35px;
}

.boss-tab {
    width: 400px;
    height: 50px;


    border: none;
    border-radius: 30px;

    color: white;

    font-family: "Object Sans Lorien";
    font-size: 28px;
    font-weight: bold;

    cursor: pointer;

    transition: .3s ease;

    box-shadow: 0 0 12px rgba(0,0,0,.12);
}

.boss-tab:hover {
    transform: translateY(-3px);

    filter: brightness(1.1);
}

.boss-tab.active {
    transform: scale(1.03);

    box-shadow:
        0 0 15px rgba(255,255,255,.5),
        0 0 30px rgba(255,255,255,.3);
}

.boss-tab.maple-world {
    background: #2f8dc9 !important;
    color: white;
}

.boss-tab.arcana {
    background: #7440c2 !important;
    color: white;
}

.boss-tab.grandis {
    background: #d85f00 !important;
    color: white;
}

.bosses-content {
    min-height: 720px;

    border-radius: 25px;
    background: white;

    padding: 45px;

    box-shadow: 0 0 15px rgba(0,0,0,.12);

    overflow: visible;
}

.boss-category {
    display: none;
    width: 100%;
}

.boss-category.active-boss-category {
    display: grid;
    grid-template-columns: repeat(4, 280px);
    justify-content: center;
    gap: 35px;
}

.boss-grid {
    justify-content: center;
    gap: 35px;
}

.boss-card {
    width: 280px;
    height: 360px;

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    cursor: pointer;

    background: #111;

    box-shadow: 0 0 15px rgba(0,0,0,.15);

    transition: .3s ease;
}

.boss-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.boss-name {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;

    padding: 15px 0;

    text-align: center;

    background: rgba(0,0,0,.70);

    color: white;

    font-family: 'Heavitas';
    font-size: 22px;
    letter-spacing: 2px;
}

.boss-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 0 15px #00BFFF,
        0 0 30px rgba(0,191,255,.4);
}

.boss-detail-page {
    position: relative;

    width: 100%;
    max-width: 1200px;
    min-height: 820px;

    margin: 100px auto;
    padding: 80px;

    border-radius: 30px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

    box-shadow:
        0 0 25px rgba(0,0,0,.45),
        0 0 45px rgba(0,0,0,.35);
}

/*Backgrounds*/
/* Maple World */
.lotus-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/lotus-bg.webp");
}

.damien-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/damien-bg.webp");
}

.slime-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/slime-bg.webp");
}

/*Arcana*/

.lucid-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/lucid-bg.webp");
}

.will-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/Will-bg.webp");
}

.gloom-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/gloom-bg.webp");
}

.darknell-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/darknell-bg.webp");
}

.verus-hilla-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/verus-hilla-bg.webp");
}

.black-mage-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/black-mage-bg.webp");
}

/*Grandis*/

.seren-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/seren-bg.webp");
}

.kalos-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/kalos-bg.webp");
}

.kaling-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/kaling-bg.webp");
}

.first-adversary-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/adversary-bg.webp");
}

.malefic-star-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/malefic-bg.webp");
}

.limbo-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/limbo-bg.webp");
}

.baldrix-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/baldrix-bg.webp");
}

.jupiter-boss-bg {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("images/bosses/backgrounds/jupiter-bg.webp");
}

/*cierre de backgrounds*/



.boss-detail-name {
    position: absolute;

    top: 45px;
    left: 55px;

    font-family: 'Heavitas';
    font-size: 58px;
    letter-spacing: 3px;

    color: white;

    text-shadow:
        0 0 10px rgba(0,0,0,.8),
        0 0 20px rgba(0,0,0,.6);
}

.back-boss-btn {
    position: absolute;

    top: 20px;
    left: 20px;

    padding: 10px 18px;

    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.35);

    background: rgba(0,0,0,.35);
    color: white;

    backdrop-filter: blur(8px);

    font-family: "Object Sans Lorien";
    font-weight: bold;

    cursor: pointer;

    z-index: 5;
}

.boss-info-panel {
    position: absolute;

    top: 90px;
    right: 55px;

    width: 360px;

    display: flex;
    flex-direction: column;
    gap: 25px;
}

.boss-difficulty-box {
    padding: 22px;

    border-radius: 22px;

    background: rgba(0,0,0,.45);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,.25);

    box-shadow:
        0 0 18px rgba(0,0,0,.35);
}

.boss-difficulty-box h3 {
    text-align: center;

    margin-bottom: 18px;

    color: white;

    font-family: 'Heavitas';
    letter-spacing: 2px;
}

.difficulty-btn {
    width: 100%;
    height: 48px;

    margin-bottom: 12px;

    border: none;
    border-radius: 25px;

    font-family: 'Heavitas';
    font-size: 18px;
    letter-spacing: 1px;

    cursor: pointer;

    transition: .3s ease;
}

.difficulty-btn:hover {
    transform: translateY(-3px);
}

.difficulty-btn.easy {
    background: #919c9ea4;
    color: white;
}

.difficulty-btn.normal {
    background: #28c7e8;
    color: white;
}

.difficulty-btn.hard {
    background: #d83b7d;
    color: white;
}

.difficulty-btn.extreme {
    background: #111;
    color: #ff3131;
    border: 2px solid #ff3131;
}

.difficulty-btn.chaos {
    background: #111;
    color: #ffd700;
    border: 2px solid #ffd700;
}

.difficulty-btn.easy:hover {
    box-shadow: 0 0 20px #bfc7c9;
}

.difficulty-btn.normal:hover {
    box-shadow: 0 0 20px #28c7e8;
}

.difficulty-btn.hard:hover {
    box-shadow: 0 0 20px #d83b7d;
}

.difficulty-btn.extreme:hover {
    box-shadow: 0 0 20px #ff3131;
}

.difficulty-btn.chaos:hover {
    box-shadow: 0 0 20px #ffd700;
}

.boss-description-box {
    padding: 22px;

    border-radius: 22px;

    background: rgba(0,0,0,.45);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,.25);

    color: white;
}

.boss-description-box h3 {
    font-family: 'Heavitas';
    margin-bottom: 10px;
}

.boss-description-box p {
    font-family: "Object Sans Lorien";
    line-height: 1.6;
}


/* Dificultades */

.boss-difficulty-content {
    max-height: 760px;

    overflow-y: auto;

    padding: 28px;
    padding-right: 35px;
}

.boss-difficulty-content::-webkit-scrollbar {
    width: 8px;
}

.boss-difficulty-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
    border-radius: 20px;
}

.boss-difficulty-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.35);
    border-radius: 20px;
}

.boss-difficulty-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.55);
}

.difficulty-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 2px solid rgba(255,255,255,.25);

    padding-bottom: 15px;
    margin-bottom: 20px;
}

.difficulty-header h2 {
    font-family: 'Heavitas';

    font-size: clamp(26px, 2vw, 34px);

    color: var(--boss-title-color);

    white-space: nowrap;

    text-shadow:
        0 0 8px var(--boss-glow-color),
        0 0 18px var(--boss-glow-color);
}

.boss-difficulty-panel h2 {
    color: var(--boss-title-color);

    text-shadow:
        0 0 8px var(--boss-glow-color),
        0 0 18px var(--boss-glow-color);
}

.difficulty-boss-icon {
    width: 80px;
    height: 80px;

    object-fit: contain;
}

.difficulty-stats {
    display: flex;
    gap: 30px;

    font-family: "Object Sans Lorien";
    font-size: 18px;

    margin-bottom: 25px;
}

.phase-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.phase-row {
    font-family: "Object Sans Lorien";
}

.phase-bar {
    width: 100%;
    height: 18px;

    margin-top: 6px;

    border-radius: 20px;

    background: #ddd;

    overflow: hidden;
}

.phase-fill {
    height: 100%;

    background: var(--boss-phase-color);

    box-shadow:
        0 0 10px var(--boss-phase-glow),
        inset 0 0 8px rgba(255,255,255,.25);
}

.phase-segment-row {
    margin-bottom: 12px;
}

.phase-segment-title {
    font-family: "Object Sans Lorien";
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--boss-text-color);
}

.segmented-bar {
    display: flex;
    width: 100%;
    height: 26px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,.12);

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.35);

}

.segment-part {
    flex: 1;

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

    font-family: "Object Sans Lorien";
    font-size: 13px;
    font-weight: bold;

    color: white;

    background: var(--boss-phase-color);

    border-right: 2px solid rgba(255,255,255,.25);

    text-shadow: 0 0 5px rgba(0,0,0,.7);
}

.segment-part:nth-child(2) {
    background: var(--segment-color-2, #7c40c9);
}

.segment-part:nth-child(3) {
    background: var(--segment-color-3, #2f8dc9);
}

.segment-part:last-child {
    border-right: none;
}

.close-difficulty-btn {
    position: absolute;
    top: 20px;
    right: 20px;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.55);
    color: white;

    font-size: 20px;
    font-weight: bold;

    cursor: pointer;

    z-index: 10;
}

.close-difficulty-btn:hover {
    background: #ff3131;
    box-shadow: 0 0 15px #ff3131;
}

/* Recompensas */

.crystal-info,
.party-damage {
    margin-top: 24px;

    display: flex;
    align-items: center;
    gap: 12px;

    font-family: "Object Sans Lorien";
    font-size: 18px;
    font-weight: bold;
}

.crystal-info img {
    width: 48px;
    height: 48px;
}

.important-rewards {
    margin-top: 30px;
}

.important-rewards h3 {
    font-family: 'Heavitas';
    margin-bottom: 15px;
}

.reward-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.reward-icons img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    border-radius: 10px;
    background: rgba(0,0,0,.08);

    padding: 5px;
}

/* nuevo */

.boss-split-wrapper {
    width: 90%;
    max-width: 1700px;
    margin: 10px auto;

    display: grid;
    grid-template-columns: 1000px 0px;

    justify-content: center;
    gap: 0;

    transform: translateX(0);

    transition: grid-template-columns .45s ease, gap .45s ease;
}

.boss-split-wrapper.active {
    grid-template-columns: 900px 650px;
    gap: 10px;
}

.boss-split-wrapper .boss-detail-page {
    width: 100%;
    min-width: 0;
    max-width: none;

    transform: none;
    transition: none;
}

.boss-split-wrapper.active .boss-detail-page {
    transform: none;
}

.boss-difficulty-panel {
    width: 100%;
    max-width: 650px;

    opacity: 0;
    transform: translate(40px, 30px);

    pointer-events: none;
    overflow: hidden;

    min-height: 0;
    max-height: 820px;

    border-radius: 30px;

    --boss-panel-bg:
        linear-gradient(
            rgba(20, 10, 8, .92),
            rgba(5, 5, 5, .95)
        );

    --boss-text-color: white;
    --boss-border-color: rgba(255, 80, 40, .45);
    --boss-glow-color: rgba(255, 80, 40, .45);
    --boss-title-color: white;

    --boss-phase-color: linear-gradient(90deg, #00BFFF, #ffd700);
    --boss-phase-glow: rgba(255, 215, 0, .35);

    background: var(--boss-panel-bg);
    color: var(--boss-text-color);

    border: 2px solid var(--boss-border-color);

    box-shadow:
        0 0 20px rgba(0,0,0,.45),
        0 0 30px var(--boss-glow-color);

    transition:
        opacity .35s ease,
        transform .45s ease;
}


.boss-split-wrapper.active .boss-difficulty-panel {
    opacity: 1;

    transform: translate(0, 100px);

    pointer-events: auto;
}

/* Themes por boss */

/* Maple World */

.lotus-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(35,15,10,.94), rgba(5,5,5,.97));
    --boss-text-color: white;
    --boss-title-color: #ffffff;
    --boss-border-color: rgba(255,90,45,.65);
    --boss-glow-color: rgba(255,90,45,.45);
    --boss-phase-color: linear-gradient(90deg, #00bfff, #ffb347, #ffd700);
    --boss-phase-glow: rgba(255,120,50,.45);

    --segment-color: #00bfff;
    --segment-color-2: #ff8c42;
    --segment-color-3: #ffd700;
}

.damien-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(65,5,45,.94), rgba(15,0,18,.98));
    --boss-text-color: white;
    --boss-title-color: #ffb6ff;
    --boss-border-color: rgba(210,60,255,.65);
    --boss-glow-color: rgba(210,60,255,.50);
    --boss-phase-color: linear-gradient(90deg, #7b2cff, #d83bff, #ff4fc3);
    --boss-phase-glow: rgba(255,79,195,.45);

    --segment-color: #7b2cff;
    --segment-color-2: #d83bff;
    --segment-color-3: #ff4fc3;
}

.slime-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(25,85,25,.92), rgba(4,28,12,.98));
    --boss-text-color: white;
    --boss-title-color: #caff75;
    --boss-border-color: rgba(135,255,70,.65);
    --boss-glow-color: rgba(135,255,70,.45);
    --boss-phase-color: linear-gradient(90deg, #6dff4d, #bfff3c, #ffd700);
    --boss-phase-glow: rgba(180,255,80,.45);

    --segment-color: #6dff4d;
    --segment-color-2: #bfff3c;
    --segment-color-3: #ffd700;
}

/* Arcana */

.lucid-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(55,20,85,.94), rgba(15,5,30,.98));
    --boss-text-color: white;
    --boss-title-color: #ffc8ff;
    --boss-border-color: rgba(255,130,255,.65);
    --boss-glow-color: rgba(255,130,255,.50);
    --boss-phase-color: linear-gradient(90deg, #ff91ff, #b967ff, #6ee7ff);
    --boss-phase-glow: rgba(255,145,255,.45);

    --segment-color: #ff91ff;
    --segment-color-2: #b967ff;
    --segment-color-3: #6ee7ff;
}

.will-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(35,10,20,.94), rgba(8,5,16,.98));
    --boss-text-color: white;
    --boss-title-color: #ffffff;
    --boss-border-color: rgba(180,40,70,.65);
    --boss-glow-color: rgba(190,0,40,.50);
    --boss-phase-color: linear-gradient(90deg, #4b8cff, #9a5cff, #d84dff);
    --boss-phase-glow: rgba(154,92,255,.45);

    --segment-color: #4b8cff;
    --segment-color-2: #9a5cff;
    --segment-color-3: #d84dff;
}

.gloom-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(20,10,35,.96), rgba(0,0,0,.98));
    --boss-text-color: white;
    --boss-title-color: #e5c7ff;
    --boss-border-color: rgba(150,60,255,.65);
    --boss-glow-color: rgba(150,60,255,.45);
    --boss-phase-color: linear-gradient(90deg, #5d2cff, #8c3dff, #c48fff);
    --boss-phase-glow: rgba(140,61,255,.45);

    --segment-color: #5d2cff;
    --segment-color-2: #8c3dff;
    --segment-color-3: #c48fff;
}

.darknell-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(12,5,35,.96), rgba(2,0,10,.99));
    --boss-text-color: white;
    --boss-title-color: #d8c8ff;
    --boss-border-color: rgba(95,55,180,.65);
    --boss-glow-color: rgba(95,55,180,.45);
    --boss-phase-color: linear-gradient(90deg, #151515, #4b1d91, #8b00ff);
    --boss-phase-glow: rgba(139,0,255,.45);

    --segment-color: #2b2b2b;
    --segment-color-2: #4b1d91;
    --segment-color-3: #8b00ff;
}

.verus-hilla-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(35,5,25,.96), rgba(5,0,8,.99));
    --boss-text-color: rgb(253, 253, 253);
    --boss-title-color: #0c9200;
    --boss-border-color: rgba(95, 255, 55, 0.65);
    --boss-glow-color: rgba(88, 255, 55, 0.45);
    --boss-phase-color: linear-gradient(90deg, #0c6b00, #00c010, #5eff4f);
    --boss-phase-glow: rgba(85, 255, 79, 0.45);

    --segment-color:   #0c6b00;
    --segment-color-2: #10c000;
    --segment-color-3: #5eff4f;

}

.black-mage-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(30,20,10,.96), rgba(0,0,0,.99));
    --boss-text-color: white;
    --boss-title-color: #ffe2a8;
    --boss-border-color: rgba(255,170,60,.65);
    --boss-glow-color: rgba(255,170,60,.45);
    --boss-phase-color: linear-gradient(90deg, #111111, #9b5a16, #ffd27a);
    --boss-phase-glow: rgba(255,190,80,.45);

    --segment-color: #111111;
    --segment-color-2: #9b5a16;
    --segment-color-3: #ffd27a;
}
/* Grandis */

.seren-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(80,65,5,.94), rgba(25,15,0,.98));
    --boss-text-color: white;
    --boss-title-color: #fff4a8;
    --boss-border-color: rgba(255,230,60,.70);
    --boss-glow-color: rgba(255,230,60,.45);
    --boss-phase-color: linear-gradient(90deg, #fff56b, #ffb347, #ffffff);
    --boss-phase-glow: rgba(255,230,60,.45);

    --segment-color: #fff56b;
    --segment-color-2: #ffb347;
    --segment-color-3: #ffffff;
}

.kalos-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(45,45,48,.96), rgba(5,5,8,.99));
    --boss-text-color: white;
    --boss-title-color: #d9e7ff;
    --boss-border-color: rgba(120,150,190,.65);
    --boss-glow-color: rgba(120,150,190,.40);
    --boss-phase-color: linear-gradient(90deg, #3d4654, #8aa0c8, #e7f0ff);
    --boss-phase-glow: rgba(150,180,220,.45);

    --segment-color: #3d4654;
    --segment-color-2: #8aa0c8;
    --segment-color-3: #e7f0ff;
}

.kaling-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(65,5,85,.95), rgba(12,0,25,.99));
    --boss-text-color: white;
    --boss-title-color: #e9b3ff;
    --boss-border-color: rgba(195,70,255,.65);
    --boss-glow-color: rgba(195,70,255,.45);
    --boss-phase-color: linear-gradient(90deg, #6c00a8, #b000ff, #ff5cff);
    --boss-phase-glow: rgba(180,0,255,.45);

    --segment-color: #6c00a8;
    --segment-color-2: #b000ff;
    --segment-color-3: #ff5cff;
}

.first-adversary-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(0,90,120,.94), rgba(0,25,45,.98));
    --boss-text-color: white;
    --boss-title-color: #bff7ff;
    --boss-border-color: rgba(0,220,255,.70);
    --boss-glow-color: rgba(0,220,255,.45);
    --boss-phase-color: linear-gradient(90deg, #00d9ff, #59f0ff, #ffffff);
    --boss-phase-glow: rgba(0,220,255,.45);

    --segment-color: #00d9ff;
    --segment-color-2: #59f0ff;
    --segment-color-3: #ffffff;
}

.malefic-star-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(95,75,0,.94), rgba(8,5,0,.99));
    --boss-text-color: white;
    --boss-title-color: #fff1a3;
    --boss-border-color: rgba(255,215,50,.70);
    --boss-glow-color: rgba(255,215,50,.45);
    --boss-phase-color: linear-gradient(90deg, #8c6b00, #ffd700, #fff6a8);
    --boss-phase-glow: rgba(255,215,0,.45);

    --segment-color: #8c6b00;
    --segment-color-2: #ffd700;
    --segment-color-3: #fff6a8;
}

.limbo-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(55,5,80,.95), rgba(0,0,0,.99));
    --boss-text-color: white;
    --boss-title-color: #d69cff;
    --boss-border-color: rgba(150,40,220,.70);
    --boss-glow-color: rgba(150,40,220,.45);
    --boss-phase-color: linear-gradient(90deg, #3a005c, #8a00cc, #d05cff);
    --boss-phase-glow: rgba(160,50,220,.45);

    --segment-color: #3a005c;
    --segment-color-2: #8a00cc;
    --segment-color-3: #d05cff;
}

.baldrix-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(0,70,100,.95), rgba(0,5,12,.99));
    --boss-text-color: white;
    --boss-title-color: #aeefff;
    --boss-border-color: rgba(0,180,230,.70);
    --boss-glow-color: rgba(0,180,230,.45);
    --boss-phase-color: linear-gradient(90deg, #008fc7, #00c8ff, #bdf6ff);
    --boss-phase-glow: rgba(0,200,255,.45);

    --segment-color: #008fc7;
    --segment-color-2: #00c8ff;
    --segment-color-3: #bdf6ff;
}

.jupiter-difficulty-theme {
    --boss-panel-bg: linear-gradient(rgba(15,75,30,.94), rgba(0,12,5,.99));
    --boss-text-color: white;
    --boss-title-color: #b9ffca;
    --boss-border-color: rgba(80,255,130,.65);
    --boss-glow-color: rgba(80,255,130,.45);
    --boss-phase-color: linear-gradient(90deg, #38ff7a, #00c853, #d6ff7a);
    --boss-phase-glow: rgba(80,255,130,.45);

    --segment-color: #38ff7a;
    --segment-color-2: #00c853;
    --segment-color-3: #d6ff7a;
}

/*prueba*/

#article-page {
    min-height: 100vh;
    padding: 100px 0;
    position: relative;
    z-index: 20;
}

#article-content {
    width: 85%;
    max-width: 1000px;
    min-height: 400px;

    margin: 0 auto;

    background: rgba(255,255,255,.96);
    color: #111;

    border-radius: 30px;
    padding: 50px;

    box-shadow:
        0 0 25px rgba(0,0,0,.25),
        0 0 45px rgba(173,216,230,.35);
}

.news-article {
    position: relative;

    color: #111 !important;

    max-width: 950px;

    margin: 0 auto;

    padding: 50px 70px;
}

.news-article p {

    text-align: justify;

    line-height: 2;

    font-size: 20px;

    color: #2f2f2f;

    margin-bottom: 30px;
}

.news-article h1 {
    text-align: center;
    font-family: 'Heavitas';
    font-size: 42px;

    color: #0077cc;

    margin-bottom: 10px;
}

.news-date {
    text-align: center;
    opacity: .7;
    margin-bottom: 30px;

    font-family: "Object Sans Lorien";
}

.news-article p {
    line-height: 1.8;
    margin-bottom: 20px;

    font-family: "Object Sans Lorien";
    font-size: 18px;
}

.news-article h2 {
    margin-top: 50px;
    margin-bottom: 20px;

    font-family: 'Heavitas';
    color: #111;
}

.article-banner {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 30px;
}

.article-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.article-image {
    margin: 35px 0;

    padding: 10px;

    background: linear-gradient(
        135deg,
        #ffffff,
        #d9e9ff
    );

    border-radius: 25px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.12),
        0 0 15px rgba(0,191,255,.20);
}

.article-image img {
    width: 100%;
    display: block;

    border-radius: 18px;
}

.article-banner,
.article-image {
    width: 100%;
    min-height: 250px;

    border-radius: 15px;

    background: rgba(0,119,204,.08);

    margin-bottom: 20px;
}

.article-banner img,
.article-image img {

    width: 100%;
    height: auto;

    display: block;

    border-radius: 15px;
}

.article-block {
    margin: 70px 0;
}

.article-section-title {
    width: fit-content;
    max-width: 90%;

    margin: 0 auto 35px auto;
    padding: 12px 45px;

    font-family: 'Heavitas';
    font-size: 24px;
    text-align: center;

    color: #111;

    background: linear-gradient(#ffffff, #dcdcdc);

    border: 4px double #555;
    outline: 3px solid #cfcfcf;

    box-shadow:
        inset 0 0 0 2px #ffffff,
        0 4px 0 #777,
        0 8px 15px rgba(0,0,0,.18);
}


.article-section-title::after {

    content: "";

    display: block;

    width: 120px;
    height: 4px;

    margin: 12px auto 0;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #00bfff,
        #5ce1ff
    );
}

.article-hero-title {
    margin-bottom: 40px;
    padding: 45px 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            rgba(255,255,255,.78),
            rgba(255,255,255,.90)
        ),
        url("images/landing-page/banner-principal.webp");

    background-size: cover;
    background-position: center;

    box-shadow:
        0 0 20px rgba(0,191,255,.25);
}

.article-hero-title{
    width: 95%;
    max-width: 1000px;
    margin: 0 auto 40px auto;
}

.article-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;

    font-family: 'Heavitas';
    font-size: 24px;

    color: #0077cc;
}

.article-brand img {
    width: 45px !important;
    height: 45px !important;
    object-fit: contain;
}

.article-brand span{
    font-family:'Heavitas';
    font-size:24px;
    color:#0c75d4;
    letter-spacing:2px;
}

.article-hero-title h1{
    font-family:'Heavitas';
    font-size:58px;

    text-align:center;

    line-height:1.05;

    margin:0 0 20px 0;

    color:#0c75d4;

    text-shadow:
        0 4px 0 rgba(255,255,255,.6),
        0 8px 20px rgba(12,117,212,.25);
}

.article-back-btn{
    position: absolute;

    top: 120px;
    left: 800px;

    padding: 10px 15px;

    border: none;
    border-radius: 16px;

    background: #6f8faa;
    color: white;

    font-weight: 600;
    cursor: pointer;

    transition: .25s;

    z-index: 10;
}

.article-back-btn:hover{
    background: #5f7f99;
    transform: translateX(-3px);
}

.framed-image {
    padding: 10px;

    background: linear-gradient(
        135deg,
        #ffffff,
        #dcefff
    );

    border-radius: 25px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.12),
        0 0 18px rgba(0,191,255,.25);
}

.framed-image img {
    width: 100%;

    display: block;

    border-radius: 18px;
}

.clean-image {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.clean-image img {
    width: 100%;
    display: block;
}

/*Seccion Galeria*/

.gallery-page-container {
    width: 90%;
    max-width: 1500px;
    margin: 60px auto;
    padding: 60px;

    border-radius: 40px;

    background: linear-gradient(
        135deg,
        rgba(255,245,250,.96),
        rgba(235,245,255,.96)
    );

    box-shadow:
        0 0 20px rgba(255,255,255,.5),
        0 0 40px rgba(173,216,230,.3);
}

.gallery-page-title {
    text-align: center;
    font-family: 'Heavitas';
    font-size: 55px;
    color: #0077cc;
    margin-bottom: 50px;
}

.gallery-page-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.memory-card {
    background: white;

    border-radius: 20px;
    overflow: hidden;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0,0,0,.12);

    transition: .3s ease;
}

.memory-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 0 18px rgba(0,191,255,.45),
        0 12px 25px rgba(0,0,0,.18);
}

.memory-card img {
    width: 100%;
    height: 190px;

    object-fit: cover;

    display: block;
}

.memory-card p {
    padding: 15px;

    margin: 0;

    font-family: "Object Sans Lorien";
    font-weight: bold;

    color: #222;
    text-align: center;
}

.gallery-modal {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 99999;

    background: rgba(0,0,0,.75);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    justify-content: center;
    align-items: center;
}

.gallery-modal-image {
    max-width: 90%;
    max-height: 85%;

    border-radius: 20px;

    box-shadow:
        0 0 25px rgba(255,255,255,.35),
        0 0 45px rgba(0,0,0,.7);

    animation: galleryZoom .25s ease;
}

.gallery-close {
    position: absolute;

    top: 30px;
    right: 40px;

    color: white;

    font-size: 35px;
    font-weight: bold;

    cursor: pointer;

    z-index: 100000;
}

.gallery-close:hover {
    color: #00BFFF;
}

@keyframes galleryZoom {
    from {
        opacity: 0;
        transform: scale(.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*Periodicos*/

.periodico-modal {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 99999;

    background: rgba(0,0,0,.78);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    justify-content: center;
    align-items: center;

    padding: 40px;
}

.periodico-images {
    display: flex;
    gap: 5px;

    max-width: 95vw;
    max-height: 90vh;

    overflow-x: auto;
    overflow-y: auto;

    padding: 20px;
}

.periodico-images img {
    max-height: 85vh;
    width: auto;

    border-radius: 15px;

    box-shadow:
        0 0 25px rgba(255,255,255,.25),
        0 0 45px rgba(0,0,0,.65);
}

/* Soporte y Ticket */

.support-container {
    width: 90%;
    max-width: 1200px;
    margin: 70px auto;
    padding: 60px;

    border-radius: 35px;

    background: linear-gradient(
        135deg,
        rgba(255,245,250,.96),
        rgba(235,245,255,.96)
    );

    box-shadow:
        0 0 25px rgba(0,0,0,.12),
        0 0 40px rgba(173,216,230,.3);
}

.support-title {
    text-align: center;

    font-family: 'Heavitas';
    font-size: 52px;

    color: #0077cc;

    margin-bottom: 45px;
}

.contact-card-grid {
    display: flex;
    justify-content: center;
    gap: 45px;
    flex-wrap: wrap;
}

.contact-card {
    width: 300px;

    padding: 25px;

    border-radius: 25px;

    background: white;

    text-align: center;

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);

    transition: .3s ease;
}

.contact-card:hover {
    transform: translateY(-8px);
}

.contact-card img {
    width: 180px;
    height: 180px;

    object-fit: contain;

    margin-bottom: 20px;
}

.contact-card h3 {
    font-family: 'Heavitas';
    color: #0077cc;
    margin-bottom: 15px;
}

.contact-card p {
    font-family: "Object Sans Lorien";
    color: #222;
    margin: 8px 0;
}

.ticket-form {
    max-width: 750px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ticket-form label {
    font-family: 'Heavitas';
    color: #0077cc;
    letter-spacing: 1px;
}

.ticket-form input,
.ticket-form textarea {
    padding: 14px 18px;

    border-radius: 14px;
    border: 2px solid rgba(0,119,204,.25);

    font-family: "Object Sans Lorien";
    font-size: 16px;

    outline: none;
}

.ticket-form textarea {
    min-height: 220px;
    resize: vertical;
}

.ticket-form input:focus,
.ticket-form textarea:focus {
    border-color: #00bfff;
    box-shadow: 0 0 12px rgba(0,191,255,.25);
}

.ticket-form button {
    margin-top: 20px;

    padding: 15px;

    border: none;
    border-radius: 20px;

    background: #00bfff;
    color: white;

    font-family: 'Heavitas';
    font-size: 18px;

    cursor: pointer;

    transition: .3s ease;
}

.ticket-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 18px rgba(0,191,255,.6);
}

.classes-container.page-frame,
.bosses-container.page-frame,
.gallery-page-container.page-frame,
.support-container.page-frame {
    border: 4px solid transparent;

    background:
        linear-gradient(
            135deg,
            rgba(255,245,250,.96),
            rgba(235,245,255,.96)
        ) padding-box,
        linear-gradient(
            135deg,
            #b743ff,
            #00c8ff,
            #ff5db8
        ) border-box;

    border-radius: 40px;

    box-shadow:
        0 0 25px rgba(0,0,0,.10),
        0 0 35px rgba(0,191,255,.25);
}


/* para ventanas o celulares */

@media (max-width: 900px) {

    body {
        padding-top: 220px;
        overflow-x: hidden;
    }

    .top-banner {
        height: auto;
        min-height: 55px;
        padding: 8px 10px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .navbar {
        top: 55px;
        height: auto;
        min-height: 160px;
        padding: 15px 0;
        flex-direction: column;
        justify-content: center;
    }

    .navbar-logo {
        position: static;
        justify-content: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .navbar-logo img {
        width: 45px;
        height: 45px;
    }

    .navbar-logo h1 {
        font-size: 30px;
        letter-spacing: 3px;
    }

    .navbar-menu {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .dropbtn {
        font-size: 17px;
        padding: 6px 8px;
    }

    .dropdown {
        position: relative;
    }

    .dropdown-content {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    .clan-slider-section {
        width: 90%;
        height: 420px;
        margin: 35px auto;
        border-radius: 25px;
    }

    .clan-slider {
        border-radius: 20px;
    }

    .clan-slider img {
        object-fit: cover;
        object-position: center;
        border-radius: 20px;
    }

    .clan-arrow {
        width: 45px;
        height: 45px;
        font-size: 30px;
    }

    .info-section {
        width: 90%;
        margin: 60px auto;
    }

    .patch-container,
    .classes-container,
    .support-container,
    .gallery-page-container {
        width: 88%;
        padding: 25px;
        margin: 40px auto;
        border-radius: 28px;
    }

    .patch-title,
    .classes-title,
    .support-title,
    .gallery-page-title {
        font-size: 34px;
    }
}

@media (max-width: 480px) {

    body {
        padding-top: 245px;
    }

    .top-banner {
        font-size: 11px;
    }

    .navbar {
        min-height: 175px;
    }

    .navbar-logo img {
        width: 38px;
        height: 38px;
    }

    .navbar-logo h1 {
        font-size: 24px;
    }

    .navbar-menu {
        gap: 8px;
    }

    .dropbtn {
        font-size: 14px;
    }

    .clan-slider-section {
        width: 88%;
        height: 360px;
    }

    .clan-arrow {
        width: 40px;
        height: 40px;
        font-size: 26px;
    }

    .patch-container,
    .classes-container,
    .support-container,
    .gallery-page-container {
        width: 86%;
        padding: 20px;
    }
}

/* RESPONSIVE GENERAL */
* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
}

/* TABLET / PANTALLA REDUCIDA */
@media (max-width: 600px) {

    /* Lorien: secciones de abajo */
    .info-section {
        width: 90%;
        margin: 50px auto;
    }

    .info-box,
    .info-box.reverse {
        flex-direction: column;
        padding: 25px;
        gap: 20px;
        text-align: center;
    }

    .info-section-image {
        width: 100%;
        max-width: 320px;
        height: auto;
        border-radius: 25px;
    }

    .info-section-text {
        max-width: 100%;
        text-align: center;
    }

    .info-section-text h2 {
        font-size: 28px;
    }

    .info-section-text p,
    .offer-list {
        font-size: 15px;
        text-align: justify;
    }

    /* Clases */
    .classes-container {
        width: 92%;
        padding: 25px;
        margin: 40px auto;
    }

    .class-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .class-tab {
        width: 140px;
        height: 48px;
        font-size: 16px;
    }

    .classes-content {
        padding: 20px;
    }

    .class-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .job-card {
        width: 100%;
        height: 230px;
    }

    .job-card img {
        object-fit: cover;
    }

    .job-name {
        font-size: 13px;
        padding: 10px 4px;
    }

    /* Detalle de clase */
    .job-detail-container {
        width: 92%;
        padding: 25px;
        margin: 40px auto;
        overflow: hidden;
    }

    .job-detail-title {
        font-size: 34px;
        letter-spacing: 6px;
        margin-top: 50px;
    }

    .job-detail-content {
        flex-direction: column;
        gap: 25px;
    }

    .job-detail-left,
    .job-detail-right {
        width: 100%;
    }

    .job-detail-image {
        width: 100%;
        max-width: 360px;
        height: auto;
    }

    .job-video {
        width: 100%;
        height: 220px;
    }

    .damage-box {
        width: 100%;
    }

    .job-buttons {
        flex-wrap: wrap;
    }

    /* Bosses listado */
    .bosses-container {
        width: 92%;
        padding: 25px;
        margin: 40px auto;
    }

    .boss-tab {
        width: 100%;
        max-width: 320px;
        font-size: 20px;
    }

    .bosses-content {
        padding: 25px;
    }

    .boss-card {
        width: 100%;
        max-width: 280px;
    }

    /* Boss detalle */
    .boss-split-wrapper,
    .boss-split-wrapper.active {
        width: 95%;
        display: flex;
        flex-direction: column;
        transform: none;
        gap: 25px;
        margin: 30px auto;
    }

    .boss-detail-page {
        width: 100%;
        min-height: auto;
        padding: 30px 20px;
        margin: 0 auto;
    }

    .boss-detail-name {
        position: relative;
        top: auto;
        left: auto;
        font-size: 34px;
        margin-top: 55px;
        text-align: center;
    }

    .boss-info-panel {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 25px;
    }

    .boss-difficulty-panel {
        width: 100%;
        max-width: 100%;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .difficulty-header h2 {
        white-space: normal;
        font-size: 26px;
    }

    .difficulty-stats {
        flex-direction: column;
        gap: 8px;
    }

    /* Footer */
    .footer {
        width: 100%;
        min-height: auto;
        padding: 30px 15px;
    }

    .footer-socials {
        flex-wrap: wrap;
        gap: 20px;
    }
}

/* CELULAR */
@media (max-width: 480px) {

    .class-grid {
        grid-template-columns: 1fr;
    }

    .job-card {
        height: 260px;
    }

    .classes-title,
    .bosses-title,
    .patch-title,
    .gallery-page-title,
    .support-title {
        font-size: 30px;
    }

    .job-detail-title {
        font-size: 28px;
        letter-spacing: 3px;
    }

    .job-video {
        height: 190px;
    }

    .info-box {
        padding: 20px;
    }

    .boss-detail-name {
        font-size: 28px;
    }

    .boss-description-box,
    .boss-difficulty-box {
        padding: 18px;
    }
}

/* RESPONSIVE: FUNDADORES / GALERÍA / PERIÓDICOS */
@media (max-width: 900px) {

    /* Fundadores */
    .founders-panel {
        width: 92%;
        padding: 30px 20px;
        margin: 50px auto;
    }

    .founders-title {
        font-size: 30px;
        margin-bottom: 35px;
    }

    .leaders-row,
    .bottom-row {
        flex-direction: column;
        align-items: center;
        gap: 35px;
        margin: 0 auto 35px auto;
        width: 100%;
    }

    .leader-card {
        width: 100%;
        max-width: 380px;
        height: auto;
        padding: 25px;
    }

    .leader-image {
        width: 100%;
        height: 240px;
    }

    /* Galería / Periódicos */
    .gallery-page-container {
        width: 92%;
        padding: 25px;
        margin: 40px auto;
    }

    .gallery-page-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .memory-card {
        width: 100%;
        height: auto;
    }

    .memory-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    /* Modal de galería */
    .gallery-modal img,
    #galleryModalImg {
        max-width: 92vw;
        max-height: 75vh;
    }

    /* Modal periódicos */
    .periodico-images {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .periodico-images img {
        max-width: 92vw;
        height: auto;
    }
}

@media (max-width: 480px) {

    .founders-title,
    .gallery-page-title {
        font-size: 28px;
    }

    .gallery-page-grid {
        grid-template-columns: 1fr;
    }

    .memory-card img {
        height: 220px;
    }

    .leader-card {
        max-width: 260px;
    }

    .leader-image {
        height: 220px;
    }
}

/* RESPONSIVE NOTICIAS / PATCH NOTES / EVENTOS / SORTEOS / ARTÍCULOS */
@media (max-width: 900px) {

    .patch-container {
        width: 92%;
        padding: 35px 22px;
        overflow: hidden;
    }

    .patch-tools {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .patch-search,
    .patch-filter {
        width: 100%;
        max-width: 100%;
    }

    .patch-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 25px;
        justify-items: center;
    }

    .patch-card {
        width: 100%;
        max-width: 360px;
        height: auto;
    }

    .patch-card img {
        width: 100%;
        height: 190px;
        object-fit: cover;
    }

    .patch-card h3 {
        font-size: 20px;
        word-break: break-word;
    }

    .patch-card p {
        min-height: auto;
        max-height: none;
        overflow: visible;
    }

    .patch-footer {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    /* Artículos abiertos */
    #article-page {
        padding: 30px 0;
    }

    #article-content {
        width: 92%;
        padding: 25px 15px;
        border-radius: 25px;
        overflow: hidden;
    }

    .news-article {
        max-width: 100%;
        padding: 25px 10px;
        overflow: hidden;
    }

    .article-hero-title {
        width: 100%;
        padding: 30px 18px;
        border-radius: 22px;
        overflow: hidden;
    }

    .article-brand {
        justify-content: center;
        gap: 8px;
    }

    .article-brand img {
        width: 42px;
        height: 42px;
    }

    .article-brand span {
        font-size: 18px;
    }

    .article-hero-title h1 {
        font-size: 32px;
        line-height: 1.15;
        white-space: normal;
        word-break: break-word;
    }

    .news-date {
        font-size: 14px;
        line-height: 1.4;
    }

    .article-banner,
    .article-image {
        width: 100%;
        min-height: auto;
        margin: 25px auto;
    }

    .article-banner img,
    .article-image img,
    .framed-image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .article-section-title {
        width: 95%;
        min-width: unset;
        max-width: 100%;
        font-size: 18px;
        line-height: 1.3;
        padding: 12px 15px;
        margin: 35px auto 20px;
        word-break: break-word;
    }

    .news-article p {
        font-size: 15px;
        line-height: 1.8;
        text-align: justify;
    }

    .article-back-btn {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 25px;
    }
}

@media (max-width: 480px) {

    .patch-title {
        font-size: 34px;
    }

    .patch-container {
        width: 94%;
        padding: 30px 15px;
    }

    .patch-card {
        max-width: 320px;
    }

    .patch-card img {
        height: 170px;
    }

    .patch-card h3 {
        font-size: 18px;
    }

    .patch-card p {
        font-size: 14px;
    }

    #article-content {
        width: 94%;
        padding: 20px 10px;
    }

    .article-hero-title h1 {
        font-size: 26px;
    }

    .article-brand span {
        font-size: 16px;
    }

    .article-section-title {
        font-size: 15px;
    }

    .news-article p {
        font-size: 14px;
    }
}

.single-image-article {
    padding-top: 70px;
}

.single-back-btn {
    position: absolute;
    top: -10px;
    left: -10px;
    margin: 0;
}

/* overdrive */

.overdrive-article { color: #111; }

    .overdrive-hero {
        padding: 45px 30px;
        margin-bottom: 35px;
        border-radius: 28px;
        text-align: center;
        background:
            linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.92)),
            linear-gradient(135deg, #06142f, #1a75ff, #ff3b8d);
        box-shadow:
            0 0 25px rgba(0,191,255,.25),
            0 0 45px rgba(255,105,180,.18);
    }

    .overdrive-brand {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        font-family: 'Heavitas';
        color: #0077d9;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .overdrive-brand img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .overdrive-hero h1 {
        margin: 0;
        font-family: 'Heavitas';
        font-size: 48px;
        line-height: 1.1;
        color: #0077d9;
        text-transform: uppercase;
        text-shadow:
            0 3px 0 white,
            0 0 18px rgba(0,191,255,.45);
    }

    .overdrive-date {
        margin-top: 14px;
        font-family: "Object Sans Lorien";
        letter-spacing: 2px;
        color: #333;
    }

    .overdrive-index {
        margin: 35px auto;
        padding: 30px;
        border-radius: 25px;
        background: linear-gradient(135deg, #07152d, #112e5e);
        color: white;
        box-shadow:
            0 0 18px rgba(0,0,0,.25),
            0 0 25px rgba(0,191,255,.25);
    }

    .overdrive-index h2 {
        margin-top: 0;
        text-align: center;
        font-family: "Object Sans Lorien";
        color: #7de7ff;
        letter-spacing: 2px;
    }

    .overdrive-index ol {
        columns: 2;
        text-align: left;
        column-gap: 40px;
        padding-left: 25px;
        margin-bottom: 0;
    }

    .overdrive-index li {
        margin-bottom: 12px;
        font-family: "Object Sans Lorien";
        line-height: 1.5;
    }

    .overdrive-index a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

    .overdrive-index a:hover { color: #ff7ac8; }

    .overdrive-section {
        margin: 55px 0;
        padding: 35px;
        border-radius: 28px;
        background: linear-gradient(135deg, rgba(235,248,255,.95), rgba(255,245,252,.95));
        box-shadow:
            0 0 18px rgba(0,0,0,.08),
            0 0 25px rgba(0,191,255,.14);
    }

    .overdrive-section h2 {
        margin-top: 0;
        margin-bottom: 22px;
        padding: 14px 18px;
        border-radius: 16px;
        font-family: 'Heavitas';
        font-size: 26px;
        line-height: 1.25;
        text-align: center;
        color: white;
        background: linear-gradient(135deg, #005bd8, #00bfff, #ff4fa3);
        box-shadow: 0 0 14px rgba(0,191,255,.35);
    }

    .overdrive-section p,
    .overdrive-section li {
        font-family: "Object Sans Lorien";
        font-size: 17px;
        line-height: 1.9;
        text-align: justify;
        color: #222;
    }

    .overdrive-section ul,
    .overdrive-section ol { padding-left: 25px; }

    .overdrive-image {
        margin: 25px auto;
        padding: 4px;
        border-radius: 14px;
        background: linear-gradient(135deg, #00bfff, #8a2be2, #ff69b4);
        box-shadow: 0 0 20px rgba(0,191,255,.25);
    }

    .overdrive-image img {
        width: 100%;
        display: block;
        border-radius: 10px;
    }

    .overdrive-video {
        margin: 20px auto;
        padding: 6px;
        border-radius: 12px;
        background: linear-gradient(135deg, #07152d, #005bd8, #ff4fa3);
        box-shadow: 0 0 20px rgba(0,191,255,.25);
    }

    .overdrive-video video {
        width: 100%;
        display: block;
        border-radius: 14px;
        background: black;
    }

    .back-to-index {
        display: block;
        width: fit-content;
        margin: 35px auto 0;
        padding: 12px 24px;
        border-radius: 14px;
        background: #00bfff;
        color: white;
        font-family: "Object Sans Lorien";
        font-weight: bold;
        text-decoration: none;
        box-shadow: 0 0 15px rgba(0,191,255,.35);
    }

    .back-to-index:hover { transform: scale(1.04); }

    @media (max-width: 768px) {
        .overdrive-hero h1 { font-size: 30px; }
        .overdrive-index ol { columns: 1; }
        .overdrive-section { padding: 22px; }
        .overdrive-section h2 { font-size: 20px; }
        .overdrive-section p,
        .overdrive-section li { font-size: 15px; }
    }

    .overdrive-back-btn{
    left: -15px;
    top: -20px;
    right: auto;
}

/* =========================================================
   3ER HEXA SKILL KMS
========================================================= */

.hexa-article {
    scroll-behavior: smooth;
}

.hexa-hero h1 {
    line-height: 1.05;
}

.hexa-index ol {
    column-count: 2;
    column-gap: 70px;
}

.hexa-index li {
    break-inside: avoid;
}

.hexa-class-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;

    margin-top: 34px;
}

.hexa-class-card {
    padding: 22px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(235,248,255,.95)
        );

    border: 3px solid rgba(0,191,255,.35);

    box-shadow:
        0 10px 28px rgba(0, 119, 217, .10),
        0 0 22px rgba(0,191,255,.12);

    text-align: center;
}

.hexa-class-card h3 {
    margin: 0 0 18px;

    font-family: 'Heavitas', sans-serif;
    color: #0077d9;
    font-size: 24px;
    letter-spacing: 1.5px;
}

.hexa-class-card img {
    width: 100%;
    display: block;

    border-radius: 15px;

    border: 2px solid transparent;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.95)
        ) padding-box,
        linear-gradient(
            135deg,
            #00BFFF,
            #8A2BE2,
            #ff69b4
        ) border-box;

    box-shadow:
        0 12px 28px rgba(0,0,0,.12);
}

.hexa-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;

    margin-top: 30px;
}

.hexa-youtube-video {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 24px;

    border: 3px solid transparent;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.95)
        ) padding-box,
        linear-gradient(
            135deg,
            #00BFFF,
            #8A2BE2,
            #ff69b4
        ) border-box;

    box-shadow:
        0 12px 28px rgba(0,0,0,.16);
}

.hexa-youtube-video iframe {
    width: 100%;
    height: 100%;

    border: none;
    display: block;
}

@media (max-width: 900px) {
    .hexa-index ol {
        column-count: 1;
    }

    .hexa-class-grid,
    .hexa-video-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MODAL PARA VER HEXA SKILLS EN GRANDE
========================================================= */

.hexa-class-card img {
    cursor: zoom-in;
    transition: transform .2s ease, filter .2s ease;
}

.hexa-class-card img:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

.hexa-image-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 32px;

    background: rgba(5, 18, 35, .58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hexa-image-modal.active {
    display: flex;
}

.hexa-image-modal-content {
    position: relative;

    width: min(1100px, 94vw);
    max-height: 92vh;

    padding: 22px;

    border-radius: 30px;

    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,248,255,.96));

    border: 3px solid rgba(0, 191, 255, .45);

    box-shadow:
        0 24px 70px rgba(0,0,0,.35),
        0 0 35px rgba(0,191,255,.22);
}

.hexa-image-modal-title {
    margin: 0 52px 18px 0;

    font-family: 'Heavitas', sans-serif;
    color: #0077d9;
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: 1.5px;
    text-align: center;
}

.hexa-image-modal-img {
    width: 100%;
    max-height: 78vh;

    display: block;
    object-fit: contain;

    border-radius: 22px;

    border: 3px solid transparent;

    background:
        linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.95)) padding-box,
        linear-gradient(135deg, #00BFFF, #8A2BE2, #ff69b4) border-box;
}

.hexa-image-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: linear-gradient(135deg, #00BFFF, #0077d9);
    color: white;

    font-family: 'Object Sans Lorien', Arial, sans-serif;
    font-size: 24px;
    font-weight: 900;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(0, 119, 217, .25);
}

.hexa-image-modal-close:hover {
    transform: scale(1.05);
}

body.hexa-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .hexa-image-modal {
        padding: 16px;
    }

    .hexa-image-modal-content {
        padding: 16px;
        border-radius: 22px;
    }

    .hexa-image-modal-title {
        margin-right: 42px;
        font-size: 22px;
    }

    .hexa-image-modal-close {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}

/* =========================================================
   MODAL HEXA - GALERÍA CON VARIAS IMÁGENES
========================================================= */

.hexa-image-modal-viewer {
    position: relative;

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

.hexa-gallery-btn:hover {
    transform: translateY(-50%) scale(1.08);
}


.hexa-gallery-counter {
    margin-top: 14px;

    text-align: center;

    font-family: 'Object Sans Lorien', Arial, sans-serif;
    font-weight: 900;
    color: #0077d9;
    letter-spacing: 1px;
}

@media (max-width: 700px) {
    .hexa-gallery-btn {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    .hexa-gallery-prev {
        left: 8px;
    }

    .hexa-gallery-next {
        right: 8px;
    }
}

/* =========================================================
   MODAL HEXA - CONTROLES ABAJO DE LA IMAGEN
========================================================= */

.hexa-image-modal-content {
    width: min(1180px, 94vw);
}

.hexa-image-modal-viewer {
    position: relative;

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

.hexa-image-modal-img {
    width: 100%;
    max-height: 72vh;

    display: block;
    object-fit: contain;
}

.hexa-gallery-controls {
    margin-top: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.hexa-gallery-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: 52px;
    height: 52px;

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

    border: none;
    border-radius: 50%;

    background: linear-gradient(135deg, #00BFFF, #0077d9);
    color: white;

    font-size: 28px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(0, 119, 217, .35),
        inset 0 1px 0 rgba(255,255,255,.35);

    transform: none !important;
    transition: .2s ease;
}

.hexa-gallery-btn:hover {
    transform: scale(1.08) !important;
}

.hexa-gallery-counter {
    min-width: 90px;

    text-align: center;

    font-family: 'Object Sans Lorien', Arial, sans-serif;
    font-weight: 1000;
    color: #0077d9;
    font-size: 18px;
    letter-spacing: 1px;
}

@media (max-width: 700px) {
    .hexa-image-modal-img {
        max-height: 68vh;
    }

    .hexa-gallery-controls {
        gap: 18px;
    }

    .hexa-gallery-btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .hexa-gallery-counter {
        min-width: 70px;
        font-size: 15px;
    }
}

/* Menu del Usuario */

.auth-buttons {
    position: relative;
}

.user-menu {
    position: absolute;
    top: 42px;
    right: 0;

    min-width: 220px;

    display: block;

    background: rgba(15, 25, 45, .98);
    border: 1px solid rgba(0,191,255,.45);
    border-radius: 14px;

    box-shadow: 0 0 15px rgba(0,191,255,.25);

    overflow: hidden;

    z-index: 90000;
}

.hidden-user-menu {
    display: none !important;
}

.user-menu button {
    width: 100%;

    padding: 12px 16px;

    border: none;
    background: transparent;
    color: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;

    text-align: left;
    cursor: pointer;
}

.user-menu button:hover {
    background: rgba(0,191,255,.22);
}

/* Imagen del Usuario */

.user-avatar {
    width: 24px;
    height: 24px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid rgba(255,255,255,.6);
}

.user-avatar-header {

    width: 28px;
    height: 28px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid white;

    box-shadow:
        0 0 10px rgba(255,255,255,.4);
}


.hidden-user-menu {
    display: none !important;
}

.user-menu.open-user-menu {
    display: block !important;
}

/* Perfil de usuario */

.perfil-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 35000;

    background: rgba(0,0,0,.60);
    backdrop-filter: blur(10px);

    justify-content: center;
    align-items: flex-start;

    overflow-y: auto;
    padding: 40px 0;
}

.perfil-panel {
    position: relative;
    width: 92%;
    max-width: 850px;
    max-height: none;
    margin: auto;
    padding: 35px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(235,248,255,.98), rgba(255,242,251,.98));
    border: 3px solid rgba(0,191,255,.45);
    box-shadow: 0 0 30px rgba(0,191,255,.35), 0 0 55px rgba(255,105,180,.25);
}

.perfil-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.12);
    font-size: 28px;
    cursor: pointer;
}

.perfil-header {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0077d9, #00bfff, #ff69b4);
    color: white;
}

.perfil-avatar {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 0 18px rgba(255,255,255,.55);
}

.perfil-header h2 {
    margin: 0;
    font-family: 'Heavitas';
    font-size: 34px;
    letter-spacing: 2px;
}

.perfil-header p {
    margin: 8px 0 0;
    font-family: "Object Sans Lorien";
    font-weight: bold;
}

.perfil-tabs {
    display: flex;
    gap: 10px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.perfil-tab {
    flex: 1;
    min-width: 130px;
    padding: 12px;
    border: none;
    border-radius: 14px;
    background: white;
    color: #0077d9;
    font-family: "Object Sans Lorien";
    font-weight: bold;
    cursor: pointer;
}

.perfil-tab.active,
.perfil-tab:hover {
    background: #00bfff;
    color: white;
}

.perfil-tab-content {
    display: none;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255,255,255,.78);
}

.perfil-tab-content.active {
    display: block;
}

.perfil-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.perfil-grid div {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fcff, #fff4fb);
    border: 1px solid rgba(0,191,255,.18);
}

.perfil-grid span {
    display: block;
    font-family: "Object Sans Lorien";
    color: #666;
    font-size: 13px;
}

.perfil-grid strong {
    display: block;
    margin-top: 6px;
    font-family: 'Heavitas';
    color: #0077d9;
    font-size: 18px;
}

.perfil-action-btn,
.perfil-danger-btn {
    margin: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 14px;
    color: white;
    font-family: "Object Sans Lorien";
    font-weight: bold;
    cursor: pointer;
}

.perfil-action-btn {
    background: #00bfff;
}

.perfil-danger-btn {
    background: #ff4f7b;
}

@media (max-width: 650px) {
    .perfil-header {
        flex-direction: column;
        text-align: center;
    }

    .perfil-grid {
        grid-template-columns: 1fr;
    }
}

.perfil-form {
    display: grid;
    gap: 10px;
}

.perfil-form label {
    font-family: "Object Sans Lorien";
    font-weight: bold;
    color: #0077d9;
}

.perfil-form input {
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid rgba(0,191,255,.25);
    font-family: "Object Sans Lorien";
}

#ajustesMensaje {
    font-family: "Object Sans Lorien";
    font-weight: bold;
}

/* Diseño Perfil */

.perfil-steam {
    max-width: 900px;
    padding: 0;
    overflow: hidden;
}

.perfil-hero {
    padding: 35px;
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, #07152d, #0077d9, #ff69b4);
    color: white;
}

.perfil-avatar-big {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 0 22px rgba(255,255,255,.6);
}

.perfil-hero-info h2 {
    margin: 0;
    font-family: 'Heavitas';
    font-size: 40px;
    letter-spacing: 2px;
}

.perfil-hero-info p {
    margin-top: 10px;
    font-family: "Object Sans Lorien";
    font-weight: bold;
}

.perfil-tabs {
    padding: 18px 25px;
    margin: 0;
    background: rgba(10,20,40,.96);
}

.perfil-tab-content {
    min-height: 360px;
    margin: 0;
    border-radius: 0;
    padding: 30px;
    background: linear-gradient(135deg, rgba(235,248,255,.98), rgba(255,242,251,.98));
}

.perfil-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.perfil-stats-grid div {
    padding: 18px;
    border-radius: 18px;
    background: white;
    border: 1px solid rgba(0,191,255,.25);
    box-shadow: 0 0 12px rgba(0,191,255,.10);
}

.perfil-stats-grid span {
    display: block;
    font-family: "Object Sans Lorien";
    color: #666;
    font-size: 13px;
}

.perfil-stats-grid strong {
    display: block;
    margin-top: 6px;
    font-family: 'Heavitas';
    color: #0077d9;
    font-size: 18px;
}

.perfil-section-title {
    font-family: 'Heavitas';
    color: #0077d9;
    margin-top: 0;
}

.perfil-section-desc {
    font-family: "Object Sans Lorien";
    color: #555;
}

.legion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 25px;
}

.legion-empty-card {
    min-height: 130px;
    border-radius: 20px;
    border: 2px dashed rgba(0,191,255,.45);
    background: rgba(255,255,255,.7);

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

    font-family: "Object Sans Lorien";
    font-weight: bold;
    color: #0077d9;
    cursor: pointer;
}

.legion-empty-card:hover {
    background: white;
    box-shadow: 0 0 16px rgba(0,191,255,.25);
}

.legion-character-img {
    max-width: 130px;
    max-height: 130px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(0,191,255,.45));

    transition: .25s ease;
}

.legion-ms-card:hover .legion-character-img {
    transform: scale(1.06);
}

@media (max-width: 700px) {
    .perfil-hero {
        flex-direction: column;
        text-align: center;
    }

    .perfil-stats-grid,
    .legion-grid {
        grid-template-columns: 1fr;
    }
}

@font-face {
    font-family: "Object Sans Lorien";
    src: url("fonts/ObjectSans-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Texto interno del menú de usuario */
.perfil-modal,
.perfil-modal p,
.perfil-modal span,
.perfil-modal strong,
.perfil-modal small,
.perfil-modal button,
.perfil-modal input,
.perfil-modal select,
.perfil-modal textarea,
.insignias-personaje-modal,
.insignias-personaje-modal p,
.insignias-personaje-modal span,
.insignias-personaje-modal strong,
.insignias-personaje-modal small,
.insignias-personaje-modal button,
.insignias-personaje-modal input {
    font-family: "Object Sans Lorien", Arial, sans-serif;
}

/* Títulos internos también con ObjectSans para que no se vean pesados */
.perfil-modal h2,
.perfil-modal h3,
.perfil-modal h4,
.perfil-section-title,
.insignias-personaje-modal h2 {
    font-family: "Object Sans Lorien", Arial, sans-serif;
    letter-spacing: 1px;
}

/*Para el Avatar de cada Usuario */

.avatar-upload-box {
    margin-bottom: 25px;
    padding: 20px;

    border-radius: 20px;

    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,191,255,.25);
}

.avatar-upload-box input {
    width: 100%;
    margin: 12px 0;
    padding: 12px;

    border-radius: 12px;
    background: white;

    font-family: "Object Sans Lorien";
}

#avatarMensaje {
    font-family: "Object Sans Lorien";
    font-weight: bold;
}

/* LEGION CHAMPION */

.legion-header-box {
    margin-bottom: 18px;
    text-align: center;
}

.legion-bonus-panel,
.legion-bonus-box {
    margin-bottom: 25px;
    padding: 22px;
    border-radius: 22px;

    background:
        linear-gradient(135deg, rgba(7,21,45,.96), rgba(15,45,70,.96));

    color: white;
    border: 2px solid rgba(126,231,255,.35);

    box-shadow:
        0 0 18px rgba(0,191,255,.25);

    font-family: "Object Sans Lorien";
    text-align: center;
}

.legion-bonus-panel h4,
.legion-bonus-box h4 {
    margin-top: 0;

    font-family: 'Heavitas';
    color: #7ee7ff;
    letter-spacing: 1px;
}

.legion-bonus-panel p,
.legion-bonus-box p {
    margin: 6px 0;

    font-family: "Object Sans Lorien";
    color: #dff7ff;
}

.legion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.legion-ms-card {
    position: relative;

    min-height: 390px;
    padding: 16px;

    border-radius: 22px;

    background:
        radial-gradient(circle at top, rgba(0,191,255,.28), transparent 45%),
        linear-gradient(180deg, #273b49, #122433);

    border: 3px solid rgba(126,231,255,.55);

    box-shadow:
        inset 0 0 18px rgba(255,255,255,.08),
        0 0 18px rgba(0,191,255,.25);

    color: white;
    overflow: hidden;
}

.legion-ms-card::before {
    content: "";

    position: absolute;
    inset: 8px;

    border-radius: 18px;
    border: 2px solid rgba(255,255,255,.12);

    pointer-events: none;
}

.legion-card-top {
    position: relative;
    z-index: 3;

    height: 42px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.legion-rank {
    font-family: 'Heavitas';
    font-size: 34px;
    color: #ffe0b0;

    line-height: 1;

    text-shadow:
        0 0 10px rgba(255,224,176,.45);
}

.legion-level {
    font-family: "Object Sans Lorien";
    font-weight: bold;
    color: #ffe0b0;
    font-size: 16px;
}

.legion-image-zone {
    position: relative;
    z-index: 2;

    height: 135px;
    margin-top: 8px;

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

    overflow: visible;
}

.legion-character-img {
    display: block;

    max-width: 135px;
    max-height: 135px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(0,191,255,.45));

    transition: .25s ease;
}

.legion-ms-card:hover .legion-character-img {
    transform: scale(1.06);
}

.legion-character-info {
    position: relative;
    z-index: 3;

    text-align: center;
    margin-top: 8px;
}

.legion-character-info strong {
    display: block;

    font-family: "Object Sans Lorien";
    font-size: 18px;
    color: white;
}

.legion-class {
    display: block;

    font-family: "Object Sans Lorien";
    color: #bfefff;

    margin-bottom: 4px;
}

.legion-character-info small {
    font-family: "Object Sans Lorien";
    color: #d8d8d8;
}

.legion-insignias {
    position: relative;
    z-index: 3;

    display: flex;
    justify-content: center;
    gap: 8px;

    margin-top: 18px;
}

.legion-ms-insignia {
    width: 42px;
    height: 54px;

    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);

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

    font-family: "Object Sans Lorien";
    font-size: 10px;
    font-weight: bold;

    cursor: help;
}

.legion-ms-insignia.active {
    background:
        linear-gradient(180deg, #7ee7ff, #00bfff, #0077d9);

    color: white;

    border: 1px solid rgba(255,255,255,.65);

    box-shadow:
        0 0 12px rgba(0,191,255,.75);
}

.legion-ms-insignia.locked {
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05));

    color: rgba(255,255,255,.35);

    border: 1px solid rgba(255,255,255,.18);
}

.legion-actions {
    position: relative;
    z-index: 3;

    margin-top: 20px;

    display: flex;
    justify-content: center;
    gap: 10px;
}

.legion-actions button {
    padding: 9px 16px;

    border: none;
    border-radius: 12px;

    color: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;

    cursor: pointer;

    transition: .2s ease;
}

.legion-edit-btn {
    background: #00BFFF;
}

.legion-delete-btn {
    background: #ff4f7b;
}

.legion-actions button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 14px rgba(255,255,255,.25);
}

.legion-empty-card {
    min-height: 390px;

    border-radius: 22px;

    border: 3px dashed rgba(0,191,255,.45);

    background:
        linear-gradient(135deg, rgba(255,255,255,.85), rgba(235,248,255,.85));

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

    font-family: "Object Sans Lorien";
    font-weight: bold;
    color: #0077d9;

    cursor: pointer;
}

.legion-empty-card:hover {
    background: white;

    box-shadow:
        0 0 18px rgba(0,191,255,.25);
}

@media (max-width: 850px) {
    .legion-grid {
        grid-template-columns: 1fr;
    }
}

/* Personaje individual */

.personaje-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40000;

    background: rgba(0,0,0,.60);
    backdrop-filter: blur(10px);

    justify-content: center;
    align-items: center;
}

.personaje-box {
    position: relative;
    width: 90%;
    max-width: 520px;

    padding: 35px;
    border-radius: 28px;

    background: linear-gradient(135deg, #eaf8ff, #fff2fb);
    border: 3px solid rgba(0,191,255,.45);

    box-shadow:
        0 0 25px rgba(0,191,255,.35),
        0 0 45px rgba(255,105,180,.25);

    text-align: center;
}

.personaje-box h2 {
    font-family: 'Heavitas';
    color: #0077d9;
}

.personaje-form {
    display: grid;
    gap: 14px;
}

.personaje-form input {
    padding: 13px 15px;
    border-radius: 14px;
    border: 2px solid rgba(0,191,255,.25);
    font-family: "Object Sans Lorien";
}

.insignia-checks {
    display: grid;
    gap: 8px;

    padding: 15px;
    border-radius: 18px;

    background: rgba(255,255,255,.75);

    text-align: left;
    font-family: "Object Sans Lorien";
    font-weight: bold;
}

.personaje-save-btn {
    padding: 13px 25px;
    border: none;
    border-radius: 14px;

    background: linear-gradient(135deg, #00BFFF, #0077d9);
    color: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;

    cursor: pointer;
}

.personaje-close {
    position: absolute;
    top: 14px;
    right: 16px;

    border: none;
    background: transparent;

    font-size: 28px;
    cursor: pointer;
}

/* ADMIN PANEL V2 */

.admin-dashboard {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.admin-stat-card {
    padding: 18px;
    border-radius: 18px;

    background:
        linear-gradient(135deg, rgba(7,21,45,.96), rgba(15,45,70,.96));

    color: white;
    text-align: center;

    border: 1px solid rgba(126,231,255,.35);

    box-shadow:
        0 0 16px rgba(0,191,255,.18);
}

.admin-stat-card span {
    display: block;

    font-family: "Object Sans Lorien";
    font-size: 13px;
    color: #dff7ff;
}

.admin-stat-card strong {
    display: block;

    margin-top: 8px;

    font-family: 'Heavitas';
    font-size: 28px;
    color: #7ee7ff;
}

.admin-tools {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.admin-tools input {
    flex: 1;

    padding: 13px 15px;

    border-radius: 14px;
    border: 2px solid rgba(0,191,255,.25);

    font-family: "Object Sans Lorien";
}

.hidden-admin-create {
    display: none !important;
}

.admin-create-box {
    padding: 20px;
    margin-bottom: 22px;

    border-radius: 20px;

    background: rgba(255,255,255,.82);
    border: 1px solid rgba(0,191,255,.25);

    display: grid;
    gap: 10px;
}

.admin-create-box h4,
.admin-subtitle {
    font-family: 'Heavitas';
    color: #0077d9;
}

.admin-create-box input,
.admin-create-box select {
    padding: 12px;

    border-radius: 12px;
    border: 2px solid rgba(0,191,255,.25);

    font-family: "Object Sans Lorien";
}

.admin-users-list {
    display: grid;
    gap: 18px;
}

.admin-member-card {
    display: grid;
    grid-template-columns: 230px 1fr auto;
    gap: 18px;
    align-items: center;

    padding: 18px;

    border-radius: 22px;

    background: rgba(255,255,255,.86);
    border: 1px solid rgba(0,191,255,.25);

    box-shadow:
        0 0 16px rgba(0,191,255,.10);
}

.admin-member-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-member-left img {
    width: 58px;
    height: 58px;

    border-radius: 50%;
    object-fit: cover;

    border: 2px solid white;

    box-shadow:
        0 0 12px rgba(0,191,255,.25);
}

.admin-member-left strong {
    display: block;

    font-family: 'Heavitas';
    color: #0077d9;
    font-size: 18px;
}

.admin-member-left span {
    display: inline-block;

    margin-top: 6px;
    padding: 4px 8px;

    border-radius: 999px;

    font-family: "Object Sans Lorien";
    font-size: 12px;
    font-weight: bold;
}

.admin-status-active {
    background: rgba(0,200,120,.14);
    color: #009c5f;
}

.admin-status-inactive {
    background: rgba(255,80,110,.14);
    color: #ff4f7b;
}

.admin-member-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;

    font-family: "Object Sans Lorien";
}

.admin-member-data p {
    margin: 0;
    color: #333;
}

.admin-member-data b {
    color: #0077d9;
}

.admin-member-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-member-actions button {
    min-width: 105px;

    border: none;
    border-radius: 12px;

    padding: 9px 14px;

    color: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;

    cursor: pointer;
}

.admin-edit-btn {
    background: #00BFFF;
}

.admin-disable-btn {
    background: #f5a623;
}

.admin-delete-btn {
    background: #ff4f7b;
}

.admin-empty {
    font-family: "Object Sans Lorien";
    color: #555;
}

@media (max-width: 950px) {
    .admin-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-member-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .admin-member-left {
        justify-content: center;
    }

    .admin-member-data {
        grid-template-columns: 1fr;
    }

    .admin-member-actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .admin-tools {
        flex-direction: column;
    }
}

.hidden-admin {
    display: none !important;
}

/* Notificaciones */

.hidden-logged {
    display: none !important;
}

.notification-box {
    position: relative;
}

.notification-btn {
    position: relative;

    border: none;
    background: transparent;
    color: white;

    font-size: 20px;
    cursor: pointer;
}

.notification-count {
    position: absolute;
    top: -8px;
    right: -10px;

    min-width: 18px;
    height: 18px;

    padding: 2px 5px;
    border-radius: 999px;

    background: #ff4f7b;
    color: white;

    font-size: 11px;
    font-weight: bold;
}

.notification-panel {
    position: absolute;
    top: 36px;
    right: 0;

    width: 320px;
    max-height: 420px;
    overflow-y: auto;

    padding: 16px;

    border-radius: 18px;

    background: rgba(15, 25, 45, .97);
    border: 1px solid rgba(0,191,255,.45);

    box-shadow:
        0 0 18px rgba(0,191,255,.25);

    z-index: 50000;
}

.hidden-notifications {
    display: none;
}

.notification-panel h4 {
    margin-top: 0;

    font-family: 'Heavitas';
    color: #7ee7ff;
}

.notification-item {
    padding: 12px;
    margin-bottom: 10px;

    border-radius: 14px;

    background: rgba(255,255,255,.08);

    font-family: "Object Sans Lorien";
    color: white;
}

.notification-item strong {
    display: block;
    color: #7ee7ff;
}

.notification-item small {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.65);
}

/* crear notificaciones */

.admin-notification-box {
    padding: 20px;
    margin-bottom: 24px;

    border-radius: 20px;

    background: rgba(255,255,255,.82);
    border: 1px solid rgba(0,191,255,.25);

    display: grid;
    gap: 10px;
}

.admin-notification-box h4 {
    font-family: 'Heavitas';
    color: #0077d9;
}

.admin-notification-box input,
.admin-notification-box textarea,
.admin-notification-box select {
    padding: 12px;

    border-radius: 12px;
    border: 2px solid rgba(0,191,255,.25);

    font-family: "Object Sans Lorien";
}

.admin-notification-box textarea {
    min-height: 110px;
    resize: vertical;
}

#adminNotiMensajeEstado {
    font-family: "Object Sans Lorien";
    font-weight: bold;
}

.notification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: 8px;
}

.notification-view-btn {
    padding: 6px 12px;

    border: none;
    border-radius: 10px;

    background: #00BFFF;
    color: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;
    font-size: 12px;

    cursor: pointer;
}

.notification-view-btn:hover {
    background: #0077d9;
}

/* Toast notificaciones */

.notification-toast {
    position: fixed;
    top: 90px;
    right: 25px;

    width: 360px;
    min-height: 95px;

    padding: 16px;

    display: flex;
    gap: 14px;
    align-items: flex-start;

    border-radius: 18px;

    background:
        linear-gradient(135deg, rgba(12,25,45,.98), rgba(20,45,70,.98));

    border: 1px solid rgba(126,231,255,.45);

    color: white;

    box-shadow:
        0 0 22px rgba(0,191,255,.35),
        0 0 40px rgba(255,105,180,.15);

    z-index: 70000;

    animation: toastSlideIn .35s ease forwards;
}

.hidden-toast {
    display: none !important;
}

.toast-icon {
    width: 42px;
    height: 42px;

    border-radius: 50%;

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

    background: rgba(0,191,255,.18);

    font-size: 22px;

    box-shadow:
        0 0 14px rgba(0,191,255,.35);
}

.toast-content {
    flex: 1;
}

.toast-content strong {
    display: block;

    font-family: 'Heavitas';
    color: #7ee7ff;
    letter-spacing: 1px;
}

.toast-content p {
    margin: 8px 0 10px;

    font-family: "Object Sans Lorien";
    font-size: 14px;
    line-height: 1.35;
}

.toast-action-btn {
    padding: 7px 14px;

    border: none;
    border-radius: 10px;

    background: #00BFFF;
    color: white;

    font-family: "Object Sans Lorien";
    font-weight: bold;

    cursor: pointer;
}

.toast-action-btn:hover {
    background: #0077d9;
}

.toast-close-btn {
    border: none;
    background: transparent;

    color: rgba(255,255,255,.65);

    font-size: 20px;

    cursor: pointer;
}

.toast-close-btn:hover {
    color: #ff4f7b;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(45px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(45px) scale(.96);
    }
}

.notification-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.notification-delete-btn {
    border: none;
    background: transparent;
    color: rgba(255,255,255,.65);
    cursor: pointer;
    font-size: 15px;
}

.notification-delete-btn:hover {
    color: #ff4f7b;
}

/* animacion de la campana */

.notification-btn.notification-alert {
    animation: bellReminder 5s infinite;
    transform-origin: top center;
}

.notification-count.notification-count-pop {
    animation: notificationBadgePop 5s infinite;
}

@keyframes bellReminder {

    0%,
    72%,
    100% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(255,79,123,0));
    }

    76% {
        transform: rotate(-18deg) scale(1.12);
    }

    78% {
        transform: rotate(18deg) scale(1.12);
    }

    80% {
        transform: rotate(-14deg) scale(1.10);
    }

    82% {
        transform: rotate(14deg) scale(1.10);
    }

    84% {
        transform: rotate(-8deg) scale(1.06);
    }

    86% {
        transform: rotate(8deg) scale(1.06);
    }

    88% {
        transform: rotate(0deg) scale(1);
        filter:
            drop-shadow(0 0 8px rgba(0,191,255,.9))
            drop-shadow(0 0 18px rgba(255,79,123,.45));
    }
}

@keyframes notificationBadgePop {

    0%,
    72%,
    100% {
        transform: scale(1);
        box-shadow: none;
    }

    76% {
        transform: scale(1.35);
        box-shadow:
            0 0 10px rgba(255,79,123,.85),
            0 0 18px rgba(255,255,255,.35);
    }

    82% {
        transform: scale(1);
    }
}

/* Panel Lateral Para miembros Lorien */

.member-sidebar {
    position: fixed;
    top: 260px;
    right: 0;

    width: 260px;
    max-height: calc(100vh - 150px);

    background: rgba(10, 20, 35, .96);
    border-left: 1px solid rgba(0,191,255,.45);
    border-top: 1px solid rgba(0,191,255,.35);
    border-bottom: 1px solid rgba(0,191,255,.35);

    border-radius: 18px 0 0 18px;

    color: white;

    box-shadow:
        0 0 22px rgba(0,191,255,.25);

    z-index: 25000;

    transition: transform .3s ease;
}

.member-sidebar.collapsed {
    transform: translateX(245px);
}

.member-sidebar-toggle {
    position: absolute;
    left: -44px;
    top: 18px;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 14px 0 0 14px;

    background: rgba(10, 20, 35, .96);
    color: white;

    font-size: 20px;
    cursor: pointer;

    border: 1px solid rgba(0,191,255,.35);
}

.member-sidebar-content {
    padding: 18px;
    overflow-y: auto;
    max-height: calc(100vh - 150px);
}

.member-sidebar-content h3 {
    margin-top: 0;

    font-family: 'Heavitas';
    color: #7ee7ff;
    text-align: center;
}

.member-group-title {
    margin: 18px 0 8px;

    font-family: "Object Sans Lorien";
    font-size: 12px;
    color: #bfefff;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.member-online-card {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px;
    margin-bottom: 8px;

    border-radius: 12px;

    background: rgba(255,255,255,.06);

    cursor: pointer;
    transition: .2s ease;
}

.member-online-card:hover {
    background: rgba(0,191,255,.16);
}

.member-online-card img {
    width: 34px;
    height: 34px;

    border-radius: 50%;
    object-fit: cover;

    border: 2px solid rgba(255,255,255,.65);
}

.member-online-info {
    display: grid;
}

.member-online-info strong {
    font-family: "Object Sans Lorien";
    font-size: 13px;
    color: white;
}

.member-online-info small {
    font-family: "Object Sans Lorien";
    font-size: 11px;
    color: rgba(255,255,255,.65);
}

.member-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #23d18b;

    box-shadow: 0 0 8px rgba(35,209,139,.75);
}

.member-sidebar-toggle img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.logged-only:not(.hidden-logged) {
    animation: loggedMenuIn .35s ease;
}

@keyframes loggedMenuIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* para hexa */

.class-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hexa-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(8px);
    z-index: 90000;
    align-items: center;
    justify-content: center;
}

.hexa-modal-content {
    position: relative;
    width: min(1150px, 96vw);
    max-height: 94vh;
}

.hexa-modal-content img {
    width: 100%;
    max-height: 94vh;
    object-fit: contain;
    border-radius: 18px;
    border: 6px solid var(--hexa-color);
    box-shadow:
        0 0 20px var(--hexa-color),
        0 0 45px rgba(255,255,255,.20);
}

.hexa-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #ff4f7b;
    color: white;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
}

.hexa-class-btn {
    min-width: 160px;
    padding: 14px 28px;
    border: none;
    border-radius: 14px;
    background: var(--job-color);
    color: white;
    font-family: "Object Sans Lorien";
    font-weight: bold;
    font-size: 17px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: .25s ease;
}

.hexa-class-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 16px var(--job-color),
        0 0 28px rgba(255,255,255,.25);
}


/* =========================================================
   CENTRO DE PERSONAJES - MIS PERSONAJES V1.1
========================================================= */

#misPersonajesCentroGrid.mis-personajes-centro-grid,
.mis-personajes-centro-grid {
    width: min(1260px, 94%);
    margin: 38px auto 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 28px;

    align-items: stretch;
}

.mis-personaje-centro-card {
    position: relative;

    min-height: 390px;

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

    padding: 22px 22px 24px;

    border-radius: 28px;
    border: 3px solid rgba(126, 231, 255, .85);

    background:
        linear-gradient(180deg, rgba(235, 248, 255, .92), rgba(255, 241, 250, .86));

    text-align: center;

    box-shadow:
        0 14px 30px rgba(0, 119, 217, .10),
        0 0 24px rgba(255, 105, 180, .10),
        inset 0 1px 0 rgba(255,255,255,.85);

    overflow: hidden;
}

.mis-personaje-centro-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top left, rgba(0, 191, 255, .14), transparent 38%),
        radial-gradient(circle at bottom right, rgba(255, 105, 180, .16), transparent 44%);

    pointer-events: none;
}

.mis-personaje-centro-top {
    position: relative;
    z-index: 2;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 16px;
}

.mis-personaje-centro-slot {
    max-width: 60%;

    padding: 7px 13px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .88);
    color: #0879dc;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .8rem;
    font-weight: 1000;
    letter-spacing: 1px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    box-shadow: 0 7px 14px rgba(0,119,217,.10);
}

.mis-personaje-centro-level {
    color: #f28b22;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 1000;
}

.mis-personaje-centro-avatar-wrap {
    position: relative;
    z-index: 2;

    width: 145px;
    height: 145px;

    margin: 0 auto 16px;

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

    border-radius: 50%;

    background:
        radial-gradient(circle, rgba(255,255,255,.95), rgba(218,246,255,.66));

    border: 2px solid rgba(143, 223, 255, .8);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 10px 22px rgba(0,119,217,.10);
}

.mis-personaje-centro-avatar-wrap img {
    width: 118px;
    height: 118px;

    object-fit: contain;
    object-position: center;

    filter: drop-shadow(0 8px 12px rgba(0,0,0,.15));
}

.mis-personaje-centro-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 8px;

    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.55rem;
    font-weight: 1000;
    letter-spacing: 1px;

    color: #0879dc;
}

.mis-personaje-centro-info {
    position: relative;
    z-index: 2;

    min-height: 86px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;

    margin-bottom: 16px;
}

.mis-personaje-centro-info p,
.mis-personaje-centro-empty p {
    margin: 0;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1.28;

    color: #31445f;
}

.mis-personaje-centro-actions {
    position: relative;
    z-index: 2;

    width: 100%;

    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: auto;
}

.mis-personaje-centro-actions button {
    min-width: 108px;

    padding: 11px 14px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(135deg, #12b9f2, #0077d9);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 1000;

    cursor: pointer;

    box-shadow: 0 10px 20px rgba(0,119,217,.18);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.mis-personaje-centro-actions button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 26px rgba(0,119,217,.24);
}

.mis-personaje-centro-actions .delete-character-btn {
    background: linear-gradient(135deg, #ff4f86, #ff6aa0);
}

.mis-personaje-centro-empty {
    justify-content: center;

    border-style: dashed;

    background:
        linear-gradient(180deg, rgba(244, 251, 255, .76), rgba(255, 244, 251, .72));
}

.mis-personaje-centro-add {
    position: relative;
    z-index: 2;

    width: 88px;
    height: 88px;

    margin: 0 auto 18px;

    border: none;
    border-radius: 50%;

    background: linear-gradient(135deg, #4ed7ff, #0aa9e8);
    color: #ffffff;

    font-size: 3rem;
    font-weight: 1000;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 14px 28px rgba(0,119,217,.22);
}

.mis-personaje-centro-empty h3 {
    color: #0879dc;
}

/* Ocultar restos viejos del sistema Champion */
.legion-badges-row,
.legion-badge,
.legion-rank,
.legion-bonus-panel,
#legionBonus,
.champion-rank,
.champion-badges,
.champion-insignias {
    display: none !important;
}

/* Responsive */
@media (max-width: 1180px) {
    #misPersonajesCentroGrid.mis-personajes-centro-grid,
    .mis-personajes-centro-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 720px) {
    #misPersonajesCentroGrid.mis-personajes-centro-grid,
    .mis-personajes-centro-grid {
        grid-template-columns: 1fr;
        width: 94%;
    }

    .mis-personaje-centro-card {
        min-height: 360px;
    }

    .mis-personaje-centro-actions {
        flex-direction: column;
    }

    .mis-personaje-centro-actions button {
        width: 100%;
    }
}

/* Título champions */

.champions-section-title {
    text-align: center;
    margin: 30px 0;
}

.champions-section-title h3 {
    color: #0877d8;
    font-size: 34px;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.champions-section-title p {
    color: #074699;
    font-weight: 900;
}

/* Layout Champions */

.champions-showcase {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 30px;
}

/* Main */

.main-champion-card {
    position: relative;
    padding: 30px;
    border-radius: 30px;
    text-align: center;

    background:
        linear-gradient(180deg, rgba(255, 241, 183, .90), rgba(255,255,255,.65));

    border: 3px solid rgba(255, 202, 77, .95);

    box-shadow:
        0 0 26px rgba(255,202,77,.35),
        0 0 35px rgba(0,191,255,.15);

    transition: .25s ease;
}

.main-champion-card:hover {
    transform: translateY(-4px);
}

.main-badge {
    color: #c98200;
    font-weight: 900;
    letter-spacing: 1px;
}

.main-champion-card img {
    width: 250px;
    height: 250px;
    margin: 22px auto;
    display: block;
    object-fit: contain;
    background: transparent;
    border: none;
    border-radius: 0;
}

.main-champion-card h3 {
    color: #0877d8;
    font-size: 32px;
    margin: 8px 0;
}

.main-champion-card p {
    color: #074699;
    font-weight: bold;
}

/* Cards normales */

.champions-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.champion-card-v2 {
    padding: 22px;
    border-radius: 26px;
    text-align: center;

    background:
        linear-gradient(180deg, rgba(235,248,255,.92), rgba(255,240,250,.88));

    border: 2px solid rgba(126,231,255,.75);

    box-shadow:
        0 0 18px rgba(0,191,255,.18),
        0 0 25px rgba(255,105,180,.12);

    transition: .25s ease;
}

.champion-card-v2:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 0 24px rgba(0,191,255,.30),
        0 0 32px rgba(255,105,180,.20);
}

.champion-card-v2 span {
    color: #0877d8;
    font-weight: 900;
    letter-spacing: 1px;
}

.champion-card-v2 img {
    width: 170px;
    height: 170px;
    margin: 12px auto;
    display: block;
    object-fit: contain;
    background: transparent;
    border: none;
    border-radius: 0;
}

.champion-card-v2 strong {
    display: block;
    color: #0877d8;
    font-size: 21px;
}

.champion-card-v2 p {
    color: #074699;
    font-size: 13px;
    font-weight: bold;
}

.champion-card-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.champion-card-actions button {
    padding: 10px 16px;
    border: none;
    border-radius: 14px;
    background: #00bfff;
    color: white;
    font-weight: 900;
    cursor: pointer;
}

.champion-card-actions .delete-character-btn {
    background: #ff4f86;
}

/* Modal vincular personaje */

.vincular-character-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(8px);
    z-index: 90000;
    align-items: center;
    justify-content: center;
}

.vincular-character-card {
    position: relative;
    width: min(480px, 92vw);
    padding: 34px;
    border-radius: 28px;
    text-align: center;

    background:
        linear-gradient(180deg, rgba(235,248,255,.98), rgba(255,242,251,.98));

    border: 3px solid rgba(126,231,255,.85);

    box-shadow:
        0 0 32px rgba(0,191,255,.45),
        0 0 55px rgba(255,105,180,.28);
}

.vincular-character-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.15);
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
}

.vincular-character-card h2 {
    margin-top: 0;
    color: #0877d8;
}

.vincular-character-card p {
    color: #333;
    font-weight: bold;
}

.vincular-character-card input[type="text"] {
    width: 100%;
    padding: 14px;
    margin: 18px 0;
    border-radius: 14px;
    border: 2px solid rgba(0,191,255,.45);
    font-size: 16px;
}

/* Responsive */

@media (max-width: 980px) {
    .character-search-panel,
    .character-result-panel,
    .champions-showcase {
        grid-template-columns: 1fr;
    }

    .champions-mini-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 980px) {
    .character-profile-result {
        grid-template-columns: 1fr;
    }

    .character-stat-grid {
        grid-template-columns: 1fr;
    }
}

#centro-personajes,
#centro-personajes input,
#centro-personajes select,
#centro-personajes button {
    font-family: "Object Sans Lorien", Arial, sans-serif;
}


/* PERFIL - LEGION CHAMPION NUEVO */

.perfil-modal .legion-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    gap: 24px;
    padding: 28px 18px;
}

.perfil-modal .legion-champion-card {
    position: relative;
    min-height: 390px;
    padding: 20px;
    border-radius: 26px;
    text-align: center;

    background:
        radial-gradient(circle at top, rgba(25, 111, 145, .95), rgba(10, 36, 59, .98));

    border: 3px solid rgba(126, 231, 255, .65);

    box-shadow:
        0 0 20px rgba(0, 191, 255, .28),
        inset 0 0 20px rgba(255, 255, 255, .05);

    overflow: hidden;
}

.perfil-modal .legion-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.perfil-modal .legion-rank {
    color: #ffe0a3;
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}

.perfil-modal .legion-character-level {
    color: #ffe0a3;
    font-weight: 900;
    font-size: 17px;
}

.perfil-modal .legion-character-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    display: block;
    margin: 16px auto 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    filter: drop-shadow(0 0 12px rgba(126, 231, 255, .35));
}

.perfil-modal .legion-character-class {
    color: #9ff2ff;
    font-weight: 900;
    font-size: 14px;
    margin: 8px 0 4px;
    letter-spacing: 1px;
}

.perfil-modal .legion-character-name {
    color: white;
    font-size: 24px;
    margin: 0;
    letter-spacing: 1px;
}

.perfil-modal .legion-character-order {
    display: block;
    color: #dff8ff;
    margin: 8px 0 14px;
    font-weight: bold;
}

.perfil-modal .legion-badges-row {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 18px;
}

.perfil-modal .legion-badge {
    width: 38px;
    height: 48px;
    display: grid;
    place-items: center;

    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .35);

    font-size: 11px;
    font-weight: 900;

    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.perfil-modal .legion-badge.active {
    background: linear-gradient(180deg, #7ee7ff, #00bfff);
    color: white;
    box-shadow: 0 0 12px rgba(0, 191, 255, .5);
}

.perfil-modal .legion-card-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.perfil-modal .legion-card-buttons button {
    padding: 10px 16px;
    border: none;
    border-radius: 14px;
    background: #00bfff;
    color: white;
    font-weight: 900;
    cursor: pointer;
    transition: .2s ease;
}

.perfil-modal .legion-card-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(0, 191, 255, .45);
}

.perfil-modal .legion-card-buttons .delete-character-btn {
    background: #ff4f86;
}

.perfil-modal .empty-legion-card {
    opacity: .9;
}

.perfil-modal .legion-empty-art {
    width: 130px;
    height: 130px;
    margin: 30px auto 18px;
    display: grid;
    place-items: center;

    border-radius: 24px;
    background: rgba(255, 255, 255, .08);
    border: 2px dashed rgba(126, 231, 255, .45);

    color: #7ee7ff;
    font-size: 60px;
    font-weight: 900;
}

/* MODAL DE INSIGNIAS */

.insignias-personaje-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(8px);
}

.insignias-personaje-box {
    position: relative;
    width: min(520px, 92vw);
    padding: 34px;
    border-radius: 30px;
    text-align: center;

    background:
        linear-gradient(180deg, rgba(235, 248, 255, .98), rgba(255, 240, 250, .98));

    border: 3px solid rgba(126, 231, 255, .85);

    box-shadow:
        0 0 32px rgba(0, 191, 255, .42),
        0 0 55px rgba(255, 105, 180, .24);
}

.insignias-close {
    position: absolute;
    top: 14px;
    right: 16px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .15);

    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
}

.insignias-personaje-box h2 {
    margin-top: 0;
    color: #0877d8;
}

.insignias-personaje-box p {
    color: #074699;
    font-weight: bold;
}

.insignias-selector-list {
    display: grid;
    gap: 12px;
    margin: 24px 0;
}

.insignias-selector-list label {
    display: grid;
    grid-template-columns: 24px 58px 1fr;
    align-items: center;
    gap: 12px;

    padding: 13px 16px;
    border-radius: 18px;

    background: rgba(8, 69, 109, .92);
    color: white;
    font-weight: bold;
    text-align: left;
}

.insignias-selector-list span {
    display: grid;
    place-items: center;

    width: 48px;
    height: 36px;
    border-radius: 10px;

    background: #00bfff;
    color: white;
    font-size: 12px;
    font-weight: 900;
}

.guardar-insignias-btn {
    padding: 13px 26px;
    border: none;
    border-radius: 16px;
    background: #00bfff;
    color: white;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 900px) {
    .perfil-modal .legion-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   LORIEN - CENTRO DE PERSONAJES / PERFIL CHAMPIONS FINAL
   Bloque consolidado para evitar duplicados visuales
   ========================================================= */

/* Fuente base para menús internos */
#centro-personajes,
#centro-personajes input,
#centro-personajes select,
#centro-personajes button,
.perfil-modal,
.perfil-modal p,
.perfil-modal span,
.perfil-modal strong,
.perfil-modal small,
.perfil-modal button,
.perfil-modal input,
.perfil-modal select,
.perfil-modal textarea,
.insignias-personaje-modal,
.insignias-personaje-modal p,
.insignias-personaje-modal span,
.insignias-personaje-modal strong,
.insignias-personaje-modal small,
.insignias-personaje-modal button,
.insignias-personaje-modal input {
    font-family: "Object Sans Lorien", Arial, sans-serif;
}

/* Títulos internos: limpios, sin verse tan pesados como Heavitas */
#centro-personajes .character-center-header h2,
#centro-personajes .champions-section-title h3,
.perfil-modal h2,
.perfil-modal h3,
.perfil-modal h4,
.perfil-section-title,
.insignias-personaje-modal h2 {
    font-family: "Object Sans Lorien", Arial, sans-serif;
    letter-spacing: 1px;
}

/* Layout general */
.character-center-v2 {
    width: min(1580px, 98%);
    margin: 70px auto;
}

.character-profile-result {
    width: min(1320px, 98%);
    margin: 34px auto 46px;
    padding: 28px;
    border-radius: 34px;

    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 30px;
    align-items: stretch;

    background: linear-gradient(180deg, rgba(238, 248, 255, .96), rgba(255, 240, 250, .92));
    border: 3px solid rgba(126, 231, 255, .82);

    box-shadow:
        0 0 28px rgba(0, 191, 255, .22),
        0 0 42px rgba(255, 105, 180, .14);
}

.hidden-character-result {
    display: none;
}

/* Ficha izquierda del personaje */
.character-profile-left {
    height: auto;
    min-height: 100%;
    padding: 30px 26px;
    border-radius: 28px;

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

    background:
        linear-gradient(180deg, rgba(235, 249, 255, .96), rgba(255, 241, 250, .92));

    border: 2px solid rgba(126, 231, 255, .82);

    box-shadow:
        0 0 24px rgba(0, 191, 255, .18),
        0 0 34px rgba(255, 105, 180, .12);
}

.character-profile-left img {
    width: 215px;
    height: 215px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;

    background: transparent;
    border: none;
    border-radius: 0;

    filter: drop-shadow(0 0 10px rgba(126, 231, 255, .28));
}

.character-profile-left h3 {
    margin: 4px 0 8px;
    color: #0877d8;
    font-size: 34px;
    line-height: 1.1;
}

.character-profile-left p {
    margin: 0;
    color: #009fd0;
    font-size: 17px;
    font-weight: 900;
}

.character-level-pill {
    width: fit-content;
    margin: 18px auto 16px;
    padding: 9px 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #00bfff, #36d8ff);
    color: white;
    font-weight: 900;
    box-shadow: 0 0 14px rgba(0, 191, 255, .28);
}

.character-exp-bar {
    width: 100%;
    height: 13px;
    margin: 8px 0 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(8, 69, 109, .18);
}

.character-exp-bar div,
#resultadoExpBar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #00bfff, #ff5ab3);
    transition: width .35s ease;
}

#resultadoExpTexto {
    color: #074699;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 900;
    text-align: center;
}

/* Stats debajo del personaje */
.character-side-stats {
    width: 100%;
    margin-top: 24px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.character-side-stat {
    padding: 14px 10px;
    border-radius: 17px;
    text-align: center;

    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(126, 231, 255, .65);
    box-shadow: 0 0 12px rgba(0, 191, 255, .08);
}

.character-side-stat span {
    display: block;
    margin-bottom: 5px;
    color: #00a7d8;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.character-side-stat strong {
    display: block;
    color: #074699;
    font-size: 19px;
    font-weight: 900;
    word-break: break-word;
}

/* Columna derecha */
.character-profile-right {
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
}

/* Gráfica: azul Lorien más suave, no tan pesado */
.character-exp-history {
    grid-column: auto;
    margin-top: 0;
    padding: 28px;
    border-radius: 28px;

    background:
        linear-gradient(180deg, rgba(16, 108, 154, .88), rgba(24, 86, 133, .88));

    border: 2px solid rgba(126, 231, 255, .62);

    box-shadow:
        0 0 22px rgba(0, 191, 255, .20),
        0 0 28px rgba(255, 105, 180, .10),
        inset 0 0 22px rgba(255, 255, 255, .05);
}

.exp-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 18px;
}

.exp-history-header h4 {
    margin: 0 0 8px;
    color: #c9f7ff;
    font-size: 31px;
    font-weight: 900;
}

.exp-history-header p {
    margin: 0;
    color: rgba(255, 255, 255, .95);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
}

.exp-history-ranges {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.exp-history-ranges button {
    padding: 10px 14px;
    border: none;
    border-radius: 13px;

    background: rgba(255, 255, 255, .18);
    color: white;

    font-weight: 900;
    cursor: pointer;
    transition: .2s ease;
}

.exp-history-ranges button:hover,
.exp-history-ranges button.active {
    background: linear-gradient(90deg, #00bfff, #36d8ff);
    box-shadow: 0 0 14px rgba(0, 191, 255, .42);
}

.exp-chart-box {
    width: 100%;
    height: 390px;
    padding: 16px;
    border-radius: 22px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(7, 45, 74, .18));

    border: 1px solid rgba(126, 231, 255, .30);
    box-shadow: inset 0 0 18px rgba(255, 255, 255, .04);
}

#dailyExpChart {
    width: 100%;
    height: 100%;
    display: block;
}

#expHistoryMessage {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .96);
    font-size: 16px;
    font-weight: 900;
    text-align: center;
}

/* Panel de vinculación */
.character-result-actions {
    margin-top: 0;
    padding: 18px;
    border-radius: 24px;

    display: grid;
    gap: 12px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(235, 248, 255, .84));

    border: 2px solid rgba(126, 231, 255, .65);

    box-shadow:
        0 0 18px rgba(0, 191, 255, .12),
        0 0 22px rgba(255, 105, 180, .08);
}

.character-result-actions button,
.result-slot-picker select {
    width: 100%;
    padding: 14px 18px;
    border-radius: 15px;
    font-weight: 900;
}

.character-result-actions button {
    border: none;
    background: linear-gradient(90deg, #00bfff, #24d2ff);
    color: white;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 191, 255, .20);
}

.character-result-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(0, 191, 255, .35);
}

.result-slot-picker {
    display: grid;
    gap: 12px;
}

.result-slot-picker select {
    border: 2px solid rgba(0, 191, 255, .45);
    background: white;
    color: #074699;
}

/* Mis Champions */
.champions-showcase {
    grid-template-columns: 390px 1fr;
}

.main-champion-card {
    background:
        linear-gradient(180deg, rgba(255, 244, 188, .88), rgba(255, 255, 255, .72));
    border: 3px solid rgba(255, 202, 77, .90);
    box-shadow:
        0 0 24px rgba(255, 202, 77, .24),
        0 0 30px rgba(0, 191, 255, .10);
}

.champion-card-v2 {
    background:
        linear-gradient(180deg, rgba(235, 248, 255, .88), rgba(255, 241, 250, .82));
    border: 2px solid rgba(126, 231, 255, .78);
    box-shadow:
        0 0 18px rgba(0, 191, 255, .14),
        0 0 24px rgba(255, 105, 180, .10);
}

.main-champion-card h3,
.champion-card-v2 strong {
    color: #0877d8;
}

.main-champion-card p,
.champion-card-v2 p {
    color: #074699;
}

.main-champion-card button,
.champion-card-v2 button,
.champion-card-actions button {
    background: linear-gradient(90deg, #00bfff, #24d2ff);
    color: white;
    box-shadow: 0 0 12px rgba(0, 191, 255, .18);
}

.main-champion-card button:hover,
.champion-card-v2 button:hover,
.champion-card-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(0, 191, 255, .34);
}

.champion-card-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.champion-card-actions button {
    padding: 10px 16px;
    border: none;
    border-radius: 14px;
    font-weight: 900;
    cursor: pointer;
}

.champion-card-actions .delete-character-btn,
.main-champion-card .delete-character-btn,
.champion-card-v2 .delete-character-btn {
    background: linear-gradient(90deg, #ff4f86, #ff6aa0);
}

/* Perfil > Legion Champion más amplio */
.perfil-panel.perfil-steam {
    width: min(1450px, 97vw);
    max-width: 1450px;
    max-height: 94vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.perfil-modal .perfil-tab-content {
    overflow-x: hidden;
}

.perfil-modal .legion-grid {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    gap: 34px;
    padding: 36px 34px 50px;
}

.perfil-modal .legion-champion-card {
    min-height: 470px;
    width: 100%;
    box-sizing: border-box;
}

.perfil-modal .legion-card-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.perfil-modal .legion-card-buttons button {
    width: 100%;
    min-width: 0;
    padding: 12px 8px;
    font-size: 14px;
    white-space: nowrap;
}

.perfil-modal .legion-badge {
    cursor: help;
    transition: .2s ease;
}

.perfil-modal .legion-badge:hover {
    transform: translateY(-3px);
    filter: brightness(1.18);
}

.perfil-modal .legion-badge.active:hover {
    box-shadow:
        0 0 12px rgba(126, 231, 255, .8),
        0 0 18px rgba(0, 191, 255, .45);
}

@media (max-width: 1180px) {
    .perfil-modal .legion-grid {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
    }
}

@media (max-width: 1050px) {
    .character-profile-result {
        grid-template-columns: 1fr;
    }

    .character-profile-right {
        grid-template-rows: auto auto;
    }

    .exp-chart-box {
        height: 330px;
    }
}

@media (max-width: 760px) {
    .perfil-modal .legion-grid,
    .character-side-stats {
        grid-template-columns: 1fr;
    }

    .perfil-modal .legion-card-buttons {
        grid-template-columns: 1fr;
    }

    .exp-history-header {
        flex-direction: column;
    }

    .exp-history-ranges {
        justify-content: flex-start;
    }
}


/* ========================================================= */
/* TIPOGRAFÍA GLOBAL LORIEN - OBJECT SANS                    */
/* Mantiene Heavitas solo para branding, títulos y menú base. */
/* ========================================================= */

:root {
    --lorien-font-text: "Object Sans Lorien", Arial, sans-serif;
    --lorien-font-title: "Heavitas", Arial, sans-serif;
}

body,
button,
input,
select,
textarea,
p,
span,
strong,
small,
label,
a,
li,
td,
th,
.login-box,
.modal-info p,
.info-section-text p,
.offer-list,
.patch-card p,
.patch-footer,
.footer,
.classes-content,
.perfil-modal,
.perfil-modal p,
.perfil-modal span,
.perfil-modal strong,
.perfil-modal small,
.perfil-modal button,
.perfil-modal input,
.perfil-modal select,
.perfil-modal textarea,
.character-center-v2,
.character-center-v2 p,
.character-center-v2 span,
.character-center-v2 strong,
.character-center-v2 small,
.character-center-v2 button,
.character-center-v2 input,
.character-center-v2 select,
.character-center-v2 textarea,
.insignias-personaje-modal,
.insignias-personaje-modal p,
.insignias-personaje-modal span,
.insignias-personaje-modal strong,
.insignias-personaje-modal small,
.insignias-personaje-modal button,
.insignias-personaje-modal input,
.insignias-personaje-modal select,
.minigame-card,
.ruleta-panel,
.ruleta-panel button,
.ruleta-panel input,
.ruleta-panel select,
.ruleta-panel textarea {
    font-family: var(--lorien-font-text) !important;
}

/* Branding, títulos principales y navegación principal conservan Heavitas */
.navbar-logo h1,
.dropbtn,
.section-title,
.classes-title,
.patch-title,
.founders-title,
.info-section-text h2,
.modal-info h2,
.job-detail-title,
.support-title,
.character-center-header h2,
.champions-section-title h3,
.perfil-section-title,
.mini-hero h1,
.mini-title,
.minigame-content h2,
.footer-logo h3,
.leader-card h3,
.patch-card h3,
.job-name {
    font-family: var(--lorien-font-title) !important;
}

/* Títulos internos secundarios: Object Sans para que no se vean pesados */
.character-search-panel h3,
.character-profile-left h3,
.exp-history-header h4,
.character-profile-right h4,
.perfil-modal h2,
.perfil-modal h3,
.perfil-modal h4,
.insignias-personaje-modal h2,
.login-box h2,
.legion-character-name,
.main-champion-card h3,
.champion-card-v2 strong {
    font-family: var(--lorien-font-text) !important;
}

/* ===================================================== */
/* NAVBAR - MENÚ MÁS LIGERO CON OBJECT SANS              */
/* Mantiene LORIEN del logo con Heavitas, pero suaviza    */
/* las opciones del menú principal.                       */
/* ===================================================== */

.dropbtn {
    font-family: var(--lorien-font-text) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.05 !important;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.dropbtn:hover {
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(126, 231, 255, .70),
        0 0 14px rgba(0, 191, 255, .45);
}

.dropdown-content a {
    font-family: var(--lorien-font-text) !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.navbar-logo h1 {
    letter-spacing: 4px !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

@media (max-width: 1200px) {
    .dropbtn {
        font-size: 22px !important;
        letter-spacing: 0.3px !important;
    }
}

/*bosses*/

.boss-extra-info {
    margin-top: 24px;
    margin-bottom: 30px;

    display: flex;
    flex-direction: column;
    gap: 13px;

    color: white;
    font-family: "Object Sans Lorien", Arial, sans-serif;
}

.boss-extra-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.35;
}

.boss-extra-line strong {
    color: rgba(255, 255, 255, .96);
    font-weight: 900;
}

.boss-extra-line span {
    color: white;
    font-weight: 900;
}

.boss-drop-line {
    margin-top: 2px;
}

.boss-drop-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.boss-drop-dot.blue {
    background: #31baff;
    box-shadow:
        0 0 8px rgba(49, 186, 255, .85),
        0 0 16px rgba(49, 186, 255, .45);
}

.boss-drop-dot.green {
    background: #62ff7a;
    box-shadow:
        0 0 8px rgba(98, 255, 122, .85),
        0 0 16px rgba(98, 255, 122, .45);
}

.boss-extra-spacer {
    height: 12px;
}

.boss-crystal-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.boss-crystal-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;

    filter:
        drop-shadow(0 0 8px rgba(126, 231, 255, .45))
        drop-shadow(0 0 12px rgba(255, 105, 180, .22));
}

.important-rewards {
    margin-top: 22px;
}

@media (max-width: 780px) {
    .boss-extra-line {
        font-size: 15px;
    }

    .boss-crystal-icon {
        width: 30px;
        height: 30px;
    }
}


/* ===================================================== */
/* BOSSES - PANELES MÁS GRANDES Y LEGIBLES               */
/* Agregado para ampliar las ventanas de detalle de boss  */
/* sin tocar la lógica JS ni los datos de cada dificultad */
/* ===================================================== */

.bosses-container {
    width: min(1760px, 94%);
    max-width: 1760px;
}

.bosses-content {
    padding: 52px;
}

/* Vista dividida: panel izquierdo + panel derecho */
.boss-split-wrapper {
    width: min(1880px, 97vw);
    max-width: 1880px;
    margin: 18px auto 70px;
}

.boss-split-wrapper.active {
    grid-template-columns: minmax(920px, 1000px) minmax(720px, 800px);
    gap: 24px;
}

.boss-detail-page {
    min-height: 900px;
    padding: 92px 86px;
}

.boss-split-wrapper .boss-detail-page {
    min-height: 900px;
}

.boss-detail-name {
    font-size: clamp(60px, 4vw, 78px);
    letter-spacing: 3px;
}

.back-boss-btn {
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 15px;
}

.boss-info-panel {
    top: 110px;
    right: 58px;
    width: 390px;
    gap: 30px;
}

.boss-difficulty-box,
.boss-description-box {
    padding: 28px;
    border-radius: 25px;
}

.boss-difficulty-box h3,
.boss-description-box h3 {
    font-size: 23px;
    letter-spacing: 2px;
}

.difficulty-btn {
    height: 56px;
    font-size: 20px;
    border-radius: 28px;
}

.boss-description-box p {
    font-size: 17px;
    line-height: 1.75;
}

/* Panel derecho */
.boss-difficulty-panel {
    max-width: 800px;
    min-height: 900px;
    max-height: 900px;
    border-radius: 34px;
}

.boss-split-wrapper.active .boss-difficulty-panel {
    transform: translate(0, 100px);
}

.boss-difficulty-content {
    max-height: 900px;
    padding: 42px;
    padding-right: 48px;
}

/* Header de dificultad */
.difficulty-header {
    padding-bottom: 24px;
    margin-bottom: 32px;
}

.difficulty-header h2,
.boss-difficulty-panel h2 {
    font-size: clamp(38px, 2.6vw, 48px);
    letter-spacing: 2px;
}

.difficulty-boss-icon {
    width: 92px;
    height: 92px;
}

/* Stats */
.difficulty-stats {
    gap: 34px;
    font-size: 20px;
    margin-bottom: 34px;
    flex-wrap: wrap;
}

.difficulty-stats p {
    margin: 0;
}

/* Fases */
.phase-list {
    gap: 20px;
}

.phase-row {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .4px;
}

.phase-bar {
    height: 22px;
    margin-top: 10px;
}

.phase-segment-row {
    margin-bottom: 18px;
}

.phase-segment-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.segmented-bar {
    height: 34px;
    border-radius: 20px;
}

.segment-part {
    font-size: 14px;
}

/* Información extra: vida total, daño mínimo y cristal */
.boss-extra-info {
    margin-top: 30px;
    margin-bottom: 34px;
    gap: 16px;
}

.boss-extra-line {
    font-size: 20px;
    line-height: 1.45;
    gap: 12px;
}

.boss-drop-dot {
    width: 15px;
    height: 15px;
}

.boss-extra-spacer {
    height: 16px;
}

.boss-crystal-icon {
    width: 46px;
    height: 46px;
}

/* Rewards */
.important-rewards {
    margin-top: 34px;
}

.important-rewards h3 {
    font-size: 25px;
    letter-spacing: 2px;
    margin-bottom: 22px;
}

.reward-icons {
    gap: 16px;
}

.reward-icons img {
    width: 62px;
    height: 62px;
    padding: 7px;
    border-radius: 13px;
}

/* Botón cerrar */
.close-difficulty-btn {
    top: 22px;
    right: 22px;
    width: 48px;
    height: 48px;
    font-size: 24px;
}

/* Ajustes para pantallas medianas */
@media (max-width: 1700px) {
    .boss-split-wrapper.active {
        grid-template-columns: minmax(840px, 920px) minmax(660px, 740px);
        gap: 18px;
    }

    .boss-detail-page,
    .boss-split-wrapper .boss-detail-page,
    .boss-difficulty-panel {
        min-height: 850px;
        max-height: 850px;
    }

    .boss-difficulty-content {
        max-height: 850px;
    }

    .boss-info-panel {
        width: 370px;
    }

    .difficulty-header h2,
    .boss-difficulty-panel h2 {
        font-size: clamp(34px, 2.4vw, 42px);
    }
}

/* En pantallas chicas se mantiene en una columna */
@media (max-width: 1250px) {
    .boss-split-wrapper,
    .boss-split-wrapper.active {
        width: min(980px, 96vw);
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .boss-split-wrapper.active .boss-difficulty-panel {
        transform: none;
    }

    .boss-detail-page,
    .boss-split-wrapper .boss-detail-page,
    .boss-difficulty-panel {
        min-height: auto;
        max-height: none;
    }

    .boss-difficulty-content {
        max-height: none;
    }

    .boss-info-panel {
        position: relative;
        top: auto;
        right: auto;
        width: min(430px, 100%);
        margin-left: auto;
    }

    .boss-detail-name {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 80px;
        text-align: left;
    }
}

@media (max-width: 720px) {
    .bosses-container {
        width: 96%;
        padding: 26px;
    }

    .bosses-content {
        padding: 24px;
    }

    .boss-detail-page {
        padding: 60px 26px 34px;
    }

    .boss-detail-name {
        font-size: 42px;
    }

    .difficulty-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .difficulty-stats {
        flex-direction: column;
        gap: 12px;
        font-size: 18px;
    }

    .boss-extra-line {
        font-size: 17px;
    }

    .reward-icons img {
        width: 52px;
        height: 52px;
    }
}


/* ===================================================== */
/* AJUSTE FINAL SOLICITADO - NAV, FOOTER Y BOSSES         */
/* Menú más pequeño, dropdown estable y bosses más arriba */
/* ===================================================== */

/* 1) Menú principal un poco más chico y menos pesado */
.dropbtn {
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif) !important;
    font-size: 22px !important;
    font-weight: 650 !important;
    letter-spacing: 0.15px !important;
    line-height: 1.05 !important;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.navbar-menu {
    gap: clamp(54px, 6vw, 92px) !important;
}

.dropdown-content a {
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: 0.15px !important;
}

body.navbar-compact .dropbtn {
    font-size: 18px !important;
    font-weight: 650 !important;
    letter-spacing: 0.1px !important;
}

body.navbar-compact .navbar-menu {
    gap: clamp(48px, 5.2vw, 84px) !important;
}

@media (max-width: 1200px) {
    .dropbtn {
        font-size: 19px !important;
    }

    .navbar-menu,
    body.navbar-compact .navbar-menu {
        gap: 42px !important;
    }
}

/* 2) Footer: evita que el dropdown de YouTube se cierre al bajar el mouse */
.youtube-dropdown {
    position: relative;
    padding-bottom: 18px;
}

.youtube-dropdown::after {
    content: "";
    position: absolute;
    left: -24px;
    right: -24px;
    top: 24px;
    height: 30px;
    background: transparent;
    pointer-events: auto;
}

.youtube-content {
    top: 30px !important;
    z-index: 50000 !important;
    pointer-events: auto;
}

.youtube-dropdown:hover .youtube-content,
.youtube-dropdown:focus-within .youtube-content,
.youtube-content:hover {
    display: block !important;
}

.youtube-content a {
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif) !important;
    font-size: 16px;
    font-weight: 650;
}

/* 3) Bosses: ventanas un poco más chicas y más pegadas al banner */
.bosses-container {
    width: min(1660px, 94%) !important;
    max-width: 1660px !important;
}

.bosses-content {
    padding: 38px !important;
}

.boss-split-wrapper {
    width: min(1660px, 96vw) !important;
    max-width: 1660px !important;
    margin: 18px auto 55px !important;
    align-items: start !important;
}

.boss-split-wrapper.active {
    grid-template-columns: minmax(780px, 890px) minmax(620px, 700px) !important;
    gap: 20px !important;
}

.boss-split-wrapper .boss-detail-page,
.boss-split-wrapper.active .boss-detail-page,
.boss-detail-page {
    margin: 0 !important;
    min-height: 780px !important;
    max-height: 780px !important;
    padding: 72px 68px !important;
}

.boss-difficulty-panel {
    max-width: 700px !important;
    min-height: 780px !important;
    max-height: 780px !important;
    border-radius: 32px !important;
}

.boss-split-wrapper.active .boss-difficulty-panel {
    transform: translate(0, 0) !important;
}

.boss-difficulty-content {
    max-height: 780px !important;
    padding: 34px 38px !important;
    padding-right: 42px !important;
}

.boss-detail-name {
    top: 72px !important;
    left: 68px !important;
    font-size: clamp(54px, 3.6vw, 66px) !important;
    letter-spacing: 2.5px !important;
}

.back-boss-btn {
    top: 18px !important;
    left: 18px !important;
    padding: 10px 17px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
}

.boss-info-panel {
    top: 98px !important;
    right: 52px !important;
    width: 350px !important;
    gap: 22px !important;
}

.boss-difficulty-box,
.boss-description-box {
    padding: 22px !important;
    border-radius: 22px !important;
}

.boss-difficulty-box h3,
.boss-description-box h3 {
    font-size: 20px !important;
    letter-spacing: 1.5px !important;
}

.difficulty-btn {
    height: 48px !important;
    font-size: 17px !important;
    border-radius: 25px !important;
}

.boss-description-box p {
    font-size: 15px !important;
    line-height: 1.65 !important;
}

.difficulty-header {
    padding-bottom: 20px !important;
    margin-bottom: 28px !important;
}

.difficulty-header h2,
.boss-difficulty-panel h2 {
    font-size: clamp(32px, 2.2vw, 42px) !important;
    letter-spacing: 1.5px !important;
}

.difficulty-boss-icon {
    width: 78px !important;
    height: 78px !important;
}

.difficulty-stats {
    gap: 28px !important;
    font-size: 17px !important;
    margin-bottom: 28px !important;
}

.phase-list {
    gap: 16px !important;
}

.phase-row {
    font-size: 16px !important;
    font-weight: 800 !important;
}

.phase-bar {
    height: 18px !important;
    margin-top: 8px !important;
}

.phase-segment-title {
    font-size: 16px !important;
}

.segmented-bar {
    height: 28px !important;
}

.segment-part {
    font-size: 13px !important;
}

.boss-extra-info {
    margin-top: 24px !important;
    margin-bottom: 28px !important;
    gap: 13px !important;
}

.boss-extra-line {
    font-size: 17px !important;
    line-height: 1.4 !important;
    gap: 10px !important;
}

.boss-drop-dot {
    width: 13px !important;
    height: 13px !important;
}

.boss-extra-spacer {
    height: 12px !important;
}

.boss-crystal-icon {
    width: 38px !important;
    height: 38px !important;
}

.important-rewards {
    margin-top: 28px !important;
}

.important-rewards h3 {
    font-size: 21px !important;
    letter-spacing: 1.6px !important;
    margin-bottom: 18px !important;
}

.reward-icons {
    gap: 14px !important;
}

.reward-icons img {
    width: 54px !important;
    height: 54px !important;
    padding: 6px !important;
    border-radius: 12px !important;
}

.close-difficulty-btn {
    top: 18px !important;
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 21px !important;
}

@media (max-width: 1700px) {
    .boss-split-wrapper.active {
        grid-template-columns: minmax(760px, 860px) minmax(600px, 680px) !important;
        gap: 18px !important;
    }

    .boss-split-wrapper .boss-detail-page,
    .boss-split-wrapper.active .boss-detail-page,
    .boss-detail-page,
    .boss-difficulty-panel {
        min-height: 750px !important;
        max-height: 750px !important;
    }

    .boss-difficulty-content {
        max-height: 750px !important;
    }

    .boss-info-panel {
        width: 340px !important;
    }
}

@media (max-width: 1250px) {
    .boss-split-wrapper,
    .boss-split-wrapper.active {
        width: min(980px, 96vw) !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        margin-top: 20px !important;
    }

    .boss-split-wrapper .boss-detail-page,
    .boss-split-wrapper.active .boss-detail-page,
    .boss-detail-page,
    .boss-difficulty-panel {
        min-height: auto !important;
        max-height: none !important;
    }

    .boss-difficulty-content {
        max-height: none !important;
    }

    .boss-info-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(420px, 100%) !important;
        margin-left: auto !important;
    }

    .boss-detail-name {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-top: 70px !important;
    }
}

@media (max-width: 720px) {
    .boss-detail-page {
        padding: 58px 24px 34px !important;
    }

    .boss-detail-name {
        font-size: 40px !important;
    }

    .difficulty-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .difficulty-stats {
        flex-direction: column !important;
        gap: 10px !important;
        font-size: 16px !important;
    }

    .boss-extra-line {
        font-size: 15px !important;
    }

    .reward-icons img {
        width: 48px !important;
        height: 48px !important;
    }
}


/* ========================================================= */
/* AJUSTES FINALES - NAV, FOOTER Y BOSSES                    */
/* Fecha: 2026-07-04                                        */
/* ========================================================= */

/* 1) MENÚ PRINCIPAL: un poco más grande, pero sin verse pesado */
.dropbtn,
.navbar .dropbtn,
.navbar-menu .dropbtn,
body.navbar-compact .dropbtn {
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif) !important;
    font-size: clamp(20px, 1.22vw, 23px) !important;
    font-weight: 720 !important;
    letter-spacing: 0.18px !important;
    line-height: 1.08 !important;
    text-transform: uppercase !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.navbar-menu,
body.navbar-compact .navbar-menu {
    gap: clamp(58px, 6vw, 100px) !important;
}

.dropdown-content a {
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: .2px !important;
}

@media (max-width: 1400px) {
    .dropbtn,
    .navbar .dropbtn,
    .navbar-menu .dropbtn,
    body.navbar-compact .dropbtn {
        font-size: 20px !important;
    }

    .navbar-menu,
    body.navbar-compact .navbar-menu {
        gap: 50px !important;
    }
}

@media (max-width: 1050px) {
    .dropbtn,
    .navbar .dropbtn,
    .navbar-menu .dropbtn,
    body.navbar-compact .dropbtn {
        font-size: 18px !important;
    }
}

/* 2) FOOTER: iconos centrados y dropdown de YouTube estable */
.footer-socials {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 34px !important;
    line-height: 1 !important;
}

.footer-socials a,
.footer-socials button,
.youtube-button,
.youtube-dropdown {
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.footer-socials i,
.youtube-button i,
.footer-socials .fa-discord,
.footer-socials .fa-twitch,
.footer-socials .fa-tiktok,
.footer-socials .fa-youtube {
    display: block !important;
    line-height: 1 !important;
    font-size: 29px !important;
    transform: none !important;
    margin: 0 !important;
}

.youtube-dropdown {
    position: relative !important;
    padding-bottom: 0 !important;
}

/* Puente invisible para que no se cierre al mover el mouse hacia el dropdown */
.youtube-dropdown::after {
    content: "";
    position: absolute;
    left: -30px;
    right: -30px;
    top: 34px;
    height: 26px;
    background: transparent;
    pointer-events: auto;
}

.youtube-content {
    top: 42px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50000 !important;
    pointer-events: auto !important;
}

.youtube-dropdown:hover .youtube-content,
.youtube-dropdown:focus-within .youtube-content,
.youtube-content:hover {
    display: block !important;
}

.youtube-content a {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 12px 20px !important;
    text-align: center !important;
    line-height: 1.25 !important;
}

/* 3) BOSSES: posición intermedia y tamaño más equilibrado */
.bosses-container {
    width: min(1580px, 94%) !important;
    max-width: 1580px !important;
}

.bosses-content {
    padding: 34px !important;
}

.boss-split-wrapper {
    width: min(1560px, 95vw) !important;
    max-width: 1560px !important;
    margin: 58px auto 82px !important;
    align-items: start !important;
}

.boss-split-wrapper.active {
    grid-template-columns: minmax(720px, 815px) minmax(570px, 640px) !important;
    gap: 22px !important;
}

.boss-split-wrapper .boss-detail-page,
.boss-split-wrapper.active .boss-detail-page,
.boss-detail-page {
    margin: 0 !important;
    min-height: 715px !important;
    max-height: 715px !important;
    padding: 64px 58px !important;
    border-radius: 26px !important;
}

.boss-difficulty-panel {
    max-width: 640px !important;
    min-height: 715px !important;
    max-height: 715px !important;
    border-radius: 28px !important;
}

.boss-split-wrapper.active .boss-difficulty-panel {
    transform: translate(0, 0) !important;
}

.boss-difficulty-content {
    max-height: 715px !important;
    padding: 30px 34px !important;
    padding-right: 38px !important;
}

.boss-detail-name {
    top: 72px !important;
    left: 58px !important;
    font-size: clamp(48px, 3vw, 60px) !important;
    letter-spacing: 2.2px !important;
}

.back-boss-btn {
    top: 16px !important;
    left: 16px !important;
    padding: 9px 15px !important;
    font-size: 12px !important;
    border-radius: 13px !important;
}

.boss-info-panel {
    top: 86px !important;
    right: 42px !important;
    width: 320px !important;
    gap: 20px !important;
}

.boss-difficulty-box,
.boss-description-box {
    padding: 20px !important;
    border-radius: 20px !important;
}

.boss-difficulty-box h3,
.boss-description-box h3 {
    font-size: 19px !important;
    letter-spacing: 1.3px !important;
}

.difficulty-btn {
    height: 45px !important;
    font-size: 16px !important;
    border-radius: 24px !important;
}

.boss-description-box p {
    font-size: 14px !important;
    line-height: 1.62 !important;
}

.difficulty-header {
    padding-bottom: 18px !important;
    margin-bottom: 25px !important;
}

.difficulty-header h2,
.boss-difficulty-panel h2 {
    font-size: clamp(30px, 2vw, 39px) !important;
    letter-spacing: 1.35px !important;
}

.difficulty-boss-icon {
    width: 70px !important;
    height: 70px !important;
}

.difficulty-stats {
    gap: 24px !important;
    font-size: 16px !important;
    margin-bottom: 25px !important;
}

.phase-list {
    gap: 14px !important;
}

.phase-row {
    font-size: 15px !important;
    font-weight: 800 !important;
}

.phase-bar {
    height: 16px !important;
    margin-top: 7px !important;
}

.phase-segment-title {
    font-size: 15px !important;
}

.segmented-bar {
    height: 26px !important;
}

.segment-part {
    font-size: 12px !important;
}

.boss-extra-info {
    margin-top: 21px !important;
    margin-bottom: 24px !important;
    gap: 12px !important;
}

.boss-extra-line {
    font-size: 16px !important;
    line-height: 1.36 !important;
    gap: 9px !important;
}

.boss-drop-dot {
    width: 12px !important;
    height: 12px !important;
}

.boss-extra-spacer {
    height: 10px !important;
}

.boss-crystal-icon {
    width: 34px !important;
    height: 34px !important;
}

.important-rewards {
    margin-top: 24px !important;
}

.important-rewards h3 {
    font-size: 19px !important;
    letter-spacing: 1.4px !important;
    margin-bottom: 16px !important;
}

.reward-icons {
    gap: 12px !important;
}

.reward-icons img {
    width: 48px !important;
    height: 48px !important;
    padding: 5px !important;
    border-radius: 11px !important;
}

.close-difficulty-btn {
    top: 16px !important;
    right: 16px !important;
    width: 39px !important;
    height: 39px !important;
    font-size: 20px !important;
}

@media (max-width: 1700px) {
    .boss-split-wrapper {
        margin-top: 54px !important;
    }

    .boss-split-wrapper.active {
        grid-template-columns: minmax(700px, 795px) minmax(545px, 620px) !important;
        gap: 20px !important;
    }

    .boss-split-wrapper .boss-detail-page,
    .boss-split-wrapper.active .boss-detail-page,
    .boss-detail-page,
    .boss-difficulty-panel {
        min-height: 690px !important;
        max-height: 690px !important;
    }

    .boss-difficulty-content {
        max-height: 690px !important;
    }

    .boss-info-panel {
        width: 310px !important;
    }
}

@media (max-width: 1250px) {
    .boss-split-wrapper,
    .boss-split-wrapper.active {
        width: min(960px, 96vw) !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        margin-top: 46px !important;
    }

    .boss-split-wrapper .boss-detail-page,
    .boss-split-wrapper.active .boss-detail-page,
    .boss-detail-page,
    .boss-difficulty-panel {
        min-height: auto !important;
        max-height: none !important;
    }

    .boss-difficulty-content {
        max-height: none !important;
    }

    .boss-info-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(400px, 100%) !important;
        margin-left: auto !important;
    }

    .boss-detail-name {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-top: 66px !important;
    }
}

@media (max-width: 720px) {
    .boss-detail-page {
        padding: 56px 22px 32px !important;
    }

    .boss-detail-name {
        font-size: 38px !important;
    }

    .difficulty-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .difficulty-stats {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ===================================================== */
/* AJUSTE FINAL UI - BOSSES, LISTA DE BOSSES Y CLASES    */
/* Mantiene navbar/footer actuales. Solo ajusta tamaño,   */
/* proporción y posición de bosses/clases.                */
/* ===================================================== */

/* ---------- LISTA GENERAL DE BOSSES ---------- */
.bosses-container {
    width: min(1460px, 92%) !important;
    max-width: 1460px !important;
    margin: 42px auto 70px !important;
    padding: 52px 58px !important;
}

.bosses-title {
    font-size: 46px !important;
    letter-spacing: 2px !important;
    margin-bottom: 34px !important;
}

.boss-tabs {
    gap: 12px !important;
    margin-bottom: 32px !important;
}

.boss-tab {
    width: min(340px, 28vw) !important;
    height: 46px !important;
    font-size: 23px !important;
    letter-spacing: .2px !important;
}

.bosses-content {
    min-height: 590px !important;
    padding: 36px 40px !important;
    border-radius: 24px !important;
}

.boss-category.active-boss-category {
    grid-template-columns: repeat(4, 235px) !important;
    gap: 28px 32px !important;
}

.boss-grid {
    gap: 28px 32px !important;
}

.boss-card {
    width: 235px !important;
    height: 305px !important;
    border-radius: 18px !important;
}

.boss-name {
    padding: 12px 0 !important;
    font-size: 18px !important;
    letter-spacing: 1.2px !important;
}

/* ---------- VISTA INTERNA DE BOSSES ---------- */
.boss-split-wrapper {
    width: min(1680px, 96vw) !important;
    max-width: 1680px !important;
    margin: 58px auto 82px !important;
    align-items: start !important;
}

.boss-split-wrapper.active {
    grid-template-columns: minmax(775px, 875px) minmax(610px, 690px) !important;
    gap: 24px !important;
    justify-content: center !important;
}

.boss-split-wrapper .boss-detail-page,
.boss-split-wrapper.active .boss-detail-page,
.boss-detail-page {
    margin: 0 !important;
    min-height: 750px !important;
    max-height: 750px !important;
    padding: 68px 62px !important;
    border-radius: 28px !important;
}

.boss-difficulty-panel {
    max-width: 690px !important;
    min-height: 750px !important;
    max-height: 750px !important;
    border-radius: 30px !important;
}

.boss-split-wrapper.active .boss-difficulty-panel {
    transform: translate(0, 0) !important;
}

.boss-difficulty-content {
    max-height: 750px !important;
    padding: 34px 38px !important;
    padding-right: 42px !important;
}

.boss-detail-name {
    top: 74px !important;
    left: 62px !important;
    font-size: clamp(52px, 3.15vw, 66px) !important;
    letter-spacing: 1.6px !important;
}

.back-boss-btn {
    top: 17px !important;
    left: 17px !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
    border-radius: 13px !important;
}

.boss-info-panel {
    top: 90px !important;
    right: 44px !important;
    width: 338px !important;
    gap: 22px !important;
}

.boss-difficulty-box,
.boss-description-box {
    padding: 22px !important;
    border-radius: 21px !important;
}

.boss-difficulty-box h3,
.boss-description-box h3 {
    font-size: 20px !important;
    letter-spacing: 1.2px !important;
}

.difficulty-btn {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 24px !important;
}

.boss-description-box p {
    font-size: 14.5px !important;
    line-height: 1.62 !important;
}

.difficulty-header {
    padding-bottom: 19px !important;
    margin-bottom: 27px !important;
}

.difficulty-header h2,
.boss-difficulty-panel h2 {
    font-size: clamp(32px, 2.1vw, 42px) !important;
    letter-spacing: 1.15px !important;
}

.difficulty-boss-icon {
    width: 74px !important;
    height: 74px !important;
}

.difficulty-stats {
    gap: 26px !important;
    font-size: 16.5px !important;
    margin-bottom: 28px !important;
}

.phase-list {
    gap: 15px !important;
}

.phase-row {
    font-size: 15.5px !important;
    font-weight: 800 !important;
}

.phase-bar {
    height: 17px !important;
    margin-top: 8px !important;
}

.phase-segment-title {
    font-size: 15.5px !important;
}

.segmented-bar {
    height: 28px !important;
}

.segment-part {
    font-size: 12.5px !important;
}

.boss-extra-info {
    margin-top: 23px !important;
    margin-bottom: 25px !important;
    gap: 12px !important;
}

.boss-extra-line {
    font-size: 16.5px !important;
    line-height: 1.38 !important;
    gap: 9px !important;
}

.boss-drop-dot {
    width: 12px !important;
    height: 12px !important;
}

.boss-extra-spacer {
    height: 10px !important;
}

.boss-crystal-icon {
    width: 36px !important;
    height: 36px !important;
}

.important-rewards {
    margin-top: 25px !important;
}

.important-rewards h3 {
    font-size: 20px !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 17px !important;
}

.reward-icons {
    gap: 13px !important;
}

.reward-icons img {
    width: 50px !important;
    height: 50px !important;
    padding: 5px !important;
    border-radius: 11px !important;
}

.close-difficulty-btn {
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 21px !important;
}

/* ---------- VISTA INTERNA DE CLASES ---------- */
.job-detail-container {
    width: min(1320px, 92vw) !important;
    max-width: 1320px !important;
    min-height: 690px !important;
    margin: 58px auto 82px !important;
    padding: 58px 64px !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
}

.job-detail-title {
    font-size: clamp(44px, 3vw, 58px) !important;
    letter-spacing: 9px !important;
    margin-bottom: 34px !important;
}

.job-detail-content {
    gap: 64px !important;
    align-items: center !important;
}

.job-detail-left {
    width: 42% !important;
}

.job-detail-right {
    width: 58% !important;
}

.job-detail-image {
    max-width: 390px !important;
    width: 92% !important;
    height: auto !important;
}

.job-video {
    max-width: 610px !important;
}

.job-video video,
.job-video iframe {
    width: 100% !important;
}

.damage-box {
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.job-buttons {
    gap: 24px !important;
    justify-content: center !important;
}

.job-buttons button,
.job-buttons a {
    min-width: 150px !important;
    height: 48px !important;
    font-size: 15px !important;
}

.back-class-btn {
    top: 20px !important;
    left: 20px !important;
}

@media (max-width: 1700px) {
    .boss-split-wrapper.active {
        grid-template-columns: minmax(735px, 825px) minmax(585px, 660px) !important;
        gap: 22px !important;
    }

    .boss-split-wrapper .boss-detail-page,
    .boss-split-wrapper.active .boss-detail-page,
    .boss-detail-page,
    .boss-difficulty-panel {
        min-height: 720px !important;
        max-height: 720px !important;
    }

    .boss-difficulty-content {
        max-height: 720px !important;
    }

    .boss-info-panel {
        width: 322px !important;
    }

    .boss-category.active-boss-category {
        grid-template-columns: repeat(4, 220px) !important;
        gap: 26px 30px !important;
    }

    .boss-card {
        width: 220px !important;
        height: 288px !important;
    }

    .boss-name {
        font-size: 17px !important;
    }

    .job-detail-container {
        width: min(1250px, 92vw) !important;
        min-height: 650px !important;
        padding: 52px 58px !important;
    }

    .job-detail-title {
        letter-spacing: 8px !important;
    }
}

@media (max-width: 1250px) {
    .boss-category.active-boss-category {
        grid-template-columns: repeat(2, 230px) !important;
    }

    .boss-split-wrapper,
    .boss-split-wrapper.active {
        width: min(960px, 96vw) !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        margin-top: 46px !important;
    }

    .boss-split-wrapper .boss-detail-page,
    .boss-split-wrapper.active .boss-detail-page,
    .boss-detail-page,
    .boss-difficulty-panel {
        min-height: auto !important;
        max-height: none !important;
    }

    .boss-difficulty-content {
        max-height: none !important;
    }

    .boss-info-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(400px, 100%) !important;
        margin-left: auto !important;
    }

    .boss-detail-name {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-top: 66px !important;
    }

    .job-detail-container {
        width: min(950px, 96vw) !important;
        margin-top: 46px !important;
    }

    .job-detail-content {
        flex-direction: column !important;
    }

    .job-detail-left,
    .job-detail-right {
        width: 100% !important;
    }
}

@media (max-width: 720px) {
    .boss-category.active-boss-category {
        grid-template-columns: 1fr !important;
    }

    .boss-card {
        width: min(260px, 82vw) !important;
        height: 330px !important;
    }

    .boss-detail-page {
        padding: 56px 22px 32px !important;
    }

    .boss-detail-name {
        font-size: 38px !important;
    }

    .difficulty-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .difficulty-stats {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .job-detail-title {
        letter-spacing: 5px !important;
        font-size: 38px !important;
    }
}



/* ==========================================================
   LORIEN RESPONSIVE LAYER - LANDING + SECCIONES PRINCIPALES
   Mantiene desktop intacto y ajusta laptops/tablets/móviles.
   ========================================================== */

:root {
    --lorien-header-total: 175px;
    --lorien-mobile-header-total: 118px;
    --lorien-page-x: clamp(14px, 3vw, 48px);
}

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
canvas {
    max-width: 100%;
}

.page-view,
#home-content,
#content-wrapper {
    width: 100%;
}

/* ---------- NAVBAR DESKTOP PROTEGIDO ---------- */
.mobile-nav-toggle {
    display: none;
}

/* ---------- MONITORES / LAPTOPS GRANDES ---------- */
@media (max-width: 1600px) {
    .navbar-menu {
        gap: clamp(42px, 5vw, 82px) !important;
    }

    .dropbtn {
        font-size: clamp(20px, 1.4vw, 24px) !important;
        letter-spacing: .15px !important;
    }

    .clan-slider-section {
        width: min(92%, 1320px) !important;
        height: clamp(520px, 52vw, 780px) !important;
    }

    .info-section {
        width: min(82%, 1180px) !important;
    }

    .founders-panel,
    .patch-container,
    .classes-container,
    .bosses-container,
    .character-center-v2 {
        width: min(92%, 1450px) !important;
    }
}

/* ---------- LAPTOPS 1366 / 1440 ---------- */
@media (max-width: 1366px) {
    body {
        padding-top: 155px !important;
    }

    .top-banner {
        height: 45px !important;
        padding: 0 26px !important;
    }

    .navbar {
        top: 45px !important;
        min-height: 110px !important;
    }

    body.navbar-compact .navbar {
        min-height: 125px !important;
        padding: 26px 0 !important;
    }

    body.navbar-compact .navbar-menu {
        gap: clamp(34px, 4.2vw, 66px) !important;
    }

    body.navbar-compact .navbar-logo img {
        width: 45px !important;
        height: 45px !important;
        transform: translateX(-44px) !important;
    }

    body.navbar-compact .navbar-logo h1 {
        font-size: 27px !important;
        transform: translateX(-44px) !important;
        letter-spacing: 3px !important;
    }

    .dropbtn {
        font-size: 20px !important;
    }

    .patch-grid {
        width: 94% !important;
        grid-template-columns: repeat(3, minmax(250px, 1fr)) !important;
        gap: 24px !important;
    }

    .patch-card {
        width: 100% !important;
        height: auto !important;
        min-height: 410px !important;
    }

    .boss-category.active-boss-category {
        grid-template-columns: repeat(4, minmax(190px, 220px)) !important;
        gap: 24px !important;
    }

    .boss-card {
        width: 100% !important;
        height: 285px !important;
    }

    .job-detail-container {
        width: min(1180px, 92vw) !important;
        margin-top: 48px !important;
    }
}

/* ---------- TABLETS HORIZONTALES / LAPTOPS CHICAS ---------- */
@media (max-width: 1180px) {
    .navbar-menu {
        gap: 32px !important;
    }

    .dropbtn {
        font-size: 18px !important;
    }

    .clan-slider-section {
        width: 92% !important;
        height: clamp(420px, 54vw, 620px) !important;
        margin: 70px auto !important;
    }

    .info-section {
        width: 92% !important;
        margin: 70px auto !important;
    }

    .info-box,
    .info-box.reverse {
        gap: 30px !important;
        padding: 34px !important;
    }

    .info-section-image {
        width: clamp(240px, 30vw, 320px) !important;
        height: clamp(240px, 30vw, 320px) !important;
        flex: 0 0 auto;
    }

    .leaders-row,
    .leaders-row.bottom-row {
        gap: 34px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin: 30px auto !important;
    }

    .leader-card {
        width: min(280px, 42vw) !important;
    }

    .patch-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    }

    .patch-tools {
        width: 92% !important;
    }

    .class-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    }

    .boss-category.active-boss-category {
        grid-template-columns: repeat(3, minmax(190px, 220px)) !important;
    }

    .boss-split-wrapper,
    .boss-split-wrapper.active {
        width: min(980px, 94vw) !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-top: 42px !important;
    }

    .boss-detail-page,
    .boss-split-wrapper .boss-detail-page,
    .boss-difficulty-panel {
        min-height: auto !important;
        max-height: none !important;
    }

    .boss-info-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(430px, 100%) !important;
        margin: 24px 0 0 auto !important;
    }

    .boss-detail-name {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 72px 0 24px !important;
    }

    .job-detail-container {
        width: min(960px, 94vw) !important;
    }

    .job-detail-content {
        flex-direction: column !important;
        gap: 34px !important;
    }

    .job-detail-left,
    .job-detail-right {
        width: 100% !important;
    }

    .job-detail-image {
        max-width: 330px !important;
    }

    .character-profile-result,
    .champions-showcase {
        grid-template-columns: 1fr !important;
    }

    .champions-mini-grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr)) !important;
    }

    .perfil-modal .legion-grid,
    .legion-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    }
}

/* ---------- MENÚ MÓVIL / TABLET VERTICAL ---------- */
@media (max-width: 980px) {
    body {
        padding-top: var(--lorien-mobile-header-total) !important;
        background-attachment: scroll !important;
    }

    .top-banner {
        height: 42px !important;
        padding: 0 14px !important;
        gap: 8px !important;
    }

    .feedback-link a {
        max-width: 58vw !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        font-size: 12px !important;
    }

    .auth-buttons {
        min-width: 0 !important;
        gap: 10px !important;
    }

    .login-btn,
    .register-btn {
        font-size: 12px !important;
    }

    .login-btn img,
    .register-btn img {
        width: 16px !important;
        height: 16px !important;
    }

    .navbar {
        top: 42px !important;
        height: 76px !important;
        min-height: 76px !important;
        padding: 0 16px !important;
        flex-direction: row !important;
        justify-content: center !important;
    }

    body.navbar-compact .navbar {
        min-height: 76px !important;
        height: 76px !important;
        padding: 0 16px !important;
        flex-direction: row !important;
        gap: 0 !important;
    }

    .navbar-logo {
        position: static !important;
        transform: none !important;
        gap: 10px !important;
    }

    .navbar-logo img,
    body.navbar-compact .navbar-logo img {
        width: 42px !important;
        height: 42px !important;
        transform: none !important;
    }

    .navbar-logo h1,
    body.navbar-compact .navbar-logo h1 {
        font-size: 25px !important;
        letter-spacing: 3px !important;
        transform: none !important;
    }

    .mobile-nav-toggle {
        display: flex !important;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border: 2px solid rgba(126,231,255,.60);
        border-radius: 14px;
        background: rgba(0,0,0,.20);
        color: white;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        z-index: 30000;
        box-shadow: 0 0 14px rgba(0,191,255,.18);
    }

    .navbar-menu {
        position: fixed !important;
        top: 118px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 132px) !important;
        overflow-y: auto !important;
        padding: 14px !important;
        border-radius: 22px !important;
        background: rgba(7, 45, 82, .96) !important;
        border: 2px solid rgba(126,231,255,.40) !important;
        box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 0 24px rgba(0,191,255,.18) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        transform: translateY(-12px) scale(.98) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: .22s ease !important;
        z-index: 25000 !important;
    }

    body.mobile-menu-open .navbar-menu {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .dropdown {
        width: 100% !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.06) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        overflow: hidden !important;
    }

    .dropbtn {
        width: 100% !important;
        padding: 13px 16px !important;
        text-align: left !important;
        font-size: 16px !important;
        letter-spacing: .2px !important;
        font-weight: 800 !important;
    }

    .dropdown-content {
        position: static !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        display: none !important;
        background: rgba(0,0,0,.16) !important;
        box-shadow: none !important;
        border-radius: 0 0 16px 16px !important;
        padding: 4px 0 8px !important;
    }

    body.mobile-menu-open .dropdown-content {
        display: block !important;
    }

    .dropdown-content a {
        padding: 11px 18px 11px 26px !important;
        font-size: 14px !important;
        color: rgba(255,255,255,.94) !important;
    }

    .dropdown-content a:hover {
        background: rgba(0,191,255,.22) !important;
        color: white !important;
    }

    body.mobile-menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 24000;
        background: rgba(0,0,0,.22);
        backdrop-filter: blur(2px);
    }

    body.mobile-menu-open .navbar {
        z-index: 30000 !important;
    }

    body.mobile-menu-open .navbar-menu,
    body.mobile-menu-open .mobile-nav-toggle {
        z-index: 31000 !important;
    }

    .page-view {
        padding-top: 34px !important;
    }

    .clan-slider-section {
        width: 94% !important;
        height: clamp(300px, 55vw, 500px) !important;
        margin: 42px auto 64px !important;
        border-radius: 24px !important;
    }

    .clan-slider,
    .clan-slider img {
        border-radius: 20px !important;
    }

    .clan-arrow {
        width: 44px !important;
        height: 44px !important;
        font-size: 28px !important;
    }

    .info-section {
        width: 94% !important;
        margin: 58px auto !important;
        scroll-margin-top: 140px !important;
    }

    .info-box,
    .info-box.reverse {
        flex-direction: column !important;
        text-align: center !important;
        padding: 28px !important;
        gap: 24px !important;
    }

    .info-section-text,
    .info-box.reverse .info-section-text {
        max-width: 100% !important;
        text-align: left !important;
    }

    .info-section-text h2 {
        text-align: center !important;
        font-size: clamp(28px, 6vw, 38px) !important;
        letter-spacing: 2px !important;
    }

    .info-section-text p,
    .offer-list {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .info-section-image {
        width: min(320px, 82vw) !important;
        height: min(320px, 82vw) !important;
    }

    .founders-panel {
        width: 94% !important;
        padding: 34px 22px !important;
        margin: 58px auto !important;
    }

    .founders-title {
        font-size: clamp(30px, 7vw, 42px) !important;
        letter-spacing: 2px !important;
        margin-bottom: 34px !important;
    }

    .leaders-row,
    .leaders-row.bottom-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
        gap: 22px !important;
    }

    .leader-card {
        width: 100% !important;
        min-height: 320px !important;
        padding: 20px !important;
    }

    .leader-image {
        height: 230px !important;
    }

    .modal-content {
        width: min(94vw, 720px) !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        padding: 24px !important;
    }

    .modal-body {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .modal-image {
        width: min(280px, 80vw) !important;
    }

    .modal-info h2 {
        text-align: center !important;
        font-size: 34px !important;
    }

    .patch-container,
    .classes-container,
    .bosses-container,
    .character-center-v2,
    .support-container,
    .contacts-container {
        width: 94% !important;
        padding: 28px 18px !important;
        border-radius: 28px !important;
        margin-top: 34px !important;
    }

    .patch-title,
    .classes-title,
    .bosses-title,
    .character-center-header h2,
    .support-title,
    .contacts-title {
        font-size: clamp(30px, 7vw, 46px) !important;
        letter-spacing: 2px !important;
    }

    .patch-tools {
        width: 100% !important;
        flex-direction: column !important;
    }

    .patch-search,
    .patch-filter {
        width: 100% !important;
    }

    .patch-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .patch-card {
        width: 100% !important;
        min-height: auto !important;
    }

    .boss-tabs,
    .class-tabs {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .boss-tab,
    .class-tab {
        flex: 1 1 145px !important;
        width: auto !important;
        min-width: 135px !important;
        height: 50px !important;
        font-size: 16px !important;
    }

    .bosses-content,
    .classes-content {
        padding: 22px !important;
        min-height: auto !important;
    }

    .boss-category.active-boss-category,
    .class-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
        gap: 18px !important;
    }

    .boss-card,
    .job-card {
        width: 100% !important;
        height: clamp(220px, 42vw, 300px) !important;
    }

    .boss-name,
    .job-name {
        font-size: 15px !important;
        letter-spacing: .7px !important;
    }

    .boss-split-wrapper,
    .boss-split-wrapper.active {
        margin-top: 34px !important;
        width: 94vw !important;
    }

    .boss-detail-page {
        padding: 56px 22px 28px !important;
        border-radius: 24px !important;
    }

    .boss-detail-name {
        font-size: clamp(36px, 8vw, 56px) !important;
        letter-spacing: 2px !important;
    }

    .boss-info-panel {
        width: 100% !important;
        margin: 18px 0 0 !important;
    }

    .boss-difficulty-box,
    .boss-description-box {
        padding: 20px !important;
    }

    .difficulty-btn {
        height: 46px !important;
        font-size: 16px !important;
    }

    .boss-difficulty-panel {
        padding: 24px 22px !important;
        border-radius: 24px !important;
    }

    .difficulty-title {
        font-size: clamp(32px, 7vw, 48px) !important;
        letter-spacing: 1.5px !important;
    }

    .difficulty-header {
        gap: 18px !important;
    }

    .difficulty-icon {
        width: 64px !important;
        height: 64px !important;
    }

    .difficulty-stats {
        flex-wrap: wrap !important;
    }

    .phase-row,
    .phase-segment-row {
        font-size: 14px !important;
    }

    .reward-icons img {
        width: 44px !important;
        height: 44px !important;
    }

    .job-detail-container {
        width: 94vw !important;
        margin: 34px auto 54px !important;
        padding: 48px 22px 30px !important;
        border-radius: 24px !important;
        min-height: auto !important;
    }

    .job-detail-title {
        font-size: clamp(34px, 8vw, 48px) !important;
        letter-spacing: 4px !important;
        margin-bottom: 26px !important;
    }

    .back-class-btn {
        top: 14px !important;
        left: 14px !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    .job-video {
        max-width: 100% !important;
    }

    .damage-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    .job-buttons {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .job-buttons button,
    .job-buttons a {
        min-width: 135px !important;
        flex: 1 1 135px !important;
    }

    .character-search-panel {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 22px !important;
    }

    .character-search-bar {
        flex-direction: column !important;
    }

    .character-profile-result {
        width: 100% !important;
        padding: 18px !important;
        grid-template-columns: 1fr !important;
    }

    .character-profile-left {
        padding: 24px 18px !important;
    }

    .character-profile-left img {
        width: 180px !important;
        height: 180px !important;
    }

    .character-side-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    .exp-chart-box {
        height: 310px !important;
    }

    .champions-showcase {
        grid-template-columns: 1fr !important;
    }

    .champions-mini-grid {
        grid-template-columns: 1fr !important;
    }

    .main-champion-card,
    .champion-card-v2 {
        width: 100% !important;
    }

    .perfil-panel,
    .perfil-panel.perfil-steam {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    .perfil-hero {
        flex-direction: column !important;
        text-align: center !important;
        gap: 18px !important;
    }

    .perfil-tabs {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .perfil-tab {
        flex: 1 1 140px !important;
    }

    .perfil-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .perfil-modal .legion-grid,
    .legion-grid {
        grid-template-columns: 1fr !important;
        padding: 22px 16px 34px !important;
    }

    .ticket-form,
    .contact-grid,
    .support-container {
        width: 100% !important;
    }

    .footer {
        min-height: auto !important;
        padding: 34px 18px !important;
    }

    .footer-socials {
        gap: 22px !important;
        flex-wrap: wrap !important;
    }

    .footer-socials a,
    .youtube-button {
        font-size: 24px !important;
    }
}

/* ---------- CELULARES ---------- */
@media (max-width: 620px) {
    body {
        padding-top: 112px !important;
    }

    .top-banner {
        height: 38px !important;
    }

    .feedback-link a {
        max-width: 52vw !important;
        font-size: 11px !important;
    }

    .auth-buttons {
        gap: 6px !important;
    }

    .login-btn {
        font-size: 0 !important;
    }

    .login-btn img {
        width: 20px !important;
        height: 20px !important;
    }

    .navbar {
        top: 38px !important;
        height: 74px !important;
        min-height: 74px !important;
    }

    .navbar-logo img,
    body.navbar-compact .navbar-logo img {
        width: 38px !important;
        height: 38px !important;
    }

    .navbar-logo h1,
    body.navbar-compact .navbar-logo h1 {
        font-size: 22px !important;
        letter-spacing: 2px !important;
    }

    .navbar-menu {
        top: 112px !important;
        max-height: calc(100vh - 126px) !important;
    }

    .mobile-nav-toggle {
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 22px !important;
    }

    .clan-slider-section {
        height: 260px !important;
        margin-top: 32px !important;
    }

    .info-box,
    .info-box.reverse,
    .founders-panel,
    .patch-container,
    .classes-container,
    .bosses-container,
    .character-center-v2 {
        padding: 22px 14px !important;
        border-radius: 24px !important;
    }

    .info-section-image {
        width: min(250px, 78vw) !important;
        height: min(250px, 78vw) !important;
        border-radius: 32px !important;
    }

    .info-section-text p,
    .offer-list {
        font-size: 15px !important;
        text-align: left !important;
    }

    .leaders-row,
    .leaders-row.bottom-row {
        grid-template-columns: 1fr !important;
    }

    .leader-card {
        min-height: 300px !important;
    }

    .leader-image {
        height: 220px !important;
    }

    .boss-category.active-boss-category,
    .class-grid {
        grid-template-columns: 1fr !important;
    }

    .boss-card,
    .job-card {
        height: 300px !important;
    }

    .boss-detail-name {
        font-size: 34px !important;
        line-height: 1.05 !important;
    }

    .boss-difficulty-panel {
        padding: 22px 16px !important;
    }

    .difficulty-title {
        font-size: 30px !important;
    }

    .boss-extra-line {
        font-size: 14px !important;
    }

    .important-rewards h3 {
        font-size: 16px !important;
    }

    .reward-icons img {
        width: 40px !important;
        height: 40px !important;
    }

    .job-detail-title {
        font-size: 32px !important;
        letter-spacing: 3px !important;
    }

    .job-buttons {
        flex-direction: column !important;
    }

    .job-buttons button,
    .job-buttons a {
        width: 100% !important;
    }

    .character-side-stats {
        grid-template-columns: 1fr !important;
    }

    .exp-history-header {
        flex-direction: column !important;
    }

    .exp-history-ranges {
        justify-content: center !important;
        width: 100% !important;
    }

    .exp-chart-box {
        height: 260px !important;
    }

    .character-result-actions,
    .result-slot-picker {
        grid-template-columns: 1fr !important;
    }

    .perfil-avatar-big {
        width: 110px !important;
        height: 110px !important;
    }

    .perfil-hero-info h2 {
        font-size: 28px !important;
    }

    .legion-card-buttons {
        grid-template-columns: 1fr !important;
    }

    .footer-logo h3 {
        font-size: 22px !important;
    }

    .footer-copy {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
}

/* ---------- CELULARES CHICOS ---------- */
@media (max-width: 420px) {
    .top-banner {
        padding: 0 10px !important;
    }

    .feedback-link a {
        max-width: 46vw !important;
    }

    .navbar-logo h1,
    body.navbar-compact .navbar-logo h1 {
        font-size: 20px !important;
    }

    .patch-title,
    .classes-title,
    .bosses-title,
    .character-center-header h2 {
        font-size: 28px !important;
    }

    .boss-tab,
    .class-tab {
        flex-basis: 100% !important;
    }

    .boss-card,
    .job-card {
        height: 270px !important;
    }

    .character-profile-left img {
        width: 150px !important;
        height: 150px !important;
    }

    .character-profile-left h3 {
        font-size: 28px !important;
    }
}


/* ==========================================================
   FIX RESPONSIVE BANNERS - iPhone / mobile header behavior
   - Top banner short labels on mobile
   - Navbar moves up when top banner hides
   - Prevents first banner from covering the navbar
   ========================================================== */

/* Desktop/tablet: when the top banner hides, the navbar occupies the top */
body.top-banner-hidden {
    padding-top: 120px !important;
}

body.top-banner-hidden .navbar {
    top: 0 !important;
}

body.top-banner-hidden body.navbar-compact .navbar {
    top: 0 !important;
}

.top-banner,
.navbar {
    transition:
        transform .28s ease,
        top .28s ease,
        height .28s ease,
        min-height .28s ease;
}

@media (max-width: 980px) {
    :root {
        --lorien-mobile-top-banner-height: 38px;
        --lorien-mobile-navbar-height: 76px;
        --lorien-mobile-header-total: calc(var(--lorien-mobile-top-banner-height) + var(--lorien-mobile-navbar-height));
    }

    body {
        padding-top: var(--lorien-mobile-header-total) !important;
    }

    body.top-banner-hidden {
        padding-top: var(--lorien-mobile-navbar-height) !important;
    }

    .top-banner {
        height: var(--lorien-mobile-top-banner-height) !important;
        min-height: var(--lorien-mobile-top-banner-height) !important;
        padding: 0 10px !important;
        gap: 8px !important;
        overflow: hidden !important;
        z-index: 32000 !important;
    }

    .navbar,
    body.navbar-compact .navbar {
        top: var(--lorien-mobile-top-banner-height) !important;
        height: var(--lorien-mobile-navbar-height) !important;
        min-height: var(--lorien-mobile-navbar-height) !important;
    }

    body.top-banner-hidden .navbar,
    body.top-banner-hidden.navbar-compact .navbar {
        top: 0 !important;
    }

    .feedback-link,
    .auth-buttons {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .feedback-link {
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .auth-buttons {
        justify-content: flex-end !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .feedback-link a,
    .login-btn,
    .register-btn {
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1 !important;
        letter-spacing: .3px !important;
    }

    /* Short mobile labels to avoid the first banner crashing into the navbar */
    .feedback-link a {
        font-size: 0 !important;
    }

    .feedback-link a::before {
        content: "Comentarios";
        font-size: 11px !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-weight: 800 !important;
        color: white !important;
    }

    .feedback-link a i {
        flex: 0 0 auto !important;
        font-size: 14px !important;
    }

    .login-btn,
    .register-btn {
        font-size: 0 !important;
    }

    .login-btn::after {
        content: "Log in";
        font-size: 11px !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-weight: 800 !important;
        color: white !important;
    }

    .register-btn::after {
        content: "Registro";
        font-size: 11px !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-weight: 800 !important;
        color: white !important;
    }

    .login-btn img,
    .register-btn img {
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 auto !important;
    }

    .notification-box {
        flex: 0 0 auto !important;
    }

    .notification-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    .navbar-menu {
        top: var(--lorien-mobile-header-total) !important;
        max-height: calc(100vh - var(--lorien-mobile-header-total) - 14px) !important;
    }

    body.top-banner-hidden .navbar-menu {
        top: var(--lorien-mobile-navbar-height) !important;
        max-height: calc(100vh - var(--lorien-mobile-navbar-height) - 14px) !important;
    }
}

@media (max-width: 420px) {
    .feedback-link a::before {
        content: "Coments";
        font-size: 10px !important;
    }

    .login-btn::after {
        content: "Login";
        font-size: 10px !important;
    }

    .register-btn::after {
        content: "Reg.";
        font-size: 10px !important;
    }

    .top-banner {
        padding: 0 8px !important;
    }
}


/* ==========================================================
   PATCH FINAL RESPONSIVE - BANNER + MENÚ DE USUARIO
   ========================================================== */

/* Mientras no estés arriba del todo, el navbar queda pegado al top.
   Esto elimina el hueco que aparecía al hacer scroll up a media página. */
body.top-banner-hidden {
    padding-top: 120px !important;
}

body.top-banner-hidden .navbar,
body.top-banner-hidden.navbar-compact .navbar {
    top: 0 !important;
}

/* El dropdown del usuario no debe recortarse dentro del banner superior. */
.top-banner,
.auth-buttons {
    overflow: visible !important;
}

.auth-buttons {
    position: relative !important;
}

.user-menu {
    z-index: 999999 !important;
}

.user-menu.open-user-menu {
    display: block !important;
}

.hidden-user-menu:not(.open-user-menu) {
    display: none !important;
}

@media (max-width: 980px) {
    :root {
        --lorien-mobile-top-banner-height: 38px;
        --lorien-mobile-navbar-height: 76px;
        --lorien-mobile-header-total: calc(var(--lorien-mobile-top-banner-height) + var(--lorien-mobile-navbar-height));
    }

    body {
        padding-top: var(--lorien-mobile-header-total) !important;
    }

    body.top-banner-hidden {
        padding-top: var(--lorien-mobile-navbar-height) !important;
    }

    body.top-banner-hidden .navbar,
    body.top-banner-hidden.navbar-compact .navbar {
        top: 0 !important;
    }

    .top-banner {
        overflow: visible !important;
    }

    .auth-buttons {
        overflow: visible !important;
        position: relative !important;
    }

    /* Menú del usuario en móvil: se posiciona fijo para que no lo corte el banner. */
    .user-menu {
        position: fixed !important;
        top: calc(var(--lorien-mobile-top-banner-height) + 8px) !important;
        right: 10px !important;
        left: auto !important;
        width: min(250px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: rgba(10, 22, 36, .98) !important;
        border: 1px solid rgba(126, 231, 255, .45) !important;
        box-shadow:
            0 12px 28px rgba(0,0,0,.35),
            0 0 22px rgba(0,191,255,.25) !important;
    }

    body.top-banner-hidden .user-menu {
        top: 10px !important;
    }

    .user-menu button {
        padding: 14px 16px !important;
        font-size: 14px !important;
        text-align: left !important;
        letter-spacing: .3px !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
    }

    /* Perfil responsive: evita ventanas cortadas en iPhone/tablet. */
    .perfil-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .perfil-panel.perfil-steam,
    .perfil-panel {
        width: min(96vw, 760px) !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 24px !important;
    }

    .perfil-hero {
        padding: 22px 18px !important;
        gap: 14px !important;
    }

    .perfil-avatar-big {
        width: 78px !important;
        height: 78px !important;
    }

    .perfil-hero-info h2 {
        font-size: clamp(24px, 6vw, 36px) !important;
    }

    .perfil-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .perfil-tab {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .perfil-tab-content {
        padding: 18px 14px !important;
    }

    .perfil-stats-grid,
    .perfil-form,
    .admin-tools,
    .admin-users-list {
        grid-template-columns: 1fr !important;
    }

    .perfil-modal .legion-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 18px 8px 28px !important;
    }

    .perfil-modal .legion-champion-card {
        width: 100% !important;
        min-height: auto !important;
    }

    .perfil-modal .legion-card-buttons {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .perfil-modal .legion-card-buttons button {
        width: 100% !important;
        font-size: 14px !important;
    }
}

@media (max-width: 430px) {
    .perfil-tabs {
        grid-template-columns: 1fr !important;
    }

    .user-menu {
        right: 8px !important;
        width: min(240px, calc(100vw - 16px)) !important;
    }
}

/* =========================================================
   PARTY BOSSES - V1
========================================================= */

.party-bosses-page {
    width: min(1500px, 94vw);
    margin: 70px auto 120px;
    padding: 42px;

    border-radius: 34px;

    background:
        linear-gradient(135deg, rgba(235,248,255,.94), rgba(255,242,251,.94));

    border: 3px solid rgba(0,191,255,.55);

    box-shadow:
        0 0 25px rgba(0,191,255,.25),
        0 0 45px rgba(255,105,180,.18);

    color: #07365c;
}

.party-bosses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;

    margin-bottom: 32px;
}

.party-bosses-header h2 {
    margin: 0;

    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: clamp(32px, 4vw, 54px);
    letter-spacing: 3px;

    color: #0077d9;
}

.party-bosses-header p {
    margin: 10px 0 0;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .5px;

    color: #074699;
}

.party-create-main-btn,
.party-save-btn {
    border: none;
    border-radius: 18px;

    padding: 15px 30px;

    background: linear-gradient(135deg, #00bfff, #0077d9);
    color: white;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 900;
    font-size: 15px;

    cursor: pointer;

    box-shadow:
        0 0 16px rgba(0,191,255,.35);

    transition: .25s ease;
}

.party-create-main-btn:hover,
.party-save-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 24px rgba(0,191,255,.55);
}

.party-bosses-tools {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 18px;
    align-items: end;

    margin-bottom: 30px;

    padding: 22px;

    border-radius: 24px;

    background: rgba(5, 35, 60, .94);
    border: 1px solid rgba(126,231,255,.35);
}

.party-tool-field,
.party-form-field {
    display: grid;
    gap: 8px;

    text-align: left;
}

.party-tool-field label,
.party-form-field label {
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .8px;
    color: #7ee7ff;
}

.party-tool-field select,
.party-form-field select,
.party-form-field input,
.party-form-field textarea {
    width: 100%;

    padding: 13px 14px;

    border: 2px solid rgba(0,191,255,.35);
    border-radius: 14px;

    background: white;
    color: #07365c;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 800;
}

.party-form-field textarea {
    min-height: 90px;
    resize: vertical;
}

.party-time-note {
    padding: 13px 18px;

    border-radius: 999px;

    background: rgba(0,191,255,.14);
    border: 1px solid rgba(126,231,255,.45);

    color: white;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 900;
    white-space: nowrap;
}

.party-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(170px, 1fr));
    gap: 14px;
}

.party-day-column {
    min-height: 620px;

    display: flex;
    flex-direction: column;

    border-radius: 22px;

    background: rgba(255,255,255,.72);
    border: 2px solid rgba(0,191,255,.28);

    overflow: hidden;

    box-shadow:
        inset 0 0 14px rgba(0,191,255,.08);
}

.party-day-title {
    padding: 18px 12px;

    background: linear-gradient(135deg, #0077d9, #00bfff);
    color: white;

    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: 17px;
    letter-spacing: 1.4px;

    text-align: center;
}

.party-day-body {
    flex: 1;

    display: grid;
    align-content: start;
    gap: 12px;

    padding: 14px;
}

.party-empty-day {
    margin-top: 16px;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: rgba(7,54,92,.55);
}

.party-card {
    padding: 14px;

    border-radius: 18px;

    background: rgba(7, 33, 55, .96);
    border: 1px solid rgba(126,231,255,.35);

    color: white;

    box-shadow:
        0 0 16px rgba(0,191,255,.18);

    text-align: left;
}

.party-card-time {
    display: inline-flex;
    align-items: center;

    margin-bottom: 8px;

    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(0,191,255,.18);
    color: #7ee7ff;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 12px;
    font-weight: 900;
}

.party-card h4 {
    margin: 0 0 6px;

    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: 17px;
    letter-spacing: 1px;

    color: white;
}

.party-card small {
    display: block;

    margin-bottom: 10px;

    color: rgba(255,255,255,.72);

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 800;
}

.party-card-members {
    display: grid;
    gap: 6px;
}

.party-member-pill {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 9px;

    border-radius: 12px;

    background: rgba(255,255,255,.08);

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 12px;
    font-weight: 900;
}

.party-member-pill img {
    width: 26px;
    height: 26px;

    border-radius: 50%;
    object-fit: contain;

    background: rgba(255,255,255,.9);
}

.party-leader-star {
    color: #ffd86b;
    text-shadow: 0 0 8px rgba(255,216,107,.75);
}

.party-modal {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 90000;

    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.party-modal.active {
    display: flex;
}

.party-modal-box {
    position: relative;

    width: min(940px, 94vw);
    max-height: 92vh;
    overflow-y: auto;

    padding: 38px;

    border-radius: 34px;

    background:
        linear-gradient(135deg, rgba(235,248,255,.98), rgba(255,242,251,.98));

    border: 3px solid rgba(0,191,255,.65);

    box-shadow:
        0 0 30px rgba(0,191,255,.35),
        0 0 55px rgba(255,105,180,.25);

    color: #07365c;
}

.party-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.12);
    color: #111;

    font-size: 28px;
    cursor: pointer;
}

.party-modal-box h2 {
    margin: 0;

    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: 38px;
    letter-spacing: 2px;

    color: #0077d9;
}

.party-modal-desc {
    margin: 10px 0 26px;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 800;

    color: #074699;
}

.party-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;

    margin-bottom: 20px;
}

.party-capacity-box {
    margin: 18px 0 24px;
    padding: 15px 18px;

    border-radius: 18px;

    background: rgba(0,191,255,.12);
    border: 1px solid rgba(0,191,255,.35);

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 900;
    color: #0077d9;
}

.party-members-create h3 {
    margin-bottom: 5px;

    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    color: #07365c;
    letter-spacing: 1px;
}

.party-members-create p {
    margin-top: 0;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 800;
    color: #52606d;
}

.party-members-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;

    margin-bottom: 22px;
}

.party-member-slot {
    display: grid;
    gap: 8px;
}

.party-member-slot label {
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 13px;
    font-weight: 900;
    color: #0077d9;
}

.party-member-slot select {
    padding: 12px 14px;

    border: 2px solid rgba(0,191,255,.35);
    border-radius: 14px;

    background: white;
    color: #07365c;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 800;
}

.party-form-message {
    min-height: 22px;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 900;
}

.profile-parties-list {
    display: grid;
    gap: 18px;

    margin-top: 24px;
}

.profile-party-card {
    padding: 22px;

    border-radius: 24px;

    background: rgba(7, 33, 55, .96);
    border: 1px solid rgba(126,231,255,.4);

    color: white;

    box-shadow:
        0 0 18px rgba(0,191,255,.2);

    text-align: left;
}

.profile-party-card h4 {
    margin: 0 0 8px;

    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    letter-spacing: 1px;
}

.profile-party-card p {
    margin: 0 0 12px;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 800;
    color: rgba(255,255,255,.76);
}

.profile-party-members {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 1180px) {
    .party-calendar {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }

    .party-day-column {
        min-height: 360px;
    }

    .party-bosses-tools {
        grid-template-columns: 1fr 1fr;
    }

    .party-time-note {
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (max-width: 720px) {
    .party-bosses-page {
        width: 94vw;
        padding: 22px;
        margin-top: 35px;
    }

    .party-bosses-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .party-bosses-tools,
    .party-form-grid,
    .party-members-slots,
    .party-calendar {
        grid-template-columns: 1fr;
    }

    .party-modal-box {
        padding: 28px 20px;
        border-radius: 26px;
    }

    .party-modal-box h2 {
        font-size: 30px;
    }
}

/* Reloj UTC / MapleStory en segundo banner */

.maple-utc-clock {
    position: absolute;
    left: clamp(80px, 4vw, 80px);
    top: 46px;

    padding: 9px 20px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(126, 231, 255, .45);

    color: white;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2px;

    box-shadow:
        0 0 12px rgba(0, 191, 255, .18);

    z-index: 20;
}

@media (max-width: 900px) {
    .maple-utc-clock {
        position: static;
        width: fit-content;
        margin: 8px auto 0;

        font-size: 11px;
        padding: 7px 12px;
    }
}

/* =========================================================
   PARTY BOSSES - Ajuste pastel, ancho y acciones
========================================================= */

.party-bosses-page {
    width: min(1780px, 96vw);
    margin-top: 68px;
    padding: 42px 48px;

    background:
        linear-gradient(135deg, rgba(239, 250, 255, .96), rgba(255, 244, 252, .96));

    border-color: rgba(80, 211, 255, .7);
}

.party-bosses-tools {
    background:
        linear-gradient(135deg, rgba(232, 249, 255, .92), rgba(255, 239, 249, .92));

    border: 2px solid rgba(73, 199, 255, .48);

    box-shadow:
        0 0 18px rgba(0, 191, 255, .16);
}

.party-tool-field label,
.party-form-field label {
    color: #0077d9;
}

.party-time-note {
    background: rgba(255, 255, 255, .72);
    border: 2px solid rgba(73, 199, 255, .45);
    color: #07527e;
}

.party-calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 18px;
}

.party-day-column {
    background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(246,251,255,.88));

    border: 2px solid rgba(87, 211, 255, .45);

    box-shadow:
        0 0 14px rgba(0, 191, 255, .12);
}

.party-card {
    background:
        linear-gradient(145deg, rgba(235, 250, 255, .98), rgba(255, 241, 250, .98));

    border: 2px solid rgba(77, 205, 255, .45);

    color: #07365c;

    box-shadow:
        0 0 16px rgba(0, 191, 255, .16),
        0 0 22px rgba(255, 105, 180, .08);
}

.party-card h4 {
    color: #005fae;
}

.party-card small {
    color: #42627b;
}

.party-card-time {
    background: rgba(0, 191, 255, .14);
    color: #0077d9;
    border: 1px solid rgba(0, 191, 255, .28);
}

.party-member-pill {
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(0, 191, 255, .18);
    color: #07365c;
}

.party-member-pill img {
    background: white;
    border: 1px solid rgba(0, 191, 255, .28);
}

.party-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-bottom: 8px;
}

.party-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.party-card-actions button {
    border: none;
    border-radius: 999px;

    padding: 5px 10px;

    background: #ff6f9f;
    color: white;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 11px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 0 10px rgba(255, 105, 180, .22);
}

.party-card-actions button:hover {
    background: #e94f82;
}

.profile-party-card {
    background:
        linear-gradient(145deg, rgba(235, 250, 255, .98), rgba(255, 241, 250, .98));

    border: 2px solid rgba(77, 205, 255, .45);
    color: #07365c;
}

.profile-party-card h4 {
    color: #005fae;
}

.profile-party-card p {
    color: #42627b;
}

@media (min-width: 1800px) {
    .party-bosses-page {
        width: min(1880px, 96vw);
    }

    .party-calendar {
        gap: 22px;
    }
}

@media (max-width: 1366px) {
    .party-bosses-page {
        width: 96vw;
        padding: 34px 28px;
    }

    .party-calendar {
        gap: 12px;
    }

    .party-card {
        padding: 12px;
    }

    .party-card h4 {
        font-size: 15px;
    }

    .party-member-pill {
        font-size: 11px;
    }
}

.party-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.party-card-actions button {
    border: none;
    border-radius: 999px;

    padding: 5px 10px;

    color: white;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 11px;
    font-weight: 900;

    cursor: pointer;

    transition: .2s ease;
}

.party-edit-btn {
    background: linear-gradient(135deg, #00bfff, #0077d9);
    box-shadow: 0 0 10px rgba(0, 191, 255, .24);
}

.party-delete-btn {
    background: linear-gradient(135deg, #ff7bab, #ff4f86);
    box-shadow: 0 0 10px rgba(255, 105, 180, .24);
}

.party-edit-btn:hover,
.party-delete-btn:hover {
    transform: translateY(-1px);
}

/* =========================================================
   PARTY BOSSES - Boss image + timezone helper
========================================================= */

.party-boss-preview {
    min-height: 44px;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 8px;
}

.party-boss-preview img {
    width: 42px;
    height: 42px;

    object-fit: contain;
    border-radius: 12px;

    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(0, 191, 255, .32);

    box-shadow:
        0 0 10px rgba(0, 191, 255, .18);
}

.party-boss-preview span {
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 13px;
    font-weight: 900;
    color: #0077d9;
}

.party-utc-preview {
    margin-top: 8px;
    padding: 10px 12px;

    border-radius: 14px;

    background: rgba(0, 191, 255, .12);
    border: 1px solid rgba(0, 191, 255, .28);

    color: #0077d9;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .4px;
}

.party-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.party-card-boss-img {
    width: 32px;
    height: 32px;

    object-fit: contain;
    border-radius: 10px;

    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(0, 191, 255, .25);

    flex: 0 0 auto;
}

.profile-party-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-party-card .party-card-boss-img {
    width: 34px;
    height: 34px;
}

/* =========================================================
   PARTY BOSSES - ORGANIZACIÓN VISUAL MEJORADA
========================================================= */

/* ===== MODAL CREAR / EDITAR PARTY ===== */

.party-modal-panel {
    max-width: 1040px;
}

.party-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 18px;
    align-items: start;
}

.party-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.party-form-field.full-width {
    grid-column: 1 / -1;
}

.party-form-field label {
    font-size: 14px;
    font-weight: 900;
    color: #0077d9;
    letter-spacing: .3px;
}

.party-boss-preview {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.party-boss-preview img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(0, 191, 255, 0.25);
    background: rgba(255,255,255,.75);
}

.party-boss-preview span {
    font-size: 15px;
    font-weight: 900;
    color: #0b5fc4;
}

.party-utc-preview {
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #cdefff;
    border: 1px solid rgba(0, 191, 255, .25);
    color: #0b66d1;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

.party-member-limit-box {
    grid-column: 1 / -1;
    text-align: center;
    padding: 14px 16px;
    border-radius: 16px;
    background: #ccecff;
    border: 1px solid rgba(0,191,255,.22);
    color: #1672d2;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .4px;
}

.party-members-title {
    margin-top: 10px;
    text-align: center;
}

.party-members-title h3 {
    margin-bottom: 6px;
}

.party-members-title p {
    color: #5c6677;
    font-weight: 700;
}

.party-members-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.party-notes-field {
    margin-top: 22px;
}

.party-submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}


/* ===== CALENDARIO ===== */

.party-bosses-shell {
    max-width: 1500px;
    margin: 0 auto;
}

.party-bosses-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(170px, 1fr));
    gap: 14px;
    align-items: start;
}

.party-day-column {
    background: rgba(255,255,255,.35);
    border: 2px solid rgba(90, 205, 255, .35);
    border-radius: 20px;
    min-height: 560px;
    padding-bottom: 14px;
    overflow: hidden;
}

.party-day-header {
    background: linear-gradient(135deg, #11aaf2, #19b7ff);
    color: #fff;
    text-align: center;
    font-weight: 900;
    font-size: 16px;
    padding: 16px 10px;
    letter-spacing: 1px;
}

.party-day-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.party-empty-day {
    text-align: center;
    color: #8d97ab;
    font-size: 14px;
    font-weight: 800;
    padding: 28px 10px;
}


/* ===== CARD DE PARTY ===== */

.party-card {
    background: #f7fbff;
    border: 2px solid #9adfff;
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(0, 140, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.party-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.party-time-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #cceeff;
    border: 1px solid #91d8ff;
    color: #1871cf;
    font-weight: 900;
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: .4px;
}

.party-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.party-btn-mini {
    min-width: 74px;
    border: none;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
}

.party-btn-mini:hover {
    transform: translateY(-1px);
    opacity: .95;
}

.party-btn-edit {
    background: linear-gradient(135deg, #ff83b8, #ff6ea7);
    color: #fff;
}

.party-btn-delete {
    background: linear-gradient(135deg, #ff8eb7, #ff5d92);
    color: #fff;
}

.party-card-boss-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.party-card-boss-img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 12px;
    background: #fff;
    border: 2px solid #a4e2ff;
    flex-shrink: 0;
}

.party-card-boss-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.party-card-boss-title {
    font-size: 16px;
    font-weight: 900;
    color: #0c57b8;
    line-height: 1.15;
    word-break: break-word;
}

.party-card-boss-sub {
    font-size: 12px;
    font-weight: 800;
    color: #68748a;
    letter-spacing: .3px;
}

.party-card-members-count {
    font-size: 13px;
    font-weight: 900;
    color: #2c3d56;
    margin-top: -2px;
}

.party-card-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.party-member-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #ccecff;
    border-radius: 14px;
    padding: 8px 10px;
}

.party-member-chip img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #c9deef;
    background: #fff;
    flex-shrink: 0;
}

.party-member-chip span {
    font-size: 13px;
    font-weight: 800;
    color: #33425a;
    line-height: 1.2;
    word-break: break-word;
}

.party-member-leader-star {
    color: #ffc93c;
    font-size: 13px;
    font-weight: 900;
}

.party-card-notes {
    background: #eef8ff;
    border: 1px dashed #9bdcff;
    color: #597088;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}


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

@media (max-width: 1200px) {
    .party-bosses-week-grid {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
    }
}

@media (max-width: 900px) {
    .party-form-grid,
    .party-members-grid {
        grid-template-columns: 1fr;
    }

    .party-bosses-week-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .party-day-column {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .party-bosses-week-grid {
        grid-template-columns: 1fr;
    }

    .party-card-top {
        flex-direction: column;
        align-items: stretch;
    }

    .party-card-actions {
        flex-direction: row;
        justify-content: flex-start;
    }

    .party-btn-mini {
        min-width: 88px;
    }

    .party-card-boss-title {
        font-size: 15px;
    }
}

/* =========================================================
   FIX FINAL - Reloj Maple sin estorbar el menú
========================================================= */

.maple-utc-clock {
    position: absolute !important;
    left: auto !important;
    right: clamp(16px, 3vw, 56px) !important;
    top: 14px !important;

    width: auto !important;
    max-width: 145px !important;
    white-space: nowrap !important;

    padding: 6px 11px !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(126, 231, 255, .35) !important;
    color: rgba(255,255,255,.92) !important;

    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .45px !important;
    line-height: 1 !important;

    box-shadow: 0 0 10px rgba(0, 191, 255, .14) !important;

    pointer-events: none !important;
    z-index: 25 !important;
}

body.navbar-compact .maple-utc-clock {
    top: 12px !important;
    right: 18px !important;
}

@media (max-width: 1180px) {
    .maple-utc-clock {
        top: 8px !important;
        right: 12px !important;
        font-size: 10px !important;
        padding: 5px 8px !important;
        max-width: 120px !important;
    }
}

@media (max-width: 760px) {
    .maple-utc-clock {
        display: none !important;
    }
}

/* =========================================================
   CALCULADORAS - LORIEN CLEAN FINAL
   Genesis = Black Mage / rojo oscuro
   Destiny = azul mítico / blanco / dorado
   Reemplaza toda la sección anterior de calculadoras con este bloque.
========================================================= */

/* =========================================================
   BASE GENERAL
========================================================= */
.calc-page {
    width: min(1720px, 96vw);
    margin: 58px auto 110px;
    padding: clamp(24px, 3vw, 42px);
    border-radius: 36px;
    position: relative;
    overflow: visible;
    background: linear-gradient(135deg, rgba(235, 249, 255, .96), rgba(255, 242, 251, .96));
    border: 3px solid rgba(80, 211, 255, .68);
    box-shadow:
        0 0 28px rgba(0, 191, 255, .18),
        0 0 42px rgba(255, 105, 180, .10);
    color: #07365c;
}

.calc-page,
.calc-page * {
    box-sizing: border-box;
}

.calc-header {
    text-align: center;
    margin-bottom: 26px;
}

.calc-header h2 {
    margin: 0;
    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: clamp(36px, 4vw, 66px);
    color: #0077d9;
    letter-spacing: 3px;
    line-height: 1;
}

.calc-header p {
    margin: 14px auto 0;
    max-width: 860px;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 850;
    color: #07527e;
    letter-spacing: .7px;
}

.calc-main-tabs,
.liberation-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 28px;
}

.calc-tab,
.liberation-tab {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 14px 28px;
    background: rgba(255,255,255,.78);
    border: 2px solid rgba(0, 191, 255, .32);
    color: #07527e;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 950;
    letter-spacing: .5px;
    cursor: pointer;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.calc-tab:hover,
.liberation-tab:hover {
    transform: translateY(-2px);
}

.calc-tab.active,
.liberation-tab.active {
    background: linear-gradient(135deg, #00bfff, #0077d9);
    color: white;
    box-shadow: 0 0 18px rgba(0,191,255,.34);
}

.calc-tab.disabled,
.liberation-tab.disabled {
    opacity: .55;
    cursor: not-allowed;
}

.calc-tab span,
.liberation-tab span {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    opacity: .78;
}

.calc-tab::after,
.liberation-tab::after,
.genesis-apply-btn::after,
.genesis-reset-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -140%;
    width: 60%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.22), transparent);
    transition: left .45s ease;
    pointer-events: none;
}

.calc-tab:hover::after,
.liberation-tab:hover::after,
.genesis-apply-btn:hover::after,
.genesis-reset-btn:hover::after {
    left: 140%;
}

.calc-category,
.liberation-panel {
    display: none;
}

.calc-category.active,
.liberation-panel.active {
    display: block;
}

/* =========================================================
   PANEL DE LIBERACIÓN COMPARTIDO
========================================================= */
.liberation-panel {
    position: relative;
    width: 100%;
    border-radius: 32px;
    overflow: visible;
    padding: 0 0 28px;
    isolation: isolate;
}

.liberation-panel.theme-enter {
    animation: themePanelEnterSoft .36s ease both;
}

.liberation-title-box {
    text-align: center;
    margin: 0 0 22px;
    padding: clamp(30px, 3vw, 42px) 30px 28px;
    border-radius: 30px 30px 0 0;
}

.liberation-title-box h3 {
    margin: 0 0 14px;
    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: clamp(34px, 3.5vw, 60px);
    letter-spacing: 2px;
    line-height: 1.05;
}

.liberation-title-box p {
    margin: 0 auto;
    max-width: 980px;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: .4px;
}

.genesis-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(300px, 335px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 0 22px;
}

.genesis-left-column,
.genesis-right-column,
.genesis-main-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.genesis-card,
.genesis-mini-card,
.genesis-config-card,
.genesis-boss-card,
.genesis-timeline-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 20px;
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease,
        background .24s ease;
}

.genesis-card:hover,
.genesis-mini-card:hover,
.genesis-config-card:hover,
.genesis-boss-card:hover,
.genesis-timeline-card:hover {
    transform: translateY(-2px);
}

.genesis-card-title,
.genesis-card h4,
.genesis-mini-card h4,
.genesis-config-card h4,
.genesis-boss-card h4,
.genesis-timeline-card h4 {
    margin: 0 0 14px;
    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-weight: 950;
    letter-spacing: 1px;
    line-height: 1.15;
    text-transform: uppercase;
}

.genesis-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.genesis-card-title-row p {
    margin: 8px 0 0;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-weight: 780;
    line-height: 1.4;
    letter-spacing: .3px;
}

/* Resultado / fecha */
.genesis-result-date,
.genesis-big-date {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 12px auto 10px;
    text-align: center;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: clamp(26px, 2.05vw, 38px);
    font-weight: 1000;
    line-height: 1.08;
    letter-spacing: .6px;
    white-space: nowrap;
    overflow: visible;
}

.genesis-result-text,
#genesisResumenResultado,
#destinyResumenResultado {
    margin: 0 auto 14px;
    max-width: 96%;
    text-align: center;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: clamp(13px, .95vw, 16px);
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: .3px;
}

.genesis-progress-wrap {
    margin-top: 12px;
}

.genesis-progress-bar {
    width: 100%;
    height: 13px;
    border-radius: 999px;
    overflow: hidden;
}

.genesis-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width .35s ease;
}

.genesis-progress-label,
.genesis-progress-text {
    display: block;
    margin-top: 9px;
    text-align: center;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 22px;
    font-weight: 1000;
}

/* Resumen izquierdo */
.genesis-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.genesis-summary-row,
.genesis-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
}

.genesis-summary-row strong,
.genesis-stat-row strong {
    flex-shrink: 0;
    font-weight: 1000;
}

.genesis-summary-panel {
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    line-height: 1.55;
}

.genesis-summary-panel h5 {
    margin: 0 0 10px;
    text-align: center;
    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: 15px;
    letter-spacing: 1px;
}

/* Etapas */
.genesis-stages-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.genesis-stage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 16px;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.1;
    transition: .22s ease;
}

.genesis-stage-row strong {
    flex-shrink: 0;
}

.genesis-stage-row:hover {
    transform: translateX(2px);
}

/* Configuración */
.genesis-config-card,
.genesis-right-column > .genesis-card:first-child {
    padding: 22px 24px;
}

.genesis-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.genesis-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.genesis-field label {
    text-align: center;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .25px;
}

.genesis-field input,
.genesis-field select,
.genesis-boss-controls select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 15px;
    padding: 0 15px;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 15px;
    font-weight: 850;
    outline: none;
    transition: .22s ease;
}

.genesis-config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.genesis-apply-btn,
.genesis-reset-btn {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 999px;
    padding: 13px 28px;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 15px;
    font-weight: 950;
    letter-spacing: .3px;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease;
}

.genesis-apply-btn:hover,
.genesis-reset-btn:hover {
    transform: translateY(-2px);
}

/* Bosses */
.genesis-boss-box {
    padding: 22px 24px 24px;
}

.genesis-boss-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.genesis-boss-toolbar h3 {
    margin: 0;
    text-align: center;
    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: clamp(20px, 1.6vw, 28px);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.genesis-boss-toolbar p {
    margin: 8px auto 0;
    max-width: 760px;
    text-align: center;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 14px;
    font-weight: 820;
    line-height: 1.3;
}

.genesis-toolbar-badge,
.genesis-selected-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 999px;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 14px;
    font-weight: 950;
    letter-spacing: .3px;
    white-space: nowrap;
}

.genesis-boss-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 14px;
}

.genesis-boss-card {
    min-height: 186px;
    padding: 16px;
}

.genesis-boss-card > * {
    position: relative;
    z-index: 1;
}

.genesis-boss-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}

.genesis-boss-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.genesis-boss-avatar {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    object-fit: cover;
    flex-shrink: 0;
}

.genesis-boss-name-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.genesis-boss-name {
    font-family: var(--lorien-font-title, 'Heavitas', Arial, sans-serif);
    font-size: 18px;
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.genesis-boss-points,
.genesis-boss-sub {
    display: block;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
}

.genesis-boss-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 10px;
    margin-top: 12px;
}

.genesis-cleared-block {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.genesis-cleared-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.genesis-cleared-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.genesis-cleared-slider {
    width: 56px;
    height: 30px;
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: .25s ease;
}

.genesis-cleared-slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 8px rgba(0,0,0,.22);
    transition: transform .25s ease, box-shadow .25s ease;
}

.genesis-cleared-toggle input:checked + .genesis-cleared-slider::before {
    transform: translateX(26px);
}

.genesis-cleared-toggle input:disabled + .genesis-cleared-slider {
    opacity: .48;
    cursor: not-allowed;
}

.genesis-cleared-text {
    min-width: 108px;
    text-align: left;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 14px;
    font-weight: 950;
}

.genesis-weekly-note {
    margin-top: 10px;
    text-align: center;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.28;
}

/* Timeline */
.genesis-timeline-list,
.genesis-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.genesis-timeline-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 150px 150px;
    align-items: center;
    gap: 16px;
    min-height: 54px;
    border-radius: 18px;
    padding: 0 18px;
    font-family: var(--lorien-font-text, "Object Sans Lorien", Arial, sans-serif);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
}

.genesis-timeline-row strong {
    text-align: left;
}

.genesis-timeline-row span {
    text-align: center;
    white-space: nowrap;
}

.genesis-timeline-row em {
    text-align: right;
    font-style: normal;
    white-space: nowrap;
}

/* =========================================================
   TEMA GENESIS
========================================================= */
#genesisTabBtn.active {
    background: linear-gradient(135deg, #6e0719, #24030a);
    color: #fff0ef;
    border-color: rgba(255, 95, 110, .50);
    box-shadow: 0 0 20px rgba(255, 60, 90, .25);
}

#liberationGenesisPanel {
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 55, 80, .12), transparent 24%),
        radial-gradient(circle at 86% 10%, rgba(120, 0, 24, .18), transparent 30%),
        linear-gradient(180deg, #24040b 0%, #130108 48%, #090105 100%);
    border: 2px solid rgba(255, 86, 106, .22);
    box-shadow:
        0 22px 58px rgba(0,0,0,.30),
        inset 0 0 70px rgba(255, 32, 72, .06);
    color: #ffe8eb;
}

#liberationGenesisPanel .liberation-title-box {
    background: linear-gradient(180deg, rgba(62, 6, 18, .98), rgba(23, 2, 8, .98));
    border-bottom: 1px solid rgba(255, 88, 112, .24);
    box-shadow:
        0 0 18px rgba(255, 50, 82, .10),
        inset 0 0 18px rgba(255, 120, 140, .05);
}

#liberationGenesisPanel .liberation-title-box h3 {
    color: #fff0ef;
    text-shadow:
        0 0 12px rgba(255, 85, 95, .30),
        0 0 26px rgba(255, 55, 75, .14);
}

#liberationGenesisPanel .liberation-title-box p {
    color: rgba(255, 232, 235, .92);
}

#liberationGenesisPanel .genesis-card,
#liberationGenesisPanel .genesis-mini-card,
#liberationGenesisPanel .genesis-config-card,
#liberationGenesisPanel .genesis-boss-card,
#liberationGenesisPanel .genesis-timeline-card {
    background:
        linear-gradient(180deg, rgba(46, 7, 18, .98), rgba(18, 3, 10, .98));
    border: 1px solid rgba(255, 86, 106, .18);
    box-shadow:
        0 10px 26px rgba(0,0,0,.20),
        inset 0 0 14px rgba(255, 55, 88, .03);
    color: #ffe8eb;
}

#liberationGenesisPanel h3,
#liberationGenesisPanel h4,
#liberationGenesisPanel .genesis-card-title,
#liberationGenesisPanel .genesis-result-date,
#liberationGenesisPanel .genesis-big-date,
#liberationGenesisPanel .genesis-progress-label,
#liberationGenesisPanel .genesis-progress-text,
#liberationGenesisPanel .genesis-boss-name,
#liberationGenesisPanel .genesis-summary-row strong,
#liberationGenesisPanel .genesis-stat-row strong,
#liberationGenesisPanel .genesis-stage-row strong {
    color: #fff2ef;
}

#liberationGenesisPanel p,
#liberationGenesisPanel span,
#liberationGenesisPanel label,
#liberationGenesisPanel .genesis-result-text,
#liberationGenesisPanel .genesis-card-subtitle,
#liberationGenesisPanel .genesis-boss-sub,
#liberationGenesisPanel .genesis-weekly-note,
#liberationGenesisPanel .genesis-summary-row,
#liberationGenesisPanel .genesis-stat-row {
    color: rgba(255, 232, 235, .90);
}

#liberationGenesisPanel .genesis-summary-row,
#liberationGenesisPanel .genesis-stat-row {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

#liberationGenesisPanel .genesis-summary-panel {
    background: linear-gradient(180deg, rgba(35, 6, 14, .96), rgba(16, 4, 10, .96));
    border: 1px solid rgba(255, 95, 110, .18);
    color: #ffe8eb;
}

#liberationGenesisPanel .genesis-summary-panel h5 {
    color: #ffb6bd;
}

#liberationGenesisPanel input,
#liberationGenesisPanel select,
#liberationGenesisPanel .genesis-boss-controls select {
    background: rgba(15, 2, 7, .98);
    color: #fff0f3;
    border: 1px solid rgba(255, 90, 110, .26);
}

#liberationGenesisPanel input:focus,
#liberationGenesisPanel select:focus {
    border-color: rgba(255, 100, 120, .65);
    box-shadow: 0 0 0 3px rgba(255, 70, 90, .14);
}

#liberationGenesisPanel .genesis-apply-btn,
#liberationGenesisPanel .genesis-reset-btn {
    background: linear-gradient(135deg, #c41b3a, #ff5570);
    color: white;
    box-shadow:
        0 10px 22px rgba(255, 70, 95, .28),
        0 0 18px rgba(255, 70, 95, .16);
}

#liberationGenesisPanel .genesis-progress-bar {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255, 92, 112, .16);
}

#liberationGenesisPanel .genesis-progress-fill {
    background: linear-gradient(90deg, #4f0517, #b21437, #ff536e, #ffcfb3);
    box-shadow: 0 0 16px rgba(255, 70, 95, .28);
}

#liberationGenesisPanel .genesis-toolbar-badge,
#liberationGenesisPanel .genesis-selected-pill {
    background: linear-gradient(135deg, rgba(50, 8, 18, .98), rgba(22, 4, 10, .98));
    color: #ffd9dd;
    border: 1px solid rgba(255, 95, 115, .32);
    box-shadow: 0 0 14px rgba(255, 70, 95, .12);
}

#liberationGenesisPanel .genesis-stage-row {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255, 95, 112, .14);
}

#liberationGenesisPanel .genesis-stage-row.is-current {
    background: linear-gradient(135deg, rgba(255, 88, 110, .18), rgba(255, 180, 124, .08));
    border-color: rgba(255, 100, 120, .36);
    box-shadow: 0 0 16px rgba(255, 80, 100, .10);
}

#liberationGenesisPanel .genesis-stage-row.is-complete {
    background: linear-gradient(135deg, rgba(255, 84, 106, .24), rgba(255, 190, 134, .12));
    border-color: rgba(255, 128, 142, .34);
}

#liberationGenesisPanel .genesis-boss-card:hover {
    box-shadow:
        0 18px 34px rgba(0,0,0,.30),
        0 0 24px rgba(255, 75, 95, .12);
}

#liberationGenesisPanel .genesis-boss-avatar {
    border: 1px solid rgba(255, 100, 100, .34);
    box-shadow: 0 0 16px rgba(255, 65, 65, .22);
}

#liberationGenesisPanel .genesis-boss-points {
    color: #ff98a4;
}

#liberationGenesisPanel .genesis-cleared-slider {
    background: rgba(255,255,255,.14);
}

#liberationGenesisPanel .genesis-cleared-toggle input:checked + .genesis-cleared-slider {
    background: linear-gradient(90deg, #ff5c5c, #ffb087);
    box-shadow: 0 0 18px rgba(255, 80, 96, .28);
}

#liberationGenesisPanel .genesis-boss-card.is-cleared {
    border-color: rgba(255, 118, 130, .46);
    box-shadow:
        0 0 0 1px rgba(255, 102, 120, .18),
        0 0 26px rgba(255, 56, 84, .18),
        0 0 46px rgba(255, 56, 84, .10),
        inset 0 0 28px rgba(255, 40, 72, .07);
}

#liberationGenesisPanel .genesis-boss-card.is-cleared::before {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: 0;
    border-radius: 30px;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(255, 42, 72, .24), transparent 42%),
        radial-gradient(circle at center, rgba(255, 116, 76, .16), transparent 60%);
    filter: blur(12px);
    animation: genesisAuraPulse 2.2s ease-in-out infinite;
}

#liberationGenesisPanel .genesis-boss-card.is-cleared::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 26px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 120, 120, .13), transparent 8%),
        radial-gradient(circle at 80% 16%, rgba(255, 80, 80, .15), transparent 9%),
        radial-gradient(circle at 30% 80%, rgba(255, 145, 90, .10), transparent 8%),
        radial-gradient(circle at 72% 72%, rgba(255, 90, 120, .11), transparent 10%);
    animation: genesisSparkle 2.8s linear infinite;
}

#liberationGenesisPanel .genesis-timeline-row {
    background: linear-gradient(180deg, rgba(42, 7, 16, .98), rgba(18, 3, 10, .98));
    border: 1px solid rgba(255, 95, 112, .18);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

#liberationGenesisPanel .genesis-timeline-row strong {
    color: #ffb8c0;
}

#liberationGenesisPanel .genesis-timeline-row span {
    color: #ffd6d9;
}

#liberationGenesisPanel .genesis-timeline-row em {
    color: #ff9aa8;
}

/* =========================================================
   TEMA DESTINY
========================================================= */
#destinyTabBtn.active {
    background: linear-gradient(135deg, #ffffff, #dff4ff);
    color: #2363f2;
    border-color: rgba(255, 213, 78, .75);
    box-shadow:
        0 0 0 2px rgba(255, 213, 78, .20),
        0 0 20px rgba(90, 180, 255, .22);
}

#liberationDestinyPanel {
    background:
        radial-gradient(circle at 10% 0%, rgba(126, 206, 255, .22), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(255, 217, 112, .18), transparent 28%),
        linear-gradient(180deg, #fdfefe 0%, #f0f8ff 44%, #eaf5ff 100%);
    border: 2px solid rgba(115, 194, 255, .26);
    box-shadow:
        0 22px 58px rgba(80, 150, 220, .12),
        inset 0 0 60px rgba(115, 194, 255, .10);
    color: #1d4378;
}

#liberationDestinyPanel .liberation-title-box {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,248,255,.98));
    border-bottom: 1px solid rgba(122, 198, 255, .28);
    box-shadow:
        0 0 18px rgba(111, 190, 255, .12),
        inset 0 0 14px rgba(255, 223, 118, .08);
}

#liberationDestinyPanel .liberation-title-box h3 {
    color: #2d69f3;
    text-shadow:
        0 0 14px rgba(88, 170, 255, .18),
        0 0 18px rgba(255, 220, 115, .12);
}

#liberationDestinyPanel .liberation-title-box p {
    color: rgba(25, 58, 118, .88);
}

#liberationDestinyPanel .genesis-card,
#liberationDestinyPanel .genesis-mini-card,
#liberationDestinyPanel .genesis-config-card,
#liberationDestinyPanel .genesis-boss-card,
#liberationDestinyPanel .genesis-timeline-card {
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(241,248,255,.98));
    border: 1px solid rgba(114, 192, 255, .24);
    box-shadow:
        0 10px 24px rgba(95, 160, 225, .10),
        inset 0 0 14px rgba(255, 220, 118, .06);
    color: #1d4378;
}

#liberationDestinyPanel h3,
#liberationDestinyPanel h4,
#liberationDestinyPanel .genesis-card-title,
#liberationDestinyPanel .genesis-result-date,
#liberationDestinyPanel .genesis-big-date,
#liberationDestinyPanel .genesis-progress-label,
#liberationDestinyPanel .genesis-progress-text,
#liberationDestinyPanel .genesis-boss-name,
#liberationDestinyPanel .genesis-summary-row strong,
#liberationDestinyPanel .genesis-stat-row strong,
#liberationDestinyPanel .genesis-stage-row strong {
    color: #2363f2;
}

#liberationDestinyPanel p,
#liberationDestinyPanel span,
#liberationDestinyPanel label,
#liberationDestinyPanel .genesis-result-text,
#liberationDestinyPanel .genesis-card-subtitle,
#liberationDestinyPanel .genesis-boss-sub,
#liberationDestinyPanel .genesis-weekly-note,
#liberationDestinyPanel .genesis-summary-row,
#liberationDestinyPanel .genesis-stat-row {
    color: rgba(28, 64, 120, .90);
}

#liberationDestinyPanel .genesis-summary-row,
#liberationDestinyPanel .genesis-stat-row {
    border-bottom: 1px solid rgba(80, 150, 230, .12);
}

#liberationDestinyPanel .genesis-summary-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(235,246,255,.98));
    border: 1px solid rgba(115, 192, 255, .24);
    color: #1d4378;
}

#liberationDestinyPanel .genesis-summary-panel h5 {
    color: #2363f2;
}

#liberationDestinyPanel input,
#liberationDestinyPanel select,
#liberationDestinyPanel .genesis-boss-controls select {
    background: rgba(255,255,255,.98);
    color: #1d4378;
    border: 1px solid rgba(115, 192, 255, .30);
}

#liberationDestinyPanel input:focus,
#liberationDestinyPanel select:focus {
    border-color: rgba(75, 160, 255, .70);
    box-shadow:
        0 0 0 3px rgba(85, 170, 255, .15),
        0 0 14px rgba(255, 220, 118, .10);
}

#liberationDestinyPanel .genesis-apply-btn,
#liberationDestinyPanel .genesis-reset-btn {
    background: linear-gradient(135deg, #5dc7ff, #346dff);
    color: white;
    box-shadow:
        0 10px 22px rgba(82, 168, 255, .24),
        0 0 18px rgba(255, 221, 122, .12);
}

#liberationDestinyPanel .genesis-progress-bar {
    background: rgba(124, 190, 255, .16);
    border: 1px solid rgba(114, 192, 255, .22);
}

#liberationDestinyPanel .genesis-progress-fill {
    background: linear-gradient(90deg, #2b78ff, #6ad6ff, #ffe17d);
    box-shadow: 0 0 16px rgba(88, 178, 255, .20);
}

#liberationDestinyPanel .genesis-toolbar-badge,
#liberationDestinyPanel .genesis-selected-pill {
    background: linear-gradient(135deg, #ffffff, #eef8ff);
    color: #2a68f2;
    border: 1px solid rgba(114, 192, 255, .24);
    box-shadow: 0 8px 18px rgba(80, 160, 230, .12);
}

#liberationDestinyPanel .genesis-stage-row {
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(114, 192, 255, .22);
}

#liberationDestinyPanel .genesis-stage-row.is-current {
    background: linear-gradient(135deg, rgba(191, 232, 255, .62), rgba(255, 233, 161, .18));
    border-color: rgba(115, 192, 255, .34);
}

#liberationDestinyPanel .genesis-stage-row.is-complete {
    background: linear-gradient(135deg, rgba(190, 232, 255, .80), rgba(255, 225, 130, .28));
    border-color: rgba(255, 213, 94, .32);
}

#liberationDestinyPanel .genesis-boss-card:hover {
    box-shadow:
        0 18px 34px rgba(75, 145, 220, .14),
        0 0 22px rgba(255, 218, 115, .14);
}

#liberationDestinyPanel .genesis-boss-avatar {
    border: 1px solid rgba(100, 190, 255, .36);
    box-shadow:
        0 0 16px rgba(95, 190, 255, .20),
        0 0 14px rgba(255, 220, 118, .10);
}

#liberationDestinyPanel .genesis-boss-points {
    color: #2363f2;
}

#liberationDestinyPanel .genesis-cleared-slider {
    background: rgba(90, 140, 200, .16);
}

#liberationDestinyPanel .genesis-cleared-toggle input:checked + .genesis-cleared-slider {
    background: linear-gradient(90deg, #67d7ff, #ffd876);
    box-shadow: 0 0 18px rgba(101, 205, 255, .22);
}

#liberationDestinyPanel .genesis-boss-card.is-cleared {
    border-color: rgba(113, 194, 255, .44);
    box-shadow:
        0 0 0 1px rgba(113, 194, 255, .18),
        0 0 24px rgba(95, 190, 255, .16),
        0 0 44px rgba(255, 221, 110, .10),
        inset 0 0 24px rgba(94, 190, 255, .06);
}

#liberationDestinyPanel .genesis-boss-card.is-cleared::before {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: 0;
    border-radius: 30px;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(82, 198, 255, .20), transparent 45%),
        radial-gradient(circle at center, rgba(255, 219, 111, .15), transparent 60%);
    filter: blur(14px);
    animation: destinyAuraPulse 2.2s ease-in-out infinite;
}

#liberationDestinyPanel .genesis-boss-card.is-cleared::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 18%, rgba(116, 210, 255, .15), transparent 9%),
        radial-gradient(circle at 80% 18%, rgba(255, 222, 117, .16), transparent 8%),
        radial-gradient(circle at 35% 82%, rgba(140, 216, 255, .13), transparent 9%),
        radial-gradient(circle at 72% 70%, rgba(255, 227, 140, .12), transparent 10%);
    animation: destinySparkle 3s linear infinite;
}

#liberationDestinyPanel .genesis-timeline-row {
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1px solid rgba(120, 196, 255, .24);
    box-shadow: 0 8px 18px rgba(92, 155, 220, .08);
}

#liberationDestinyPanel .genesis-timeline-row strong {
    color: #2a69f2;
}

#liberationDestinyPanel .genesis-timeline-row span {
    color: #5b62bd;
}

#liberationDestinyPanel .genesis-timeline-row em {
    color: #5a79a8;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1280px) {
    .calc-page {
        width: min(98vw, 1500px);
        padding: 28px 22px;
    }

    .genesis-layout {
        grid-template-columns: minmax(270px, 310px) minmax(0, 1fr);
        padding: 0 14px;
    }

    .genesis-boss-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 1100px) {
    .genesis-layout {
        grid-template-columns: 1fr;
    }

    .genesis-left-column {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .genesis-boss-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .calc-page {
        width: 94vw;
        padding: 22px 14px;
        margin-top: 38px;
    }

    .genesis-layout {
        padding: 0 8px;
    }

    .genesis-left-column {
        display: flex;
    }

    .genesis-config-grid,
    .genesis-boss-controls,
    .genesis-timeline-row {
        grid-template-columns: 1fr;
    }

    .genesis-card-title-row,
    .genesis-boss-toolbar {
        grid-template-columns: 1fr;
        display: grid;
    }

    .genesis-toolbar-badge,
    .genesis-selected-pill {
        justify-self: center;
    }

    .genesis-timeline-row strong,
    .genesis-timeline-row span,
    .genesis-timeline-row em {
        text-align: left;
    }
}

/* =========================================================
   ANIMACIONES
========================================================= */
@keyframes themePanelEnterSoft {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes genesisAuraPulse {
    0%, 100% {
        opacity: .68;
        transform: scale(.985);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes destinyAuraPulse {
    0%, 100% {
        opacity: .66;
        transform: scale(.985);
    }
    50% {
        opacity: 1;
        transform: scale(1.025);
    }
}

@keyframes genesisSparkle {
    0% { opacity: .50; transform: translateY(0); }
    50% { opacity: .95; transform: translateY(-2px); }
    100% { opacity: .55; transform: translateY(0); }
}

@keyframes destinySparkle {
    0% { opacity: .52; transform: translateY(0); }
    50% { opacity: .96; transform: translateY(-2px); }
    100% { opacity: .58; transform: translateY(0); }
}

/* =========================================================
   CALCULADORA ASTRA SECUNDARIA V2
   Paleta Astra: dorado, cyan, azul, oscuro elegante
========================================================= */

.calc-page.theme-astra-active {
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 225, 122, .16), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(88, 230, 255, .16), transparent 32%),
        linear-gradient(180deg, rgba(240, 251, 255, .96), rgba(232, 247, 252, .94));
}

.astra-liberation-panel {
    --astra-bg-1: #07161d;
    --astra-bg-2: #102830;
    --astra-card: rgba(255, 255, 255, .085);
    --astra-card-2: rgba(255, 255, 255, .13);
    --astra-line: rgba(135, 237, 255, .28);
    --astra-line-strong: rgba(135, 237, 255, .58);
    --astra-gold: #fff173;
    --astra-gold-2: #ffcf5a;
    --astra-cyan: #58efff;
    --astra-blue: #47a8ff;
    --astra-white: #f7fdff;
    --astra-muted: rgba(235, 250, 255, .72);

    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 227, 120, .13), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(87, 238, 255, .14), transparent 32%),
        linear-gradient(180deg, var(--astra-bg-2), var(--astra-bg-1));
    border: 1px solid rgba(100, 230, 255, .28);
    box-shadow:
        0 24px 60px rgba(0, 20, 34, .22),
        inset 0 0 45px rgba(255, 255, 255, .035);
}

.astra-liberation-panel * {
    box-sizing: border-box;
}

/* ==============================
   HERO
============================== */

.astra-hero-v2 {
    position: relative;
    isolation: isolate;
    padding: 54px 34px 46px;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(135, 237, 255, .26);
    background:
        linear-gradient(135deg, rgba(255, 221, 102, .06), transparent 28%),
        radial-gradient(circle at 50% -20%, rgba(91, 255, 223, .18), transparent 42%);
}

.astra-hero-glow {
    position: absolute;
    inset: -80px;
    z-index: -1;
    background:
        conic-gradient(
            from 120deg,
            rgba(255, 225, 115, .22),
            rgba(80, 238, 255, .16),
            rgba(71, 168, 255, .12),
            rgba(255, 225, 115, .22)
        );
    filter: blur(45px);
    opacity: .72;
    animation: astraHeroFloat 8s ease-in-out infinite alternate;
}

@keyframes astraHeroFloat {
    from {
        transform: translate3d(-2%, -2%, 0) rotate(-3deg);
    }

    to {
        transform: translate3d(2%, 2%, 0) rotate(3deg);
    }
}

.astra-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 8px 18px;
    border-radius: 999px;
    color: var(--astra-gold);
    font-family: "Object Sans Lorien", sans-serif;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 225, 115, .25);
    box-shadow: 0 0 18px rgba(255, 225, 115, .12);
}

.astra-hero-v2 h2 {
    margin: 0;
    color: var(--astra-white);
    font-family: "Heavitas", sans-serif;
    font-size: clamp(34px, 4.6vw, 64px);
    letter-spacing: 1px;
    text-shadow:
        0 0 12px rgba(93, 255, 214, .45),
        0 0 30px rgba(87, 238, 255, .18);
}

.astra-hero-v2 p {
    width: min(860px, 94%);
    margin: 18px auto 0;
    color: var(--astra-muted);
    font-family: "Object Sans Lorien", sans-serif;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 800;
}

/* Texto del hero en dos líneas */
.astra-hero-copy {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(860px, 94%) !important;
    margin: 18px auto 0 !important;
    text-align: center;
}

.astra-hero-copy-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    text-align: center;
}

.astra-hero-copy-resources {
    gap: 12px;
}

.astra-hero-copy-separator {
    color: var(--astra-muted);
    font-weight: 900;
}

.astra-inline-resource {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--astra-white);
    font-weight: 900;
    white-space: nowrap;
}

.astra-inline-resource img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 7px rgba(88, 239, 255, .48))
        drop-shadow(0 0 10px rgba(255, 225, 115, .22));
}

/* ==============================
   BASE LAYOUT
============================== */

.astra-main-v2 {
    padding: 24px;
}

.astra-status-panel,
.astra-box-v2,
.astra-progress-card,
.astra-final-card {
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .055));
    border: 1px solid var(--astra-line);
    box-shadow:
        inset 0 0 22px rgba(255, 255, 255, .035),
        0 14px 30px rgba(0, 0, 0, .12);
}

.astra-status-panel {
    padding: 24px;
    margin-bottom: 24px;
}

.astra-section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.astra-section-title-row h3,
.astra-progress-card h3,
.astra-final-card h3 {
    margin: 0;
    color: var(--astra-white);
    font-family: "Heavitas", sans-serif;
    letter-spacing: .5px;
    font-size: 24px;
    text-shadow: 0 0 12px rgba(88, 239, 255, .16);
}

.astra-section-title-row p {
    margin: 7px 0 0;
    color: var(--astra-muted);
    font-family: "Object Sans Lorien", sans-serif;
    line-height: 1.45;
    font-weight: 700;
}

.astra-reset-btn {
    min-width: 102px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    color: #08222a;
    font-weight: 1000;
    font-family: "Object Sans Lorien", sans-serif;
    cursor: pointer;
    background: linear-gradient(135deg, var(--astra-cyan), var(--astra-gold));
    box-shadow:
        0 0 18px rgba(88, 239, 255, .18),
        0 8px 18px rgba(0, 0, 0, .20);
    transition: transform .2s ease, filter .2s ease;
}

.astra-reset-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

/* ==============================
   ESTADO ACTUAL
============================== */

.astra-mission-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.astra-mission-card {
    min-height: 80px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--astra-white);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.astra-mission-card:hover {
    transform: translateY(-2px);
    border-color: rgba(88, 239, 255, .45);
}

.astra-mission-card.is-current {
    border-color: rgba(255, 225, 115, .72);
    box-shadow:
        0 0 18px rgba(255, 225, 115, .16),
        inset 0 0 20px rgba(255, 225, 115, .06);
}

.astra-mission-card.is-complete {
    border-color: rgba(88, 239, 255, .48);
    background: rgba(88, 239, 255, .10);
}

.astra-mission-number {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--astra-gold), var(--astra-cyan));
    color: #07212a;
    font-weight: 1000;
}

.astra-mission-card strong {
    display: block;
    font-family: "Object Sans Lorien", sans-serif;
    font-weight: 1000;
    font-size: 16px;
}

.astra-mission-card small {
    display: block;
    margin-top: 3px;
    color: var(--astra-muted);
    font-weight: 800;
}

.astra-mission-card em {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--astra-gold);
    font-style: normal;
    font-weight: 1000;
    white-space: nowrap;
}

.astra-mission-card em img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.astra-current-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.astra-current-card {
    display: block;
    padding: 18px;
    border-radius: 18px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .16);
}

.astra-current-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--astra-white);
    font-weight: 1000;
}

.astra-current-card-head img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.astra-calendar-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 225, 115, .13);
}

.astra-current-card small {
    display: block;
    margin: 6px 0 12px;
    color: var(--astra-muted);
    font-size: 12px;
    font-weight: 800;
}

.astra-current-card input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    outline: none;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .34);
    color: var(--astra-white);
    font-family: "Object Sans Lorien", sans-serif;
    font-weight: 1000;
    text-align: center;
}

.astra-mini-bar {
    height: 7px;
    margin-top: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, .35);
}

.astra-mini-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--astra-cyan), var(--astra-gold));
    transition: width .25s ease;
}

/* ==============================
   MAIN GRID
============================== */

.astra-layout-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr);
    gap: 24px;
    align-items: start;
}

.astra-left-column,
.astra-right-column {
    display: grid;
    gap: 24px;
}

.astra-box-v2,
.astra-progress-card,
.astra-final-card {
    padding: 22px;
}

/* ==============================
   DAILY QUEST
============================== */

.astra-daily-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(150px, .6fr) minmax(260px, .8fr);
    gap: 14px;
    align-items: end;
}

.astra-daily-grid label,
.astra-boss-controls-v2 label {
    display: grid;
    gap: 7px;
    color: var(--astra-muted);
    font-family: "Object Sans Lorien", sans-serif;
    font-weight: 900;
    font-size: 13px;
}

.astra-daily-grid select,
.astra-boss-controls-v2 select,
.astra-boss-controls-v2 input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    outline: none;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .36);
    color: var(--astra-white);
    font-family: "Object Sans Lorien", sans-serif;
    font-weight: 900;
}

.astra-daily-grid select:focus,
.astra-boss-controls-v2 select:focus,
.astra-boss-controls-v2 input:focus {
    border-color: rgba(88, 239, 255, .68);
    box-shadow: 0 0 0 3px rgba(88, 239, 255, .12);
}

.astra-daily-result {
    min-height: 72px;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 225, 115, .10);
    border: 1px solid rgba(255, 225, 115, .22);
}

.astra-daily-result img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.astra-daily-result-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.astra-daily-result-copy span,
.astra-daily-result span {
    color: var(--astra-muted);
    font-weight: 900;
    line-height: 1.2;
}

.astra-daily-result-copy strong,
.astra-daily-result strong {
    color: var(--astra-gold);
    white-space: nowrap;
    font-weight: 1000;
}

/* ==============================
   DAILY QUEST RESULT FIX
============================== */

.astra-daily-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(130px, .45fr) minmax(310px, .85fr);
    gap: 14px;
    align-items: end;
}

.astra-daily-result {
    min-height: 72px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 225, 115, .10);
    border: 1px solid rgba(255, 225, 115, .22);
    overflow: hidden;
}

.astra-daily-result img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
}

.astra-daily-result-copy {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.astra-daily-result-copy span,
.astra-daily-result span {
    color: var(--astra-muted);
    font-weight: 900;
    line-height: 1.15;
    font-size: 14px;
    text-wrap: balance;
}

.astra-daily-result-copy strong,
.astra-daily-result strong {
    color: var(--astra-gold);
    white-space: nowrap;
    font-weight: 1000;
    font-size: 15px;
    line-height: 1;
}

/* ==============================
   BOSS CONFIGURATION
============================== */

.astra-boss-grid-v2 {
    display: grid;
    gap: 14px;
}

.astra-boss-card-v2 {
    padding: 16px;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .045));
    border: 1px solid rgba(255, 255, 255, .16);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.astra-boss-card-v2:hover {
    transform: translateY(-2px);
    border-color: rgba(88, 239, 255, .42);
}

.astra-boss-card-v2.is-active {
    border-color: rgba(255, 225, 115, .40);
    box-shadow:
        0 0 18px rgba(255, 225, 115, .09),
        inset 0 0 22px rgba(88, 239, 255, .035);
}

.astra-boss-card-v2.is-cleared-week {
    opacity: .72;
}

.astra-boss-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.astra-boss-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.astra-boss-avatar-v2 {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    object-fit: cover;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(88, 239, 255, .30);
    box-shadow: 0 0 12px rgba(88, 239, 255, .13);
}

.astra-boss-name-row h4 {
    margin: 0 0 4px;
    color: var(--astra-white);
    font-family: "Object Sans Lorien", sans-serif;
    font-weight: 1000;
    font-size: 18px;
}

.astra-boss-name-row p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    color: var(--astra-cyan);
    font-size: 13px;
    font-weight: 1000;
}

.astra-boss-name-row p img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.astra-cleared-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--astra-muted);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

.astra-cleared-toggle input {
    display: none;
}

.astra-cleared-toggle i {
    width: 42px;
    height: 22px;
    position: relative;
    display: inline-block;
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    border: 1px solid rgba(255, 255, 255, .20);
}

.astra-cleared-toggle i::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: white;
    transition: transform .2s ease, background .2s ease;
}

.astra-cleared-toggle input:checked + i {
    background: rgba(255, 225, 115, .22);
    border-color: rgba(255, 225, 115, .55);
}

.astra-cleared-toggle input:checked + i::before {
    transform: translateX(19px);
    background: var(--astra-gold);
}

.astra-boss-controls-v2 {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(110px, .45fr) minmax(170px, .65fr);
    gap: 12px;
    align-items: end;
}

.astra-fragment-row.is-hidden {
    display: none;
}

.astra-fragment-input-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.astra-fragment-input-wrap small {
    color: var(--astra-white);
    font-weight: 1000;
    opacity: .9;
}

.astra-boss-mini-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .28);
    color: var(--astra-muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
}

.astra-boss-mini-summary span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.astra-boss-mini-summary img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 16px;
    vertical-align: middle;
}

.astra-boss-mini-summary strong {
    color: var(--astra-gold);
}

/* ==============================
   RIGHT COLUMN
============================== */

.astra-progress-resource-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.astra-progress-resource-list div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .13);
}

.astra-progress-resource-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--astra-muted);
    font-weight: 900;
}

.astra-progress-resource-list img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.astra-progress-resource-list strong {
    color: var(--astra-gold);
    font-size: 18px;
    font-weight: 1000;
}

/* ==============================
   TIMELINE
============================== */

.astra-timeline-v2 {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.astra-timeline-card {
    padding: 15px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .23);
    border: 1px solid rgba(255, 255, 255, .16);
}

.astra-timeline-card.is-current {
    border-color: rgba(135, 237, 255, .70);
    box-shadow: 0 0 16px rgba(88, 239, 255, .12);
}

.astra-timeline-card.is-complete {
    border-color: rgba(88, 255, 170, .38);
}

.astra-timeline-card.is-locked {
    opacity: .78;
}

.astra-timeline-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.astra-timeline-head > span {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 225, 115, .13);
    color: var(--astra-gold);
    font-weight: 1000;
    font-size: 18px;
}

.astra-timeline-head strong {
    display: block;
    color: var(--astra-white);
    font-weight: 1000;
}

.astra-timeline-head small {
    color: var(--astra-muted);
    font-weight: 800;
}

.astra-timeline-data {
    display: grid;
    gap: 7px;
}

.astra-timeline-data p,
.astra-timeline-card p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--astra-muted);
    font-size: 13px;
    font-weight: 900;
}

.astra-timeline-data img,
.astra-timeline-card p img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.astra-timeline-data strong {
    margin-left: auto;
    color: var(--astra-white);
    text-align: right;
}

.astra-timeline-card em {
    display: block;
    color: var(--astra-gold);
    font-style: normal;
    font-weight: 1000;
}

/* ==============================
   FINAL COMPLETION
============================== */

.astra-final-card {
    border-color: rgba(255, 225, 115, .38);
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 225, 115, .11), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
}

.astra-final-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: var(--astra-muted);
    font-weight: 900;
}

.astra-final-row strong {
    color: var(--astra-gold);
    text-align: right;
}

.astra-final-card p {
    margin: 12px 0 0;
    color: var(--astra-muted);
    font-weight: 800;
    line-height: 1.45;
}

/* ==============================
   WEEKLY BREAKDOWN
============================== */

.astra-breakdown-section {
    margin-top: 24px;
}

.astra-selected-count {
    color: var(--astra-gold);
    font-family: "Object Sans Lorien", sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.astra-weekly-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.astra-breakdown-card {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .17);
    transition: transform .2s ease, border-color .2s ease;
}

.astra-breakdown-card:hover {
    transform: translateY(-2px);
    border-color: rgba(88, 239, 255, .42);
}

.astra-breakdown-card.is-cleared-week {
    opacity: .68;
}

.astra-breakdown-card > img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
}

.astra-breakdown-card strong {
    display: block;
    color: var(--astra-white);
    font-size: 13px;
    font-weight: 1000;
}

.astra-breakdown-card small {
    display: block;
    margin-top: 2px;
    color: var(--astra-muted);
    font-size: 11px;
    font-weight: 800;
}

.astra-breakdown-values {
    display: grid;
    gap: 4px;
    justify-items: end;
    color: var(--astra-gold);
    font-size: 12px;
    font-weight: 1000;
}

.astra-breakdown-values span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.astra-breakdown-values img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.astra-breakdown-empty {
    grid-column: 1 / -1;
    padding: 18px;
    border-radius: 16px;
    color: var(--astra-muted);
    text-align: center;
    background: rgba(0, 0, 0, .20);
    border: 1px dashed rgba(255, 255, 255, .18);
}

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

@media (max-width: 1280px) {
    .astra-layout-v2 {
        grid-template-columns: minmax(0, 1.25fr) minmax(330px, .85fr);
    }

    .astra-daily-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(130px, .45fr) minmax(230px, .75fr);
    }

    .astra-weekly-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .astra-layout-v2 {
        grid-template-columns: 1fr;
    }

    .astra-right-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .astra-final-card {
        grid-column: 1 / -1;
    }

    .astra-weekly-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .astra-liberation-panel {
        border-radius: 24px;
    }

    .astra-hero-v2 {
        padding: 44px 22px 38px;
    }

    .astra-hero-v2 h2 {
        font-size: clamp(31px, 6vw, 50px);
        line-height: 1.08;
    }

    .astra-hero-copy {
        font-size: 15px !important;
    }

    .astra-main-v2 {
        padding: 18px;
    }

    .astra-status-panel,
    .astra-box-v2,
    .astra-progress-card,
    .astra-final-card {
        border-radius: 20px;
    }

    .astra-mission-track,
    .astra-current-grid,
    .astra-daily-grid {
        grid-template-columns: 1fr;
    }

    .astra-mission-card {
        grid-template-columns: auto 1fr;
    }

    .astra-mission-card em {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 46px;
    }

    .astra-boss-controls-v2 {
        grid-template-columns: minmax(0, 1fr) minmax(110px, .35fr);
    }

    .astra-fragment-row {
        grid-column: 1 / -1;
    }

    .astra-daily-result-copy {
        flex-direction: row;
        align-items: center;
    }

    .astra-right-column {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 780px) {
    .astra-liberation-panel {
        width: 100%;
        border-radius: 20px;
    }

    .astra-main-v2 {
        padding: 16px;
    }

    .astra-hero-v2 {
        padding: 38px 18px 34px;
    }

    .astra-kicker {
        font-size: 12px;
        padding: 7px 14px;
    }

    .astra-hero-v2 h2 {
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1.08;
        word-break: normal;
    }

    .astra-hero-copy {
        gap: 8px;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .astra-hero-copy-line {
        gap: 8px;
    }

    .astra-inline-resource img {
        width: 22px;
        height: 22px;
    }

    .astra-mission-track,
    .astra-current-grid,
    .astra-daily-grid,
    .astra-boss-controls-v2,
    .astra-weekly-breakdown {
        grid-template-columns: 1fr;
    }

    .astra-section-title-row,
    .astra-boss-main-row {
        flex-direction: column;
        align-items: stretch;
    }

    .astra-section-title-row h3,
    .astra-progress-card h3,
    .astra-final-card h3 {
        font-size: 21px;
        text-align: center;
    }

    .astra-section-title-row p {
        text-align: center;
        font-size: 13px;
    }

    .astra-reset-btn {
        width: 100%;
        height: 44px;
    }

    .astra-cleared-toggle {
        justify-content: space-between;
        width: 100%;
    }

    .astra-boss-name-row {
        align-items: center;
    }

    .astra-boss-name-row h4 {
        font-size: 17px;
    }

    .astra-boss-name-row p {
        font-size: 12px;
    }

    .astra-boss-controls-v2 {
        gap: 10px;
    }

    .astra-fragment-row {
        grid-column: auto;
    }

    .astra-boss-mini-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

    .astra-daily-result {
        min-height: auto;
        grid-template-columns: 30px 1fr;
    }

    .astra-daily-result-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .astra-progress-resource-list div {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .astra-progress-resource-list span {
        justify-content: center;
    }

    .astra-timeline-data p,
    .astra-timeline-card p {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .astra-timeline-data strong {
        margin-left: 0;
        width: 100%;
        text-align: left;
    }

    .astra-final-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .astra-final-row strong {
        text-align: center;
    }

    .astra-breakdown-card {
        grid-template-columns: 38px 1fr;
    }

    .astra-breakdown-values {
        grid-column: 1 / -1;
        justify-items: start;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .astra-main-v2 {
        padding: 12px;
    }

    .astra-status-panel,
    .astra-box-v2,
    .astra-progress-card,
    .astra-final-card {
        padding: 16px;
        border-radius: 18px;
    }

    .astra-hero-v2 {
        padding: 32px 14px 28px;
    }

    .astra-hero-v2 h2 {
        font-size: clamp(25px, 9vw, 36px);
    }

    .astra-hero-copy-resources {
        flex-direction: column;
        gap: 6px;
    }

    .astra-hero-copy-separator {
        line-height: 1;
    }

    .astra-mission-card {
        padding: 13px;
        min-height: auto;
    }

    .astra-mission-card em {
        padding-left: 0;
    }

    .astra-current-card {
        padding: 15px;
    }

    .astra-boss-card-v2 {
        padding: 14px;
    }

    .astra-boss-name-row {
        gap: 10px;
    }

    .astra-boss-avatar-v2 {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .astra-daily-grid select,
    .astra-boss-controls-v2 select,
    .astra-boss-controls-v2 input,
    .astra-current-card input {
        min-height: 42px;
        font-size: 13px;
    }

    .astra-selected-count {
        text-align: center;
        white-space: normal;
    }
}

/* Tablet */
@media (max-width: 1280px) {
    .astra-daily-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(130px, .45fr) minmax(290px, .75fr);
    }
}

@media (max-width: 980px) {
    .astra-daily-grid {
        grid-template-columns: 1fr;
    }

    .astra-daily-result-copy {
        grid-template-columns: 1fr auto;
    }
}

/* Mobile */
@media (max-width: 780px) {
    .astra-daily-result {
        min-height: auto;
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .astra-daily-result-copy {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .astra-daily-result-copy span,
    .astra-daily-result span {
        text-align: left;
        font-size: 13px;
    }

    .astra-daily-result-copy strong,
    .astra-daily-result strong {
        font-size: 15px;
    }
}


/* =========================================================
   MIS PARTIES - PESTAÑA DE DÍA
========================================================= */

.profile-party-card {
    position: relative;
    padding-top: 34px;
    overflow: hidden;
}

.profile-party-card {
    position: relative;
    padding-top: 42px;
    overflow: hidden;
}

.profile-party-day-tab {
    position: absolute;
    top: 0;
    left: 22px;

    min-width: 230px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 18px;

    border-radius: 0 0 16px 16px;

    background: var(--party-day-bg, rgba(0, 191, 255, .14));
    border: 1px solid var(--party-day-border, rgba(0, 191, 255, .28));
    border-top: none;

    color: var(--party-day-text, #0077d9);

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .98rem;
    font-weight: 1000;
    letter-spacing: .4px;

    box-shadow:
        0 8px 18px rgba(0, 119, 217, .08),
        inset 0 1px 0 rgba(255,255,255,.55);
}

.profile-party-day-tab span,
.profile-party-day-tab strong {
    display: flex;
    align-items: center;

    height: 100%;
    line-height: 1;

    margin: 0;
    padding: 0;

    font: inherit;
    color: inherit;

    position: relative;
    top: 1px;
}

.profile-party-day-tab span {
    font-weight: 1000;
    letter-spacing: .5px;
}

.profile-party-day-tab strong {
    font-weight: 1000;
    font-size: .95rem;
}

.profile-party-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-top: 6px;
    margin-bottom: 14px;
}

.profile-party-header-row h4 {
    margin: 0;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.profile-party-header-row h4 span {
    min-width: 0;
}

.profile-party-members-count {
    flex-shrink: 0;

    padding: 7px 13px;

    border-radius: 999px;

    background: rgba(255,255,255,.72);
    border: 1px solid rgba(0,191,255,.24);

    color: #4d6b86;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .86rem;
    font-weight: 1000;
    letter-spacing: .4px;

    box-shadow:
        0 6px 14px rgba(0,119,217,.06),
        inset 0 1px 0 rgba(255,255,255,.65);
}

/* Día por color pastel */
.profile-party-card.party-day-lunes {
    --party-day-bg: rgba(123, 211, 255, .24);
    --party-day-border: rgba(0, 191, 255, .35);
    --party-day-text: #0077d9;
}

.profile-party-card.party-day-martes {
    --party-day-bg: rgba(205, 170, 255, .28);
    --party-day-border: rgba(151, 105, 255, .32);
    --party-day-text: #7353d8;
}

.profile-party-card.party-day-miercoles {
    --party-day-bg: rgba(255, 206, 150, .34);
    --party-day-border: rgba(255, 166, 82, .36);
    --party-day-text: #d8781d;
}

.profile-party-card.party-day-jueves {
    --party-day-bg: rgba(158, 236, 190, .30);
    --party-day-border: rgba(65, 201, 127, .34);
    --party-day-text: #159c64;
}

.profile-party-card.party-day-viernes {
    --party-day-bg: rgba(255, 183, 218, .32);
    --party-day-border: rgba(255, 105, 180, .36);
    --party-day-text: #d94b8f;
}

.profile-party-card.party-day-sabado {
    --party-day-bg: rgba(255, 232, 139, .38);
    --party-day-border: rgba(255, 205, 68, .42);
    --party-day-text: #b18400;
}

.profile-party-card.party-day-domingo {
    --party-day-bg: rgba(180, 235, 255, .32);
    --party-day-border: rgba(75, 205, 255, .38);
    --party-day-text: #0a8eb8;
}

.profile-party-card.party-day-default {
    --party-day-bg: rgba(0, 191, 255, .14);
    --party-day-border: rgba(0, 191, 255, .28);
    --party-day-text: #0077d9;
}

/* Ajuste del título para que no choque con la pestaña */
.profile-party-card h4 {
    margin-top: 10px;
}

/* Ya no necesitamos el párrafo de día/hora viejo */
.profile-party-card > p {
    display: none;
}

@media (max-width: 640px) {
    .profile-party-day-tab {
        left: 14px;
        max-width: calc(100% - 28px);
        gap: 6px;
        padding: 7px 10px;
    }

    .profile-party-day-tab strong,
    .profile-party-day-tab em {
        font-size: .76rem;
    }

    .profile-party-card {
        padding-top: 42px;
    }
}

.lorien-empty-filter-message {
    width: min(520px, 90%);
    margin: 35px auto 0;
    padding: 18px 24px;

    border-radius: 20px;

    background: rgba(255,255,255,.78);
    border: 2px dashed rgba(0,191,255,.35);

    color: #6b7d90;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 900;
    text-align: center;
    letter-spacing: .5px;
}

/* =========================================================
   LORIEN CLIPS - LIMPIO / RESPONSIVE
========================================================= */

.lorien-clips-section {
    position: relative;
    width: min(1500px, 92vw);
    margin: 85px auto 95px;
    padding: 58px 80px 64px;
    border-radius: 40px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #25c7ff 0%, #6a63ff 50%, #ff69b4 100%) border-box;
    border: 5px solid transparent;
    box-shadow:
        0 20px 45px rgba(71, 122, 175, .14),
        0 0 30px rgba(255, 105, 180, .08);
    overflow: visible;
}

.lorien-clips-header {
    position: relative;
    z-index: 5;
    text-align: center;
    margin-bottom: 34px;
}

.lorien-clips-kicker {
    display: block;
    margin: 0 0 10px;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 1000;
    letter-spacing: 1px;
    color: #ff62a8;
    text-transform: uppercase;
}

.lorien-clips-header h2 {
    margin: 0;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: clamp(3.3rem, 5vw, 5.4rem);
    line-height: 1;
    letter-spacing: 2px;
    color: #0d7be0;
    text-transform: uppercase;
}

.lorien-clips-header p {
    max-width: 850px;
    margin: 18px auto 0;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.45;
    color: #4b5f7d;
}

.lorien-clips-section::before,
.lorien-clips-section::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: clamp(100px, 10vw, 190px);
    height: clamp(145px, 11vw, 205px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    user-select: none;
    opacity: .96;
}

.lorien-clips-section::before {
    left: clamp(70px, 10vw, 170px);
    top: 50px;
    background-image: url("images/landing-page/imagen-clips.GIF");
}

.lorien-clips-section::after {
    right: clamp(70px, 10vw, 170px);
    top: 80px;
    background-image: url("images/landing-page/imagen-clips2.webp");
}

/* Flechas */
.lorien-clips-controls {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.lorien-clips-arrow {
    position: absolute;
    top: 280%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #71ddff, #12b9f2);
    color: #ffffff;
    font-size: 28px;
    font-weight: 1000;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    box-shadow:
        0 12px 24px rgba(35, 169, 232, .28),
        inset 0 1px 0 rgba(255, 255, 255, .45);
    transform: translateY(-50%);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.lorien-clips-arrow:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow:
        0 16px 30px rgba(35, 169, 232, .36),
        inset 0 1px 0 rgba(255, 255, 255, .55);
    filter: brightness(1.05);
}

.lorien-clips-prev,
.lorien-clips-arrow:first-child {
    left: -65px;
}

.lorien-clips-next,
.lorien-clips-arrow:last-child {
    right: -65px;
}

/* Slider */
.lorien-clips-slider-wrap {
    position: relative;
    z-index: 6;
    width: 100%;
    overflow: hidden;
    padding: 0 18px;
}

.lorien-clips-slider {
    position: relative;
    z-index: 6;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 56px) / 3);
    gap: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain;
    padding: 4px 0 14px;
    scrollbar-width: none;
}

.lorien-clips-slider::-webkit-scrollbar {
    display: none;
}

.lorien-clips-slider.lorien-clips-empty {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: visible !important;
    min-height: 385px !important;
}

.lorien-clips-slider.lorien-clips-empty .lorien-clip-add-card {
    width: min(360px, 88vw) !important;
    flex: 0 0 min(360px, 88vw) !important;
    min-height: 360px !important;
}

/* Cards */
.lorien-clip-card {
    position: relative;
    min-height: 520px;
    display: grid;
    grid-template-rows: 62% 38%;
    border-radius: 28px;
    border: 3px solid #8fdfff;
    background: linear-gradient(180deg, #ffffff, #f5fbff);
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: 0 12px 28px rgba(0, 119, 217, .08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lorien-clip-card:hover {
    transform: translateY(-4px);
    border-color: #56d4ff;
    box-shadow:
        0 18px 34px rgba(0, 119, 217, .14),
        0 0 22px rgba(255, 105, 180, .12);
}

.lorien-clip-video-wrap {
    position: relative;
    min-height: 0;
    background: #071527;
    overflow: hidden;
}

.lorien-clip-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #071527;
}

.lorien-clip-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #0879dc;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .72rem;
    font-weight: 1000;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.lorien-clip-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 18px 18px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,251,255,.96));
}

.lorien-clip-body h3 {
    max-width: 96%;
    margin: 0 auto;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.08rem;
    line-height: 1.05;
    color: #0879dc;
    text-transform: uppercase;
}

.lorien-clip-date {
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 1000;
    color: #ff62a8;
}

.lorien-clip-body p {
    max-width: 92%;
    margin: 0 auto;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .84rem;
    font-weight: 850;
    line-height: 1.28;
    color: #42556e;
}

/* Add card */
.lorien-clip-add-card {
    min-height: 470px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    user-select: none;
    border-radius: 28px;
    border: 3px solid #8fdfff;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.95));
    overflow: hidden;
}

.lorien-clip-add-card:hover {
    transform: none;
    box-shadow:
        0 16px 34px rgba(0, 191, 255, .16),
        0 0 24px rgba(255, 105, 180, .12),
        inset 0 1px 0 rgba(255,255,255,.75);
}

.lorien-clip-add-card * {
    pointer-events: none;
}

.lorien-clip-add-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 320px;
    padding: 36px 24px 30px;
    text-align: center;
}

.lorien-clip-add-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ed7ff, #0aa9e8);
    color: #ffffff;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 1000;
    box-shadow: 0 14px 28px rgba(0, 119, 217, .22);
}

.lorien-clip-add-content h3 {
    margin: 0 0 14px;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.32rem;
    line-height: 1;
    color: #0879dc;
    text-transform: uppercase;
}

.lorien-clip-add-content p {
    max-width: 230px;
    margin: 0 auto 20px;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .96rem;
    font-weight: 850;
    line-height: 1.35;
    color: #31445f;
}

.lorien-clip-add-content span {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: #dff5ff;
    color: #0879dc;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .82rem;
    font-weight: 1000;
}

/* Admin delete */
.lorien-clip-delete-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    padding: 8px 13px;
    border: none;
    border-radius: 999px;
    background: rgba(220, 45, 70, .94);
    color: #ffffff;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(180, 30, 55, .25);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.lorien-clip-delete-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 26px rgba(180, 30, 55, .34);
}

/* Modal crear clip */
#lorienClipModal.lorien-clip-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 24px !important;
    background: rgba(5, 18, 35, .68) !important;
    backdrop-filter: blur(8px) !important;
    overflow-y: auto !important;
}

#lorienClipModal.lorien-clip-modal.active {
    display: flex !important;
}

body.modal-open {
    overflow: hidden;
}

#lorienClipModal .lorien-clip-modal-box {
    position: relative !important;
    z-index: 2147483001 !important;
    width: min(560px, 94vw) !important;
    max-height: 90vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    padding: 34px !important;
    border-radius: 30px !important;
    border: 4px solid #8fdfff !important;
    background:
        linear-gradient(180deg, rgba(239, 250, 255, .98), rgba(255, 242, 251, .97)) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .34),
        0 0 30px rgba(126, 231, 255, .28) !important;
    transform: none !important;
}

#lorienClipModal .lorien-clip-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10 !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(13, 28, 47, .25) !important;
    color: #17263d !important;
    font-size: 24px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

#lorienClipModal .lorien-clip-modal-close:hover {
    background: rgba(13, 28, 47, .42) !important;
    color: #ffffff !important;
}

#lorienClipModal .lorien-clip-modal-hero {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    gap: 18px !important;
    align-items: center !important;
    margin-bottom: 22px !important;
}

#lorienClipModal .lorien-clip-modal-art {
    width: 100px !important;
    height: 100px !important;
    background-image: url("images/landing-page/crear-clip.webp") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#lorienClipModal .lorien-clip-modal-head {
    text-align: left !important;
    padding-right: 34px !important;
}

#lorienClipModal .lorien-clip-modal-head h2 {
    margin: 0 0 8px !important;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif !important;
    color: #0879dc !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

#lorienClipModal .lorien-clip-modal-subtitle {
    margin: 0 !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    color: #55677e !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
}

#lorienClipModal #lorienClipForm {
    display: grid !important;
    gap: 14px !important;
}

#lorienClipModal #lorienClipForm label {
    display: grid !important;
    gap: 7px !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    color: #31445f !important;
    font-weight: 1000 !important;
    text-align: left !important;
}

#lorienClipModal #lorienClipForm input,
#lorienClipModal #lorienClipForm select,
#lorienClipModal #lorienClipForm textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    border: 2px solid #aee8ff !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #24364f !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-weight: 850 !important;
    outline: none !important;
}

#lorienClipModal #lorienClipForm textarea {
    min-height: 92px !important;
    resize: vertical !important;
}

#lorienClipModal .lorien-clip-submit {
    margin-top: 6px !important;
    padding: 13px 18px !important;
    border: none !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #12b9f2, #0077d9) !important;
    color: #ffffff !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .95rem !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 24px rgba(0, 119, 217, .22) !important;
}

#lorienClipModal .lorien-clip-upload-msg {
    margin: 4px 0 0 !important;
    text-align: center !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-weight: 900 !important;
}

.lorien-clip-upload-msg.success {
    color: #0a9d63;
}

.lorien-clip-upload-msg.error {
    color: #d62845;
}

@media (max-width: 980px) {
    .lorien-clips-section {
        padding: 48px 34px 50px;
    }

    .lorien-clips-section::before,
    .lorien-clips-section::after {
        display: none;
    }

    .lorien-clips-header h2 {
        font-size: clamp(2.8rem, 9vw, 4rem);
    }

    .lorien-clips-slider {
        grid-auto-columns: calc((100% - 24px) / 2);
        gap: 24px;
    }

    .lorien-clips-prev,
    .lorien-clips-arrow:first-child {
        left: -24px;
    }

    .lorien-clips-next,
    .lorien-clips-arrow:last-child {
        right: -24px;
    }
}

@media (max-width: 720px) {
    .lorien-clips-section {
        width: min(94vw, 640px);
        margin: 55px auto 70px;
        padding: 38px 22px 36px;
        border-radius: 32px;
    }

    .lorien-clips-header {
        margin-bottom: 24px;
    }

    .lorien-clips-header h2 {
        font-size: clamp(2.3rem, 12vw, 3.4rem);
    }

    .lorien-clips-header p {
        font-size: .92rem;
    }

    .lorien-clips-slider {
        grid-auto-columns: 100%;
        gap: 20px;
    }

    .lorien-clip-card,
    .lorien-clip-add-card {
        min-height: 430px;
        border-radius: 24px;
    }

    .lorien-clip-card:not(.lorien-clip-add-card) {
        grid-template-rows: 58% 42%;
    }

    .lorien-clips-arrow {
        width: 46px;
        height: 46px;
        font-size: 28px;
        top: 300%;
    }

    .lorien-clips-prev,
    .lorien-clips-arrow:first-child {
        left: -12px;
    }

    .lorien-clips-next,
    .lorien-clips-arrow:last-child {
        right: -12px;
    }

    #lorienClipModal .lorien-clip-modal-box {
        padding: 30px 22px 24px !important;
    }

    #lorienClipModal .lorien-clip-modal-hero {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }

    #lorienClipModal .lorien-clip-modal-head {
        padding-right: 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .lorien-clips-section {
        padding: 32px 16px 30px;
    }

    .lorien-clip-card,
    .lorien-clip-add-card {
        min-height: 390px;
    }

    .lorien-clip-body h3,
    .lorien-clip-add-content h3 {
        font-size: 1.02rem;
    }

    .lorien-clip-body p,
    .lorien-clip-add-content p {
        font-size: .84rem;
    }

    .lorien-clip-add-icon {
        width: 62px;
        height: 62px;
        font-size: 2.3rem;
    }

    #lorienClipModal.lorien-clip-modal {
        padding: 14px !important;
    }

    #lorienClipModal .lorien-clip-modal-box {
        border-radius: 26px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lorien-clips-slider,
    .lorien-clips-arrow,
    .lorien-clip-card,
    .lorien-clip-add-card,
    .lorien-clip-add-icon,
    .lorien-clip-submit,
    .lorien-clip-modal-close {
        scroll-behavior: auto;
        transition: none;
    }
}



body:not(.usuario-loggeado) #lorien-clips-section {
    display: none !important;
}

body:not(.usuario-loggeado) .solo-loggeado {
    display: none !important;
}

/* ============================
   REACCIONES DE CLIPS
============================ */

.lorien-clip-body {
    position: relative;
}

.lorien-clip-reactions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;

    margin: -2px auto 8px;
    max-width: 96%;

    min-height: 30px;
}

.lorien-clip-reaction {
    min-width: 42px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 3px 9px;

    border-radius: 10px;
    border: 2px solid rgba(141, 205, 255, .9);

    background: rgba(240, 250, 255, .96);
    color: #1178db;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 1000;

    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.lorien-clip-reaction:hover {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: #12b9f2;
    box-shadow: 0 8px 18px rgba(18, 185, 242, .18);
}

.lorien-clip-reaction.active {
    background: rgba(18, 185, 242, .16);
    border-color: #12b9f2;
    color: #0077d9;
}

.lorien-clip-reaction span {
    font-size: 1rem;
    line-height: 1;
}

.lorien-clip-reaction strong {
    font-size: .78rem;
}

/* Botón flotante tipo Discord */

.lorien-clip-reaction-float {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 8;

    width: 34px;
    height: 34px;

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

    border-radius: 50%;
    border: 2px solid #9adfff;

    background: rgba(255, 255, 255, .96);
    color: #1178db;

    font-size: 1.1rem;
    cursor: pointer;

    opacity: 0;
    transform: translateY(-4px) scale(.94);

    box-shadow: 0 8px 18px rgba(18, 185, 242, .18);

    transition:
        opacity .16s ease,
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.lorien-clip-card:hover .lorien-clip-reaction-float {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.lorien-clip-reaction-float:hover {
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(18, 185, 242, .25);
}

/* Selector de emojis */

.lorien-clip-reaction-picker {
    position: absolute;
    top: 48px;
    right: 12px;
    z-index: 20;

    display: grid;
    grid-template-columns: repeat(5, 34px);
    gap: 7px;

    padding: 10px;

    border-radius: 16px;
    border: 2px solid #9adfff;

    background: rgba(255, 255, 255, .98);

    box-shadow:
        0 14px 30px rgba(0, 80, 160, .18),
        0 0 22px rgba(255, 105, 180, .10);

    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.96);

    transition:
        opacity .16s ease,
        transform .16s ease;
}

.lorien-clip-reaction-picker.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.lorien-clip-reaction-picker button {
    width: 34px;
    height: 34px;

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

    border: none;
    border-radius: 10px;

    background: rgba(230, 247, 255, .85);

    font-size: 1.15rem;
    cursor: pointer;

    transition:
        transform .14s ease,
        background .14s ease;
}

.lorien-clip-reaction-picker button:hover {
    transform: scale(1.12);
    background: #ffffff;
}

/* =========================================================
   LORIEN CLIPS - REACCIONES CON IMAGEN FIX
   Evita que imágenes personalizadas salgan gigantes
========================================================= */

.lorien-clips-section img[src*="images/reacciones/"],
.lorien-clips-section img[src*="images/reactions/"],
.lorien-clips-section img[src*="lorien-cat"] {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;

    object-fit: contain !important;
    display: block !important;
}

.lorien-clip-reactions,
.lorien-clip-reaction-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;

    min-height: 30px !important;
    max-height: 66px !important;

    overflow: hidden !important;
}

.lorien-clip-reaction {
    min-width: 42px !important;
    height: 28px !important;

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

    padding: 4px 8px !important;

    border-radius: 999px !important;

    background: rgba(230, 247, 255, .92) !important;
    border: 1px solid rgba(143, 223, 255, .9) !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .74rem !important;
    font-weight: 1000 !important;

    color: #0879dc !important;
}

.lorien-clip-reaction img,
.lorien-clip-reaction button img,
.lorien-clip-reaction-picker img,
.lorien-clip-reaction-option img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;

    object-fit: contain !important;
    display: block !important;
}

.lorien-clip-reaction-picker {
    max-width: 230px !important;
}

.lorien-clip-reaction-option {
    width: 36px !important;
    height: 36px !important;

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

/* =========================================================
   PUBLIC PROFILE MODAL - PERFIL PÚBLICO LIMPIO
========================================================= */

.public-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(5, 18, 35, .60);
    backdrop-filter: blur(9px);
}

.public-profile-modal.active {
    display: flex !important;
}

.public-profile-card {
    position: relative;
    width: min(520px, 94vw);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 30px;
    border: 4px solid #8fdfff;
    background: #ffffff;
    box-shadow:
        0 28px 78px rgba(0, 0, 0, .38),
        0 0 36px rgba(91, 210, 255, .25);
}

.public-profile-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 50;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(13, 28, 47, .36);
    color: #ffffff;
    font-size: 21px;
    font-weight: 1000;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.public-profile-close:hover {
    transform: scale(1.06);
    background: rgba(13, 28, 47, .58);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

.public-profile-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 222px;
    bottom: 0;
    z-index: 1;

    overflow: hidden;
    pointer-events: none;
}

.public-profile-bg img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
    object-position: center;

    opacity: .78;
    filter: saturate(1.18) contrast(1.04);
}

.public-profile-bg img[src=""],
.public-profile-bg img:not([src]) {
    display: none;
}

.public-profile-content {
    position: relative;
    z-index: 2;

    max-height: 90vh;
    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 222px,
            rgba(244, 250, 255, .18) 222px,
            rgba(255, 246, 253, .26) 100%
        );
}

.public-profile-content::-webkit-scrollbar {
    width: 8px;
}

.public-profile-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .30);
}

.public-profile-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #12b9f2, #ff69b4);
    border-radius: 999px;
}

.public-profile-banner {
    position: relative;
    height: 172px;
    min-height: 172px;
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, #0077d9 0%, #12b9f2 42%, #ff69b4 100%);
}

.public-profile-banner > .public-profile-banner-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.public-profile-banner > .public-profile-banner-img[src=""],
.public-profile-banner > .public-profile-banner-img:not([src]) {
    display: none;
}

/* banner oscuro */
.public-profile-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 50, 96, .36) 0%,
            rgba(0, 119, 217, .20) 48%,
            rgba(255, 105, 180, .32) 100%
        );

    pointer-events: none;
}

.public-profile-banner > .public-profile-banner-img {
    filter: brightness(1.05) saturate(1.08);
}

.public-profile-header {
    position: relative;
    z-index: 3;

    height: 100%;

    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 22px;

    padding: 22px 58px 22px 34px;
}

.public-profile-avatar-wrap {
    position: relative;

    width: 126px;
    height: 126px;

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

    flex: 0 0 auto;
}

.public-profile-avatar {
    position: relative;
    z-index: 2;

    width: 104px;
    height: 104px;

    display: block;
    object-fit: cover;

    border-radius: 50%;
    border: 5px solid #ffffff;

    background: #ffffff;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .30),
        0 0 22px rgba(255, 255, 255, .48);
}

.public-profile-marco {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.public-profile-marco[src=""],
.public-profile-marco:not([src]) {
    display: none;
}

.public-profile-main-info {
    min-width: 0;
}

.public-profile-main-info h2 {
    max-width: 100%;
    margin: 0;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    line-height: 1.02;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 4px 14px rgba(0, 0, 0, .24);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-profile-main-info p {
    margin: 8px 0 0;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .98rem;
    font-weight: 1000;
    letter-spacing: .7px;
    color: rgba(255, 255, 255, .96);
    text-shadow: 0 3px 10px rgba(0, 0, 0, .22);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-profile-status {
    position: relative;
    z-index: 5;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(13, 28, 47, .95);
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .98rem;
    font-weight: 1000;
    letter-spacing: .3px;
    color: #ffffff;
}

#publicProfileOnlineDot {
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 50%;
    background: #31e78a;
    box-shadow:
        0 0 12px rgba(49, 231, 138, .92),
        0 0 22px rgba(49, 231, 138, .34);
}

#publicProfileOnlineDot.offline {
    background: #9ca7b5;
    box-shadow: none;
}

.public-profile-actions {
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    padding: 12px 34px 0;
    margin: 0;
}

.public-profile-actions.hidden-public-actions {
    display: none !important;
}

.public-profile-customize-btn {
    padding: 8px 13px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #0879dc;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .76rem;
    font-weight: 1000;
    cursor: pointer;
    box-shadow:
        0 8px 18px rgba(0, 119, 217, .14),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.public-profile-customize-btn:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow:
        0 12px 24px rgba(0, 119, 217, .20),
        inset 0 1px 0 rgba(255, 255, 255, .95);
}

.public-profile-action-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 34px;
    width: 190px;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    border: 2px solid #aee8ff;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .22);
}

.public-profile-action-menu.active {
    display: flex;
}

.public-profile-action-menu button {
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 12px;
    background: #eef9ff;
    color: #0879dc;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 1000;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, transform .14s ease;
}

.public-profile-action-menu button:hover {
    background: #dff5ff;
    transform: translateX(2px);
}

.public-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 22px 34px 22px;
}

.public-profile-grid div {
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 13px 12px;
    border-radius: 16px;
    border: 2px solid #9adfff;
    background: rgba(255, 255, 255, .68) !important;
    backdrop-filter: blur(3px);
    text-align: center;
    box-shadow:
        0 8px 18px rgba(89, 142, 196, .08),
        inset 0 1px 0 rgba(255, 255, 255, .82);
}

.public-profile-grid small {
    display: block;
    margin-bottom: 5px;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: 1.7px;
    color: #666;
}

.public-profile-grid strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .96rem;
    font-weight: 1000;
    letter-spacing: .4px;
    color: #0879dc;
}

.public-profile-medals-section {
    padding: 0 34px 30px;
}

.public-profile-medals-section h3 {
    margin: 0 0 12px;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: 1px;
    color: #0879dc;
    text-align: center;
    text-transform: uppercase;
}

.public-profile-medals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 10px;
    min-height: 76px;
    padding: 14px;
    border-radius: 18px;
    border: 2px dashed #9adfff;
    background: rgba(255, 255, 255, .42) !important;
    backdrop-filter: blur(3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74);
}

.public-profile-medal {
    position: relative;
    width: 46px;
    height: 46px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .94);
    border: 2px solid #bfeeff;
    box-shadow:
        0 7px 15px rgba(0, 119, 217, .10),
        inset 0 1px 0 rgba(255, 255, 255, .78);
    cursor: help;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.public-profile-medal:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: #12b9f2;
    box-shadow:
        0 10px 20px rgba(0, 119, 217, .16),
        0 0 16px rgba(255, 105, 180, .12);
}

.public-profile-medal img {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
}

.public-profile-medal.comun { border-color: #bfeeff; }
.public-profile-medal.raro { border-color: #56bfff; }
.public-profile-medal.epico { border-color: #a56bff; }
.public-profile-medal.legendario { border-color: #ffc857; }
.public-profile-medal.evento { border-color: #ff69b4; }

.public-profile-medal-empty {
    grid-column: 1 / -1;
    padding: 14px;
    text-align: center;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .88rem;
    font-weight: 850;
    letter-spacing: .6px;
    color: #789;
}

.public-profile-medal[data-tooltip]::after {
    content: attr(data-tooltip);
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 100002;
    width: min(320px, calc(100vw - 42px));
    padding: 11px 14px;
    border-radius: 14px;
    background: rgba(13, 28, 47, .97);
    color: #ffffff;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.28;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity .14s ease, transform .14s ease;
}

.public-profile-medal[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 560px) {
    .public-profile-modal {
        padding: 14px;
    }

    .public-profile-card {
        width: min(440px, 96vw);
        border-radius: 26px;
    }

    .public-profile-banner {
        height: 188px;
        min-height: 188px;
    }

    .public-profile-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 8px;
        padding: 24px 42px 22px;
    }

    .public-profile-avatar-wrap {
        width: 106px;
        height: 106px;
    }

    .public-profile-avatar {
        width: 88px;
        height: 88px;
    }

    .public-profile-main-info h2 {
        font-size: 1.9rem;
        white-space: nowrap;
    }

    .public-profile-main-info p {
        font-size: .9rem;
    }

    .public-profile-actions {
        padding: 10px 24px 0;
    }

    .public-profile-action-menu {
        right: 24px;
        width: 178px;
    }

    .public-profile-customize-btn {
        font-size: .7rem;
        padding: 7px 11px;
    }

    .public-profile-grid {
        gap: 10px;
        padding: 20px 24px 20px;
    }

    .public-profile-grid div {
        min-height: 70px;
    }

    .public-profile-medals-section {
        padding: 0 24px 26px;
    }
}

@media (max-width: 390px) {
    .public-profile-grid {
        grid-template-columns: 1fr;
    }

    .public-profile-banner {
        height: 198px;
        min-height: 198px;
    }
}

@media (max-width: 560px) {
    .public-profile-bg {
        top: 238px;
    }

    .public-profile-content {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0) 0px,
                rgba(255, 255, 255, 0) 238px,
                rgba(244, 250, 255, .20) 238px,
                rgba(255, 246, 253, .28) 100%
            );
    }
}

/* =========================================================
   SELECTOR DE MARCOS - PERFIL PÚBLICO
========================================================= */

.public-marco-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(5, 18, 35, .64);
    backdrop-filter: blur(9px);
}

.public-marco-modal.active {
    display: flex;
}

.public-marco-card {
    position: relative;
    width: min(540px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 32px;
    border-radius: 28px;
    border: 4px solid #8fdfff;
    background:
        linear-gradient(180deg, rgba(239, 250, 255, .98), rgba(255, 242, 251, .97));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .34),
        0 0 30px rgba(126, 231, 255, .28);
}

.public-marco-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(13, 28, 47, .24);
    color: #17263d;
    font-size: 23px;
    font-weight: 1000;
    line-height: 1;
    cursor: pointer;
}

.public-marco-close:hover {
    background: rgba(13, 28, 47, .38);
    color: #ffffff;
}

.public-marco-card h2 {
    margin: 0 0 8px;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    color: #0879dc;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.public-marco-desc {
    margin: 0 0 22px;
    text-align: center;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #55677e;
    font-weight: 850;
}

.public-marco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 13px;
}

.public-marco-option {
    min-height: 132px;
    padding: 13px 10px;
    border: 2px solid #aee8ff;
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.public-marco-option:hover {
    transform: translateY(-3px);
    border-color: #12b9f2;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 119, 217, .14);
}

.public-marco-option.active {
    border-color: #ff69b4;
    box-shadow:
        0 0 0 3px rgba(255, 105, 180, .18),
        0 12px 26px rgba(255, 105, 180, .18);
}

.public-marco-option img {
    width: 74px;
    height: 74px;
    display: block;
    object-fit: contain;
}

.public-marco-option strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #0879dc;
    font-size: .84rem;
    font-weight: 1000;
}

.public-marco-option small {
    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #777;
    font-size: .75rem;
    font-weight: 850;
}

.public-marco-message {
    margin: 18px 0 0;
    text-align: center;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 900;
}

.public-marco-empty {
    grid-column: 1 / -1;
    padding: 20px;
    border-radius: 18px;
    border: 2px dashed #9adfff;
    background: rgba(255, 255, 255, .72);
    text-align: center;
    color: #667;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 850;
}

@media (max-width: 520px) {
    .public-marco-card {
        padding: 28px 20px 24px;
    }

    .public-marco-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }

    .public-marco-option {
        min-height: 122px;
    }

    .public-marco-option img {
        width: 64px;
        height: 64px;
    }
}

/* =========================================================
   PERFIL PÚBLICO - TOOLTIP MEDALLAS FUERA DEL MODAL
========================================================= */

.public-profile-medal[data-tooltip]::after,
.public-profile-medal[data-tooltip]::before {
    display: none !important;
    content: none !important;
}

#publicProfileMedalTooltip {
    position: fixed;
    z-index: 2147483647;

    max-width: min(340px, calc(100vw - 32px));

    padding: 11px 14px;

    border-radius: 14px;

    background: rgba(13, 28, 47, .98);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.3;
    text-align: center;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .32),
        0 0 18px rgba(91, 210, 255, .18);

    pointer-events: none;

    opacity: 0;
    transform: translateY(6px);

    transition:
        opacity .12s ease,
        transform .12s ease;
}

#publicProfileMedalTooltip.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   PERFIL PÚBLICO - TABS PERFIL / PERSONAJES
========================================================= */

.public-profile-card {
    width: min(640px, 94vw) !important;
}

.public-profile-tabs {
    position: relative;
    z-index: 8;

    display: flex;
    justify-content: center;
    gap: 12px;

    padding: 16px 26px 4px;
}

.public-profile-tab {
    min-width: 128px;

    padding: 10px 18px;

    border: 2px solid #9adfff;
    border-radius: 999px;

    background: rgba(255, 255, 255, .72);
    color: #0879dc;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .88rem;
    font-weight: 1000;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(0, 119, 217, .10);

    transition:
        transform .16s ease,
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}

.public-profile-tab:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .92);
}

.public-profile-tab.active {
    background: linear-gradient(135deg, #12b9f2, #0879dc);
    color: #ffffff;
    border-color: transparent;

    box-shadow: 0 12px 24px rgba(0, 119, 217, .22);
}

.public-profile-tab-panel {
    display: none;
    position: relative;
    z-index: 5;
}

.public-profile-tab-panel.active {
    display: block;
}

/* Ajuste del botón personalizar dentro del panel perfil */
.public-profile-actions {
    position: relative !important;

    display: flex;
    justify-content: flex-end;

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

.public-profile-action-menu {
    right: 34px !important;
    left: auto !important;
}

/* =========================================================
   PERFIL PÚBLICO - PERSONAJES
========================================================= */

.public-profile-characters-section {
    padding: 18px 34px 34px;
}

.public-profile-characters-section h3 {
    margin: 0 0 6px;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.7rem;
    line-height: 1;

    color: #0879dc;
    text-align: center;
    text-transform: uppercase;
}

.public-profile-characters-desc {
    margin: 0 auto 18px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 850;
    color: #31445f;
    text-align: center;
}

.public-profile-characters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.public-profile-character-card {
    position: relative;

    min-height: 230px;

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

    padding: 14px 12px 16px;

    border-radius: 20px;
    border: 2px solid #9adfff;

    background: rgba(255, 255, 255, .68);
    backdrop-filter: blur(3px);

    box-shadow:
        0 10px 22px rgba(0, 119, 217, .10),
        inset 0 1px 0 rgba(255,255,255,.72);

    overflow: hidden;
}

.public-profile-character-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top left, rgba(0, 191, 255, .16), transparent 38%),
        radial-gradient(circle at bottom right, rgba(255, 105, 180, .14), transparent 44%);

    pointer-events: none;
}

.public-profile-character-slot {
    position: relative;
    z-index: 2;

    align-self: flex-start;

    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(255,255,255,.88);
    color: #0879dc;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .72rem;
    font-weight: 1000;

    box-shadow: 0 6px 12px rgba(0,119,217,.10);
}

.public-profile-character-img-wrap {
    position: relative;
    z-index: 2;

    width: 92px;
    height: 92px;

    margin: 8px auto 10px;

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

    border-radius: 50%;

    background: rgba(255,255,255,.78);
    border: 2px solid rgba(143, 223, 255, .75);
}

.public-profile-character-img-wrap img {
    width: 78px;
    height: 78px;

    object-fit: contain;
    object-position: center;

    filter: drop-shadow(0 7px 10px rgba(0,0,0,.14));
}

.public-profile-character-card h4 {
    position: relative;
    z-index: 2;

    max-width: 100%;

    margin: 0 0 6px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 1000;

    color: #0879dc;
}

.public-profile-character-info {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 2px;

    text-align: center;
}

.public-profile-character-info p {
    margin: 0;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.25;

    color: #31445f;
}

.public-profile-character-empty {
    grid-column: 1 / -1;

    padding: 22px 14px;

    border-radius: 20px;
    border: 2px dashed #9adfff;

    background: rgba(255, 255, 255, .56);

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 850;
    color: #789;
    text-align: center;
}

@media (max-width: 560px) {
    .public-profile-card {
        width: min(460px, 96vw) !important;
    }

    .public-profile-tabs {
        padding: 14px 18px 2px;
        gap: 8px;
    }

    .public-profile-tab {
        min-width: 0;
        flex: 1;
        padding: 9px 10px;
        font-size: .78rem;
    }

    .public-profile-characters-section {
        padding: 16px 22px 28px;
    }

    .public-profile-characters-grid {
        grid-template-columns: 1fr;
    }

    .public-profile-actions {
        padding: 10px 22px 0 !important;
    }

    .public-profile-action-menu {
        right: 22px !important;
    }
}

/* =========================================================
   LORIEN GUÍAS V1 - CLEAN GRID
========================================================= */

.guias-container {
    position: relative;

    width: min(1500px, 92vw);

    margin: 40px auto 90px;
    padding: 58px 70px 70px;

    border-radius: 38px;
    border: 4px solid transparent;

    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,251,255,.97)) padding-box,
        linear-gradient(135deg, #28caff, #8a5cff, #ff65b7) border-box;

    box-shadow:
        0 24px 60px rgba(0,0,0,.12),
        0 0 34px rgba(0,191,255,.18);
}

.guias-header {
    text-align: center;
    margin-bottom: 38px;
}

.guias-kicker {
    display: block;

    margin-bottom: 8px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .88rem;
    font-weight: 1000;
    letter-spacing: 2px;

    color: #ff69b4;
    text-transform: uppercase;
}

.guias-header h2 {
    margin: 0;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 1;

    color: #0879dc;
    text-transform: uppercase;
}

.guias-header p {
    margin: 16px auto 0;

    max-width: 760px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.45;

    color: #394b64;
}

.guias-create-btn {
    margin-top: 22px;
    padding: 12px 20px;

    border: none;
    border-radius: 999px;

    background: linear-gradient(135deg, #12b9f2, #0077d9);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 1000;

    cursor: pointer;

    box-shadow: 0 12px 24px rgba(0,119,217,.22);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.guias-create-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 30px rgba(0,119,217,.28);
}

/* GRID PAREJO */
.guias-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;

    align-items: stretch;
}

/* CARD PAREJA */
.guia-card {
    position: relative;

    height: 330px;

    display: grid;
    grid-template-rows: 72px 1fr;

    overflow: hidden;

    border-radius: 24px;
    border: 3px solid #8fdfff;

    background: rgba(255,255,255,.96);

    cursor: pointer;

    box-shadow:
        0 14px 28px rgba(0,119,217,.10),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.guia-card:hover {
    transform: translateY(-5px);

    border-color: #23c7ff;

    box-shadow:
        0 20px 38px rgba(0,119,217,.16),
        0 0 22px rgba(255,105,180,.12);
}

/* TÍTULO MÁS BONITO */
.guia-card h3 {
    margin: 0;

    height: 72px;

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

    padding: 12px 16px;

    background:
        linear-gradient(135deg, rgba(242,250,255,.98), rgba(255,245,252,.98));

    border-bottom: 2px solid #9adfff;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.08;
    letter-spacing: 1px;

    color: var(--guia-accent, #0879dc);
    text-transform: uppercase;
    text-align: center;

    overflow: hidden;
}

/* PREVIEW FIJO */
.guia-card-img-wrap {
    position: relative;

    height: 258px;

    overflow: hidden;

    background: #eef9ff;
}

.guia-card-img-wrap img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
    object-position: center;
}

.guia-card-footer {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    padding: 8px 12px;

    border-radius: 999px;

    background: rgba(13,28,47,.86);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .72rem;
    font-weight: 900;

    backdrop-filter: blur(6px);
}

.guia-card-footer span {
    max-width: 48%;

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

.guias-empty {
    grid-column: 1 / -1;

    padding: 34px;

    border-radius: 24px;
    border: 2px dashed #9adfff;

    background: rgba(255,255,255,.7);

    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #667;
    font-weight: 850;
    text-align: center;
}

/* =========================================================
   MODAL VER GUÍA
========================================================= */

.guia-view-modal,
.guia-create-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(5,18,35,.64);
    backdrop-filter: blur(9px);
}

.guia-view-modal.active,
.guia-create-modal.active {
    display: flex;
}

.guia-view-box,
.guia-create-box {
    position: relative;

    width: min(980px, 94vw);
    max-height: 92vh;
    overflow-y: auto;

    padding: 34px;

    border-radius: 32px;
    border: 4px solid #8fdfff;

    background:
        linear-gradient(180deg, rgba(239,250,255,.98), rgba(255,242,251,.97));

    box-shadow:
        0 26px 76px rgba(0,0,0,.34),
        0 0 34px rgba(126,231,255,.28);
}

.guia-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;

    width: 40px;
    height: 40px;

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

    border: none;
    border-radius: 50%;

    background: rgba(13,28,47,.24);
    color: #17263d;

    font-size: 25px;
    font-weight: 1000;
    line-height: 1;

    cursor: pointer;
}

.guia-modal-close:hover {
    background: rgba(13,28,47,.42);
    color: #ffffff;
}

/* HEADER MODAL MÁS ORDENADO */
.guia-view-top {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    align-items: stretch;
    gap: 16px;

    margin-bottom: 24px;
}

/* ADMIN Y BOSS DEL MISMO TAMAÑO */
.guia-view-author,
.guia-view-boss {
    width: 150px;
    height: 138px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 20px;
    border: 2px solid #aee8ff;

    background: rgba(255,255,255,.82);

    overflow: hidden;
}

/* Ocultamos “Publicado por” */
.guia-view-author small {
    display: none;
}

/* Imagen admin más protagonista */
.guia-view-author img {
    width: 86px;
    height: 86px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;

    background: rgba(255,255,255,.9);

    box-shadow: 0 8px 18px rgba(0,119,217,.12);
}

.guia-view-author strong {
    max-width: 120px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #0879dc;
    font-size: .95rem;
    font-weight: 1000;
}

/* Imagen boss fija */
.guia-view-boss img {
    width: 96px;
    height: 96px;

    object-fit: contain;
    object-position: center;

    border-radius: 18px;

    background: rgba(255,255,255,.62);
}

.guia-view-title-wrap {
    min-height: 138px;

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

    padding: 16px 22px;

    border-radius: 20px;
    border: 2px solid #aee8ff;

    background: rgba(255,255,255,.88);
}

.guia-view-title-wrap h2 {
    margin: 0;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.05;

    color: #0879dc;
    text-align: center;
    text-transform: uppercase;
}

.guia-video-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 24px;
    border: 3px solid #8fdfff;

    background: #111827;

    box-shadow: 0 16px 32px rgba(0,0,0,.18);
}

.guia-video-wrap iframe {
    width: 100%;
    height: 100%;

    display: block;
}

.guia-view-description {
    margin-top: 24px;

    padding: 24px;

    border-radius: 24px;
    border: 2px solid #aee8ff;

    background: rgba(255,255,255,.84);
}

.guia-view-description h3 {
    margin: 0 0 12px;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    color: #0879dc;
    font-size: 1.6rem;
    text-transform: uppercase;
    text-align: center;
}

.guia-view-description p {
    margin: 0;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #31445f;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.55;
    text-align: left;
}

/* =========================================================
   MODAL CREAR GUÍA
========================================================= */

.guia-create-box {
    width: min(620px, 94vw);
}

.guia-create-box h2 {
    margin: 0 0 8px;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    color: #0879dc;
    font-size: 2.4rem;
    text-transform: uppercase;
}

.guia-create-subtitle {
    margin: 0 0 22px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #55677e;
    font-weight: 850;
    line-height: 1.35;
}

#guiaCreateForm {
    display: grid;
    gap: 14px;
}

#guiaCreateForm label {
    display: grid;
    gap: 7px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #31445f;
    font-weight: 1000;
    text-align: left;
}

#guiaCreateForm input,
#guiaCreateForm select,
#guiaCreateForm textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    border-radius: 15px;
    border: 2px solid #aee8ff;

    background: rgba(255,255,255,.95);
    color: #24364f;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 850;

    outline: none;
}

#guiaCreateForm textarea {
    min-height: 120px;
    resize: vertical;
}

.guia-submit-btn {
    margin-top: 6px;
    padding: 13px 18px;

    border: none;
    border-radius: 999px;

    background: linear-gradient(135deg, #12b9f2, #0077d9);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 1000;

    cursor: pointer;

    box-shadow: 0 12px 24px rgba(0,119,217,.22);
}

.guia-create-msg {
    margin: 4px 0 0;

    text-align: center;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 900;
}

/* =========================================================
   RESPONSIVE GUÍAS
========================================================= */

@media (max-width: 1400px) {
    .guias-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .guias-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guia-view-top {
        grid-template-columns: 130px 1fr 130px;
    }

    .guia-view-author,
    .guia-view-boss {
        width: 130px;
    }
}

@media (max-width: 820px) {
    .guias-container {
        padding: 44px 24px 50px;
    }

    .guia-view-box,
    .guia-create-box {
        padding: 30px 22px 24px;
    }

    .guia-view-top {
        grid-template-columns: 1fr;
    }

    .guia-view-author,
    .guia-view-boss {
        width: 100%;
        height: auto;
        min-height: 120px;
        padding: 16px;
    }

    .guia-view-author img {
        width: 82px;
        height: 82px;
    }

    .guia-view-boss img {
        width: 86px;
        height: 86px;
    }
}

@media (max-width: 620px) {
    .guias-grid {
        grid-template-columns: 1fr;
    }

    .guias-container {
        width: 94vw;
        padding: 38px 18px 42px;
        border-radius: 28px;
    }

    .guias-header h2 {
        font-size: 2.6rem;
    }

    .guia-card {
        height: 320px;
    }

    .guia-card-img-wrap {
        height: 248px;
    }
}

/* =========================================================
   GUÍAS - TIPOS, GRID 4x2 Y CARDS PAREJAS
========================================================= */

.guias-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.guia-card {
    height: 315px;
    display: grid;
    grid-template-rows: 88px 1fr;
}

.guia-card-title {
    position: relative;

    height: 88px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;

    padding: 12px 14px;

    border-bottom: 2px solid #9adfff;

    background:
        linear-gradient(
            135deg,
            rgba(242,250,255,.98),
            rgba(255,245,252,.98)
        );

    overflow: hidden;
}

.guia-card-type {
    width: fit-content;

    margin: 0 auto;

    padding: 4px 12px;

    border-radius: 999px;

    background: var(--guia-color);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: 1px;
    text-transform: uppercase;

    box-shadow: 0 7px 14px rgba(0,0,0,.12);
}

.guia-card h3 {
    margin: 0;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: .98rem;
    line-height: 1.05;
    letter-spacing: 1px;

    color: var(--guia-color);
    text-transform: uppercase;
    text-align: center;

    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.guia-card-img-wrap {
    height: 227px;
}

.guia-card.guias-tipo-boss {
    --guia-color: #8b35d6;
    --guia-color-soft: rgba(139, 53, 214, .12);
}

.guia-card.guias-tipo-skill {
    --guia-color: #0879dc;
    --guia-color-soft: rgba(8, 121, 220, .12);
}

.guia-card.guias-tipo-evento {
    --guia-color: #23a85b;
    --guia-color-soft: rgba(35, 168, 91, .12);
}

.guia-card.guias-tipo-clases {
    --guia-color: #f28b22;
    --guia-color-soft: rgba(242, 139, 34, .14);
}

.guia-card.guias-tipo-boss .guia-card-title {
    background:
        linear-gradient(
            135deg,
            rgba(139, 53, 214, .13),
            rgba(255, 80, 120, .10)
        );
}

.guia-card.guias-tipo-skill .guia-card-title {
    background:
        linear-gradient(
            135deg,
            rgba(8, 121, 220, .13),
            rgba(70, 211, 255, .10)
        );
}

.guia-card.guias-tipo-evento .guia-card-title {
    background:
        linear-gradient(
            135deg,
            rgba(35, 168, 91, .13),
            rgba(160, 255, 188, .10)
        );
}

.guia-card.guias-tipo-clases .guia-card-title {
    background:
        linear-gradient(
            135deg,
            rgba(242, 139, 34, .15),
            rgba(255, 215, 130, .12)
        );
}

.guias-ver-mas-btn {
    display: none;

    margin: 34px auto 0;
    padding: 12px 28px;

    border: none;
    border-radius: 999px;

    background: linear-gradient(135deg, #12b9f2, #0077d9);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 1000;

    cursor: pointer;

    box-shadow: 0 12px 24px rgba(0,119,217,.22);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.guias-ver-mas-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 30px rgba(0,119,217,.28);
}

.guias-ver-mas-btn.visible {
    display: block;
}

/* =========================================================
   GUÍAS - TIPO EN MODAL
========================================================= */

.guia-view-title-wrap {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.guia-view-type {
    padding: 6px 16px;

    border-radius: 999px;

    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: 1.3px;
    text-transform: uppercase;

    box-shadow: 0 8px 16px rgba(0,0,0,.14);
}

.guia-view-type.guia-tipo-boss {
    background: linear-gradient(135deg, #8b35d6, #e23c6f);
}

.guia-view-type.guia-tipo-skill {
    background: linear-gradient(135deg, #0879dc, #22c7ff);
}

.guia-view-type.guia-tipo-evento {
    background: linear-gradient(135deg, #23a85b, #67dd8f);
}

.guia-view-type.guia-tipo-clases {
    background: linear-gradient(135deg, #f28b22, #ffbd57);
}

/* Responsive */
@media (max-width: 1400px) {
    .guias-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .guias-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .guias-grid {
        grid-template-columns: 1fr;
    }

    .guia-card {
        height: 310px;
    }

    .guia-card-img-wrap {
        height: 222px;
    }
}

/* =========================================================
   PERFIL - MIS PERSONAJES V1
   Reemplaza visualmente Legion Champion
========================================================= */

.personajes-header-box {
    margin: 28px auto 8px;
    padding: 0 24px;

    text-align: center;
}

.personajes-header-box .perfil-section-title {
    margin-bottom: 8px;

    color: #0879dc;
}

.personajes-header-box .perfil-section-desc {
    max-width: 720px;
    margin: 0 auto;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.45;

    color: #31445f;
}

.perfil-modal .mis-personajes-grid {
    width: 100%;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 26px;

    padding: 34px 34px 52px;
}

.mis-personaje-card {
    position: relative;

    min-height: 395px;

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

    padding: 20px 20px 22px;

    border-radius: 28px;
    border: 3px solid rgba(126, 231, 255, .78);

    background:
        linear-gradient(180deg, rgba(235, 248, 255, .90), rgba(255, 241, 250, .84));

    text-align: center;

    box-shadow:
        0 14px 30px rgba(0, 119, 217, .10),
        0 0 24px rgba(255, 105, 180, .10),
        inset 0 1px 0 rgba(255,255,255,.85);

    overflow: hidden;
}

.mis-personaje-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top left, rgba(0, 191, 255, .14), transparent 36%),
        radial-gradient(circle at bottom right, rgba(255, 105, 180, .14), transparent 42%);

    pointer-events: none;
}

.mis-personaje-top {
    position: relative;
    z-index: 2;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 12px;
}

.mis-personaje-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 58%;

    padding: 7px 12px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .86);
    color: #0879dc;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 1000;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    box-shadow: 0 7px 14px rgba(0,119,217,.10);
}

.mis-personaje-top strong {
    color: #f28b22;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 1000;
}

.mis-personaje-img-wrap {
    position: relative;
    z-index: 2;

    width: 148px;
    height: 148px;

    margin: 4px auto 14px;

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

    border-radius: 50%;

    background:
        radial-gradient(circle, rgba(255,255,255,.95), rgba(218,246,255,.65));

    border: 2px solid rgba(143, 223, 255, .8);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 10px 22px rgba(0,119,217,.10);
}

.mis-personaje-img {
    width: 118px;
    height: 118px;

    object-fit: contain;
    object-position: center;

    filter: drop-shadow(0 8px 12px rgba(0,0,0,.15));
}

.mis-personaje-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 8px;

    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.55rem;
    font-weight: 1000;
    letter-spacing: 1px;

    color: #0879dc;
}

.mis-personaje-info {
    position: relative;
    z-index: 2;

    min-height: 84px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;

    margin-bottom: 16px;
}

.mis-personaje-info p,
.mis-personaje-empty p {
    margin: 0;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .88rem;
    font-weight: 850;
    line-height: 1.28;

    color: #31445f;
}

.mis-personaje-actions {
    position: relative;
    z-index: 2;

    width: 100%;

    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: auto;
}

.mis-personaje-actions button {
    min-width: 110px;

    padding: 11px 14px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(135deg, #12b9f2, #0077d9);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 1000;

    cursor: pointer;

    box-shadow: 0 10px 20px rgba(0,119,217,.18);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.mis-personaje-actions button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 26px rgba(0,119,217,.24);
}

.mis-personaje-actions .delete-character-btn {
    background: linear-gradient(135deg, #ff4f86, #ff6aa0);
}

.mis-personaje-empty {
    justify-content: center;

    border-style: dashed;
    background:
        linear-gradient(180deg, rgba(244, 251, 255, .76), rgba(255, 244, 251, .72));
}

.mis-personaje-empty .mis-personaje-slot {
    margin-bottom: 22px;
}

.mis-personaje-add {
    position: relative;
    z-index: 2;

    width: 92px;
    height: 92px;

    margin: 0 auto 18px;

    border: none;
    border-radius: 50%;

    background: linear-gradient(135deg, #4ed7ff, #0aa9e8);
    color: #ffffff;

    font-size: 3rem;
    font-weight: 1000;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 14px 28px rgba(0,119,217,.22);
}

.mis-personaje-empty h3 {
    color: #0879dc;
}

/* Ocultar cualquier resto visual de Legion */
#legionBonus,
.legion-bonus-panel,
.legion-badges-row,
.legion-badge,
.legion-rank {
    display: none !important;
}

/* =========================================================
   CENTRO DE PERSONAJES - HEADER Y BUSCADOR FIX
========================================================= */

#centro-personajes {
    padding: 48px 0 90px !important;
}

#centro-personajes .character-center-v2 {
    position: relative;

    width: min(1500px, 92vw);
    margin: 0 auto;
    padding: 52px 64px 72px;

    border-radius: 36px;
    border: 4px solid transparent;

    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,251,255,.94)) padding-box,
        linear-gradient(135deg, #28caff, #8a5cff, #ff65b7) border-box;

    box-shadow:
        0 24px 60px rgba(0,0,0,.10),
        0 0 34px rgba(0,191,255,.16);

    box-sizing: border-box;
}

#centro-personajes .character-center-header {
    text-align: center;
    margin-bottom: 34px;
}

#centro-personajes .character-center-header h2 {
    margin: 0 0 14px;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 4.8rem);
    line-height: 1;

    color: #0879dc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#centro-personajes .character-center-header p {
    margin: 0 auto;

    max-width: 760px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 1.2px;

    color: #163d77;
}

/* Panel del buscador */
#centro-personajes .character-search-panel {
    width: min(760px, 100%);
    margin: 0 auto 42px;
    padding: 22px 26px;

    display: grid;
    grid-template-columns: minmax(210px, .75fr) minmax(320px, 1.25fr);
    align-items: center;
    gap: 24px;

    border-radius: 24px;
    border: 3px solid rgba(126, 231, 255, .65);

    background:
        linear-gradient(135deg, rgba(17, 86, 124, .96), rgba(13, 62, 95, .96));

    box-shadow:
        0 14px 30px rgba(0, 119, 217, .18),
        inset 0 1px 0 rgba(255,255,255,.18);

    box-sizing: border-box;
}

#centro-personajes .character-search-panel > div:first-child {
    text-align: center;
}

#centro-personajes .character-search-panel h3 {
    margin: 0 0 8px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 1000;
    letter-spacing: 2px;

    color: #8fdfff;
}

#centro-personajes .character-search-panel p {
    margin: 0;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: 1px;

    color: #ffffff;
}

/* Input + botón */
#centro-personajes .character-search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 12px;

    width: 100%;
}

#centro-personajes .character-search-bar input {
    width: 100%;
    height: 50px;

    padding: 0 16px;

    border-radius: 14px;
    border: 3px solid #8fdfff;

    background: rgba(255,255,255,.98);
    color: #25364e;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 850;

    outline: none;
    box-sizing: border-box;
}

#centro-personajes .character-search-bar input:focus {
    border-color: #20c7ff;

    box-shadow:
        0 0 0 4px rgba(32, 199, 255, .16),
        0 8px 18px rgba(0,119,217,.14);
}

#centro-personajes .character-search-bar button {
    height: 50px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(135deg, #12b9f2, #0077d9);
    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 1000;

    cursor: pointer;

    box-shadow: 0 10px 20px rgba(0,119,217,.24);

    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}

#centro-personajes .character-search-bar button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 26px rgba(0,119,217,.30);
}

/* Título Mis Personajes */
#centro-personajes .mis-personajes-section-title {
    text-align: center;
    margin: 36px auto 0;
}

#centro-personajes .mis-personajes-section-title h3 {
    margin: 0 0 10px;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: clamp(2rem, 3.4vw, 3.4rem);
    line-height: 1;

    color: #0879dc;
    text-transform: uppercase;
}

#centro-personajes .mis-personajes-section-title p {
    margin: 0;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1.2px;

    color: #163d77;
}

/* Responsive */
@media (max-width: 900px) {
    #centro-personajes .character-center-v2 {
        padding: 42px 24px 56px;
        border-radius: 30px;
    }

    #centro-personajes .character-search-panel {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px;
    }

    #centro-personajes .character-search-bar {
        grid-template-columns: 1fr;
    }

    #centro-personajes .character-search-bar button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    #centro-personajes {
        padding: 30px 0 70px !important;
    }

    #centro-personajes .character-center-v2 {
        width: 94vw;
        padding: 34px 16px 46px;
    }

    #centro-personajes .character-center-header h2 {
        font-size: 2.3rem;
    }

    #centro-personajes .character-center-header p {
        font-size: .9rem;
    }

    #centro-personajes .character-search-panel h3 {
        font-size: 1rem;
    }

    #centro-personajes .mis-personajes-section-title h3 {
        font-size: 2rem;
    }
}

/* Responsive */
@media (max-width: 1180px) {
    .perfil-modal .mis-personajes-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 760px) {
    .perfil-modal .mis-personajes-grid {
        grid-template-columns: 1fr;
        padding: 26px 18px 42px;
    }

    .mis-personaje-card {
        min-height: 360px;
    }

    .mis-personaje-actions {
        flex-direction: column;
    }

    .mis-personaje-actions button {
        width: 100%;
    }
}

/*personajes public tab*/

.public-profile-tabs {
    display: flex;
    gap: 14px;
    justify-content: flex-start;
    align-items: center;
    margin: 18px 0 20px;
    padding: 0 24px;
}

.public-profile-tab {
    border: 2px solid #7fd7ff;
    background: #ffffff;
    color: #1679d8;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 14px;
    padding: 10px 22px;
    cursor: pointer;
    transition: 0.25s ease;
}

.public-profile-tab.active {
    background: linear-gradient(135deg, #17b6f4, #1a74e8);
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 182, 244, 0.28);
}

.public-profile-view {
    display: none;
}

.public-profile-view.active {
    display: block;
}

.public-profile-personajes-section {
    padding: 0 24px 24px;
}

.public-profile-personajes-section h3 {
    margin: 0 0 16px;
    text-align: center;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    color: #1577db;
    font-size: 2rem;
}

.public-profile-personajes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.public-profile-personaje-card {
    background: linear-gradient(180deg, rgba(233,247,255,0.92), rgba(255,238,247,0.92));
    border: 2px solid #7fd7ff;
    border-radius: 24px;
    padding: 18px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.public-profile-personaje-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.public-profile-personaje-slot {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1679d8;
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    padding: 6px 12px;
}

.public-profile-personaje-level {
    font-size: 0.9rem;
    font-weight: 800;
    color: #ff8b1f;
}

.public-profile-personaje-avatar-wrap {
    width: 122px;
    height: 122px;
    margin: 0 auto 14px;
    border: 2px solid #8ddbff;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.public-profile-personaje-avatar {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.public-profile-personaje-nombre {
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    color: #1778df;
    font-size: 1.8rem;
    margin: 0 0 8px;
}

.public-profile-personaje-info {
    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #41536c;
    font-weight: 700;
    line-height: 1.45;
    font-size: 0.98rem;
}

.public-profile-personaje-empty {
    border: 2px dashed #8ddbff;
    border-radius: 24px;
    padding: 30px 14px;
    text-align: center;
    color: #7e8ca3;
    background: rgba(255,255,255,0.4);
}

@media (max-width: 900px) {
    .public-profile-personajes-grid {
        grid-template-columns: 1fr;
    }

    .public-profile-tabs {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* =========================================================
   LORIEN FINAL CLEAN PATCH - NAVBAR / PERFIL PÚBLICO / GUÍAS
   Este bloque reemplaza los fixes repetidos anteriores.
========================================================= */

/* ==============================
   NAVBAR UNIFICADO
   Todos los botones del menú usan la misma base visual.
   Comunidad y Calendario siguen ocultos/visibles por logged-only + hidden-logged.
============================== */

.navbar-menu {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(34px, 5vw, 92px) !important;
    padding: 0 28px !important;
    box-sizing: border-box !important;
}

.navbar-menu > .dropdown,
.navbar-menu > .nav-calendar-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-menu .dropbtn,
.navbar-menu .nav-calendar-btn,
.nav-calendar-dropdown .dropbtn,
.nav-calendar-dropdown .nav-calendar-btn,
.calendar-dropbtn {
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: none !important;
    text-shadow: none !important;
    transition:
        color .25s ease,
        text-shadow .25s ease,
        transform .25s ease !important;
}

.navbar-menu .dropbtn:hover,
.navbar-menu .nav-calendar-btn:hover,
.nav-calendar-dropdown .dropbtn:hover,
.nav-calendar-dropdown .nav-calendar-btn:hover,
.calendar-dropbtn:hover {
    color: #00BFFF !important;
    transform: translateY(-1px) !important;
    text-shadow:
        0 0 10px rgba(0, 191, 255, .88),
        0 0 20px rgba(0, 191, 255, .62) !important;
}

.nav-calendar-icon,
.calendar-nav-icon,
.nav-calendar-btn i,
.calendar-dropbtn i {
    display: none !important;
}

.navbar-menu .dropdown-content,
.nav-calendar-dropdown .dropdown-content {
    top: calc(100% + 0px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 220px !important;
    background: #151515 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 0 15px rgba(0, 191, 255, .50) !important;
    z-index: 20000 !important;
}

.navbar-menu .dropdown-content a,
.nav-calendar-dropdown .dropdown-content a {
    display: block !important;
    padding: 12px 18px !important;
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    transition:
        background .18s ease,
        color .18s ease !important;
}

.navbar-menu .dropdown-content a:hover,
.nav-calendar-dropdown .dropdown-content a:hover {
    background: #00BFFF !important;
    color: #000000 !important;
}

body.usuario-loggeado .navbar-menu .logged-only:not(.hidden-logged),
body.usuario-loggeado .nav-calendar-dropdown:not(.hidden-logged) {
    animation: navbarLoggedItemIn .28s ease both;
}

@keyframes navbarLoggedItemIn {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1280px) {
    .navbar-menu {
        gap: clamp(24px, 3.2vw, 52px) !important;
    }

    .navbar-menu .dropbtn,
    .navbar-menu .nav-calendar-btn,
    .calendar-dropbtn {
        font-size: 24px !important;
    }
}

@media (max-width: 980px) {
    .navbar-menu {
        gap: 18px !important;
        flex-wrap: wrap !important;
        row-gap: 12px !important;
    }

    .navbar-menu .dropbtn,
    .navbar-menu .nav-calendar-btn,
    .calendar-dropbtn {
        font-size: 20px !important;
    }
}

/* ==============================
   PERFIL PÚBLICO
   Vuelve al look con background, sin franja sólida bajo los tabs.
   Mantiene el modal del mismo tamaño y solo scrollea el panel activo.
============================== */

.public-profile-card {
    height: min(780px, 92vh) !important;
    max-height: min(780px, 92vh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.public-profile-bg {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.public-profile-bg img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: .78 !important;
    filter: saturate(1.18) contrast(1.04) !important;
}

.public-profile-content {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 222px,
            rgba(244, 250, 255, .16) 222px,
            rgba(255, 246, 253, .24) 100%
        ) !important;
}

.public-profile-banner,
.public-profile-status,
.public-profile-tabs {
    flex: 0 0 auto !important;
}

.public-profile-tabs {
    position: relative !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 18px 24px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.public-profile-tab {
    position: relative !important;
    z-index: 16 !important;
    min-width: 128px !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border: 2px solid #9adfff !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .74) !important;
    color: #0879dc !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .88rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(0, 119, 217, .10) !important;
    transition:
        transform .16s ease,
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease !important;
}

.public-profile-tab:hover {
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, .92) !important;
}

.public-profile-tab.active {
    background: linear-gradient(135deg, #12b9f2, #0879dc) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 24px rgba(0, 119, 217, .22) !important;
}

.public-profile-view,
.public-profile-tab-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#publicProfileViewPerfil,
#publicProfilePanelPerfil,
#publicProfileViewPersonajes,
#publicProfilePanelPersonajes {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 8px !important;
    padding-bottom: 34px !important;
}

#publicProfileViewPersonajes::-webkit-scrollbar,
#publicProfilePanelPersonajes::-webkit-scrollbar,
#publicProfileViewPerfil::-webkit-scrollbar,
#publicProfilePanelPerfil::-webkit-scrollbar {
    width: 8px !important;
}

#publicProfileViewPersonajes::-webkit-scrollbar-track,
#publicProfilePanelPersonajes::-webkit-scrollbar-track,
#publicProfileViewPerfil::-webkit-scrollbar-track,
#publicProfilePanelPerfil::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
}

#publicProfileViewPersonajes::-webkit-scrollbar-thumb,
#publicProfilePanelPersonajes::-webkit-scrollbar-thumb,
#publicProfileViewPerfil::-webkit-scrollbar-thumb,
#publicProfilePanelPerfil::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #12b9f2, #ff69b4) !important;
    border-radius: 999px !important;
}

.public-profile-grid div,
.public-profile-personaje-card,
.public-profile-character-card,
.public-profile-medals-grid,
.public-profile-medallas-grid {
    background: rgba(255, 255, 255, .62) !important;
    backdrop-filter: blur(3px) !important;
}

@media (max-width: 700px) {
    .public-profile-card {
        height: min(760px, 94vh) !important;
        max-height: min(760px, 94vh) !important;
    }

    .public-profile-tabs {
        padding: 14px 18px 12px !important;
    }

    .public-profile-tab {
        min-width: 0 !important;
        flex: 1 !important;
        padding: 9px 10px !important;
        font-size: .78rem !important;
    }
}

/* ==============================
   GUÍAS - CARDS MÁS LIMPIAS
   Quita el rectángulo blanco del título y añade espacio para acciones admin.
============================== */

.guia-card {
    position: relative !important;
    height: 315px !important;
    display: grid !important;
    grid-template-rows: 88px 1fr !important;
    overflow: hidden !important;
}

.guia-card-title {
    position: relative !important;
    height: 88px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 12px 14px !important;
    border-bottom: 2px solid rgba(154, 223, 255, .72) !important;
    background:
        linear-gradient(
            135deg,
            var(--guia-color-soft, rgba(8, 121, 220, .12)),
            rgba(255, 255, 255, .18)
        ) !important;
    overflow: hidden !important;
}

.guia-card-title::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--guia-color, #0879dc);
    opacity: .22;
}

.guia-card h3,
.guia-card-title h3 {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--guia-color, #0879dc) !important;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .98rem !important;
    line-height: 1.05 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

.guia-card-type {
    position: relative !important;
    z-index: 2 !important;
    width: fit-content !important;
    margin: 0 auto !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: var(--guia-color, #0879dc) !important;
    color: #ffffff !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .68rem !important;
    font-weight: 1000 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    box-shadow: 0 7px 14px rgba(0,0,0,.12) !important;
}

.guia-card-img-wrap {
    position: relative !important;
    height: 227px !important;
}

.guia-card-admin-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8;
    display: flex;
    gap: 6px;
}

.guia-admin-btn {
    min-width: 0;
    padding: 6px 9px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: 0;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 14px rgba(0,0,0,.18);
    transition: transform .14s ease, filter .14s ease;
}

.guia-admin-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.guia-admin-btn.editar {
    background: linear-gradient(135deg, #12b9f2, #0879dc);
}

.guia-admin-btn.eliminar {
    background: linear-gradient(135deg, #ff4f86, #e23c6f);
}

/* ==============================
   GUÍAS - MODAL / IMAGEN DERECHA
   La imagen ocupa toda su caja y no aparece como cuadro dentro de cuadro.
============================== */

.guia-view-boss {
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .88) !important;
}

.guia-view-boss img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.guia-view-author {
    overflow: hidden !important;
}

.guia-view-author img {
    width: 92px !important;
    height: 92px !important;
    object-fit: cover !important;
}

@media (max-width: 620px) {
    .guia-card {
        height: 310px !important;
    }

    .guia-card-img-wrap {
        height: 222px !important;
    }
}

/* =========================================================
   CENTRO DE PERSONAJES - AJUSTE SEPARACIÓN Y TÍTULO
========================================================= */

/* Separa un poco la sección del navbar/banner */
#centro-personajes {
    padding-top: 75px !important;
}

/* Si el contenedor quedó demasiado pegado al borde superior */
#centro-personajes .character-center-v2 {
    margin-top: 0 !important;
}

/* Título más pequeño y más limpio */
#centro-personajes .character-center-header h2 {
    font-size: clamp(2.1rem, 3.1vw, 4.3rem) !important;
    line-height: 1 !important;
    margin-bottom: 14px !important;
}

/* Subtítulo un poquito más pegado al título */
#centro-personajes .character-center-header {
    margin-bottom: 30px !important;
}

/* =========================================================
   LORIEN CLIPS - BOTONES EDITAR / ELIMINAR
========================================================= */

.lorien-clip-video-wrap {
    position: relative;
}

.lorien-clip-admin-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;

    display: flex;
    align-items: center;
    gap: 8px;
}

.lorien-clip-admin-actions .lorien-clip-edit-btn,
.lorien-clip-admin-actions .lorien-clip-delete-btn {
    position: static !important;

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

    padding: 8px 14px;

    border: none;
    border-radius: 999px;

    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 1000;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);

    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}

.lorien-clip-admin-actions .lorien-clip-edit-btn {
    background: linear-gradient(135deg, #12b9f2, #0879dc);
}

.lorien-clip-admin-actions .lorien-clip-delete-btn {
    background: linear-gradient(135deg, #ff4f73, #d92547);
}

.lorien-clip-admin-actions .lorien-clip-edit-btn:hover,
.lorien-clip-admin-actions .lorien-clip-delete-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

.lorien-clip-badge {
    z-index: 25;
}

/* =========================================================
   LORIEN MOBILE HOTFIX V2 - MENU / TOP BANNER / LOGIN
   Fecha: 2026-07-15
   Solo afecta móvil/tablet. Desktop queda intacto.
========================================================= */

@media (max-width: 980px) {
    :root {
        --lorien-mobile-top-banner-height: 38px;
        --lorien-mobile-navbar-height: 76px;
        --lorien-mobile-header-total: calc(var(--lorien-mobile-top-banner-height) + var(--lorien-mobile-navbar-height));
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        padding-top: var(--lorien-mobile-header-total) !important;
        background-attachment: scroll !important;
    }

    /* En móvil NO escondemos el banner superior: Safari/Chrome lo volvían difícil de tocar. */
    body.top-banner-hidden {
        padding-top: var(--lorien-mobile-header-total) !important;
    }

    .top-banner,
    .top-banner.hidden {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--lorien-mobile-top-banner-height) !important;
        min-height: var(--lorien-mobile-top-banner-height) !important;
        padding: 0 10px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 50000 !important;
    }

    .navbar,
    body.top-banner-hidden .navbar,
    body.top-banner-hidden.navbar-compact .navbar,
    body.navbar-compact .navbar {
        position: fixed !important;
        top: var(--lorien-mobile-top-banner-height) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--lorien-mobile-navbar-height) !important;
        min-height: var(--lorien-mobile-navbar-height) !important;
        padding: 0 16px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        transform: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 49900 !important;
    }

    .navbar-logo,
    body.navbar-compact .navbar-logo {
        position: static !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        filter: none !important;
    }

    .navbar-logo img,
    body.navbar-compact .navbar-logo img {
        width: 42px !important;
        height: 42px !important;
        transform: none !important;
        filter: none !important;
    }

    .navbar-logo h1,
    body.navbar-compact .navbar-logo h1 {
        font-size: 25px !important;
        line-height: 1 !important;
        letter-spacing: 3px !important;
        transform: none !important;
        filter: none !important;
    }

    .mobile-nav-toggle {
        display: flex !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 16px !important;
        border: 2px solid rgba(126, 231, 255, .62) !important;
        background: rgba(5, 36, 66, .42) !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 52000 !important;
    }

    /* Evita duplicado "Iniciar sesión Login" y deja texto limpio. */
    .feedback-link a,
    .login-btn,
    .register-btn {
        font-size: 0 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1 !important;
        filter: none !important;
    }

    .feedback-link a::before {
        content: "Comentarios" !important;
        display: inline-block !important;
        font-size: 12px !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-weight: 800 !important;
        letter-spacing: .2px !important;
        color: #ffffff !important;
    }

    .login-btn::after {
        content: "Iniciar sesión" !important;
        display: inline-block !important;
        font-size: 12px !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: .2px !important;
        color: #ffffff !important;
    }

    body.usuario-loggeado .login-btn::after {
        content: none !important;
        display: none !important;
    }

    .login-btn span,
    .register-btn span {
        display: inline-block !important;
        font-size: 12px !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-weight: 900 !important;
        color: #ffffff !important;
    }

    .login-btn img,
    .register-btn img,
    .user-avatar-header {
        width: 18px !important;
        height: 18px !important;
        object-fit: cover !important;
        flex: 0 0 auto !important;
    }

    .auth-buttons {
        min-width: 0 !important;
        max-width: 54vw !important;
        gap: 8px !important;
        overflow: visible !important;
        position: relative !important;
    }

    .notification-box,
    #notificationBox {
        flex: 0 0 auto !important;
    }

    /* Menú móvil claro, sin blur, sin overlays que tapen los clicks. */
    body.mobile-menu-open {
        overflow: hidden !important;
    }

    body.mobile-menu-open::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }

    body.mobile-menu-open #content-wrapper,
    body.mobile-menu-open main,
    body.mobile-menu-open .page-view,
    body.mobile-menu-open .top-banner,
    body.mobile-menu-open .navbar,
    body.mobile-menu-open .navbar-menu,
    body.mobile-menu-open .navbar-menu *,
    body.mobile-menu-open .mobile-nav-toggle {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar-menu,
    body.navbar-compact .navbar-menu {
        position: fixed !important;
        top: calc(var(--lorien-mobile-header-total) + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - var(--lorien-mobile-header-total) - 18px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px !important;
        border-radius: 24px !important;
        background: #07365f !important;
        border: 2px solid rgba(126, 231, 255, .45) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .32), 0 0 26px rgba(0, 191, 255, .22) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-10px) !important;
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
        z-index: 51000 !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.mobile-menu-open .navbar-menu,
    body.mobile-menu-open.navbar-compact .navbar-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .navbar-menu > .dropdown,
    .navbar-menu > .nav-calendar-dropdown,
    body.usuario-loggeado .navbar-menu > .logged-only:not(.hidden-logged) {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .075) !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        overflow: hidden !important;
        filter: none !important;
    }

    .navbar-menu .logged-only.hidden-logged,
    .navbar-menu .hidden-logged {
        display: none !important;
    }

    .navbar-menu .dropbtn,
    .navbar-menu .nav-calendar-btn,
    .nav-calendar-dropdown .dropbtn,
    .nav-calendar-dropdown .nav-calendar-btn {
        width: 100% !important;
        min-height: 48px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        border: 0 !important;
        background: rgba(255, 255, 255, .04) !important;
        color: #ffffff !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 1000 !important;
        line-height: 1.15 !important;
        letter-spacing: .3px !important;
        text-align: left !important;
        text-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }

    .navbar-menu .dropdown-content,
    .nav-calendar-dropdown .dropdown-content,
    body.mobile-menu-open .dropdown-content,
    body.mobile-menu-open .nav-calendar-dropdown .dropdown-content {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        padding: 6px 0 10px !important;
        margin: 0 !important;
        border-radius: 0 0 18px 18px !important;
        background: rgba(0, 0, 0, .12) !important;
        box-shadow: none !important;
        overflow: visible !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar-menu .dropdown-content a,
    .nav-calendar-dropdown .dropdown-content a {
        display: block !important;
        width: 100% !important;
        padding: 12px 18px 12px 30px !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, .96) !important;
        background: transparent !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        letter-spacing: .2px !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-decoration: none !important;
        filter: none !important;
    }

    .navbar-menu .dropdown-content a:hover,
    .navbar-menu .dropdown-content a:active,
    .nav-calendar-dropdown .dropdown-content a:hover,
    .nav-calendar-dropdown .dropdown-content a:active {
        background: rgba(0, 191, 255, .22) !important;
        color: #ffffff !important;
    }

    /* Ocultar música en móvil/tablet para que no tape contenido. */
    #lorienMusicPlayer,
    #lorienMusicToggle,
    #lorienMusicPanel,
    .lorien-music,
    .lorien-music-player,
    .lorien-music-toggle,
    .lorien-music-panel,
    [class*="lorien-music"],
    [id*="lorienMusic"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Menos invasiva la pestaña/panel de usuarios online en móvil. */
    #memberSidebar,
    .member-sidebar,
    .online-sidebar,
    .lorien-online-sidebar,
    .online-users-sidebar,
    .online-users-panel {
        display: none !important;
    }

    /* Evita que cualquier regla vieja vuelva a meter blur al menú. */
    .navbar-menu::before,
    .navbar-menu::after,
    .dropdown::before,
    .dropdown::after {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (max-width: 430px) {
    .feedback-link a::before {
        content: "Comentarios" !important;
        font-size: 11px !important;
    }

    .login-btn::after {
        content: "Iniciar sesión" !important;
        font-size: 11px !important;
    }

    body.usuario-loggeado .login-btn::after {
        content: none !important;
        display: none !important;
    }

    .auth-buttons {
        max-width: 56vw !important;
        gap: 6px !important;
    }

    .navbar-logo h1,
    body.navbar-compact .navbar-logo h1 {
        font-size: 23px !important;
        letter-spacing: 2.5px !important;
    }

    .navbar-logo img,
    body.navbar-compact .navbar-logo img {
        width: 39px !important;
        height: 39px !important;
    }
}

/* =========================================================
   LORIEN MOBILE HOTFIX V3 - TAP GHOST MENU / HEADER / FOUNDERS
   Fecha: 2026-07-15
   Solo móvil/tablet. No modifica desktop.
========================================================= */

@media (max-width: 980px) {
    :root {
        --lorien-mobile-top-banner-height: 38px;
        --lorien-mobile-navbar-height: 76px;
        --lorien-mobile-header-total: calc(var(--lorien-mobile-top-banner-height) + var(--lorien-mobile-navbar-height));
    }

    /* Más aire debajo del header fijo para que el slider no quede mordido por los banners. */
    body,
    body.top-banner-hidden {
        padding-top: calc(var(--lorien-mobile-header-total) + 18px) !important;
    }

    #content-wrapper,
    #home-content,
    .page-view {
        position: relative !important;
        z-index: 1 !important;
    }

    /*
       Fix principal:
       En iOS/Chrome móvil, :hover podía dejar dropdowns invisibles encima del contenido.
       Cerrado = display none total, sin área clickeable detrás de la página.
    */
    .navbar-menu,
    body.navbar-compact .navbar-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        touch-action: none !important;
    }

    body:not(.mobile-menu-open) .navbar-menu,
    body:not(.mobile-menu-open) .navbar-menu *,
    body:not(.mobile-menu-open) .dropdown-content,
    body:not(.mobile-menu-open) .dropdown-content *,
    body:not(.mobile-menu-open) .dropdown:hover .dropdown-content {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.mobile-menu-open .navbar-menu,
    body.mobile-menu-open.navbar-compact .navbar-menu {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        touch-action: auto !important;
        top: calc(var(--lorien-mobile-header-total) + 8px) !important;
        max-height: calc(100dvh - var(--lorien-mobile-header-total) - 20px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 999999 !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.mobile-menu-open .navbar-menu *,
    body.mobile-menu-open .dropdown-content,
    body.mobile-menu-open .dropdown-content * {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.mobile-menu-open .dropdown-content,
    body.mobile-menu-open .dropdown:hover .dropdown-content {
        display: block !important;
    }

    /* El botón hamburguesa siempre por encima y utilizable. */
    .mobile-nav-toggle {
        z-index: 1000000 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Al cerrar, limpiamos cualquier hover/sticky dropdown que pueda quedar de Safari. */
    body:not(.mobile-menu-open) .dropdown,
    body:not(.mobile-menu-open) .dropdown * {
        pointer-events: none !important;
    }

    body.mobile-menu-open .dropdown,
    body.mobile-menu-open .dropdown * {
        pointer-events: auto !important;
    }

    /* Slider principal: tamaño consistente y separado del header fijo. */
    .clan-slider-section {
        width: calc(100% - 30px) !important;
        max-width: 720px !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin: 26px auto 44px !important;
        padding: 4px !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        scroll-margin-top: calc(var(--lorien-mobile-header-total) + 22px) !important;
    }

    .clan-slider,
    .clan-slider img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 20px !important;
    }

    .clan-arrow {
        width: 42px !important;
        height: 42px !important;
        font-size: 28px !important;
    }

    .clan-arrow.left {
        left: 10px !important;
    }

    .clan-arrow.right {
        right: 10px !important;
    }

    /* Fundadores centrados y sin correrse a la izquierda en móvil. */
    .founders-panel {
        width: calc(100% - 30px) !important;
        max-width: 720px !important;
        margin: 54px auto !important;
        padding: 36px 18px !important;
        border-radius: 30px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .founders-panel::before {
        inset: 4px !important;
        border-radius: 26px !important;
    }

    .founders-title {
        font-size: clamp(2rem, 10vw, 3.2rem) !important;
        line-height: 1.05 !important;
        text-align: center !important;
        margin: 20px auto 34px !important;
        width: 100% !important;
    }

    .leaders-row,
    .leaders-row.bottom-row,
    .bottom-row {
        width: 100% !important;
        margin: 0 auto 28px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 28px !important;
    }

    .leader-card {
        width: min(300px, 82vw) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    .leader-image {
        width: 100% !important;
        max-width: 245px !important;
        height: auto !important;
        max-height: 270px !important;
        object-fit: contain !important;
        margin: 0 auto 12px !important;
        display: block !important;
    }

    /* Oculta por completo la pestaña lateral de online en móvil. */
    #memberSidebar,
    #memberSidebar *,
    .member-sidebar,
    .member-sidebar *,
    .member-sidebar-toggle,
    .member-sidebar-toggle * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   LORIEN MOBILE HOTFIX V4 - ESPACIADO / MODALES / CLIPS / CALENDARIO
   Fecha: 2026-07-15
   Solo móvil/tablet. No modifica desktop.
========================================================= */

@media (max-width: 980px) {
    :root {
        --lorien-mobile-top-banner-height: 38px;
        --lorien-mobile-navbar-height: 76px;
        --lorien-mobile-header-total: calc(var(--lorien-mobile-top-banner-height) + var(--lorien-mobile-navbar-height));
        --lorien-mobile-content-gap: 34px;
    }

    html {
        scroll-padding-top: calc(var(--lorien-mobile-header-total) + var(--lorien-mobile-content-gap)) !important;
    }

    body,
    body.top-banner-hidden,
    body.navbar-compact,
    body.top-banner-hidden.navbar-compact {
        padding-top: calc(var(--lorien-mobile-header-total) + var(--lorien-mobile-content-gap)) !important;
    }

    #content-wrapper {
        padding-top: 8px !important;
    }

    #home-content,
    .page-view:not(.hidden-view) {
        margin-top: 0 !important;
    }

    .page-view:not(.hidden-view) > :first-child,
    #home-content > :first-child {
        margin-top: 18px !important;
    }

    .patch-container,
    .classes-container,
    .bosses-container,
    .calculadoras-container,
    .party-bosses-page,
    .character-center-v2,
    .guias-section,
    .guias-page,
    #guias .guias-section,
    #guias .guias-page,
    #centro-personajes .character-center-v2 {
        margin-top: 24px !important;
    }

    .patch-title,
    .classes-title,
    .calculadoras-title,
    .party-bosses-header h2,
    .character-center-header h2,
    .guias-header h2,
    #guias h2,
    #centro-personajes .character-center-header h2 {
        font-size: clamp(2.6rem, 12vw, 4.1rem) !important;
        line-height: .98 !important;
        text-align: center !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .party-bosses-header p,
    .character-center-header p,
    .guias-header p,
    #guias .guias-subtitle {
        font-size: clamp(1rem, 5.2vw, 1.35rem) !important;
        line-height: 1.28 !important;
        max-width: min(92vw, 640px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .clan-slider-section {
        margin-top: 16px !important;
        margin-bottom: 54px !important;
    }

    /* Modales menos invasivos en móvil: dejan margen para cerrar tocando fuera. */
    .perfil-modal,
    .party-modal,
    .public-profile-modal,
    .public-marco-modal,
    .guia-modal,
    .guia-view-modal,
    #lorienClipModal.lorien-clip-modal {
        padding: 18px 16px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
    }

    .perfil-panel,
    .party-modal-box,
    .public-profile-card,
    .public-marco-card,
    .guia-modal-box,
    .guia-view-card,
    #lorienClipModal .lorien-clip-modal-box {
        width: min(430px, 90vw) !important;
        max-width: 90vw !important;
        max-height: min(78dvh, 720px) !important;
        overflow-y: auto !important;
        border-radius: 24px !important;
    }

    .perfil-panel {
        padding: 18px !important;
        margin: 0 auto !important;
    }

    .perfil-hero,
    .perfil-header {
        padding: 18px 14px !important;
        gap: 12px !important;
    }

    .perfil-avatar,
    .perfil-avatar-big {
        width: 86px !important;
        height: 86px !important;
    }

    .perfil-header h2,
    .perfil-hero h2 {
        font-size: clamp(1.6rem, 9vw, 2.1rem) !important;
        line-height: 1 !important;
    }

    .perfil-tabs {
        gap: 8px !important;
        margin: 16px 0 !important;
    }

    .perfil-tab {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 8px) !important;
        padding: 10px 8px !important;
        font-size: .82rem !important;
    }

    .perfil-tab-content {
        padding: 16px !important;
    }

    .perfil-form input,
    .perfil-form select,
    .perfil-form textarea,
    .party-form-field input,
    .party-form-field select,
    .party-form-field textarea {
        font-size: 16px !important;
    }

    /* Lorien Clips móvil: flechas fuera del contenido, tarjeta más alta y controles limpios. */
    .lorien-clips-section {
        width: calc(100% - 30px) !important;
        max-width: 720px !important;
        margin: 62px auto 82px !important;
        padding: 38px 16px 42px !important;
        border-radius: 34px !important;
        overflow: hidden !important;
    }

    .lorien-clips-header {
        margin-bottom: 22px !important;
        padding: 0 8px !important;
    }

    .lorien-clips-header h2 {
        font-size: clamp(2.7rem, 14vw, 4.2rem) !important;
        line-height: .95 !important;
    }

    .lorien-clips-header p {
        font-size: clamp(.92rem, 4.6vw, 1.08rem) !important;
        line-height: 1.35 !important;
    }

    .lorien-clips-controls {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 14px !important;
        margin: 18px auto 0 !important;
        pointer-events: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .lorien-clips-arrow,
    .lorien-clips-arrow:first-child,
    .lorien-clips-arrow:last-child,
    .lorien-clips-prev,
    .lorien-clips-next {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 25px !important;
    }

    .lorien-clips-arrow:hover {
        transform: none !important;
    }

    .lorien-clips-slider {
        grid-auto-columns: 100% !important;
        gap: 22px !important;
        padding: 4px 4px 18px !important;
    }

    .lorien-clip-card:not(.lorien-clip-add-card) {
        min-height: 610px !important;
        grid-template-rows: 43% 57% !important;
        border-radius: 24px !important;
    }

    .lorien-clip-video-wrap {
        min-height: 255px !important;
    }

    .lorien-clip-video {
        object-fit: cover !important;
    }

    .lorien-clip-body {
        min-height: 0 !important;
        padding: 16px 18px 24px !important;
        gap: 9px !important;
        justify-content: flex-start !important;
    }

    .lorien-clip-reactions,
    .lorien-clip-reaction-list {
        max-height: none !important;
        min-height: 34px !important;
        overflow: visible !important;
        padding-right: 46px !important;
    }

    .lorien-clip-body h3 {
        font-size: clamp(1.2rem, 6vw, 1.65rem) !important;
        line-height: 1.05 !important;
        margin-top: 4px !important;
    }

    .lorien-clip-date {
        font-size: .95rem !important;
    }

    .lorien-clip-body p {
        font-size: clamp(.92rem, 4.4vw, 1.05rem) !important;
        line-height: 1.35 !important;
        max-width: 96% !important;
    }

    .lorien-clip-reaction-float {
        opacity: 1 !important;
        transform: none !important;
        top: 14px !important;
        right: 14px !important;
        width: 38px !important;
        height: 38px !important;
        z-index: 14 !important;
    }

    .lorien-clip-reaction-picker {
        top: 58px !important;
        right: 10px !important;
        z-index: 40 !important;
    }

    .lorien-clip-admin-actions {
        top: 12px !important;
        right: 12px !important;
        gap: 7px !important;
    }

    .lorien-clip-admin-actions .lorien-clip-edit-btn,
    .lorien-clip-admin-actions .lorien-clip-delete-btn,
    .lorien-clip-delete-btn {
        padding: 8px 12px !important;
        font-size: .78rem !important;
    }

    .lorien-clip-add-card {
        min-height: 520px !important;
    }

    /* Calendario de Parties móvil: una pestaña por día, no 7 columnas aplastadas. */
    .party-bosses-page {
        width: calc(100% - 24px) !important;
        max-width: 720px !important;
        margin: 28px auto 70px !important;
        padding: 34px 16px 40px !important;
        border-radius: 32px !important;
        overflow: hidden !important;
    }

    .party-bosses-header h2 {
        font-size: clamp(2.7rem, 13vw, 4rem) !important;
        line-height: .95 !important;
    }

    .party-create-main-btn {
        width: min(100%, 420px) !important;
        min-height: 58px !important;
        font-size: 1.05rem !important;
    }

    .party-bosses-tools {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 18px !important;
        overflow: hidden !important;
    }

    .party-tool-field,
    .party-form-field {
        min-width: 0 !important;
        width: 100% !important;
    }

    .party-tool-field label,
    .party-form-field label {
        font-size: 1rem !important;
        letter-spacing: .8px !important;
    }

    .party-tool-field select,
    .party-form-field select,
    .party-form-field input,
    .party-form-field textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        font-size: 16px !important;
    }

    .party-time-note {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: .9rem !important;
        line-height: 1.35 !important;
        letter-spacing: .8px !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .party-calendar.mobile-party-calendar {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .party-mobile-day-tabs {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 4px 2px 12px !important;
        margin: 12px 0 16px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .party-mobile-day-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .party-mobile-day-tab {
        flex: 0 0 auto !important;
        min-width: 78px !important;
        padding: 12px 14px !important;
        border: 2px solid #8fdfff !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.92) !important;
        color: #0879dc !important;
        font-family: "Object Sans Lorien", Arial, sans-serif !important;
        font-size: .86rem !important;
        font-weight: 1000 !important;
        cursor: pointer !important;
        box-shadow: 0 8px 18px rgba(0,119,217,.10) !important;
    }

    .party-mobile-day-tab.active {
        background: linear-gradient(135deg, #12b9f2, #0879dc) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 12px 24px rgba(0,119,217,.22) !important;
    }

    .party-mobile-day-panel {
        width: 100% !important;
        padding: 16px !important;
        border-radius: 26px !important;
        border: 2px solid rgba(143, 223, 255, .9) !important;
        background: rgba(255,255,255,.72) !important;
        box-sizing: border-box !important;
    }

    .party-mobile-day-title {
        margin: 0 0 14px !important;
        text-align: center !important;
        font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif !important;
        color: #0879dc !important;
        font-size: 1.8rem !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }

    .party-mobile-day-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .party-mobile-day-list .party-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .party-calendar:not(.mobile-party-calendar) {
        grid-template-columns: 1fr !important;
    }

    .party-calendar:not(.mobile-party-calendar) .party-day-column {
        display: none !important;
    }
}

@media (max-width: 430px) {
    :root {
        --lorien-mobile-content-gap: 38px;
    }

    .page-view:not(.hidden-view) > :first-child,
    #home-content > :first-child {
        margin-top: 22px !important;
    }

    .perfil-panel,
    .party-modal-box,
    .public-profile-card,
    .public-marco-card,
    .guia-modal-box,
    .guia-view-card,
    #lorienClipModal .lorien-clip-modal-box {
        width: 88vw !important;
        max-width: 88vw !important;
        max-height: 76dvh !important;
    }

    .lorien-clip-card:not(.lorien-clip-add-card) {
        min-height: 640px !important;
        grid-template-rows: 41% 59% !important;
    }

    .lorien-clip-video-wrap {
        min-height: 245px !important;
    }

    .lorien-clips-section {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/*Scouter boton */

.scouter-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 14px;

    background: linear-gradient(135deg, #6b5cff, #00bfff);
    color: #fff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .82rem;
    font-weight: 1000;
    letter-spacing: .6px;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(0, 119, 217, .22);
    transition: transform .16s ease, filter .16s ease;
}

.scouter-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.scouter-btn.has-scouter {
    background: linear-gradient(135deg, #ff8a1f, #ff4fa3);
}

.scouter-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(5, 18, 34, .64);
    backdrop-filter: blur(10px);
}

.scouter-modal.active {
    display: flex;
}

.scouter-modal-card {
    width: min(720px, 94vw);
    max-height: 88vh;
    overflow-y: auto;

    position: relative;

    border-radius: 28px;
    border: 3px solid #8fdfff;

    background:
        linear-gradient(180deg, rgba(245, 252, 255, .96), rgba(255, 243, 251, .95));

    padding: 28px;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, .28),
        0 0 28px rgba(0, 191, 255, .28);
}

.scouter-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: rgba(10, 20, 35, .24);
    color: #fff;

    font-size: 1.35rem;
    font-weight: 1000;
    cursor: pointer;
}

.scouter-modal-card h2 {
    margin: 0 0 18px;

    text-align: center;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    font-size: 2rem;
    color: #0879dc;
    letter-spacing: 1px;
}

.scouter-preview-box {
    width: 100%;
    max-height: 360px;

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

    margin-bottom: 18px;

    border-radius: 20px;
    border: 2px dashed rgba(0, 191, 255, .55);

    background: rgba(255, 255, 255, .64);
    overflow: hidden;
}

.scouter-preview-box img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    display: block;
}

.scouter-info-actual {
    margin-bottom: 18px;
    text-align: center;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #33445e;
}

.scouter-info-actual p {
    margin: 5px 0;
    font-weight: 850;
}

#scouterForm {
    display: grid;
    gap: 14px;
}

#scouterForm label {
    display: grid;
    gap: 7px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 1000;
    color: #344761;
}

#scouterForm input,
#scouterForm textarea {
    width: 100%;

    border-radius: 14px;
    border: 2px solid #8fdfff;

    padding: 12px 14px;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;

    background: #fff;
    outline: none;
}

#scouterForm textarea {
    min-height: 90px;
    resize: vertical;
}

.scouter-submit-btn {
    border: none;
    border-radius: 16px;

    padding: 14px 20px;

    background: linear-gradient(135deg, #12b9f2, #0077d9);
    color: #fff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 1000;

    cursor: pointer;
}

.scouter-mensaje {
    margin: 0;
    text-align: center;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 1000;
}

@media (max-width: 820px) {
    .scouter-modal {
        padding: 16px;
    }

    .scouter-modal-card {
        width: 92vw;
        max-height: 82vh;
        padding: 22px 18px;
        border-radius: 24px;
    }

    .scouter-modal-card h2 {
        font-size: 1.55rem;
    }

    .scouter-preview-box {
        max-height: 260px;
    }

    .scouter-preview-box img {
        max-height: 260px;
    }
}

/* Horario del Usuario */

.ajuste-horario-box {
    width: 100%;
    margin: 34px 0;
    padding: 24px;

    border: 2px solid #8fdfff;
    border-radius: 22px;

    background: rgba(255, 255, 255, .72);
    text-align: center;
}

.ajuste-horario-box h3 {
    margin: 0 0 8px;
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif;
    color: #0879dc;
    letter-spacing: 1px;
}

.ajuste-horario-box p {
    margin: 0 0 16px;
    font-family: "Object Sans Lorien", Arial, sans-serif;
    color: #33445e;
    font-weight: 850;
}

.ajuste-horario-box select {
    width: min(520px, 100%);
    padding: 13px 16px;

    border-radius: 14px;
    border: 2px solid #8fdfff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 900;
}

.ajuste-horario-box button {
    display: block;
    margin: 18px auto 0;

    border: none;
    border-radius: 16px;

    padding: 13px 24px;

    background: linear-gradient(135deg, #12b9f2, #0077d9);
    color: white;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-weight: 1000;

    cursor: pointer;
}

#horarioPreferidoMensaje {
    margin-top: 14px;
    font-weight: 1000;
}

/* Reloj Banner */

.lorien-clock-stack {
    position: absolute;
    top: 46px;
    right: 18px;
    z-index: 40;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;

    min-width: 170px;
    pointer-events: none;
}

.maple-utc-clock {
    width: 170px;
    min-height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .42);

    color: #ffffff;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .76rem;
    font-weight: 1000;
    line-height: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-shadow: 0 1px 4px rgba(0,0,0,.28);
    box-shadow: 0 5px 14px rgba(0,0,0,.12);
}

.maple-utc-clock img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}

.maple-utc-clock span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hidden-user-clock {
    display: none !important;
}

@media (max-width: 980px) {
    .lorien-clock-stack {
        display: none !important;
    }
}

/* reloj en el calendario */

.party-timezone-label {
    width: 100%;
    min-height: 48px;

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

    padding: 12px 18px;

    border: 2px solid #8fdfff;
    border-radius: 999px;

    background: rgba(255, 255, 255, .72);
    color: #23415f;

    font-family: "Object Sans Lorien", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 1000;
    letter-spacing: .8px;

    text-align: center;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

@media (max-width: 820px) {
    .party-timezone-label {
        border-radius: 18px;
        font-size: .9rem;
        line-height: 1.25;
        padding: 12px 14px;
    }
}

/* boton desactivado si no hay scouter */

.scouter-btn-disabled,
.scouter-btn-disabled:hover {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(.25);
    background: linear-gradient(135deg, #b8c7d6, #8ca1b8);
}

/* ============================= */
/* FIX FINAL RELOJ DOBLE LORIEN */
/* ============================= */

.lorien-clock-stack {
    position: absolute !important;
    top: 26px !important;
    right: 20px !important;
    z-index: 90 !important;

    width: 215px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;

    pointer-events: none !important;
}

/* Evita que los dos relojes se empalmen */
.lorien-clock-stack .maple-utc-clock,
.lorien-clock-stack #mapleUtcClock,
.lorien-clock-stack #userTimezoneClock {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
    min-height: 31px !important;

    display: grid !important;
    grid-template-columns: 26px 1fr !important;
    align-items: center !important;
    justify-items: start !important;
    column-gap: 6px !important;

    padding: 5px 12px !important;
    box-sizing: border-box !important;

    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;

    background: rgba(255, 255, 255, .20) !important;
    color: #ffffff !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .75rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;

    text-shadow: 0 1px 4px rgba(0, 0, 0, .35) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .16) !important;
}

/* Logos/banderas parejitos */
.lorien-clock-stack .maple-utc-clock img {
    width: 20px !important;
    height: 20px !important;

    display: block !important;
    object-fit: contain !important;

    justify-self: center !important;
    align-self: center !important;

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

/* Texto alineado igual en ambos relojes */
.lorien-clock-stack .maple-utc-clock span {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 160px !important;

    text-align: left !important;

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

/* Oculta el reloj del usuario cuando no aplica */
.lorien-clock-stack .hidden-user-clock {
    display: none !important;
}

@media (max-width: 980px) {
    .lorien-clock-stack {
        display: none !important;
    }
}

.hidden-user-clock {
    display: none !important;
}

body:not(.usuario-loggeado) #userTimezoneClock {
    display: none !important;
}

/* ============================= */
/* SCOUTER MODAL MÁS GRANDE */
/* ============================= */

.scouter-modal-card {
    width: min(1080px, 94vw) !important;
    max-height: 92vh !important;

    padding: 34px 38px !important;
    border-radius: 30px !important;
}

.scouter-modal-card h2 {
    font-size: 2.45rem !important;
    margin-bottom: 22px !important;
}

.scouter-preview-box {
    width: 100% !important;
    max-height: 620px !important;
    min-height: 430px !important;

    margin-bottom: 22px !important;

    border-radius: 24px !important;
}

.scouter-preview-box img {
    width: 100% !important;
    max-height: 620px !important;
    object-fit: contain !important;
}

.scouter-info-actual {
    margin-top: 10px !important;
    margin-bottom: 24px !important;

    font-size: 1.05rem !important;
    line-height: 1.45 !important;
}

.scouter-info-actual p {
    margin: 6px 0 !important;
}

/* Cuando solo se está viendo el scouter y el form está oculto */
.scouter-modal-card #scouterForm[style*="display: none"] {
    display: none !important;
}

@media (max-width: 980px) {
    .scouter-modal-card {
        width: 94vw !important;
        max-height: 86vh !important;
        padding: 24px 18px !important;
        border-radius: 24px !important;
    }

    .scouter-modal-card h2 {
        font-size: 1.65rem !important;
    }

    .scouter-preview-box {
        min-height: 280px !important;
        max-height: 420px !important;
    }

    .scouter-preview-box img {
        max-height: 420px !important;
    }
}

/* ========================================================= */
/* PARTY BOSSES - CSS FINAL LIMPIO */
/* Cards externas compactas + colores por día + modal por boss */
/* ========================================================= */

/* ----------------------------- */
/* Variables pastel por día      */
/* ----------------------------- */

.party-day-lunes {
    --party-day-bg: rgba(123, 211, 255, .24);
    --party-day-border: rgba(0, 191, 255, .42);
    --party-day-text: #0077d9;
    --party-day-title-start: #03a9f4;
    --party-day-title-end: #00c8ff;
}

.party-day-martes {
    --party-day-bg: rgba(205, 170, 255, .28);
    --party-day-border: rgba(151, 105, 255, .42);
    --party-day-text: #7353d8;
    --party-day-title-start: #8a63ff;
    --party-day-title-end: #c99cff;
}

.party-day-miercoles {
    --party-day-bg: rgba(255, 206, 150, .34);
    --party-day-border: rgba(255, 166, 82, .46);
    --party-day-text: #d8781d;
    --party-day-title-start: #ff9f43;
    --party-day-title-end: #ffd18a;
}

.party-day-jueves {
    --party-day-bg: rgba(158, 236, 190, .30);
    --party-day-border: rgba(65, 201, 127, .44);
    --party-day-text: #159c64;
    --party-day-title-start: #29c77b;
    --party-day-title-end: #8df0bd;
}

.party-day-viernes {
    --party-day-bg: rgba(255, 183, 218, .32);
    --party-day-border: rgba(255, 105, 180, .46);
    --party-day-text: #d94b8f;
    --party-day-title-start: #ff6aae;
    --party-day-title-end: #ffb3d6;
}

.party-day-sabado {
    --party-day-bg: rgba(255, 232, 139, .38);
    --party-day-border: rgba(255, 205, 68, .50);
    --party-day-text: #b18400;
    --party-day-title-start: #ffc93c;
    --party-day-title-end: #fff08c;
}

.party-day-domingo {
    --party-day-bg: rgba(180, 235, 255, .32);
    --party-day-border: rgba(75, 205, 255, .46);
    --party-day-text: #0a8eb8;
    --party-day-title-start: #39c9f7;
    --party-day-title-end: #95ecff;
}

.party-day-default {
    --party-day-bg: rgba(180, 235, 255, .28);
    --party-day-border: rgba(75, 205, 255, .38);
    --party-day-text: #0a8eb8;
    --party-day-title-start: #0077d9;
    --party-day-title-end: #00bfff;
}

/* ----------------------------- */
/* Columnas por día              */
/* ----------------------------- */

.party-day-column {
    border-radius: 24px !important;
    overflow: hidden !important;
    background: rgba(245, 252, 255, .78) !important;
    border: 1px solid rgba(143, 223, 255, .42) !important;
    box-shadow: 0 12px 26px rgba(0, 119, 217, .10) !important;
}

.party-day-column .party-day-title,
.party-day-column.party-day-lunes .party-day-title,
.party-day-column.party-day-martes .party-day-title,
.party-day-column.party-day-miercoles .party-day-title,
.party-day-column.party-day-jueves .party-day-title,
.party-day-column.party-day-viernes .party-day-title,
.party-day-column.party-day-sabado .party-day-title,
.party-day-column.party-day-domingo .party-day-title {
    padding: 17px 12px !important;
    background: linear-gradient(135deg, var(--party-day-title-start, #0077d9), var(--party-day-title-end, #00bfff)) !important;
    color: #ffffff !important;
    font-family: var(--lorien-font-title, "Heavitas", Arial, sans-serif) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .16) !important;
}

.party-day-body {
    padding: 12px !important;
}

/* ----------------------------- */
/* Card externa compacta         */
/* ----------------------------- */

.party-card-minimal {
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;

    padding: 12px !important;
    margin-bottom: 11px !important;

    border: 2px solid #8fdfff !important;
    border-radius: 22px !important;

    background:
        linear-gradient(180deg, rgba(252, 254, 255, .98), rgba(238, 248, 255, .97)) !important;

    color: #253a54 !important;

    box-shadow: 0 10px 22px rgba(0, 119, 217, .08) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        filter .18s ease !important;
}

/* elimina degradados viejos por boss en cards externas */
.party-card-minimal::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

.party-card-minimal > * {
    position: relative !important;
    z-index: 1 !important;
}

/* borde según día, pero fondo uniforme */
.party-card-minimal.party-day-lunes,
.party-day-lunes .party-card-minimal {
    border-color: var(--party-day-border) !important;
}

.party-card-minimal.party-day-martes,
.party-day-martes .party-card-minimal {
    border-color: var(--party-day-border) !important;
}

.party-card-minimal.party-day-miercoles,
.party-day-miercoles .party-card-minimal {
    border-color: var(--party-day-border) !important;
}

.party-card-minimal.party-day-jueves,
.party-day-jueves .party-card-minimal {
    border-color: var(--party-day-border) !important;
}

.party-card-minimal.party-day-viernes,
.party-day-viernes .party-card-minimal {
    border-color: var(--party-day-border) !important;
}

.party-card-minimal.party-day-sabado,
.party-day-sabado .party-card-minimal {
    border-color: var(--party-day-border) !important;
}

.party-card-minimal.party-day-domingo,
.party-day-domingo .party-card-minimal {
    border-color: var(--party-day-border) !important;
}

.party-card-minimal:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.01) !important;
    box-shadow:
        0 16px 32px rgba(0, 119, 217, .14),
        0 0 18px rgba(110, 190, 255, .16) !important;
}

/* ----------------------------- */
/* Top card: horario + acciones  */
/* ----------------------------- */

.party-card-minimal-top {
    position: relative !important;

    min-height: 44px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    padding-right: 84px !important;
    margin-bottom: 10px !important;
}

/* Si no hay botones, la card queda compacta sin hueco raro */
.party-card-minimal-top:not(:has(.party-card-actions)) {
    padding-right: 0 !important;
}

/* Hora + zona en una sola línea: 21:00 PER */
.party-time-badge {
    width: auto !important;
    min-width: 96px !important;
    height: 40px !important;
    min-height: 40px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    flex: 0 0 auto !important;

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

    border-radius: 999px !important;
    border: 2px solid #8fdfff !important;

    background: #ccefff !important;
    color: #2474bd !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-weight: 1000 !important;
    text-align: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;

    white-space: nowrap !important;
}

.party-time-badge span,
.party-time-badge small {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.party-time-badge span {
    font-size: .94rem !important;
}

.party-time-badge small {
    font-size: .76rem !important;
    font-weight: 1000 !important;
    opacity: .96 !important;
    text-transform: uppercase !important;
}

/* color del badge según día */
.party-card-minimal.party-day-lunes .party-time-badge,
.party-day-lunes .party-time-badge {
    background: var(--party-day-bg) !important;
    border-color: var(--party-day-border) !important;
    color: var(--party-day-text) !important;
}

.party-card-minimal.party-day-martes .party-time-badge,
.party-day-martes .party-time-badge {
    background: var(--party-day-bg) !important;
    border-color: var(--party-day-border) !important;
    color: var(--party-day-text) !important;
}

.party-card-minimal.party-day-miercoles .party-time-badge,
.party-day-miercoles .party-time-badge {
    background: var(--party-day-bg) !important;
    border-color: var(--party-day-border) !important;
    color: var(--party-day-text) !important;
}

.party-card-minimal.party-day-jueves .party-time-badge,
.party-day-jueves .party-time-badge {
    background: var(--party-day-bg) !important;
    border-color: var(--party-day-border) !important;
    color: var(--party-day-text) !important;
}

.party-card-minimal.party-day-viernes .party-time-badge,
.party-day-viernes .party-time-badge {
    background: var(--party-day-bg) !important;
    border-color: var(--party-day-border) !important;
    color: var(--party-day-text) !important;
}

.party-card-minimal.party-day-sabado .party-time-badge,
.party-day-sabado .party-time-badge {
    background: var(--party-day-bg) !important;
    border-color: var(--party-day-border) !important;
    color: var(--party-day-text) !important;
}

.party-card-minimal.party-day-domingo .party-time-badge,
.party-day-domingo .party-time-badge {
    background: var(--party-day-bg) !important;
    border-color: var(--party-day-border) !important;
    color: var(--party-day-text) !important;
}

/* Editar / eliminar a la derecha sin chocar con el horario */
.party-card-actions {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;

    z-index: 3 !important;
}

.party-card-action {
    min-width: 72px !important;

    padding: 7px 11px !important;

    border: none !important;
    border-radius: 999px !important;

    color: #ffffff !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .72rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;

    text-align: center !important;
    cursor: pointer !important;
}

.party-card-action.edit {
    background: linear-gradient(135deg, #20bdff, #008be3) !important;
}

.party-card-action.delete {
    background: linear-gradient(135deg, #ff6aa2, #ff4d8d) !important;
}

/* ----------------------------- */
/* Boss externo                  */
/* ----------------------------- */

.party-card-boss-row {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin-bottom: 9px !important;
}

.party-card-boss-img {
    width: 50px !important;
    height: 50px !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 14px !important;
    border: 2px solid #8fdfff !important;

    background: #ffffff !important;

    box-shadow:
        0 6px 14px rgba(0, 119, 217, .12) !important;

    flex: 0 0 50px !important;
}

.party-card-boss-info {
    min-width: 0 !important;
    text-align: left !important;
}

.party-card-boss-info h4 {
    margin: 0 0 2px !important;

    color: #0879dc !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .98rem !important;
    font-weight: 1000 !important;
    line-height: 1.05 !important;
    letter-spacing: .03em !important;
}

.party-card-boss-info p {
    margin: 0 !important;

    color: #31435c !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* ----------------------------- */
/* Miembros compactos            */
/* ----------------------------- */

.party-card-count {
    margin: 8px 0 9px !important;

    color: #273951 !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .9rem !important;
    font-weight: 1000 !important;
    line-height: 1.05 !important;

    text-align: left !important;
}

.party-card-members-minimal {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 9px !important;
}

.party-card-member-minimal {
    min-height: 32px !important;

    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    padding: 6px 11px !important;

    border-radius: 12px !important;
    border: 1.5px solid #c6ecff !important;

    background: rgba(255, 255, 255, .86) !important;
    color: #31445f !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .82rem !important;
    font-weight: 900 !important;

    overflow: hidden !important;
}

.party-card-member-minimal span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.party-card-member-minimal.is-leader {
    background: linear-gradient(135deg, #ffffff, #eef9ff) !important;
    border-color: #9adeff !important;
}

.party-card-leader-star {
    color: #1670c9 !important;
    font-size: .88rem !important;
    flex: 0 0 auto !important;
}

/* ----------------------------- */
/* Botón Ver detalles            */
/* ----------------------------- */

.party-card-detail-button {
    width: 100% !important;
    min-height: 38px !important;

    border: none !important;
    border-radius: 14px !important;

    padding: 9px 13px !important;

    background: linear-gradient(135deg, #eaf8ff, #d9f3ff) !important;
    color: #1670c9 !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .84rem !important;
    font-weight: 1000 !important;

    cursor: pointer !important;

    transition:
        transform .15s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.party-card-detail-button:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.34),
        0 0 18px rgba(110,180,255,.18) !important;
}

/* color de botón según día */
.party-card-minimal.party-day-lunes .party-card-detail-button,
.party-day-lunes .party-card-detail-button {
    background: linear-gradient(180deg, rgba(223,245,255,.96), rgba(205,236,255,.96)) !important;
    color: #0077d9 !important;
}

.party-card-minimal.party-day-martes .party-card-detail-button,
.party-day-martes .party-card-detail-button {
    background: linear-gradient(180deg, rgba(239,226,255,.96), rgba(229,213,255,.96)) !important;
    color: #7353d8 !important;
}

.party-card-minimal.party-day-miercoles .party-card-detail-button,
.party-day-miercoles .party-card-detail-button {
    background: linear-gradient(180deg, rgba(255,240,223,.96), rgba(255,231,209,.96)) !important;
    color: #d8781d !important;
}

.party-card-minimal.party-day-jueves .party-card-detail-button,
.party-day-jueves .party-card-detail-button {
    background: linear-gradient(180deg, rgba(228,250,237,.96), rgba(215,245,228,.96)) !important;
    color: #159c64 !important;
}

.party-card-minimal.party-day-viernes .party-card-detail-button,
.party-day-viernes .party-card-detail-button {
    background: linear-gradient(180deg, rgba(255,231,242,.96), rgba(255,221,236,.96)) !important;
    color: #d94b8f !important;
}

.party-card-minimal.party-day-sabado .party-card-detail-button,
.party-day-sabado .party-card-detail-button {
    background: linear-gradient(180deg, rgba(255,245,210,.96), rgba(255,238,189,.96)) !important;
    color: #b18400 !important;
}

.party-card-minimal.party-day-domingo .party-card-detail-button,
.party-day-domingo .party-card-detail-button {
    background: linear-gradient(180deg, rgba(223,247,255,.96), rgba(209,242,255,.96)) !important;
    color: #0a8eb8 !important;
}

/* oculta restos antiguos si algún HTML viejo se queda renderizado */
.party-card-minimal .party-member-avatar,
.party-card-minimal .party-member-img,
.party-card-minimal .party-note,
.party-card-minimal .party-card-notes,
.party-card-minimal .party-card-description {
    display: none !important;
}

/* ----------------------------- */
/* Modal detalle Party Boss      */
/* ----------------------------- */

.party-boss-detail-modal.hidden {
    display: none !important;
}

.party-boss-detail-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99900 !important;
}

.party-boss-detail-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(5, 16, 34, .62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.party-boss-detail-card {
    position: relative !important;
    z-index: 2 !important;

    width: min(1120px, 94vw) !important;
    max-height: 92vh !important;
    overflow-y: auto !important;

    margin: 3vh auto !important;

    border-radius: 30px !important;
    background: #eef7ff !important;
    border: 2px solid var(--boss-border-color, #8fdcff) !important;

    box-shadow:
        0 28px 90px rgba(0, 0, 0, .34),
        0 0 34px var(--boss-glow-color, rgba(0, 191, 255, .28)) !important;

    animation:
        partyDetailIn .24s ease,
        partyDetailGlow 3.8s ease-in-out infinite !important;
}

@keyframes partyDetailIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes partyDetailGlow {
    0%, 100% {
        box-shadow:
            0 28px 90px rgba(0, 0, 0, .34),
            0 0 24px var(--boss-glow-color, rgba(0, 191, 255, .22));
    }

    50% {
        box-shadow:
            0 28px 90px rgba(0, 0, 0, .38),
            0 0 48px var(--boss-glow-color, rgba(0, 191, 255, .42));
    }
}

.party-boss-detail-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 5 !important;

    width: 46px !important;
    height: 46px !important;

    border: 0 !important;
    border-radius: 50% !important;

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

    font-size: 1.5rem !important;
    font-weight: 900 !important;

    cursor: pointer !important;
}

.party-detail-shell {
    background:
        radial-gradient(circle at 15% 18%,
            var(--boss-glow-color, rgba(0, 191, 255, .24)),
            transparent 34%),
        radial-gradient(circle at 82% 82%,
            var(--segment-color-2, rgba(255, 105, 180, .22)),
            transparent 38%),
        var(--boss-panel-bg, linear-gradient(rgba(0, 80, 120, .94), rgba(0, 25, 45, .98))) !important;

    color: var(--boss-text-color, #ffffff) !important;
}

.party-detail-hero {
    position: relative !important;

    min-height: 265px !important;
    padding: 34px 34px 26px !important;

    background-size: cover !important;
    background-position: center !important;

    overflow: hidden !important;
}

.party-detail-hero-overlay {
    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .50) 0%,
            rgba(0, 0, 0, .30) 45%,
            rgba(0, 0, 0, .42) 100%
        ) !important;
}

.party-detail-hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 3px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--detail-day-border, rgba(143, 223, 255, .70)),
            var(--boss-border-color, rgba(143, 223, 255, .70)),
            transparent
        ) !important;

    opacity: .95 !important;
    z-index: 3 !important;
}

.party-detail-hero-content {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.party-detail-boss-img {
    width: 138px !important;
    height: 138px !important;

    padding: 8px !important;
    box-sizing: border-box !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 28px !important;
    border: 3px solid rgba(255, 255, 255, .72) !important;

    background: #ffffff !important;

    transform: scale(1.10) !important;
    transform-origin: center !important;

    box-shadow:
        0 12px 34px rgba(0, 0, 0, .28),
        0 0 24px var(--boss-glow-color, rgba(0, 191, 255, .42)) !important;
}

.party-detail-hero-text h2 {
    margin: 0 0 8px !important;

    color: var(--boss-title-color, #ffffff) !important;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif !important;
    font-size: 2.2rem !important;
    letter-spacing: 1px !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .40),
        0 0 18px var(--boss-glow-color, rgba(0, 191, 255, .35)) !important;
}

.party-detail-hero-text p {
    margin: 0 0 12px !important;
    color: rgba(255, 255, 255, .92) !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
}

.party-detail-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.party-detail-meta span {
    padding: 8px 14px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .18),
            var(--detail-day-bg, rgba(123, 211, 255, .15))
        ) !important;

    border: 1px solid var(--detail-day-border, rgba(255, 255, 255, .35)) !important;

    color: #ffffff !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
}

/* ----------------------------- */
/* Día dentro del modal          */
/* ----------------------------- */

.party-detail-shell.party-day-lunes {
    --detail-day-bg: rgba(123, 211, 255, .16);
    --detail-day-border: rgba(0, 191, 255, .42);
    --detail-day-text: #7fe2ff;
}

.party-detail-shell.party-day-martes {
    --detail-day-bg: rgba(205, 170, 255, .18);
    --detail-day-border: rgba(151, 105, 255, .42);
    --detail-day-text: #c4a7ff;
}

.party-detail-shell.party-day-miercoles {
    --detail-day-bg: rgba(255, 206, 150, .18);
    --detail-day-border: rgba(255, 166, 82, .42);
    --detail-day-text: #ffd0a1;
}

.party-detail-shell.party-day-jueves {
    --detail-day-bg: rgba(158, 236, 190, .18);
    --detail-day-border: rgba(65, 201, 127, .42);
    --detail-day-text: #9df0c3;
}

.party-detail-shell.party-day-viernes {
    --detail-day-bg: rgba(255, 183, 218, .18);
    --detail-day-border: rgba(255, 105, 180, .42);
    --detail-day-text: #ffb8da;
}

.party-detail-shell.party-day-sabado {
    --detail-day-bg: rgba(255, 232, 139, .20);
    --detail-day-border: rgba(255, 205, 68, .46);
    --detail-day-text: #ffe98c;
}

.party-detail-shell.party-day-domingo {
    --detail-day-bg: rgba(180, 235, 255, .18);
    --detail-day-border: rgba(75, 205, 255, .42);
    --detail-day-text: #9eeaff;
}

.party-detail-body {
    padding: 28px !important;

    background:
        radial-gradient(circle at 18% 12%,
            var(--detail-day-bg, rgba(123, 211, 255, .16)),
            transparent 34%),
        radial-gradient(circle at 82% 85%,
            var(--boss-glow-color, rgba(0, 191, 255, .20)),
            transparent 42%),
        rgba(0, 0, 0, .18) !important;
}

.party-detail-notes,
.party-detail-members {
    background: rgba(255, 255, 255, .10) !important;

    border: 1px solid var(--detail-day-border, var(--boss-border-color, rgba(143, 223, 255, .60))) !important;
    border-radius: 24px !important;

    padding: 20px !important;
    margin-bottom: 18px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 12px 28px rgba(0, 0, 0, .16),
        0 0 22px var(--boss-glow-color, rgba(0, 191, 255, .22)),
        0 0 12px var(--detail-day-bg, rgba(123, 211, 255, .12)) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.party-detail-notes h3,
.party-detail-members h3 {
    margin: 0 0 14px !important;

    color: var(--boss-title-color, #ffffff) !important;

    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif !important;
    font-size: 1.25rem !important;
    letter-spacing: .8px !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .28),
        0 0 14px var(--boss-glow-color, rgba(0, 191, 255, .32)),
        0 0 8px var(--detail-day-bg, rgba(123, 211, 255, .16)) !important;
}

.party-detail-notes p {
    margin: 0 !important;
    color: rgba(255, 255, 255, .88) !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
}

.party-detail-members-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 14px !important;
}

.party-detail-member {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(236, 248, 255, .90)) !important;

    border: 1px solid var(--detail-day-border, rgba(255, 255, 255, .40)) !important;
    border-radius: 20px !important;

    padding: 16px !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .16),
        0 0 16px var(--boss-glow-color, rgba(0, 191, 255, .18)),
        0 0 10px var(--detail-day-bg, rgba(123, 211, 255, .12)) !important;

    animation: partyFloat 3.2s ease-in-out infinite !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.party-detail-member:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .20),
        0 0 24px var(--boss-glow-color, rgba(0, 191, 255, .28)),
        0 0 16px var(--detail-day-border, rgba(123, 211, 255, .24)) !important;
}

.party-detail-member.lider {
    border-color: var(--boss-border-color, #8fdfff) !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .18),
        0 0 24px var(--boss-glow-color, rgba(0, 191, 255, .34)),
        0 0 14px var(--detail-day-border, rgba(123, 211, 255, .24)) !important;
}

@keyframes partyFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.party-detail-member-avatar-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

.party-detail-member-avatar {
    width: 88px !important;
    height: 88px !important;

    object-fit: cover !important;

    border-radius: 50% !important;
    border: 2px solid #92dbff !important;

    background: #ffffff !important;
}

.party-detail-member-info {
    text-align: center !important;
    margin-bottom: 12px !important;
}

.party-detail-member-info h4 {
    margin: 0 0 8px !important;

    color: var(--segment-color-2, #0879dc) !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: 1.08rem !important;
    font-weight: 1000 !important;
}

.party-detail-member-info p {
    margin: 4px 0 !important;

    color: #53627a !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-weight: 800 !important;
}

.party-detail-star {
    color: #1670c9 !important;
    margin-right: 5px !important;
}

.party-detail-member-extra {
    display: flex !important;
    justify-content: center !important;
}

.party-detail-scouter-btn {
    border: 0 !important;
    border-radius: 999px !important;

    padding: 8px 14px !important;

    background:
        linear-gradient(
            135deg,
            var(--detail-day-border, rgba(0, 191, 255, .75)),
            var(--boss-glow-color, rgba(0, 191, 255, .55))
        ) !important;

    color: #ffffff !important;

    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .85rem !important;
    font-weight: 1000 !important;

    cursor: pointer !important;

    box-shadow:
        0 6px 14px rgba(0, 0, 0, .16),
        0 0 12px var(--detail-day-bg, rgba(123, 211, 255, .18)) !important;
}

.party-detail-no-scouter {
    color: #7a8ba5 !important;
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
    font-size: .88rem !important;
    font-weight: 800 !important;
}

.no-scroll {
    overflow: hidden !important;
}

/* Scouter siempre encima del modal de Party Boss */
.scouter-modal,
.scouter-modal.active {
    z-index: 100500 !important;
}

.scouter-modal-card {
    z-index: 100501 !important;
}

/* ----------------------------- */
/* Mobile base                   */
/* ----------------------------- */

@media (max-width: 768px) {
    .party-card-minimal {
        padding: 11px !important;
        border-radius: 20px !important;
    }

    .party-card-minimal-top {
        min-height: 42px !important;
        padding-right: 80px !important;
    }

    .party-time-badge {
        min-width: 90px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 11px !important;
    }

    .party-time-badge span {
        font-size: .88rem !important;
    }

    .party-time-badge small {
        font-size: .70rem !important;
    }

    .party-card-boss-img {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .party-boss-detail-card {
        width: 96vw !important;
        max-height: 90vh !important;
    }

    .party-detail-hero-content {
        flex-direction: column !important;
        text-align: center !important;
    }

    .party-detail-meta {
        justify-content: center !important;
    }

    .party-detail-boss-img {
        width: 118px !important;
        height: 118px !important;
        transform: scale(1.06) !important;
    }

    .party-detail-body {
        padding: 18px !important;
    }
}


/* =========================================================
   AJUSTES FINALES PARTY BOSSES / RELOJES
========================================================= */

/* ---------------------------------
   RELOJES DEL HEADER TRANSPARENTES
---------------------------------- */
.lorien-clock-stack .maple-utc-clock,
.lorien-clock-stack #mapleUtcClock,
.lorien-clock-stack #userTimezoneClock {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border: 1px solid rgba(255, 255, 255, .38) !important;
}

.lorien-clock-stack .maple-utc-clock span {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* ---------------------------------
   GIF DEL BOSS MÁS GRANDE
---------------------------------- */
.party-detail-hero-content {
    align-items: center !important;
    gap: 24px !important;
}

.party-detail-boss-img {
    width: 160px !important;
    height: 160px !important;

    padding: 10px !important;
    box-sizing: border-box !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 28px !important;
    border: 3px solid rgba(255, 255, 255, .78) !important;
    background: #ffffff !important;

    transform: scale(1.18) !important;
    transform-origin: center !important;

    box-shadow:
        0 12px 34px rgba(0, 0, 0, .28),
        0 0 24px var(--boss-glow-color, rgba(0, 191, 255, .42)) !important;
}

/* ---------------------------------
   PERSONAJES DEL MODAL MÁS GRANDES
---------------------------------- */
.party-detail-members-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.party-detail-member {
    min-height: 245px !important;
    padding: 24px 18px !important;

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

    text-align: center !important;
}

.party-detail-member-avatar-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}

.party-detail-member-avatar {
    width: 104px !important;
    height: 104px !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 50% !important;
    border: 2px solid #92dbff !important;
    background: #fff !important;
}

.party-detail-member-info {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 12px !important;
}

.party-detail-member-info h4 {
    margin: 0 0 8px !important;
    text-align: center !important;
}

.party-detail-member-info p {
    text-align: center !important;
}

.party-detail-member-extra {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* ---------------------------------
   PEQUEÑO AJUSTE DE BOTONES EN CARD
---------------------------------- */
.party-card-minimal-top {
    position: relative !important;
    padding-right: 78px !important;
    min-height: 42px !important;
}

.party-card-actions {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 5 !important;
}

/* por si en algún punto quieres asegurar que no choquen */
.party-card-action {
    position: relative !important;
    z-index: 6 !important;
}

/* =========================================================
   PARTY DETAILS - CAMBIO DE FUENTES DE IMAGEN
   - Card externa: images/party_bosses/bosses/<boss>.webp
   - Imagen del cuadro en modal: images/party_bosses/bosses/<boss>.webp
   - Background del modal: images/party_bosses/bosses_gif/<boss>.gif
   Este bloque solo asegura que el GIF de fondo cubra bien el hero.
========================================================= */

.party-detail-hero {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* =========================================================
   PARTY DETAIL - IMAGEN DEL BOSS LLENANDO EL CUADRO
========================================================= */

.party-detail-boss-img {
    width: 172px !important;
    height: 172px !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 30px !important;
    border: 3px solid rgba(255, 255, 255, .82) !important;

    background: #ffffff !important;

    transform: none !important;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, .32),
        0 0 26px var(--boss-glow-color, rgba(0, 191, 255, .42)) !important;
}

/* Un poco más de presencia dentro del hero */
.party-detail-hero-content {
    gap: 30px !important;
}

/* Para que el cuadro no se vea aplastado en pantallas pequeñas */
@media (max-width: 768px) {
    .party-detail-boss-img {
        width: 132px !important;
        height: 132px !important;
        border-radius: 24px !important;
    }
}

/* =========================================================
   LORIEN MOBILE/TABLET FINAL - PUBLIC RELEASE
   Solo aplica en mobile/tablet. Desktop queda intacto.
========================================================= */

@media (max-width: 980px) {
    :root {
        --lorien-mobile-top-banner-height: 38px;
        --lorien-mobile-navbar-height: 76px;
        --lorien-mobile-header-total: calc(var(--lorien-mobile-top-banner-height) + var(--lorien-mobile-navbar-height));
        --lorien-mobile-content-gap: 78px;
    }

    html {
        scroll-padding-top: calc(var(--lorien-mobile-header-total) + var(--lorien-mobile-content-gap)) !important;
    }

    body {
        padding-top: calc(var(--lorien-mobile-header-total) + var(--lorien-mobile-content-gap)) !important;
        overflow-x: hidden !important;
        background-attachment: scroll !important;
    }

    body.top-banner-hidden {
        padding-top: calc(var(--lorien-mobile-header-total) + var(--lorien-mobile-content-gap)) !important;
    }

    #content-wrapper,
    #home-content,
    .page-view:not(.hidden-view) {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    #home-content > :first-child,
    .page-view:not(.hidden-view) > :first-child,
    .clan-slider-section,
    .patch-container,
    .classes-container,
    .bosses-container,
    .calculadoras-container,
    .party-bosses-page,
    .character-center-v2,
    .guias-section,
    .galeria-container,
    .contactos-container,
    .tickets-container {
        margin-top: 42px !important;
    }

    .clan-slider-section {
        width: min(92vw, 760px) !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .clan-slider,
    .clan-slider img {
        height: 100% !important;
        object-fit: cover !important;
    }

    .info-section,
    .founders-panel,
    .patch-container,
    .classes-container,
    .bosses-container,
    .calculadoras-container,
    .party-bosses-page,
    .character-center-v2,
    .guias-section {
        width: min(92vw, 760px) !important;
        max-width: 92vw !important;
        box-sizing: border-box !important;
    }

    /* No queremos estos módulos en mobile/tablet. */
    #lorienMusicPlayer,
    #lorienMusicToggle,
    #lorienMusicPanel,
    [id*="lorienMusic"],
    [class*="lorien-music"],
    .lorien-clock-stack,
    #mapleUtcClock,
    #userTimezoneClock,
    .public-profile-modal,
    #publicProfileModal,
    .online-sidebar,
    .lorien-online-sidebar,
    .online-users-sidebar,
    .online-users-panel,
    .online-panel,
    .users-online-panel,
    .right-online-panel,
    [class*="online-sidebar"],
    [id*="onlineSidebar"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Menú de usuario: más pequeño, centrado y con espacio para cerrar tocando fuera. */
    .perfil-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 18px 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .perfil-panel,
    .perfil-panel.perfil-steam {
        width: min(86vw, 620px) !important;
        max-width: 86vw !important;
        max-height: 72dvh !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 24px !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .perfil-close {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        z-index: 20 !important;
    }

    .perfil-hero {
        min-height: 96px !important;
        padding: 14px 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .perfil-avatar-big {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        object-fit: cover !important;
        border-width: 3px !important;
    }

    .perfil-hero-info h2,
    #perfilUsuario {
        font-size: clamp(1.25rem, 6vw, 2rem) !important;
        line-height: 1.05 !important;
        margin: 0 0 4px !important;
        max-width: 52vw !important;
        overflow-wrap: anywhere !important;
    }

    .perfil-hero-info p,
    #perfilRango {
        font-size: .88rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .perfil-tabs {
        padding: 12px !important;
        gap: 8px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        background: rgba(6, 18, 37, .94) !important;
    }

    .perfil-tab {
        min-height: 42px !important;
        padding: 9px 12px !important;
        border-radius: 16px !important;
        font-size: .95rem !important;
        line-height: 1.1 !important;
        letter-spacing: .2px !important;
    }

    .perfil-tab-content {
        padding: 16px 14px 24px !important;
    }

    .perfil-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .perfil-stats-grid div {
        min-height: auto !important;
        padding: 16px 12px !important;
    }

    .perfil-stats-grid strong {
        font-size: clamp(1.05rem, 6vw, 1.65rem) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    .avatar-upload-box,
    .perfil-form,
    .profile-parties-list,
    .personajes-header-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .perfil-form input,
    .perfil-form select,
    .perfil-form textarea,
    .perfil-action-btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Centro de personajes: tipografía más flexible y sin desbordes. */
    #centro-personajes,
    #centro-personajes * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #centro-personajes .character-center-v2,
    .character-center-v2 {
        width: min(92vw, 760px) !important;
        padding: 22px 14px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
    }

    #centro-personajes .character-center-header h2,
    .character-center-header h2 {
        font-size: clamp(2rem, 12vw, 4rem) !important;
        line-height: .98 !important;
        letter-spacing: 1px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    #centro-personajes .character-center-header p,
    .character-center-header p {
        font-size: clamp(1rem, 5vw, 1.45rem) !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    #centro-personajes .character-search-panel {
        width: 100% !important;
        padding: 18px 14px !important;
        border-radius: 24px !important;
    }

    #centro-personajes .character-search-panel h3,
    #centro-personajes .mis-personajes-section-title h3,
    .perfil-section-title {
        font-size: clamp(1.25rem, 7vw, 2rem) !important;
        line-height: 1.1 !important;
        overflow-wrap: anywhere !important;
    }

    #centro-personajes .character-search-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #centro-personajes .character-search-bar input,
    #centro-personajes .character-search-bar button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: clamp(.95rem, 4.6vw, 1.15rem) !important;
    }

    #misPersonajesCentroGrid.mis-personajes-centro-grid,
    .mis-personajes-centro-grid,
    .perfil-modal .mis-personajes-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .centro-personaje-card,
    .mis-personaje-card,
    .perfil-personaje-card {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .centro-personaje-card h3,
    .mis-personaje-card h3,
    .perfil-personaje-card h3,
    .centro-personaje-card p,
    .mis-personaje-card p,
    .perfil-personaje-card p {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Scouter sí se puede ver en mobile desde centro/personajes/menú de usuario. */
    .scouter-modal {
        padding: 14px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scouter-modal-card,
    .scouter-modal-box,
    .scouter-box {
        width: min(90vw, 560px) !important;
        max-width: 90vw !important;
        max-height: 78dvh !important;
        overflow-y: auto !important;
        border-radius: 24px !important;
    }

    .scouter-preview-img,
    #scouterPreviewImg {
        max-height: 38dvh !important;
        object-fit: contain !important;
    }

    /* Party Bosses mobile: solo calendario externo, sin modal de detalles. */
    .party-bosses-page {
        padding: 22px 14px 28px !important;
        border-radius: 24px !important;
    }

    .party-bosses-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        text-align: center !important;
    }

    .party-bosses-header h2 {
        font-size: clamp(2rem, 11vw, 3.7rem) !important;
        line-height: 1 !important;
        overflow-wrap: anywhere !important;
    }

    .party-bosses-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .party-timezone-label {
        width: 100% !important;
        max-width: 100% !important;
        font-size: .85rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .party-calendar.mobile-party-calendar {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .party-mobile-day-tabs {
        display: flex !important;
        gap: 10px !important;
        overflow-x: auto !important;
        padding: 6px 4px 12px !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .party-mobile-day-tab {
        flex: 0 0 auto !important;
        min-width: 92px !important;
        min-height: 46px !important;
        border-radius: 999px !important;
        font-size: .95rem !important;
        scroll-snap-align: start !important;
    }

    .party-mobile-day-panel {
        width: 100% !important;
        padding: 18px 12px !important;
        border-radius: 24px !important;
        touch-action: pan-y !important;
        user-select: none !important;
    }

    .party-mobile-day-title {
        font-size: clamp(2rem, 12vw, 3.2rem) !important;
        line-height: 1 !important;
        margin-bottom: 18px !important;
    }

    .party-mobile-day-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .party-mobile-day-list .party-card-minimal,
    .party-calendar.mobile-party-calendar .party-card-minimal {
        width: 100% !important;
        padding: 14px !important;
        border-radius: 22px !important;
        cursor: default !important;
    }

    .party-calendar.mobile-party-calendar .party-card-minimal:hover {
        transform: none !important;
    }

    .party-calendar.mobile-party-calendar .party-card-detail-button,
    .party-calendar.mobile-party-calendar .party-card-minimal .party-card-detail-button {
        display: none !important;
    }

    .party-calendar.mobile-party-calendar .party-card-minimal-top {
        padding-right: 82px !important;
        min-height: 42px !important;
    }

    .party-calendar.mobile-party-calendar .party-time-badge {
        min-width: 118px !important;
        width: auto !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 13px !important;
        display: inline-flex !important;
        flex-direction: row !important;
        gap: 6px !important;
    }

    .party-calendar.mobile-party-calendar .party-time-badge span,
    .party-calendar.mobile-party-calendar .party-time-badge small {
        display: inline !important;
        width: auto !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .party-calendar.mobile-party-calendar .party-card-boss-row {
        gap: 11px !important;
        margin-bottom: 12px !important;
    }

    .party-calendar.mobile-party-calendar .party-card-boss-img {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        object-fit: cover !important;
    }

    .party-calendar.mobile-party-calendar .party-card-boss-info h4 {
        font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
        line-height: 1.05 !important;
    }

    .party-calendar.mobile-party-calendar .party-card-boss-info p,
    .party-calendar.mobile-party-calendar .party-card-count,
    .party-calendar.mobile-party-calendar .party-card-member-minimal {
        font-size: clamp(.9rem, 4.2vw, 1.05rem) !important;
    }

    .party-calendar.mobile-party-calendar .party-card-member-minimal {
        min-height: 38px !important;
        padding: 8px 12px !important;
    }

    .party-boss-detail-modal,
    #partyBossDetalleModal {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 430px) {
    :root {
        --lorien-mobile-content-gap: 86px;
    }

    #home-content > :first-child,
    .page-view:not(.hidden-view) > :first-child,
    .clan-slider-section,
    .patch-container,
    .classes-container,
    .bosses-container,
    .calculadoras-container,
    .party-bosses-page,
    .character-center-v2,
    .guias-section {
        margin-top: 50px !important;
    }

    .perfil-panel,
    .perfil-panel.perfil-steam {
        width: 84vw !important;
        max-width: 84vw !important;
        max-height: 70dvh !important;
    }

    .perfil-hero {
        min-height: 84px !important;
        padding: 12px !important;
    }

    .perfil-avatar-big {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }

    .perfil-tab {
        min-height: 38px !important;
        font-size: .88rem !important;
    }

    .party-mobile-day-tab {
        min-width: 84px !important;
        min-height: 43px !important;
        font-size: .88rem !important;
    }
}

/* =========================================================
   LORIEN MOBILE/TABLET FINAL - PERFIL TABS LIGHT FIX
   Se agrega después para quitar el bloque negro del menú de perfil.
========================================================= */
@media (max-width: 980px) {
    .perfil-tabs {
        background: rgba(239, 249, 255, .82) !important;
        border: 1px solid rgba(126, 231, 255, .32) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
    }

    .perfil-tab {
        background: rgba(255,255,255,.92) !important;
        color: #0879dc !important;
        border: 1px solid rgba(126, 216, 255, .35) !important;
        box-shadow: 0 6px 14px rgba(0, 119, 217, .06) !important;
    }

    .perfil-tab.active {
        background: linear-gradient(135deg, #18c4ff, #0879dc) !important;
        color: #ffffff !important;
        border-color: rgba(255,255,255,.55) !important;
    }
}

/* =========================================================
   LORIEN BOSSES - MODAL DE DIFICULTAD / REWARDS LIMPIOS
   - Títulos largos se adaptan al panel
   - Rewards sin animación en cadena/culebrita
   - Glow más suave y selección limpia
   - Cristal conserva brillo suave
========================================================= */

.boss-difficulty-panel .difficulty-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding-bottom: 22px !important;
    margin-bottom: 28px !important;
}

.boss-difficulty-panel .difficulty-header h2,
.boss-difficulty-panel h2 {
    max-width: 100% !important;
    min-width: 0 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: balance;

    font-size: clamp(28px, 2.25vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: clamp(.8px, .10vw, 1.8px) !important;

    margin-right: 58px !important;

    text-shadow:
        0 0 6px var(--boss-glow-color, rgba(126, 231, 255, .38)),
        0 0 12px rgba(255, 255, 255, .12) !important;
}

.boss-difficulty-panel .difficulty-boss-icon {
    flex: 0 0 auto !important;
    justify-self: end !important;

    width: 82px !important;
    height: 82px !important;

    object-fit: contain !important;
}

.boss-difficulty-panel .close-difficulty-btn {
    z-index: 30 !important;
}

.boss-difficulty-panel .boss-crystal-line {
    align-items: center !important;
    gap: 12px !important;
}

.boss-difficulty-panel .boss-crystal-icon,
.boss-difficulty-panel .crystal-info img {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;

    animation: lorienCrystalSoftGlow 2.8s ease-in-out infinite !important;

    filter:
        brightness(1.08)
        drop-shadow(0 0 6px rgba(126, 231, 255, .52))
        drop-shadow(0 0 12px rgba(165, 92, 255, .34)) !important;
}

.boss-difficulty-panel .important-rewards {
    margin-top: 30px !important;
}

.boss-difficulty-panel .important-rewards h3 {
    margin-bottom: 20px !important;
}

.boss-difficulty-panel .reward-icons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}

/*
   Rewards:
   Reglas con mayor especificidad que las anteriores.
   Esto mata completamente la animación en cadena.
*/
.boss-difficulty-panel .reward-icons img,
.boss-difficulty-panel .reward-icons img:nth-child(1),
.boss-difficulty-panel .reward-icons img:nth-child(2),
.boss-difficulty-panel .reward-icons img:nth-child(3),
.boss-difficulty-panel .reward-icons img:nth-child(4),
.boss-difficulty-panel .reward-icons img:nth-child(5),
.boss-difficulty-panel .reward-icons img:nth-child(6),
.boss-difficulty-panel .reward-icons img:nth-child(7),
.boss-difficulty-panel .reward-icons img:nth-child(8) {
    width: 64px !important;
    height: 64px !important;

    padding: 7px !important;
    box-sizing: border-box !important;

    object-fit: contain !important;

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

    background:
        radial-gradient(circle at 50% 45%,
            rgba(255, 255, 255, .13) 0%,
            rgba(255, 255, 255, .055) 58%,
            rgba(0, 0, 0, .10) 100%
        ) !important;

    cursor: pointer !important;

    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;

    transform: none !important;
    transform-origin: center !important;

    filter:
        brightness(1.04)
        drop-shadow(0 0 4px rgba(255, 255, 255, .16))
        drop-shadow(0 0 8px var(--boss-glow-color, rgba(126, 231, 255, .18))) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 6px 14px rgba(0, 0, 0, .18),
        0 0 8px var(--boss-glow-color, rgba(126, 231, 255, .14)) !important;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}

.boss-difficulty-panel .reward-icons img:hover {
    transform: translateY(-3px) scale(1.08) !important;

    border-color: rgba(255, 255, 255, .38) !important;

    background:
        radial-gradient(circle at 50% 45%,
            rgba(255, 255, 255, .22) 0%,
            rgba(255, 255, 255, .075) 58%,
            rgba(0, 0, 0, .10) 100%
        ) !important;

    filter:
        brightness(1.12)
        drop-shadow(0 0 6px rgba(255, 255, 255, .30))
        drop-shadow(0 0 12px var(--boss-glow-color, rgba(126, 231, 255, .28))) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 9px 18px rgba(0, 0, 0, .22),
        0 0 13px var(--boss-glow-color, rgba(126, 231, 255, .22)) !important;
}

/* Selección sin pulso infinito */
.boss-difficulty-panel .reward-icons img.active,
.boss-difficulty-panel .reward-icons img.selected,
.boss-difficulty-panel .reward-icons img.reward-selected,
.boss-difficulty-panel .reward-icons img.is-selected {
    transform: scale(1.06) !important;

    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;

    border-color: rgba(255, 255, 255, .50) !important;

    background:
        radial-gradient(circle at 50% 45%,
            rgba(255, 255, 255, .26) 0%,
            rgba(255, 255, 255, .09) 58%,
            rgba(0, 0, 0, .08) 100%
        ) !important;

    filter:
        brightness(1.15)
        drop-shadow(0 0 7px rgba(255, 255, 255, .34))
        drop-shadow(0 0 15px var(--boss-glow-color, rgba(126, 231, 255, .32))) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 8px 18px rgba(0, 0, 0, .22),
        0 0 15px var(--boss-glow-color, rgba(126, 231, 255, .28)) !important;
}

@keyframes lorienCrystalSoftGlow {
    0%, 100% {
        filter:
            brightness(1.04)
            drop-shadow(0 0 6px rgba(126, 231, 255, .48))
            drop-shadow(0 0 12px rgba(165, 92, 255, .30));
    }

    50% {
        filter:
            brightness(1.18)
            drop-shadow(0 0 10px rgba(126, 231, 255, .68))
            drop-shadow(0 0 20px rgba(165, 92, 255, .44));
    }
}

@media (max-width: 780px) {
    .boss-difficulty-panel .difficulty-header {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .boss-difficulty-panel .difficulty-header h2,
    .boss-difficulty-panel h2 {
        margin-right: 0 !important;
        font-size: clamp(24px, 7vw, 34px) !important;
        text-align: left !important;
    }

    .boss-difficulty-panel .difficulty-boss-icon {
        width: 68px !important;
        height: 68px !important;
        justify-self: start !important;
    }

    .boss-difficulty-panel .reward-icons {
        gap: 14px !important;
    }

    .boss-difficulty-panel .reward-icons img {
        width: 56px !important;
        height: 56px !important;
        padding: 6px !important;
    }

    .boss-difficulty-panel .boss-crystal-icon,
    .boss-difficulty-panel .crystal-info img {
        width: 38px !important;
        height: 38px !important;
    }
}

/* =========================================================
   LORIEN URGENT AUTH VISIBILITY FIX
   Oculta menús privados cuando el usuario NO está loggeado.
   No cambia la versión PC loggeada; solo refuerza logged-only.
========================================================= */

/* Estado inicial/visitante: cualquier cosa privada queda fuera del layout */
body:not(.usuario-loggeado) .logged-only,
body:not(.usuario-loggeado) .navbar-menu > .logged-only,
body:not(.usuario-loggeado) .navbar-menu > .dropdown.logged-only,
body:not(.usuario-loggeado) .navbar-menu > .nav-calendar-dropdown.logged-only,
body:not(.usuario-loggeado) .navbar-menu .dropdown-content a.logged-only,
body:not(.usuario-loggeado) #lorien-clips-section,
body:not(.usuario-loggeado) #notificationBox,
body:not(.usuario-loggeado) #memberSidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

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

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Si el JS marca hidden-logged, debe ganar incluso contra reglas del navbar con !important */
.logged-only.hidden-logged,
.navbar-menu > .logged-only.hidden-logged,
.navbar-menu > .dropdown.logged-only.hidden-logged,
.navbar-menu > .nav-calendar-dropdown.logged-only.hidden-logged,
.navbar-menu .dropdown-content a.logged-only.hidden-logged,
#notificationBox.logged-only.hidden-logged,
#memberSidebar.logged-only.hidden-logged {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

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

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Cuando sí está loggeado, se restauran los privados, excepto los que sigan hidden-logged */
body.usuario-loggeado .logged-only:not(.hidden-logged) {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Restaurar presentación normal en el navbar para Comunidad y Calendario cuando sí está loggeado */
body.usuario-loggeado .navbar-menu > .dropdown.logged-only:not(.hidden-logged),
body.usuario-loggeado .navbar-menu > .nav-calendar-dropdown.logged-only:not(.hidden-logged) {
    display: inline-flex !important;
}

/* Restaurar link privado de Clips dentro del dropdown Lorien cuando sí está loggeado */
body.usuario-loggeado .navbar-menu .dropdown-content a.logged-only:not(.hidden-logged) {
    display: block !important;
}

/* Restaurar campana y panel de miembros cuando sí está loggeado */
body.usuario-loggeado #notificationBox.logged-only:not(.hidden-logged) {
    display: block !important;
}

body.usuario-loggeado #memberSidebar.logged-only:not(.hidden-logged) {
    display: block !important;
}

/* Mobile: mantener el mismo bloqueo para invitados aunque el menú hamburguesa esté abierto */
@media (max-width: 980px) {
    body:not(.usuario-loggeado).mobile-menu-open .logged-only,
    body:not(.usuario-loggeado).mobile-menu-open .navbar-menu > .dropdown.logged-only,
    body:not(.usuario-loggeado).mobile-menu-open .navbar-menu > .nav-calendar-dropdown.logged-only,
    body:not(.usuario-loggeado).mobile-menu-open .navbar-menu .dropdown-content a.logged-only {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

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

        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    body.usuario-loggeado.mobile-menu-open .navbar-menu > .dropdown.logged-only:not(.hidden-logged),
    body.usuario-loggeado.mobile-menu-open .navbar-menu > .nav-calendar-dropdown.logged-only:not(.hidden-logged) {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   LORIEN PRIVADO + FONT POLISH FINAL
   Guías también es exclusivo para usuarios loggeados.
   Menús/datos/nombres usan Object Sans; títulos conservan Heavitas.
========================================================= */

body:not(.usuario-loggeado) #guias,
body:not(.usuario-loggeado) .navbar-menu .dropdown-content a[onclick*="guias"],
body:not(.usuario-loggeado) .navbar-menu .dropdown-content a.logged-only[href="#lorien-clips-section"],
body:not(.usuario-loggeado) .navbar-menu .dropdown-content a.logged-only[onclick*="guias"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

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

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

body.usuario-loggeado .navbar-menu .dropdown-content a.logged-only[onclick*="guias"]:not(.hidden-logged) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: 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: 12px 18px !important;
    border: 0 !important;
    overflow: visible !important;
}

/* Menú de usuario */
.user-menu,
.user-menu button,
.notification-panel,
.notification-panel * {
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
}

/* Modal de perfil: datos, botones, inputs y nombres con Object Sans */
.perfil-modal p,
.perfil-modal span,
.perfil-modal small,
.perfil-modal strong,
.perfil-modal label,
.perfil-modal input,
.perfil-modal select,
.perfil-modal textarea,
.perfil-modal button,
.perfil-modal .mis-personaje-card h3,
.perfil-modal .mis-personaje-info,
.perfil-modal .mis-personaje-info p,
.perfil-modal .legion-character-name,
.perfil-modal .legion-character-class,
.perfil-modal .legion-character-level,
.perfil-modal .profile-party-card,
.perfil-modal .profile-party-card *,
.perfil-modal .perfil-data-card,
.perfil-modal .perfil-data-card * {
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
}

/* Se conservan títulos principales de ventanas/menús en Heavitas */
.perfil-modal h1,
.perfil-modal h2,
.perfil-modal h3,
.perfil-header h2,
.perfil-section-title,
.perfil-tabs .perfil-tab,
.public-profile-card h3,
.public-profile-tabs .public-profile-tab,
.character-center-header h2,
.mis-personajes-section-title h3 {
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif !important;
}

/* Perfil público: datos y nombres más legibles con Object Sans */
.public-profile-card p,
.public-profile-card span,
.public-profile-card small,
.public-profile-card strong,
.public-profile-card button,
.public-profile-main-info h2,
.public-profile-main-info p,
.public-profile-grid,
.public-profile-grid *,
.public-profile-medals-grid,
.public-profile-medals-grid *,
.public-profile-personajes-desc,
.public-profile-personaje-nombre,
.public-profile-personaje-info,
.public-profile-personaje-info p,
.public-profile-personaje-slot,
.public-profile-personaje-level,
.public-profile-character-card h4,
.public-profile-character-info,
.public-profile-character-info p,
.public-profile-character-slot {
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
}

/* Centro de personajes y nombres de personajes */
#centro-personajes p,
#centro-personajes span,
#centro-personajes small,
#centro-personajes strong,
#centro-personajes label,
#centro-personajes input,
#centro-personajes select,
#centro-personajes textarea,
#centro-personajes button,
#centro-personajes .mis-personaje-centro-card h3,
#centro-personajes .mis-personaje-centro-info,
#centro-personajes .mis-personaje-centro-info p,
#centro-personajes .character-profile-left h3,
#centro-personajes .character-profile-left p,
#centro-personajes .character-side-stat,
#centro-personajes .character-side-stat * {
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
}

/* Party Bosses, Scouter y tarjetas: textos/nombres en Object Sans, títulos principales quedan intactos */
.party-bosses-page p,
.party-bosses-page span,
.party-bosses-page small,
.party-bosses-page strong,
.party-bosses-page label,
.party-bosses-page input,
.party-bosses-page select,
.party-bosses-page textarea,
.party-bosses-page button,
.party-card-minimal h3,
.party-card-minimal p,
.party-member-pill,
.party-member-pill *,
.party-detail-member-info h4,
.party-detail-member-info p,
.party-detail-no-scouter,
.party-detail-scouter-btn,
.scouter-modal p,
.scouter-modal span,
.scouter-modal label,
.scouter-modal input,
.scouter-modal textarea,
.scouter-modal button {
    font-family: "Object Sans Lorien", Arial, sans-serif !important;
}

.party-bosses-page h1,
.party-bosses-page h2,
.party-bosses-page h3:not(.party-card-minimal h3),
.party-detail-hero-text h2,
.party-detail-members h3,
.party-detail-notes h3,
.scouter-modal h2 {
    font-family: "Heavitas", "Object Sans Lorien", Arial, sans-serif !important;
}

/* =========================================================
   FIX PC - PESTAÑA GATO USUARIOS ONLINE COMPLETA
   Solo desktop/tablet grande. No afecta mobile.
========================================================= */

@media (min-width: 981px) {

    body.usuario-loggeado #memberSidebar.member-sidebar.logged-only:not(.hidden-logged),
    body.usuario-loggeado .member-sidebar.logged-only:not(.hidden-logged) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

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

        height: auto !important;
        max-height: calc(100vh - 150px) !important;

        overflow: visible !important;
    }

    .member-sidebar {
        overflow: visible !important;
    }

    /*
       Antes era translateX(245px).
       Ahora se esconde el panel completo, pero deja la pestaña visible.
    */
    .member-sidebar.collapsed {
        transform: translateX(100%) !important;
    }

    .member-sidebar-toggle {
        left: -62px !important;
        top: 32px !important;

        width: 62px !important;
        height: 58px !important;

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

        padding: 0 !important;

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

        background: rgba(10, 20, 35, .96) !important;
        border: 1px solid rgba(0, 191, 255, .45) !important;

        box-shadow:
            0 0 14px rgba(0, 191, 255, .28),
            inset 0 0 10px rgba(255, 255, 255, .06) !important;

        overflow: visible !important;
        z-index: 5 !important;
    }

    .member-sidebar-toggle img {
        width: 44px !important;
        height: 44px !important;

        object-fit: contain !important;
        display: block !important;

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

        filter:
            drop-shadow(0 0 5px rgba(0, 191, 255, .45))
            drop-shadow(0 0 10px rgba(255, 105, 180, .22)) !important;
    }

    .member-sidebar-toggle:hover {
        background: rgba(0, 191, 255, .22) !important;

        box-shadow:
            0 0 18px rgba(0, 191, 255, .42),
            inset 0 0 12px rgba(255, 255, 255, .10) !important;
    }
}

/* =========================================================
   PANEL LATERAL MIEMBROS - ONLINE / SIN CONEXIÓN
   Pegar al final de style.css
========================================================= */

.member-online-card {
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.member-online-card-offline {
    opacity: .46;
    filter: grayscale(.35);
}

.member-online-card-offline:hover {
    opacity: .78;
    filter: grayscale(.10);
}

.member-group-title-offline {
    margin-top: 16px;
    color: rgba(255, 255, 255, .62) !important;
}

.member-status-dot-offline {
    background: #687385 !important;
    box-shadow: none !important;
}

.member-status-dot-online {
    background: #23d18b !important;
    box-shadow: 0 0 8px rgba(35, 209, 139, .75) !important;
}

/* =========================================================
   PANEL LATERAL LORIEN ONLINE - GRUPOS TIPO DISCORD
========================================================= */

.lorien-online-group {
    width: 100%;
    margin-bottom: 18px;
}

.lorien-online-group-title {
    padding: 0 8px 8px;
    color: rgba(235, 245, 255, .68);
    font-family: "Object Sans Lorien", sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lorien-online-group-list {
    display: grid;
    gap: 9px;
}

.lorien-online-user {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 0;
    border-radius: 13px;
    background: rgba(255, 255, 255, .065);
    color: white;
    text-align: left;
    cursor: pointer;
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.lorien-online-user:hover {
    transform: translateX(3px);
    background: rgba(255, 255, 255, .105);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.lorien-online-avatar-wrap {
    position: relative;
    width: 42px;
    height: 42px;
}

.lorien-online-avatar {
    width: 42px;
    height: 42px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, .12);
    border: 2px solid rgba(255, 255, 255, .22);
}

.lorien-online-dot {
    position: absolute;
    right: -1px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #34e89e;
    border: 2px solid #152033;
    box-shadow: 0 0 10px rgba(52, 232, 158, .75);
}

.lorien-online-user-info {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.lorien-online-user-info strong {
    display: block;
    max-width: 100%;
    color: #ffffff;
    font-family: "Object Sans Lorien", sans-serif;
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lorien-online-user-info small {
    display: block;
    max-width: 100%;
    color: rgba(235, 245, 255, .68);
    font-family: "Object Sans Lorien", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Offline */
.lorien-online-group-offline {
    margin-top: 20px;
}

.lorien-online-user.is-offline {
    opacity: .52;
    filter: grayscale(.75);
}

.lorien-online-user.is-offline:hover {
    opacity: .78;
    filter: grayscale(.35);
}

.lorien-online-user.is-offline .lorien-online-dot {
    background: #7c8797;
    box-shadow: none;
}

/* Limpieza por si quedaron estilos anteriores */
.lorien-online-user-info small::after {
    content: none !important;
}