/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
@charset "UTF-8";
body {
    margin: 0;
    padding: 0;
    background: none !important;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    height: 100vh;
    overflow: hidden;
    user-select: none;
}
#root {
    height: 100%;
}
code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
}
::-webkit-scrollbar {
    display: none;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
p {
    margin: 0;
    padding: 0;
    font-family: Roboto;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.app-wrapper {
    height: 100%;
    width: 100%;
    color: #fff;
}
.context-menu-list {
    min-width: 200px;
    background-color: #000000bf;
    color: #c1c2c5;
    padding: 4px;
    border-color: #0003;
    border-style: inset;
    border-width: 1px;
    border-radius: 4px;
    outline: none;
    display: flex;
    flex-direction: column;
}
.context-menu-item {
    padding: 8px;
    border-radius: 4px;
    background-color: transparent;
    outline: none;
    border: none;
    color: #c1c2c5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.context-menu-item:active {
    transform: none;
}
.context-menu-item:hover {
    background: radial-gradient(circle at top left, rgba(120, 0, 233, 0.4), rgba(70, 0, 128, 0) 100%);
    cursor: pointer;
}
.tooltip-description {
    padding-top: 5px;
}
.tooltip-markdown > p {
    margin: 0;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
button:active {
    transform: translateY(3px);
}
.item-drag-preview {
    width: 7.7vh;
    height: 7.7vh;
    z-index: 1;
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7vh;
    image-rendering: -webkit-optimize-contrast;
}
.start-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.container-wrapper {
    background-color: #000000bf;
    border-radius: 0rem;
    background-image: radial-gradient(circle at top left, rgba(111, 0, 255, 0.507), rgba(3, 3, 3, 0.315) 50%), 
                      radial-gradient(circle at bottom right, rgba(111, 0, 255, 0.507), rgba(3, 3, 3, 0.315) 50%);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.title-wrapper-container {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 30px 50px 20px;
}
.title-wrapper-container .title {
    width: 30%;
    text-align: center;
}
.title-wrapper-container .title h1 {
    background: linear-gradient(0deg, rgb(132, 0, 255), rgb(111, 0, 255));
    transform: translateX(-20%) translateY(100%); /* <-- baja un poco el texto */
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 5px rgba(98, 1, 189, 0.774), 0 0 10px rgba(255, 0, 255, 0);
    font-weight: 700;
    font-size: 2.3rem;
    padding: 0;
    margin: 0;
}/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.title-wrapper-container .title h2 {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0;
    margin: 0;
}
/*.title-wrapper-container .line {
    display: flex;
    align-items: center;
    min-width: 60%;
}*/
/*.title-wrapper-container .line .point-line {
    width: 100%;
    height: 5px;
    background-color: #ffffff1c;
    position: relative;
}*/
/*.title-wrapper-container .line .point-line:after {
    content: "•";
    position: absolute;
    top: -16px;
    font-size: 26px;
    left: -2px;
}
.title-wrapper-container .line .point-line:before {
    content: "•";
    position: absolute;
    bottom: -14px;
    font-size: 26px;
    right: -2px;
}
.title-wrapper-container .line .point-line .footer {
    width: 100% !important;
}*/
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.title-wrapper-container .line.footer {
    width: 100%;
}

.title-wrapper-container .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-75%, -180%); /* Ajusta el -120% para moverlo encima de los botones */
    z-index: 10; /* Asegura que esté por encima */
}

.title-wrapper-container .logo .image {
    width: 120px;
    height: 120px;
    /*position: absolute;*/ /*NASH LOGO*/
    background-image: url(https://cdn.discordapp.com/attachments/1184153217022566400/1389423811085996142/zonaurbana.png?ex=68649142&is=68633fc2&hm=40e77b5d5237ebf9900997211de7301c016722cffdd1147d3d5ee45ab7e5938e&);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.inventory-wrapper {
    display: flex;
    background-blend-mode: screen;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: max-content;
    width: max-content;
    padding-left: 250px;
    padding-right: 250px;
    gap: 20px;
    margin-top: 10.5vh; /* Puedes ajustar este valor para mover el inventario abajo o arriba*/
}
.inventory-control {
    display: block !important; /* fuerza comportamiento vertical */
    width: 100%;
    position: relative; /* Necesario para que el hijo absoluto se posicione dentro */
    top: -220px; /* desplaza hacia abajo el bloque completo */
}
.inventory-control-wrapper {
    position: relative;
    top: 190px; /* fuerza que se vea más abajo */
}
.inventory-control .inventory-control-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
/* PARA COLOCAR LA CANTIDAD */
.inventory-control .inventory-control-input {
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-align: center;
    outline: none;
    border: none;
    color: #ffffff;
    background: radial-gradient(circle at center, rgba(98, 1, 189, 0.774), rgba(24, 0, 37, 0.507));
    border: 1px solid transparent;
    animation: pulseGlow 2.5s ease-in-out infinite;
    background-size: 200% 200%;
}
.inventory-control .inventory-control-input:hover {
    border: 1px solid rgb(95, 5, 168, 0.493);
}
/* BOTONES CENTRALES */
.inventory-control .inventory-control-button {
    width: 100%;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: radial-gradient(circle, rgba(98, 1, 189, 0.774), rgba(24, 0, 37, 0.5) 100%);
    transition: 0.2s ease-in-out;
    padding: 10px 12px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(140, 0, 233, 0.1);
    animation: pulseGlow 2.5s ease-in-out infinite;
    background-size: 200% 200%; /* para animar el fondo radial */
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.inventory-control .inventory-control-button:hover {
    border: 1px solid rgba(140, 0, 233, 0.4);
    opacity: 0.9;
    box-shadow: 0 0 8px rgba(140, 0, 233, 0.25);
}
@keyframes pulseGlow {
    0% {
        /*box-shadow: 0 0 5px rgba(140, 0, 233, 0.2);*/
        background-position: 0% 50%;
    }
    50% {
        /*box-shadow: 0 0 15px rgba(140, 0, 233, 0.6);*/
        background-position: 100% 50%;
    }
    100% {
        /*box-shadow: 0 0 5px rgba(140, 0, 233, 0.2);*/
        background-position: 0% 50%;
    }
}
/* ----------------------------------------------------- */
.useful-controls-dialog {
    background-color: #18181f;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #c1c2c5;
    width: 450px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 4px;
    gap: 16px;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.useful-controls-dialog-overlay {
    background-color: #00000080;
}
.useful-controls-dialog-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
}
.useful-controls-dialog-close {
    width: 25px;
    height: 25px;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    fill: #c1c2c5;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.useful-controls-dialog-close:hover {
    background-color: #33343f;
    cursor: pointer;
}
.useful-controls-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.divider {
    width: 100%;
    height: 1px;
    background-color: #8000e99c;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.useful-controls-button {
    position: absolute !important;
    bottom: 25px;
    right: 25px;
    transition: 0.2s !important;
    border: none;
    color: #fff;
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    fill: #fff;
    border-radius: 5% !important;
    background-color: #0c0c0c66 !important;
}
.useful-controls-button:hover {
    background-color: #0c0c0ccc !important;
    cursor: pointer;
}
.useful-controls-exit-button {
    position: absolute !important;
    right: 8px;
    top: 8px;
    border-radius: 2.5% !important;
    color: gray !important;
}
.inventory-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.inventory-grid-header-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.inventory-grid-header-wrapper p {
    font-size: 16px;
}
.inventory-grid-container {
    display: grid;
    /*height: calc(52.1vh + 50px);*/
    /*height: calc(52.1vh + 30px);*/
    height: calc((10.42vh * 5) + (6px * 4));
    grid-template-columns: repeat(5, 10.2vh);
    grid-auto-rows: 10.42vh;
    gap: 6px; /* espacios entre cada casillero */
    overflow-y: scroll;
}
.inventory-slot,
.item-notification-item-box,
.hotbar-item-slot {
    background: radial-gradient(circle, rgba(98, 1, 189, 0.774), rgba(24, 0, 37, 0.507) 100%); /* gradiante de todos los casilleros */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    image-rendering: -webkit-optimize-contrast;
    position: relative;
    color: #c1c2c5;
    border: 1px solid rgba(95, 5, 168, 0.493); /* bordes de casilleros de inventario*/
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
/* ------------------------- */
/*.inventory-slot:hover,
.item-notification-item-box:hover,
.hotbar-item-slot:hover,
.slot-hotbar-start {
    background: radial-gradient(circle, rgba(98, 1, 189, 0.774), rgba(24, 0, 37, 0.507) 100%);
    border: 1px solid rgba(95, 5, 168, 0.493);
}*/
/* -------------------- */
.inventory-slot-label-box {
    background-color: #5c00998f;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 0.25vh;
    border-bottom-right-radius: 0.25vh;
    /*border-top-color: #0003;
    border-top-style: inset;
    border-top-width: 1px;*/
}
.inventory-slot-label-text {
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 3px;
    font-weight: 400;
    font-family: Roboto;
    font-size: 11px;
}
.inventory-slot-number {
    background: radial-gradient(circle, #6b1ad4, #151116); /* Gradiente morado a rosado */
    color: #fff;
    border: 1px solid #6b1ad4;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 1px;
    padding: 0;
    font-size: 10.5px;
    font-family: Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 5px #ffffffb2;
}

.item-slot-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.item-slot-wrapper p {
    font-size: 12px;
}
.item-slot-wrapper:hover .inventory-slot,
.item-slot-wrapper:hover .item-notification-item-box,
.item-slot-header-wrapper,
.item-hotslot-header-wrapper {
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: flex-end;
}
.item-hotslot-header-wrapper {
    /*height: 100%;*/
    justify-content: space-between !important;
}
.item-slot-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px;
    gap: 3px;
    height: 100%;
}
.item-slot-info-wrapper p {
    text-align: right;
    font-weight: 400;
    color: #fff;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 12px;
}
.item-slot-currency-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 3px;
}
.item-slot-currency-wrapper p {
    font-size: 14px;
    text-shadow: 0.1vh 0.1vh 0 rgba(0, 0, 0, 0.7);
}
.item-slot-price-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 3px;
}
.item-slot-price-wrapper p {
    font-size: 14px;
    text-shadow: 0.1vh 0.1vh 0 rgba(0, 0, 0, 0.7);
}
.tooltip-wrapper {
    pointer-events: none;
    display: flex;
    background-color: #000000bf;
    width: 200px;
    padding: 8px;
    flex-direction: column;
    min-width: 200px;
    color: #fff;
    font-family: Roboto;
    border-radius: 4px;
    border-color: #0003;
    border-style: inset;
    border-width: 1px;
}
.tooltip-wrapper p {
    font-size: 12px;
    font-weight: 400;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.tooltip-header-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.tooltip-header-wrapper p {
    font-size: 15px;
    font-weight: 400;
}
.tooltip-crafting-duration {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.tooltip-crafting-duration svg {
    padding-right: 3px;
}
.tooltip-crafting-duration p {
    font-size: 14px;
}
.tooltip-ingredients {
    padding-top: 5px;
}
.tooltip-ingredient {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.tooltip-ingredient img {
    width: 28px;
    height: 28px;
    padding-right: 5px;
}
.hotbar-container {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 2vh;
}
.hotbat-container-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    background-color: #000000bf;
    border-radius: 2rem;
    background-image: radial-gradient(circle at top left, rgba(98, 1, 189, 0.774), rgba(128, 0, 128, 0) 30%), radial-gradient(circle at bottom right, rgba(140, 0, 233, 0.4), rgba(128, 0, 128, 0) 30%);
}
.hotbar-item-slot {
    width: 10.2vh;
    height: 10.2vh;
}
.hotbar-slot-header-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.item-notification-container {
    display: flex;
    overflow-x: scroll;
    flex-wrap: nowrap;
    gap: 2px;
    position: absolute;
    bottom: 20vh;
    left: 50%;
    width: 100%;
    margin-left: calc(50% - 5.1vh);
    transform: translate(-50%);
    
}
.item-notification-action-box {
    width: 100%;
    color: #c1c2c5;
    background-color: #0c0c0c66;
    text-transform: uppercase;
    text-align: center;
    border-top-left-radius: 0.25vh;
    border-top-right-radius: 0.25vh;
    font-family: Roboto;
}
.item-notification-action-box p {
    font-size: 11px;
    padding: 2px;
    font-weight: 600;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.tittle-grid-wrapper {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.tittle-grid-wrapper .tittle-container {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 20px;
}
.tittle-grid-wrapper .tittle-container .tittle {
    width: 45px;
    height: 45px; /* debe ser cuadrado para formar un rombo perfecto */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background: linear-gradient(195deg, rgba(104, 0, 202), rgb(132, 0, 255));
    transform: rotate(45deg);
    border-radius: 4px;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.tittle-grid-wrapper .tittle-container .tittle > * {
    transform: rotate(-45deg); /* para que el contenido dentro no esté girado */
}

.tittle-grid-wrapper .tittle-container .container {
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.tittle-grid-wrapper .tittle-container .container h1 {
    background: linear-gradient(0deg, rgba(104, 0, 202), rgb(132, 0, 255));
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 5px rgba(135, 0, 212, 0.5), 0 0 10px rgba(255, 0, 255, 0);
    font-weight: 700;
    font-size: 30px;
    padding: 0;
    margin: 0;
}
.tittle-grid-wrapper .tittle-container .container h2 {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    margin: 5px 0 0;
    padding: 0;
}
.item-image {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7vh;
    pointer-events: none;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/

.item-notification-item-box {
    height: 10.2vh;
    width: 10.2vh;
    border-radius: 10px;
    overflow: hidden; /* 👈 esto es CLAVE para que el interior no se salga del borde */
    background: radial-gradient(circle, rgba(107, 0, 207, 0.938), rgba(2, 0, 3, 0.726));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    image-rendering: -webkit-optimize-contrast;
    color: #c1c2c5;
    border: 1px solid rgba(95, 5, 168, 0.493);
}
.durability-bar {
    background: rgba(0, 0, 0, 0.5);
    height: 3px;
    margin-right: 5%;
    margin-left: 5%;
    overflow: hidden;
}
/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.weight-bar {
    width: 80%;
    background: rgba(0, 0, 0, 0.4);
    height: 1.2vh;
    border-radius: 4.5px;
    /*border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;*/
    overflow: hidden;
}
.transition-fade-enter {
    opacity: 0;
}
.transition-fade-enter-active {
    opacity: 1;
    transition: opacity 0.2s;
}
.transition-fade-exit {
    opacity: 1;
}/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.transition-fade-exit-active {
    opacity: 0;
    transition: opacity 0.2s;
}/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.transition-slide-up-enter {
    transform: translateY(200px);
}/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.transition-slide-up-enter-active {
    transform: translateY(0);
    transition: all 0.2s;
}/*REDESIGN BY ORIGINS SOLUTIONS @nash.dev :discord: https://discord.gg/xzpNXPzvgb*/
.transition-slide-up-exit {
    transform: translateY(0);
}
.transition-slide-up-exit-active {
    transform: translateY(200px);
    transition: all 0.2s;
}