@font-face {
    font-family: poppins;
    src: url("Poppins/Poppins-Regular.ttf")
}

@font-face {
    font-family: medieval;
    src: url("MedievalSharp/MedievalSharp-Regular.ttf")
}


* {
    margin: 0;
    padding: 0;
    font-family: poppins
}

html,
body {
    position: relative;
    overflow-x: clip
}

body {
    background-color: white
}

main {
    background-size: cover;
    background-position: center
}

::-webkit-scrollbar {
    width: 14px
}

::-webkit-scrollbar-track {
    background: #0c0c0c
}

::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 10px;
    border: 3px solid #000
}

.deshabilitado {
    height: 100vh;
    overflow: hidden
}

#cargando {
    background-color: #10151C;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 2s;
    position: absolute;
    width: 100vw;
    z-index: 4
}

#cargando div {
    background-image: url("https://media.tenor.com/YS22pAvUe0YAAAAi/fire-sword.gif");
    background-position: center;
    background-size: cover;
    width: 480px;
    height: 272px;
    animation: girar 2s linear infinite;
}
@keyframes girar {
    0% {
        transform: rotate(-360deg)
    }
}

a {
    text-decoration: none;
    color: #fff
}

p.interactuable:hover {
    transform: scale(1.1)
}

header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
    background-image: url("https://i.pinimg.com/736x/1c/7a/72/1c7a7237ef48e78414a3e7f87b0ac768.jpg");
    background-color: gray;
    background-size: 40vh;
    background-repeat: repeat-x;
    color: #fff;
    z-index: 5
}

header h1 {
    font-size: 6vw
}

header h1,
#barras {
    margin: 0 2vh
}

.rellenado {
    padding: 1vh;
    background-color: #fff;
    border-radius: 2vh;
    width: fit-content
}

.rellenadoOscuro {
    color: #fff;
    background-color: #000
}

p.rellenado {
    width: fit-content;
    max-width: 80vw
}

p.separador {
    margin-top: 15vh
}

div .rellenado,
#cabeceraPersonaje .rellenado {
    margin: auto;
    margin-top: 2vh
}

.rellenado+button {
    margin: 2vh auto
}

.rellenado+.rellenado {
    margin-top: 1vh
}

#progreso {
    position: sticky;
    top: 10vh
}

#progreso #loading-bar .bar {
    position: absolute;
    background-color: #3e3c5e
}

#barras {
    font-size: 4vh
}

#boton {
    display: none
}

nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 3;
    top: 10vh;
    text-align: center;
    transition: .2s;
    transform: translateX(100%)
}

#boton:checked~nav {
    transform: translateX(0%)
}

.enlaceDiario {
    color: #000
}

.enlaceDiario a {
    white-space: nowrap
}

nav a,
button,
.boton,
#controlesWeb .opcion {
    padding: 1vh 0;
    color: #fff;
    background-color: #3e3c5e;
    cursor: pointer;
}

nav a {
    border-top: 1px solid #000;
}

.selectorIcono {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vh;
}
.esfera {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4vh;
    width: 6vh;
    border-radius: 100%;
    text-shadow: none;
    padding: 1vh 0;
    color: #fff;
}

.boton a {
    display: block;
}

#controlesWeb {
    float: right;
    width: 0;
    position: sticky;
    z-index: 3;
    top: 13vh
}

#controlesWeb .opcion {
    position: absolute;
    right: 0;
    top: 4vh;
    margin: 1vh;
    margin-right: -0.1vh;
    border-radius: 100%;
    height: 4vh;
    width: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s transform;
    transform: translateY(-4vh);
    border: 0;
    z-index: 0;
}
#controlesWeb .desplegada {
    position: relative;
    right: 7vh;
    top: 0;
    z-index: 1;
    transform: translateY(0);
}

#controlesWeb .opcion.batalla {
    background-color: blue;
}
#controlesWeb .opcion.turno {
    background-color: gold;
}

i.deshabilitado, button.deshabilitado {
    opacity: .7;
    filter: grayscale(1);
    transition: 1s
}

button.deshabilitado:hover {
    background-color: #3e3c5e;
}

nav a:hover,
button:hover {
    background-color: #1c1a36
}

nav a:last-of-type {
    border-bottom: 1px solid #000
}

#dados, #cajaComun, .checkboxesInvisibles {
    text-align: center;
    width: 80vw;
    margin: 3vh auto;
    margin-top: 5vh;
    padding-bottom: 3vh;
    background-color: #6d6a8d;
    border-radius: 2vh;
    color: #fff;
    border: 3px solid #000
}

#cajaComun {
    width: fit-content;
    padding: 0 3vh;
}
#cajaComun div {
    display: flex;
    align-items: center;
    margin-bottom: 3vh;
    cursor: pointer;
}
#cajaComun .cantidadMonedas {
    background-color: white;
    color: black;
    border-radius: 2vh;
    flex-grow: 1;
    margin-right: 1vh;
}
#cajaComun .moneda {
    text-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px #fff;
}

#dados h3, #cajaComun h3 {
    padding: 1vh;
    position: relative;
    background-color: #6d6a8d;
    bottom: 2vh;
    width: fit-content;
    margin: auto;
    border-radius: 2vh;
    border: 3px solid #000
}

#dados #lanzarDados {
    font-size: 4vh;
    box-shadow: .3vh .3vh #000;
    position: relative
}

#dados #lanzarDados:active {
    font-size: 4vh;
    top: .3vh;
    left: .3vh;
    box-shadow: 0 0 transparent
}

#lanzarDados+div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vh;
    padding: 1vh
}

#dados input {
    width: 5vh;
    border-radius: 2vh;
    text-align: center;
    padding: 1vh
}

#dados input:disabled {
    background-color: #fff;
    color: #000
}

main {
    min-height: 86vh;
    padding: 2vh
}
.mainMisiones {
    min-height: 245vh;
}

#heroes,
#npcs,
.objetos,
.documentos,
.mapas,
#reliquias,
#enfrentados {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(1, 70vw);
    gap: 4vh;
    justify-content: center;
    margin: 2vh auto
}

#reliquias {
    grid-auto-rows: auto;
}

#npcs {
    grid-template-columns: repeat(1, 82vw);
    grid-auto-rows: auto
}

