.familias-profesionales-list {
    font-size: 17px/* Ajustar el tamaño de la letra */
}

.familias-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crear dos columnas */
    gap: 20px; /* Espacio entre las columnas */
}

.familia-item {
    display: flex;
    align-items: center; /* Alinear imagen y nombre */
    gap: 10px; /* Espacio entre la imagen y el nombre */
}

.familia-imagen img {
    max-width: 100px; /* Limitar el tamaño de la imagen */
    height: auto;
}

.familia-nombre {
    font-size: 17px; /* Tamaño de la fuente para los nombres */
    font-weight: 400; /* Opcional, para hacer el nombre más destacado */
    color: #6CADDC; /* Color de la fuente */
    font-family: Roboto;
}

.familia-nombre a {
    text-decoration: none;
    color: #6CADDC; /* Color del enlace */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

.familia-nombre a:hover {
    color: #fffff; /* Aclarar el color al pasar el ratón */
}
.familias-profesionales-list {
    font-size: 17px; /* Ajustar el tamaño de la letra */
}

.familias-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crear dos columnas */
    gap: 20px; /* Espacio entre las columnas */
}

.familia-item {
    display: flex;
    align-items: center; /* Alinear imagen y nombre */
    gap: 10px; /* Espacio entre la imagen y el nombre */
}

.familia-imagen img {
    max-width: 100px; /* Limitar el tamaño de la imagen */
    height: auto;
}

.familia-nombre a {
    text-decoration: none;
    color: #6CADDC; /* Color del enlace */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

.familia-nombre a:hover {
    color: #8fc4e4; /* Aclarar el color al pasar el ratón */
}
/* Estilo personalizado para el popover */
.popover {
    color: #6CADDC;
    max-width: 100% !important;
}

.popover .popover-header {
    background-color: #f8f9fa; /* Color de fondo del header */
    border-bottom: 1px solid #dee2e6; /* Borde inferior */
}

.popover .popover-body {
    font-size: 14px; /* Tamaño de fuente del contenido */
    color: #274C5E;
}

td.hasPopover {
    font-weight:bold;
    text-align:left;
}

.table-container{
    text-align: left;
    margin-top: 50px;
}
table {
    width: 100%;
    border-collapse: collapse;
    color: #274c5e;
}
td {
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 14px;
    line-height: 1,5em;
    text-align: right;
}

tr {
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 14px;
    line-height: 1,5em;
    text-align: right;
}

tbody tr:hover{
    background-color: #ffffdd;
}

img {
     padding-right:5px;
}

.total {
   text-align:center;
}