/* Estilos generales */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa; /* Color de fondo suave */
    color: #343a40; /* Color de texto principal */
}

h1, h2, h3, h4 {
    color: #007bff; /* Color azul para encabezados */
}

/* Estilo para el contenedor principal */
.container {
    max-width: 1200px; /* Ancho máximo del contenedor */
}

/* Sección de información básica */
.info-basica p {
    margin-bottom: 0.5rem; /* Espaciado entre párrafos */
}

/* Estilo para la galería */
.galeria img {
    transition: transform 0.3s; /* Efecto de transición al pasar el mouse */
}

.galeria img:hover {
    transform: scale(1.05); /* Aumentar tamaño al pasar el mouse */
}

/* Estilo para las secciones */
section {
    background-color: #ffffff; /* Fondo blanco para secciones */
    border-radius: 0.5rem; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    padding: 1.5rem; /* Espaciado interno */
    margin-bottom: 2rem; /* Espaciado entre secciones */
}

/* Estilo para listas */
.list-group-item {
    background-color: #f8f9fa; /* Fondo de lista suave */
    border: 1px solid #dee2e6; /* Borde de lista */
}

.list-group-item:hover {
    background-color: #e9ecef; /* Color de fondo al pasar el mouse */
}

/* Estilo para el mapa */
.ubicacion iframe {
    border-radius: 0.5rem; /* Bordes redondeados para el mapa */
}

/* Estilo para opiniones */
.opiniones {
    background-color: #e9ecef; /* Fondo gris claro */
    border-left: 5px solid #007bff; /* Borde izquierdo azul */
}

/* Estilo para calificación */
.calificacion p {
    font-weight: bold; /* Negrita para la calificación */
    color: #ffc107; /* Color amarillo para calificación */
    margin-bottom: 0;
}

/* Estilo para enlaces */
a {
    color: #007bff; /* Color azul para enlaces */
    text-decoration: none; /* Sin subrayado */
}

a:hover {
    text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* Estilo para la sección de opiniones */
.opiniones {
    background-color: #f8f9fa; /* Fondo suave para la sección */
    border-radius: 0.5rem; /* Bordes redondeados */
    padding: 1.5rem; /* Espaciado interno */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilo para cada opinión */
.opiniones strong {
    color: #007bff; /* Color azul para los nombres de los pacientes */
    font-size: 1.1rem; /* Tamaño de fuente ligeramente mayor */
}

.opiniones p {
    margin: 0.5rem 0; /* Espaciado entre párrafos */
    line-height: 1.5; /* Altura de línea para mejor legibilidad */
}

/* Estilo para las estrellas de calificación */
.opiniones span.rating {
    color: #ffc107; /* Color dorado para las estrellas */
    font-size: 1rem; /* Tamaño de fuente para las estrellas */
}

/* Estilo para la línea divisoria */
.opiniones hr {
    border: 0; /* Sin borde */
    height: 1px; /* Altura de la línea */
    background-color: #dee2e6; /* Color de la línea */
    margin: 1rem 0; /* Espaciado vertical */
}

/* Estilo para las etiquetas de Local Guide */
.opiniones .local-guide {
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
    color: #6c757d; /* Color gris para las etiquetas */
}

/* Estilo para la sección de especialidades */
.especialidades {
    background-color: #f8f9fa; /* Fondo suave para la sección */
    border-radius: 0.5rem; /* Bordes redondeados */
    padding: 1.5rem; /* Espaciado interno */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilo para la lista de especialidades */
.especialidades ul {
    list-style: none; /* Eliminar viñetas */
    padding: 0; /* Eliminar padding */
    margin: 0; /* Eliminar margen */
}

/* Estilo para cada elemento de la lista */
.especialidades li {
    background-color: #ffffff; /* Fondo blanco para cada caja */
    border: 1px solid #dee2e6; /* Borde gris claro */
    border-radius: 0.5rem; /* Bordes redondeados */
    padding: 1rem; /* Espaciado interno */
    margin-bottom: 1rem; /* Espaciado entre elementos */
    transition: transform 0.3s, box-shadow 0.3s; /* Efecto de transición */
}

/* Efecto de hover para los elementos de la lista */
.especialidades li:hover {
    transform: translateY(-2px); /* Levantar ligeramente al pasar el mouse */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al pasar el mouse */
}

/* Estilo para pantallas más grandes */
@media (min-width: 768px) {
    .especialidades li {
        display: flex; /* Usar flexbox para alinear contenido */
        justify-content: center; /* Centrar contenido */
        align-items: center; /* Alinear verticalmente */
        font-size: 1.1rem; /* Tamaño de fuente más grande */
    }
}




/* Estilo para el botón de copiar */
#copyButton {
    background-color: #ffffff; /* Color de fondo */
    color: #949494; /* Color de texto blanco */
    border: none; /* Sin borde */
    border-radius: 0.25rem; /* Bordes redondeados */
    padding: 0.5rem 1rem; /* Espaciado interno */
    cursor: pointer; /* Cambiar cursor al pasar el mouse */
    display: inline-flex; /* Usar flexbox para alinear el icono y el texto */
    align-items: center; /* Alinear verticalmente */
    font-size: 0.9rem; /* Tamaño de fuente */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
}

/* Efecto hover para el botón */
#copyButton:hover {
    background-color: #e1f0ff;
    color: #361ade;
}

/* Estilo para el icono del botón */
#copyButton img {
    width: 1rem; /* Ancho del icono */
    height: 1rem; /* Alto del icono */
    margin-right: 0.5rem; /* Espaciado a la derecha del icono */
}