@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");


@font-face {
    font-family: 'MoonFont';
    src: url('../fonts/bankgothic.ttf') format('opentype');
}
body {
	overflow: hidden;
    background-color: transparent;
}


#menu {
    background: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100vw; /* Ocupar todo el ancho de la ventana */
    height: 100vh; /* Ocupar toda la altura de la ventana */
    margin: 0; /* Eliminar márgenes predeterminados */
    padding: 0; /* Eliminar relleno predeterminado */
    animation: vanishIn 1s ease-in 0s 1 normal none;
}

#container-fluid {
    position: fixed;
    top: 50vh;
    left: 90vh;
    transform: translate(-50%, -50%);
background-image: url('../png/bg.jpg');
    background: 
        /* Degradado azul con brillo */
        linear-gradient(135deg, #4069ff 0%, #2a3c99 50%, #1a1a2e 100%),
        /* Textura sutil de ruido */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" opacity="0.05"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>'),
        /* Brillo central */
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 40%);
    background-blend-mode: overlay, screen;
    background-size: cover;
    border-radius: 30px;
    width: 150vh;
    height: 74vh;
    border: 15px solid #2a2a2a;
    box-shadow: 
        0 0 0 1px #1a1a1a,
        0 0 0 15px #333,
        0 5px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    /* Efecto de partículas sutiles (opcional) */
    position: relative;
}

#container-fluid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 20% 70%, rgba(64, 105, 255, 0.2) 0%, transparent 40%);
    pointer-events: none;
}

#container-fluid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 2vh;
    height: 15vh;
    background: #2a2a2a;
    border-radius: 0 20px 20px 0;
    z-index: 1;
}

#container-fluid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.5vh;
    transform: translateY(-50%);
    width: 1vh;
    height: 1vh;
    background: #1a1a1a;
    border-radius: 50%;
    box-shadow: 
        inset 0 0 2px rgba(255, 255, 255, 0.5),
        0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.head {
    display: flex;
    width: 96%;
    max-width: 96%;
}

.information-pj {
	position: absolute;
	/* border: 1px solid #ffffff3b;
	background-color: rgba(255, 255, 255, 0.233);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.253); */
	border-radius: 10px;
	padding: -3.5vh;
	margin: 2vh;
	color: white;
	height: 12vh;
	/* bottom: 10vh; */
	bottom: 0.7vh;
	left: 36vh;
}

.back-admin {
    border: 1px solid #ffffff3b;
	background-color: rgba(255, 255, 255, 0.233);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.253);
    border-radius: 10px;
    padding: 0.5vh;
    margin: 3.5vh;
    color: white;
    width: 96%;
    max-width: 96%;
    max-height: 80%;
}

.infopj {
    font-family: 'Oswald';
    font-style: italic;
	font-size: 2vh;
    text-align: center;
    width: 150px;
    background-color: #ffffff4a;
    box-shadow: 0 0 20px rgb(255, 255, 255, 13%), inset 0 0 20px rgb(255, 255, 255, 13%);
    border-radius: 10px;
    padding: 1vh;
    margin: 1vh;
    cursor: pointer;
    color: black;
}

.trabajo {
    font-family: 'Oswald';
    font-style: italic;
	font-size: 2vh;
    width: 250px;
    background-color: #ffffff4a;
    box-shadow: 0 0 20px rgb(255, 255, 255, 13%), inset 0 0 20px rgb(255, 255, 255, 13%);
    border-radius: 10px;
    padding: 1vh;
    margin: 1vh;
    cursor: pointer;
    color: black;
}

.buttonspj {
    font-family: 'Oswald';
    font-style: italic;
    font-size: 2vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
    background-color: rgba(255, 255, 255, 0.29);
    box-shadow: rgba(255, 255, 255, 0.13) 0px 0px 20px, rgba(255, 255, 255, 0.13) 0px 0px 20px inset;
    border-radius: 10px;
    padding: 1vh;
    margin: 1vh;
    width: 21vh;
    cursor: pointer;
}

.buttonspj i, .buttonsadmin i {
    font-size: 2em; /* Tamaño del icono */
}

.buttonspj span, .buttonsadmin span {
    font-size: 1.2em; /* Tamaño del texto */
}

.buttonsadmin {
    font-family: 'Oswald';
    font-style: italic;
	font-size: 2vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: black;

    background-color: #ffffff4a;
    box-shadow: 0 0 20px rgb(255, 255, 255, 13%), inset 0 0 20px rgb(255, 255, 255, 13%);
    border-radius: 10px;
    padding: 1vh;
    margin: 1vh;
    width: 200px;
    cursor: pointer;
}

.cuerpo {
    display: flex;
}

.targets {
    display: flex;
    margin-top: 2vh;
    margin-bottom: 110vh;
    margin-left: 3.5vh;
}

