/* Estilos para la estructura de la página */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000; /* Fondo negro */
    color: #fff; /* Texto blanco */
}

#container {
    width: 80%; /* Ancho del container en PC */
    margin: 10px auto; /* Añadir margen en la parte superior e inferior, y centrar horizontalmente */
    padding: 10px; /* Cambiar el padding de 20px a 10px */
    background-color: #333; /* Fondo oscuro */
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Estilos para los paneles */
.panel {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%; /* Ancho completo de la línea */
    background-color: #001f3f; /* Azul oscuro */
}

/* Estilos para las interacciones */
#interacciones table {
    width: 100%; /* Ancho completo de la tabla */
}

#interacciones .accion {
    cursor: pointer;
    margin: 5px; /* Margen en dispositivos móviles */
    padding: 10px 5px; /* Espaciado dentro del recuadro, 10px en vertical y 5px en horizontal en móviles */
    border-radius: 5px;
    background-color: #001f3f; /* Azul oscuro */
    border: 1px solid #ccc;
    display: inline-block;
    transition: background-color 0.3s; /* Transición suave de color al pasar el mouse */
}

#interacciones .accion:hover {
    background-color: #000; /* Azul más oscuro al pasar el mouse */
}

/* Estilos para la imagen e inventario */
#imagen {
    background-color: #000; /* Fondo negro para el recuadro de la imagen */
    padding: 10px 5px; /* Espaciado dentro del recuadro, 10px en vertical y 5px en horizontal en móviles */
    border-radius: 5px;
    flex: 1; /* Ocupa todo el espacio disponible en la línea */
    margin: 0 5px 5px 5px; /* Margen entre la imagen y el inventario en PC, y añadir margen inferior en móviles */
}

#imagen img {
    width: 100%;
    height: auto;
}

#objetos {
    background-color: #000; /* Fondo negro para el recuadro del inventario */
    padding: 10px 5px; /* Espaciado dentro del recuadro, 10px en vertical y 5px en horizontal en móviles */
    border-radius: 5px;
    flex: 1; /* Ocupa todo el espacio disponible en la línea */
    margin: 5px 5px 0 5px; /* Margen izquierdo entre el inventario y la imagen en PC, y añadir margen superior en móviles */
}

/* Estilos para los objetos en el inventario */
#objetos ul {
    list-style: none;
    padding: 0;
}

#objetos ul li {
    border: 1px solid #ccc; /* Borde para los objetos del inventario */
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 5px;
}

/* Estilos para los botones de acciones de objetos */
.opcion-objeto {
    display: flex;
    justify-content: space-between;
}

.ver-opcion,
.usar-opcion {
    cursor: pointer;
    background-color: #001f3f; /* Azul oscuro */
    color: #fff; /* Texto blanco */
    border: 1px solid #ccc; /* Borde para los botones de objetos */
    border-radius: 5px;
    padding: 10px 5px; /* Cambiar el padding en dispositivos móviles a 10px en vertical y 5px en horizontal */
    margin-top: 5px;
    transition: background-color 0.3s; /* Transición suave de color al pasar el mouse */
}

.ver-opcion:hover,
.usar-opcion:hover {
    background-color: #000; /* Azul más oscuro al pasar el mouse */
}

/* Estilos adicionales para dispositivos móviles */
@media (max-width: 768px) {
    #container {
        width: 90%; /* Ancho del container en móviles */

    }

    .linea {
        flex-direction: column; /* Cambiar a dirección vertical en dispositivos móviles */
        align-items: center; /* Alinear elementos al centro en dispositivos móviles */
    }

    /* Margen entre el texto y su contenedor en dispositivos móviles */
    .linea p {
        margin: 5px;
    }

    /* Margen entre la imagen y el inventario en dispositivos móviles */
    #imagen {
        margin: 0 0 5px 0; /* Margen inferior para la imagen en dispositivos móviles */
    }

    #objetos {
        margin: 5px 0 0 0; /* Margen superior para el inventario en dispositivos móviles */
    }
}




/* Estilos para los mensajes superpuestos */
.mensaje {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
    padding: 20px;
    border: 2px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    max-width: 80%;
}

.mensaje-contenido {
    text-align: center;
}

.cerrar-mensaje {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.cerrar-mensaje:hover {
    background-color: #0056b3;
}


/* Estilos para el div de bloqueo */
.bloqueo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998; /* Un valor menor que el z-index del mensaje */
    pointer-events: auto; /* Bloquear interacciones */
}