:root {
    /* Definición de variables CSS para facilitar el manejo de colores */
    --color-Fondo-1: #F9F9F9; /* Blanco Crudo */
    --color-Fondo-2: #fff0ff; /* Fondo Rosa Suave */
    --color-Encabezados: #E8B8A0; /* Terracota Suave */
    --color-Botones: #A8D8E6; /* Azul Acuático */
    --color-Enlaces: #B3E9C9; /* Verde Menta */
    --color-Secciones: #FFC107; /* Amarillo Mostaza */
    --color-Texto: #000000; /* Negro */
    --color-H2: #2980b9; /* Azul */
    --color-Hover: #6b4f4f; /* Color para hover */
}

.fuente {
  font-family: "Neonderthaw", cursive;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
}

/* Estilos generales para el cuerpo de la página */
body {
    font-family: Arial, sans-serif; /* Define la fuente del cuerpo del documento */
    line-height: 1.6; /* Establece la altura de línea para mejorar la legibilidad */
    margin: 0; /* Elimina el margen predeterminado del cuerpo */
    padding: 0; /* Elimina el padding predeterminado del cuerpo */
    background-color: var(--color-Fondo-2); /* Color de fondo */
}

/* Estilos para la galería */
.fondo_galeria {
    background-color: var(--color-Fondo-1); /* Color de fondo de la galería */
}

/* Estilos para el encabezado de la página */
header {
    background-image: url('../img/Fondo.png'); /* Reemplaza con la ruta de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra todo el header */
    background-position: center; /* Centra la imagen */
    color: var(--color-Texto); /* Color del texto */
    padding: 10px 0; /* Espaciado vertical al encabezado */
    text-align: center; /* Centra el texto del encabezado */
}

/* H1 para centrar y para móviles */
h1 {
    margin-left: 10%;
    width: 80%;
}

@media (max-width: 500px) { /* Ajustes para pantallas pequeñas */
    h1 {
        font-size: 28px; /* Tamaño más pequeño para móviles */
    }
}

@media (max-width: 400px) { /* Ajustes adicionales para pantallas más pequeñas */
    h1 {
        font-size: 20px; /* Tamaño más pequeño para dispositivos móviles */
    }
}

/* Estilos para la navegación */
nav ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding de la lista */
}

nav ul li {
    display: inline; /* Muestra los elementos de la lista en línea */
    margin: 0 15px; /* Espaciado horizontal entre los elementos de la lista */
}

