/* Contenedor que da el borde naranja */
.profile-img-container {
    border: 3px solid #f47920 !important; /* El color naranja institucional de El Colef */
    padding: 3px !important;              /* Espacio entre la foto y el borde */
    border-radius: 50% !important;        /* Esto hace que el contenedor sea un círculo perfecto */
    overflow: hidden;                     /* Asegura que la foto no se salga del círculo */
    width: 200px;                         /* Ajusta el tamaño deseado */
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;                       /* Centrado */
}

/* Ejemplo en tu archivo CSS si quieres un color específico */
.etiqueta-colef {
    background-color: #fcecd5;
    color: #e67e22;
    border: 1px solid #e67e22;
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
}

/* Ajuste de la imagen dentro del círculo */
.profile-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;                    /* Ajusta la foto para que llene el círculo sin deformarse */
    border-radius: 50%;                   /* También hace la imagen circular */
}

/* Estilo de las pestañas */
.nav-tabs .nav-link {
    color: #006064; /* Color azul institucional */
    border: 2px solid #dee2e6;
    transition: 0.3s;
}

.nav-tabs .nav-link.active {
    background-color: #f47920 !important; /* Naranja institucional */
    color: white !important;
    border: none;
}

/* Estilo de las tarjetas de resumen */
.content-statistics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
}

.content-statistics li {
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.content-statistics li h2 {
    color: #006064;
    font-weight: 700;
    margin-bottom: 5px;
}

.content-statistics li span {
    font-size: 0.9rem;
    color: #6c757d;
}

/* 1. Aseguramos que la columna no tenga restricciones de alineación */
.col-lg-8 {
    width: 100% !important; /* Fuerza al ancho completo disponible */
    flex: 0 0 66.666667% !important; /* Mantiene la proporción de rejilla */
    max-width: 66.666667% !important;
}

/* 2. Hacemos que el contenido interno de las pestañas se expanda */
.tab-content {
    display: block !important;
    width: 100% !important;
}

/* 3. Evitamos que cualquier margen izquierdo empuje el contenido hacia la derecha */
.ps-lg-1-6, .ps-xl-3 {
    padding-left: 0 !important; /* Elimina el espacio sobrante a la izquierda */
    padding-right: 0 !important;
}