@charset "utf-8";
/* CSS Document */
h2{ 
color: #1c1c1d;
    text-align: left;}
 h4 {
    font-size: 16px;
    margin: 20px 0 0;
}
.barritaazul2 {
    background-color: #4e32aa!important;
    border-bottom: 1px solid #4e32aa!important;
    }
.items-menublue2 {  background-color: #4e32aa!important; }
.items-menublue2:hover, a.items-menublue2.button.button-rounded:hover {
    background-color: #5b3ac7 !important;
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    }
	
.containersimposio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	padding: 10px
}

.text-box {
	background-color: #fff;
	padding: 40px 20px 20px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative; /* Clave para el posicionamiento del número */
	min-height: 150px;
	transition: transform 0.2s;
}

.text-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.section-number {
	position: absolute;
    top: 3px;
    left: 10px;
    color: #007bff;
    padding: 5px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.1em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    min-width: 33px;
    text-align: center;
}

.text-content {
	padding-bottom: 10px; /* Espacio para que el texto no choque con el número */
	line-height: 1.6;
}

.text-content strong {
	color: #0056b3; /* Un color distinto para resaltar la negrita */
}
/*
 * CSS para ocultar todos los divs de contenido inicialmente.
 * La clase 'contenido-eje' se agrega a cada div.
 */
.contenido-eje {
	padding: 20px 0;
	margin-top: 10px;
	/* La propiedad clave para ocultar */
/*	display: none;*/
}
/* Clase para mostrar el div cuando se activa */
	.mostrar-eje {
		display: block !important;
	}
/* Estilo básico para los botones (opcional) */
.botones130, .botonesejes {
	list-style: none;
	padding: 0;
	display: flex;
	flex-flow: wrap;
    margin: 10px 0 !important;
}
.botonesejes {align-items: stretch;
    justify-content: center;
    align-content: center;
	flex-flow: nowrap;
}
.botonesejes li {
    padding: 4px 0;
}
.botones130 li {
    padding: 4px 0;
	margin: 10px 4px;
}
.botones130 a {
	text-decoration: none;
	padding: 8px 12px;
	background-color: #4e32aa;
	border: 1px solid #4e32aa;;
	color: white;
	border-radius: 5px;
	cursor: pointer;
}
.botonesejes a { display:block;text-align: center;
	text-decoration: none;
	padding: 8px 15px;
	color: white;
	background-color: #057189;
	border: 1px solid #057189;
	border-radius: 5px;
	cursor: pointer;    text-shadow: 0 0 2px #000;}
.botonesejes a:hover, .botones130 a:hover {
	background-color: #FFF;
	color: #057189 ;    text-shadow: 0 0 0 #FFF;
}

dl { margin-bottom: 20px; padding: 0; }
        
/* Estilo para los nombres de los expositores */
dt { 
	font-weight: bold; 
	margin-top: 8px; 
	color: #333;
	list-style: none; /* Quitamos el estilo de lista si existe */
	padding-left: 0;
}

/* Estilo para el país y la participación para que queden en línea */
.country {
	font-weight: normal;
	color: #555;
	margin-left: 5px; /* Espacio después del nombre */
}

.participacion {
	font-style: italic;
	font-weight: bold;
	color: #007bff; /* Color azul para destacar la participación */
	margin-left: 5px;
}

/* Estilos para la leyenda de participación */
.leyenda {
	margin-bottom: 20px;
	font-size: 0.9em;
}
.leyenda strong {
	display: block;
	margin-bottom: 5px;
}

/* 1. Oculta el contenido por defecto */
.recomendacion-contenido {
    /* Altura 0 y overflow: hidden ocultan el contenido sin quitarlo del DOM */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Animación de despliegue */
    padding-left: 15px; /* Margen para el contenido oculto */
}

/* 2. Clase para MOSTRAR el contenido (agregada por JavaScript) */
.recomendacion-contenido.mostrar {
    max-height: 500px; /* Suficiente altura para que se muestre todo el texto */
    padding-top: 0;
    padding-bottom: 10px;
}

/* Estilos de los botones para cambiar el texto al hacer clic */
.toggle-btn[data-estado="oculto"] {
  background-color: transparent;
    color: #007bff;
    padding: 0 2px;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}

.toggle-btn[data-estado="visible"] {
    background-color: transparent;
    color: #28a745;
    padding: 2px;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}

.recomendacion-header {
    margin-bottom: 0; /* Limpieza de márgenes */
    font-size: 1.1em;
}
.recomendacion-contenido strong {color: #007bff;}

.recomendacion-contenido span {
    display: block; /* Asegura que el span ocupe su propio bloque de línea */
    border-left: 3px solid #ccc;
    padding-left: 10px;
    margin-top: 5px;
}


/*  CSS autores y textos */
	.author-list { padding: 30px 0; margin-bottom: 40px; }
	.author-list h2 { margin-top: 0; color: #34495e; }
	.author-list ul { list-style: none; padding: 0; }
	.author-list li { margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
	.author-list a { text-decoration: none; color: #3498db; font-weight: bold; margin-left: 10px; }
	.author-list a:hover { color: #2980b9; text-decoration: underline; }

	.text-block { background: white; padding: 30px 0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 8px;}
	.text-block h3 { margin-top: 0; color: #2c3e50; font-size: 1.4em; }
	.meta-info { font-style: italic; color: #7f8c8d; margin-bottom: 15px; display: block; }
	.author-name { font-weight: bold; color: #2c3e50; }

	.back-to-top { display: inline-block; margin-top: 20px; font-size: 0.9em; color: #95a5a6; text-decoration: none; border: 1px solid #bdc3c7; padding: 5px 10px; border-radius: 4px; }
	.back-to-top:hover { background: #eee; }

hr { border: 0; height: 1px; background: #ddd; margin: 40px 0; }

.cajatapas { display:flex; flex-flow:wrap}
.cajatapas div { width:50%; box-sizing: border-box; padding: 10px; text-align: center}
.cajatapas div img { width:100%; max-width:300px; display: block; margin:auto; border: 2px solid #01535f;}
section #content .cajatapas div a { background-color: #3498db; color: #FFF !important; text-decoration: none; padding: 8px 10px; display: inline-block; border-radius: 10px; margin: 10px}

@media (max-width:700px){
	.cajatapas { display:block}
	.cajatapas div { width:100%;}
	.cajatapas div img {  max-width:98%;}
}