@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;400&display=swap');


/* Agrega esta clase a las secciones que deseas ocultar inicialmente */
.hidden {
    display: none;
}

/* Eliminar margen exterior */
html, body {
	max-width: 1024px;
    margin: auto;
    padding: 0;
	/*font-family: 'Poppins';*/
	font-family: 'Josefin Sans';
	font-weight: 200;
	background-color: #fff;
}

/***********************************/
/* Estilos para el título y el pie */
/***********************************/
header {
	max-width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
}
header h1 {
	max-width: 100%;
	font-weight: normal;
	margin: 0;
	padding: 0;
	line-height:0;
}
header h1 img {
	max-width: 100%; /* La imagen no será más ancha que su contenedor */
	margin: 0;
	padding: 0;
}

footer {
    padding: 5px;
}

/***************************************/
/* Estilos para la barra de navegación */
/***************************************/
nav {
	/*background-color: #425818;*/
	border-top: 1px solid #dae0ce;
	border-bottom: 1px solid #dae0ce;
	text-align: center;
	padding: 0;
	margin: 0;
	line-height: 25px;
}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
nav ul li {
	display: inline;
}
nav ul li a {
	text-decoration: none;
	color: #b3bca3;
	padding: 0px 10px;
	font-size: 1.2vh;
	font-weight: 400;
	text-transform: uppercase;
	position: relative; /* Permite el posicionamiento del borde */
	transition: border-bottom 1.3s ease;
}
nav ul li a:hover {
	border-bottom: 2px solid #425818;
}
nav ul li a.active {
	color: #000;
	border-bottom: 2px solid #425818;
}


/****************************************/
/* Estilos para las secciones generales */
/****************************************/
body{
	font-size: 14px;
}

body h2 {
	font-weight: normal;
	text-align: center;
	font-size: 18px;
	color: #666666;
}
section img{
	max-width: 50%;
}
section.general {
    /* Estilos que se aplicarán a las secciones que no tienen la clase "subsection" */
    padding-left: 20px;
	padding-right: 20px;
}
section.border{
	border-bottom: 1px solid #dae0ce;
	padding: 0px;
	margin: 0px;
}
section.titulo-despl h3 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.2vh;
	font-weight: normal;
	text-transform: uppercase;
	color: #b3bca3;
}
section.titulo-despl h3 span{
	font-size: 12px;
}
section.titulo-despl h3:hover {
	color: #111;
}
section.despl {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
}
section.despl.mostrar {
  max-height: 1000px; /* Valor máximo que se ajustará automáticamente al contenido */
}

img.foto{
	max-width: 100%;
}

img.img_loc{
	max-width: 50%;
	margin-left: 12px;
}

a.maps {
    display: flex;
    justify-content: center;
    align-items: center;
}

a.maps img {
    filter: brightness( 100% ) contrast( 100% ) saturate( 0% ) blur( 0px ) ;
    transition: filter 0.3s ease-in-out;/* Agrega una transición suave */
	margin:5px;
	margin-bottom:20px;
}

a.maps:hover img{
    filter: brightness( 100% ) contrast( 100% ) saturate( 70% ) blur( 0px ) ;
}

a.enlace-ext{
	text-decoration:none;
	color: #b3bca3;
}

.localizacion{
	font-weight: 300;
	text-decoration: none;
}
.localizacion:hover{
    cursor: pointer;
}
.localizacion:hover span{
	color:	#b3bca3;
}
/* Mapas */
#mapid {
	height: 300px;
}
.loc-list {
	height: 400px;
	overflow-y: scroll;
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	vertical-align: top;

}


/***********************/
/* Estilos especificos */
/***********************/

/* Cambiar el color del texto y borde de los inputs */
input[type="text"],
input[type="email"],
input[type="checkbox"] {
    color: #555; /* Cambia el color del texto */
    border: 1px solid #ccc; /* Cambia el color del borde */
	width: auto; /* Ancho automático según el contenido */
}

input[type="text"]{
	border: 0px;
	width: 130px;
}

input[type="checkbox"]:checked {
    background-color: #45b39d; /* Cambia YourColor al color deseado */
}

h5 {
	margin-bottom: 2px;
	margin-top: 6px;
	color: #888;
}

#formulario {
    max-width: 350px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centrar el formulario horizontalmente */
}

.intolerancias {
    display: flex;
	gap: 10px; /* Espacio entre columnas de intolerancias */
}
.columna {
    flex: 1;
}
.asistente {
	/*border: 1px solid #dae0ce;*/
	padding: 10px;
	background-color:  #eaf1ec;
	border-radius: 15px;
	position: relative; /* Posicionamiento relativo para el asistente */
    margin-bottom: 20px; /* Espacio entre asistentes */
	
}
/* Estilos para el símbolo de eliminar (✖) */
.eliminar {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #555; /* Color rojo para la "x" */
    cursor: pointer;
    position: absolute; /* Posicionamiento absoluto para alinear */
    top: 0; /* Ajustar la posición desde la parte superior */
    right: 0; /* Ajustar la posición desde la derecha */
	margin-right:8px;
	margin-top:5px;
}
label:hover {
	color:  #45b39d;
	font-weight:bold;
}
.eliminar:hover {
	color: #222;
	
}

/* Estilos para el título "Datos Personales" */
.titulo {
    margin: 0; /* Asegura que no haya margen en el título */
    display: inline-block; /* Hace que el título sea un bloque en línea */
    vertical-align: top; /* Alinea el título en la parte superior */
}

input.texto_alerg {
	width: 324px; /* Ancho de la caja de texto */
}

button{
	margin-bottom: 8px;
}

/* Estilos para el botón con el ID 'agregarAsistente' */
#agregarAsistente {
	font-family: 'Josefin Sans';
	background-color:  #b0e6bf; /* Cambiar el color de fondo */
	color: white; /* Cambiar el color del texto */
	padding: 5px 10px; /* Cambiar el relleno (padding) */
	border: none; /* Eliminar el borde */
	border-radius: 20px; /* Agregar bordes redondeados */
	cursor: pointer; /* Cambiar el cursor al pasar por encima */
}

/* Estilos para el botón de tipo 'submit' */
button[type="submit"] {
	font-family: 'Josefin Sans';
	background-color: #45b39d; /* Cambiar el color de fondo */
	color: white; /* Cambiar el color del texto */
	padding: 5px 10px; /* Cambiar el relleno (padding) */
	border: none; /* Eliminar el borde */
	border-radius: 20px; /* Agregar bordes redondeados */
	cursor: pointer; /* Cambiar el cursor al pasar por encima */
}

table {
	color:  #black;
	text-align: center;
	font-size:18px;
	text-transform: lowercase;
	border-collapse: collapse;
	border: 0px solid black;
	padding: 8px;
	width: 100%;
}
th {
	width: 25%;
	font-weight: 200;
}
td {
	font-weight: 100;
	font-size: 12px;
}

.table-dark-text td {
    color: #333; /* Un color gris oscuro */
}

/**** ADAPTLABLE ****/

@media (min-width: 768px) {
    .mobile {
        display: none;
    }
	nav ul li{
      padding-top: 0px;
	  padding-bottom: 0px;
    }
	nav ul li a{
		font-size: 1.8vh;
	}
	th{
		width: 70px;
	}
	img.foto{
		width: 450px;
		display: block;
        margin: 0 auto;
	}
	section.titulo-despl h3{
		font-size: 16px;
	}
}