.objetos {
    grid-template-columns: repeat(2, 38vw);
    row-gap: 8vh;
    grid-auto-rows: auto
}

#trabajos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4vh;
    width: 70vw;
    margin: 2vh auto
}

#apartadoDiario {
    background-image: url("../img/Diario.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 10vh 10vh black, 0 0 5vh 5vh black inset;
    margin-top: 10vh;
}
#diario {
    display: grid;
    grid-template-columns: 80vw;
    justify-content: center;
    gap: 2vh;
    margin: 2vh 0
}

.añadir .diario .celdasTextarea {
    grid-column: initial
}

.diario textarea {
    height: 20vh
}

#apartadoGaleria {
    margin-top: 10vh;
    margin-bottom: 10vh;
}

#cabeceraPersonaje, #imagenLugar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 80vh;
    top: 10vh;
    background-color: wheat;
    box-shadow: 0 -5vh 5vh 2vh black inset;
    margin: 0 -2vh;
}
#cabeceraPersonaje .controlContenido {
    flex-grow: 1;
    width: 100%;
    align-items: center;
}
#espacioCabecera {
    height: 80vh;
    margin-bottom: 15vh;
}

#nombrePrincipal, #apartadoDiario h2, #apartadoGaleria h2 {
    justify-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #9b834a;
    text-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px #fff;
    width: 100%;  
}

#nombrePrincipal h1, #apartadoDiario h2, #apartadoGaleria h2 {
    font-size: 10vh;
}

#nombrePrincipal h1, #disposicionHeroe h2, #disposicionLugar h2:not(.rellenado), #apartadoDiario h2, #apartadoGaleria h2 {
    margin: auto;
    margin-bottom: -2vh;
    font-family: medieval;
    font-variant: small-caps;
}

#apartadoDiario h2, #apartadoGaleria h2 {
    margin-bottom: 0;
}

#apartadoDiario h2 + button, #apartadoGaleria h2 + button {
    margin-top: 2vh;
}

.seccionImportante h2 {
    color: #9b834a;
    text-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px #fff;
    margin-bottom: 2vh;
}

#nombrePrincipal img {
    height: 4vh;
}

#disposicionHeroe, #disposicionLugar {
    display: grid;
    grid-template-areas: 
        "info"
        "inventario"
        "habilidades"
        "vinculos"
        "estadisticas"
        "atributos"
    ;
    width: 90vw;
    margin: auto;
    margin-bottom: 5vh;
    gap: 1vh;
    grid-template-rows: auto 1fr;
}

#disposicionHeroe #inventario {
    grid-area: inventario;
}
#disposicionHeroe #info {
    grid-area: info;
}
#disposicionHeroe #habilidades {
    grid-area: habilidades;
}
#disposicionHeroe #vinculos {
    grid-area: vinculos;
}
#disposicionHeroe #estadisticas {
    grid-area: estadisticas;
}
#disposicionHeroe #atributos {
    grid-area: atributos;
}

.seccionImportante {
    background-color: #111318;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.listaSeccionImportante {
    height: auto;
    max-height: 40vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 2vh;
    padding-bottom: 4vh;
    flex-grow: 1;
}

#disposicionHeroe .botonAñadir, #disposicionLugar .botonAñadir {
    width: -webkit-fill-available;
    margin: 2vh;
    margin-top: 0;
    height: auto;
}

#disposicionHeroe h2, #disposicionLugar h2:not(.rellenado) {
    border-bottom: 3px solid #9b834a;
    font-size: xx-large;
    color: #9b834a;
    text-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px #fff;
    margin: 2vh;
}

#info #foto {
    height: 20vh;
    width: 20vh;
    background-size: cover;
    background-position: center;
    position: relative;
    bottom: 10vh;
    border-radius: 100%;
    border: 5px solid #9b834a;
    box-shadow: 0 0 1vh 1vh black;
    margin: auto;
    margin-bottom: -8vh;
}

#info div:last-of-type {
    padding: 2vh;
}

#info .cita {
    font-size: larger;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black, -3px 2px black;
}

#inventario div:not(.objetoInventario), #inventarioHabilidades div:not(.objetoInventario) {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2vh;
}

#inventarioHabilidades div:not(.objetoInventario) {
    width: 80vw;
    margin: auto;
    padding-top: 0;
}

#vinculos div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2vh;
}

#vinculos .listaSeccionImportante {
    gap: 4vh;
}

#vinculos div.fotoPerfil {
    flex-wrap: nowrap;
    gap: 0;
    flex-direction: column;
    width: 20vh;
    height: 20vh;
    border-radius: 100%;
    border: 5px solid #9b834a;
    align-items: center;
    flex-shrink: 0;
}

#vinculos .fotoPerfil .rellenado {
    text-align: center;
    margin-top: 0;
    position: relative;
    bottom: 1vh;
    background-color: black;
    color: #9b834a;
    text-shadow: 1px 1px white, -1px -1px white, -1px 1px white, 1px -1px white;
    font-family: medieval;
    font-size: large;
}

#disposicionHeroe div.flechas {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    flex-grow: 1;
    justify-content: space-between;
    background-color: transparent;
}

#vinculos .flechas {
    position: relative;
    right: 3vh;    
    bottom: 1vh;
}

.flecha.deshabilitado {
    height: auto;
}

#vinculos .eliminable, #habilidades .eliminable {
    align-self: flex-start;
    padding: 0;
}

#vinculos .eliminable {
    position: relative;
    left: 3vh;
}

.flecha {
    cursor: pointer;
    padding: 5px;
}

#disposicionHeroe .flecha, .modificadorTamaño .flecha {
    font-size: x-large;
    color: #9b834a;
    text-shadow: 1px 1px white, -1px -1px white, -1px 1px white, 1px -1px white;
}

#disposicionHeroe .nivel {
    display: block;
    text-align: center;
    font-family: medieval;
    color: white;
    font-size: x-large;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,110,108,1) 34%);
    box-shadow: 0 0 4vh black;
    font-weight: bold;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-top: 5px;
    position: relative;
}

#vinculos .nivel {
    width: 16vh;
    top: 5px;
}

#habilidades .nivel {
    font-size: medium;
    width: auto;
    position: static;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgb(110, 0, 0) 34%);
}

