/* ================================================================= */
/* 1. CONTENEDOR DEL MAPA */
/* ================================================================= */
.mrd-map-container {
    height: 450px; 
    width: 100%;
    
    position: relative;
    
    /* Estilo de Contenedor Moderno */
    background-color: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    border: 1px solid #e9ecef; 
    
    overflow: hidden; 
    z-index: 1; /* Bajo, para pasar por detrás del menú fijo */
    margin-bottom: 30px;
}

/* El mapa Leaflet dentro del contenedor debe tener el 100% */
.mrd-map-container .leaflet-container {
    height: 100%;
    width: 100%;
}

/* ================================================================= */
/* 2. CONTEO DE ESPECIALISTAS */
/* ================================================================= */
.mrd-specialist-count {
    font-size: 1em; 
    font-weight: 500; 
    text-align: center;
    margin-bottom: 20px; 
    color: #17a2b8; /* COLOR PRIMARIO: Cian */
    padding: 10px 0;
    border-bottom: 2px solid #e9ecef; 
}

.mrd-specialist-count strong {
    color: #fd7e14; /* COLOR DE ÉNFASIS: Naranja */
}

/* ================================================================= */
/* 3. ESTILO DEL MARCADOR INDIVIDUAL (PIN) */
/* ================================================================= */
.doctor-map-icon {
    /* COLOR DEL MARCADOR */
    background-color: #00aae4; /* Naranja cálido */
    width: 14px;
    height: 14px;
    border-radius: 50%; 
    border: 3px solid #ffffff; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
}

/* ================================================================= */
/* 4. ESTILOS DE MARKERCLUSTER */
/* ================================================================= */
.marker-cluster-small {
    background-color: rgba(23, 162, 184, 0.6); 
}
.marker-cluster-small div {
    background-color: rgba(23, 162, 184, 0.9);
    color: white;
}

.marker-cluster-medium {
    background-color: rgba(253, 126, 20, 0.6); 
}
.marker-cluster-medium div {
    background-color: rgba(253, 126, 20, 0.9);
    color: white;
}

.marker-cluster-large {
    background-color: rgba(220, 53, 69, 0.6); 
}
.marker-cluster-large div {
    background-color: rgba(220, 53, 69, 0.9);
    color: white;
}

.marker-cluster span {
    font-weight: bold;
}

/* ================================================================= */
/* 5. ESTILO DEL POPUP */
/* ================================================================= */

/* Contenedor del contenido del Popup */
.mrd-popup-content {
    text-align: center;
    padding: 5px;
    font-family: sans-serif;
    line-height: 1.4;
}

/* NUEVO: Título Principal (pm_field_73) */
.mrd-popup-title {
    display: block;
    font-size: 1em; /* Más pequeño que el 1.1em anterior */
    font-weight: bold;
    color: #343a40;
    margin-bottom: 2px;
}

/* NUEVO: Subtítulo (first_name + last_name) */
.mrd-popup-subtitle {
    display: block;
    font-size: 0.9em; /* Ligeramente más pequeño */
    color: #6c757d;
    margin-bottom: 5px;
}

/* NUEVO: Información Adicional (pm_field_35) */
.mrd-popup-info {
    display: block;
    font-size: 0.8em;
    color: #000;
    font-style: italic;
    margin-bottom: 8px;
}


/* Enlace (Ver Perfil) */
.mrd-popup-link {
    display: inline-block;
    padding: 3px 8px;
    background-color: #17a2b8; /* Cian */
    color: white !important;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: 600;
    transition: background-color 0.2s;
}

.mrd-popup-link:hover {
    background-color: #138496; /* Cian más oscuro al pasar el ratón */
}

/* Estilo para el contenedor Leaflet del popup */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Mensaje cuando no hay ubicaciones */
.no-locations-message {
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #6c757d;
}