@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500&family=Mochiy+Pop+One&display=swap');
/* ESTILOS UNIVERSALES */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Comfortaa', sans-serif;
    color: rgb(255,255,255) !important;
    transition: 0.1s all ease-in;
    text-shadow: black 2px 2px 2px;
    font-size: 16px; /* EL tamaño de letra por defecto */
    text-align: center;
}
/* Para navegadores basados en WebKit (por ejemplo, Chrome, Safari) */
::-webkit-scrollbar {
    width: 10px !important;
}
::-webkit-scrollbar-track {
    /*background-color: white;*/
    background-color: rgb(18, 20, 28);
}  
::-webkit-scrollbar-thumb {
    /*background-color: rgb(18, 20, 28);*/
    background: rgb(255, 255, 255);
}

/* ESTILOS CUERPO PÁGINA */
body{
   /*background-color: #1f2432;
   min-height: 100vh;
   display: grid;
   place-items: center;*/
   overflow-x: hidden;
   background-attachment: fixed !important;
}
.btn-success{
    background: green !important;
    border-color: white !important;
}
.btn-danger{
    background: red !important;
    border-color: white !important;
}

header{
    position: sticky;
    top: 0;
    z-index: 1030;
}

#extraBackground{
    /*width: 103vw;*/
    height: 181vh;
    /*background: url(/img/dashboard/botIcon.png) top left no-repeat, url(/img/dashboard/botIcon.png) bottom left no-repeat;*/
    position: fixed;
    z-index: -1;
    filter: blur(1px) drop-shadow(2px 4px 6px black) brightness(0.4);
    /*mix-blend-mode: difference;*/
    text-align: center;
    transform: rotate(30deg) translate(-13em, -18em) scale(1.11);
    transition: 0s !important;
}
/* https://www.sitepoint.com/css3-transform-background-image/ */
/*#extraBackground::before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(/img/dashboard/botIcon.png) 0 0 repeat;
    transform: rotate(30deg);
}*/
#extraBackground img{
    width: 20%;
    height: 16%;
    border: 5px dashed white;
    /*transform: rotate3d(1, 1, 1, 45deg);*/
    /*position: fixed;
    margin: 20em;*/
}
/*#extraBackground img:nth-child(2n+1){
    visibility: hidden;
}*/

/*.hbs{
    display: none;
}*/

/* https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag */
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #1d212b;
    color: #ffffff;
    font-size: 70%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 10%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

@keyframes navbarOpen{
    from{
        transform: translateY(-66px);
    }
    to{
        transform: translateY(0);
    }
}
.navbar{
    background: #299ebd;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.navbar-collapse{
    overflow: hidden; /* Para ocultar el contenido cuando está colapsado */
    max-height: 300px !important; /* Inicialmente colapsado */
    transition: 0.3s ease-in-out;
}
#navbar{
    width: 100%;
}
.navbar-nav{
    flex-direction: row;
}
/*.navbar:hover{
    cursor: pointer;
}*/
.nav-link:hover{
    font-size: larger;
    /*text-decoration: underline !important;*/
}
.nav-link.disabled{
    color: lightgrey !important;
}
.navbar-brand{
    margin-right: 0;
}
.navbar-toggler{ /* Botón para mostrar las opciones de la navbar escondidas en móviles */
    width: 100%;
    position: absolute;
    top: 0;
}
.navbar-toggler-icon{  
    font-size: x-large;
}

#backButton{
    margin: 5px;
    display: none; /* Se mostará cuando la página no sea main */
    position: absolute;
}
#backButton input{
    width: 3em;
    filter: drop-shadow(2px 4px 3px black);
    position: fixed;
}