#habilidades .listaSeccionImportante {
    display: flex;
    flex-direction: column;
    color: white;
}

#habilidades .iconoHabilidad {
    float: left;
    margin-right: 1vh;
    border: 3px solid black;
    border-bottom-left-radius: 1.5vh;
    border-bottom-right-radius: 1.5vh;
}

.maxima {
    animation: brillar 2.5s infinite alternate;
}
@keyframes brillar {
    0% {
        box-shadow:
            inset 0 0 10px #fff,
            inset 0 0 10px #f0f,
            inset 0 0 10px #0ff,
            inset 0 0 10px #f0f,
            inset 0 0 10px #0ff,
            0 0 10px #fff,
            0 0 10px #f0f,
            0 0 10px #0ff;
    }
    100% {
        box-shadow:
            inset 0 0 10px #fff,
            inset 0 0 10px #fffb00,
            inset 0 0 10px #0ff,
            inset 0 0 10px #fffb00,
            inset 0 0 10px #0ff,
            0 0 10px #fff,
            0 0 10px #fffb00,
            0 0 10px #0ff;
    }
}

.yo, .turnoActivo {
    animation: resplandecer 2.5s infinite alternate;
}
@keyframes resplandecer {
    0% {
        box-shadow: 0 0 20px #fffb00;
    }
    100% {
        box-shadow: 0 0 40px #fffb00;
    }
}

#habilidades .objetoInventario {
    width: 90px;
    height: 90px;
    border: 0;
}

.habilidad {
    border-bottom: 1px solid white;
    padding-bottom: 1vh;
}
.habilidad:nth-of-type(n + 2) {
    margin-top: 1vh;
}
.habilidad:last-of-type {
    border: 0;
    padding-bottom: 0;
}

.habilidad p {
    font-size: smaller;
}

.habilidad .barra, .habilidad .llenar {
    width: 10px;
    align-items: flex-end;
    box-shadow: none;
}

#panelEstadisticas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 2vh;
}
#panelEstadisticas p {
    color: white;
}

#galeria {
    display: grid;
    grid-template-columns: repeat(6, 13.5vw);
    grid-auto-rows: 13.5vw;
    justify-content: center;
    gap: 1vh;
}
.bloque {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.bloque .controlContenido {
    height: auto;
}

.zoom {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    transition: 0.5s;
}
.bloque:hover .zoom {
    transform: scale(1.05);
}

.modificadorTamaño {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-grow: 1;
}
.modificadorTamaño .flechas {
    align-items: flex-end;
    display: flex;
    z-index: 2;
}
.modificadorTamaño .flechas:first-of-type {
    flex-direction: column;
}

aside {
    background-color: #3e3c5e;
    color: #fff;
    height: fit-content;
    max-height: 20vh;
    overflow-y: auto
}

aside div {
    padding: 2vh;
    font-family: medieval;
    font-size: larger
}

aside .entrada:hover {
    background-color: #1c1a36;
    cursor: pointer
}

aside div:nth-of-type(n + 2) {
    border-top: 1px solid #fff
}

#entradaAbierta, .mision {
    background-color: #ffefdf;
    border: 1px solid #000;
    height: 45vh;
    overflow-y: auto;
    box-shadow: 2px 3px 20px black, 0 0 10vh #8a4d0f inset;
    background: #fffef0;
    padding: 2vh
}

#entradaAbierta h3, .mision h3 {
    text-align: center;
    margin-bottom: 2vh;
    font-family: medieval;
    font-size: xx-large
}

#entradaAbierta p::first-letter {
    float: left;
    font-size: 3.5em;
    text-shadow: 1px 1px 1px #000;
    margin-right: 5px;
    margin-top: .3em;
}

#entradaAbierta p,
.documentoAbierto p,
.mision p {
    font-family: medieval;
    line-height: 1.8em;
    font-size: larger;
    white-space: pre-line;
    overflow-wrap: anywhere
}

.documentoAbierto img + .cita {
    line-height: normal;
}

#entradaAbierta .contenidoPerfil {
    padding: 0
}

#entradaAbierta input {
    margin-bottom: 2vh
}

#entradaAbierta textarea {
    height: 14vh;
}

.trabajo {
    width: 70vw;
    flex-shrink: 0
}

.iconosPersonajes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    width: 50%;
    box-sizing: content-box;
    margin: auto
}

.iconosPersonajes p {
    flex-grow: 1;
    width: 100%;
}

.iconosPersonajes i.eliminable {
    padding: 1vh;
}

.editar .iconosPersonajes button {
    margin-top: 0
}

.iconosPersonajes * {
    flex-shrink: 0
}

.iconosPersonajes div {
    border-radius: 100%;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center
}

.iconosPersonajes button {
    margin: 0
}

.contenedorProgreso p {
    margin-bottom: .5vh
}

.nombreTienda {
    width: fit-content;
    background-color: #fff;
    padding: 2vh 1vh;
    margin: auto;
    margin-top: 2vh;
    border-radius: 4vh;
    border: 5px solid #6d6a8d
}

.nombreTienda input {
    display: block;
    width: fit-content;
    margin: .5vh auto;
    font-size: larger
}

.encabezadoNombreInput {
    display: flex;
    align-items: center
}

.encabezadoNombreInput+div {
    margin: .5vh auto;
    width: fit-content
}

.documentos {
    grid-auto-rows: auto
}

.documentos .rellenado, .rama .rellenado {
    margin: initial
}

.rama .rellenado {
    margin-bottom: -6vh;
    grid-column: 1 / 3;
}

.rellenado.separacion {
    margin-top: 6vh
}

div:nth-of-type(n + 2) .documentos {
    margin-top: 3vh
}

.documentoAbierto, .dialogoAbierto {
    position: sticky;
    top: 10vh;
    height: 0;
    width: 80vw;
    margin: auto;
    z-index: 4
}
.dialogoAbierto {
    display: flex;
    justify-content: center;
}

.documentoAbierto * {
    font-family: medieval
}

.documentoAbierto .contenedor {
    color: #fff;
    padding: 5vw;
    height: 80vh;
    background-color: #000000e6
}