nav ul li a {
    color: var(--color-Texto); /* Color del texto de los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
}

/* Estilos del contenedor principal */
main {
    padding: 20px; /* Espaciado alrededor del contenido principal */
}

/* Estilos para el pie de página */
footer {
    background-image: url('../img/Fondo.png'); /* Reemplaza con la ruta de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra todo el footer */
    background-position: center; /* Centra la imagen */
    color: var(--color-Texto); /* Color del texto en blanco */
    padding: 10px 20px; /* Espaciado interno del pie de página */
    bottom: 0; /* Posiciona el pie de página en la parte inferior */
    width: auto; /* Toma todo el ancho disponible */
    display: flex; 
    justify-content: space-between; /* Espacio entre elementos en el pie de página */
    align-items: center; /* Alinea verticalmente los elementos en el pie de página */
}

footer p {
    margin: 0; /* Elimina márgenes del párrafo en el pie de página */
}

a {
    color: var(--color-Encabezados); /* Color de los enlaces */
}

/* Estilos para el encabezado flexible */
.header {
    display: flex; /* Usa flexbox para alinear los elementos */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center; /* Centra verticalmente los elementos */
    position: relative; /* Para poder posicionar el enlace */
}

/* Estilos para la firma en el encabezado */
.firma {
    width: 20%; /* Ancho de la imagen de la firma */
    margin: 0 auto; /* Centra la imagen */
    margin-top: 10px; /* Margen superior */
    margin-bottom: 10px; /* Margen inferior */
}

/* Media Queries para la adaptación de tamaño de la firma */
@media (max-width: 1000px) {
    .firma {
        width: 40%; /* Ajusta el tamaño en pantallas medianas */
    }
}

@media (max-width: 700px) {
    .firma {
        width: 60%; /* Ajusta el tamaño en pantallas pequeñas */
    }
}

/* Estilos para el botón de inicio de sesión */
.inicio_sesion {
    position: absolute; /* Posición absoluta para el enlace */
    right: 10px; /* Margen a la derecha */
    top: 10px; /* Margen desde la parte superior */
    color: var(--color-Texto); /* Color del texto del enlace */
    text-decoration: none; /* Quitamos la decoración */
}

/* Estilos para centrar el texto */
.centrar {
    text-align: center; /* Centra el texto */
}

/* Estilos para justificar el texto */
.justificado {
    text-align: justify; /* Justifica el texto */
}

/* Estilos para los enlaces en el pie de página */
.footer_enlaces {
    display: flex; /* Alineación en línea de los enlaces */
    gap: 15px; /* Espacio entre enlaces */
    margin-right: 5%; 
}

.footer_enlaces a {
    text-decoration: none; /* Eliminar subrayado de enlaces */
    color: var(--color-Texto); /* Color para enlaces de pie de página */
}

.footer_enlaces a:hover {
    text-decoration: underline; /* Subrayar al pasar el ratón */
}

/* Estilo para la línea de separación en el pie de página */
.footer_linea {
    border-left: 1px solid var(--color-Texto); /* Línea a la izquierda */
    color: var(--color-Encabezados); /* Color de la línea */
}

/* Estilos para la biografía */
.flotante {
    text-align: justify; /* Justifica el texto dentro del elemento */
    width: auto; /* Ancho automático para el elemento flotante */
}

.flotante img {
    margin-right: 20px; /* Espaciado a la derecha de la imagen */
    float: left; /* Flota la imagen a la izquierda */
}

.bio_Img {
    width: 50%; /* Ancho fijo para la imagen de biografía */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Media Query para pantallas pequeñas en la imagen de biografía */
@media (max-width: 600px) { 
    .bio_Img {
         width: 100%; /* Ancho completo en pantallas pequeñas */
    }
}

.bio_H1 {
    text-align: center; /* Centra el encabezado */
}

.bio_H2 {
    color: var(--color-H2); /* Color del segundo encabezado */
    text-align: center; /* Centra el segundo encabezado */
}

.bio_Ul {
    list-style-type: none; /* Elimina puntos de la lista */
}

.bio_Linea {
    margin: 5px 0; /* Margen vertical */
    padding: 5px; /* Espaciado interno */
    border-bottom: 1px solid #ccc; /* Línea inferior */
}

.bio_Spam {
    font-weight: bold; /* Texto negrita */
    color: #e74c3c; /* Color específico */
}

.bio_Margen {
    margin-left: 3%; /* Margen a la izquierda */
}

.bio_Section {
    margin: 0 3% 10px 3%; /* Margen alrededor de la sección */
}

/* Media Query para ajustar la sección de biografía */
@media (max-width: 500px) { 
    .bio_Section {
         margin: 0 0 50px 0; /* Margen inferior más grande */
    }

    .bio_Margen {
        margin-left: 0; /* Elimina margen a la izquierda */
    }
}

/* Estilos para la galería */
.gale_div {
    display: flex; /* Usa el modelo de caja flexible para la galería */
    flex-wrap: wrap; /* Permite que los elementos flexibles se ajusten */
    gap: 10px; /* Espaciado entre los cuadros de la galería */
    justify-content: center; /* Centra los elementos dentro del contenedor */
    align-items: center; /* Alinea los elementos verticalmente */
}

.gale_Cuadro {
    display: flex; /* Para que su contenido pueda ser flexible */
    flex-direction: column; /* Ajusta la dirección del contenido dentro del cuadro */
    width: calc(30% - 10px); /* Establece un ancho calculado menos el espaciado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta el contenido que se desborda */
    position: relative; /* Necesario para la descripción */
}

.gale_titulo {
    display: none; /* Inicialmente oculta el texto descriptivo */
    position: absolute; /* Posiciona el texto sobre la imagen */
    background-color: rgba(33, 33, 33, 0.7); /* Fondo semitransparente para la descripción */
    color: var(--color-Enlaces); /* Color del texto */
    padding: 5px; /* Espaciado interno para la descripción */
    border-radius: 5px; /* Bordes redondeados */
    top: -20px; /* Posicionamiento en la parte superior del cuadro */
    left: 0; /* Alinea a la izquierda */
    right: 0; /* Ocupa todo el ancho del cuadro */
    text-align: center; /* Centra el texto dentro de la descripción */
}

.gale_Img {
    width: 100%; /* Imagen ocupa todo el ancho del cuadro */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Muestra la imagen como bloque */
    border-radius: 10px; /* Bordes redondeados en la imagen */
}

/* Estilos para mostrar la descripción de la galería al pasar el ratón */
.gale_Cuadro:hover .gale_titulo {
    display: block; /* Muestra la descripción/título al pasar el ratón sobre el cuadro */
}

/* Media Queries para la responsividad */
@media (max-width: 1000px) {
    /* Ajustes para pantallas más pequeñas */
    .gale_Cuadro {
        flex: 0 1 calc(48% - 10px); /* Ajusta ancho de los cuadros a un 48% en pantallas medianas */
    }

    .gale_titulo {
        margin-top:20px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    /* Ajustes para pantallas más pequeñas */
    .gale_Cuadro {
        flex: 0 1 calc(48% - 10px); /* Ajusta ancho de los cuadros a un 48% en pantallas medianas */
    }

    .gale_titulo {
        margin-top:20px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    /* Ajustes para pantallas muy pequeñas */
    .gale_Cuadro {
        flex: 0 1 calc(100% - 10px); /* Establece el ancho a 100% en pantallas pequeñas */
    }
}

/* Estilos para el botón de borrar */
.header_botones_Borrar {
    background-color: #ff0000; /* Color de fondo suave */
    color: white; /* Color del texto */
    border: 2px solid #6b4f4f; /* Borde del botón */
    border-radius: 8px; /* Bordes redondeados */
    padding: 12px 24px; /* Espacio interno */
    text-align: center; /* Alinea el texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Permitir márgenes alrededor */
    font-family: 'Georgia', serif; /* Fuente elegante */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
    margin-left: 10px;
}

.header_botones_Borrar:hover {
    background-color: var(--color-Hover); /* Cambia el fondo en hover */
    color: var(--color-Fondo-2); /* Cambia el color del texto en hover */
}

/* Estilos para formularios */
.for_center_login {
    font-family: Arial, sans-serif; 
    background-color: var(--color-Fondo-1); 
    display: flex; 
    justify-content: center; /* Centrar horizontalmente el formulario */
    align-items: center; /* Centrar verticalmente el formulario */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    margin: 0; /* Eliminar márgenes del formulario */
}

.for_Centrar {
    display: flex; 
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    flex-grow: 1; /* Para que ocupe el espacio restante */
}

.for_container {
    background-color: var(--color-Enlaces); 
    padding: 20px; /* Espaciado interno del contenedor */
    border-radius: 5px; /* Bordes redondeados del contenedor */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra del contenedor */
    width: 300px; /* Ancho fijo del contenedor */
}

.for_h2 {
    text-align: center; /* Centra el texto del título */
    margin-bottom: 20px; /* Margen inferior */
}

.for_group {
    margin-bottom: 15px; /* Margen inferior entre grupos de formulario */
}

.for_label {
    display: block; /* Muestra la etiqueta como bloque */
    margin-bottom: 5px; /* Margen inferior */
}

/* Estilos para los inputs de texto y contraseñas */
.for_input[type="text"], 
.for_input[type="password"],
.for_input[type="email"],
.for_input[type="date"],
.for_input[type="time"],
.for_input[type="number"] {
    width: 100%; /* Ancho del input */
    padding: 10px; /* Espaciado interno */
    margin: 5px 0; /* Margen vertical */
    border: 1px solid #000; /* Borde alrededor del input */
    border-radius: 4px; /* Bordes redondeados en el input */
}

/* Estilos para selecciones */
.for_select {
    width: 100%; /* Ancho del select */
    padding: 10px; /* Espaciado interno */
    margin: 5px 0; /* Margen vertical */
    border: 1px solid #000; 
    border-radius: 4px; 
}

/* Estilos para áreas de texto */
.for_textarea {
    width: 100%; /* Ancho del textarea */
    padding: 10px; /* Espaciado interno */
    margin: 5px 0; /* Margen vertical */
    border: 1px solid #000; 
    border-radius: 4px; 
}

/* Estilos para el botón del formulario */
.for_button {
    background-color: #f9f3e8; /* Color de fondo suave */
    color: #6b4f4f; /* Color del texto */
    border: 2px solid #6b4f4f; /* Borde del botón */
    border-radius: 8px; /* Bordes redondeados */
    padding: 12px 24px; /* Espacio interno */
    text-align: center; /* Alinea el texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Permitir márgenes alrededor */
    font-family: 'Georgia', serif; /* Fuente elegante */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
    width: 100%; /* Ancho completo para el botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

/* Estilos para el botón al pasar el ratón */
.for_button:hover {
    background-color: var(--color-Hover); /* Cambia el fondo en hover */
    color: var(--color-Fondo-2); /* Cambia el color del texto en hover */
}

/* Estilos específicos para la página obras.php */
.obras_contenedor {
    display: flex; /* Diseño flexible para la sección de obras */
}

.obras_izquierda {
    width: 50%; /* Porcentaje de ancho para la columna izquierda */
    margin-right: 20px; /* Margen a la derecha */
}

.obras_izquierda img {
    width: 100%; /* Imagen ocupa todo el ancho */
    height: auto; /* Mantiene la proporción de la imagen */
}

.obras_textos {
    margin-top: 10px; /* Margen superior para separación */
}

.obras_derecha {
    width: 50%; /* Porcentaje de ancho para la columna derecha */
}

/* Estilos de administración */
.obras_lista {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding */
}

.admin_elemento {
    display: flex; /* Utiliza flexbox para disposición en fila */
    margin: 20px 0; /* Espaciado vertical entre elementos */
    border: 1px solid #ccc; /* Bordes de los elementos */
    padding: 10px; /* Espaciado interno */
}

.admin_imagen {
    width: 100px; /* Define el ancho de la imagen */
    height: auto; /* Mantiene la proporción */
    margin-right: 10px; /* Espaciado a la derecha de la imagen */
}

.admin_info {
    display: flex;
    flex-direction: column; /* Organiza título y descripción en columna */
}

.admin_titulo {
    font-size: 1.2em; /* Tamaño de la fuente del título */
    margin: 0; /* Elimina márgenes */
}

.admin_descripcion {
    font-size: 1em; /* Tamaño de la fuente de la descripción */
    color: #555; /* Color de texto de la descripción */
}

/* Eventos */
.eventos_lista {
    list-style: none; /* Elimina puntos de la lista */
    padding: 0; /* Elimina el padding */
}

.evento_elemento {
    border: 1px solid #ccc; /* Bordes */
    margin: 15px 0; /* Espaciado vertical */
    padding: 10px; /* Espaciado interno */
    background-color: #f9f9f9; /* Fondo claro */
}

.evento_nombre {
    font-size: 1.5em; /* Tamaño texto del nombre del evento */
}

.evento_info {
    display: flex; /* Flexbox para información del evento */
    justify-content: space-between; /* Espacio entre elementos */
    align-items: center; /* Alineación vertical */
    font-size: 0.9em; /* Tamaño de fuente más pequeño */
    color: #666; /* Color gris */
}

.evento_info_izquierda {
    flex: 1; /* Permite que ocupe el espacio disponible */
}

.evento_precio {
    margin-left: 15px; /* Opcional: espacio al lado derecho */
}

.evento_elemento {
    position: relative;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px ;
    margin: 10px 0;
}

.evento_actions {
    position: absolute; /* Posición absoluta para los iconos de acciones */
    top: 10px; /* Desde la parte superior */
    right: 10px; /* Desde la derecha */
}

.evento_actions a {
    color: #333; /* Color del icono */
    margin-left: 10px; /* Espacio entre los dos iconos */
    text-decoration: none; /* Sin subrayado */
}

.editar_btn:hover {
    color: #007BFF; /* Cambia el color al pasar el ratón */
}

.borrar_btn:hover {
    color: #ff0000; /* Cambia el color al pasar el ratón */
}

/* Estilo para la clase reina */
.reina {
    width: 30%; /* Ancho específico */
}

@media (max-width: 700px) { /* Ajusta para pantallas pequeñas */
    .reina {
        width: 90%; /* Ajusta el tamaño en dispositivos más pequeños */
    }
}

/* Estilo de fondo general */
.fondo {
    background-color: #fff0ff; /* Color de fondo específico */
}

/* Remover estilo de lista en ciertas secciones */
.quitar_estilo {
    list-style-type: none; /* Elimina puntos de la lista */
}

/* Estilo básico del botón */
.header_botones {
    background-color: #f9f3e8; /* Color de fondo suave */
    color: #6b4f4f; /* Color del texto */
    border: 2px solid #6b4f4f; /* Borde del botón */
    border-radius: 8px; /* Bordes redondeados */
    padding: 12px 24px; /* Espacio interno */
    text-align: center; /* Alinea el texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Permitir márgenes alrededor */
    font-family: 'Georgia', serif; /* Fuente elegante */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

.botones_normales {
    background-color: #f9f3e8; /* Color de fondo suave */
    color: #6b4f4f; /* Color del texto */
    border: 2px solid #6b4f4f; /* Borde del botón */
    border-radius: 8px; /* Bordes redondeados */
    padding: 12px 24px; /* Espacio interno */
    text-align: center; /* Alinea el texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Permitir márgenes alrededor */
    font-family: 'Georgia', serif; /* Fuente elegante */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

/* Efecto hover */
.header_botones:hover {
    background-color: var(--color-Hover); /* Cambia el fondo en hover */
    color: var(--color-Fondo-2); /* Cambia el color del texto en hover */
}

.botones_normales:hover {
    background-color: var(--color-Hover); /* Cambia el fondo en hover */
    color: var(--color-Fondo-2); /* Cambia el color del texto en hover */
}

/* Estilo para botones deshabilitados */
.header_botones_disabled {
    background-color: #e0d6c4; /* Fondo gris claro */
    color: #b2a093; /* Color de texto gris */
    border: 2px solid #b2a093; /* Borde gris */
    border-radius: 8px; /* Bordes redondeados */
    padding: 12px 24px; /* Espacio interno */
    text-align: center; /* Alinear texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Permitir márgenes */
    font-family: 'Georgia', serif; /* Fuente elegante */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
    cursor: not-allowed; /* Cambia el cursor */
    opacity: 0.6; /* Opacidad para denotar deshabilitado */
}

nav {
    position: relative;
}

/* Estilos para el toggle del menú */
.menu-toggle {
    display: none; /* Se mostrará solo en dispositivos móviles */
    cursor: pointer;
    padding: 10px;
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #333; /* Color de las barras */
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* display: flex; /* Por defecto, se muestra como una fila */
}

.nav-list li {
    display: inline; /* Mantenemos los elementos en línea en vista de escritorio */
}

.nav-list a {
    text-decoration: none;
    padding: 10px 15px; /* Aumento del espacio alrededor de los enlaces */
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .header_botones {
        width: 80%;
    }

    .header_botones_disabled {
        width: 80%;
    }

    .menu-toggle {
        display: block; /* Muestra el icono en dispositivos móviles */
    }

    .nav-list {
        display: none; /* Oculta el menú por defecto */
        flex-direction: column; /* Cambia a columna cuando está visible */
    }

    .nav-list.active {
        display: flex; /* Muestra el menú cuando se activa */
    }
}

.deco {
    text-decoration: none;
}

@media (max-width: 700px) { /* Ajusta para pantallas pequeñas */
    #google_translate_element {
        margin-bottom:10px; /* Ajusta el tamaño en dispositivos más pequeños */
    }
}