.targets img {
    width: 750px;
    height: 313px;
    margin-right: 5vh;
    border-radius: 10px;
    box-shadow: 0 0 20px rgb(255, 255, 255, 13%), inset 0 0 20px rgb(255, 255, 255, 13%);
    cursor: pointer;
}

.imgNotPermiss {
    filter: grayscale(100%);
}

.targets img:hover, .buttonspj:hover {
    background-color: rgba(233, 233, 233);
    box-shadow: 0 0 10px white, inset 0 0 10px white;
    color: black;
    transform: scale(1.05);
    transition: 1s;
}

.information {
    background-color: rgba(0, 0, 0, 0.397);
    box-shadow: 0 0 10px black, inset 0 0 10px black;
    border-radius: 10px;
    padding: 1vh;
    margin-top: 1vh;
    margin-right: 2vh;
    color: white;
    height: 68vh;
    left: 113vh;
    top: 1vh;
    position: absolute;
    width: 32vh;
}

.title {
    background-color: #0072ff;
    box-shadow: black 0px 0px 10px, black 0px 0px 10px inset;
    border-radius: 10px;
    color: rgb(0 0 0);
    text-align: center;
    font-size: 2vh;
    font-family: 'Oswald';
    font-style: italic;
}

.comercios {
    background-color: rgba(255, 255, 255, 0.29);
    /* box-shadow: black 0px 0px 10px, black 0px 0px 10px inset; */
    padding: 1vh;
    border-radius: 10px;
    height: 66vh;
    max-height: 75vh;
}

.list-commerces, .list-gangs {
    max-height: 260px;
    overflow: auto;
    cursor: pointer;
}

.comercio, .robos {
    background-color: black;
    border-radius: 10px;
    width: 380px;
    margin-top: 1vh;
    padding: 1vh;
    font-family: 'Oswald';
    font-style: italic;
    transition: transform 0.3s ease-in-out;
}

.comercio:hover, .robos:hover {
    animation: vibration 0.3s ease-in-out infinite alternate;
}

@keyframes vibration {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(5px);
    }
}

::-webkit-scrollbar {
    width: 1vh; /* Ancho del scrollbar */
}

/* Estilos para el scrollbar vertical */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0); /* Color del thumb */
    border-radius: 6px; /* Radio de borde del thumb */
}

/* Estilos para el scrollbar horizontal */
::-webkit-scrollbar-thumb:horizontal {
    background-color: rgba(0, 0, 0); /* Color del thumb */
}

/* Estilos para el scrollbar cuando se le da hover */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0); /* Color del thumb al hacer hover */
}

.mini-logo {
    position: fixed;
    top: 2vh;
    right: 2vh;
    opacity: 0.8;
    width: 10vh;
}

.mini-logo img {
    width: 100%;
}

.player-stats {
	display: flex;
	flex-wrap: wrap;
	background: linear-gradient(13deg, rgb(0 0 0 / 59%), rgb(0 0 0 / 84%));
	box-shadow: 0 0 30px rgb(0 0 0 / 44%);
	border: 0.1vh solid #fcfcfc31;
	color: white;
	border-radius: 10px;
	width: 28vh;
	font-size: 1.5vh !important;
	padding: 1vh;
	position: relative;
	justify-content: space-between;
	height: 13vh;
	align-items: center;
	margin-top: 2vh;
	bottom: -54vh;
	left: -79vh;
}

.player-stats .bgicon {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

.player-stats .bgicon i {
	font-size: 13vh;
	color: rgba(255, 255, 255, 0.123);
	position: absolute;
	top: -4vh;
	left: 2vh;
	transform: rotate(25deg);
}

.player-stats .player-stat {
	width: calc(50% - 0.8vh);
	/* padding:.25vh; */
	margin: 0.1vh 0.25vh;
	line-height: 1.2vh;
	font-size: 1.4vh;
	font-family: 'Oswald';
	font-style: italic;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* border:1px solid rgba(255, 255, 255, 0.219); */
	/* background-color: rgba(255, 255, 255, 0.123); */
}

.player-stats .player-stat .stat-value {
	color: var(--color-acent);
	text-shadow: 0 0 10px var(--color-acent);
	transform: scale(1.2);
	font-size: 1.8vh;
}

.player-stats .player-stat .stat-value.experience {
	color: #0072ff;
	text-shadow: 0 0 10px black;
}

.zona-superior {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2vh;
}

.info-base {
    margin: 2vh;
	/* border: 1px solid #ffffff3b;
	background-color: rgba(255, 255, 255, 0.233);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.253); */
	width: 81vh;
	height: 11vh;
	border-radius: 10px;
	display: flex;
	gap: 1.5vh;
	align-items: center;
	padding: 1vh;
	color: white;
}

.user-avatar {
	width: 9vh;
	background-size: cover;
	background-position-x: center;
	border-radius: 10px;
	height: 100%;
}

.home h4 {
	margin-bottom: 0;
}

.home .user-info {
	width: 100%;
	color: white;
	display: flex;
	justify-content: space-between;
}

.home .user-stats {
	width: 33vh;
}

.user-stat {
    font-family: 'Oswald';
    font-size: 1.75vh;
    letter-spacing: inherit;
    background-color: rgba(255, 255, 255, 0.29);
    border-radius: 100px;
    padding: 0.3vh 1vh 0px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums; /* Elimina decimales visualmente */
}

.player-name {
    font-family: 'Oswald';
    font-style: italic;
    font-size: 3.5vh;
    line-height: 2.5vh;
    text-shadow: 0 0 20px #ffffffc2;
    padding-top: 0.7vh;
    position: relative;
    padding-bottom: 1vh;
}

.player-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40vh;
    height: 2px;
    /* background-color: rgb(0, 0, 0); */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.0);
}