.documentoAbierto .deslizable {
    max-height: 80%;
    overflow-y: auto;
    margin: 2vh 0;
    padding: 0;
    padding-right: 1vh
}

.documentoAbierto .obraAbierta {
    display: block;
    margin: 2vh auto;
    max-width: 100%;
    height: auto;
    max-height: 63.2vh
}

.sombra {
    border-radius: 50%;
    width: 104%;
    height: 100px;
    background-color: #000;
    opacity: .6;
    filter: blur(10px);
    transform: scale(1, 0.2);
    z-index: 0;
    margin-top: -4vh;
    right: -2%;
    animation: alternarSombra 3s infinite
}

.oscuro+.sombra {
    background-color: #0f6969
}

.bando {
    display: flex;
    align-items: stretch;
    gap: 4vh;
    width: 100%;
    overflow-x: auto;
    padding: 1vh 0
}

.npc {
    width: 70vw;
    flex-shrink: 0
}

.caracteristicas {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1vh;
}
.caracteristicas i {
    cursor: pointer;
}
.caracteristicas p {
    flex-grow: 1;
}

.controlContenido {
    display: flex;
    justify-content: space-between;
    height: 0;
    position: relative;
    z-index: 2
}

.controlContenido .editable {
    float: none
}

.editable,
.revelable,
.eliminable,
.reparable,
.copiable {
    float: left;
    text-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px #fff;
    padding: 1vh
}

.editable {
    color: blue
}

.revelable {
    color: gray
}

.reparable {
    color: rgb(116, 116, 0);
}

.eliminable {
    color: red;
    float: right
}

.copiable {
    color: black;
}

#filtroObjetos {
    margin-left: 6.5vw;
    margin-bottom: 3vh;
    background-color: #fff;
    border: 3px solid #000;
    width: fit-content;
    padding: 2vh;
    border-radius: 2vh
}

.moneda {
    color: #BF6600;
}

.monedaNegra {
    text-shadow: 0 0 1vh rgb(32, 255, 255), 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
    color: black;
}

.heroe,
.npc,
.objeto,
.documento,
.mision,
.trabajo,
.diario {
    display: flex;
    flex-direction: column;
    border-radius: 2vh;
    border: 3px solid #000
}

.contenedorEnfrentado {
    border-radius: 2vh;
}

.contenedorHeroe {
    display: flex;
    flex-direction: column;
}
.contenedorHeroe a {
    flex-grow: 1;
}

.heroe {
    color: black;
}

a:hover,
.interactuable,
input,
label,
.editable:hover,
.revelable:hover,
.eliminable:hover,
.reparable:hover,
.copiable:hover {
    cursor: pointer
}

input[type="color"] {
    padding: 0;
    border-radius: 0;
    width: 50px;
}

input[type="color"],
h2.rellenado,
p.rellenado {
    margin: auto
}

h2,
.documentoAbierto .cita {
    text-align: center
}

#dados #obtenerDados,
.contenedorProgreso {
    margin-top: 2vh
}

#entradaAbierta .tituloInput,
.nombreTienda i,
.documentoAbierto h3,
.documentoAbierto p {
    font-size: larger
}

#listaFlexible div .eliminable,
#listaFlexible div .editable,
#atributos .listaSeccionImportante div .eliminable,
aside .editable,
aside .revelable,
aside .eliminable,
h3 .editable,
h3 .revelable,
h3 .eliminable {
    padding: .5vh 1vh
}

@keyframes levitar {
    50% {
        transform: translateY(1vh)
    }

    0%,
    100% {
        transform: translateY(0)
    }
}

@keyframes alternarSombra {
    50% {
        transform: scale(0.95)
    }

    0%,
    100% {
        transform: scale(1)
    }
}

.contenedorObjeto {
    position: relative
}

.tienda+.tienda {
    margin-top: 10vh
}

.elementoOrdenable {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.elementoOrdenable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.espacioPlaceholder {
    opacity: 0.5;
    filter: grayscale(1);
}

.objeto {
    border: 5px double #000;
    border-radius: 0;
    box-shadow: 0 0 10px #000;
    animation: levitar 3s infinite;
    position: relative;
    z-index: 1
}

.objeto.elementoOrdenable {
    cursor: grab;
}

.documento, .mapa {
    display: block;
    border-radius: 0;
    border: 5px solid #000;
    transition: 0.7s;
    transition-property: scale
}

.trabajo {
    border-radius: 0;
    border: 0
}

@keyframes quitarColor {
    0% {
        filter: grayscale(0)
    }

    100% {
        filter: grayscale(0.9)
    }
}

.trabajoCompletado {
    filter: grayscale(0.9);
    animation: quitarColor 5s
}

.contenedorCompletado {
    height: 0;
    position: relative;
    z-index: 2;
    bottom: 4vh;
    left: 1%
}

@keyframes caer {
    0% {
        transform: rotate(30deg) scale(2)
    }

    100% {
        transform: rotate(-30deg) scale(1)
    }
}

.contenedorCompletado h2 {
    color: red;
    right: 2%;
    font-size: 5vh;
    transform: rotate(-30deg);
    animation: caer 2s
}

.trabajo h3,
.trabajo p {
    font-family: medieval
}

.trabajo p {
    font-size: large
}

.trabajo:nth-of-type(odd):hover {
    transform: skew(1deg, 1deg);
    box-shadow: -20px 20px 20px #000
}

.trabajo:nth-of-type(even):hover {
    transform: skew(-1deg, -1deg);
    box-shadow: 20px 20px 20px #000
}

.añadir .trabajo:hover,
.editar.trabajo:hover {
    transform: none;
    box-shadow: none
}

.clavos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vh
}

.clavos img {
    width: 50px;
    margin: 2vh
}

.contenidoPerfil .clavos img {
    margin: 0
}

.trabajo,
.añadir .trabajo form,
.añadir .trabajo .contenidoPerfil {
    background-color: #ffefdf
}

#npcs .fotoPerfil,
#enfrentados .fotoPerfil {
    overflow: hidden
}

#npcs .fotoPerfil:hover .descripcion,
#enfrentados .fotoPerfil:hover .descripcion {
    transform: translateY(0)
}

