/* ==============================================================================
Theme Name: Phlox Pro Child
Theme URI: http://phlox.pro/go/
Author: averta
Author URI: http://www.phlox.pro
Description: Phlox Pro Child Theme
Template: phlox-pro
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column,two-columns, three-columns, left-sidebar, right-sidebar
Text Domain: phlox-pro-child
================================================================================= */

/* Limit styles to the hero section and main content of single-profesionales */
.single-profesionales .profesional-hero,
.single-profesionales .profesional-content {
    margin-top: 0; /* Elimina márgenes superiores */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    font-family: "Roboto", Arial, sans-serif; /* Fuente para texto general */
}

/* Hero section styling */
.single-profesionales .profesional-hero {
    background-color: #00C488;
    color: white;
    padding: 50px 20px;
    text-align: center;
    border-radius: 150px 0 0 0;
    margin-top: 0; /* Asegura que no se agregue margen adicional */
}

.single-profesionales .profesional-image img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-bottom: 20px;
}

.single-profesionales .profesional-name {
    font-size: 2.5rem;
    color: white;
    margin: 0;
}

.single-profesionales .profesional-position {
    font-size: 1.2rem;
    margin: 10px 0;
    color: #ffffffc7;
}

.single-profesionales .divider {
    width: 50px;
    height: 3px;
    background-color: white;
    margin: 10px auto;
}

/* Content section styling */
.single-profesionales .profesional-content {
    margin-top: 30px;
}

.single-profesionales .profesional-content p {
    font-size: 1rem;
    line-height: 1.5;
    color: #6A6A6A;
}

/* Tabs styling */
.single-profesionales .profesional-tabs {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.single-profesionales .tab-button {
    background-color: #f3f3f3;
    color: #6A6A6A;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 5px;
    transition: all 0.3s;
}

.single-profesionales .tab-button.active,
.single-profesionales .tab-button:hover {
    background-color: #00C488;
    color: white;
}

/* Contenido de cada pestaña */
.single-profesionales .tab-content {
    margin-top: 20px;
    display: none; /* Por defecto oculto, se muestra con JS o con la clase .active */
    color: #6A6A6A;
}

/* Quitamos las viñetas nativas y no dejamos padding extra */
.single-profesionales .tab-content ul {
    list-style-type: none;
    padding-left: 0;   
}

/* Eliminamos la última línea divisoria */
.single-profesionales .tab-content ul li:last-child {
    border-bottom: none;
}

/* Para mostrar la pestaña activa */
.single-profesionales .tab-content:not(.hidden) {
    display: block;
}

/* Hacemos que el check (✓) y el texto estén en la misma línea */
.single-profesionales .tab-content ul li {
    /* Eliminamos position: relative y padding-left para no desplazar el check */
    margin-bottom: 10px;
}

/* Insertamos el check como contenido inline */
.single-profesionales .tab-content ul li::before {
    content: "✓ ";
    color: #00C488; /* Color verde */
    font-weight: bold;
    display: inline; 
    /* vertical-align: middle;  // Descomenta si quieres centrar mejor el check */
}

/* Clases genéricas para alternar contenido */
.tab-content-container {
    display: none;
}
.tab-content.active {
    display: block;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .single-profesionales {
        padding: 10px;
    }

    .single-profesionales .profesional-hero {
        padding: 30px 10px;
    }

    .single-profesionales .profesional-name {
        font-size: 2rem;
    }

    .single-profesionales .profesional-position {
        font-size: 1rem;
    }

    .single-profesionales .tab-button {
        font-size: 0.9rem;
    }

    .single-profesionales .tab-content ul li {
        font-size: 0.9rem;
    }

    /* Permite que los botones se vayan a otra línea en pantallas pequeñas */
    .single-profesionales .profesional-tabs {
        flex-wrap: wrap;
        gap: 5px; /* Reduce la separación entre botones */
        margin-top: 10px; /* Disminuye el margen superior si quieres */
    }

    /* Ajusta la tipografía y el relleno (padding) para que no se corte el texto */
    .single-profesionales .tab-button {
        font-size: 0.9rem; /* O el valor que prefieras */
        padding: 8px 12px; /* Reduce un poco el padding */
        margin: 5px 0;     /* Pequeño espacio vertical entre botones */
    }
}

/* Contenedor general de cards */
.profesionales-cards-container {
    display: grid;         /* O flex, según tu preferencia */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Cada card individual */
.profesional-card {
    border: 1px solid #f5f5f5;
    padding: 20px;
    text-align: center;
    border-radius: 15px;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
}
.profesional-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Imagen destacada circular */
.profesional-card img {
    display: block;         /* Para que margin auto funcione correctamente */
    margin: 0 auto 15px; 
    /* El estilo inline ya se encarga del radius: 50%,
       pero si lo quieres manejar aquí:
       border-radius: 50%; 
       width: 150px;
       height: 150px;
       object-fit: cover; 
    */
}

/* Título de la card */
.profesional-name-card {
	color: #6A6A6A;
    font-size: 0.8rem;
    margin: 0 0 10px;
}

.profesional-name-card a{
    color: #6A6A6A;
}

/* Botón de ver más */
.btn-ver-mas {
	font-size: 0.8rem;
    display: inline-block;
    margin-top: 10px;
    padding: 7px 10px;
    background-color: #00C488;
    color: #fff;
    text-decoration: none;
    border-radius: 15px 15px 0 0;
    font-weight: 600;
}
.btn-ver-mas:hover {
    background-color: #00a875;
	color: #fff;
}

/* Clase para listas personalizadas */
.custom-list {
    list-style: none; /* Elimina las viñetas predeterminadas */
    padding: 0; /* Quita el espacio predeterminado del ul */
}

.custom-list li {
    position: relative; /* Posiciona el icono relativo al texto */
    padding-left: 30px; /* Añade espacio para el icono */
    margin-bottom: 10px; /* Espaciado entre los elementos */
    font-size: 16px; /* Tamaño del texto */
    line-height: 1.5; /* Espaciado entre líneas */
}

/* Estilo del icono del check */
.custom-list li::before {
    content: "✔"; /* Código del check */
    color: white; /* Color del check */
    background-color: #00C488; /* Color de fondo del círculo */
    border-radius: 50%; /* Hace que sea un círculo */
    display: inline-flex; /* Centra el check dentro del círculo */
    justify-content: center;
    align-items: center;
    width: 20px; /* Tamaño del círculo */
    height: 20px; /* Tamaño del círculo */
    position: absolute; /* Posiciona el círculo */
    left: 0; /* Alinea el círculo al inicio del texto */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta el centro */
    font-size: 12px; /* Tamaño del check */
    font-weight: bold; /* Hace el check más visible */
}