#userName{
    margin-right: 8px;
    font-size: 'large';
}
input[type="text"],input[type="number"],input[type="email"],textarea.form-control{
    background-color: rgb(19 19 19) !important;
    /* border: none; */
}
input:active:not(#userIcon, .form-control, [type="range"], [type="number"]), button:active{
    transform: scale(1.1);
}
input[type="number"]:invalid{
    border: 1px solid red;
}
.dropdown#loggedUser{
    /*display: none; /* No se ve hasta que el usuario inicia sesión */
    height: 45px;
    margin: 2.5px;
    /*border: 1px solid red;*/
    position: absolute;
    right: 0;
    top: 0;
    
    display: flex;
    justify-content: end;
    align-items: center;
    /* width: min-content; */
    /* flex-wrap: wrap; */
    min-width: 14em;
    
    z-index: 1030; /* Para que se vea encima de la navbar */
}
#loggedUser #userIcon{
    width: 43px;
    border-radius: 100px;
    /*filter: drop-shadow(0 0 2px #9d8400); /* premium */
}
#loggedUser #userIcon:hover{
    filter: brightness(0.9);
}
#userOptions{
    transform: translate(0,0) !important;
    background-color: #22262e;
    transition: 0s;
    font-size: 0.9em;
    /* position: static !important; */
    margin: 4em 0 !important;
    inset: 0px auto auto 0px;
    right: 0 !important;
}
#userOptions li{
    background-color: #22262e;
    border: none;
    text-align: left;
}
#userOptions li#ownerOnly *{
    color: red !important;
}
.dropdown-item i, .dropdown-item img{
    margin: 0 5px;
}
.dropdown-item:hover{
    cursor: pointer;
    background-color: cadetblue;
}
.dropdown-item:active{
    background-color: brown;
}

@keyframes bgIconAnimation{
    from{
        /*backdrop-filter: blur(0);*/
        /*background-position: 50.7em 20.3em;*/
        background-size: 0%;
    }
    50%{
        backdrop-filter: blur(0);
    }
    to{
        backdrop-filter: blur(8px);
        /*background-position: 50% 50%;*/
        background-size: 20%;
    }
}

@keyframes iconAnimation{
    from{
        transform: scale(0) rotate(-120deg);
    }
    25%{
        transform: scale(0.25) rotate(-90deg);
    }
    50%{
        transform: scale(0.5) rotate(-60deg);
    }
    75%{
        transform: scale(0.75) rotate(-30deg);
    }
    to{
        transform: scale(1) rotate(0deg);
    }
}

.container-fluid a{
    color: #00d0ff !important;
}
.container-fluid{
    width: 100%;
    min-height: 93.8vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*border: 1px solid red;*/
}
.info{
    /*border: 1px solid red;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    font-weight: 100%;
    text-align: center;
    font-size: medium;
    margin: 1.5em 0 0;
    background: #232323ba;
    /*border-radius: 100px;*/
    padding: 1em 1em 0em;
    border: 3px double;
    box-shadow: 0px -10px 30px black;
}
.block{
    margin: 10px 0;
}

/* EFECTO MÁQUINA ESCRIBIR */
h1:not(#statsPanel h1){
    display: block;
    white-space: nowrap;
    border-right: 1px solid;
    /*width: 11ch;*/

    /*animation: typing 2s steps(11), blink .5s infinite step-end alternate;*/
    overflow: hidden;
    font-family: monospace;
    white-space: pre-line; /* Para que haga saltos de línea si el texto es muy largo */
}
@keyframes typing {
    from { width: 0 }
}
@keyframes blink {
    50% { border-color: transparent}
}

.alert{
    width: 26em;
    right: 20px;
    bottom: 3px;
    /*margin: 10px;*/
    float: right;
    position: fixed;
    display: none !important; /* Sale cuando es requerido */
    animation-duration: 0.3s;
}
.alert i::before{
    font-size: x-large;
    margin-right: 5px;
}
@keyframes alertOpen{
    from{
        transform: translate(365px, 0);
    }
    to{
        transform: translate(0, 0);
    }
}
@keyframes alertClose{
    from{
        transform: translate(0, 0);
    }
    to{
        transform: translate(365px, 0);
    }
}