.documento .fotoPerfil {
    background-image: url("https://static.vecteezy.com/system/resources/previews/032/944/669/non_2x/old-fashioned-letter-with-ancient-calligraphy-on-parchment-free-photo.jpg");
    color: #fff;
    height: 100%;
}

.documento.editandoDocumento .fotoPerfil:not(.fotoPerfil .fotoPerfil) {
    height: auto
}

.editandoDocumento textarea,
.trabajo textarea {
    height: 20vh
}

.centrarVerticalmente {
    display: flex;
    align-items: center;
    height: 100%;
}

.fotoPerfil h4 {
    width: fit-content;
    background-color: #000;
    padding: 1vh;
    border-radius: 2vh;
    margin: auto;
    text-align: center;
    font-family: medieval
}

.mapa .fotoPerfil h4 {
    font-size: larger;
}

.documento:hover:not(.documento.editandoDocumento:hover, .añadir .documento:hover),
.mapa:hover:not(.mapa.editandoMapa:hover, .añadir .mapa:hover) {
    scale: 1.03;
    cursor: pointer;
    animation: brillar 5s infinite alternate;
}

.añadir .documento, .añadir .grupoMision, .editarGrupoMision, .añadir .mision, .añadir .mapa {
    border: 5px solid #000;
    border-radius: 2vh;
    overflow: hidden;
}

.grupoMision .contenidoPerfil {
    align-items: center;
}

.contenedorObjeto:nth-of-type(even) .objeto,
.contenedorObjeto:nth-of-type(even) .sombra {
    animation-delay: -1.5s
}

.oscuro {
    box-shadow: 0 0 10px #20ffff
}

.objeto .fotoPerfil,
.documento .fotoPerfil {
    min-height: 20vh;
    border-radius: 0
}

.reliquia .fotoPerfil {
    height: 30vh
}

.mapa .fotoPerfil {
    height: 30vh;
    border-radius: 0;
    display: block;
}

.mapa .contenidoPerfil {
    background-color: white;
    color: black;
}

.objeto .contenidoPerfil,
.documento .contenidoPerfil {
    background-color: #6d6a8d;
    border-radius: 0
}

.documento .contenidoPerfil, .grupoMision .contenidoPerfil, .mision .contenidoPerfil {
    border-radius: 0;
    color: #000
}

.heroe ul,
.npc ul {
    text-align: left !important
}

.heroe .fotoPerfil, .documento .fotoPerfil, nav a, aside .entrada {
    position: relative;
}
.nuevo {
    position: absolute;
    right: -11px;
    top: -10px;
    border-radius: 100%;
    background-color: red;
    width: fit-content;
    width: 15px;
    height: 15px;
    padding: 0;
}
aside .entrada .nuevo {
    right: 5px;
    top: 5px;
}
.numeroEntradas {
    font-size: x-small;
    color: #fff;
    font-weight: 700;
    text-shadow: none;
    top: 0;
    right: -3px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    margin: auto;
}
.heroe .numeroEntradas {
    right: -13px;
    top: -12px;
    width: 23px;
    height: 23px;
    font-size: smaller;
}

.añadir h2 {
    text-align: center;
    margin-bottom: 1vh
}

.añadir .heroe,
.añadir .npc,
.añadir .objeto,
.añadir .documento,
.añadir .grupoMision,
.añadir .mision,
.añadir .trabajo,
.añadir .diario,
.añadir .mapa {
    margin: auto;
    width: fit-content;
    background-color: #fff
}

.añadir .contenidoPerfil {
    display: grid;
    grid-template-columns: repeat(1, 80vw);
    gap: 1vw;
    width: fit-content;
    background-color: #fff;
    border-radius: 2vh
}

.añadir form {
    width: fit-content;
    background-color: #fff;
    padding-bottom: 2vh;
    border-radius: 1.5vh
}

.añadir .objeto form {
    border-radius: 0
}

.añadir input[type="checkbox"] {
    padding: 1vh;
    border-radius: 100%
}

.añadir label,
.editar label,
.documento.editandoDocumento .fotoPerfil {
    display: block
}

.celdasTextarea.casilla * {
    display: inline;
    width: fit-content
}

.casilla {
    margin-top: 1.5vh
}

input[type="file"] {
    display: none
}

.editar .error {
    margin-bottom: 1vh
}

.fotoPerfil {
    width: 100%;
    height: 25vh;
    margin: 0 auto;
    border-top-left-radius: 1.5vh;
    border-top-right-radius: 1.5vh;
    background-size: cover;
    background-position: center;
    background-color: #000
}

.heroe .fotoPerfil {
    height: 45vh;
}

.contenidoPerfil {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white, 0 0 3px #fff;
    padding: 2vh;
    border-bottom-left-radius: 1.5vh;
    border-bottom-right-radius: 1.5vh;
    flex-grow: 1;
}

.aliado .contenidoPerfil {
    background-color: #c2ecec
}

.neutral .contenidoPerfil {
    background-color: #e7c2ec;
}

.enemigo .contenidoPerfil {
    background-color: #ecc2c2
}

.contenidoPerfil h4,
.contenidoPerfil ul {
    margin-top: 2vh
}

.contenedorGrupoMisiones {
    position: relative;
}

.grupoMisiones .contenidoPerfil h4 {
    margin-top: 0;
}

.grupoMisiones {
    transition: 1s;
    position: absolute;
    left: 0;
    right: 0;
}

.cita {
    font-style: italic;
    margin: 1vh 0;
    text-align: center
}

.contenidoPerfil li {
    width: 80%;
    margin: auto
}

.barra {
    display: flex;
    align-items: center;
    border-radius: 2vh;
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: -3px 3px #000;
    transition: .2s
}

.barra:has(+ .estadistica:hover) {
    box-shadow: -5px 5px #000
}

.estadistica {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    bottom: 19px;
    font-weight: 700;
    text-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px #fff
}

.estadistica i {
    position: relative;
    font-size: small;
    cursor: pointer;
    padding: 5px;
    position: relative;
    top: 1px
}

.estadistica i:first-of-type {
    margin-left: 5px
}

.estadistica i:last-of-type {
    margin-right: 5px
}

.llenar {
    height: 10px;
    border-radius: 2vh;
    transition: .5s
}

.vida {
    background-color: #FD4B4B
}

.progreso {
    background-color: #ff0
}

