/********************** GLOBAL **********************/

body {
  font-family: Arial, sans-serif;
  font-size: 3em;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  color: #333;
}

/* Contenedor general */
#global-container {
  height: 100vh;
  max-width: 1200px;
  margin: auto;
  font-size: 1em;
}

/* Enlaces en general */
a{
  text-decoration: none;
  color: white;
}
/* Enlaces especiales */
.link{
  text-decoration:underline;
  color: #160d4d;
}

/* Scrolls generales */
.scroll-container{
  flex: 1;
  overflow-y: auto;
  height: 77vh;
  font-size: 1em;
}
/* Scroll reducido */
.scroll-mini{
  height: 72vh;
  font-size: 1em;
}
/* Scroll de la lista inicial */
#child-container{
  height: 82vh;
}
/* Ancho general de los scroll */
::-webkit-scrollbar {
  width: 0px; 
}

/********************** HEADER **********************/

/* Contenedor general del header */
#header-container {
  display:flex;
  flex-direction: column;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #0078d4;
  color: white;
}

/* Contenedor del h1 y el button del menú opciones */
#header-title {
  display: flex;
  align-items: center;
}

/* img para el botón del menú de opciones */
#options-button {
  padding: 1.9%;
  max-width:9%;
  cursor: pointer;
  object-fit:contain;
}

/* H1 ubicado en el header para mostrar el título de la página */
h1 {
  background-color: #0078d4;
  width: 88%;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 35px;
  padding-bottom: 15px;
  color: white;
  text-align: center;
  height: 50%;
  font-size: 1.5em; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Contenedor para el menú de opciones */
#header-options {
  display: none;
  transition: display 0.6s;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: #0078d4;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

/* Clase ubicada en header-options para ocultar el menú de opciones */
.hidden {
  display: none;
}

/* Opción individual del menú de opciones */
.header-option {
  background-color: #0078d4;
  color: white;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  flex: 1;
  align-items: center;
  padding: 50px;
}

/* Efecto cuando se hace hover sobre las opciones del menú*/
.header-option:hover {
  background-color: #084e83;
  transition: background-color 0.6s ease;
}

/********************** IMÁGENES CON MAPAS **********************/

/* Contenedores de imagen */
.container-with-image {
  position: relative;
  overflow: hidden;
  width: 100%; 
  height: auto;
  border: 1px solid black;
}

/* Imágenes en general */
.map-image {
  width: 100%;
  object-fit: contain;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Configuración del punto en el mapa */
.point-class {
  position: absolute;
  width: 3%;
  height: 3%;
  background-color: red;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  font-size: 0.5em;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

/* Coordenadas en modo test */
#coordinates {
  text-align: center;
}

/********************** LISTADOS (LUGARES Y UPDATES) **********************/

/* Listados en general */
ul {
  list-style-type:none;
  padding: 0px;
  margin-top: 0px;
}

/* Listados places y updates */
.lists{
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  padding: 20px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

/* Elementos de los listados places y updates */
.lists li {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  padding-top: 0px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 1em;
}

/* Configuración particular para elementos de updates */
#updates li {
  cursor: default;
}

/* Efecto particular del hover sobre los elementos de la lista de lugares */
#list_places li:hover {
  background-color: #c0c0c0;
  color: #160d4d;
  transition: background-color 0.6s ease, color 0.6s ease;
}

/*************************** CAJAS DE TEXTO **********************/
/* Formatos de las cajas de formulario */
.forms {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
  font-size: 1em;
}

/* Cajas input generales */
input[type="text"] {
  width: 98.2%;
  padding: 10px 0px 10px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
}

/* Cajas de texto */
.text-boxes {
  width: 97%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 1em; 
  resize: none;
}

/* Cajas de texto cogiendo focus */
.text-boxes:focus {
  background-color:rgb(246, 247, 237);
  box-shadow: 8px 8px 15px rgb(0, 0, 0);
}

/* Formato de los label campo requerido */
.label-form {
  width: 97%;
  display: block;
  font-family: Arial, sans-serif;
  margin-top: 10px;
  margin-bottom: 2px;
  color: red;
  font-size: 0.6em;
}

/* Barra de búsqueda */
#buscar{
  font-size: 1.2em;
  padding: 10px;
  width: 98.3%;
}

/************************* SECCIONES ************************/
/* Formato caja general de la sección */
.section-container {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  padding: 20px;
  max-width: 100%;
  font-size: 1em;
}

/*  Título de cada sección */
.title-section{
  color: #333;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

#place_data{
  font-weight: normal;
}

/******************* BOTONES *****************/
/* Botones de las secciones */
.section-buttons{
  display: flex;
  font-size: 1em;
  text-align: center;
  background-color: #0078d4;
  color: white;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  margin-bottom: 20px;
  cursor: pointer;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
  height: 3em;
  align-items: center;
  justify-content: center;
  padding:10px;
}

.section-buttons:hover{
  background-color: #00539f;
  transition: background-color 0.6s ease;
}

/* Caja union botones en una misma línea */
.flex-box{
  display: flex;
  flex-wrap:nowrap;
}
/* Botones que comparten una misma línea */
.button-double{
  display:flex;
  flex: 1;
  margin-top: 0px;
}
.button-double-left{
  margin-right: 1.5%;
}
.button-double-right{
  margin-left: 1.5%;
}
/* Botones de envío de información */
.send-buttons{
  margin-top: 20px;
  font-size: 1em;
  font-weight: bold;
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
}

.send-buttons:hover {
  background-color: #00539f;
  transition: background-color 0.6s ease;
}

/* Estilos CSS para el cuadro de diálogo personalizado */
#custom-alert {
  display: none;
  position: fixed;
  font-size: 1em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  max-width: 800px;
  width: 90%;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

#button_alert{
  display: block;
  margin: 0 auto; 
  margin-top: 10px; 
  padding: 10px 20px;
  background-color: #3f96cf;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5em;
}

/* Fondo semitransparente cuando la alerta está activa */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
  z-index: 99; 
}
#header-container{
  z-index: 100;
}

/* Pantallas ocultas*/
.hide-section{
  display: none;
}

/* Efecto círculo espera */
#contenedor-circulo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

#circulo {
  width: 160px; 
  height: 160px; 
  border: 10px solid #333; 
  border-top: 10px solid transparent; 
  border-radius: 50%; 
  animation: girar 1s linear infinite; 
}

@keyframes girar {
  100% {
    transform: rotate(360deg); /* Rotación completa */
  }
}