a[rel="license"]{
    position: fixed;
    bottom: 0;
    left: 5px;
}
a[rel="license"] span{
    font-size: x-small;
}

#google_translate_element{
    display: none;
    /* POR SI SE ACTIVA */
    /* position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0 auto; */
}
#google_translate_element select, .goog-te-combo option{
    color: black !important;
}
select.goog-te-combo::-webkit-scrollbar-thumb {
    background: white !important;
}
/* Texto traducido */
font[dir="auto"]{
    font-size: inherit !important;
    color: inherit !important;
}

.collapsible i{
    margin: 0 5px;
}

.form-control{
    background-color: transparent !important;
}

hr{ /* Para que se vean bien y no sean afectados por Bootstrap */
    overflow: auto;
    border-color: inherit;
}

/* Clase para los elementos cuando se desactivan los efectos */
section .content.noEffects, input[type="checkbox"] + .slider.noEffects, input[type="checkbox"].noEffects + .slider.noEffects:before, #btnSaveSettings.noEffects, #visualStats .content.noEffects{
    transition: none !important;
    transform: none;
    box-shadow: none !important;
}
#backButton input.noEffects, img.noEffects{
    filter: none !important;
}
.infoButtons button.noEffects{
    box-shadow: none !important;
    transform: scale(1.3) !important;
}
a.noEffects:hover, .infoButtons button.noEffects:hover, [data-title].noEffects:hover:after, #loggedUser #userIcon.noEffects:hover, .dropdown-item.noEffects:hover, ul#settingTypes li:not([selected]).noEffects:hover, .dropdown.noEffects:hover .dropdown-content.noEffects, .slider.gradientDirection.noEffects:hover, #statsPanel .active.noEffects, .collapsible.noEffects:hover, img.noEffects:hover,
input.noEffects:active:not(#userIcon, .form-control, [type="range"], [type="number"]), button.noEffects:active {
  transform: none !important;
  transition: none !important;
  filter: none !important;
  box-shadow: none !important;
  text-decoration: none;
}
[data-title].noEffects:hover:after{
    transition: none !important;
    background-color: #1d212b !important;
}
.nav-link.noEffects:hover{
    font-size: inherit !important;
}
.infoButtons button.noEffects:hover{
    transform: scale(1.3) !important;
}
input[type="checkbox"] + .slider.noEffects:before{
    -webkit-transition: none !important;
    transition: none !important;
}
ul#settingTypes li.noEffects:not([selected]):hover, ul#settingTypes li.active.noEffects:not([selected]):active{
    /*background: #1a1a1a !important;*/
    background-color: transparent !important;
    font-weight: bold;
}
.dropdown-item.noEffects,.dropdown-item.noEffects:hover,.dropdown-item.noEffects:active {
    background-color: #22262e !important;
    background: #22262e !important;
}
li#gradient:has(.dropdown-item.noEffects) span{
    color: inherit !important;
}
li#gradient:not(:has(.dropdown-item.noEffects)) span{
    color: transparent !important; /* Para que vuelva a verse el degradado */
}
.dropdown-item.noEffects:hover,.dropdown-item.noEffects:active{
    font-weight: bold;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate */
section .collapsible {
    cursor: pointer;
    /*width: 90%;*/
    border: none;
    outline: none;
    margin: 0 auto;
    border-radius: 100px;
}  
section .active, .collapsible:hover {
    background-color: #4e4e4e33;
}
section .content {
    background: #4e4e4e33;
    padding: 0 18px;
    max-height: 0;
    overflow: hidden !important;
    transition: max-height 0.2s ease-out;
    margin: 10px 0;
    width: 100%;
}

/* ASPECTO EN MÓVIL */
@media all and (max-width: 900px){
    #extraBackground{
        width: 350vw;
        transform: rotate(30deg) translate(-85em, -27em) scale(1.11) !important;
    }
    .navbar-nav{
        flex-direction: column;
        align-items: center !important;
    }
}