.armadura {
    background-color: #a0a0a0;
}

.experiencia {
    background-color: #7fffd4;
}

#inicioSesion {
    display: grid;
    justify-content: center;
    row-gap: 2vh
}

#inicioSesion .usuario:hover {
    opacity: 1 !important;
    cursor: pointer
}

#inicioSesion .usuario:hover .borde {
    transform: scale(1.05);
    transition: .6s
}

#inicioSesion .borde {
    background-color: #000;
    border: solid .5vh #000;
    border-radius: 100%;
    width: 20vh;
    height: 20vh;
    overflow: hidden;
    margin: auto
}

#inicioSesion .borde+p {
    padding: 0 1vh;
    margin: 1vh auto;
    text-align: center;
    width: fit-content;
    background-color: #fff;
    border-radius: 2vh
}

#inicioSesion .foto {
    background-position: center;
    background-size: cover;
    height: 100%
}

.negrita {
    font-weight: 700
}

#inicioSesion form {
    position: relative;
    bottom: 5vh;
    transition: .5s;
    transform: scale(0);
    display: flex
}

form input,
form textarea,
form select {
    box-sizing: border-box;
    width: 100%;
    border-radius: 2vh;
    padding: .5vh 1vh;
    resize: none
}

button {
    padding: 1vh;
    display: block;
    margin: auto;
    border: 0
}

button:not(#inicioSesion button), .boton {
    font-size: large;
    border-radius: 2vh;
    text-shadow: none;
}

div.boton {
    margin-top: 2vh;
}

#inicioSesion form input {
    margin-left: 2vh
}

#inicioSesion .activo {
    bottom: 0;
    transform: scale(1)
}

#inicioSesion button {
    position: relative;
    right: 2vh;
    border-top-right-radius: 2vh;
    border-bottom-right-radius: 2vh
}

div.error {
    background-color: #fff;
    border: 5px solid #000;
    padding: 2vh;
    margin-bottom: 2vh
}

.error {
    color: red;
    text-align: center
}

.atributos,
.descripcion {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 0;
    background-color: #6d6a8d;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transform: translateY(150%);
    transition: 1s;
    text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white, 0 0 3px #fff
}

.descripcion {
    background-color: #000;
    color: #fff;
    text-shadow: none
}

.descripcion .cita {
    padding: 2vh
}

.atributos h4 {
    margin: 2vh;
    text-align: center
}

#listaFlexible,
#atributos .listaSeccionImportante {
    gap: 4vh;
    margin: auto;
    margin-bottom: 2vh
}

#atributos .listaSeccionImportante {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.listaNiveles {
    display: grid;
    width: 80vw;
    grid-template-columns: 9% 89%;
    justify-content: center;
    gap: 2%;
    margin: 2vh;
    margin-top: 0;

}
.listaNiveles div {
    display: flex;
    align-items: center;
    background-color: #6d6a8d;
    color: white;
    padding: 1vh 2vh;
}
.listaNiveles div:first-of-type {
    justify-content: center;
}

.listaNiveles .editable {
    padding: 0.5vh;
}

.listaNiveles form {
    display: flex;
    align-items: center;
    gap: 1vh;
    background-color: transparent;
    width: 100%;
    padding: 0;
}

.listaNiveles button {
    flex-shrink: 0;
}

#listaFlexible {
    width: 63vw;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fff
}

#listaFlexible div, #atributos .listaSeccionImportante div {
    padding: 1vh;
    border-radius: 2vh;
    background-color: #6d6a8d;
    width: fit-content;
    height: fit-content;
    color: #fff;
    flex-shrink: 0;
}

#listaFlexible form {
    background-color: transparent;
    padding-bottom: 1vh
}

.inventario button {
    grid-column: 1 / 4;
    width: 100%;
}

.contenedorInventario {
    display: flex;
    margin-top: 1vh
}

.inventario {
    flex-grow: 1;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 56px);
    justify-content: center;
}

.desplazarObjetos {
    display: flex;
    width: 0;
    position: relative;
    right: 2vh;
    z-index: 1;
    flex-direction: column;
    justify-content: space-between;
    font-size: larger;
}
#desplazarGrupoMisiones {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2vh;
}
#desplazarGrupoMisiones i:not(.editable, .revelable, .eliminable, .fa-floppy-disk) {
    font-size: 30px;
    text-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px #fff
}
#desplazarGrupoMisiones h3 {
    margin: 0;
}
.desplazarObjetos i, #desplazarGrupoMisiones i {
    cursor: pointer;
    padding: 5px;
}

.inventario p,
#darObjeto {
    grid-column: 1 / 4
}

.objetoInventario {
    flex-shrink: 0;
    color: #fff;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px #000;
    width: 60px;
    height: 60px;
    padding: 5px !important;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    position: relative;
    border: 3px solid #000
}

.roto {
    filter: grayscale(0.8) !important;
    z-index: 3;
    background-position: center;
    background-size: cover;
}

.objetoInventario i {
    font-size: smaller;
}

.objetoInventario .revelable, .objetoInventario .editable {
    grid-column: 1;
    grid-row: 1;
}

.objetoInventario .eliminable {
    grid-column: 3;
    grid-row: 1;
}

.objetoInventario .reparable, .objetoInventario .eliminable + .revelable {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
}

.objetoInventario .cantidad, .objetoInventario .copiable {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
}

.alternarCreacion,
.añadir {
    margin-bottom: 4vh
}

.añadir .error,
.editar .error,
.editar button {
    margin-top: 1vh
}

.objeto:hover:not(.añadir .objeto:hover),
button:hover {
    cursor: pointer
}