.home .player-stats .bgicon {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

.home .player-stats .bgicon i {
	font-size: 13vh;
	color: rgba(255, 255, 255, 0.123);
	position: absolute;
	top: -4vh;
	left: 2vh;
	transform: rotate(25deg);
}

.home .player-stats .player-stat {
	width: calc(50% - 0.8vh);
	/* padding:.25vh; */
	margin: 0.1vh 0.25vh;
	line-height: 1.2vh;
	font-size: 1.8vh;
    font-family: 'Oswald';
    font-style: italic;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* border:1px solid rgba(255, 255, 255, 0.219); */
	/* background-color: rgba(255, 255, 255, 0.123); */
}

.home .player-stats .player-stat .stat-value {
	color: var(--color-acent);
	text-shadow: 0 0 10px var(--color-acent);
	transform: scale(1.2);
	font-size: 1.8vh;
}

.home .player-stats .player-stat .stat-value.experience {
	color: goldenrod;
	text-shadow: 0 0 10px goldenrod;
}

.home .user-stats {
	width: 33vh;
}

.home .user-stat {
    font-family: 'Oswald';
    font-style: italic;
	font-size: 2vh;
	/* margin-right: 2vh; */
	color: rgb(255 255 255);
	padding-top: 0.5vh;
	letter-spacing: 0.1vh;
	background-color: #ffffff4a;
	border-radius: 100px;
	padding: 0 1vh;
	margin-top: 1vh;
	padding-top: 0.3vh;
	white-space: nowrap;
}

.secondary-box {
	background: linear-gradient(45deg, #0000005c, #4848485c);
	border-radius: 1.5vh;
	color: #ffffffb8;
	padding: 1vh;
	border: 1px solid #ffffff0f;
	width: max-content;
	box-shadow: 0 0 10px #0000002b, inset 0 0 40px rgb(0 0 0 / 0%);
	backdrop-filter: blur(5px);
	transition: 0.5s var(--cubic) all;
	cursor: pointer;
	background-color: rgba(35, 183, 252, 0);
	/* border: 1px solid #ffffff0d; */
	border: unset !important;
}

.secondary-box:hover {
	background-color: rgb(255 255 255 / 22%);
	box-shadow: 0 0 20px rgb(255 255 255 / 18%);
}

.secondary-box .title {
    font-family: 'Oswald';
    font-style: italic;
	font-size: 2vh;
}


/* SISTEMA DE BANNER */
.card-container {
    position: relative;
    width: 550px;
    height: 363px;
    margin-right: 5vh;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.card-container:hover .banner-logo {
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.card-container:hover .banner-logo i {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.card-container:hover {
    box-shadow: 0 0 10px white, inset 0 0 10px white;
    transform: scale(1.05);
    transition: 1s;
}

.card-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    height: 100px;
    padding: 15px;
    display: flex;
    align-items: flex-end;
}

.banner-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translateY(-1.5vh);
    transition: all 0.3s ease;
}

.banner-logo i {
    color: rgb(255, 213, 0);
    font-size: 22px;
    text-shadow: 0 0 5px rgba(255, 213, 0, 0.5);
    transition: all 0.3s ease;
}

.banner-text {
    flex-grow: 1;
}

.banner-title {
    color: #fff;
    margin: 0;
    font-family: 'Oswald';
    font-style: italic;
    font-size: 2.5vh;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 5px;
}

.banner-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20vh;  /* Aumentado de 40px a 100px para hacerlo más largo */
    height: 0px;
    background-color: rgb(0, 0, 0);
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
}

.banner-logo {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
}

.banner-logo i {
    color: rgb(255, 213, 0);
    text-shadow: 0 0 5px rgba(255, 213, 0, 0.5);
}

.banner-subtitle {
    color: rgba(255,255,255,0.8);
    margin: 2px 0 0 0;
    font-size: 1.5vh;
    font-family: "Oswald", sans-serif;
}


/* Reemplazar Bebas Neue con MoonFont en todas las clases */