/* style.css */

:root {
    --color-primary: #0056b3; 
    --color-light-bg: #f5f7fa; 
    --color-text-dark: #333333;
    --color-border: rgb(0, 43, 113);
}

body { 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    background-color: var(--color-light-bg); 
    
    /* padding: 20px;  */
}


/* --- SECCION ESPECIALISTAS --- */



h2 { 
    text-align: center; 
    color: var(--color-text-dark); 
    margin-bottom: 50px;
    padding-top: 20px; 
}

/* --- FILTRO --- */
.select-wrapper { 
    width: 300px; 
    margin: 0 auto 40px auto; 
}

#specialty-filter {
    width: 100%; 
    padding: 12px; 
    border-radius: 5px; 
    border: 1px solid var(--color-border);
    color: rgb(0, 43, 113);
    background: white; 
    cursor: pointer; 
    font-size: 16px;
}

/* --- GRID --- */
.specialists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
}

/* --- CARD BASE --- */
.doctor-card {
    background: white; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #eee; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    overflow: hidden; 
    transition: all 0.3s ease;
}

.doctor-card.hidden { display: none; }

.card-header-area { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
}

.info-row { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    position: relative; 
}

/* --- BOTON EXPANDIR --- */
.expand-btn {
    cursor: pointer; 
    font-size: 24px; 
    font-weight: bold; 
    color: var(--color-primary);
    margin-left: 15px; 
    transition: transform 0.3s ease; 
    user-select: none; 
    display: inline-block;
}

.doctor-card.active .expand-btn { transform: rotate(45deg); }

/* --- DESCRIPCION (OCULTA) --- */
.doctor-desc {
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: all 0.4s ease-in-out;
    text-align: left; 
    width: 100%; 
    font-size: 0.9em; 
    color: #666; 
    margin-top: 0; 
    border-top: 0px solid #eee;
}

.doctor-card.active .doctor-desc {
    max-height: 250px; 
    opacity: 1; 
    margin-top: 15px; 
    padding-top: 15px; 
    border-top: 1px solid #eee;
}

/* --- IMAGEN Y SEMICÍRCULO --- */
.profile-container {
    width: 180px; 
    height: 180px; 
    position: relative; 
    z-index: 1; 
    margin-bottom: 25px;
}

.doctor-image {
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    background-size: cover; 
    background-position: center;
}

/* Creamos el arco de color en la mitad inferior */
.profile-container::after {
    content: ''; 
    position: absolute; 
    width: 194px; /* Un poco más grande que la imagen para dejar un margen */
    height: 194px;
    background: transparent; 
    border-radius: 50%; 
    border: 7px solid transparent; /* El grosor del anillo */
    
    /* Coloreamos solo dos lados del borde, y luego lo rotamos 45 grados */
    border-bottom-color: var(--specialty-color, var(--color-primary));
    border-left-color: var(--specialty-color, var(--color-primary));
    
    z-index: -1; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- TEXTOS --- */
.card-body h3 { 
    margin: 0; 
    font-size: 1.2em; 
    color: var(--color-text-dark); 
}

.card-body p { 
    /* El texto tomará automáticamente el color de la especialidad */
    color: var(--specialty-color, var(--color-primary)); 
    font-weight: bold; 
    margin: 2px 0 0 0; 
    font-size: 0.9em; 
    text-transform: uppercase; 
}

/* --- RESPONSIVE MOVIL --- */
@media (max-width: 768px) {

    .specialists-grid {
    margin: 0 auto;
    padding: 0 10px 20px 10px;
    }
    }

@media (max-width: 600px) {

    .specialists-grid {
    margin: 0 auto;
    padding: 0 10px 20px 10px;
    }
    
    .doctor-card { 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 15px; 
    }
    .card-header-area { 
        flex-direction: row; 
        justify-content: space-between; 
    }
    .info-row { 
        justify-content: space-between; 
        flex-grow: 1; 
        text-align: left; 
    }
    .profile-container { 
        width: 50px; 
        height: 50px; 
        margin-bottom: 5px; 
        margin-right: 20px; 
        margin-left: 5px; 
        flex-shrink: 0; 
    }
    .profile-container::after { 
        width: 60px; /* Ajustado para el tamaño móvil */
        height: 60px; 
        border-width: 4px; /* Anillo más delgado en móvil */
    }
    .expand-btn { margin-left: auto; }
    .card-body h3 { font-size: 1.05em; }
    .card-body p { font-size: 0.8em; }
}

/* --- COLORES POR ESPECIALIDAD --- */
/* Cambia el valor HEX para ajustar el tono exacto de cada especialidad */
.doctor-card[data-specialty="fonoaudiologia"] { --specialty-color: #07cca1; }     /* Verde claro */
.doctor-card[data-specialty="materno"] { --specialty-color: #5f27cd; }    /* Morado oscuro */
.doctor-card[data-specialty="endocrino"] { --specialty-color: #feca57; } /* Amarillo */
.doctor-card[data-specialty="cardio"] { --specialty-color: #0abde3; }     /* Azul claro */
.doctor-card[data-specialty="coloprocto"] { --specialty-color: #ff6b81; } /* Rosa sandía */
.doctor-card[data-specialty="psicologia"] { --specialty-color: #c4e538; }       /* Verde lima */
.doctor-card[data-specialty="terapia"] { --specialty-color: #ff4757; }    /* Naranja rojizo */
.doctor-card[data-specialty="oftalmologia"] { --specialty-color: #341f97; }  /* Azul marino profundo */
.doctor-card[data-specialty="gastro"] { --specialty-color: #11acdb; }     /* Mostaza/Dorado */
.doctor-card[data-specialty="nefro"] { --specialty-color: #9b59b6; }      /* Púrpura medio */
.doctor-card[data-specialty="gine"] { --specialty-color: #fd79a8; }       /* Rosa fucsia */
.doctor-card[data-specialty="internista"] { --specialty-color: #ff9f43; } /* Naranja vivo */
.doctor-card[data-specialty="otorrino"] { --specialty-color: #10ac84; }   /* Verde azulado/Teal */
.doctor-card[data-specialty="trauma"] { --specialty-color: #2e86de; }     /* Azul rey */