@keyframes colorReliquia {
    0% {
        border-image: linear-gradient(#fe0, #0ff) 3
    }

    25% {
        border-image: linear-gradient(#0ff, #fe0) 3
    }

    50% {
        border-image: linear-gradient(#e944ff, #fe0) 3
    }

    75% {
        border-image: linear-gradient(#fe0, #e944ff) 3
    }
}

.objetoInventario.reliquia,
.objeto.reliquia {
    border-image: linear-gradient(#fe0, #0ff) 3;
    animation: colorReliquia 5s linear infinite;
    transition: 1s box-shadow, 1s filter
}

.objeto.reliquia {
    animation: colorReliquia 5s linear infinite, levitar 5s infinite
}

.reliquia:hover {
    box-shadow: 0 0 2vh #fff;
    filter: saturate(2);
    z-index: 3;
}

.reliquia .contenidoPerfil {
    background-color: #fff;
    justify-content: flex-start
}

.objetoInventario .editable,
.objetoInventario .eliminable,
.objetoInventario .revelable,
.objetoInventario .reparable,
.objetoInventario .copiable {
    float: none;
    padding: 0
}

.cantidad {
    height: 20px
}

.dialogo {
    position: absolute;
    width: 63vw;
    z-index: 4;
    background-color: #1c1a36;
    text-shadow: none;
    padding: 2vh;
    text-shadow: none;
    color: white;
    text-align: center;
}

.tituloDialogo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1vh;
    font-size: x-large;
}

.tituloDialogo .objetoInventario {
    width: 100px;
    height: 100px;
    font-size: 1.2em;
    font-weight: 700;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    margin-right: 1vh;
    margin-bottom: 1vh;
}

.dialogo ul {
    margin: 2vh
}

.dialogo li {
    margin: initial
}

.reliquia.quietoParao {
    animation: colorReliquia 5s linear infinite
}

.dialogo .tituloDialogo .objetoInventario:not(.dialogo .tituloDialogo .reliquia),
.objeto.quietoParao {
    animation: none
}

#objetos {
    display: grid;
    grid-template-columns: repeat(1, 80vw);
    gap: 5vw;
    justify-content: center;
    margin-top: 4vh;
}
.ubicacion {
    display: flex;
    flex-direction: column;
    border: 3px solid black;
    background-color: white;
    border-radius: 2vh;
    overflow: hidden;
}
.ubicacion .boton {
    border-radius: 0;
}
.ubicacion .rellenado {
    margin-top: 0;
}
.seccionUbicacion, .ubicacion .objetos, .ubicacion .rama h3 {
    flex-grow: 1;
    flex-shrink: 0;
    width: 95%;
    margin: 1vh auto;
}
.ubicacion .rama {
    margin-top: 2vh;
}
.ubicacion .rama:last-of-type {
    margin-bottom: 6vh;
}
#objetos .objetos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 10px;
    min-height: 56px;
}
#objetos .objetoInventario {
    flex-shrink: 0;
    flex-direction: column;
    justify-content: space-between;
}
#objetos .objetoInventario .revelable {
    margin: 0 auto;
}
#objetos .objetoInventario .controlContenido {
    display: flex;
    justify-content: space-between;
    height: auto;
    flex-wrap: wrap;
    width: 100%;
}
#objetos + .añadir {
    margin-top: 2vh;
}

.misiones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    margin-bottom: 2vh;
}
.mision {
    width: 80vw;
    border-radius: 0;
    height: auto;
    padding: 0;
}
.mision .controlContenido {
    height: auto;
    z-index: auto;
}

#contenedorMapa {
    position: absolute;
    left: 0;
}
#mapa:active, #seleccion:active {
    cursor: grabbing;
}
#mapa::-webkit-scrollbar {
    display: none;
}

#seleccion {
    position: absolute;
    opacity: 0.8;
    cursor: grab;
    z-index: 1;
}

#mapa {
    width: 100vw;
    height: 90vh;
    overflow: auto;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: black;
}
#contenedorLugares {
    position: relative;
    transform-origin: top left;
    width: 100vw;
    height: 90vh;
}
.lugar {
    display: block;
    position: absolute;
    opacity: 0.5;
    transition: 2s;
    border-radius: 100%;
}
.lugarSeleccionable:hover {
    box-shadow: 0 0 20vh rgb(255, 255, 176) inset;
}

#imagenLugar {
    background-size: contain;
    background-repeat: no-repeat;
    height: 80vh;
    box-shadow: 0 0 5vh 2vh black inset;
    justify-content: flex-end;
}

#imagenLugar + #espacioCabecera {
    margin-bottom: 5vh;
}

#disposicionLugar {
    grid-template-areas: none;
    grid-template-columns: repeat(1, 90vw);
    gap: 5vh;
}

#disposicionLugar *:not(i, #npcs *) {
    font-family: medieval;
}

#disposicionLugar #descripcion {
    border: 1px solid black;
    border-radius: 2vh;
    background-color: white;
    color: black;
    font-family: Poppins;
    line-height: 2.5em;
    padding: 3vh;
}

#disposicionLugar #descripcion::-webkit-scrollbar-track {
    border-top-right-radius: 2vh;
    border-bottom-right-radius: 2vh;
}

#disposicionLugar .listaSeccionImportante {
    padding-bottom: 2vh;
    max-height: none;
}

.textoLugar {
    color: white;
    justify-content: flex-start;
    overflow-y: auto;
}

#disposicionLugar #misiones p {
    text-align: center;
}

#disposicionHeroe ul, #disposicionLugar #misiones ul {
    padding-left: 3vh;
    font-weight: bold;
}
#disposicionHeroe ul {
    color: white;
    text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black, -3px 2px black;
}
#disposicionHeroe ul li::marker {
    color: black;
}

#disposicionLugar #misiones ul ul {
    margin-bottom: 1vh;
    font-weight: normal;
}

#disposicionLugar #misiones li i {
    float: none;
}

#disposicionLugar #npcs .botonAñadir {
    margin: 0;
}

#disposicionLugar .bando {
    padding: 0;
}

#disposicionLugar #npcs .controlContenido {
    justify-content: flex-end;
}

.checkboxesInvisibles {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2vh;
    padding: 2vh;
}

.checkboxesInvisibles input[type="checkbox"] {
    display: none;
}

.checkboxesInvisibles .objetoInventario {
    filter: grayscale(1);
}

.checkboxesInvisibles input:checked + .objetoInventario,
.checkboxesInvisibles + button + .checkboxesInvisibles .objetoInventario {
    filter: grayscale(0);
}

.checkboxesInvisibles .esfera {
    opacity: 0.4;
}
.checkboxesInvisibles input:checked + .esfera {
    opacity: 1;
}

.checkboxesInvisibles input:checked + .objetoInventario {
    box-shadow: 0 0 5px 1px yellow;
}

