/* General Styles */
body {
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    padding: 0;
}
/*Casos Clínicos*/
.bg-primary {
    background-color: #1E9C99;
}
.case-card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
	min-height: 200px; /* Altura mínima para las tarjetas */
}
.case-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.modal-body ul {
	padding-left: 20px;
}
.modal-body strong {
	color: #0056b3;
}
/* Floating Social Bar */
.floating-bar {
    position: fixed;
    right: 10px;
    bottom: 10%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.floating-bar a {
    font-size: 20px;
    color: #fff;
    background-color: #007bff;
    padding: 10px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}

.floating-bar a:hover {
    background-color: #0056b3;
}

/* Sticky Navigation */
nav {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Footer Styles */
footer {
    background-color: #222;
    color: #fff;
    padding: 20px 0;
}

footer h5 {
    margin-bottom: 10px;
}

footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

footer a:hover {
    color: #007bff;
}

/* Video Gallery */
#videos video {
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.video-card {
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            margin-bottom: 1rem;
            overflow: hidden;
        }

        .video-thumbnail-container {
            position: relative;
            cursor: pointer;
        }

        .video-thumbnail {
            width: 100%;
            height: auto;
            display: block;
        }

        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            color: white;
            opacity: 0.8;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }

        .video-info {
            padding: 1rem;
        }

        .timestamp-link {
            display: inline-block;
            margin-right: 0.5rem;
            font-size: 0.9rem;
        }

/* Form Styles */
form {
    max-width: 600px;
    margin: 0 auto;
}

form .form-control {
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid #ddd;
}

form .btn {
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 10px 20px;
    transition: background-color 0.3s;
}

form .btn:hover {
    background-color: #0056b3;
}
/*Expertos*/
.speaker-card {
	border: none;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	transition: transform 0.2s;
	cursor: pointer;
	height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
}
.speaker-card:hover {
	transform: translateY(-5px);
}
.speaker-card img {
	width: 100%;
	height: 300px; /* Altura fija para las imágenes de la tarjeta */
	object-fit: cover; /* Recorta la imagen para que quepa */
	border-top-left-radius: var(--bs-card-border-radius);
	border-top-right-radius: var(--bs-card-border-radius);
}
        .speaker-modal .modal-content {
            border-radius: 0.5rem;
        }
        .speaker-modal .modal-body {
            display: flex;
            flex-direction: column; /* Por defecto para móviles */
            padding: 2rem;
        }
        .speaker-modal .modal-body {
            width: 100%; /* Imagen al 100% en móvil */
            max-width: 90%; /* Limita el tamaño en pantallas grandes */
            height: auto;
            object-fit: cover;
            border-radius: 0.5rem;
            margin-bottom: 1rem; /* Espacio debajo de la imagen en móvil */
        }
		.speaker-image-modal {
			max-width: 100%; 
			height: auto;
			object-fit: contain;
			display: block;
			margin: 0 auto 1rem auto; /* centrado y margen inferior */
		}
        .speaker-modal .modal-body .speaker-bio {
            flex-grow: 1;
        }

        /* Responsive para el modal (desktop) */
        @media (min-width: 768px) {
            .speaker-modal .modal-body {
                flex-direction: row; /* En fila para desktop */
            }
            .speaker-modal .modal-body {
                margin-right: 2rem; /* Espacio a la derecha de la imagen en desktop */
                margin-bottom: 0;
            }
			.speaker-image-modal {
				float: left;
				margin-right: 1rem;
				margin-bottom: 0;
				width: 200px;
				height: auto;
			}
        }