.checkboxesInvisibles label {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkboxesInvisibles .flechas {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.checkboxesInvisibles .flechas i {
    padding: 5px;
}

#enfrentados .fotoPerfil {
    height: 25vh;
}

.enfrentado {
    height: 100%;
}

.timeline__wrap {
    overflow: visible;
}

.timeline__content img {
    width: 100%;
}

.timeline .esfera {
    position: absolute;
    left: -5.5vh;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    z-index: 3;
    height: 4vh;
    width: 4vh;
}

.timeline .editable, .timeline .eliminable {
    padding: 2vh;
}

.timeline .selectorIcono .esfera {
    position: static;
    transform: translateY(0);
}

.timeline .editar .fotoPerfil {
    border-radius: 2vh;
}

.timeline h4 {
    margin-top: 3vh;
    margin-bottom: 1vh;
    text-align: center;
}

.timeline .controlContenido {
    height: auto;
}
.timeline .controlContenido i {
    padding: 1vh;
}
.timeline .controlContenido .editable {
    margin-left: -1vh;
}
.timeline .controlContenido .eliminable {
    margin-right: -1vh;
}
.timeline img, .timeline p:last-child {
    margin-top: 2vh;
    text-align: left;
    margin-bottom: 0;
}

/* Este breakpoint se encarga del timeline de Acontecimientos */
@media (min-width: 601px) {
    .timeline .esfera {
        left: -7.5vh;
        top: 50%;
        height: 6vh;
        width: 6vh;
    }
    .timeline__item:nth-of-type(even) .esfera {
        left: auto;
        right: -7.5vh;
    }
}

@media (min-width: 800px) {
    header h1 {
        font-size: 4vh
    }

    .añadir .fotoPerfil:not(.mapa .fotoPerfil) {
        margin-top: 2vh;
        border: 1px solid #000;
        border-radius: 1.8vh;
        width: 30vw
    }

    :not(.añadir .objeto .contenidoPerfil) .añadir .contenidoPerfil {
        grid-template-columns: repeat(2, 30vw)
    }

    #heroes,
    .documentos,
    #reliquias,
    #enfrentados {
        grid-template-columns: repeat(2, 30vw);
        width: 70vw;
    }

    .mapas {
        grid-template-columns: repeat(2, 40vw);
    }

    #reliquias {
        grid-auto-rows: 1fr;
    }

    .objetos {
        grid-template-columns: repeat(4, 15vw)
    }

    .npc {
        width: 30vw
    }

    .dialogo {
        width: 50vh
    }

    #inicioSesion {
        grid-template-columns: repeat(3, auto)
    }

    :not(.añadir .objeto .contenidoPerfil) .añadir .diario .contenidoPerfil,
    :not(.contenedorObjeto) .añadir .objeto.quietoParao .contenidoPerfil {
        grid-template-columns: repeat(1, 60vw)
    }

    #inventarioHabilidades div:not(.objetoInventario) {
        width: 60vw;
    }

    .celdasTextarea,
    .documentos .rellenado {
        grid-column: 1 / 3
    }
    
    #objetos {
        grid-template-columns: repeat(2, 40vw);
    }

    .rama .rellenado {
        grid-column: 1 / 5;
    }

    #galeria {
        grid-template-columns: repeat(6, 10vw);
        grid-auto-rows: 10vw;
    }

    .listaNiveles {
        width: 60vw;
    }
}

@media (min-width: 1200px) {
    #barras {
        display: none
    }

    nav {
        transform: translateX(0%);
        flex-direction: row;
        position: static;
        width: fit-content;
        margin-right: 2vh;
        font-size: 14px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1vh;
    }

    nav a {
        margin-left: 4vh;
        border-radius: 2vh;
        padding: 1vh;
        background-color: transparent;
        flex-shrink: 0;
        border: none;
    }

    nav a:focus {
        background-color: #1c1a36
    }
    nav a:last-of-type {
        border: none;
    }

    .añadir .fotoPerfil:not(.mapa .fotoPerfil) {
        margin-top: 2vh;
        width: 20vw
    }

    .añadir .contenidoPerfil {
        grid-template-columns: repeat(3, 20vw)
    }

    .añadir .grupoMision .contenidoPerfil {
        grid-template-columns: repeat(1, 60vw);
    }

    #heroes, #enfrentados {
        grid-template-columns: repeat(5, 17vw);
        gap: 1.5vw;
        width: auto;
    }

    .documentos,
    #reliquias {
        grid-template-columns: repeat(3, 20vw);
        width: 70vw
    }

    .objetos {
        grid-template-columns: repeat(5, 12vw)
    }

    #diario {
        grid-template-columns: 30vw 50vw
    }

    #entradaAbierta {
        padding: 10vh;
        padding-top: 5vh
    }

    #entradaAbierta.editandoEntrada {
        padding: 3vh 10vh;
        height: 54vh
    }

    aside {
        max-height: 60vh
    }

    .npc {
        width: 17vw
    }

    .trabajo {
        width: 30vw
    }

    .npc .celdasTextarea,
    .documentos .rellenado {
        grid-column: 1 / 4
    }

    .rama .rellenado {
        grid-column: 1 / 6;
    }

    .misiones {
        display: block;
        position: relative;
        height: 200vh;
    }
    .mision:not(.añadir .mision) {
        width: 40vw;
        position: absolute;
    }

    #disposicionHeroe {
        grid-template-areas: 
            "vinculos info habilidades"
            "vinculos inventario habilidades"
            "estadisticas atributos atributos"
        ;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 40vh 40vh;
    }

    .listaSeccionImportante {
        max-height: none;
    }

    #vinculos div:not(.fotoPerfil, .fotoPerfil *), #disposicionHeroe #habilidades div:not(.habilidad, .habilidad *) {
        height: 61.3vh;
    }

    #inventario div:not(.objetoInventario) {
        height: 20.3vh;
    }

    #entradaAbierta p,
    .documentoAbierto p,
    .mision p {
        text-align: justify;
    }

    #descripcionLugar #descripcion {
        width: 70%;
    }

    #info div:last-of-type {
        overflow-y: auto;
        height: 23vh;
    }

    .numeroEntradas {
        position: absolute;
    }
}